diff --git a/.DS_Store b/.DS_Store
index 1ec7426..5f53e9a 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/bin/.DS_Store b/bin/.DS_Store
index 3e22d36..daca5ab 100644
Binary files a/bin/.DS_Store and b/bin/.DS_Store differ
diff --git a/bin/target/.DS_Store b/bin/target/.DS_Store
index b8f21db..e440917 100644
Binary files a/bin/target/.DS_Store and b/bin/target/.DS_Store differ
diff --git a/gccoffice_uploads/.DS_Store b/gccoffice_uploads/.DS_Store
index 0737b16..d980238 100644
Binary files a/gccoffice_uploads/.DS_Store and b/gccoffice_uploads/.DS_Store differ
diff --git a/gccoffice_uploads/app_uploads/.DS_Store b/gccoffice_uploads/app_uploads/.DS_Store
index 5748814..d81bc8f 100644
Binary files a/gccoffice_uploads/app_uploads/.DS_Store and b/gccoffice_uploads/app_uploads/.DS_Store differ
diff --git a/gccoffice_uploads/com_petition/.DS_Store b/gccoffice_uploads/com_petition/.DS_Store
new file mode 100644
index 0000000..58520db
Binary files /dev/null and b/gccoffice_uploads/com_petition/.DS_Store differ
diff --git a/gccoffice_uploads/com_petition/com_action_file/.DS_Store b/gccoffice_uploads/com_petition/com_action_file/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/gccoffice_uploads/com_petition/com_action_file/.DS_Store differ
diff --git a/gccoffice_uploads/m_petition/.DS_Store b/gccoffice_uploads/m_petition/.DS_Store
index b3d7857..8e55c9e 100644
Binary files a/gccoffice_uploads/m_petition/.DS_Store and b/gccoffice_uploads/m_petition/.DS_Store differ
diff --git a/gccoffice_uploads/m_petition/m_action_file/.DS_Store b/gccoffice_uploads/m_petition/m_action_file/.DS_Store
index 5008ddf..ed0dc14 100644
Binary files a/gccoffice_uploads/m_petition/m_action_file/.DS_Store and b/gccoffice_uploads/m_petition/m_action_file/.DS_Store differ
diff --git a/gccoffice_uploads/zh_petition/.DS_Store b/gccoffice_uploads/zh_petition/.DS_Store
new file mode 100644
index 0000000..f4d1ecc
Binary files /dev/null and b/gccoffice_uploads/zh_petition/.DS_Store differ
diff --git a/gccoffice_uploads/zh_petition/zh_action_file/.DS_Store b/gccoffice_uploads/zh_petition/zh_action_file/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/gccoffice_uploads/zh_petition/zh_action_file/.DS_Store differ
diff --git a/pom.xml b/pom.xml
index 5071695..56e4b6a 100644
--- a/pom.xml
+++ b/pom.xml
@@ -5,7 +5,8 @@
 	<parent>
 		<groupId>org.springframework.boot</groupId>
 		<artifactId>spring-boot-starter-parent</artifactId>
-		<version>2.5.4</version>
+		<!--<version>2.5.4</version>-->
+		<version>2.5.4</version> <!-- or the latest 3.x version -->
 		<relativePath/> <!-- lookup parent from repository -->
 	</parent>
 	<!--<packaging>war</packaging>-->
@@ -19,6 +20,8 @@
         <bootstrap.version>4.0.0-2</bootstrap.version>
         <webjars-locator.version>0.30</webjars-locator.version>
         <lombok.version>1.18.2</lombok.version>
+        <maven.compiler.source>19</maven.compiler.source>
+    	<maven.compiler.target>19</maven.compiler.target>
 	</properties>
 	<dependencies>
 		
@@ -99,13 +102,33 @@
 			<scope>test</scope>
 		</dependency>
 		-->
+	
+		<dependency>
+	        <groupId>org.apache.poi</groupId>
+	        <artifactId>poi-ooxml</artifactId>
+	        <version>5.2.2</version> 
+	    </dependency>
+	  <!--
+	    <dependency>
+	        <groupId>org.apache.poi</groupId>
+	        <artifactId>poi</artifactId>
+	        <version>5.2.2</version>
+	    </dependency>
+-->
 		<dependency>
 			<groupId>in.gov.chennaicorporation</groupId>
 			<artifactId>Community-Hall-Booking</artifactId>
 			<version>0.0.1-SNAPSHOT</version>
 		</dependency>
+		<!--
+		<dependency>
+		    <groupId>org.jsoup</groupId>
+		    <artifactId>jsoup</artifactId>
+		    <version>1.14.3</version>
+		</dependency>
+		-->
 	</dependencies>
-
+	
 <!-- Spring Cloud dependencies -->
 <!--
     <dependencyManagement>
diff --git a/src/.DS_Store b/src/.DS_Store
index 2d4a22f..a56bd4c 100644
Binary files a/src/.DS_Store and b/src/.DS_Store differ
diff --git a/src/main/.DS_Store b/src/main/.DS_Store
index f97763e..53fe4ec 100644
Binary files a/src/main/.DS_Store and b/src/main/.DS_Store differ
diff --git a/src/main/java/.DS_Store b/src/main/java/.DS_Store
index 8286561..911bbd9 100644
Binary files a/src/main/java/.DS_Store and b/src/main/java/.DS_Store differ
diff --git a/src/main/java/in/.DS_Store b/src/main/java/in/.DS_Store
index 794ddf1..8c05ec3 100644
Binary files a/src/main/java/in/.DS_Store and b/src/main/java/in/.DS_Store differ
diff --git a/src/main/java/in/gov/.DS_Store b/src/main/java/in/gov/.DS_Store
index f25257e..f837ca3 100644
Binary files a/src/main/java/in/gov/.DS_Store and b/src/main/java/in/gov/.DS_Store differ
diff --git a/src/main/java/in/gov/chennaicorporation/.DS_Store b/src/main/java/in/gov/chennaicorporation/.DS_Store
index f1d1ab2..5bc553a 100644
Binary files a/src/main/java/in/gov/chennaicorporation/.DS_Store and b/src/main/java/in/gov/chennaicorporation/.DS_Store differ
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/.DS_Store b/src/main/java/in/gov/chennaicorporation/gccoffice/.DS_Store
index f321549..4fb5bef 100644
Binary files a/src/main/java/in/gov/chennaicorporation/gccoffice/.DS_Store and b/src/main/java/in/gov/chennaicorporation/gccoffice/.DS_Store differ
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/service/Petition.java b/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/service/Petition.java
index 39ef849..9c06f6b 100644
--- a/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/service/Petition.java
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/service/Petition.java
@@ -6,6 +6,7 @@ import java.nio.file.Path;
 import java.nio.file.Paths;
 import java.sql.PreparedStatement;
 import java.sql.Statement;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 import java.util.stream.Collectors;
@@ -51,13 +52,22 @@ public class Petition {
 	public List getComplaintTypeList() {
 		return petitionMaster.getComplaintType();
 	}
-	
+	/*
 	@Transactional(readOnly = true)
 	public static List<ComplaintType> convertToComplaintTypes(List<Map<String, Object>> complaintTypeMaps) {
         return complaintTypeMaps.stream()
                 .map(ComplaintType::new)
                 .collect(Collectors.toList());
     }
+	*/
+	@Transactional(readOnly = true)
+	public static List<ComplaintType> convertToComplaintTypes(List<Map<String, Object>> complaintTypeMaps) {
+	    List<ComplaintType> complaintTypes = new ArrayList<>();
+	    for (Map<String, Object> complaintTypeMap : complaintTypeMaps) {
+	        complaintTypes.add(new ComplaintType(complaintTypeMap));
+	    }
+	    return complaintTypes;
+	}
 	
 	@Transactional(readOnly = true)
 	// Method to map complaint type IDs to their respective complaint types
@@ -334,7 +344,7 @@ public class Petition {
 
 			// Map complaint types
 	        String petitionerComplaint_txt = mapComplaintTypes(complaintTypes, petitionerComplaint);
-			
+			/*
 	        String  sqlQuery = "UPDATE `petition` SET "
 	                + "`petition_type`='"+petitionType+"', `created_by`='"+createdBy+"', `petitioner_name`='"+petitionerName+"', `petitioner_mobile`='"+petitionerMobile+"', "
 	                + "`petitioner_address`='"+petitionerAddress+"', `petitioner_pincode`='"+petitionerPincode+"',"
@@ -343,7 +353,26 @@ public class Petition {
 	        
 			// Use JdbcTemplate's update method to execute the query with parameters
 			jdbcTemplate.update(sqlQuery);
-			
+			*/
+			String sqlQuery = "UPDATE `petition` SET "
+	                + "`petition_type` = ?, `created_by` = ?, `petitioner_name` = ?, `petitioner_mobile` = ?, "
+	                + "`petitioner_address` = ?, `petitioner_pincode` = ?, `petitioner_complaint` = ?, "
+	                + "`petitioner_complaint_txt` = ?, `complaint_nature` = ? "
+	                + "WHERE `petition_no` = ? LIMIT 1";
+
+	        int rowsUpdated = jdbcTemplate.update(sqlQuery, 
+	        	    petitionType, 
+	        	    createdBy, 
+	        	    petitionerName, 
+	        	    petitionerMobile, 
+	        	    petitionerAddress, 
+	        	    petitionerPincode, 
+	        	    petitionerComplaint, 
+	        	    petitionerComplaint_txt,  // Safely includes single quotes
+	        	    complaintNature,  
+	        	    petitionNo
+	        	);
+	        
 			// Add Petition Scan File in the database
 	        //addPetitionFile(createdBy,lastInsertId, petitionNoString, page1, page2, page3, page4);
 	        
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentAssignAPIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentAssignAPIController.java
new file mode 100644
index 0000000..840d834
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentAssignAPIController.java
@@ -0,0 +1,107 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.controller;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import in.gov.chennaicorporation.gccoffice.callcenter.service.AgentAssignService;
+
+
+@RequestMapping("/gcc/api/callcenter/admin")
+@RestController("callcentercontroller")
+public class AgentAssignAPIController
+{
+	private AgentAssignService campaignmaster;
+	
+	@Autowired
+	public AgentAssignAPIController(AgentAssignService campaignmaster) {
+		this.campaignmaster = campaignmaster;
+	}
+	
+	@GetMapping("/getcategory")
+	public List<Map<String, Object>> getcategory()
+	{
+		return campaignmaster.getcategory();			
+	}
+	
+	@GetMapping("/getcampaignbycategory")
+	public List<Map<String, Object>> getcampaignbycategory(@RequestParam int id)
+	{
+		return campaignmaster.getcampaignbycategory(id);
+	}
+	
+	@GetMapping("/getcampaignbyid")
+	public  List<Map<String, Object>> getcampaignbyid(@RequestParam int id)
+	{
+		return campaignmaster.getcampaignbyid(id);
+	}
+	
+	@GetMapping("/getagentsfortask")
+	public  List<Map<String, Object>> getagentsfortask(@RequestParam int id)
+	{
+		return campaignmaster.getagentsfortask(id);
+	}
+	
+	@PostMapping("/addagentsfortask")
+	public ResponseEntity<List<Map<String, Object>>> addagentsfortask(@RequestBody List<Map<String, Object>> requestList) {
+	    System.out.println("Received POST request with data: " + requestList);
+
+	    List<Map<String, Object>> insertedAgents = new ArrayList<>();  // To store successfully inserted agents
+
+	    try {
+	        for (Map<String, Object> request : requestList) {
+	            int agentId = (int) request.get("agentId");
+	            int categoryId = (int) request.get("categoryId");
+	            int campaignId = (int) request.get("campaignId");
+
+	            // Call the service method to insert the agent details
+	            int rowsAffected = campaignmaster.addagentsfortask(agentId, categoryId, campaignId);
+
+	            if (rowsAffected > 0) {
+	                // If the insert was successful, add the agent data to the response list
+	                Map<String, Object> insertedAgent = new HashMap<>();
+	                insertedAgent.put("categoryId", categoryId);
+	                insertedAgent.put("campaignId", campaignId);
+	                insertedAgent.put("agentId", agentId);
+
+	                insertedAgents.add(insertedAgent);  // Add the successfully inserted agent to the list
+	            } else {
+	                return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+	                        .body(Collections.singletonList(Collections.singletonMap("error", "Failed to add agent for campaignId: " + campaignId)));
+	            }
+	        }
+
+	        // Return the list of successfully inserted agents
+	        return ResponseEntity.status(HttpStatus.CREATED).body(insertedAgents);
+
+	    } catch (Exception e) {
+	        return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+	                .body(Collections.singletonList(Collections.singletonMap("error", "Invalid request data: " + e.getMessage())));
+	    }
+	}
+	
+	@GetMapping("/getassignedcampaign")
+	public  List<Map<String, Object>> checkcampaigninassignedtable(@RequestParam int id)
+	{
+		return campaignmaster.checkcampaigninassignedtable(id);
+	}
+
+	@GetMapping("/deleteassignedbyid")
+	public int editagentsfortask(@RequestParam int id)
+	{
+		return campaignmaster.editagentsfortask(id);
+	}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController.java
new file mode 100644
index 0000000..61d8dda
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController.java
@@ -0,0 +1,181 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.controller;
+
+import java.io.IOException;
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import javax.servlet.http.HttpSession;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.RestController;
+
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import in.gov.chennaicorporation.gccoffice.callcenter.service.AgentsService;
+
+@RequestMapping("/gcc/api/agents")
+@RestController
+public class AgentsAPIController {
+
+	  @Autowired
+	  private AgentsService  agentsService;
+	
+	  @GetMapping("/excel")
+	    public List<Map<String, Object>> fetchDataFromExcel(@RequestParam int categoryId,@RequestParam Long campaignId) {
+	        try {
+	            return agentsService.fetchDataFromExcel(categoryId,campaignId);
+	        } catch (IOException e) {
+	            e.printStackTrace();
+	            return null; // Handle the exception as needed
+	        }
+	    }
+	  
+	  
+	  @PostMapping("/saveExcelData")
+	    public String saveExcelData( @RequestParam int categoryId,@RequestParam Long campaignId,@RequestParam String filePath) {
+
+	        try {
+	            // Fetch data from Excel
+	            List<Map<String, Object>> excelData = agentsService.getExcelData(categoryId,campaignId, filePath);
+	            // Save data into the database
+	            agentsService.saveExcelData(excelData);
+	            return "Data saved successfully";
+	        } catch (IOException e) {
+	            e.printStackTrace();
+	            return "Failed to save data";
+	        }
+	    }
+	  
+	  @GetMapping("/getdataByIds")
+	  public List<Map<String, Object>> getdataByIds(@RequestParam List<Integer> ids) {
+	      return agentsService.getdataByIds(ids);
+	  }
+	  
+	  @GetMapping("/getPendingDataByIds")
+	  public List<Map<String, Object>> getPendingDataByIds(@RequestParam List<Integer> ids) {
+	      return agentsService.getPendingDataByIds(ids);
+	  }
+	  
+	  @PostMapping("/savecall")
+	  public ResponseEntity<String> savecall(@RequestBody Map<String, Object> callData) {	      
+	      String call_status = (String) callData.get("call_status");
+	      String remarks = (String) callData.get("remarks");
+	      int data_id = (int) callData.get("data_id");
+	      int agent_id=(int) callData.get("agent_id");
+	      int campaign_id=(int) callData.get("campaign_id");
+	      
+	      // Add a debug statement to check the received values
+	      System.out.println("Received call_status: " + call_status);
+
+	      if (call_status == null || call_status.isEmpty()) {
+	          return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Call status is required.");
+	      }
+
+	      agentsService.saveCallLogs(call_status, remarks,data_id);
+	      
+	      agentsService.saveInLogsTable(campaign_id, agent_id, data_id,call_status,remarks);
+	      
+	      return ResponseEntity.ok("Data Inserted successfully.");
+	  }
+	  
+//	  @PostMapping("/updatecall")
+//	  public ResponseEntity<String> updatecall(@RequestBody Map<String, Object> callData)
+//	  {
+//		  String call_status = (String) callData.get("call_status");
+//	      int data_id = (int) callData.get("data_id");
+//	      int agent_id=(int) callData.get("agent_id");
+//	      int campaign_id=(int) callData.get("campaign_id");
+//	      
+//	      if (call_status == null || call_status.isEmpty()) {
+//	          return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Call status is required.");
+//	      }
+//	      
+//	      agentsService.saveInLogsTable(campaign_id, agent_id, data_id,call_status);
+//	      
+//	      return ResponseEntity.ok("Data Inserted successfully.");
+//	  }
+	  
+	  @GetMapping("/getAgentNames")
+	  public  List<Map<String, Object>> getAgentsNameById(@RequestParam List<Integer> agentIds){
+		  return agentsService.getAgentsNameById(agentIds);
+	  }
+	  
+	  @GetMapping("/getDataFields")
+	    public List<Map<String, Object>> getDataDetailsById(
+	            @RequestParam String originalDataIds) throws JsonProcessingException {
+
+	        // Parse originalDataIds from JSON string
+	        ObjectMapper objectMapper = new ObjectMapper();
+	        List<List<Integer>> originalDataIdsList = objectMapper.readValue(originalDataIds, new TypeReference<List<List<Integer>>>() {});
+
+	        // Prepare a list to hold the results for each sub-array
+	        List<Map<String, Object>> groupedResults = new ArrayList<>();
+
+	        // Iterate through each sub-array of originalDataIds
+	        for (List<Integer> dataIds : originalDataIdsList) {
+	            List<Map<String, Object>> results = agentsService.getDataDetailsById(dataIds);
+	            // Group results according to your business logic
+	            Map<String, Object> combinedResult = new HashMap<>();
+	            for (Map<String, Object> result : results) {
+	                combinedResult.putAll(result);
+	            }
+	            groupedResults.add(combinedResult);
+	        }
+
+	        return groupedResults;
+	    }
+	  
+	  
+	  @GetMapping("/getCompletedDataFields")
+	    public Map<String, Object> getCompletedDataDetailsById(
+	            @RequestParam String originalCDataIds) throws JsonProcessingException {
+
+	        // Parse originalDataIds from JSON string
+	        ObjectMapper objectMapper = new ObjectMapper();
+	        List<Integer> originalCDataIdsList = objectMapper.readValue(originalCDataIds, new TypeReference<List<Integer>>() {});
+
+	        // Prepare a list to hold the results for each sub-array
+	        //List<Map<String, Object>> groupedCompletedResults = new ArrayList<>();
+	        List<Integer> completedDataIds = new ArrayList<>(); // List to hold data_ids with Complete_count > 0
+
+	        // Iterate through each sub-array of originalDataIds
+	       
+	            List<Map<String, Object>> results = agentsService.getCompletedDataDetailsById(originalCDataIdsList);
+	            // Group results according to your business logic
+	            //Map<String, Object> CompletedcombinedResult = new HashMap<>();
+	            for (Map<String, Object> result : results) {
+	            	
+	            	if (result.get("Complete_count") != null && ((Number) result.get("Complete_count")).intValue() > 0) {
+	            		completedDataIds.add((Integer) result.get("data_id"));
+	                }
+	            	//groupedCompletedResults.add(result);
+	            }
+	            
+	        
+
+	     // Prepare the final response containing grouped results and completed dataIds
+	        Map<String, Object> response = new HashMap<>();
+	        //response.put("groupedCompletedResults", groupedCompletedResults);
+	        response.put("completedDataIds", completedDataIds);
+	        return response;
+	    }
+	
+	  @GetMapping("/getCompletedDataById")
+	  public  List<Map<String, Object>> getCompletedDataById(@RequestParam List<Integer> completedDataIds){
+		  return agentsService.getCompletedDataById(completedDataIds);
+	  }
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AttendanceAPIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AttendanceAPIController.java
new file mode 100644
index 0000000..a492a6a
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AttendanceAPIController.java
@@ -0,0 +1,36 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.controller;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+
+@RequestMapping("/gcc/api/attendance")
+@RestController
+public class AttendanceAPIController {
+
+	private AppConfig appConfig;
+	private final RestTemplate restTemplate;
+	
+	@Autowired
+    public AttendanceAPIController(RestTemplate restTemplate, AppConfig appConfig) {
+        this.restTemplate = restTemplate;
+        this.appConfig = appConfig;
+    }
+
+	
+	
+    @GetMapping("/getAttendancedetails")
+	 public String getAttendancedetails(@RequestParam String fromDate,@RequestParam String toDate){
+		 String apiUrl = appConfig.attendanceReport + "/callcenter/api/attendance/getattendancereport"+"?fromDate="+ fromDate + "&toDate="+ toDate;
+		 ResponseEntity<String> responseEntity = restTemplate.getForEntity(apiUrl, String.class);
+		 return responseEntity.getBody();
+	 }
+	
+
+}
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/CampaignAPIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/CampaignAPIController.java
new file mode 100644
index 0000000..5aaa949
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/CampaignAPIController.java
@@ -0,0 +1,247 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.controller;
+
+import org.apache.poi.ss.usermodel.*;
+import org.apache.poi.xssf.usermodel.XSSFWorkbook;
+
+import org.springframework.web.multipart.MultipartFile;
+
+import java.io.*;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.text.SimpleDateFormat;
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+import java.util.*;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.core.env.Environment;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+
+import in.gov.chennaicorporation.gccoffice.callcenter.service.CampaignService;
+
+@RestController("callcenterapicontroller")
+@RequestMapping("gcc/api/campaign")
+public class CampaignAPIController {
+	
+	 @Autowired
+	 private CampaignService campaignService;
+
+	 @Autowired
+	 private Environment environment;
+	 
+	 @GetMapping("/getCampaignDetails")
+	 public ResponseEntity<Map<String, Object>> getCampaignDetails() {
+	     Map<String, Object> response = new HashMap<>();
+	     List<Map<String, Object>> data = campaignService.getCampaignDetails();
+	     
+	     response.put("data", data);
+	     return ResponseEntity.ok(response);
+	 }
+	 
+	 
+	 // Endpoint to get campaign details by ID
+	    @GetMapping("/getCampaignDetailsbyId")
+	    public Map<String, Object> getCampaignDetailsById(@RequestParam("campaign_id") Long campaignId) {
+	        return campaignService.getCampaignDetailsById(campaignId);
+	    }
+
+	    @PostMapping("/updateCampaign")
+	    public ResponseEntity<String> updateCampaign(@RequestParam Long campaign_id,
+	                                                  @RequestParam String campaign_name,
+	                                                  @RequestParam String start_date,
+	                                                  @RequestParam String end_date,
+	                                                  @RequestParam Integer no_of_agents,
+	                                                  @RequestParam Integer calls_per_agent,
+	                                                  @RequestParam String description) {
+	    	if (campaign_id == null) {
+	            return ResponseEntity.badRequest().body("Campaign ID is required.");
+	        }
+	    	
+	        try {
+	            campaignService.updateCampaign(campaign_id, campaign_name, start_date, end_date, no_of_agents, calls_per_agent, description);
+	            return ResponseEntity.ok("Campaign updated successfully.");
+	        } catch (Exception e) {
+	            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error updating campaign.");
+	        }
+	    }
+
+
+	    @PostMapping("/save")
+	    public Map<String, String> saveCampaignDetails(
+	            @RequestParam("name") String campaignName,
+	            @RequestParam("category") String categoryId,
+	            @RequestParam("eventstartdate") String startDate,
+	            @RequestParam("eventenddate") String endDate,
+	            @RequestParam("no_of_agent") int noOfAgents,
+	            @RequestParam("no_of_calls") int callsPerAgent,
+	            @RequestParam("description") String description,
+	            @RequestParam("file") MultipartFile file) {
+
+	        // Creating a Map to store the form data with DB field names
+	        Map<String, Object> campaignDetails = new HashMap<>();
+	        campaignDetails.put("campaign_name", campaignName);
+	        campaignDetails.put("category_id", categoryId);
+	        campaignDetails.put("start_date", startDate);
+	        campaignDetails.put("end_date", endDate);
+	        campaignDetails.put("no_of_agents", noOfAgents);
+	        campaignDetails.put("calls_per_agent", callsPerAgent);
+	        campaignDetails.put("description", description);
+
+	        try {
+	            // Handle file upload
+	            String fileUrl = saveFile(file);
+	            campaignDetails.put("excel_url", fileUrl);
+
+	            // Read data from the uploaded Excel file
+	            List<Map<String, Object>> excelData = readExcelData(file.getInputStream());
+	            
+	            // Log the campaign details and Excel data to the console
+	            System.out.println("Campaign Details: " + campaignDetails);  // Print campaign details
+	            System.out.println("Excel Data: " + excelData);  // Print Excel data
+
+	            // Optionally, you can process the excelData here or save it to the database
+
+	            // Save campaign details
+	            campaignService.saveCampaignDetails(campaignDetails);
+
+	            // Returning success response
+	            Map<String, String> response = new HashMap<>();
+	            response.put("status", "success");
+	            response.put("message", "Campaign details saved successfully");
+	            response.put("category_id", categoryId);  // Include the category_id in the response
+	            return response;
+
+	        } catch (IOException e) {
+	            e.printStackTrace();
+	            Map<String, String> response = new HashMap<>();
+	            response.put("status", "error");
+	            response.put("message", "Failed to save campaign details");
+	            
+	            return response;
+	        }
+	    }
+	    //save file and get path
+	    private String saveFile(MultipartFile file) throws IOException {
+	    	
+	    	String uploadDirectory = environment.getProperty("file.upload.directory");
+	        
+	        String folderName = environment.getProperty("campaign.foldername");
+	        	        
+	        String fileName = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyyMMdd_HHmmss")) + "_" + file.getOriginalFilename();
+
+	        String folderPath = uploadDirectory + "/" + folderName + "/excel/";
+	        
+	        
+	        Path dirPath = Paths.get(folderPath);
+	        if (!Files.exists(dirPath)) {
+	            Files.createDirectories(dirPath);
+	        }
+	               
+	        Path filePath = dirPath.resolve(fileName);
+	        
+	        Files.write(filePath, file.getBytes());
+	        
+	        return filePath.toAbsolutePath().toString();
+	    }
+
+
+	    
+	    //Read excel data method
+	    private List<Map<String, Object>> readExcelData(InputStream inputStream) throws IOException {
+	        List<Map<String, Object>> dataList = new ArrayList<>();
+
+	        try (Workbook workbook = new XSSFWorkbook(inputStream)) {
+	            Sheet sheet = workbook.getSheetAt(0); // Get the first sheet
+	            FormulaEvaluator formulaEvaluator = workbook.getCreationHelper().createFormulaEvaluator();
+
+	            for (Row row : sheet) {
+	                Map<String, Object> dataMap = new HashMap<>();
+	                for (Cell cell : row) {
+	                    String cellValue = "";
+	                    switch (formulaEvaluator.evaluateInCell(cell).getCellType()) {
+	                        case STRING:
+	                            cellValue = cell.getStringCellValue();
+	                            break;
+	                        case NUMERIC:
+	                            if (DateUtil.isCellDateFormatted(cell)) {
+	                                cellValue = new SimpleDateFormat("yyyy-MM-dd").format(cell.getDateCellValue());
+	                            } else {
+	                                cellValue = String.valueOf(cell.getNumericCellValue());
+	                            }
+	                            break;
+	                        case BOOLEAN:
+	                            cellValue = String.valueOf(cell.getBooleanCellValue());
+	                            break;
+	                        default:
+	                            cellValue = "Unknown";
+	                            break;
+	                    }
+	                    dataMap.put("column" + cell.getColumnIndex(), cellValue);
+	                }
+	                if (!dataMap.isEmpty()) {
+	                    dataList.add(dataMap);
+	                }
+	            }
+	        }
+
+	        return dataList;
+	    }
+	    
+	    
+	    @GetMapping("/getExcelData")
+	    public ResponseEntity<List<Map<String, Object>>> getExcelData(@RequestParam("filePath") String filePath) {
+	        try {
+	            // Read data from the uploaded Excel file
+	            List<Map<String, Object>> excelData = readExcelData(new FileInputStream(filePath));
+	            
+	            // Return data as JSON
+	            return ResponseEntity.ok(excelData);
+	            
+	        } catch (IOException e) {
+	            e.printStackTrace();
+	            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
+	        }
+	    }
+
+	    
+	    @GetMapping("/getlastCampaignid")
+	    public List<Map<String, Object>> getLastRow()
+	    {
+	    	return campaignService.getLastRow();
+	    }
+	    
+	    @GetMapping("/startcampaign")
+	    public List<Map<String, Object>> getDataforAgents(@RequestParam int campaign_id,@RequestParam int calls_per_agent)
+	    {  	  
+	  		return campaignService.getDataforAgents(campaign_id, calls_per_agent);
+	    }
+	    
+	    @GetMapping("/viewcampaignstatus")
+	    public List<Map<String, Object>> viewcampaignstatus(@RequestParam int campaign_id)
+	    {  	  
+	  		return campaignService.viewcampaignstatus(campaign_id);
+	    }
+	    
+	    @GetMapping("/viewcompletedby")
+	    public List<Map<String, Object>> viewcompletedby(@RequestParam int campaign_id,@RequestParam int agent_id)
+	    {  	  
+	  		return campaignService.viewcompletedby(campaign_id,agent_id);
+	    }
+	    
+
+	    
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/CategoryAPIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/CategoryAPIController.java
new file mode 100644
index 0000000..a853302
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/CategoryAPIController.java
@@ -0,0 +1,128 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.controller;
+
+import java.util.List;
+
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import in.gov.chennaicorporation.gccoffice.callcenter.service.AddcategoryServices;
+
+
+@RequestMapping("/gcc/api/category")
+@RestController
+public class CategoryAPIController {
+	
+	 @Autowired
+	 private AddcategoryServices addCategoryServices; // Injecting the service
+
+	
+	 // Endpoint to save category details
+    @PostMapping("/save")
+    public ResponseEntity<String> saveCategoryDetails(@RequestBody Map<String, Object> payload) {
+        try {
+            addCategoryServices.saveCategoryDetails(payload); // Call the service method to save category details
+            return ResponseEntity.ok("Category details saved successfully.");
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.badRequest().body("Error: " + e.getMessage());
+        } catch (Exception e) {
+            return ResponseEntity.status(500).body("Error saving category details: " + e.getMessage());
+        }
+    }
+    
+    // Endpoint to get all categories
+    @GetMapping("/list")
+    public List<Map<String, Object>> getAllCategories() {
+        return addCategoryServices.getAllCategories();
+    }
+    
+ // Endpoint to get a category by its ID
+    @GetMapping("/showcategoryId")
+    public ResponseEntity<?> showCategoryId(@RequestParam("category_id") int categoryId) {
+        try {
+            Map<String, Object> category = addCategoryServices.showCategory(categoryId);
+            if (category != null && !category.isEmpty()) {
+                return ResponseEntity.ok(category);
+            } else {
+                return ResponseEntity.status(HttpStatus.NOT_FOUND).body("Category not found");
+            }
+        } catch (Exception e) {
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                    .body("Error retrieving category: " + e.getMessage());
+        }
+    }
+
+
+    @PutMapping("/update/{categoryId}")
+    public ResponseEntity<String> updateCategory(
+            @PathVariable("categoryId") int categoryId,
+            @RequestParam String categoryName) {
+
+        // Validate input
+        if (categoryName == null || categoryName.trim().isEmpty()) {
+            return ResponseEntity.badRequest().body("Category name cannot be empty");
+        }
+
+        try {
+            // Call the service method to update the category
+            int rowsAffected = addCategoryServices.updateCategory(categoryId, categoryName);
+            if (rowsAffected > 0) {
+                return ResponseEntity.ok("Category updated successfully");
+            } else {
+                return ResponseEntity.status(HttpStatus.NOT_FOUND).body("Category not found or update failed");
+            }
+        } catch (Exception e) {
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                    .body("Error updating category: " + e.getMessage());
+        }
+    }
+
+
+ // Endpoint to delete a category by its ID
+    @DeleteMapping("/delete/{categoryId}")
+    public ResponseEntity<String> deleteCategory(
+            @PathVariable("categoryId") int categoryId) {
+
+        try {
+            // Call the service method to delete the category
+            addCategoryServices.deleteCategory(categoryId);
+            return ResponseEntity.ok("Category deleted successfully");
+        } catch (Exception e) {
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                    .body("Error deleting category: " + e.getMessage());
+        }
+    }
+
+    
+//hari category api populate 
+    
+	@GetMapping("/getcategory")
+	public List<Map<String, Object>> getcategory()
+	{
+		return addCategoryServices.getcategory();
+	}
+	
+
+	@GetMapping("/getcampaignbycategory")
+	public List<Map<String, Object>> getcampaignbycategory(@RequestParam int id)
+	{
+		return addCategoryServices.getcampaignbycategory(id);
+	}
+	
+	
+	
+	
+
+    
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController.java
new file mode 100644
index 0000000..1065826
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController.java
@@ -0,0 +1,204 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.controller;
+
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+import java.util.Map;
+
+import javax.servlet.http.HttpSession;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.client.RestTemplate;
+
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import in.gov.chennaicorporation.gccoffice.callcenter.service.AddcategoryServices;
+import in.gov.chennaicorporation.gccoffice.callcenter.service.AgentsService;
+import in.gov.chennaicorporation.gccoffice.callcenter.service.AttendanceService;
+import in.gov.chennaicorporation.gccoffice.callcenter.service.AgentAssignService;
+import in.gov.chennaicorporation.gccoffice.callcenter.service.CampaignService;
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+
+@RequestMapping("/gcc/callcenter")
+@Controller("callCenterCampaignMainController")
+public class MainController {
+	
+	
+	
+	@Autowired
+	private AgentAssignService campaignmaster;
+	
+	@Autowired
+    private CampaignService campaignService;
+
+	@Autowired
+	private AddcategoryServices addCategoryServices;
+	
+	@Autowired
+	private AgentsService  agentsService;
+	
+	@Autowired
+	private AttendanceService attendanceSerivce;
+	
+	private AppConfig appConfig;
+	private RestTemplate restTemplate;
+	
+	@Autowired
+	public MainController(AgentAssignService campaignmaster,AgentsService  agentsService,CampaignService campaignService,AddcategoryServices addCategoryServices,RestTemplate restTemplate, AppConfig appConfig)
+	{		
+		this.campaignmaster=campaignmaster;
+		this.campaignService=campaignService;
+		this.addCategoryServices=addCategoryServices;
+		this.agentsService=agentsService;
+		this.restTemplate = restTemplate;
+        this.appConfig = appConfig;
+		
+	}
+	
+
+	@GetMapping("/admin/addcategory")
+
+	public String addcategory(Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+
+		List<Map<String, Object>> categories = addCategoryServices.getAllCategories();
+
+		System.out.println(categories);
+
+		model.addAttribute("categories", categories);
+
+		return "modules/callcenter/addcategory";
+
+	}
+	
+	@GetMapping("/admin/createcampaign")
+
+    public String createcampaign(Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+
+        List<Map<String, Object>> campaigns = campaignService.getCampaignDetails();
+        
+
+        System.out.println("campaignlist:"+campaigns);
+
+        model.addAttribute("campaigns", campaigns);
+
+        return "modules/callcenter/createcampaign"; // Name of the Thymeleaf template (e.g., campaignList.html)
+
+    }
+	
+	@GetMapping("/admin/campaignlist")
+	public String viewCampaignList(Model model)
+	{	
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+		
+		List<Map<String, Object>> campaigns = campaignService.getDetailsForStart();
+        	
+        model.addAttribute("campaigns", campaigns);
+        
+        List<Map<String, Object>> activeCampaigns =campaignService.getActiveCampaigns();
+	    model.addAttribute("activeCampaigns", activeCampaigns);
+        
+		return "modules/callcenter/campaignlist";
+	}
+
+	@GetMapping("/admin/assignagents")
+	public String viewAssignAgents(Model model)
+	{		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+		
+		return "modules/callcenter/assignagents";
+	}
+	
+	
+	@GetMapping("/agentscampaign")
+    public String targetPage(Model model)
+	{   
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		int userId = Integer.parseInt(LoginUserId);
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String agent_name=LoginUserInfo.getCurrentUserDetails().getUsername();
+		model.addAttribute("agent_name", agent_name);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+		
+        List<Map<String, Object>> agentsCampaigns=agentsService.getAgentsALLCampaigns(userId);
+        model.addAttribute("agentsCampaigns", agentsCampaigns);
+        
+        return "modules/callcenter/agentscampaign";
+    }
+	
+	@GetMapping("/attendancereport")
+	public String AttendanceList(
+	        @RequestParam(required = false) String fromDate,
+	        @RequestParam(required = false) String toDate,
+	        Model model) {
+	    List<Map<String, Object>> attendanceData = Collections.emptyList();
+
+	    if (fromDate != null && !fromDate.isEmpty() && toDate != null && !toDate.isEmpty()) {
+	        String apiUrl = appConfig.attendanceReport + "/callcenter/api/attendance/getattendancereport?fromDate=" + fromDate + "&toDate=" + toDate;
+
+	        try {
+	            ResponseEntity<String> responseEntity = restTemplate.getForEntity(apiUrl, String.class);
+	            String responseBody = responseEntity.getBody();
+
+	            if (responseBody != null && !responseBody.isEmpty()) {
+	                ObjectMapper objectMapper = new ObjectMapper();
+	                if (responseBody.trim().startsWith("{")) {
+	                    // Single object response
+	                    Map<String, Object> singleData = objectMapper.readValue(responseBody, new TypeReference<>() {});
+	                    attendanceData = List.of(singleData);
+	                } else {
+	                    // Array response
+	                    attendanceData = objectMapper.readValue(responseBody, new TypeReference<>() {});
+	                }
+	            }
+	        } catch (Exception e) {
+	            System.err.println("Error fetching attendance data: " + e.getMessage());
+	        }
+	    }
+
+	    model.addAttribute("attendanceData", attendanceData);
+	    model.addAttribute("fromDate", fromDate);
+	    model.addAttribute("toDate",  toDate);
+	    model.addAttribute("LoginUserId", LoginUserInfo.getLoginUserId());
+	    model.addAttribute("UserRole", LoginUserInfo.getUserRole());
+
+	    return "modules/callcenter/attendancereport";
+	}
+	
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/WhatsappController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/WhatsappController.java
new file mode 100644
index 0000000..f0ae9c8
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/WhatsappController.java
@@ -0,0 +1,26 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.controller;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import in.gov.chennaicorporation.gccoffice.callcenter.service.WhatsappMsgService;
+
+@RestController
+@RequestMapping("/gcc/api/whatsapp")
+public class WhatsappController {
+
+    @Autowired
+    private WhatsappMsgService whatsappMsgService;
+
+    @PostMapping("/send-whatsapp-message")
+    public ResponseEntity<String> sendWhatsAppMessage(@RequestParam String msgUrl) {
+        String response = whatsappMsgService.sendMsg(msgUrl);
+        return ResponseEntity.ok(response);
+    }
+
+}
+
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AddcategoryServices.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AddcategoryServices.java
new file mode 100644
index 0000000..5098368
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AddcategoryServices.java
@@ -0,0 +1,99 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.service;
+
+import java.sql.ResultSet;
+import java.sql.SQLException;
+import java.util.List;
+import java.util.Locale.Category;
+import java.util.Map;
+
+import javax.sql.DataSource;
+import javax.transaction.Transactional;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+
+@Service
+public class AddcategoryServices {
+	
+private JdbcTemplate jdbcTemplate;
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysql1913CampaignDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+
+	    
+	public void saveCategoryDetails(Map<String, Object> categoryData) {
+	    String sql = "INSERT INTO category (category_name, isactive, isdelete, created_date) VALUES (?, 1, 0, CURRENT_TIMESTAMP)";
+
+	    // Ensure that the key "categoryname" matches exactly what is being sent from the frontend
+	    String categoryName = (String) categoryData.get("categoryname");
+
+	    // Check if categoryName is null or empty and handle it properly
+	    if (categoryName == null || categoryName.trim().isEmpty()) {
+	        throw new IllegalArgumentException("Category name cannot be null or empty");
+	    }
+
+	    jdbcTemplate.update(sql, categoryName);
+	}
+	
+	@Transactional
+	public List<Map<String, Object>> getAllCategories() {
+		
+		String SqlQuery = "SELECT  category_id,category_name FROM category;";
+
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		return result;	
+	}
+	
+	
+	
+
+	
+	// Method to show a category by its ID
+	public Map<String, Object> showCategory(int categoryId) {
+	    String sql = "SELECT category_id, category_name FROM category WHERE category_id = ?";
+	    return jdbcTemplate.queryForMap(sql, categoryId);
+	}
+
+	
+	// Method to update a category's name by its ID
+	public int updateCategory(int categoryId, String categoryName) {
+	    String sql = "UPDATE category SET category_name = ? WHERE category_id = ? AND isactive = 1 AND isdelete = 0";
+	    return jdbcTemplate.update(sql, categoryName, categoryId);
+	}
+
+
+
+	
+    // Method to delete a category by its name
+    public void deleteCategory(int categoryId) {
+        String sql = "DELETE FROM category WHERE category_id = ?";
+        jdbcTemplate.update(sql, categoryId);
+    }
+    
+    
+    //hari populate category services
+    @Transactional
+
+	public List<Map<String, Object>> getcategory() {
+
+		String sqlQuery = "SELECT category_id,category_name FROM category where isactive='1' and isdelete='0'";
+
+		return jdbcTemplate.queryForList(sqlQuery);
+
+	}
+
+	@Transactional
+
+	public List<Map<String, Object>> getcampaignbycategory(int id) {
+
+		String sqlQuery = "SELECT cr.campaign_id,cr.campaign_name FROM campaign_request cr JOIN category c ON cr.category_id=c.category_id where cr.category_id=? and cr.isactive='1'";
+
+		return jdbcTemplate.queryForList(sqlQuery,id);
+
+	}
+    
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentAssignService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentAssignService.java
new file mode 100644
index 0000000..72d13eb
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentAssignService.java
@@ -0,0 +1,97 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.service;
+
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+import javax.transaction.Transactional;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+
+
+@Service
+public class AgentAssignService
+{
+	private JdbcTemplate jdbcTemplate;
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysql1913CampaignDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	@Autowired
+	public void setDataSource2(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	@Autowired
+    private JdbcTemplate jdbcTemplate2;
+	
+
+	@Transactional
+	public List<Map<String, Object>> getcategory() {
+		String sqlQuery = "SELECT category_id,category_name FROM gcc_1913_campaign.category where isactive='1' and isdelete='0'";
+		return jdbcTemplate.queryForList(sqlQuery);
+	}
+	
+	@Transactional
+	public List<Map<String, Object>> getcampaignbycategory(int id) {
+		String sqlQuery = "SELECT cr.campaign_id, cr.campaign_name " +
+                "FROM gcc_1913_campaign.campaign_request cr " +
+                "JOIN gcc_1913_campaign.category c ON cr.category_id = c.category_id " +
+                "WHERE cr.category_id = ? " +
+                "AND cr.isactive = '1' ";
+		return jdbcTemplate.queryForList(sqlQuery,id);
+	}
+	
+	@Transactional
+	public List<Map<String, Object>> getcampaignbyid(int id) {
+		String sqlQuery = "SELECT * FROM gcc_1913_campaign.campaign_request where isactive='1' and campaign_id=?";
+		return jdbcTemplate.queryForList(sqlQuery,id);
+	}
+	
+	@Transactional
+	public List<Map<String, Object>> getagentsfortask(int id) {
+		String sqlQuery = "SELECT al.agent_id,al.agent_name\r\n"
+				+ "FROM gcc_1913_qaqc.agents_list al\r\n"
+				+ "LEFT JOIN gcc_1913_campaign.agent_assign aa ON al.agent_id = aa.agent_id  AND  aa.isactive = '1' AND aa.campaign_id = ?\r\n"
+				+ "WHERE aa.agent_id IS NULL AND al.calling_type='OUTBOUND'AND al.isactive='1' AND al.isdelete='0'";
+		return jdbcTemplate.queryForList(sqlQuery,id);
+	}
+	
+	
+	@Transactional
+	public int addagentsfortask(int agent_id, int category_id, int campaign_id) {
+	    String insertSql = "INSERT INTO gcc_1913_campaign.agent_assign (agent_id, category_id, campaign_id) VALUES (?, ?, ?)";
+	    int rowsInserted = jdbcTemplate.update(insertSql, agent_id, category_id, campaign_id);
+
+	    return rowsInserted;
+	}
+
+	
+	@Transactional
+	public List<Map<String, Object>> checkcampaigninassignedtable(int id)
+	{
+		String sqlQuery = "SELECT al.agent_id,al.agent_name,aa.assigned_id\r\n"
+				+ "FROM gcc_1913_qaqc.agents_list al\r\n"
+				+ "JOIN gcc_1913_campaign.agent_assign aa ON al.agent_id = aa.agent_id\r\n"
+				+ "JOIN gcc_1913_campaign.campaign_request c ON aa.campaign_id=c.campaign_id\r\n"
+				+ "WHERE aa.campaign_id = ? AND aa.isactive = '1' AND al.calling_type='OUTBOUND'AND al.isactive='1' AND al.isdelete='0'";
+		return jdbcTemplate.queryForList(sqlQuery,id);
+	}
+	
+	@Transactional
+	public int editagentsfortask(int assigned_id) {
+	    String updateSql = "UPDATE gcc_1913_campaign.agent_assign SET isactive='0', isdelete='1',status='NOT_ASSIGNED' WHERE assigned_id=?";
+	    int rowsInserted = jdbcTemplate.update(updateSql,assigned_id);
+
+	    return rowsInserted;
+	}
+	
+	
+
+	
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentsService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentsService.java
new file mode 100644
index 0000000..5d324ee
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentsService.java
@@ -0,0 +1,349 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.service;
+
+import java.io.File;
+import java.io.FileInputStream;
+import java.io.IOException;
+import java.text.SimpleDateFormat;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+import javax.transaction.Transactional;
+
+import org.apache.poi.ss.usermodel.Cell;
+import org.apache.poi.ss.usermodel.DateUtil;
+import org.apache.poi.ss.usermodel.Row;
+import org.apache.poi.ss.usermodel.Sheet;
+import org.apache.poi.ss.usermodel.Workbook;
+import org.apache.poi.xssf.usermodel.XSSFWorkbook;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+
+@Service
+public class AgentsService {
+	
+	private JdbcTemplate jdbcTemplate;
+	
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysql1913CampaignDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	@Autowired
+	public void setDataSource2(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	@Autowired
+    private JdbcTemplate jdbcTemplate2;
+	
+
+		// Utility method to get cell value based on type
+		private String getCellValue(Cell cell) {
+		    if (cell == null) {
+		        return "";
+		    }
+		    switch (cell.getCellType()) {
+		        case STRING:
+		            return cell.getStringCellValue();
+		        case NUMERIC:
+		            // Check if the numeric cell contains a date
+		            if (DateUtil.isCellDateFormatted(cell)) {
+		                return new SimpleDateFormat("yyyy-MM-dd").format(cell.getDateCellValue());
+		            }
+		            return String.valueOf((long) cell.getNumericCellValue()); // Cast to long to avoid scientific notation
+		        case BOOLEAN:
+		            return String.valueOf(cell.getBooleanCellValue());
+		        case FORMULA:
+		            return cell.getCellFormula();
+		        default:
+		            return "";
+		    }
+		}
+
+		// Parse integer values (for ID)
+		private Integer parseInteger(String value) {
+		    try {
+		        return Integer.parseInt(value);
+		    } catch (NumberFormatException e) {
+		        return null; // return null if parsing fails
+		    }
+		}
+
+		// Parse long values (for Mobile number)
+		private Long parseLong(String value) {
+		    try {
+		        return Long.parseLong(value);
+		    } catch (NumberFormatException e) {
+		        return null; // return null if parsing fails
+		    }
+		}
+
+		// Example fetch method
+		public List<Map<String, Object>> fetchDataFromExcel(int categoryId,Long campaignId) throws IOException {
+		    String excelUrl = getExcelUrlByCampaignId(campaignId);
+		    List<Map<String, Object>>data=getExcelData(categoryId,campaignId, excelUrl);
+		    return saveExcelData(data);
+		}
+		
+		public String getExcelUrlByCampaignId(Long campaignId) {
+	        String sql = "SELECT excel_url\r\n"
+	        		+ "FROM gcc_1913_campaign.campaign_request\r\n"
+	        		+ "WHERE campaign_id = ?";
+	        return jdbcTemplate.queryForObject(sql, String.class, campaignId);
+	    }
+		
+		 public List<Map<String, Object>> getExcelData(int categoryId,Long campaignId,String filePath) throws IOException {
+			    List<Map<String, Object>> data = new ArrayList<>();
+			    File file = new File(filePath);
+			    
+			    try (FileInputStream fis = new FileInputStream(file);
+			         Workbook workbook = new XSSFWorkbook(fis)) {
+
+			        Sheet sheet = workbook.getSheetAt(0);
+			        for (Row row : sheet) {
+			            if (row.getRowNum() == 0) continue; // skip header row
+
+			            Map<String, Object> rowData = new HashMap<>();
+			            
+			            // Add the campaign_id and category_id to each row
+
+		                rowData.put("category_id", categoryId);
+
+		                rowData.put("campaign_id", campaignId);
+
+			            // Convert ID to Integer
+			            rowData.put("ID", getCellValue(row.getCell(0)));
+			            
+			            // Name remains String
+			            rowData.put("Name", getCellValue(row.getCell(1)));
+			            
+			            // Address remains String
+			            rowData.put("Address", getCellValue(row.getCell(2)));
+			            
+			            // Dues remains String (you can convert if necessary)
+			            rowData.put("Balance amount",  parseLong(getCellValue(row.getCell(3))));
+			            
+			            // Convert Mobile number to Long
+			            rowData.put("Mobile number", parseLong(getCellValue(row.getCell(4))));
+			            
+			            rowData.put("Tiny url", getCellValue(row.getCell(5)));
+
+			            data.add(rowData);
+			        }
+			    }
+			    return data;
+			}
+		 
+		 public List<Map<String, Object>> saveExcelData(List<Map<String, Object>> data) {
+
+			    // Prepare SQL query for inserting the specified columns
+			    String sql = "INSERT INTO gcc_1913_campaign.upload_data (category_id, campaign_id, field_1, field_2, field_3, field_4, field_5,field_6) " +
+			                 "VALUES (?, ?, ?, ?, ?, ?, ?,?)";
+
+			    // Loop through the data list and insert each row into the database
+			    for (Map<String, Object> row : data) {
+			        jdbcTemplate.update(sql,
+			            row.get("category_id"),   // Category ID
+			            row.get("campaign_id"),   // Campaign ID
+			            row.get("ID"),            // ID (String)
+			            row.get("Name"),          // Name (String)
+			            row.get("Address"),       // Address (String)
+			            row.get("Balance amount"),   // Dues if any (String)
+			            row.get("Mobile number"),  // Mobile number (Long)
+			            row.get("Tiny url")
+			        );
+			    }
+
+			    // Return the inserted data (if needed)
+			    return data; // Optionally return the inserted data or change the return type as per your use case
+			}
+
+
+		
+		//For Assigned tasks
+		@Transactional
+		public List<Map<String, Object>> getAgentsALLCampaigns(int agent_id) {
+			    String SqlQuery = "SELECT \r\n"
+			    		+ "    c.category_name,\r\n"
+			    		+ "    cr.campaign_name,\r\n"
+			    		+ "    cr.calls_per_agent,\r\n"
+			    		+ "    aa.campaign_id,\r\n"
+			    		+ "    aa.agent_id,\r\n"
+			    		+ "    (SELECT COUNT(data_id) \r\n"
+			    		+ "     FROM gcc_1913_campaign.upload_data up \r\n"
+			    		+ "     WHERE up.agent_id = aa.agent_id \r\n"
+			    		+ "       AND up.campaign_id = cr.campaign_id\r\n"
+			    		+ "    ) AS calls_assigned,\r\n"
+			    		+ "    (SELECT COUNT(CASE WHEN up.field_14 IS NULL THEN 1 END) \r\n"
+			    		+ "     FROM gcc_1913_campaign.upload_data up \r\n"
+			    		+ "     WHERE up.agent_id = aa.agent_id \r\n"
+			    		+ "       AND up.campaign_id = cr.campaign_id\r\n"
+			    		+ "    ) AS pending_count,\r\n"
+			    		+ "    (SELECT COUNT(CASE WHEN up.field_14 IS NOT NULL THEN 1 END) \r\n"
+			    		+ "     FROM gcc_1913_campaign.upload_data up \r\n"
+			    		+ "     WHERE up.agent_id = aa.agent_id \r\n"
+			    		+ "       AND up.campaign_id = cr.campaign_id\r\n"
+			    		+ "    ) AS complete_count,\r\n"
+			    		+ "    (SELECT COUNT(CASE WHEN up.field_14 ='CALL_BACK_LATER' OR up.field_14 = 'UNATTENDED' THEN 1 END) \r\n"
+			    		+ "     FROM gcc_1913_campaign.upload_data up \r\n"
+			    		+ "     WHERE up.agent_id = aa.agent_id \r\n"
+			    		+ "       AND up.campaign_id = cr.campaign_id\r\n"
+			    		+ "    ) AS followup_count\r\n"
+			    		+ "    \r\n"
+			    		+ "FROM \r\n"
+			    		+ "    gcc_1913_campaign.agent_assign aa\r\n"
+			    		+ "JOIN \r\n"
+			    		+ "    gcc_1913_qaqc.agents_list al ON aa.agent_id = al.agent_id\r\n"
+			    		+ "JOIN \r\n"
+			    		+ "    gcc_1913_campaign.campaign_request cr ON cr.campaign_id = aa.campaign_id\r\n"
+			    		+ "JOIN \r\n"
+			    		+ "    gcc_1913_campaign.category c ON cr.category_id = c.category_id\r\n"
+			    		+ "WHERE \r\n"
+			    		+ "    aa.agent_id = ? \r\n"
+			    		+ "    AND aa.isactive = '1'\r\n"
+			    		+ "    AND cr.isactive = '0'";
+
+		    return jdbcTemplate.queryForList(SqlQuery,agent_id);
+		}
+		
+		
+		
+		@Transactional
+		public List<Map<String, Object>> getdataByIds(List<Integer> ids) {
+		    // Construct the SQL query with placeholders for the number of IDs
+		    String inSql = String.join(",", Collections.nCopies(ids.size(), "?"));
+		    String SqlQuery = "SELECT data_id, field_1 as id, field_2 as name, field_3 as address, field_4 as dues, field_5 as cellnumber,field_6 as viewdetails,field_14 as call_status,field_15 as remarks " +
+		                      "FROM gcc_1913_campaign.upload_data " +
+		                      "WHERE data_id IN (" + inSql + ")";
+		    
+		    // Convert the list of ids to an Object array
+		    return jdbcTemplate.queryForList(SqlQuery, ids.toArray());
+		}
+		
+		@Transactional
+		public void saveCallLogs(String call_status,String remarks ,int data_id)
+		{
+			String SqlQuery = "UPDATE gcc_1913_campaign.upload_data SET field_14 = ?,field_15=?, updated_date = NOW() WHERE (data_id = ? )";
+
+		    jdbcTemplate.update(SqlQuery,call_status, remarks,data_id);
+		}
+		
+		@Transactional
+		public int saveInLogsTable(int campaignId, int agentId, int dataId, String call_status,String remarks) {
+		    String sqlQuery = "INSERT INTO gcc_1913_campaign.call_logs (campaign_id,agent_id,data_id,call_status,remarks) VALUES (?, ?, ?,?,?)";
+		    int rowsAffected = 0;
+		    try {
+		        rowsAffected = jdbcTemplate.update(sqlQuery, campaignId, agentId, dataId,call_status,remarks);
+		        System.out.println("Inserted into call_logs successfully. Rows affected: " + rowsAffected);
+		    } catch (Exception e) {
+		        System.err.println("Error inserting into call_logs: " + e.getMessage());
+		        // Log the exception or rethrow it based on your error-handling strategy
+		    }
+		    return rowsAffected;
+		}
+		
+		@Transactional
+		public List<Map<String, Object>> getPendingDataByIds(List<Integer> ids) {
+		    // Construct the SQL query with placeholders for the number of IDs
+		    String inSql = String.join(",", Collections.nCopies(ids.size(), "?"));
+		    String SqlQuery = "SELECT data_id, field_1 as id, field_2 as name, field_3 as address, field_4 as dues, field_5 as cellnumber,field_6 as viewdetails,field_14 as call_status,field_15 as remarks " +
+		                      "FROM gcc_1913_campaign.upload_data " +
+		                      "WHERE data_id IN (" + inSql + ") " +
+		                      "AND field_14 IN ('UNATTENDED', 'CALL_BACK_LATER')";
+		    
+		    // Convert the list of ids to an Object array
+		    return jdbcTemplate.queryForList(SqlQuery, ids.toArray());
+		}
+		
+		@Transactional
+		public  List<Map<String, Object>> getAgentsNameById(List<Integer> agentIds)
+		{
+			String inSql = String.join(",", Collections.nCopies(agentIds.size(), "?"));
+			String SqlQuery ="select agent_name,agent_id from gcc_1913_qaqc.agents_list where agent_id IN (" + inSql + ")";
+			
+			return jdbcTemplate.queryForList(SqlQuery, agentIds.toArray());
+			
+		}
+		//agents performance
+			@Transactional
+			public List<Map<String, Object>> getDataDetailsById(List<Integer> dataIds)
+			{
+				if (dataIds.isEmpty()) {
+				    // Handle the case where dataIds is empty to avoid SQL syntax error.
+				    throw new IllegalArgumentException("The dataIds list is empty, cannot execute query.");
+				}	
+				
+				String inSql = String.join(",", Collections.nCopies(dataIds.size(), "?"));
+				String SqlQuery ="SELECT\r\n"
+						+ "	COUNT(*) AS Assigned_count,\r\n"
+						+ "    COUNT(CASE WHEN field_14 IS NOT NULL THEN 1 END) AS Complete_count,\r\n"
+						+ "    COUNT(CASE WHEN field_14 IS NULL THEN 1 END) AS Pending_count ,\r\n"
+						+ "    COUNT(CASE WHEN field_14 = 'INFORMATION_GIVEN' THEN 1  END) AS Information_Given_count,\r\n"
+						+ "    COUNT(CASE WHEN field_14 = 'UNATTENDED' THEN 1  END) AS Unattended_count,\r\n"
+						+ "    COUNT(CASE WHEN field_14 = 'CALL_BACK_LATER' THEN 1  END) AS Call_back_later_count,\r\n"
+						+ "    COUNT(CASE WHEN field_14 = 'SWITCH_OFF' THEN 1  END) AS Switch_off_count,\r\n"
+						+ "    COUNT(CASE WHEN field_14 = 'WRONG_NUMBER' THEN 1  END) AS Wrong_number_count,\r\n"
+						+ "	   CASE WHEN COUNT(*) = 0 THEN 0 ELSE ROUND((COUNT(CASE WHEN field_14 IS NOT NULL THEN 1 END) * 100.0 / COUNT(*)), 0)END AS Percentage\r\n"
+						+ "FROM gcc_1913_campaign.upload_data\r\n"
+						+ "WHERE data_id IN (" + inSql + ")";
+				
+				
+				
+				 List<Map<String, Object>> results = jdbcTemplate.queryForList(SqlQuery, dataIds.toArray());
+				    return results;
+			}
+		
+			@Transactional
+			public List<Map<String, Object>> getCompletedDataDetailsById(List<Integer> CdataIds)
+			{
+				if (CdataIds.isEmpty()) {
+				    // Handle the case where dataIds is empty to avoid SQL syntax error.
+				    throw new IllegalArgumentException("The CdataIds list is empty, cannot execute query.");
+				}
+				
+				String inSql = String.join(",", Collections.nCopies(CdataIds.size(), "?"));
+				String SqlQuery ="SELECT\r\n"
+			            + "    data_id,\r\n"  // Add data_id to the result
+			            + "    COUNT(*) AS Assigned_count,\r\n"
+			            + "    COUNT(CASE WHEN field_14 IS NOT NULL THEN 1 END) AS Complete_count,\r\n"
+			            + "    COUNT(CASE WHEN field_14 IS NULL THEN 1 END) AS Pending_count,\r\n"
+			            + "    COUNT(CASE WHEN field_14 = 'INFORMATION_GIVEN' THEN 1 END) AS Information_Given_count,\r\n"
+			            + "    COUNT(CASE WHEN field_14 = 'UNATTENDED' THEN 1 END) AS Unattended_count,\r\n"
+			            + "    COUNT(CASE WHEN field_14 = 'CALL_BACK_LATER' THEN 1 END) AS Call_back_later_count,\r\n"
+			            + "    COUNT(CASE WHEN field_14 = 'SWITCH_OFF' THEN 1 END) AS Switch_off_count,\r\n"
+			            + "    COUNT(CASE WHEN field_14 = 'WRONG_NUMBER' THEN 1 END) AS Wrong_number_count,\r\n"
+			            + "    CASE WHEN COUNT(*) = 0 THEN 0 ELSE ROUND((COUNT(CASE WHEN field_14 IS NOT NULL THEN 1 END) * 100.0 / COUNT(*)), 0) END AS Percentage\r\n"
+			            + "FROM gcc_1913_campaign.upload_data\r\n"
+			            + "WHERE data_id IN (" + inSql + ")\r\n"
+			            + "GROUP BY data_id";  // Group by data_id
+				
+				return jdbcTemplate.queryForList(SqlQuery, CdataIds.toArray());
+			}
+		
+			@Transactional
+			public List<Map<String,Object>> getCompletedDataById(List<Integer> completedDataIds)
+			{
+				if (completedDataIds.isEmpty()) {
+				    // Handle the case where dataIds is empty to avoid SQL syntax error.
+				    throw new IllegalArgumentException("The completedDataIds list is empty, cannot execute query.");
+				}
+				
+				String inSql = String.join(",", Collections.nCopies(completedDataIds.size(), "?"));
+				String SqlQuery = "SELECT field_1 as id, field_2 as name, field_3 as address, " +
+	                      "field_5 as cellnumber, field_14 as call_status, updated_date as updated_date,field_15 as remarks, " +
+	                      "(SELECT COUNT(data_id) FROM call_logs WHERE data_id = upload_data.data_id) as call_count " +
+	                      "FROM gcc_1913_campaign.upload_data " +
+	                      "WHERE data_id IN (" + inSql + ")";
+	    
+			   
+			    return jdbcTemplate.queryForList(SqlQuery, completedDataIds.toArray());
+				
+			}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AttendanceService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AttendanceService.java
new file mode 100644
index 0000000..0580aa0
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AttendanceService.java
@@ -0,0 +1,116 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.service;
+
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+
+@Service
+public class AttendanceService {
+	
+	
+//	private JdbcTemplate jdbcTemplate;
+//	
+//	
+//	@Autowired
+//	public void setDataSource(@Qualifier("BiometricDataSource") DataSource dataSource) {
+//		this.jdbcTemplate = new JdbcTemplate(dataSource);
+//	}
+//		
+//	
+//	public List<Map<String, Object>> getAttendanceReport(String fromDate, String toDate) {
+//	    String reportQuery;
+//
+//	    if (fromDate != null && toDate != null) {
+//	        // Query with date filter if dates are provided
+//	        reportQuery = "SELECT d.zone, d.division, b.user_id, b.user_name, f.departmentname, e.designation, " +
+//	                      "c.device_name, CAST(a.officepunch AS DATE) AS punch_date, MIN(a.OFFICEPUNCH) AS PUNCHIN, " +
+//	                      "CASE WHEN MAX(a.OFFICEPUNCH) = MIN(a.OFFICEPUNCH) THEN NULL ELSE MAX(a.OFFICEPUNCH) END AS PUNCHOUT " +
+//	                      "FROM machinerawpunch a, tbl_realtime_userinfo b, tbl_fkdevice_status c, zone_div_mast d, " +
+//	                      "tblemployee e, tbldepartment f " +
+//	                      "WHERE a.paycode = b.user_id AND a.deviceid = c.device_id AND c.device_name = d.devname " +
+//	                      "AND a.paycode = e.paycode AND e.departmentcode = f.departmentcode " +
+//	                      "AND CAST(a.officepunch AS DATE) BETWEEN ? AND ? " +
+//	                      "AND a.paycode LIKE '%19130%' " +
+//	                      "GROUP BY d.zone, d.division, b.user_id, b.user_name, f.departmentname, e.designation, " +
+//	                      "c.device_name, CAST(a.officepunch AS DATE) " +
+//	                      "ORDER BY d.zone, d.division, b.user_id, CAST(a.officepunch AS DATE)";
+//	        
+//	        // Execute query with date parameters
+//	        return jdbcTemplate.queryForList(reportQuery, fromDate, toDate);
+//	        
+//	    } else {
+//	        // Query without date filter
+//	        reportQuery = "SELECT d.zone, d.division, b.user_id, b.user_name, f.departmentname, e.designation, " +
+//	                      "c.device_name, CAST(a.officepunch AS DATE) AS punch_date, MIN(a.OFFICEPUNCH) AS PUNCHIN, " +
+//	                      "CASE WHEN MAX(a.OFFICEPUNCH) = MIN(a.OFFICEPUNCH) THEN NULL ELSE MAX(a.OFFICEPUNCH) END AS PUNCHOUT " +
+//	                      "FROM machinerawpunch a, tbl_realtime_userinfo b, tbl_fkdevice_status c, zone_div_mast d, " +
+//	                      "tblemployee e, tbldepartment f " +
+//	                      "WHERE a.paycode = b.user_id AND a.deviceid = c.device_id AND c.device_name = d.devname " +
+//	                      "AND a.paycode = e.paycode AND e.departmentcode = f.departmentcode " +
+//	                      "AND a.paycode LIKE '%19130%' " +
+//	                      "GROUP BY d.zone, d.division, b.user_id, b.user_name, f.departmentname, e.designation, " +
+//	                      "c.device_name, CAST(a.officepunch AS DATE) " +
+//	                      "ORDER BY d.zone, d.division, b.user_id, CAST(a.officepunch AS DATE)";
+//	        
+//	        // Execute query without date parameters
+//	        return jdbcTemplate.queryForList(reportQuery);
+//	    }
+//	}
+//
+//	
+//	
+////	public List<Map<String, Object>> getAttendanceReport(String fromDate, String toDate) {
+////        System.out.println("Service Layer: Generating attendance report");
+////
+////        String reportQuery = "SELECT d.zone, d.division, b.user_id, b.user_name, f.departmentname, e.designation, c.device_name, " +
+////                             "CAST(a.officepunch AS DATE) AS punch_date, MIN(a.OFFICEPUNCH) AS PUNCHIN, " +
+////                             "CASE WHEN MAX(a.OFFICEPUNCH) = MIN(a.OFFICEPUNCH) THEN NULL ELSE MAX(a.OFFICEPUNCH) END AS PUNCHOUT " +
+////                             "FROM machinerawpunch a, tbl_realtime_userinfo b, tbl_fkdevice_status c, zone_div_mast d, " +
+////                             "tblemployee e, tbldepartment f " +
+////                             "WHERE a.paycode = b.user_id AND a.deviceid = c.device_id AND c.device_name = d.devname " +
+////                             "AND a.paycode = e.paycode AND e.departmentcode = f.departmentcode ";
+////
+////        // Dynamic date filter
+////        if (fromDate != null && toDate != null) {
+////            reportQuery += "AND CAST(a.officepunch AS DATE) BETWEEN ? AND ? ";
+////        } else if (fromDate != null) {
+////            reportQuery += "AND CAST(a.officepunch AS DATE) = ? ";
+////        } else {
+////            throw new IllegalArgumentException("fromDate or toDate must be provided");
+////        }
+////
+////        reportQuery += "AND a.paycode LIKE '%19130%' " +
+////                       "GROUP BY d.zone, d.division, b.user_id, b.user_name, f.departmentname, e.designation, c.device_name, " +
+////                       "CAST(a.officepunch AS DATE) " +
+////                       "ORDER BY d.zone, d.division, b.user_id, CAST(a.officepunch AS DATE)";
+////
+////        // Execute query based on dates
+////        if (fromDate != null && toDate != null) {
+////            return jdbcTemplate.queryForList(reportQuery, fromDate, toDate);
+////        } else {
+////            return jdbcTemplate.queryForList(reportQuery, fromDate);
+////        }
+////    }
+//	
+////	public List<Map<String, Object>> getAttendanceReport() {
+////		 System.out.println("check 2");
+////  		String reportQuery ="SELECT d.zone,d.division,b.user_id,b.user_name,f.departmentname,e.designation,c.device_name,CAST(a.officepunch AS DATE) as punch_date,MIN(a.OFFICEPUNCH) AS PUNCHIN,\r\n"
+////  				+ "CASE WHEN MAX(a.OFFICEPUNCH) = MIN(a.OFFICEPUNCH) THEN NULL ELSE MAX(a.OFFICEPUNCH) END AS PUNCHOUT FROM machinerawpunch a,tbl_realtime_userinfo b,tbl_fkdevice_status c,\r\n"
+////  				+ "zone_div_mast d,tblemployee e,tbldepartment f WHERE a.paycode = b.user_id AND a.deviceid = c.device_id AND c.device_name = d.devname AND a.paycode = e.paycode AND \r\n"
+////  				+ "e.departmentcode = f.departmentcode AND CAST(officepunch AS DATE) BETWEEN '2024-10-01' AND '2024-10-10'\r\n"
+////  				+ "AND a.paycode LIKE '%19130%' \r\n"
+////  				+ "GROUP BY d.zone,d.division,b.user_id,b.user_name,f.departmentname,e.designation,c.device_name,CAST(a.officepunch AS DATE)\r\n"
+////  				+ "ORDER BY d.zone,d.division,b.user_id,CAST(a.officepunch AS DATE)";
+////  		 System.out.println("check 3"); 
+////  	     List<Map<String,Object>> reports = jdbcTemplate.queryForList(reportQuery);
+////  	   System.out.println("check 4");
+////  		 return reports;
+////  	}
+	
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/CampaignService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/CampaignService.java
new file mode 100644
index 0000000..7e86069
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/CampaignService.java
@@ -0,0 +1,272 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.service;
+
+import java.io.File;
+import java.io.IOException;
+import java.sql.Date;
+import java.sql.PreparedStatement;
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+import javax.transaction.Transactional;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.namedparam.NamedParameterJdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.web.multipart.MultipartFile;
+
+@Service
+public class CampaignService {
+
+    private JdbcTemplate jdbcTemplate;
+	
+  @Autowired
+	public void setDataSourcemysql(@Qualifier("mysql1913CampaignDataSource") DataSource dataSource) {		
+		this.jdbcTemplate = new JdbcTemplate(dataSource);	
+		}
+  
+  @Autowired
+	public void setDataSource2(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	@Autowired
+  private JdbcTemplate jdbcTemplate2;
+
+   
+//Method to save file and return its URL
+  public String saveFile(MultipartFile file) {
+      String fileName = file.getOriginalFilename();
+      String filePath = "/uploads/" + fileName;  // Path to save the file
+      try {
+          File destinationFile = new File(filePath);
+          file.transferTo(destinationFile);  // Save the file locally
+      } catch (IOException e) {
+          throw new RuntimeException("Failed to store file " + fileName, e);
+      }
+      return filePath;  // Return the file path (URL) for saving to the database
+  }
+
+  // Method to save campaign details into the database
+  public void saveCampaignDetails(Map<String, Object> campaignDetails) {
+      String sql = "INSERT INTO gcc_1913_campaign.campaign_request (campaign_name, category_id, start_date, end_date, no_of_agents, calls_per_agent, description, excel_url) " +
+                   "VALUES (:campaign_name, :category_id, :start_date, :end_date, :no_of_agents, :calls_per_agent, :description, :excel_url)";
+
+      // Using NamedParameterJdbcTemplate for mapping campaignDetails into query
+      NamedParameterJdbcTemplate namedJdbcTemplate = new NamedParameterJdbcTemplate(jdbcTemplate);
+      namedJdbcTemplate.update(sql, campaignDetails);
+  }
+  
+  
+  
+  public Map<String, Object> getCampaignDetailsById(Long campaign_id) {
+      String sql = "SELECT * FROM gcc_1913_campaign.campaign_request WHERE campaign_id = ?";
+      return jdbcTemplate.queryForMap(sql, campaign_id);
+  }
+  
+  public void updateCampaign(Long campaign_id, String campaign_name, String start_date, String end_date, Integer no_of_agents, Integer calls_per_agent, String description) {
+      String sql = "UPDATE gcc_1913_campaign.campaign_request SET campaign_name = ?, start_date = ?, end_date = ?, no_of_agents = ?, calls_per_agent = ?, description = ? WHERE campaign_id = ?";
+      jdbcTemplate.update(sql, campaign_name, start_date, end_date, no_of_agents, calls_per_agent, description, campaign_id);
+  }
+  
+  
+  
+
+  
+  public List<Map<String, Object>> getCampaignDetails() {
+	  String sql = "SELECT campaign_id, " +
+	             "       campaign_name, " +
+	             "       CONCAT(" +
+	             "           DATE_FORMAT(start_date, '%d/%m/%Y'), " +
+	             "           ' to ', " +
+	             "           DATE_FORMAT(end_date, '%d/%m/%Y')" +
+	             "       ) AS event_dates, " +
+	             "       no_of_agents, " +
+	             "       calls_per_agent, " +
+	             "      (no_of_agents)*(calls_per_agent) as total_calls, " +
+	             "       description " +
+	             "FROM gcc_1913_campaign.campaign_request;";
+
+      List<Map<String, Object>> campaigns = jdbcTemplate.queryForList(sql);
+
+      
+      return campaigns;
+  }
+  
+  public List<Map<String, Object>> getLastRow()
+  {
+	  String sqlQuery ="SELECT campaign_id\r\n"
+	  		+ "FROM gcc_1913_campaign.campaign_request\r\n"
+	  		+ "ORDER BY campaign_id DESC\r\n"
+	  		+ "LIMIT 1";
+	  
+	  return jdbcTemplate.queryForList(sqlQuery); 
+  }
+  
+  public List<Map<String, Object>> getDetailsForStart()
+  {
+	  String sqlQuery ="SELECT cr.campaign_id,c.category_name,cr.campaign_name,cr.no_of_agents,cr.calls_per_agent,(cr.no_of_agents)*(cr.calls_per_agent) as total_calls\r\n"
+	  		+ "FROM gcc_1913_campaign.campaign_request cr\r\n"
+	  		+ "JOIN gcc_1913_campaign.category c ON cr.category_id=c.category_id\r\n"
+	  		+ "where cr.isactive='1'";
+		  
+		  return jdbcTemplate.queryForList(sqlQuery); 
+  }
+
+  public List<Map<String, Object>> getDataforAgents(int campaign_id, int calls_per_agent)
+  {
+	  List<Map<String, Object>> assignedAgent_list  =getAssignedAgentId(campaign_id);
+	  List<Map<String, Object>> data_list  =getDataId(campaign_id);
+	  
+	  List<Map<String, Object>> task = getTask(assignedAgent_list,data_list,calls_per_agent,campaign_id);
+	  
+	// Perform the update query here
+	  if (task != null && !task.isEmpty()) {
+		  assignAgentIds(task);
+		    updateAgentStatus(campaign_id);
+		}
+	    
+	  
+		return task;
+  }
+  
+	//Method to update agent_id for each data_id in upload_data table
+	public void assignAgentIds(List<Map<String, Object>> taskList) {
+	   String updateQuery = "UPDATE gcc_1913_campaign.upload_data SET agent_id = ? WHERE data_id = ? AND campaign_id = ?";
+	
+	   // Loop through each agent's task list
+	   for (Map<String, Object> task : taskList) {
+	       Integer agentId = (Integer) task.get("agent_id");
+	       Integer campaignId = (Integer) task.get("campaign_id"); 
+	       List<Integer> dataIds = (List<Integer>) task.get("data_ids");
+	
+	       // Update each data_id with the respective agent_id
+	       for (Integer dataId : dataIds) {
+	           jdbcTemplate.update(updateQuery, agentId, dataId, campaignId);
+	       }
+	   }
+	}
+		
+	//Example update method
+	private void updateAgentStatus(int campaign_id) {
+	   String updateQuery = "UPDATE gcc_1913_campaign.campaign_request SET isactive = '0', isdelete='1' WHERE campaign_id = ?";
+	   jdbcTemplate.update(updateQuery, campaign_id);
+	}
+
+
+  private List<Map<String, Object>> getTask(List<Map<String, Object>> assignedAgent_list, List<Map<String, Object>> data_list,
+			int calls_per_agent,int campaign_id) {
+
+	    List<Map<String, Object>> result = new ArrayList<>();
+	    int dataIndex = 0;
+
+	    // Loop through each assigned ID
+	    for (Map<String, Object> assigned : assignedAgent_list) {
+	        // Create a map to store the assigned_id and corresponding data_ids
+	        Map<String, Object> assignedTaskMap = new HashMap<>();
+	        List<Integer> assignedDataIds = new ArrayList<>();
+
+	        // Get assigned_id
+	        Integer agent_id = (Integer) assigned.get("agent_id");
+
+	        // Loop to assign the appropriate number of data IDs (calls_per_agent)
+	        for (int i = 0; i < calls_per_agent; i++) {
+	            if (dataIndex >= data_list.size()) {
+	                // Exit if we run out of data IDs
+	                break;
+	            }
+	            Map<String, Object> data = data_list.get(dataIndex);
+	            Integer data_id = (Integer) data.get("data_id");
+	            assignedDataIds.add(data_id);
+	            dataIndex++;
+	        }
+
+	        // Put the agent_id and the corresponding data_ids in the map
+	        assignedTaskMap.put("agent_id", agent_id);
+	        assignedTaskMap.put("data_ids", assignedDataIds);
+	        assignedTaskMap.put("campaign_id", campaign_id);
+
+	        // Add the map to the result list
+	        result.add(assignedTaskMap);
+	    }
+
+	    return result;
+	}
+
+
+	private List<Map<String, Object>> getDataId(int campaign_id) {
+  		
+  		String sqlQuery ="SELECT data_id\r\n"
+  				+ "from gcc_1913_campaign.upload_data\r\n"
+  				+ "where campaign_id=?";
+  			  
+  			  return jdbcTemplate.queryForList(sqlQuery, new Object[]{campaign_id});
+  	}
+
+
+	private List<Map<String, Object>> getAssignedAgentId(int campaign_id) {
+	
+  		String sqlQuery ="SELECT agent_id\r\n"
+  				+ "FROM gcc_1913_campaign.agent_assign \r\n"
+  				+ "where campaign_id=? and isactive='1'";
+  			  
+  			  return jdbcTemplate.queryForList(sqlQuery, new Object[]{campaign_id});
+  	}
+	
+	public List<Map<String, Object>> getActiveCampaigns()
+	{
+		String sqlQuery ="SELECT cr.campaign_id,cr.calls_per_agent,cr.category_id,cr.campaign_name,c.category_name,cr.start_date,cr.end_date,cr.description\r\n"
+		  		+ "FROM gcc_1913_campaign.campaign_request cr\r\n"
+		  		+ "JOIN gcc_1913_campaign.category c ON cr.category_id=c.category_id\r\n"
+		  		+ "where cr.isactive='0'";
+  			  
+  			  return jdbcTemplate.queryForList(sqlQuery);
+	}
+
+
+	public List<Map<String, Object>> viewcampaignstatus(int campaign_id) {
+		
+		String sqlQuery ="SELECT \r\n"
+				+ "aa.campaign_id as campaign_id,\r\n"
+				+ "    al.agent_id as agent_id,\r\n"
+				+ "    al.agent_name as agent_name,\r\n"
+				+ "    COUNT(up.agent_id) AS Assigned_count,\r\n"
+				+ "    COUNT(CASE WHEN up.field_14 IS NOT NULL THEN 1 END) AS Complete_count,\r\n"
+				+ "    COUNT(CASE WHEN up.field_14 IS NULL THEN 1 END) AS Pending_count,\r\n"
+				+ "    ROUND(\r\n"
+				+ "        (COUNT(CASE WHEN up.field_14 IS NOT NULL THEN 1 END) * 100) / \r\n"
+				+ "        COUNT(up.agent_id)\r\n"
+				+ "    ) as Percentage,\r\n"
+				+ "    COUNT(CASE WHEN up.field_14 = 'INFORMATION_GIVEN' THEN 1  END) AS Information_Given_count,\r\n"
+				+ "	COUNT(CASE WHEN up.field_14 = 'UNATTENDED' THEN 1  END) AS Unattended_count,\r\n"
+				+ "	COUNT(CASE WHEN up.field_14 = 'CALL_BACK_LATER' THEN 1  END) AS Call_back_later_count,\r\n"
+				+ "	COUNT(CASE WHEN up.field_14 = 'SWITCH_OFF' THEN 1  END) AS Switch_off_count,\r\n"
+				+ "	COUNT(CASE WHEN up.field_14 = 'WRONG_NUMBER' THEN 1  END) AS Wrong_number_count\r\n"
+				+ "FROM gcc_1913_campaign.agent_assign aa\r\n"
+				+ "JOIN gcc_1913_qaqc.agents_list al ON al.agent_id = aa.agent_id\r\n"
+				+ "JOIN gcc_1913_campaign.upload_data up ON up.agent_id = al.agent_id AND up.campaign_id = ?\r\n"
+				+ "WHERE aa.campaign_id = ? AND aa.isactive = '1'\r\n"
+				+ "GROUP BY aa.campaign_id,al.agent_id, al.agent_name";
+  			  
+  			  return jdbcTemplate.queryForList(sqlQuery,campaign_id,campaign_id);
+	}
+
+	public List<Map<String, Object>> viewcompletedby(int campaign_id, int agent_id) {
+		
+		String sqlQuery ="SELECT \r\n"
+				+ "up.data_id as data_id,up.field_1 as id, up.field_2 as name, up.field_3 as address,field_5 as cellnumber, field_14 as call_status, \r\n"
+				+ "count(cl.data_id) as call_count,updated_date as updated_date,field_15 as remarks\r\n"
+				+ "FROM gcc_1913_campaign.agent_assign aa\r\n"
+				+ "JOIN gcc_1913_campaign.upload_data up ON up.agent_id = aa.agent_id AND up.campaign_id = ?\r\n"
+				+ "JOIN gcc_1913_campaign.call_logs cl ON cl.data_id=up.data_id\r\n"
+				+ "WHERE aa.campaign_id = ? AND aa.isactive = '1' AND aa.agent_id=? AND up.field_14 IS NOT NULL\r\n"
+				+ "group by up.data_id,up.field_1, up.field_2";
+  			  
+  			  return jdbcTemplate.queryForList(sqlQuery,campaign_id,campaign_id,agent_id);
+	}
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/WhatsappMsgService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/WhatsappMsgService.java
new file mode 100644
index 0000000..b84be66
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/WhatsappMsgService.java
@@ -0,0 +1,40 @@
+package in.gov.chennaicorporation.gccoffice.callcenter.service;
+
+import java.net.HttpURLConnection;
+import java.net.URL;
+
+import org.springframework.stereotype.Service;
+import org.springframework.web.client.RestTemplate;
+
+@Service
+public class WhatsappMsgService {
+	
+	
+    public String sendMsg(String msgUrl) {
+
+        String response ="";
+        try{
+            HttpURLConnection connection =null;
+
+            URL url = new URL(msgUrl);
+            connection = (HttpURLConnection) url.openConnection();
+            connection.setRequestMethod("GET");
+
+            int responseCode = connection.getResponseCode();
+            response=responseCode+"";
+            System.out.println("Response Code: " + responseCode);
+
+        }catch (Exception e){
+            e.printStackTrace();
+        }
+
+        return response;
+    }
+
+   
+    public String sendSMS(String SMS_Url) {
+        RestTemplate restTemplate = new RestTemplate();
+        String response =restTemplate.getForObject(SMS_Url,String.class);
+        return response;
+    }
+	}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/.DS_Store b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/.DS_Store
new file mode 100644
index 0000000..8c23e3d
Binary files /dev/null and b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/.DS_Store differ
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/ComplaintController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/ComplaintController.java
new file mode 100644
index 0000000..927b96f
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/ComplaintController.java
@@ -0,0 +1,242 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.util.List;
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+
+import org.springframework.web.bind.annotation.CrossOrigin;
+import org.springframework.web.bind.annotation.GetMapping;
+
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+import org.springframework.web.multipart.MultipartFile;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.ComplaintService;
+
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.util.LinkedMultiValueMap;
+import org.springframework.util.MultiValueMap;
+import org.springframework.web.bind.annotation.*;
+
+import java.io.BufferedReader;
+import java.io.IOException;
+import java.io.InputStreamReader;
+import java.io.OutputStream;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.net.URLEncoder;
+import org.springframework.http.*;
+
+import java.util.Base64;
+import java.util.HashMap;
+import org.springframework.web.multipart.MultipartFile;
+import java.awt.Graphics2D;
+import java.awt.image.BufferedImage;
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import javax.imageio.ImageIO;
+import java.util.Base64;
+
+@CrossOrigin
+@RestController
+@RequestMapping("gcc/api/callcenterqaqc/pgrcomplaint")
+public class ComplaintController {
+
+	private final RestTemplate restTemplate;
+
+	public ComplaintController(RestTemplate restTemplate) {
+		this.restTemplate = restTemplate;
+	}
+
+	@Autowired
+	private ComplaintService complaintService;
+
+	@GetMapping("/getComplaintCategories")
+	public @ResponseBody String getComplaintCategories() {
+		return complaintService.fetchComplaintCategories();
+	}
+
+	@GetMapping("/getComplaintSubTypes")
+	public @ResponseBody String getComplaintSubTypes(@RequestParam String groupId) {
+		return complaintService.fetchComplaintSubTypes(groupId);
+	}
+
+	@GetMapping("/getComplaintDetailsbyId")
+	public List<Map<String, Object>> getComplaintDetailsById(@RequestParam String complaintid) {
+		return complaintService.fetchComplaintDetailsById(complaintid);
+	}
+
+	@GetMapping("/getComplaintDetailsByMobile")
+	public List<Map<String, Object>> getComplaintDetailsByMobile(@RequestParam String mobileNo) {
+		return complaintService.fetchComplaintDetailsByMobile(mobileNo);
+	}
+
+	@PostMapping("/register")
+	public ResponseEntity<String> registerComplaint(
+			@RequestParam(value = "ComplainantName", required = false) String complainantName,
+			@RequestParam(value = "ComplainantAddr", required = false) String complainantAddr,
+			@RequestParam(value = "MobileNo", required = false) String mobileNo,
+			@RequestParam(value = "Email", required = false) String email,
+			@RequestParam(value = "ComplaintType", required = false) String complaintType,
+			@RequestParam(value = "ComplaintTitle", required = false) String complaintTitle,
+			@RequestParam(value = "ComplaintDetails", required = false) String complaintDetails,
+			@RequestParam(value = "StreetId", required = false) String streetId,
+			@RequestParam(value = "Comp_Image", required = false) String compImage,
+			@RequestParam(value = "latitude", required = false) String latitude,
+			@RequestParam(value = "longtitude", required = false) String longtitude,
+			@RequestParam(value = "Landmark", required = false) String landmark,
+			@RequestParam(value = "gender", required = false) String gender) {
+
+		String externalUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
+
+		try {
+			// Create the URL object
+			URL url = new URL(externalUrl);
+
+			// Create the HttpURLConnection object
+			HttpURLConnection conn = (HttpURLConnection) url.openConnection();
+			conn.setRequestMethod("POST");
+			conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
+			conn.setDoOutput(true);
+
+			// Create the parameters string, handling null values
+			String params = "serviceId=RegComplaint" + "&ComplainantName="
+					+ URLEncoder.encode(complainantName != null ? complainantName : "", "UTF-8") + "&ComplainantAddr="
+					+ URLEncoder.encode(complainantAddr != null ? complainantAddr : "", "UTF-8") + "&MobileNo="
+					+ URLEncoder.encode(mobileNo != null ? mobileNo : "", "UTF-8") + "&Email="
+					+ URLEncoder.encode(email != null ? email : "", "UTF-8") + "&ComplaintType="
+					+ URLEncoder.encode(complaintType != null ? complaintType : "", "UTF-8") + "&ComplaintTitle="
+					+ URLEncoder.encode(complaintTitle != null ? complaintTitle : "", "UTF-8") + "&ComplaintDetails="
+					+ URLEncoder.encode(complaintDetails != null ? complaintDetails : "", "UTF-8") + "&StreetId="
+					+ URLEncoder.encode(streetId != null ? streetId : "", "UTF-8") + "&Comp_Image="
+					+ URLEncoder.encode(compImage != null ? compImage : "", "UTF-8") + "&latitude="
+					+ URLEncoder.encode(latitude != null ? latitude : "", "UTF-8") + "&longtitude="
+					+ URLEncoder.encode(longtitude != null ? longtitude : "", "UTF-8") + "&Landmark="
+					+ URLEncoder.encode(landmark != null ? landmark : "", "UTF-8") + "&gender="
+					+ URLEncoder.encode(gender != null ? gender : "", "UTF-8") + "&compmode=2";
+			// Write parameters to request body
+			try (OutputStream os = conn.getOutputStream()) {
+				byte[] input = params.getBytes("UTF-8");
+				os.write(input, 0, input.length);
+			}
+
+			// Read the response
+			int responseCode = conn.getResponseCode();
+			BufferedReader reader;
+			if (responseCode == HttpURLConnection.HTTP_OK) {
+				reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));
+			} else {
+				reader = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
+			}
+
+			StringBuilder response = new StringBuilder();
+			String line;
+			while ((line = reader.readLine()) != null) {
+				response.append(line);
+			}
+			reader.close();
+
+			// Return the response from the external API
+			return ResponseEntity.status(responseCode).body(response.toString());
+
+		} catch (IOException e) {
+			e.printStackTrace();
+			return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+					.body("An error occurred while processing the request.");
+		}
+	}
+
+	@PostMapping("/updateComplaint")
+	public ResponseEntity<String> updateComplaint(@RequestParam("ComplaintId") String complaintId,
+			@RequestParam(value = "Message", required = false) String message,
+			@RequestParam(value = "Status") String status,
+			@RequestPart(value = "Comp_Image", required = false) MultipartFile compImage) {
+
+		String userType = "Public";
+
+		System.out.println("message:-" + message + "\n UserType:-" + userType + "\n Status:-" + status);
+		System.out.println(compImage == null);
+		String externalUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
+
+		try {
+			// Convert and compress the image to base64 if provided
+			String base64Image = null;
+			if (compImage != null && !compImage.isEmpty()) {
+				base64Image = compressAndEncodeToBase64(compImage);
+				System.out.println("imageee" + base64Image);
+			}
+
+			// Construct the POST body with parameters
+			String params = "serviceId=UpdateComplaint" + "&ComplaintId="
+					+ URLEncoder.encode(complaintId != null ? complaintId : "", "UTF-8") + "&Message="
+					+ URLEncoder.encode(message != null ? message : "", "UTF-8") + "&UserType="
+					+ URLEncoder.encode(userType, "UTF-8") + "&Status="
+					+ URLEncoder.encode(status != null ? status : "", "UTF-8") + "&Comp_Image="
+					+ URLEncoder.encode(compImage != null ? base64Image : "", "UTF-8")
+					+ "&Token=718333469976265947044293";
+			// Open connection and send POST request
+			URL url = new URL(externalUrl);
+			HttpURLConnection conn = (HttpURLConnection) url.openConnection();
+			conn.setRequestMethod("POST");
+			conn.setDoOutput(true);
+			conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
+
+			// Send parameters
+			OutputStream os = conn.getOutputStream();
+			os.write(params.getBytes());
+			os.flush();
+			os.close();
+
+			// Handle the response
+			int responseCode = conn.getResponseCode();
+			BufferedReader reader;
+			if (responseCode == HttpURLConnection.HTTP_OK) {
+				reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));
+			} else {
+				reader = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
+			}
+
+			StringBuilder response = new StringBuilder();
+			String line;
+			while ((line = reader.readLine()) != null) {
+				response.append(line);
+			}
+			reader.close();
+
+			return ResponseEntity.status(responseCode).body(response.toString());
+
+		} catch (IOException e) {
+			e.printStackTrace();
+			return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+					.body("An error occurred while processing the request.");
+		}
+	}
+
+	private String compressAndEncodeToBase64(MultipartFile file) throws IOException {
+		// Convert MultipartFile to BufferedImage
+		BufferedImage originalImage = ImageIO.read(file.getInputStream());
+
+		// Resize/Compress the image
+		int targetWidth = 800; // You can adjust the width as needed
+		int targetHeight = (int) (originalImage.getHeight() * (800.0 / originalImage.getWidth())); // Preserve aspect
+																									// ratio
+
+		BufferedImage resizedImage = new BufferedImage(targetWidth, targetHeight, BufferedImage.TYPE_INT_RGB);
+		Graphics2D g = resizedImage.createGraphics();
+		g.drawImage(originalImage, 0, 0, targetWidth, targetHeight, null);
+		g.dispose();
+
+		// Compress the image by writing it to a ByteArrayOutputStream in JPEG format
+		ByteArrayOutputStream baos = new ByteArrayOutputStream();
+		ImageIO.write(resizedImage, "jpg", baos); // You can change the format to "png" or "jpg"
+		byte[] compressedBytes = baos.toByteArray();
+
+		// Convert the compressed image to base64
+		return Base64.getEncoder().encodeToString(compressedBytes);
+	}
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/FollowUpController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/FollowUpController.java
new file mode 100644
index 0000000..9bbafa3
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/FollowUpController.java
@@ -0,0 +1,77 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.FollowUpService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcCallsService;
+
+@RequestMapping("gcc/api/callcenterqaqc/agent/followupcalls")  
+@RestController
+public class FollowUpController {
+	
+	@Autowired
+	RestTemplate restTemplate;
+	
+	@Autowired	
+	private QaqcCallsService qaqcCallsService;
+	
+	@Autowired
+	private FollowUpService followService;
+	
+	@PostMapping("/update")
+	@ResponseBody
+	public ResponseEntity<String> updateCallDetails(@RequestParam("complaintNumber") String complaintNumber,
+	                                                @RequestParam("dataId") int dataId,
+	                                                @RequestParam("userId") String userId,
+	                                                @RequestParam("action") String action,
+	                                                @RequestParam(value = "remainderDate", required = false,defaultValue = "-") String remainderDate,
+	                                                @RequestParam("remarks") String remarks) {
+	    try {
+	        System.out.println("Updating Complaint Number: " + complaintNumber);
+	        System.out.println("Updating Data ID: " + dataId);
+	        System.out.println("Action: " + action);
+	        System.out.println("Remarks: " + remarks);
+	        int updated_agent = Integer.parseInt(userId);
+			System.out.println("updated_agent: " + updated_agent);
+
+	        Map<String, Object> complaintDetails = qaqcCallsService.getComplaintDetails(dataId);
+	        
+	        Integer agentId = (Integer) complaintDetails.get("agent_id");
+		    Map<String, Object> erp_username=qaqcCallsService.getErpnameById(agentId);
+		    String Erpname=(String) erp_username.get("erp_username");
+	        
+		    if ("WRONG_ASSIGN".equals(action)) {
+	        	
+	            boolean statusUpdated = qaqcCallsService.ChangeStatusInErp(complaintNumber, remarks, action, Erpname);
+
+	            if (!statusUpdated) {
+	                return ResponseEntity.ok("error");
+	            }
+	        }
+		    
+	        // Update complaint details
+	        followService.updateFollowupComplaintDetails(complaintNumber, dataId, action, remarks,updated_agent);
+	        followService.updateComplaintHistoryDetails(complaintNumber, dataId, action, remarks,updated_agent, remainderDate);
+
+	        Map<String, Object> logDetails = qaqcCallsService.getComplaintDetails(dataId);
+	        // Upload to logs
+	        followService.uploadComplaintDetailsInLogs(logDetails, action, complaintNumber,remainderDate);
+	        
+	        return ResponseEntity.ok("Success");
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error");
+	    }
+	}
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/InprogresscallController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/InprogresscallController.java
new file mode 100644
index 0000000..e156409
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/InprogresscallController.java
@@ -0,0 +1,90 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.InprogresscallService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcCallsService;
+
+@RequestMapping("gcc/api/callcenterqaqc/agent/inprogresscalls") 
+@RestController
+
+public class InprogresscallController {
+	
+	@Autowired
+	InprogresscallService inprogresscallService;
+	
+	@Autowired
+	RestTemplate restTemplate;
+	
+	@Autowired	
+	private QaqcCallsService qaqcCallsService;
+	
+	@PostMapping("/update")
+	@ResponseBody
+	public ResponseEntity<String> updateCallDetails(@RequestParam("complaintNumber") String complaintNumber,
+	                                                @RequestParam("dataId") int dataId,
+	                                                @RequestParam("userId") String userId,
+	                                                @RequestParam("action") String action,
+	                                                @RequestParam(value = "remainderDate", required = false,defaultValue = "-") String remainderDate,
+	                                                @RequestParam("remarks") String remarks) {
+	    try {
+	        System.out.println("Updating Complaint Number: " + complaintNumber);
+	        System.out.println("Updating Data ID: " + dataId);
+	        System.out.println("Action: " + action);
+	        System.out.println("Remarks: " + remarks);
+	        int updated_agent = Integer.parseInt(userId);
+			System.out.println("updated_agent: " + updated_agent);
+	        
+	      //to insert incorrect office mobile number details in table
+            if (action.equals("MOBILE_NUM")) {
+            	inprogresscallService.saveMobileNumDetails(complaintNumber, remarks);
+            }
+            
+	        Map<String, Object> complaintDetails = qaqcCallsService.getComplaintDetails(dataId);
+
+	        Integer agentId = (Integer) complaintDetails.get("agent_id");
+		    Map<String, Object> erp_username=qaqcCallsService.getErpnameById(agentId);
+		    String Erpname=(String) erp_username.get("erp_username");
+	        		    
+		    if ("WRONG_ASSIGN".equals(action)) {
+	        	
+	            boolean statusUpdated = qaqcCallsService.ChangeStatusInErp(complaintNumber, remarks, action, Erpname);
+
+	            if (!statusUpdated) {
+	                return ResponseEntity.ok("error");
+	            }
+	        }
+		    
+	        // Update complaint details
+	        inprogresscallService.updateInprogressComplaintDetails(complaintNumber, dataId, action, remarks,updated_agent);	        
+	        inprogresscallService.updateComplaintHistoryDetails(complaintNumber, dataId, action, remarks,updated_agent, remainderDate);
+	        Map<String, Object> logDetails = qaqcCallsService.getComplaintDetails(dataId);
+	        // Upload to logs
+	       qaqcCallsService.uploadComplaintDetailsInLogs(logDetails, action, complaintNumber,remainderDate);
+
+	        return ResponseEntity.ok("Success");
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error");
+	    }
+	}
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/MainController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/MainController.java
new file mode 100644
index 0000000..60d7678
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/MainController.java
@@ -0,0 +1,474 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.time.LocalDate;
+import java.util.List;
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.FollowUpService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.InprogresscallService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.PublicFollowUpService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcAdminSettingService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcAgentsService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcCallsService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcService;
+import in.gov.chennaicorporation.gccoffice.entity.AppUserEntity;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+
+@RequestMapping("/gcc/callcenterqaqc") 
+@Controller("callCenterQaQcMainController")
+public class MainController {
+	
+	@Autowired
+    private QaqcService qaqcService;
+	
+	@Autowired
+	private QaqcAgentsService agentsService;
+	
+	@Autowired
+	private QaqcAdminSettingService adminService;
+	
+	@Autowired
+	private InprogresscallService inprogresscallService;
+	
+	@Autowired	
+	private QaqcCallsService qaqcCallsService;
+	
+	@Autowired
+	private FollowUpService followUpService;
+	
+	@Autowired
+	private PublicFollowUpService publicService;
+
+	
+	@GetMapping("/admin/qaqcgrievancedashboard")
+	public String viewqaqcdashboard(Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		int userId = Integer.parseInt(LoginUserId);
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String agent_name=LoginUserInfo.getCurrentUserDetails().getUsername();
+		model.addAttribute("agent_name", agent_name);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+		
+		List<Map<String,Object>> previousday=agentsService.getPreviousDayDashboardCounts();		
+		model.addAttribute("previousday", previousday);
+		System.out.println(previousday);
+		
+		List<Map<String,Object>> agentcount=agentsService.getAgentPreviousDayCount();	
+		model.addAttribute("agentcount", agentcount);
+		
+		return "modules/callcenterqaqc/qaqcgrievancedashboard";
+	}
+	
+	@GetMapping("/admin/qaqcassigntaskagents")
+	public String viewAgentAssign(Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		int userId = Integer.parseInt(LoginUserId);
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String agent_name=LoginUserInfo.getCurrentUserDetails().getUsername();
+		model.addAttribute("agent_name", agent_name);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+				
+		return "modules/callcenterqaqc/qaqctaskagentassign";
+	}
+		
+	
+	@GetMapping("/admin/qaqcfollowuplist")
+	public String viewAdminFollowuplist(Model model) {
+				
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		int userId = Integer.parseInt(LoginUserId);
+		model.addAttribute("LoginUserId",LoginUserId); 
+		String agent_name=LoginUserInfo.getCurrentUserDetails().getUsername();
+		model.addAttribute("agent_name", agent_name);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+				
+		return "modules/callcenterqaqc/qaqcfollowuplist";
+	}
+	
+	@GetMapping("/qaqctasklist")
+	public String viewqaqctasklist(Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+
+		
+		return "modules/callcenterqaqc/qaqctasklist";
+	}
+	
+	@GetMapping("/qaqcagentperformance")
+	public String viewAgentPerformance(Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		int userId = Integer.parseInt(LoginUserId);
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String agent_name=LoginUserInfo.getCurrentUserDetails().getUsername();
+		model.addAttribute("agent_name", agent_name);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+				
+		return "modules/callcenterqaqc/qaqcagentperformance";
+	}
+	
+	@GetMapping("/adminsettings")
+	public String viewAdminSettings(Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		
+		
+		int userId = Integer.parseInt(LoginUserId);
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String agent_name=LoginUserInfo.getCurrentUserDetails().getUsername();
+		model.addAttribute("agent_name", agent_name);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+		
+		List<Map<String, Object>> Counts=adminService.getAdminSettingCounts();
+		model.addAttribute("Counts", Counts);
+		
+		List<Map<String, Object>> agents=adminService.getAgentsForCallingtype();
+		model.addAttribute("Agents", agents);
+		
+				
+		return "modules/callcenterqaqc/qaqcadminsettings";
+	}
+	
+	@GetMapping("/agent/agentgrievancedashboard")
+	public String viewAgentGrievenceDashboardpage(
+			  @RequestParam(required = false) String startDate,
+			    @RequestParam(required = false) String endDate,
+	   	    Model model
+	) {
+		String loginUserId = LoginUserInfo.getLoginUserId();
+	    int userId = Integer.parseInt(loginUserId);
+	    
+	    model.addAttribute("LoginUserId", loginUserId);
+	    model.addAttribute("agent_name", LoginUserInfo.getCurrentUserDetails().getUsername());
+	    model.addAttribute("UserRole", LoginUserInfo.getUserRole());
+	    
+	    List<Map<String, Object>> agent=agentsService.getAgentName(userId);
+	    model.addAttribute("agent", agent);
+	    
+	    
+	    
+	 // Default dates if not provided
+	    if (startDate == null || endDate == null) {
+	        LocalDate today = LocalDate.now();
+	        startDate = today.toString();
+	        endDate = today.toString();
+	    }
+
+	    List<Map<String, Object>> details = agentsService.getAgentDashboard(userId, startDate, endDate);
+	    model.addAttribute("details", details);
+
+	    List<Map<String, Object>> details2 = agentsService.getAgentPerformanceData(userId, startDate, endDate);
+	    model.addAttribute("details2", details2);
+
+	    List<Map<String, Object>> tasks = agentsService.getAgentTaskDetails(userId, startDate, endDate);
+	    model.addAttribute("tasks", tasks);
+	    System.out.println("tasks: "+tasks);
+	    return "modules/callcenterqaqc/agentgrievancedashboard";
+	}
+	
+	
+	
+	@PostMapping("/agent/agentgrievancedashboard")
+	public String viewAgentGrievenceDashboard(
+	    @RequestParam(required = false) String startDate,
+	    @RequestParam(required = false) String endDate,
+	    Model model
+	) {
+	    String loginUserId = LoginUserInfo.getLoginUserId();
+	    int userId = Integer.parseInt(loginUserId);
+
+	    // Default dates if not provided
+	    if (startDate == null || endDate == null) {
+	        LocalDate today = LocalDate.now();
+	        startDate = today.toString();
+	        endDate = today.toString();
+	    }
+
+	    model.addAttribute("LoginUserId", loginUserId);
+	    model.addAttribute("agent_name", LoginUserInfo.getCurrentUserDetails().getUsername());
+	    model.addAttribute("UserRole", LoginUserInfo.getUserRole());
+	    
+	    List<Map<String, Object>> agent=agentsService.getAgentName(userId);
+	    model.addAttribute("agent", agent);
+	    
+//	    System.out.println("startdate: "+startDate );
+//	    System.out.println("enddate:" + endDate);
+
+	    List<Map<String, Object>> details = agentsService.getAgentDashboard(userId, startDate, endDate);
+	    model.addAttribute("details", details);
+
+	    List<Map<String, Object>> details2 = agentsService.getAgentPerformanceData(userId, startDate, endDate);
+	    model.addAttribute("details2", details2);
+
+	    List<Map<String, Object>> tasks = agentsService.getAgentTaskDetails(userId, startDate, endDate);
+	    model.addAttribute("tasks", tasks);
+
+	    return "modules/callcenterqaqc/agentgrievancedashboard";
+	    
+	}
+	
+    @GetMapping("/agent/qaqccalls")
+	public String viewAgentQaqcCalls(	    @RequestParam(required = false) String startDate,
+		    @RequestParam(required = false) String endDate,Model model) {
+		
+		String LoginUserId = LoginUserInfo.getLoginUserId();		
+		int userId = Integer.parseInt(LoginUserId);
+		model.addAttribute("userId",userId);
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		
+		String agent_name=LoginUserInfo.getCurrentUserDetails().getUsername();
+		model.addAttribute("agent_name", agent_name);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+		
+		List<Map<String, Object>> agent=agentsService.getAgentName(userId);
+	    model.addAttribute("agent", agent);
+		
+		// Default dates if not provided
+	    if (startDate == null || endDate == null) {
+	        LocalDate today = LocalDate.now();
+	        startDate = today.toString();
+	        endDate = today.toString();
+	    }
+		
+	    List<Map<String, Object>> details = agentsService.getAgentDashboard(userId, startDate, endDate);
+	    model.addAttribute("details", details);
+        
+        List<Map<String, Object>> qaqcCallslists=qaqcCallsService.getClosedComplaints(userId);        
+        model.addAttribute("qaqcCallsLists",qaqcCallslists);
+        
+        List<Map<String, Object>> qaqcCallsAction=qaqcCallsService.getCallCategories();       
+        model.addAttribute("qaqcCallsActioin",qaqcCallsAction);
+        
+        List<Map<String, Object>> qaqcSubmitDetails=qaqcCallsService.getSubmitDetails(userId);       
+        model.addAttribute("qaqcSubmitDetails",qaqcSubmitDetails);
+				
+		return "modules/callcenterqaqc/agentqaqccalls";
+	}
+	
+	
+	
+	@GetMapping("agent/qaqcinprogresscall")
+	public String viewqaqcin_progress_call(	    @RequestParam(required = false) String startDate,
+		    @RequestParam(required = false) String endDate,Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		int userId = Integer.parseInt(LoginUserId);
+		model.addAttribute("userId",userId);
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String agent_name=LoginUserInfo.getCurrentUserDetails().getUsername();
+		model.addAttribute("agent_name", agent_name);
+		List<Map<String, Object>> agent=agentsService.getAgentName(userId);
+	    model.addAttribute("agent", agent);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+		// Default dates if not provided
+	    if (startDate == null || endDate == null) {
+	        LocalDate today = LocalDate.now();
+	        startDate = today.toString();
+	        endDate = today.toString();
+	    }
+		
+	    List<Map<String, Object>> details = agentsService.getAgentDashboard(userId, startDate, endDate);
+	    model.addAttribute("details", details);
+		
+		List<Map<String, Object>> inprogresslists=inprogresscallService.getInProgressCalls(userId);
+        model.addAttribute("inprogresslists", inprogresslists);
+        
+        List<Map<String, Object>> qaqcactionlists=inprogresscallService.getActionsCatergory();
+		model.addAttribute("qaqcactionlists", qaqcactionlists);
+		
+		List<Map<String, Object>> inSubmitDetails=inprogresscallService.getInprogressSubmitDetails(userId);       
+        model.addAttribute("inSubmitDetails",inSubmitDetails);
+		
+		return "modules/callcenterqaqc/agentqaqcinprogresscalls";	
+	}
+	
+	@GetMapping("/agent/qaqcfollowupcalls")
+	public String viewAgentQaqcFollowupCalls(@RequestParam(required = false) String startDate,
+		    @RequestParam(required = false) String endDate,Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		int userId = Integer.parseInt(LoginUserId);
+		model.addAttribute("userId",userId);
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String agent_name=LoginUserInfo.getCurrentUserDetails().getUsername();
+		model.addAttribute("agent_name", agent_name);
+		List<Map<String, Object>> agent=agentsService.getAgentName(userId);
+	    model.addAttribute("agent", agent);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+		// Default dates if not provided
+	    if (startDate == null || endDate == null) {
+	        LocalDate today = LocalDate.now();
+	        startDate = today.toString();
+	        endDate = today.toString();
+	    }
+		
+		
+	    List<Map<String, Object>> details = agentsService.getAgentDashboard(userId, startDate, endDate);
+	    model.addAttribute("details", details);
+		
+		List<Map<String, Object>> qaqcfollowuplists=followUpService.getFollowUpCalls(userId);
+		model.addAttribute("qaqcfollowuplists",qaqcfollowuplists);
+		
+		List<Map<String, Object>> qaqccategorylists=followUpService.getFollowUpCatergory();
+        
+        model.addAttribute("qaqccategorylists",qaqccategorylists);
+        
+        List<Map<String, Object>> fcSubmitDetails=followUpService.getFollowupSubmitDetails(userId);       
+        model.addAttribute("fcSubmitDetails",fcSubmitDetails);
+				
+		return "modules/callcenterqaqc/agentqaqcfollowupcalls";
+	}
+	
+	
+	@GetMapping("/agent/qaqcpublicfollowupcalls")
+	public String viewAgentQaqcPublicFollowupCalls(@RequestParam(required = false) String startDate,
+		    @RequestParam(required = false) String endDate,Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		int userId = Integer.parseInt(LoginUserId);
+		model.addAttribute("userId",userId);
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String agent_name=LoginUserInfo.getCurrentUserDetails().getUsername();
+		model.addAttribute("agent_name", agent_name);
+		List<Map<String, Object>> agent=agentsService.getAgentName(userId);
+	    model.addAttribute("agent", agent);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+		// Default dates if not provided
+	    if (startDate == null || endDate == null) {
+	        LocalDate today = LocalDate.now();
+	        startDate = today.toString();
+	        endDate = today.toString();
+	    }
+		
+		
+	    List<Map<String, Object>> details = agentsService.getAgentDashboard(userId, startDate, endDate);
+	    model.addAttribute("details", details);
+		
+		List<Map<String, Object>> qaqcfollowuplists=publicService.getFollowUpCalls(userId);
+		model.addAttribute("qaqcfollowuplists",qaqcfollowuplists);
+		
+		List<Map<String, Object>> qaqccategorylists=publicService.getFollowUpCatergory();
+        
+        model.addAttribute("qaqccategorylists",qaqccategorylists);
+        
+        List<Map<String, Object>> fcSubmitDetails=publicService.getFollowupSubmitDetails(userId);       
+        model.addAttribute("fcSubmitDetails",fcSubmitDetails);
+				
+		return "modules/callcenterqaqc/agentqaqcpublicfollowupcalls";
+	}
+	
+	@GetMapping("/complaintstatus")
+	public String viewstatuscheck(Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		int userId = Integer.parseInt(LoginUserId);
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		String agent_name=LoginUserInfo.getCurrentUserDetails().getUsername();
+		model.addAttribute("agent_name", agent_name);
+		
+		String UserRole = LoginUserInfo.getUserRole();
+		model.addAttribute("UserRole", UserRole);
+		
+						
+		return "modules/callcenterqaqc/complaintstatus";
+	}
+	
+	@GetMapping("/pgrcomplaint")
+	public String viewPGRpage(Model model) {
+		String loginUserId = LoginUserInfo.getLoginUserId();
+	    int userId = Integer.parseInt(loginUserId);
+	    
+	    model.addAttribute("LoginUserId", loginUserId);
+	    model.addAttribute("agent_name", LoginUserInfo.getCurrentUserDetails().getUsername());
+	    model.addAttribute("UserRole", LoginUserInfo.getUserRole());
+	    
+	    return "modules/callcenterqaqc/pgrcomplaints";
+	}
+	
+	@GetMapping("/overallreport")
+	public String viewOverallReports(Model model) {
+		String loginUserId = LoginUserInfo.getLoginUserId();
+	    int userId = Integer.parseInt(loginUserId);
+	    
+	    model.addAttribute("LoginUserId", loginUserId);
+	    model.addAttribute("agent_name", LoginUserInfo.getCurrentUserDetails().getUsername());
+	    model.addAttribute("UserRole", LoginUserInfo.getUserRole());
+	    
+	    return "modules/callcenterqaqc/overallreport";
+	}
+	
+	//callcenterqaqc/socialmediacomplaints
+	
+	@GetMapping("/socialmediacomplaints")
+	public String viewSocialMediaComplaints(Model model) {
+		String loginUserId = LoginUserInfo.getLoginUserId();
+	    int userId = Integer.parseInt(loginUserId);
+	    
+	    model.addAttribute("LoginUserId", loginUserId);
+	    model.addAttribute("userId", userId);
+	    model.addAttribute("agent_name", LoginUserInfo.getCurrentUserDetails().getUsername());
+	    model.addAttribute("UserRole", LoginUserInfo.getUserRole());
+	    
+	    return "modules/callcenterqaqc/socialmediacomplaints";
+	}
+	
+	
+	@GetMapping("/smfinishedcomplaints")
+	public String viewSocialMediaCompletedComplaints(Model model) {
+		String loginUserId = LoginUserInfo.getLoginUserId();
+	    int userId = Integer.parseInt(loginUserId);
+	    
+	    model.addAttribute("LoginUserId", loginUserId);
+	    model.addAttribute("userId", userId);
+	    model.addAttribute("agent_name", LoginUserInfo.getCurrentUserDetails().getUsername());
+	    model.addAttribute("UserRole", LoginUserInfo.getUserRole());
+	    
+	    return "modules/callcenterqaqc/socialmediacompletedlist";
+	}
+	
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/PublicFollowUpController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/PublicFollowUpController.java
new file mode 100644
index 0000000..2402829
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/PublicFollowUpController.java
@@ -0,0 +1,82 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.FollowUpService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.PublicFollowUpService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcCallsService;
+
+@RequestMapping("gcc/api/callcenterqaqc/agent/publicfollowupcalls")  
+@RestController
+public class PublicFollowUpController {
+	
+	@Autowired
+	RestTemplate restTemplate;
+	
+	@Autowired	
+	private QaqcCallsService qaqcCallsService;
+	
+	@Autowired
+	private FollowUpService followService;
+	
+	@Autowired
+	private PublicFollowUpService publicService;
+	
+	@PostMapping("/update")
+	@ResponseBody
+	public ResponseEntity<String> updateCallDetails(@RequestParam("complaintNumber") String complaintNumber,
+	                                                @RequestParam("dataId") int dataId,
+	                                                @RequestParam("userId") String userId,
+	                                                @RequestParam("action") String action,
+	                                                @RequestParam(value = "remainderDate", required = false,defaultValue = "-") String remainderDate,
+	                                                @RequestParam("remarks") String remarks) {
+	    try {
+	        System.out.println("Updating Complaint Number: " + complaintNumber);
+	        System.out.println("Updating Data ID: " + dataId);
+	        System.out.println("Action: " + action);
+	        System.out.println("Remarks: " + remarks);
+	        int updated_agent = Integer.parseInt(userId);
+			System.out.println("updated_agent: " + updated_agent);
+
+	        Map<String, Object> complaintDetails = qaqcCallsService.getComplaintDetails(dataId);
+	        
+	        Integer agentId = (Integer) complaintDetails.get("agent_id");
+		    Map<String, Object> erp_username=qaqcCallsService.getErpnameById(agentId);
+		    String Erpname=(String) erp_username.get("erp_username");
+	        
+			  if ("COMPLETED".equals(action) || "REOPEN".equals(action) ||"WRONG_ASSIGN".equals(action))
+			  { 
+				  boolean statusUpdated =qaqcCallsService.ChangeStatusInErp(complaintNumber, remarks, action,Erpname);
+				  System.out.println("statusUpdated="+statusUpdated); 
+					if (!statusUpdated)
+					{
+						return ResponseEntity.ok("error");
+					}
+			  }
+		    
+	        // Update complaint details
+	        followService.updateFollowupComplaintDetails(complaintNumber, dataId, action, remarks,updated_agent);
+	        followService.updateComplaintHistoryDetails(complaintNumber, dataId, action, remarks,updated_agent, remainderDate);
+
+	        Map<String, Object> logDetails = qaqcCallsService.getComplaintDetails(dataId);
+	        // Upload to logs
+	        followService.uploadComplaintDetailsInLogs(logDetails, action, complaintNumber,remainderDate);
+	        
+	        return ResponseEntity.ok("Success");
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error");
+	    }
+	}
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAPIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAPIController.java
new file mode 100644
index 0000000..532ea75
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAPIController.java
@@ -0,0 +1,291 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.io.UnsupportedEncodingException;
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
+import java.security.SecureRandom;
+import java.text.SimpleDateFormat;
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+import java.time.format.DateTimeParseException;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.logging.Level;
+import java.util.logging.Logger;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.format.annotation.DateTimeFormat;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.JsonMappingException;
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.FollowUpService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcService;
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+
+
+
+@RequestMapping("gcc/api/callcenterqaqc")
+@RestController("GrivanceQCapiController")
+
+public class QaqcAPIController {
+	
+	private final RestTemplate restTemplate;
+	private final AppConfig appConfig;
+	
+	
+	@Autowired  
+    public QaqcAPIController(RestTemplate restTemplate, AppConfig appConfig) {
+        this.restTemplate = restTemplate;
+        this.appConfig = appConfig;
+    }
+
+	@Autowired
+    private QaqcService qaqcService;
+	
+	@Autowired
+	private FollowUpService followUpService;
+
+ 
+    
+    @GetMapping("/getComplaintDetails/{complaintNumber}")
+    public Map<String, Object> getComplaintDetails(
+            @PathVariable String complaintNumber,
+            @RequestParam(required = false) String gender,
+            @RequestParam(required = false) String compmode,
+            @RequestParam(required = false) String deptname) {
+
+        Map<String, Object> resultMap = new HashMap<>();
+
+        try {
+            String url = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=getComplaintByID&ComplaintId=" 
+                + complaintNumber + "&imgUrlonly=yes";
+            System.out.println("Request URL: " + url);
+
+            ResponseEntity<String> responseEntity = restTemplate.getForEntity(url, String.class);
+
+            if (responseEntity.getStatusCode().is2xxSuccessful()) {
+                String responseBody = responseEntity.getBody();
+                System.out.println("Response Body: " + responseBody);
+
+                ObjectMapper mapper = new ObjectMapper();
+                JsonNode rootNode = mapper.readTree(responseBody);
+
+                JsonNode complaintDetails = rootNode.path(0).path("ComplaintListHistory").path(0);
+                
+                String registerDate=complaintDetails.path("complaintopendate").asText("N/A");
+                System.out.println("registerdate====="+registerDate);
+                
+                String formattedDate = "N/A"; // Default value if parsing fails
+
+                if (!registerDate.equals("N/A") && !registerDate.isEmpty()) {
+                    try {
+                        // Parse the input date string
+                        SimpleDateFormat inputFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.S");
+                        Date date = inputFormat.parse(registerDate);
+
+                        // Format the date to dd-MM-yyyy
+                        SimpleDateFormat outputFormat = new SimpleDateFormat("dd-MM-yyyy");
+                        formattedDate = outputFormat.format(date);
+                    } catch (Exception e) {
+                        e.printStackTrace(); // Log exception for debugging
+                    }
+                }
+
+                if (!complaintDetails.isMissingNode()) {
+                    // Existing fields
+                    resultMap.put("complaintid", complaintDetails.path("complaintid").asText("N/A"));
+                    resultMap.put("complaintdate", formattedDate);
+                    resultMap.put("complainantName", complaintDetails.path("CustomerName").asText("N/A"));
+                    resultMap.put("mobileNumber", complaintDetails.path("CustomerMobile").asText("N/A"));
+                    resultMap.put("complaintType", complaintDetails.path("complainttype").asText("N/A"));
+                    resultMap.put("description", complaintDetails.path("complaintdetails").asText("N/A"));
+                    resultMap.put("currentStatus", complaintDetails.path("complaintcurrentstatus").asText("N/A"));
+                    resultMap.put("Street", complaintDetails.path("Street").asText("N/A"));
+                    resultMap.put("Area", complaintDetails.path("Area").asText("N/A"));
+                    resultMap.put("Landmark", complaintDetails.path("Landmark").asText("N/A"));
+                    resultMap.put("Location", complaintDetails.path("Location").asText("N/A"));
+                    resultMap.put("Zone", complaintDetails.path("Zone").asText("N/A"));
+                    resultMap.put("Division", complaintDetails.path("Division").asText("N/A"));
+                    resultMap.put("OfficialMobile", complaintDetails.path("OfficialMobile").asText("N/A"));
+                    resultMap.put("gender", gender != null ? gender : complaintDetails.path("GENDER").asText("N/A"));
+                    resultMap.put("deptname", deptname != null ? deptname : complaintDetails.path("DEPT_NAME").asText("N/A"));
+                    resultMap.put("compmode", compmode != null ? compmode : complaintDetails.path("COMP_MODE").asText("N/A"));
+
+                 // Comments section
+                    JsonNode comments = complaintDetails.path("Comments");
+                    if (!comments.isMissingNode()) {
+                        List<Map<String, Object>> commentList = new ArrayList<>();
+                        for (JsonNode commentNode : comments) {
+                            Map<String, Object> commentData = new HashMap<>();
+                            
+                            // Extracting comment details
+                            commentData.put("user", commentNode.path("user").asText("N/A"));
+                            commentData.put("message", commentNode.path("message").asText("N/A"));
+                            commentData.put("comment_date", commentNode.path("comment_date").asText("N/A"));
+                            
+                            // Handling media link (Image) as part of userimages array for each comment
+                            JsonNode userImages = commentNode.path("userimages");
+                            if (!userImages.isMissingNode() && userImages.isArray() && userImages.size() > 0) {
+                                String mediaLink = userImages.get(0).path("Comp_Image").asText(null);
+                                // If media link is valid, add it to the comment data
+                                if (mediaLink != null && !mediaLink.equals("null") && !mediaLink.isEmpty()) {
+                                    commentData.put("Comp_Image", mediaLink);
+                                } else {
+                                    commentData.put("Comp_Image", "No image available");
+                                }
+                            } else {
+                                commentData.put("Comp_Image", "No image available");
+                            }
+
+                            // Add the comment data to the list
+                            commentList.add(commentData);
+                        }
+                        resultMap.put("comments", commentList);
+                    }
+
+
+                 // Handling media link (Image) as part of userimages array
+                    String mediaLink = complaintDetails.path("mediaLink").asText(null);
+                    List<Map<String, String>> userImagesList = new ArrayList<>();
+                    Map<String, String> imageMap = new HashMap<>();
+                    imageMap.put("Comp_Image", mediaLink != null && !mediaLink.equals("null") ? mediaLink : null);
+                    userImagesList.add(imageMap);
+                    resultMap.put("userimages", userImagesList);
+
+
+                    System.out.println("Image URL from API: " + mediaLink);
+                }
+            } else {
+                resultMap.put("error", "Failed to retrieve complaint details.");
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+            resultMap.put("error", "Error processing request");
+        }
+
+        return resultMap;
+    }
+    
+ 
+    @GetMapping("/followuplist")
+    @ResponseBody
+    public List<Map<String, Object>> getFollowUpList(
+            @RequestParam(value = "callStatus", required = false) String callStatus,
+            @RequestParam(required = false) @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate fromDate,
+            @RequestParam(required = false) @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate toDate) {
+
+        // Set default 'toDate' to a future date (1 year ahead) if not provided
+        if (toDate == null) {
+            toDate = LocalDate.now().plusMonths(1); // Set to one year ahead or any other future date
+           //toDate= qaqcService.getMaxRemainderdate();
+        }
+
+        // Set default 'fromDate' to the start of the current month if not provided
+        if (fromDate == null) {
+            fromDate = LocalDate.now().withDayOfMonth(1);  // Start from the first day of the current month
+        }
+
+        // Print debug info
+        System.out.println("Received callStatus: " + callStatus);
+        System.out.println("From Date: " + fromDate);
+        System.out.println("To Date: " + toDate);
+
+        // Call the service to fetch the filtered data based on the status and date range
+        return qaqcService.getFollowUpDetailsByStatus(callStatus, fromDate, toDate);
+    }
+
+    
+    @GetMapping("/followup/todayCount")
+    public ResponseEntity<Map<String, Long>> getTodayFollowUpCount(@RequestParam String followupStatus) {
+        LocalDate today = LocalDate.now(); // Get the current date
+        Map<String, Long> counts = qaqcService.countFollowUpsByDateAndStatus(today, followupStatus);
+        
+        return ResponseEntity.ok(counts);  // Return the count in the response
+    }
+    
+    @GetMapping("/callhistory")
+    public ResponseEntity<List<Map<String, Object>>> getCallHistory(@RequestParam String complaintNumber) {
+        List<Map<String, Object>> callHistory = followUpService.getCallHistory(complaintNumber);
+        if (callHistory.isEmpty()) {
+            return ResponseEntity.status(HttpStatus.NOT_FOUND)
+                    .body(Collections.emptyList());
+        }
+        return ResponseEntity.ok(callHistory);
+    }
+    
+    @GetMapping("/getfilterreport")
+    public Map<String, Object> getFilterReports(
+            @RequestParam String startDate,
+            @RequestParam String endDate,
+            @RequestParam String status,
+            @RequestParam String group,
+            @RequestParam String type,
+            @RequestParam String mode,
+            @RequestParam String zone) {
+		Map<String, Object> response = new HashMap<>();
+
+		try {
+			
+        LocalDate fromLocalDate = LocalDate.parse(startDate, DateTimeFormatter.ISO_DATE);
+        LocalDate toLocalDate = LocalDate.parse(endDate, DateTimeFormatter.ISO_DATE);
+        String formattedFromDate = fromLocalDate.format(DateTimeFormatter.ofPattern("dd/MM/yyyy"));
+        String formattedToDate = toLocalDate.format(DateTimeFormatter.ofPattern("dd/MM/yyyy"));
+        
+        String url="https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=ms_dashboard_details&From_date="+formattedFromDate+"&To_date="+formattedToDate+"&jsonResp=Yes&Status="+status+"&isQcuser=Yes"+"&ComplaintType="+type+"&ComplaintGroupId="+group+"&compmode="+mode+"&Zoneid="+zone;
+		System.out.println(url);
+		
+		RestTemplate restTemplate = new RestTemplate();
+
+		// Fetch response as String
+		ResponseEntity<String> responses = restTemplate.getForEntity(url, String.class);
+		String rawResponse = responses.getBody();
+
+		// Preprocess response to remove invalid characters if needed
+		if (rawResponse != null) {
+			//rawResponse = rawResponse.replaceAll("\"\"", "\""); // Replace double-double quotes
+			//rawResponse = rawResponse.replaceAll("(?<![,{])\"R", "\"R"); // Example: Fix missing commas
+		}
+		ObjectMapper objectMapper = new ObjectMapper();
+		Map<String, Object> responseMap = objectMapper.readValue(rawResponse, Map.class);
+		List<Map<String, Object>> details = (List<Map<String, Object>>) responseMap.get("Details");
+        //System.out.println(details);
+        if (details == null) {
+        	response.put("status", "nodata");
+            response.put("message", "No Data, please change criteria");
+        }
+        else {
+        	response.put("status", "success");
+            response.put("details", details);
+        }
+        
+		}
+		catch (Exception e) {
+			response.put("status", "error");
+	        response.put("message", "An error occurred while fetching data.");
+	        e.printStackTrace();
+		}
+        
+        return response;
+    }
+    
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAdminSettingsController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAdminSettingsController.java
new file mode 100644
index 0000000..7c7d3a5
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAdminSettingsController.java
@@ -0,0 +1,160 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.logging.Level;
+import java.util.logging.Logger;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcAdminSettingService;
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+
+@RequestMapping("gcc/api/callcenterqaqc/adminsettings")
+@RestController
+public class QaqcAdminSettingsController {
+	
+	private final RestTemplate restTemplate;
+	private final AppConfig appConfig;
+	
+	
+	@Autowired  
+    public QaqcAdminSettingsController(RestTemplate restTemplate, AppConfig appConfig) {
+        this.restTemplate = restTemplate;
+        this.appConfig = appConfig;
+    }
+	
+	@Autowired
+	private QaqcAdminSettingService adminService;
+	
+	@PostMapping("/saveproductivity")
+	public ResponseEntity<Map<String, String>> saveproductivity(@RequestParam int productivity_count)
+	{
+		Map<String, String> response = new HashMap<>();
+		try {
+            
+            // Save task ID
+            int rowsInserted = adminService.saveProductivity(productivity_count);
+
+            if (rowsInserted > 0) {
+                response.put("status", "success");
+                response.put("message", "Productivity inserted successfully");
+                return ResponseEntity.ok(response);
+            }
+
+            response.put("status", "fail");
+            response.put("message", "Productivity not saved");
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(response);  // Change to BAD_REQUEST for failure
+
+        }  catch (Exception e) {
+            // Logging the error
+            Logger.getLogger(getClass().getName()).log(Level.SEVERE, "Error saving task", e);
+            
+            response.put("status", "error");
+            response.put("message", "Failed to save productivity");
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);
+        }
+	}
+	
+	
+	@PostMapping("/updateproductivity")
+	public ResponseEntity<Map<String, String>> updateProductivityById(@RequestBody Map<String, Integer> requestData)
+	{			Map<String, String> response = new HashMap<>();
+		try {
+            
+            // Save task ID
+	        int productivityCount = requestData.getOrDefault("productivity_count", 0); // Default to 0 if not provided
+	        int rowsUpdated = adminService.updateProductivity(productivityCount);
+
+	        
+            if (rowsUpdated > 0) {
+                response.put("status", "success");
+                response.put("message", "Productivity saved successfully");
+                return ResponseEntity.ok(response);
+            }
+
+            response.put("status", "fail");
+            response.put("message", "Productivity not saved");
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(response);  // Change to BAD_REQUEST for failure
+
+        }  catch (Exception e) {
+            // Logging the error
+            Logger.getLogger(getClass().getName()).log(Level.SEVERE, "Error saving task", e);
+            
+            response.put("status", "error");
+            response.put("message", "Failed to save productivity");
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);
+        }
+	}
+	
+	@GetMapping("/getproductivity")
+	public Integer getProductivity()
+	{
+		return adminService.getProductivity();
+	}
+	
+	@GetMapping("/getadminsettingcounts")
+	public List<Map<String, Object>> getadminsettingcounts()
+	{
+		return adminService.getAdminSettingCounts();
+				 
+	}
+	
+	@GetMapping("/assigncallingtype")
+	public List<Map<String, Object>> assigncallingtype()
+	{
+		return adminService.getAgentsForCallingtype();
+				 
+	}
+	
+	@PostMapping("/updateCallType") // Bulk update endpoint
+	public ResponseEntity<Map<String, String>> updateCallType(@RequestBody List<Map<String, Object>> selectedAgents) {
+					
+	    Map<String, String> response = new HashMap<>();
+
+	    try {
+	        int rowsUpdated = 0;
+	       
+	        // Loop through each selected agent and update their calling_type
+	        for (Map<String, Object> agent : selectedAgents) {
+	            String callingType = (String) agent.get("calling_type");
+
+	            // Parse agent_id to Integer if it's passed as a String
+	            int agentId = Integer.parseInt(agent.get("agent_id").toString());  // Ensure it's parsed as Integer
+
+	            // Update calling type for the agent
+	            rowsUpdated += adminService.updateCallType(callingType, agentId);
+	            
+	            
+	        }
+	        adminService.saveCallingTypeInSettings();
+
+	        if (rowsUpdated > 0) {
+	            response.put("status", "success");
+	            response.put("message", "Agents Assigned successfully");
+	            return ResponseEntity.ok(response);
+	        } else {
+	            response.put("status", "error");
+	            response.put("message", "No agents updated");
+	            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);
+	        }
+	    } catch (Exception e) {
+	        response.put("status", "error");
+	        response.put("message", "Error occurred while updating calling types: " + e.getMessage());
+	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);
+	    }
+	}
+
+
+	
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentAssignAPIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentAssignAPIController.java
new file mode 100644
index 0000000..fa49a52
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentAssignAPIController.java
@@ -0,0 +1,235 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.security.SecureRandom;
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+import java.time.format.DateTimeParseException;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.Comparator;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.logging.Level;
+import java.util.logging.Logger;
+import java.util.stream.Collectors;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcAdminSettingService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcAgentAssignService;
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+
+
+@RestController
+@RequestMapping("gcc/api/callcenterqaqc/agentassign")
+public class QaqcAgentAssignAPIController {
+	
+	private final RestTemplate restTemplate;
+	
+	@Autowired  
+    public QaqcAgentAssignAPIController(RestTemplate restTemplate) {
+        this.restTemplate = restTemplate;
+    }
+	
+	@Autowired
+	private QaqcAgentAssignService agentAssignService;
+	
+	@Autowired
+	private QaqcAdminSettingService adminService;
+	
+	
+			
+	@GetMapping("/getavailableagents")
+	public ResponseEntity<Map<String, Object>> getAvailableAgents(@RequestParam int totalDataCount) {
+	    Map<String, Object> response = new HashMap<>();
+	    try {
+	        // Fetch available agents
+	        List<Map<String, Object>> availableAgents = agentAssignService.getAvailableOutboundAgents();
+	        Integer productivity_count = adminService.getProductivity();
+
+	        if (availableAgents.isEmpty() || totalDataCount == 0) {
+	            response.put("status", "error");
+	            response.put("message", "No available agents or totalDataCount must be greater than 0.");
+	            return ResponseEntity.ok(response);
+	        }
+	        
+	        
+	        // Process and filter agents based on productivity_count
+	        List<Map<String, Object>> filteredAgents = new ArrayList<>();
+	        for (Map<String, Object> agent : availableAgents) {
+	            Integer agentId = (Integer) agent.get("agent_id");
+	            String agentName = (String) agent.get("agent_name");
+	            Integer todayCount=agentAssignService.getTodayCountForAgent(agentId);
+	            Integer campaignPendingCount = agentAssignService.getCampaignPendingCountForAgent(agentId);
+	            Integer pendingCounts=todayCount+campaignPendingCount;
+	         // Log the details of each agent
+	            System.out.println("Agent ID: " + agentId + ", Today Count: " + todayCount +
+	                    ", Campaign Pending Count: " + campaignPendingCount + ", Pending Counts: " + pendingCounts);
+	            
+	            if(pendingCounts<productivity_count) {
+	            filteredAgents.add(Map.of(
+	                "agent_id", agentId,
+	                "agent_name", agentName,
+	                "campaignPendingCount", campaignPendingCount,
+	                "todayCount",todayCount
+	            ));
+	            System.out.println("Agent added to filteredAgents: " + agentName);
+
+	            }	           
+	            
+	        }
+	        System.out.println("Filtered Agents Size: " + filteredAgents.size());
+
+	        
+	        if (filteredAgents.isEmpty()) {
+	            response.put("status", "error");
+	            response.put("message", "No Available Agents,To continue Increase the Productivity");
+	            return ResponseEntity.ok(response);
+	        }
+	        
+	        // Calculate agent_available_count based on filtered agents
+	        int agent_available_count = filteredAgents.size();
+	        
+	        // Calculate calls per agent using filtered agent count
+	        int calls_per_agent = totalDataCount / agent_available_count;
+	        int remainder = totalDataCount % agent_available_count;
+
+	        // Distribute calls_per_agent and remainder
+	        List<Map<String, Object>> finalFilteredAgents = new ArrayList<>();
+	        filteredAgents.sort(Comparator.comparingInt(agent -> (Integer) agent.get("campaignPendingCount")));
+
+	        for (int i = 0; i < filteredAgents.size(); i++) {
+	            Map<String, Object> agent = filteredAgents.get(i);
+	            Integer agentId = (Integer) agent.get("agent_id");
+	            String agentName = (String) agent.get("agent_name");
+	            Integer todayCount = (Integer) agent.get("todayCount");
+	            Integer campaignPendingCount = (Integer) agent.get("campaignPendingCount");
+	            // Add 1 extra call for agents handling the remainder, starting from the first agent
+	            int additionalCalls = (i < remainder) ? 1 : 0;
+	            int totalCallsCount = todayCount+campaignPendingCount + calls_per_agent + additionalCalls;
+
+	            if (totalCallsCount < productivity_count) {
+	                finalFilteredAgents.add(Map.of(
+	                    "agent_id", agentId,
+	                    "agent_name", agentName,
+	                    "totalCallsCount", totalCallsCount,
+	                    "todayCount",todayCount,
+	                    "campaignPendingCount", campaignPendingCount,
+	                    "calls_per_agent", calls_per_agent + additionalCalls
+	                ));
+	                System.out.println("Agent added to final======filteredAgents: " + agentName);
+	            }
+	        }
+	        System.out.println("Final Filtered Agents Size: " + finalFilteredAgents.size());
+	        
+	        if (finalFilteredAgents.isEmpty()) {
+	            response.put("status", "error");
+	            response.put("message", "No Available Agents,To continue Increase the Productivity");
+	            return ResponseEntity.ok(response);
+	        }
+	        
+	        
+	        int agent_available_count2 = finalFilteredAgents.size();
+	        
+	        // Calculate calls per agent using filtered agent count
+	        int calls_per_agent2 = totalDataCount / agent_available_count2;
+	        int remainder2 = totalDataCount % agent_available_count2;
+
+	        // Distribute calls_per_agent and remainder
+	        List<Map<String, Object>> LastfinalFilteredAgents = new ArrayList<>();
+	        finalFilteredAgents.sort(Comparator.comparingInt(agent -> (Integer) agent.get("campaignPendingCount")));
+
+	        for (int i = 0; i < finalFilteredAgents.size(); i++) {
+	            Map<String, Object> agent = finalFilteredAgents.get(i);
+	            Integer agentId = (Integer) agent.get("agent_id");
+	            String agentName = (String) agent.get("agent_name");
+	            Integer todayCount1 = (Integer) agent.get("todayCount");
+	            Integer campaignPendingCount = (Integer) agent.get("campaignPendingCount");
+	            // Add 1 extra call for agents handling the remainder, starting from the first agent
+	            int additionalCalls1 = (i < remainder2) ? 1 : 0;
+	            int totalCallsCount1 = todayCount1+campaignPendingCount + calls_per_agent2 + additionalCalls1;
+
+	            if (totalCallsCount1 < productivity_count) {
+	            	LastfinalFilteredAgents.add(Map.of(
+	                    "agent_id", agentId,
+	                    "agent_name", agentName,
+	                    "totalCallsCount", totalCallsCount1,
+	                    "todayCount1",todayCount1,
+	                    "campaignPendingCount", campaignPendingCount,
+	                    "calls_per_agent", calls_per_agent2 + additionalCalls1
+	                ));
+	                System.out.println("Agent added to Lastfinal======LastfinalFilteredAgents: " + agentName);
+	            }
+	        }
+	        System.out.println("Filtered Agents Size: " + LastfinalFilteredAgents.size());
+	        
+	        if (LastfinalFilteredAgents.isEmpty()) {
+	            response.put("status", "error");
+	            response.put("message", "No Available Agents,To continue Increase the Productivity");
+	            return ResponseEntity.ok(response);
+	        }
+
+	        // Build response
+	        response.put("status", "success");
+	        response.put("message", "Available agents fetched successfully");
+	        response.put("available_agents", LastfinalFilteredAgents);
+	        response.put("productivity_count", productivity_count);
+	        response.put("agent_available_count", LastfinalFilteredAgents.size());
+
+	        return ResponseEntity.ok(response);
+	    } catch (Exception e) {
+	        e.printStackTrace();
+
+	        // Return error response in case of failure
+	        response.put("status", "error");
+	        response.put("message", "Failed to fetch available agents");
+	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);
+	    }
+	}
+	
+	
+	@PostMapping("/taskassign")
+	public ResponseEntity<Map<String, Object>> assignTasks(@RequestBody Map<String, Object> requestData) {
+	    Map<String, Object> response;
+	    try {
+	        // Delegate transactional work to the service
+	        response = agentAssignService.assignTasksTransactionally(requestData);
+	        return ResponseEntity.ok(response);
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        response = new HashMap<>();
+	        response.put("status", "error");
+	        response.put("message", "An error occurred: " + e.getMessage());
+	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);
+	    }
+	}
+	
+	@GetMapping("/deleteRecords")
+	public ResponseEntity<String> deleteRecordsInUploadData() {
+	    try {
+	        int rowsAffected = agentAssignService.deleteUploadDataTable();
+	        if (rowsAffected > 0) {
+	            return ResponseEntity.ok("success");
+	        } else {
+	            return ResponseEntity.ok("No records to delete");
+	        }
+	    } catch (Exception e) {
+	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error deleting records");
+	    }
+	}
+	
+	
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentsAPIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentsAPIController.java
new file mode 100644
index 0000000..be39983
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentsAPIController.java
@@ -0,0 +1,161 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.io.InputStream;
+import java.net.URL;
+import java.net.URLConnection;
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
+import java.time.LocalDate;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Required;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcAgentsService;
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+@RequestMapping("gcc/api/callcenterqaqc/agent")
+@RestController
+public class QaqcAgentsAPIController {
+	
+	private final RestTemplate restTemplate;
+	private final AppConfig appConfig;
+	
+	
+	@Autowired  
+    public QaqcAgentsAPIController(RestTemplate restTemplate, AppConfig appConfig) {
+        this.restTemplate = restTemplate;
+        this.appConfig = appConfig;
+    }
+	
+	@Autowired
+	private QaqcAgentsService agentsService;
+	
+		
+	@GetMapping("/getdataforagents")
+	public ResponseEntity<Map<String, Object>> getdataforagents(@RequestParam int agent_id,@RequestParam int qaqc_id)
+	{
+		Map<String, Object> response = new HashMap<>();
+		
+		try {
+			
+		List<Map<String, Object>> tasks = agentsService.getdataforagents(agent_id,qaqc_id);
+		
+		if (tasks.isEmpty()) {
+            
+            response.put("status", "no_data");
+            response.put("message", "No data found for the given agent_id and qaqc_id.");
+        } else {
+            // Success case
+            response.put("status", "success");
+            response.put("message", "Data retrieved successfully.");
+            response.put("tasks", tasks);
+        } 
+        return ResponseEntity.ok(response);
+
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        response.put("status", "error");
+	        response.put("message", "An error occurred: " + e.getMessage());
+	        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);
+	    }
+					
+	}
+	
+	@PostMapping("/savecallstatus")
+	public ResponseEntity<String> savecallstatus(@RequestParam String call_status,@RequestParam String remarks,@RequestParam String complaintNumber)//get full body data 
+	{
+				
+		agentsService.savecallstatus(call_status, remarks,complaintNumber);//get all dbdata and save here and service also
+		agentsService.savecallstatusinlogs(call_status, remarks,complaintNumber);//get all dbdata and save here and service also
+       
+        return ResponseEntity.ok("Data Inserted successfully.");
+					
+	}
+
+	
+	
+	@GetMapping("/getagentperformancecount")
+    public List<Map<String, Object>> getAgentPerformanceCount(
+            @RequestParam(required = false) String startDate, 
+            @RequestParam(required = false) String endDate) {
+        
+    	List<Map<String, Object>> counts = agentsService.getAgentPerformanceCount(startDate, endDate);
+    	System.out.println("fromdates: " + startDate);
+    	System.out.println("todate: " + endDate);
+    	System.out.println("overallcounts: " + counts );
+        return counts;
+    }
+		
+	@GetMapping("/getagentperformancelist")
+    public List<Map<String, Object>> getAgentPerformanceList(
+        @RequestParam(required = false) String startDate,
+        @RequestParam(required = false) String endDate) {
+        
+        // Fetch agent performance data from service
+        List<Map<String, Object>> agentPerformanceData = agentsService.getAgentPerformanceList(startDate, endDate);
+
+        // Log or return the data
+        System.out.println("Agent Performance Data: " + agentPerformanceData);
+        return agentPerformanceData;
+    }
+	
+	@GetMapping("/agenttaskwise")
+	public List<Map<String, Object>> getAgentTaskwiseData(@RequestParam String agentId) {
+	    // Call the service to fetch agent task-wise data
+	    List<Map<String, Object>> agentTaskwiseData = agentsService.getAgentTaskwiseData(agentId);
+	    System.out.println("Agent Task Wise Data: " + agentTaskwiseData);
+	    return agentTaskwiseData;
+	}
+	
+	@GetMapping("/agentattendedcomplaints")
+	public List<Map<String,Object>> getAttendedComplaintStatus(
+	        @RequestParam(required = false) String startDate,
+	        @RequestParam(required = false) String endDate,
+	        @RequestParam(required = false) String complaintNumber,
+	        @RequestParam(required = false) String complaintMobileNumber){
+
+	    List<Map<String, Object>> agentAttendedData = agentsService.getAttendedComplaintStatus(startDate, endDate, complaintNumber, complaintMobileNumber);
+	    System.out.println("Agent attended Data: " + agentAttendedData);
+	    return agentAttendedData;
+	}
+	
+	@GetMapping("/attendedcomplaintshistory")
+	public List<Map<String,Object>> getAttendedComplainthistory(
+	        @RequestParam(required = false) String startDate,
+	        @RequestParam(required = false) String endDate,
+	        @RequestParam(required = false) String complaintNumber,
+	        @RequestParam(required = false) String complaintMobileNumber){
+
+	    List<Map<String, Object>> agentAttendedData = agentsService.getAttendedComplainthistory(startDate, endDate, complaintNumber, complaintMobileNumber);
+	    System.out.println("Agent attended Data: " + agentAttendedData);
+	    return agentAttendedData;
+	}
+	
+	
+	@GetMapping("/agenttaskassign")
+	public List<Map<String, Object>> getAgentTaskwiseAssign(@RequestParam String agentId) {
+	// Call the service to fetch agent task-wise data
+	List<Map<String, Object>> agentTaskwiseAssign = agentsService.getAgentTaskwiseAssign(agentId);
+	//System.out.println("Agent Task Wise Assign: " + agentTaskwiseAssign);
+	return agentTaskwiseAssign;
+	}
+	
+	
+	
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcCallsController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcCallsController.java
new file mode 100644
index 0000000..0244cad
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcCallsController.java
@@ -0,0 +1,408 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
+import java.text.SimpleDateFormat;
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+import java.time.format.DateTimeParseException;
+import java.util.ArrayList;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Objects;
+import java.util.stream.Stream;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcCallsService;
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+@RequestMapping("gcc/api/callcenterqaqc/agent/qaqccalls")
+@RestController
+public class QaqcCallsController {
+
+	private final RestTemplate restTemplate;
+	private final AppConfig appConfig;
+
+	@Autowired
+	public QaqcCallsController(RestTemplate restTemplate, AppConfig appConfig) {
+		this.restTemplate = restTemplate;
+		this.appConfig = appConfig;
+	}
+
+	@Autowired
+	private QaqcCallsService qaqcCallsService;
+
+	@PostMapping("/update")
+	@ResponseBody
+	public ResponseEntity<String> updateCallDetails(@RequestParam("complaintNumber") String complaintNumber,
+			@RequestParam("dataId") int dataId, @RequestParam("action") String action,
+			@RequestParam("userId") String userId,
+			@RequestParam(value = "remainderDate", required = false, defaultValue = "-") String remainderDate,
+			@RequestParam("remarks") String remarks) {
+		try {
+			System.out.println("Updating Complaint Number: " + complaintNumber);
+			System.out.println("Updating Data ID: " + dataId);
+			System.out.println("Action: " + action);
+			System.out.println("Remarks: " + remarks);
+			int updated_agent = Integer.parseInt(userId);
+			System.out.println("updated_agent: " + updated_agent);
+
+		
+//			  Map<String,Object> followUpComplaint =
+//			  qaqcCallsService.checkComplaintDetail(complaintNumber);
+//			  
+//			  try { 
+//				  int followupid = (int) followUpComplaint.get("id");
+//			  // update complaintstaus if exist in followup call logs table 
+//				  if (followUpComplaint != null &&!followUpComplaint.isEmpty())
+//				  {
+//					  qaqcCallsService.updateFollowupCallLogs(complaintNumber, action, remarks,followupid);
+//				  }
+//			  
+//			  }
+//			  catch(Exception e) 
+//			  { 
+//				  System.out.println("Exception:"+e);
+//			 }
+			  
+			  //to insert incorrect office mobile number details in table
+			  if(action.equals("MOBILE_NUM")) {
+			  qaqcCallsService.saveMobileNumDetails(complaintNumber, remarks); }
+			  
+			  // Get complaint details 
+			  Map<String, Object> complaintDetails =qaqcCallsService.getComplaintDetails(dataId);
+			  
+			  Integer agentId = (Integer) complaintDetails.get("agent_id");
+			  Map<String,Object> erp_username=qaqcCallsService.getErpnameById(agentId); 
+			  String Erpname=(String) erp_username.get("erp_username");
+			  
+			  // Handle COMPLETED and REOPEN actions
+			  			
+			  if ("COMPLETED".equals(action) || "REOPEN".equals(action) ||"WRONG_ASSIGN".equals(action))
+			  { 
+				  boolean statusUpdated =qaqcCallsService.ChangeStatusInErp(complaintNumber, remarks, action,Erpname);
+				  System.out.println("statusUpdated="+statusUpdated); 
+					if (!statusUpdated)
+					{
+						return ResponseEntity.ok("error");
+					}
+			  }
+			  
+			  
+			  // Execute common update methods
+			  qaqcCallsService.updateComplaintDetails(complaintNumber, dataId, action,remarks,updated_agent); 
+			  qaqcCallsService.updateComplaintHistoryDetails(complaintNumber,dataId, action, remarks,updated_agent, remainderDate); 
+			  Map<String, Object> logDetails =qaqcCallsService.getComplaintDetails(dataId);
+			  qaqcCallsService.uploadComplaintDetailsInLogs(logDetails, action,complaintNumber, remainderDate);
+			 
+
+			return ResponseEntity.ok("Success");
+		} catch (Exception e) {
+			e.printStackTrace();
+			return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error");
+		}
+	}
+
+	@GetMapping("/getComplaintDetails")
+	public Map<String, Object> getComplaintDetails(@RequestParam String complaintNumber) {
+
+		Map<String, Object> resultMap = new HashMap<>();
+
+		try {
+			String url = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=getComplaintByID&ComplaintId="
+					+ complaintNumber + "&imgUrlonly=yes&isQcuser=Yes&jsonResp=Yes";
+			System.out.println("Request URL: " + url);
+
+			ResponseEntity<String> responseEntity = restTemplate.getForEntity(url, String.class);
+
+			if (responseEntity.getStatusCode().is2xxSuccessful()) {
+				String responseBody = responseEntity.getBody();
+				System.out.println("Response Body: " + responseBody);
+
+				ObjectMapper mapper = new ObjectMapper();
+				JsonNode rootNode = mapper.readTree(responseBody);
+
+				JsonNode complaintDetails = rootNode.path(0).path("ComplaintListHistory").path(0);
+
+				String registerDate = complaintDetails.path("complaintopendate").asText("N/A");
+				String ClosedDate = complaintDetails.path("complaintcloseddate").asText("N/A");
+				String ReopenDate = complaintDetails.path("REOPENDDATE").asText("N/A");
+				String FinalcloseDate = complaintDetails.path("FINALCLOSEDDATE").asText("N/A");
+				
+				System.out.println("registerdate=====" + registerDate);
+
+				String formattedDate = "N/A"; // Default value if parsing fails
+
+				if (!registerDate.equals("N/A") && !registerDate.isEmpty()) {
+					try {
+						// Parse the input date string
+						SimpleDateFormat inputFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.S");
+						Date date = inputFormat.parse(registerDate);
+
+						// Format the date to dd-MM-yyyy
+						SimpleDateFormat outputFormat = new SimpleDateFormat("dd-MM-yyyy");
+						formattedDate = outputFormat.format(date);
+					} catch (Exception e) {
+						e.printStackTrace(); // Log exception for debugging
+					}
+				}
+
+				
+				DateTimeFormatter inputFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss.S");
+		        DateTimeFormatter outputFormatter = DateTimeFormatter.ofPattern("dd-MM-yyyy");
+		        
+		        LocalDateTime maxDate = Stream.of(registerDate, ClosedDate, ReopenDate, FinalcloseDate)
+		                .filter(date -> date != null && !date.equalsIgnoreCase("null"))
+		                .map(date -> {
+		                    try {
+		                        return LocalDateTime.parse(date, inputFormatter);
+		                    } catch (DateTimeParseException e) {
+		                        return null; // Skip invalid date formats
+		                    }
+		                })
+		                .filter(Objects::nonNull)
+		                .max(LocalDateTime::compareTo) // Find the greatest date
+		                .orElse(null); // Default to null if no valid dates are found
+		        
+		        String greatestDateFormatted = (maxDate != null) ? maxDate.format(outputFormatter) : "N/A";
+
+				if (!complaintDetails.isMissingNode()) {
+					// Existing fields
+					resultMap.put("complaintid", complaintDetails.path("complaintid").asText("N/A"));
+					resultMap.put("complaintdate", formattedDate);
+					resultMap.put("complainantName", complaintDetails.path("CustomerName").asText("N/A"));
+					resultMap.put("mobileNumber", complaintDetails.path("CustomerMobile").asText("N/A"));
+					resultMap.put("complaintType", complaintDetails.path("complainttype").asText("N/A"));
+					resultMap.put("description", complaintDetails.path("complaintdetails").asText("N/A"));
+					resultMap.put("currentStatus", complaintDetails.path("complaintcurrentstatus").asText("N/A"));
+					resultMap.put("OfficialMobile", complaintDetails.path("OfficialMobile").asText("N/A"));
+					resultMap.put("Street", complaintDetails.path("Street").asText("N/A"));
+					resultMap.put("Area", complaintDetails.path("Area").asText("N/A"));
+					resultMap.put("Landmark", complaintDetails.path("Landmark").asText("N/A"));
+					resultMap.put("Location", complaintDetails.path("Location").asText("N/A"));
+					resultMap.put("Zone", complaintDetails.path("Zone").asText("N/A"));
+					resultMap.put("Division", complaintDetails.path("Division").asText("N/A"));
+					resultMap.put("gender", complaintDetails.path("GENDER").asText("N/A"));
+					resultMap.put("deptname", complaintDetails.path("DEPT_NAME").asText("N/A"));
+					resultMap.put("compmode", complaintDetails.path("COMP_MODE").asText("N/A"));
+					resultMap.put("greatestDate", greatestDateFormatted);
+
+					// Comments section
+					JsonNode comments = complaintDetails.path("Comments");
+					if (!comments.isMissingNode()) {
+						List<Map<String, Object>> commentList = new ArrayList<>();
+						for (JsonNode commentNode : comments) {
+							Map<String, Object> commentData = new HashMap<>();
+
+							// Extracting comment details
+							commentData.put("user", commentNode.path("user").asText("N/A"));
+							commentData.put("message", commentNode.path("message").asText("N/A"));
+							commentData.put("comment_date", commentNode.path("comment_date").asText("N/A"));
+
+							// Handling media link (Image) as part of userimages array for each comment
+							JsonNode userImages = commentNode.path("userimages");
+							if (!userImages.isMissingNode() && userImages.isArray() && userImages.size() > 0) {
+								String mediaLink = userImages.get(0).path("Comp_Image").asText(null);
+								// If media link is valid, add it to the comment data
+								if (mediaLink != null && !mediaLink.equals("null") && !mediaLink.isEmpty()) {
+									commentData.put("Comp_Image", mediaLink);
+								} else {
+									commentData.put("Comp_Image", "No image available");
+								}
+							} else {
+								commentData.put("Comp_Image", "No image available");
+							}
+
+							// Add the comment data to the list
+							commentList.add(commentData);
+						}
+						resultMap.put("comments", commentList);
+					}
+
+					// Handling media link (Image) as part of userimages array
+					String mediaLink = complaintDetails.path("mediaLink").asText(null);
+					List<Map<String, String>> userImagesList = new ArrayList<>();
+					Map<String, String> imageMap = new HashMap<>();
+					imageMap.put("Comp_Image", mediaLink != null && !mediaLink.equals("null") ? mediaLink : null);
+					userImagesList.add(imageMap);
+					resultMap.put("userimages", userImagesList);
+
+					System.out.println("Image URL from API: " + mediaLink);
+				}
+			} else {
+				resultMap.put("error", "Failed to retrieve complaint details.");
+			}
+		} catch (Exception e) {
+			e.printStackTrace();
+			resultMap.put("error", "Error processing request");
+		}
+
+		return resultMap;
+	}
+
+	@GetMapping("/getComplaintDetailsByMobileNumber")
+	public Map<String, Object> getComplaintDetailsByMobileNumber(@RequestParam String complaintMobileNumber,
+			@RequestParam(required = false) String startDate, @RequestParam(required = false) String endDate,
+			@RequestParam String complaintYear) {
+
+		System.out.println("Computed Start Date: " + startDate);
+		System.out.println("Computed End Date: " + endDate);
+		System.out.println("Computed Year: " + complaintYear);
+		System.out.println("Computed MobileNumber: " + complaintMobileNumber);
+
+		Map<String, Object> resultMap = new HashMap<>();
+		List<Map<String, Object>> complaintsList = new ArrayList<>();
+
+		try {
+			// Determine current year's starting date and today's date
+			LocalDate currentDate = LocalDate.now();
+			LocalDate yearStartDate = currentDate.withDayOfYear(1);
+
+			// Set default dates if startDate or endDate are empty
+			if (startDate == null || startDate.isEmpty()) {
+				startDate = yearStartDate.toString(); // Set to current year's start date
+			}
+			if (endDate == null || endDate.isEmpty()) {
+				endDate = currentDate.toString(); // Set to today's date
+			}
+
+			DateTimeFormatter inputFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd");
+			DateTimeFormatter outputFormatter = DateTimeFormatter.ofPattern("dd/MM/yyyy");
+
+			startDate = LocalDate.parse(startDate, inputFormatter).format(outputFormatter);
+			endDate = LocalDate.parse(endDate, inputFormatter).format(outputFormatter);
+
+			// Debug logs (optional)
+			System.out.println("Formatted Start Date: " + startDate);
+			System.out.println("Formatted End Date: " + endDate);
+
+			String url = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=getComplaintListWithImg&From_date="
+					+ startDate + "&To_date=" + endDate
+					+ "&jsonResp=Yes&UserType=Public&Token=&PageIndex=null&Status=null&repYear=" + complaintYear
+					+ "&MobileNo=" + complaintMobileNumber;
+
+			System.out.println("Request URL: " + url);
+
+			ResponseEntity<String> responseEntity = restTemplate.getForEntity(url, String.class);
+
+			if (responseEntity.getStatusCode().is2xxSuccessful()) {
+				String responseBody = responseEntity.getBody();
+				// System.out.println("Response Body: " + responseBody);
+
+				ObjectMapper mapper = new ObjectMapper();
+				JsonNode rootNode = mapper.readTree(responseBody);
+
+				JsonNode complaintListHistory = rootNode.path(0).path("ComplaintListHistory");
+
+				if (complaintListHistory.isArray()) {
+					SimpleDateFormat inputFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.S");
+		            SimpleDateFormat outputFormat = new SimpleDateFormat("dd-MM-yyyy");
+					for (JsonNode complaintDetails : complaintListHistory) {
+						Map<String, Object> complaintMap = new HashMap<>();
+
+						String registerDate = complaintDetails.path("complaintopendate").asText("N/A");
+		                Date parsedDate = null;
+
+		                if (!registerDate.equals("N/A") && !registerDate.isEmpty() && !"null".equalsIgnoreCase(registerDate)) {
+		                    try {
+		                        parsedDate = inputFormat.parse(registerDate);
+		                        String formattedDate = outputFormat.format(parsedDate);
+		                        complaintMap.put("complaintdate", formattedDate);
+		                    } catch (Exception e) {
+		                        e.printStackTrace();
+		                        complaintMap.put("complaintdate", "N/A");
+		                    }
+		                } else {
+		                    complaintMap.put("complaintdate", "N/A");
+		                }
+
+						// Add complaint details to the map
+						complaintMap.put("complaintid", complaintDetails.path("complaintid").asText("N/A"));
+						complaintMap.put("complainantName", complaintDetails.path("CustomerName").asText("N/A"));
+						complaintMap.put("mobileNumber", complaintDetails.path("CustomerMobile").asText("N/A"));
+						complaintMap.put("complaintType", complaintDetails.path("complainttype").asText("N/A"));
+						complaintMap.put("currentStatus",complaintDetails.path("complaintcurrentstatus").asText("N/A"));
+						complaintMap.put("OfficialMobile", complaintDetails.path("OfficialMobile").asText("N/A"));
+						complaintMap.put("Street", complaintDetails.path("Street").asText("N/A"));
+						complaintMap.put("Area", complaintDetails.path("Area").asText("N/A"));
+						complaintMap.put("Landmark", complaintDetails.path("Landmark").asText("N/A"));
+						complaintMap.put("Location", complaintDetails.path("Location").asText("N/A"));
+						complaintMap.put("Zone", complaintDetails.path("Zone").asText("N/A"));
+						complaintMap.put("Division", complaintDetails.path("Division").asText("N/A"));
+						String closedDate = complaintDetails.path("complaintcloseddate").asText("N/A");
+
+						// Check if the value is explicitly "null" (as a string)
+						if ("null".equalsIgnoreCase(closedDate)) {
+							closedDate = "N/A";
+						}
+
+						complaintMap.put("complaintcloseddate", closedDate);
+						complaintMap.put("parsedComplaintDate", parsedDate);
+
+						// Add the complaint to the list
+						complaintsList.add(complaintMap);
+					}
+					
+					// Sort complaintsList by parsedComplaintDate in descending order
+		            complaintsList.sort((a, b) -> {
+		                Date dateA = (Date) a.get("parsedComplaintDate");
+		                Date dateB = (Date) b.get("parsedComplaintDate");
+		                if (dateA == null && dateB == null) return 0;
+		                if (dateA == null) return 1;
+		                if (dateB == null) return -1;
+		                return dateB.compareTo(dateA);
+		            });
+		            
+		            for (Map<String, Object> complaint : complaintsList) {
+		                complaint.remove("parsedComplaintDate");
+		            }
+				}
+				resultMap.put("status", "success");
+				resultMap.put("complaints", complaintsList);
+			} else {
+				resultMap.put("status", "error");
+				resultMap.put("message", "Failed to retrieve complaint details.");
+			}
+		} catch (Exception e) {
+			e.printStackTrace();
+			resultMap.put("status", "error");
+			resultMap.put("message", "Error processing request");
+		}
+
+		return resultMap;
+	}
+
+	/*
+	 * System.out.println("Computed Start Date: " + startDate);
+	 * System.out.println("Computed End Date: " + endDate);
+	 * System.out.println("Computed Year: " + complaintYear);
+	 * System.out.println("Computed MobileNumber: " + complaintMobileNumber);
+	 * 
+	 * String url
+	 * ="https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=getComplaintListWithImg&From_date="
+	 * +startDate+"&To_date="+endDate+
+	 * "&jsonResp=Yes&UserType=Public&Token=&PageIndex=null&Status=null&repYear="+
+	 * complaintYear+"&MobileNo="+complaintMobileNumber;
+	 * 
+	 * System.out.println("Request URL: " + url);
+	 * 
+	 */
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcTaskListAPIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcTaskListAPIController.java
new file mode 100644
index 0000000..7022d79
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcTaskListAPIController.java
@@ -0,0 +1,68 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.util.List;
+
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcAdminSettingService;
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.QaqcTaskListService;
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+
+@RequestMapping("gcc/api/callcenterqaqc/qaqctasklist")
+@RestController
+public class QaqcTaskListAPIController {
+
+	
+	private final RestTemplate restTemplate;
+	private final AppConfig appConfig;
+	
+	
+	@Autowired  
+    public QaqcTaskListAPIController(RestTemplate restTemplate, AppConfig appConfig) {
+        this.restTemplate = restTemplate;
+        this.appConfig = appConfig;
+    }
+	
+	@Autowired
+	private QaqcTaskListService tasklist;
+	
+    @GetMapping("/overalltaskcount")
+    public List<Map<String, Object>> getComplaintAndCallStatusCounts(
+            @RequestParam(required = false) String startDate, 
+            @RequestParam(required = false) String endDate) {
+        
+    	List<Map<String, Object>> counts = tasklist.getComplaintAndCallStatusCounts(startDate, endDate);
+    	System.out.println("overallcounts:" + counts);
+        return counts;
+    }
+    
+    
+    
+    @GetMapping("/taskdatacount")
+    public List<Map<String, Object>> getTaskwiseData(
+        @RequestParam(required = false) String startDate,
+        @RequestParam(required = false) String endDate) {
+    	List<Map<String, Object>> taskdata = tasklist.getTaskwiseData(startDate, endDate);
+    	System.out.println("taskdata "+ taskdata);
+        return taskdata;
+    }
+    
+    
+    
+    @GetMapping("/agentdatacount")
+    public List<Map<String, Object>> getAgentwiseData(@RequestParam String qaqc_id) 
+    {
+    	 List<Map<String, Object>> agentwisedata = tasklist.getAgentwiseData(qaqc_id);
+       System.out.println("agentdata "+agentwisedata);
+    	 return agentwisedata;
+    }
+	
+	
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/SocialMediaController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/SocialMediaController.java
new file mode 100644
index 0000000..c0792c9
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/SocialMediaController.java
@@ -0,0 +1,346 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.io.InputStream;
+import java.net.URL;
+import java.net.URLConnection;
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
+import java.text.SimpleDateFormat;
+import java.time.LocalDate;
+import java.time.format.DateTimeFormatter;
+import java.time.format.DateTimeParseException;
+import java.util.ArrayList;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.SocialMediaService;
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+
+@RequestMapping("gcc/api/callcenterqaqc/socialmedia")
+@RestController
+public class SocialMediaController {
+
+	private final RestTemplate restTemplate;
+	private final AppConfig appConfig;
+	
+	@Autowired
+	public SocialMediaService socialservice;
+	
+	@Autowired  
+    public SocialMediaController(RestTemplate restTemplate, AppConfig appConfig) {
+        this.restTemplate = restTemplate;
+        this.appConfig = appConfig;
+    }
+	
+	@PostMapping("/update")
+	@ResponseBody
+	public ResponseEntity<String> updateCallDetails(@RequestParam("complaintNumber") String complaintNumber,			
+			@RequestParam("userId") String userId,@RequestParam("action") String action,@RequestParam("remarks") String remarks
+			) {
+		try {
+			System.out.println("Updating Complaint Number: " + complaintNumber);
+			System.out.println("userId= " + userId);
+			System.out.println("action= " + action);
+			System.out.println("remarks="+remarks);
+			int updated_agent = Integer.parseInt(userId);
+			System.out.println("updated_agent: " + updated_agent);
+			if(remarks.isEmpty())
+			{
+				remarks="N/A";
+			}
+			
+			String erp_name=socialservice.getErpusernamebyId(userId);			
+			if (erp_name.isEmpty()) {
+				return ResponseEntity.ok("erpname");
+			}
+			
+			if ("COMPLETED".equals(action) || "REOPEN".equals(action))
+			{	
+				boolean statusUpdated =ChangeStatusInErp(complaintNumber,action,remarks,erp_name);
+				System.out.println("statusUpdated="+statusUpdated); 
+				
+				if (!statusUpdated)
+				{
+					return ResponseEntity.ok("error");
+				} 
+			}
+			Map<String, Object> details =getDetailsByComplaintNumber(complaintNumber);
+			int rowInserted=socialservice.uploadComplaintDetailsInLogs(details,action,remarks,updated_agent);
+			if(rowInserted!=1)
+			{
+				return ResponseEntity.ok("save");
+			}	
+			return ResponseEntity.ok("Success");
+		} catch (Exception e) {
+			e.printStackTrace();
+			return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error");
+		}
+	}
+	
+	public  Map<String, Object> getDetailsByComplaintNumber(String complaintNumber) {
+		
+		Map<String, Object> resultMap = new HashMap<>();
+
+        try {
+            String url = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=getComplaintByID&ComplaintId=" 
+                + complaintNumber + "&imgUrlonly=yes";
+            System.out.println("Request URL: " + url);
+
+            ResponseEntity<String> responseEntity = restTemplate.getForEntity(url, String.class);
+
+            if (responseEntity.getStatusCode().is2xxSuccessful()) {
+                String responseBody = responseEntity.getBody();
+                System.out.println("Response Body: " + responseBody);
+
+                ObjectMapper mapper = new ObjectMapper();
+                JsonNode rootNode = mapper.readTree(responseBody);
+
+                JsonNode complaintDetails = rootNode.path(0).path("ComplaintListHistory").path(0);
+                
+                String registerDate=complaintDetails.path("complaintopendate").asText("N/A");
+                System.out.println("registerdate====="+registerDate);
+                
+                String formattedDate = "N/A"; // Default value if parsing fails
+
+                if (!registerDate.equals("N/A") && !registerDate.isEmpty()) {
+                    try {
+                        // Parse the input date string
+                        SimpleDateFormat inputFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.S");
+                        Date date = inputFormat.parse(registerDate);
+
+                        // Format the date to dd-MM-yyyy
+                        SimpleDateFormat outputFormat = new SimpleDateFormat("dd-MM-yyyy");
+                        formattedDate = outputFormat.format(date);
+                    } catch (Exception e) {
+                        e.printStackTrace(); // Log exception for debugging
+                    }
+                }
+
+                if (!complaintDetails.isMissingNode()) {
+                    // Existing fields
+                    resultMap.put("complaintid", complaintDetails.path("complaintid").asText("N/A"));
+                    resultMap.put("complaintdate", formattedDate);
+                    resultMap.put("complainantName", complaintDetails.path("CustomerName").asText("N/A"));
+                    resultMap.put("mobileNumber", complaintDetails.path("CustomerMobile").asText("N/A"));
+                    resultMap.put("complaintType", complaintDetails.path("complainttype").asText("N/A"));
+                    resultMap.put("description", complaintDetails.path("complaintdetails").asText("N/A"));
+                    resultMap.put("currentStatus", complaintDetails.path("complaintcurrentstatus").asText("N/A"));
+                    resultMap.put("Street", complaintDetails.path("Street").asText("N/A"));
+                    resultMap.put("Area", complaintDetails.path("Area").asText("N/A"));
+                    resultMap.put("Landmark", complaintDetails.path("Landmark").asText("N/A"));
+                    resultMap.put("Location", complaintDetails.path("Location").asText("N/A"));
+                    resultMap.put("Zone", complaintDetails.path("Zone").asText("N/A"));
+                    resultMap.put("Division", complaintDetails.path("Division").asText("N/A"));
+                    resultMap.put("OfficialMobile", complaintDetails.path("OfficialMobile").asText("N/A"));
+                    resultMap.put("gender", complaintDetails.path("GENDER").asText("N/A"));
+                    resultMap.put("deptname",complaintDetails.path("DEPT_NAME").asText("N/A"));
+                    resultMap.put("compmode", complaintDetails.path("COMP_MODE").asText("N/A"));
+                    resultMap.put("Officialname", complaintDetails.path("Officialname").asText("N/A"));
+
+                 
+                }
+            } else {
+                resultMap.put("error", "Failed to retrieve complaint details.");
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+            resultMap.put("error", "Error processing request");
+        }
+
+        return resultMap;
+    }
+
+	
+	public boolean ChangeStatusInErp(String complaintNumber,String action ,String remarks,String erp_name) {
+	    String baseUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?";
+	    String status = "";
+	    
+	   	    	 	       
+	   //String Erpname ="QAops1";
+	  
+	    try {
+	        // Encode parameters
+	        String encodedComplaintNumber = URLEncoder.encode(complaintNumber, StandardCharsets.UTF_8.toString()).replace("+", "%20");
+	        String encodedRemarks = URLEncoder.encode(remarks, StandardCharsets.UTF_8.toString()).replace("+", "%20");
+	        String encodedErpname = URLEncoder.encode(erp_name, StandardCharsets.UTF_8.toString()).replace("+", "%20");
+	        
+	     // Determine status based on action
+	        if ("COMPLETED".equals(action)) {
+	            status = "11";
+	        } else if ("REOPEN".equals(action)) {	        	
+	            status = "9";
+	        } else {
+	            return false; // Invalid action, return false
+	        }
+
+	        // Construct the URL
+	        String urlString = baseUrl
+	                + "serviceId=UpdateComplaint"
+	                + "&ComplaintId=" + encodedComplaintNumber
+	                + "&Message=" + encodedRemarks
+	                + "&UserType=Official"
+	                + "&Status=" + status
+	                + "&Comp_Image="
+	                + "&erp_username=" + encodedErpname;
+
+	        System.out.println("ERP Hitting URL="+urlString);
+
+	        // Send the request
+	        return sendRequest(urlString);
+	       // return true;
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return false;
+	    }
+	}
+
+
+	private boolean sendRequest(String urlString) {
+	    try {
+	        URL url = new URL(urlString);
+	        URLConnection urlcon = url.openConnection();
+	        InputStream stream = urlcon.getInputStream();
+	        StringBuilder responseBuilder = new StringBuilder();
+	        int i;
+	        while ((i = stream.read()) != -1) {
+	            responseBuilder.append((char) i);
+	        }
+	        stream.close();
+
+	        // Parse the response
+	        String response = responseBuilder.toString();
+	        System.out.println("Raw Response: " + response);
+
+	        // Check ResultStatus in the response
+	        if (response.contains("\"ResultStatus\": true")) {
+	            System.out.println("ResultStatus is true in the response.");
+	            return true;
+	        } else {
+	            System.out.println("ResultStatus is false or not present in the response.");
+	            return false;
+	        }
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return false;
+	    }
+	}
+	
+	@GetMapping("/getsocialmediacomps")
+    public Map<String, Object> viewSocialMediaData(
+            @RequestParam String startDate,
+            @RequestParam String endDate,
+            @RequestParam String status,
+            @RequestParam String group,
+            @RequestParam String type,          
+            @RequestParam String zone) {
+		Map<String, Object> response = new HashMap<>();
+
+		try {
+			
+        LocalDate fromLocalDate = LocalDate.parse(startDate, DateTimeFormatter.ISO_DATE);
+        LocalDate toLocalDate = LocalDate.parse(endDate, DateTimeFormatter.ISO_DATE);
+        String formattedFromDate = fromLocalDate.format(DateTimeFormatter.ofPattern("dd/MM/yyyy"));
+        String formattedToDate = toLocalDate.format(DateTimeFormatter.ofPattern("dd/MM/yyyy"));
+        
+        String mode="SOCIAL MEDIA";
+        
+        String encoded_mode=URLEncoder.encode(mode, StandardCharsets.UTF_8.toString()).replace("+", "%20");
+        
+        //String url="https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=ms_dashboard_details&From_date="+formattedFromDate+"&To_date="+formattedToDate+"&jsonResp=Yes&Status="+status+"&isQcuser=Yes"+"&ComplaintType="+type+"&ComplaintGroupId="+group+"&compmode="+encoded_mode+"&Zoneid="+zone;
+        
+        String url="https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=ms_dashboard_details&From_date="+formattedFromDate+"&To_date="+formattedToDate+"&jsonResp=Yes&Status="+status+"&isQcuser=Yes"+"&ComplaintType="+type+"&ComplaintGroupId="+group+"&compmode="+mode+"&Zoneid="+zone;
+
+		System.out.println(url);
+		
+		RestTemplate restTemplate = new RestTemplate();
+
+		// Fetch response as String
+		ResponseEntity<String> responses = restTemplate.getForEntity(url, String.class);
+		String rawResponse = responses.getBody();
+
+		// Preprocess response to remove invalid characters if needed
+		if (rawResponse != null) {
+			//rawResponse = rawResponse.replaceAll("\"\"", "\""); // Replace double-double quotes
+			//rawResponse = rawResponse.replaceAll("(?<![,{])\"R", "\"R"); // Example: Fix missing commas
+		}
+		ObjectMapper objectMapper = new ObjectMapper();
+		Map<String, Object> responseMap = objectMapper.readValue(rawResponse, Map.class);
+		List<Map<String, Object>> details = (List<Map<String, Object>>) responseMap.get("Details");
+        //System.out.println(details);
+        if (details == null) {
+        	response.put("status", "nodata");
+            response.put("message", "No Data, please change criteria");
+        }
+        else {
+        	response.put("status", "success");
+            response.put("details", details);
+        }
+        
+		}
+		catch (Exception e) {
+			response.put("status", "error");
+	        response.put("message", "An error occurred while fetching data.");
+	        e.printStackTrace();
+		}
+        
+        return response;
+    }
+	
+	@GetMapping("/socialmediacompletedlist")
+    public Map<String, Object> viewSocialMediaCompletedData(
+            @RequestParam String startDate,
+            @RequestParam String endDate,  @RequestParam String status,                 
+            @RequestParam String zone) {
+		
+		System.out.printf("==================="+startDate,endDate,zone);
+		Map<String, Object> response = new HashMap<>();
+
+		try {
+			
+        LocalDate fromLocalDate = LocalDate.parse(startDate, DateTimeFormatter.ISO_DATE);
+        LocalDate toLocalDate = LocalDate.parse(endDate, DateTimeFormatter.ISO_DATE);
+        String formattedFromDate = fromLocalDate.format(DateTimeFormatter.ofPattern("yyyy-MM-dd"));
+        String formattedToDate = toLocalDate.format(DateTimeFormatter.ofPattern("yyyy-MM-dd"));
+        
+        List<Map<String, Object>> details= socialservice.getdetails(formattedFromDate,formattedToDate,status,zone);
+        if(details==null)
+        {
+        	response.put("status", "nodata");
+	        response.put("message", "No data for Selected filter");
+        }
+        else {
+        	response.put("status", "success");
+        	response.put("details", details);
+        }
+		}
+		catch (DateTimeParseException e) {
+	        response.put("status", "error");
+	        response.put("message", "Invalid date format. Please use 'yyyy-MM-dd'.");
+	        e.printStackTrace();
+	    }
+		catch (Exception e) {
+			response.put("status", "error");
+	        response.put("message", "An error occurred while fetching data.");
+	        e.printStackTrace();
+		}
+        
+        return response;
+    }
+	
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/StatusCountController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/StatusCountController.java
new file mode 100644
index 0000000..078410b
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/StatusCountController.java
@@ -0,0 +1,80 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import java.util.List;
+
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.StatusCountService;
+
+@RequestMapping("gcc/api/callcenterqaqc")
+@RestController
+public class StatusCountController {
+
+    @Autowired
+	private StatusCountService statusCountService;
+
+
+    @Autowired
+    public StatusCountController(StatusCountService statusCountService) {
+        this.statusCountService = statusCountService;
+    }
+
+    @GetMapping("/dashboard")
+    public ResponseEntity<Map<String, String>> getDashboardData(
+            @RequestParam(value = "startDate", required = false, defaultValue = "") String fromDate,
+            @RequestParam(value = "endDate", required = false, defaultValue = "") String toDate,
+            @RequestParam(value = "dropdown1", required = false, defaultValue = "") String compType,
+            @RequestParam(value = "dropdown2", required = false, defaultValue = "") String zoneName,
+            @RequestParam(value = "dropdown3", required = false,defaultValue = "") String compMode,
+            @RequestParam(value = "dropdown4", required = false, defaultValue = "") String compGroup) {
+
+        Map<String, String> counts = statusCountService.fetchComplaintCounts(fromDate, toDate, compType, zoneName, compMode, compGroup);
+        System.out.println("counts:" + counts);
+        //System.out.println("group:" + compGroup);
+        return ResponseEntity.ok(counts);
+    }
+        
+
+    @GetMapping("/getComplaintTypesByGroup")
+    public ResponseEntity<List<String>> getComplaintTypesByGroup(@RequestParam String group) {
+        List<String> complaintTypes = statusCountService.fetchComplaintTypes(group);
+        return ResponseEntity.ok(complaintTypes);
+    }
+
+
+    @GetMapping("/getComplaintGroup")
+    public ResponseEntity<List<String>> getComplaintGroup() {
+        List<String> complaintGroup= statusCountService.fetchComplaintGroup();
+        //System.out.println("types:"+complaintTypes);
+        return ResponseEntity.ok(complaintGroup);
+    }
+    
+    
+    @GetMapping("/getModes")
+    public ResponseEntity<List<String>> getModes() {
+        List<String> modes= statusCountService.fetchModes();
+        //System.out.println("types:"+modes);
+        return ResponseEntity.ok(modes);
+    }
+    
+    
+    @GetMapping("/getZones")
+    public ResponseEntity<List<String>> getZones() {
+        List<String> zones= statusCountService.fetchZones();
+        //System.out.println("types:"+zones);
+        return ResponseEntity.ok(zones);
+    }
+    
+    
+    
+    
+    
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/WhatsappController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/WhatsappController.java
new file mode 100644
index 0000000..8a773a6
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/WhatsappController.java
@@ -0,0 +1,27 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.controller;
+
+import org.springframework.beans.factory.annotation.Autowired;
+
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import in.gov.chennaicorporation.gccoffice.callcenterqaqc.service.WhatsappqaqcMsgService;
+
+@RestController("callcenterqaqcwhatsapp")
+@RequestMapping("/gcc/qaqc/api/whatsapp")
+public class WhatsappController {
+
+    @Autowired
+    private WhatsappqaqcMsgService whatsappqaqcMsgService;
+
+    @PostMapping("/send-whatsapp-message")
+    public ResponseEntity<String> sendWhatsAppMessage(@RequestParam String msgUrl,@RequestParam String tamilmsgUrl) {
+        String response = whatsappqaqcMsgService.sendMsg(msgUrl,tamilmsgUrl);
+        return ResponseEntity.ok(response);
+    }
+
+}
+
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService.java
new file mode 100644
index 0000000..4574f24
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService.java
@@ -0,0 +1,67 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.HashMap;
+
+import java.util.List;
+import java.util.Map;
+import java.util.Random;
+
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import org.springframework.stereotype.Service;
+import org.springframework.web.client.RestTemplate;
+
+@Service
+public class ComplaintService {
+
+	private final String baseUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
+
+	public String fetchComplaintCategories() {
+		RestTemplate restTemplate = new RestTemplate();
+		String url = baseUrl + "?serviceId=getComplCategory&ComplaintGroupId=null";
+		return restTemplate.getForObject(url, String.class);
+	}
+
+	public String fetchComplaintSubTypes(String groupId) {
+		RestTemplate restTemplate = new RestTemplate();
+		String url = baseUrl + "?serviceId=getComplCategory&ComplaintGroupId=" + groupId;
+		return restTemplate.getForObject(url, String.class);
+	}
+
+	public List<Map<String, Object>> fetchComplaintDetailsById(String complaintId) {
+		RestTemplate restTemplate = new RestTemplate();
+		String url = baseUrl + "?serviceId=getComplaintByID&ComplaintId=" + complaintId;
+		String response = restTemplate.getForObject(url, String.class);
+
+		try {
+			ObjectMapper objectMapper = new ObjectMapper();
+			return objectMapper.readValue(response, new TypeReference<List<Map<String, Object>>>() {
+			});
+		} catch (Exception e) {
+			e.printStackTrace();
+			return null;
+		}
+	}
+
+	public List<Map<String, Object>> fetchComplaintDetailsByMobile(String mobileNo) {
+		RestTemplate restTemplate = new RestTemplate();
+		String url = baseUrl
+				+ "?serviceId=getComplaintListWithImg&From_date=01/01/2024&To_date=20/08/2024&jsonResp=Yes&UserType=Public&MobileNo="
+				+ mobileNo + "&PageIndex=null&Status=null&repYear=2024";
+		String response = restTemplate.getForObject(url, String.class);
+
+		try {
+			ObjectMapper objectMapper = new ObjectMapper();
+			return objectMapper.readValue(response, new TypeReference<List<Map<String, Object>>>() {
+			});
+		} catch (Exception e) {
+			e.printStackTrace();
+			return null;
+		}
+	}
+
+
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/FollowUpService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/FollowUpService.java
new file mode 100644
index 0000000..4c5c56a
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/FollowUpService.java
@@ -0,0 +1,172 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.time.LocalDateTime;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@Service	
+public class FollowUpService {
+	
+	@Autowired
+	private JdbcTemplate jdbcTemplate;
+	
+	@Autowired
+	 public void setDataSource(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		 this.jdbcTemplate = new JdbcTemplate(dataSource);
+	 }
+	
+	public List<Map<String, Object>> getFollowUpCalls(int agent_id) {
+	    String query = "SELECT data_id, complaint_number, complaint_date,complaint_person_name, complaint_mobilenumber, " +
+                       "complaint_type, official_name, official_mobilenum, call_category, complaint_mode, department " +	                   
+	                   "FROM gcc_1913_qaqc.qaqc_upload_data " +
+	                   "WHERE call_category = 'OFFICIALFOLLOWUP' AND agent_id = ? AND is_processed = FALSE";
+	    
+	    return jdbcTemplate.queryForList(query, agent_id);
+	}
+	
+	public List<Map<String, Object>> getFollowUpCatergory()
+	{
+		String query = "SELECT call_status " +  
+                "FROM gcc_1913_qaqc.call_status WHERE call_category_id = 2 and isactive='1'";
+		
+		return jdbcTemplate.queryForList(query);
+	}
+
+//public List<Map<String, Object>> getAgentCallStatus(int agentId) {
+//		
+//		String query = "SELECT " +
+//                "    (SELECT SUM(aa.data_count) " +
+//                "     FROM agent_assigned aa " +
+//                "     WHERE aa.agent_id = ?) AS total_data_count, " +
+//                "    COUNT(CASE WHEN cl.call_status = 'COMPLETED' THEN 1 END) AS completed_count, " +
+//                "    COUNT(CASE WHEN cl.call_status != 'COMPLETED' THEN 1 END) AS pending_count " +
+//                "FROM " +
+//                "    qaqc_call_logs cl " +
+//                "WHERE " +
+//                "    cl.agent_id = ?";
+//		return jdbcTemplate.queryForList(query,agentId);
+//        
+//	}
+	
+	public void updateFollowupComplaintDetails(String complaintNumber,int dataId, String action, String remarks,int updated_agent)
+	  { 
+	String query = "UPDATE gcc_1913_qaqc.qaqc_upload_data " +
+	  "SET call_status = ?, " + "    remarks = ?, updated_agent=?," +
+	  "    updated_date = CURRENT_TIMESTAMP, " + "    is_processed = TRUE " + 
+	  "WHERE data_id = ? "  +"  AND complaint_number = ?	";
+	  
+	  int rowsUpdated = jdbcTemplate.update(query, action, remarks,updated_agent, dataId,complaintNumber);
+	  
+	  System.out.println("Rows Updated in upload data: " + rowsUpdated); 
+	  }
+	
+	@Transactional
+    public int uploadComplaintDetailsInLogs(Map<String, Object> logDetails, String action,  String complaintNumber, String remainderDate) {
+    	System.out.println("Complaint Details: " + logDetails);
+	    // Extract other field values from complaintDetails
+	    int qaqcid = (int) logDetails.get("qaqc_id");
+	    String ccategory = logDetails.get("call_category").toString();
+	    String personName = logDetails.get("complaint_person_name").toString();
+	    String personMobNo = logDetails.get("complaint_mobilenumber").toString();
+	    String complaintDate = logDetails.get("complaint_date").toString();
+	    String cType = logDetails.get("complaint_type").toString();
+	    String cMode = logDetails.get("complaint_mode").toString();
+	    String department = logDetails.get("department").toString();
+	    String cGroup = logDetails.get("complaint_group").toString();
+	    String officialName = logDetails.get("official_name").toString();
+	    String officialMobileNum = logDetails.get("official_mobilenum").toString();
+	    String callStatus = logDetails.get("call_status").toString();
+	    String remarks = logDetails.get("remarks").toString();
+	    int agentId = (int) logDetails.get("agent_id");
+	    int updated_agent=(int)logDetails.get("updated_agent");
+	    boolean isProcessed = (boolean)logDetails.get("is_processed");
+	    LocalDateTime currentDate = LocalDateTime.now();
+
+	    // Determine which table to insert into based on the action
+	    if (action.equals("FOLLOWUP")) {
+	    String query = "UPDATE gcc_1913_qaqc.qaqc_followup_call_logs "
+	             + "SET qaqc_id = ?, call_category = ?, agent_id = ?, remainder_date = ?, call_status = ?, remarks = ?, updated_agent = ?, updated_date = CURRENT_TIMESTAMP "
+	             + "WHERE complaint_number = ? "
+	             + "AND id = (SELECT max_id FROM (SELECT MAX(id) AS max_id FROM gcc_1913_qaqc.qaqc_followup_call_logs WHERE complaint_number = ?) AS temp)";
+
+	   int rowsAffected = jdbcTemplate.update(query,qaqcid, ccategory,agentId,remainderDate, callStatus, remarks,updated_agent,complaintNumber,complaintNumber);
+       System.out.println("Rows Updated in qaqc_followup_call_logs : " + rowsAffected); 
+	        
+	        
+	        String query1 = "INSERT INTO gcc_1913_qaqc.qaqc_call_logs (qaqc_id, call_category, agent_id, complaint_number, complaint_date,complaint_person_name, "
+                    + "complaint_mobilenumber, complaint_type, complaint_mode, department, complaint_group, official_name,remainder_date, official_mobilenum, call_status, remarks, is_processed,updated_agent) "
+                    + "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,?,?,?)";
+
+       int rowsAffected1 = jdbcTemplate.update(query1, qaqcid, ccategory, agentId, complaintNumber, complaintDate,personName,
+               personMobNo, cType, cMode, department, cGroup, officialName,remainderDate, officialMobileNum, callStatus, remarks,
+               isProcessed,updated_agent);
+       System.out.println("Rows Updated in qaqc_call_logs : " + rowsAffected1); 
+
+	        return rowsAffected + rowsAffected1;
+	        
+	    } else {
+	    	
+	    	 String query = "UPDATE gcc_1913_qaqc.qaqc_followup_call_logs "
+		             + "SET qaqc_id = ?, call_category = ?, agent_id = ?, call_status = ?, remarks = ?, updated_agent = ?, updated_date = CURRENT_TIMESTAMP "
+		             + "WHERE complaint_number = ? "
+		             + "AND id = (SELECT max_id FROM (SELECT MAX(id) AS max_id FROM gcc_1913_qaqc.qaqc_followup_call_logs WHERE complaint_number = ?) AS temp)";
+
+		   int rowsAffected = jdbcTemplate.update(query,qaqcid, ccategory,agentId, callStatus, remarks,updated_agent,complaintNumber,complaintNumber);
+	       System.out.println("Rows Updated in qaqc_followup_call_logs : " + rowsAffected);
+	    	
+	        String query1 = "INSERT INTO gcc_1913_qaqc.qaqc_call_logs (qaqc_id, call_category, agent_id, complaint_number,complaint_date, complaint_person_name, "
+	                     + "complaint_mobilenumber, complaint_type, complaint_mode, department, complaint_group, official_name, official_mobilenum, call_status, remarks, is_processed,updated_agent) "
+	                     + "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,?,?)";
+
+	        int rowsAffected1 = jdbcTemplate.update(query1, qaqcid, ccategory, agentId, complaintNumber,complaintDate, personName,
+	                personMobNo, cType, cMode, department, cGroup, officialName, officialMobileNum, callStatus, remarks,
+	                isProcessed,updated_agent);
+	        
+	        System.out.println("Rows Updated in qaqc_call_logs: " + rowsAffected1);
+
+	        return rowsAffected + rowsAffected1;
+	    }
+	}
+	
+
+	public List<Map<String, Object>> getCallHistory(String complaintNumber)
+	{
+		 String query = "SELECT complaint_number, agent_id, remainder_date, remarks, created_date " +
+	             "FROM gcc_1913_qaqc.qaqc_call_logs " +
+	             "WHERE complaint_number = ? and call_status='FOLLOWUP'";
+		 return jdbcTemplate.queryForList(query, complaintNumber);
+	
+	 }
+	
+	public List<Map<String, Object>> getFollowupSubmitDetails(int userId) {
+    	
+	   	 String query = "SELECT complaint_number, complaint_date,complaint_person_name, complaint_mobilenumber,official_name,official_mobilenum, " +
+	               "complaint_type, call_status, remarks " +
+	               "FROM gcc_1913_qaqc.qaqc_upload_data " +
+	               "WHERE call_category = 'OFFICIALFOLLOWUP' AND agent_id = ? AND is_processed = '1'";
+	   	 
+			return jdbcTemplate.queryForList(query,userId);
+			  
+		}
+
+	public void updateComplaintHistoryDetails(String complaintNumber, int dataId, String action, String remarks,int updated_agent,
+				String remainderDate) {
+			
+			String query = "UPDATE gcc_1913_qaqc.qaqc_upload_data_history \r\n"
+					+ "SET call_status = ?, remarks = ?, updated_date = CURRENT_TIMESTAMP, remainder_date = ?,updated_agent=?\r\n"
+					+ "WHERE data_id = ?   AND complaint_number = ?";
+					  
+					  int rowsUpdated = jdbcTemplate.update(query, action, remarks, remainderDate, updated_agent,dataId, complaintNumber);
+					  
+					  System.out.println("Rows Updated in upload history: " + rowsUpdated); 
+			
+		}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/InprogresscallService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/InprogresscallService.java
new file mode 100644
index 0000000..6e01081
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/InprogresscallService.java
@@ -0,0 +1,102 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+@Service
+public class InprogresscallService {
+
+    @Autowired
+    private JdbcTemplate jdbcTemplate;
+    
+    @Autowired
+	 public void setDataSource(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		 this.jdbcTemplate = new JdbcTemplate(dataSource);
+	 }
+
+    
+    public List<Map<String, Object>> getActionsCatergory()
+	{
+		String query = "SELECT call_status " +  
+                "FROM gcc_1913_qaqc.call_status WHERE call_category_id = 3 and isactive='1'";
+		
+		return jdbcTemplate.queryForList(query);
+	}
+    
+//    public List<Map<String, Object>> getInProgressCalls(int agent_id) {
+//        String sql = "SELECT complaint_number, " +
+//                     "       official_name , " +
+//                     "       official_mobilenum , " +
+//                     "       complaint_type, " +
+//                     "       call_category,  " +
+//                     "       complaint_mode,  " +
+//                     "       department  " +
+//                     
+//                     "FROM gcc_1913_qaqc.qaqc_upload_data " +
+//                     "WHERE call_category ='inprogress' and agent_id= ?";
+//
+//		
+//        return jdbcTemplate.queryForList(sql, agent_id);        
+//    }
+    
+    public List<Map<String, Object>> getInProgressCalls(int agent_id) {
+        String query = "SELECT data_id, complaint_number, complaint_date,complaint_person_name, complaint_mobilenumber, " +
+                       "complaint_type, official_name, official_mobilenum, call_category, complaint_mode, department " +
+                       "FROM gcc_1913_qaqc.qaqc_upload_data " +
+                       "WHERE (call_category = 'PROCESSING' OR call_category = 'REOPENED' OR call_category = 'REDRESSED' OR call_category = 'INPROGRESS') " +
+                       "  AND is_processed = FALSE " +
+                       "  AND agent_id = ?";
+        return jdbcTemplate.queryForList(query, agent_id);
+    }
+    
+    public void updateInprogressComplaintDetails(String complaintNumber,int dataId, String action, String remarks,int updated_agent)
+	  { 
+  	String query = "UPDATE gcc_1913_qaqc.qaqc_upload_data " +
+	  "SET call_status = ?, " + "    remarks = ?,updated_agent=?, " +
+	  "    updated_date = CURRENT_TIMESTAMP, " + "    is_processed = TRUE " + 
+	  "WHERE data_id = ? "  +"  AND complaint_number = ?";
+	  
+	  int rowsUpdated = jdbcTemplate.update(query, action, remarks,updated_agent, dataId,complaintNumber);
+	  
+	  System.out.println("Rows Updated in upload data: " + rowsUpdated); 
+	  }
+
+    public void saveMobileNumDetails(String complaintNumber, String remarks) {
+        String query = "insert into officer_mobileno (complaint_number,remarks) values(?,?)";
+        int rowsUpdated = jdbcTemplate.update(query, complaintNumber, remarks);
+        System.out.println("Rows Updated: " + rowsUpdated);
+    }
+    
+    public List<Map<String, Object>> getInprogressSubmitDetails(int userId) {
+    	
+   	 String query = "SELECT complaint_number, complaint_date,complaint_person_name, complaint_mobilenumber,official_name,official_mobilenum, " +
+               "complaint_type, call_status, remarks " +
+               "FROM gcc_1913_qaqc.qaqc_upload_data " +
+               "WHERE (call_category = 'PROCESSING' OR call_category = 'REOPENED' OR call_category = 'REDRESSED' OR call_category = 'INPROGRESS') AND agent_id = ? AND is_processed = '1'";
+   	 
+		return jdbcTemplate.queryForList(query,userId);
+		  
+	}
+
+
+	public void updateComplaintHistoryDetails(String complaintNumber, int dataId, String action, String remarks,int updated_agent,
+				String remainderDate) {
+			
+			String query = "UPDATE gcc_1913_qaqc.qaqc_upload_data_history \r\n"
+					+ "SET call_status = ?, remarks = ?, updated_date = CURRENT_TIMESTAMP, remainder_date = ?,updated_agent=?\r\n"
+					+ "WHERE data_id = ?   AND complaint_number = ?";
+					  
+			int rowsUpdated = jdbcTemplate.update(query, action, remarks, remainderDate,updated_agent, dataId, complaintNumber);
+					  
+			System.out.println("Rows Updated in upload data history: " + rowsUpdated); 
+			
+		}
+ 
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/PublicFollowUpService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/PublicFollowUpService.java
new file mode 100644
index 0000000..7369ada
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/PublicFollowUpService.java
@@ -0,0 +1,52 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+
+@Service
+public class PublicFollowUpService {
+	
+	@Autowired
+	private JdbcTemplate jdbcTemplate;
+	
+	@Autowired
+	 public void setDataSource(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		 this.jdbcTemplate = new JdbcTemplate(dataSource);
+	 }
+	
+	public List<Map<String, Object>> getFollowUpCalls(int agent_id) {
+	    String query = "SELECT data_id, complaint_number, complaint_date,complaint_person_name, complaint_mobilenumber, " +
+                       "complaint_type, official_name, official_mobilenum, call_category, complaint_mode, department " +	                   
+	                   "FROM gcc_1913_qaqc.qaqc_upload_data " +
+	                   "WHERE call_category = 'PUBLICFOLLOWUP' AND agent_id = ? AND is_processed = FALSE";
+	    
+	    return jdbcTemplate.queryForList(query, agent_id);
+	}
+	
+	public List<Map<String, Object>> getFollowUpCatergory()
+	{
+		String query = "SELECT call_status " +  
+                "FROM gcc_1913_qaqc.call_status WHERE call_category_id = 4 and isactive='1'";
+		
+		return jdbcTemplate.queryForList(query);
+	}
+	
+	public List<Map<String, Object>> getFollowupSubmitDetails(int userId) {
+    	
+	   	 String query = "SELECT complaint_number, complaint_date,complaint_person_name, complaint_mobilenumber,official_name,official_mobilenum, " +
+	               "complaint_type, call_status, remarks " +
+	               "FROM gcc_1913_qaqc.qaqc_upload_data " +
+	               "WHERE call_category = 'PUBLICFOLLOWUP' AND agent_id = ? AND is_processed = '1'";
+	   	 
+			return jdbcTemplate.queryForList(query,userId);
+			  
+		}
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAdminSettingService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAdminSettingService.java
new file mode 100644
index 0000000..b2b9989
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAdminSettingService.java
@@ -0,0 +1,105 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+import javax.transaction.Transactional;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+
+@Service
+public class QaqcAdminSettingService {
+
+	@Autowired
+    private JdbcTemplate jdbcTemplate;
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	@Transactional
+	public int updateProductivity(int productivity_count) {
+	    String updateSql = "UPDATE productivity SET productivity_count=? where isactive='1' and isdelete='0'";
+	    return jdbcTemplate.update(updateSql,productivity_count);
+
+	}
+	
+	@Transactional
+	public int saveProductivity(int productivity_count) {
+	    String insertSql = "INSERT INTO productivity (productivity_count) VALUES (?)";
+	    return jdbcTemplate.update(insertSql, productivity_count);
+
+	}
+	
+	@Transactional
+	public Integer getProductivity() { 
+	    String insertSql = "select productivity_count\r\n"
+	    		+ "from productivity\r\n"
+	    		+ "where isactive='1' and isdelete='0'"
+	    		+ "LIMIT 1";
+	    return jdbcTemplate.queryForObject(insertSql, Integer.class);
+	    
+	}
+	
+	@Transactional
+	public List<Map<String, Object>> getAdminSettingCounts() {
+		
+		String sqlQuery = "SELECT " +
+			    "COALESCE(p.productivity_count, 0) AS productivity_count, " +
+			    "COUNT(al.agent_id) AS total_count, " +
+			    "COALESCE(p.inbound_count, 0) AS inbound_count, " +
+			    "COALESCE(p.outbound_count, 0) AS outbound_count, " +
+			    "COALESCE(p.inbound_count, 0) + COALESCE(p.outbound_count, 0) As assigned, " +
+			    "(COUNT(al.agent_id) - (COALESCE(p.inbound_count, 0) + COALESCE(p.outbound_count, 0))) AS notassigned " +
+			    "FROM productivity p " +
+			    "JOIN agents_list al " +
+			    "WHERE p.isactive = '1' AND p.isdelete = '0' AND al.isactive = '1' AND al.isdelete = '0' " +
+			    "GROUP BY p.productivity_count, p.inbound_count, p.outbound_count";
+	    
+	    return jdbcTemplate.queryForList(sqlQuery);
+	}
+
+	
+	@Transactional
+	public int saveCallingTypeInSettings() {
+	    // Query to get inbound and outbound counts
+	    String selectSql = "SELECT\r\n"
+	    		+ "SUM(CASE WHEN calling_type = 'INBOUND' THEN 1 ELSE 0 END) AS inbound, \r\n"
+	    		+ "SUM(CASE WHEN calling_type = 'OUTBOUND' THEN 1 ELSE 0 END) AS outbound \r\n"
+	    		+ "FROM agents_list \r\n"
+	    		+ "WHERE isactive = '1' AND isdelete = '0'";
+
+	    // Fetch the counts
+	    Map<String, Object> result = jdbcTemplate.queryForMap(selectSql);
+	    int inbound = ((Number) result.get("inbound")).intValue(); // Convert to int
+	    int outbound = ((Number) result.get("outbound")).intValue(); // Convert to int
+
+	    //Corrected SQL syntax for updating multiple columns
+	    String updateSql = "UPDATE productivity SET inbound_count = ?, outbound_count = ? WHERE isactive = '1' AND isdelete = '0'";
+	    return jdbcTemplate.update(updateSql, inbound, outbound);
+	}
+	
+	
+	@Transactional
+	public int updateCallType(String calling_type,int agent_id) {
+	    String updateSql = "UPDATE agents_list SET calling_type=? WHERE agent_id=? AND isactive='1'";
+	    
+	    return jdbcTemplate.update(updateSql,calling_type,agent_id);
+	}
+	
+	@Transactional
+	public List<Map<String, Object>> getAgentsForCallingtype()
+	{
+		String sqlQuery = "select agent_id,agent_name,mobile_number,calling_type\r\n"
+				+ "from agents_list\r\n"
+				+ "where isactive='1' and isdelete='0';";
+		
+		return jdbcTemplate.queryForList(sqlQuery);
+	}
+	
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentAssignService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentAssignService.java
new file mode 100644
index 0000000..2c80a30
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentAssignService.java
@@ -0,0 +1,590 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+import java.time.ZoneId;
+import java.time.ZonedDateTime;
+import java.time.format.DateTimeFormatter;
+import java.time.format.DateTimeParseException;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+import javax.sql.DataSource;
+import javax.transaction.Transactional;
+import org.springframework.jdbc.support.KeyHolder;
+import org.springframework.jdbc.support.GeneratedKeyHolder;
+import java.sql.PreparedStatement;
+import java.sql.Statement;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.namedparam.MapSqlParameterSource;
+import org.springframework.jdbc.core.namedparam.NamedParameterJdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.web.client.RestTemplate;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+@Service
+public class QaqcAgentAssignService {
+	
+	@Autowired
+    private JdbcTemplate jdbcTemplate;
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	@Autowired
+    private JdbcTemplate jdbcTemplate2;
+	
+	@Autowired
+	public void setDataSource2(@Qualifier("mysql1913CampaignDataSource") DataSource dataSource) {
+		this.jdbcTemplate2 = new JdbcTemplate(dataSource);
+	}
+		
+	@Transactional
+	public Integer getCampaignPendingCountForAgent(int agentId) {
+	    String countQuery = "SELECT COUNT(data_id) FROM gcc_1913_campaign.upload_data WHERE agent_id = ? AND field_14 IS NULL";
+	    return jdbcTemplate2.queryForObject(countQuery, Integer.class, agentId);
+	}
+	
+	@Transactional
+	public List<Map<String, Object>> getAvailableOutboundAgents()
+	{
+		String sqlQuery = "select agent_id,agent_name\r\n"
+				+ "from gcc_1913_qaqc.agents_list\r\n"
+				+ "where calling_type='OUTBOUND' and isactive='1' and isdelete='0'";
+		
+		return jdbcTemplate.queryForList(sqlQuery);
+	}
+	
+	@Transactional
+	public Integer getTodayCountForAgent(int agentId) {
+	    String countQuery = "SELECT coalesce(sum(aa.data_count),0) as todaycounts \r\n"
+	    		+ "from gcc_1913_qaqc.agent_assigned aa \r\n"
+	    		+ "join gcc_1913_qaqc.agents_list al on al.agent_id=aa.agent_id \r\n"
+	    		+ "where date(aa.created_date)=curdate() and al.agent_id=?";
+	    return jdbcTemplate.queryForObject(countQuery, Integer.class, agentId);
+	}
+	
+	
+	
+//	@Transactional
+//	public List<Map<String, Object>> getAvailableOutboundAgents()
+//	{
+//		String sqlQuery = "SELECT al.agent_id as agent_id,al.agent_name as agent_name,coalesce(sum(aa.data_count),0) as todaycounts\r\n"
+//				+ "from agent_assigned aa\r\n"
+//				+ "join agents_list al on al.agent_id=aa.agent_id\r\n"
+//				+ "where date(aa.created_date)=curdate() and al.calling_type='OUTBOUND' and al.isactive='1' and al.isdelete='0'\r\n"
+//				+ "group by al.agent_id,al.agent_name";
+//		
+//		return jdbcTemplate.queryForList(sqlQuery);
+//	}
+	
+	
+	@Transactional // Ensures atomicity of operations
+    public Map<String, Object> assignTasksTransactionally(Map<String, Object> requestData) {
+		Map<String, Object> response = new HashMap<>();
+        // Extract input data
+        String description = (String) requestData.get("description");
+        String fromDate = (String) requestData.get("startDate");
+        String toDate = (String) requestData.get("endDate");
+        String status = (String) requestData.get("closeName");
+        
+        String group = (String) requestData.get("group");
+        String type = (String) requestData.get("type");
+        String mode = (String) requestData.get("mode");
+        String  zone= (String) requestData.get("zone");
+        
+        int closedCount = Integer.parseInt(requestData.get("closedCount").toString());
+        System.out.println("closedCount====="+closedCount);
+        List<Map<String, Object>> agents = (List<Map<String, Object>>) requestData.get("agents");
+        System.out.println("agents====="+agents);
+        // Step 1: Save task details
+        LocalDate fromLocalDate = LocalDate.parse(fromDate, DateTimeFormatter.ISO_DATE);
+        LocalDate toLocalDate = LocalDate.parse(toDate, DateTimeFormatter.ISO_DATE);
+        String formattedFromDate = fromLocalDate.format(DateTimeFormatter.ofPattern("dd/MM/yyyy"));
+        String formattedToDate = toLocalDate.format(DateTimeFormatter.ofPattern("dd/MM/yyyy"));
+
+        LocalDateTime now = LocalDateTime.now();
+        ZonedDateTime indiaTime = now.atZone(ZoneId.systemDefault()).withZoneSameInstant(ZoneId.of("Asia/Kolkata"));
+        String taskId = "#" + indiaTime.format(DateTimeFormatter.ofPattern("yyMMddHHmmss"));
+        System.out.println("taskId==="+taskId);
+//        if ("closed".equalsIgnoreCase(status)) {
+//            status = "Action Taken Level 2";
+//        }
+                 
+        int rowsInserted = savetaskid(taskId, formattedFromDate, formattedToDate, description, status, closedCount,group,type,mode,zone);
+
+        if (rowsInserted <= 0) {
+            throw new RuntimeException("Failed to create task");
+        }
+
+        // Step 2: Get the last task
+        List<Map<String, Object>> lastTask = getLastTask();
+        if (lastTask.isEmpty()) {
+            throw new RuntimeException("Failed to fetch last task");
+        }
+        int qaqcId = (int) lastTask.get(0).get("qaqc_id");
+        
+        
+        List<Map<String, Object>> assignedIDList = new ArrayList<>();
+        
+        System.out.println("Before shuffle: " + agents);
+        
+        // Shuffle the agents list
+        Collections.shuffle(agents);
+        
+        System.out.println("After shuffle: " + agents);
+        // Step 3: Save agents' task counts
+        for (Map<String, Object> agent : agents) {
+            Integer agentId = Integer.valueOf(agent.get("agentId").toString());
+            Integer dataCounts = Integer.valueOf(agent.get("callsPerAgent").toString());
+            assignedIDList.add( saveInAgentAssigned(agentId, qaqcId, dataCounts));
+        }
+        System.out.println("outside assignedIDList===="+assignedIDList);
+        
+
+        // Step 4: Save upload data
+        if (!"officialfollowup".equalsIgnoreCase(status) && !"publicfollowup".equalsIgnoreCase(status))
+        {
+			String url="https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=ms_dashboard_details&From_date="+formattedFromDate+"&To_date="+formattedToDate+"&jsonResp=Yes&Status="+status+"&isQcuser=Yes"+"&ComplaintType="+type+"&ComplaintGroupId="+group+"&compmode="+mode+"&Zoneid="+zone;
+			System.out.println(url);
+	        boolean isSaved = processAndSaveDetails(url, qaqcId, agents, status,assignedIDList, mode);
+	        if (!isSaved) {
+	            throw new RuntimeException("Failed to process upload data");
+	        }
+        }
+        else
+        {   
+        	boolean isSaved=processAndSaveFollowupDetails(qaqcId, agents, status,formattedFromDate);
+        	if (!isSaved) {
+	            throw new RuntimeException("Failed to process upload data");
+	        }
+        }
+        
+       
+        response.put("status", "success");
+        response.put("message", "Data Transferred Successfully");
+        return response;
+    }
+	
+	@Transactional
+	public List<Map<String, Object>> getfollowupdata(String fromdate, String status) {
+	    try {
+	        // Parse input date from dd/MM/yyyy to yyyy-MM-dd
+	        DateTimeFormatter inputFormatter = DateTimeFormatter.ofPattern("dd/MM/yyyy");
+	        DateTimeFormatter outputFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd");
+	        LocalDate formattedDate = LocalDate.parse(fromdate, inputFormatter);
+
+	        // Format the date into yyyy-MM-dd
+	        String formattedFromDate = formattedDate.format(outputFormatter);
+	        if (!"officialfollowup".equalsIgnoreCase(status))
+	        {
+		        String sqlQuery = "SELECT * FROM gcc_1913_qaqc.qaqc_followup_call_logs WHERE remainder_date = ? AND call_status='FOLLOWUP' AND call_category IN ('CLOSED','PUBLICFOLLOWUP')";
+		        return jdbcTemplate.queryForList(sqlQuery, formattedFromDate);
+	        }
+	        else
+	        {
+	        	String sqlQuery = "SELECT * FROM gcc_1913_qaqc.qaqc_followup_call_logs WHERE remainder_date = ? AND call_status='FOLLOWUP' AND call_category NOT IN ('CLOSED','PUBLICFOLLOWUP')";
+		        return jdbcTemplate.queryForList(sqlQuery, formattedFromDate);
+	        }
+
+	    } catch (DateTimeParseException e) {
+	        throw new IllegalArgumentException("Invalid date format. Expected dd/MM/yyyy.", e);
+	    }
+	}
+
+	@Transactional
+	public boolean processAndSaveFollowupDetails(int qaqc_id, List<Map<String, Object>> agents,String status,String fromdate) {
+	    try {
+
+	    	List<Map<String,Object>> detail=getfollowupdata(fromdate, status);
+	    	
+	    	int index = 0;
+
+	    	for(Map<String, Object> agent: agents) {
+	    			int remainingDataCountForAgent = Integer.parseInt(agent.get("callsPerAgent").toString());
+	    			//System.out.println(remainingDataCountForAgent);
+	    			int currentAgentId = Integer.parseInt(agent.get("agentId").toString());
+	    			//System.out.println(agent.get("agentName").toString());
+
+	    	for (int i = 0; i < remainingDataCountForAgent && index < detail.size(); i++, index++) {
+	    		//System.out.println(i +" "+index);
+	            // Save the current complaint details with the current agent_id
+	            String complaintNumber = (String) detail.get(index).get("complaint_number");
+	            String complaintDate = (String) detail.get(index).get("complaint_date");
+	            String complanitPersonName = (String) detail.get(index).get("complaint_person_name");
+	            String complaintPersonMobileNum = (String) detail.get(index).get("complaint_mobilenumber");
+	            String complaintType = (String) detail.get(index).get("complaint_type");
+	            String complaintMode = (String) detail.get(index).get("complaint_mode");
+	            String department = (String) detail.get(index).get("department");
+	            String complaintGroup = (String) detail.get(index).get("complaint_group");
+	            String officerName = (String) detail.get(index).get("official_name");
+	            String officerMobileNumber = (String) detail.get(index).get("official_mobilenum");
+	            
+	            
+	            String status3=status.toUpperCase();
+
+	            // Insert into the database
+	            String insertQuery = "INSERT INTO gcc_1913_qaqc.qaqc_upload_data (qaqc_id, call_category, complaint_number, complaint_date,complaint_person_name, complaint_mobilenumber, complaint_type, complaint_mode, department, complaint_group, official_name, official_mobilenum, agent_id) VALUES (?,?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
+	            //jdbcTemplate.update(insertQuery, qaqc_id,status3 ,complaintNumber,complaintDate, complanitPersonName, complaintPersonMobileNum, complaintType, complaintMode, department, complaintGroup, officerName, officerMobileNumber, currentAgentId);
+	            KeyHolder keyHolder = new GeneratedKeyHolder();
+
+	            jdbcTemplate.update(connection -> {
+	                PreparedStatement ps = connection.prepareStatement(insertQuery, Statement.RETURN_GENERATED_KEYS);
+	                ps.setInt(1, qaqc_id);
+	                ps.setString(2, status3);
+	                ps.setString(3, complaintNumber);
+	                ps.setString(4, complaintDate);
+	                ps.setString(5, complanitPersonName);
+	                ps.setString(6, complaintPersonMobileNum);
+	                ps.setString(7, complaintType);
+	                ps.setString(8, complaintMode);
+	                ps.setString(9, department);
+	                ps.setString(10, complaintGroup);
+	                ps.setString(11, officerName);
+	                ps.setString(12, officerMobileNumber);
+	                ps.setInt(13, currentAgentId);
+	                return ps;
+	            }, keyHolder);
+	            Number generatedDataId = keyHolder.getKey();
+	            
+	            if (generatedDataId != null) {
+	                long dataId = generatedDataId.longValue();
+	                System.out.println("followdataId=="+dataId);
+	                // Use the dataId in the next insert for qaqc_upload_data_history
+	                String sql = "INSERT INTO gcc_1913_qaqc.qaqc_upload_data_history " +
+	                        "(qaqc_id, call_category, complaint_number, complaint_date, complaint_person_name, complaint_mobilenumber, complaint_type, complaint_mode, department, complaint_group, official_name, official_mobilenum, agent_id, data_id) " +
+	                        "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
+
+	                jdbcTemplate.update(sql, qaqc_id, status3, complaintNumber, complaintDate, complanitPersonName, 
+	                                    complaintPersonMobileNum, complaintType, complaintMode, department, 
+	                                    complaintGroup, officerName, officerMobileNumber, currentAgentId, dataId);
+	            }
+	            
+	            }
+	        }
+	        return true;
+
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return false;
+	    }
+	}
+	
+	@Transactional
+	public boolean processAndSaveDetails(String url, int qaqc_id, List<Map<String, Object>> agents,String status,List<Map<String, Object>> assignedIDList, String mode) {
+	    try {
+	        	    	
+	    	RestTemplate restTemplate = new RestTemplate();
+	    	
+			// Fetch response as String
+			ResponseEntity<String> response = restTemplate.getForEntity(url, String.class);
+			String rawResponse = response.getBody();
+
+			// Preprocess response to remove invalid characters if needed
+			if (rawResponse != null) {
+//				rawResponse = rawResponse.replaceAll("\"\"", "\""); // Replace double-double quotes
+//				rawResponse = rawResponse.replaceAll("(?<![,{])\"R", "\"R"); // Example: Fix missing commas
+				
+			}
+
+			// Log raw response
+			//System.out.println("Raw Response: " + rawResponse);
+
+			// Parse JSON
+			ObjectMapper objectMapper = new ObjectMapper();
+			Map<String, Object> responseMap = objectMapper.readValue(rawResponse, Map.class);
+
+			// Target the specific field where double-double quotes might appear
+			String targetField = "Address"; // Replace with the actual field name
+			if (responseMap.containsKey(targetField)) {
+				String fieldValue = (String) responseMap.get(targetField);
+				if (fieldValue != null && fieldValue.contains("\"\"")) {
+					// Clean double-double quotes in the field value
+					fieldValue = fieldValue.replaceAll("\"\"", "\"");
+					responseMap.put(targetField, fieldValue); // Update the field with cleaned value
+				}
+			}
+
+	        // Extract "Details" array from the response
+	        List<Map<String, Object>> details = (List<Map<String, Object>>) responseMap.get("Details");
+	        //System.out.println(details);
+	        if (details == null) {
+	            System.err.println("No 'Details' found in the response.");
+	            return false; // Or handle as per your requirement
+	        }
+	        if(mode.isEmpty() || mode.isBlank() || mode==null ) {
+	        	details=details.stream().filter(map-> !map.get("Complaint Mode").equals("SOCIAL MEDIA")).collect(Collectors.toList());
+	        }
+	        
+	        int index = 0;
+	        
+	        List<Map<String, Object>> followupData= getFollowupData();
+	            		
+    		List<Map<String, Object>> countDetails = new ArrayList<>();
+
+	    	for(Map<String, Object> agent: agents) {
+	    			int remainingDataCountForAgent = Integer.parseInt(agent.get("callsPerAgent").toString());
+	    			//System.out.println(remainingDataCountForAgent);
+	    			int currentAgentId = Integer.parseInt(agent.get("agentId").toString());
+	    			//System.out.println(agent.get("agentName").toString());
+	    			
+	    	Map<String, Object> countResult = new HashMap<>();
+	    	int assignedCount = 0;
+
+	    	for (int i = 0; i < remainingDataCountForAgent && index < details.size(); i++, index++) {
+	    		
+	    		System.out.println("CHECK = "+index+" "+details.get(index).get("Complaint Mode"));
+	    		//System.out.println(i +" "+index);
+	    		
+	    		 String complaintNumber1 = (String) details.get(index).get("Complaint Number");
+	    		 System.out.println("complaintNumber = "+complaintNumber1);
+	    		 
+	    		 Map<String, Object> result = followupData.stream()
+	    		            .filter(map -> complaintNumber1.equals(map.get("complaint_number")))
+	    		            .findFirst().orElse(null);
+	    		 
+	    		 String compnum = "";
+	    		 String callstatus ="";
+		    	 Date calldate = null ;
+	    		 if(result!= null) {
+	    		  compnum = (String) result.get("complaint_number");
+	    		  callstatus = (String) result.get("call_status");
+		    		calldate = (Date) result.get("remainder_date");
+	    		 }
+		    		
+	    		 
+	    		if(!compnum.equals("") && compnum.equals(complaintNumber1)) {
+	    			//System.out.println("1 if complaintNumber = "+complaintNumber);
+	    			Date currentDate = new Date();
+	    		if(!callstatus.equalsIgnoreCase("followup") && calldate.before(currentDate)) {
+	    			//System.out.println("2 if complaintNumber = "+complaintNumber1);
+	    			 String complaintDate = (String) details.get(index).get("Complaint Opened Date");
+	    			 String complanitPersonName = (String) details.get(index).get("Complaint Person Name");
+	    			 String complaintPersonMobileNum = (String) details.get(index).get("Complaint Person Number");
+	    			 String complaintType = (String) details.get(index).get("Complaint Type");
+	    			 String complaintMode = (String) details.get(index).get("Complaint Mode");
+	    			 String department = (String) details.get(index).get("Department");
+	    			 String complaintGroup = (String) details.get(index).get("Complaint Group");
+	    			 String officerName = (String) details.get(index).get("Assign To");
+	    			 String officerMobileNumber = (String) details.get(index).get("Official Contact Number");
+	    			 String status1 = status.toUpperCase();
+	    			 
+	    			 
+		    		 
+		    		// Insert into the database
+			    		String insertQuery = "INSERT INTO gcc_1913_qaqc.qaqc_upload_data (qaqc_id, call_category, complaint_number,complaint_date, complaint_person_name, complaint_mobilenumber, complaint_type, complaint_mode, department, complaint_group, official_name, official_mobilenum, agent_id) VALUES (?,?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
+			    		//jdbcTemplate.update(insertQuery, qaqc_id, status1, complaintNumber1,complaintDate, complanitPersonName, complaintPersonMobileNum, complaintType, complaintMode, department, complaintGroup, officerName, officerMobileNumber, currentAgentId);
+			    		
+			    		KeyHolder keyHolder = new GeneratedKeyHolder();
+
+		    			 jdbcTemplate.update(connection -> {
+		    			     PreparedStatement ps = connection.prepareStatement(insertQuery, Statement.RETURN_GENERATED_KEYS);
+		    			     ps.setInt(1, qaqc_id);
+		    			     ps.setString(2, status);
+		    			     ps.setString(3, complaintNumber1);
+		    			     ps.setString(4, complaintDate);
+		    			     ps.setString(5, complanitPersonName);
+		    			     ps.setString(6, complaintPersonMobileNum);
+		    			     ps.setString(7, complaintType);
+		    			     ps.setString(8, complaintMode);
+		    			     ps.setString(9, department);
+		    			     ps.setString(10, complaintGroup);
+		    			     ps.setString(11, officerName);
+		    			     ps.setString(12, officerMobileNumber);
+		    			     ps.setInt(13, currentAgentId);
+		    			     return ps;
+		    			 }, keyHolder);
+		    			// Retrieve the generated data_id
+		    			 Number generatedDataId = keyHolder.getKey();
+		    			 if (generatedDataId != null) {
+		    				    long dataId = generatedDataId.longValue();
+		    				    System.out.println("dataId if=="+dataId);
+		    				    // Use the dataId in the next insert for qaqc_upload_data_history
+		    				    String sql = "INSERT INTO gcc_1913_qaqc.qaqc_upload_data_history " +
+		    				            "(qaqc_id, call_category, complaint_number, complaint_date, complaint_person_name, complaint_mobilenumber, complaint_type, complaint_mode, department, complaint_group, official_name, official_mobilenum, agent_id, data_id) " +
+		    				            "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
+
+		    				    jdbcTemplate.update(sql, qaqc_id, status1, complaintNumber1, complaintDate, complanitPersonName, 
+		    				                        complaintPersonMobileNum, complaintType, complaintMode, department, 
+		    				                        complaintGroup, officerName, officerMobileNumber, currentAgentId, dataId);
+		    				    
+		    				}
+			    	
+			    		
+		    			 assignedCount++;
+
+	    		}
+	    		
+	    		} else {
+	    			System.out.println("else complaintNumber = "+complaintNumber1);
+	    			String complaintDate2 = (String) details.get(index).get("Complaint Opened Date");
+	    			String complanitPersonName2 = (String) details.get(index).get("Complaint Person Name");
+	    			String complaintPersonMobileNum2 = (String) details.get(index).get("Complaint Person Number");
+	    			String complaintType2 = (String) details.get(index).get("Complaint Type");
+	    			String complaintMode2 = (String) details.get(index).get("Complaint Mode");
+	    			String department2 = (String) details.get(index).get("Department");
+	    			String complaintGroup2 = (String) details.get(index).get("Complaint Group");
+	    			String officerName2 = (String) details.get(index).get("Assign To");
+	    			String officerMobileNumber2 = (String) details.get(index).get("Official Contact Number");
+	    			String status2 = status.toUpperCase();
+		    		 
+		    		// Insert into the database
+			    		String insertQuery = "INSERT INTO gcc_1913_qaqc.qaqc_upload_data (qaqc_id, call_category, complaint_number,complaint_date, complaint_person_name, complaint_mobilenumber, complaint_type, complaint_mode, department, complaint_group, official_name, official_mobilenum, agent_id) VALUES (?,?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
+			    		//jdbcTemplate.update(insertQuery, qaqc_id, status2, complaintNumber1,complaintDate2, complanitPersonName2, complaintPersonMobileNum2, complaintType2, complaintMode2, department2, complaintGroup2, officerName2, officerMobileNumber2, currentAgentId);
+			    		KeyHolder keyHolder = new GeneratedKeyHolder();
+			    		jdbcTemplate.update(connection -> {
+			    		    PreparedStatement ps = connection.prepareStatement(insertQuery, Statement.RETURN_GENERATED_KEYS);
+			    		    ps.setInt(1, qaqc_id);
+			    		    ps.setString(2, status2);
+			    		    ps.setString(3, complaintNumber1);
+			    		    ps.setString(4, complaintDate2);
+			    		    ps.setString(5, complanitPersonName2);
+			    		    ps.setString(6, complaintPersonMobileNum2);
+			    		    ps.setString(7, complaintType2);
+			    		    ps.setString(8, complaintMode2);
+			    		    ps.setString(9, department2);
+			    		    ps.setString(10, complaintGroup2);
+			    		    ps.setString(11, officerName2);
+			    		    ps.setString(12, officerMobileNumber2);
+			    		    ps.setInt(13, currentAgentId);
+			    		    return ps;
+			    		}, keyHolder);
+			    		Number generatedDataId = keyHolder.getKey();
+			    		
+			    		if (generatedDataId != null) {
+			    		    long dataId2 = generatedDataId.longValue();
+			    		    System.out.println("dataId2 else=="+dataId2);
+			    		    // Use the dataId in the next insert for qaqc_upload_data_history
+			    		    String sql = "INSERT INTO gcc_1913_qaqc.qaqc_upload_data_history " +
+			    		            "(qaqc_id, call_category, complaint_number, complaint_date, complaint_person_name, complaint_mobilenumber, complaint_type, complaint_mode, department, complaint_group, official_name, official_mobilenum, agent_id, data_id) " +
+			    		            "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
+
+			    		    jdbcTemplate.update(sql, qaqc_id, status2, complaintNumber1, complaintDate2, complanitPersonName2, 
+			    		                        complaintPersonMobileNum2, complaintType2, complaintMode2, department2, 
+			    		                        complaintGroup2, officerName2, officerMobileNumber2, currentAgentId, dataId2);
+			    		}
+			    		
+				            
+			    		assignedCount++;
+	    		}
+	    	}
+	    	
+	    	countResult.put("assignedCount", assignedCount);
+    		countResult.put("qaqc_id", qaqc_id);
+    		countResult.put("agent_id", currentAgentId);
+    		countDetails.add(countResult);
+	    }
+	    	for(Map<String, Object> assgn : assignedIDList) {
+	    		
+	    		for(Map<String, Object> count : countDetails) {
+	    			
+	    			if(((int)assgn.get("agent_id"))==((int)count.get("agent_id"))) {
+	    				int assignedid = (int)assgn.get("assigned_id");	
+	    				int agentid = (int)assgn.get("agent_id");	
+	    				int assignedCount = (int)count.get("assignedCount");	
+	    			String sql = "UPDATE agent_assigned SET data_count = ? WHERE assigned_id = ? and agent_id = ?";
+	    			jdbcTemplate.update(sql, assignedCount, assignedid, agentid);
+	    			}
+	    		}
+	    	}
+
+	        return true;
+
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return false;
+	    }
+	}
+	
+	private List<Map<String, Object>> getFollowupData() {
+		
+		 String sqlQuery ="select complaint_number, remainder_date, call_status from qaqc_followup_call_logs";
+		  	  
+		 return jdbcTemplate.queryForList(sqlQuery); 
+	}
+
+	
+//	@Transactional
+//	public int saveInAgentAssigned(int agent_id, int qaqc_id,int data_counts) {
+//	    String insertSql = "INSERT INTO gcc_1913_qaqc.agent_assigned (agent_id, qaqc_id,data_count) VALUES (?, ?,?)";
+//	    int rowsInserted = jdbcTemplate.update(insertSql, agent_id, qaqc_id,data_counts);
+//
+//	    return rowsInserted;
+//	}
+	
+	@Transactional
+	public Map<String, Object> saveInAgentAssigned(int agent_id, int qaqc_id, int data_counts) {
+	    String insertSql = "INSERT INTO gcc_1913_qaqc.agent_assigned (agent_id, qaqc_id, data_count) VALUES (?, ?, ?)";
+	    KeyHolder keyHolder = new GeneratedKeyHolder();
+
+	    int rowsInserted = jdbcTemplate.update(connection -> {
+	        PreparedStatement ps = connection.prepareStatement(insertSql, Statement.RETURN_GENERATED_KEYS);
+	        ps.setInt(1, agent_id);
+	        ps.setInt(2, qaqc_id);
+	        ps.setInt(3, data_counts);
+	        return ps;
+	    }, keyHolder);
+
+	    if (rowsInserted > 0 && keyHolder.getKey() != null) {
+	        Map<String, Object> result = new HashMap<>();
+	        result.put("assigned_id", keyHolder.getKey().intValue());
+	        result.put("agent_id", agent_id);
+	        return result;
+	    } else {
+	        throw new RuntimeException("Failed to insert data into agent_assigned table.");
+	    }
+	}
+	@Transactional
+	 public int savetaskid(String taskid,String fromdate,String todate,String description,String status, int closedCount,String group, String type, String mode, String zone) {
+		
+		// Ensure default values for nullable parameters
+	    if (group == null || group.isEmpty()) {
+	        group = "ALL";
+	    }
+	    if (type == null || type.isEmpty()) {
+	        type = "ALL";
+	    }
+	    if (mode == null || mode.isEmpty()) {
+	        mode = "ALL";
+	    }
+	    if (zone == null || zone.isEmpty()) {
+	        zone = "ALL";
+	    }
+		
+	        String sql = "INSERT INTO gcc_1913_qaqc.qaqc_request (taskid,fromdate,todate,description,call_category,total_data,complaint_group,complaint_type,complaint_mode,complaint_zone) " +
+	                "VALUES (?,?,?,?,?,?,?,?,?,?)";
+	        int rowsInserted = jdbcTemplate.update(sql,taskid,fromdate,todate,description,status,closedCount,group,type,mode,zone);
+	        return rowsInserted;
+	    }
+	@Transactional
+    public List<Map<String, Object>> getLastTask()
+    {
+  	  String sqlQuery ="SELECT qaqc_id\r\n"
+  	  		+ "FROM gcc_1913_qaqc.qaqc_request\r\n"
+  	  		+ "ORDER BY qaqc_id DESC\r\n"
+  	  		+ "LIMIT 1";
+  	  
+  	  return jdbcTemplate.queryForList(sqlQuery); 
+    }
+
+	public int deleteUploadDataTable() {
+	    String sql = "DELETE FROM gcc_1913_qaqc.qaqc_upload_data WHERE 1=1";
+	    int rowsAffected= jdbcTemplate.update(sql);
+	    return rowsAffected;
+	}
+	
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentsService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentsService.java
new file mode 100644
index 0000000..086a915
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentsService.java
@@ -0,0 +1,563 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.time.LocalDate;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+import javax.transaction.Transactional;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+
+@Service
+public class QaqcAgentsService {
+	
+	private JdbcTemplate jdbcTemplate;
+
+	@Autowired
+	 public void setDataSource(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		 this.jdbcTemplate = new JdbcTemplate(dataSource);
+	 }
+	
+		
+	@Transactional
+	public List<Map<String, Object>> getAgentsAllTasksCounts(int agent_id) {
+		    String SqlQuery = "SELECT \r\n"		    		
+		    		+ "    cr.taskid,\r\n"	
+		    		+ "    cr.call_category,\r\n"
+		    		+ "    cr.description,\r\n"
+		    		+ "    aa.qaqc_id,\r\n"
+		    		+ "    aa.agent_id,\r\n"
+		    		+ "    aa.created_date,\r\n"
+		    		+ "    (SELECT COUNT(data_id) \r\n"
+		    		+ "     FROM qaqc_upload_data up \r\n"
+		    		+ "     WHERE up.agent_id = aa.agent_id \r\n"
+		    		+ "       AND up.qaqc_id = cr.qaqc_id\r\n"
+		    		+ "    ) AS calls_assigned,\r\n"
+		    		+ "    (SELECT COUNT(CASE WHEN up.call_status IS NULL THEN 1 END) \r\n"
+		    		+ "     FROM qaqc_upload_data up \r\n"
+		    		+ "     WHERE up.agent_id = aa.agent_id \r\n"
+		    		+ "       AND up.qaqc_id = cr.qaqc_id\r\n"
+		    		+ "    ) AS pending_count,\r\n"
+		    		+ "    (SELECT COUNT(CASE WHEN up.call_status IS NOT NULL THEN 1 END) \r\n"
+		    		+ "     FROM qaqc_upload_data up \r\n"
+		    		+ "     WHERE up.agent_id = aa.agent_id \r\n"
+		    		+ "       AND up.qaqc_id = cr.qaqc_id\r\n"
+		    		+ "    ) AS complete_count,\r\n"
+		    		+ "    (SELECT COUNT(CASE WHEN up.call_status ='CALL_BACK_LATER' OR up.field_9 = 'UNATTENDED' THEN 1 END) \r\n"
+		    		+ "     FROM qaqc_upload_data up \r\n"
+		    		+ "     WHERE up.agent_id = aa.agent_id \r\n"
+		    		+ "       AND up.qaqc_id = cr.qaqc_id\r\n"
+		    		+ "    ) AS followup_count\r\n"
+		    		+ "    \r\n"
+		    		+ "FROM \r\n"
+		    		+ "    agent_assigned aa\r\n"
+		    		+ "JOIN \r\n"
+		    		+ "    agents_list al ON aa.agent_id = al.agent_id\r\n"
+		    		+ "JOIN \r\n"
+		    		+ "    qaqc_request cr ON cr.qaqc_id = aa.qaqc_id\r\n"
+		    		+ "WHERE \r\n"
+		    		+ "    aa.agent_id = ? \r\n"
+		    		+ "    AND aa.isactive = '1'";
+
+	    return jdbcTemplate.queryForList(SqlQuery,agent_id);
+	}
+	
+	public List<Map<String, Object>> getdataforagents(int agent_id,int qaqc_id) {
+        String sqlQuery = "select *\r\n"
+        		+ "from qaqc_upload_data\r\n"
+        		+ "where agent_id=? and qaqc_id=?";
+        
+        return jdbcTemplate.queryForList(sqlQuery,agent_id,qaqc_id);
+    }
+	
+	@Transactional
+	public void savecallstatus(String call_status, String remarks,String complaintNumber)
+	{
+		
+		
+		String SqlQuery = "UPDATE qaqc_upload_data SET call_status = ?,remarks=?, updated_date = NOW() WHERE (complaint_number = ? )";
+
+	    jdbcTemplate.update(SqlQuery,call_status, remarks,complaintNumber);
+	}
+	
+	@Transactional
+	public void savecallstatusinlogs(String call_status, String remarks,String complaintNumber) {
+	    
+		// Step 1: Fetch details from the source table using the complaintNumber
+        String selectQuery = "SELECT * FROM qaqc_upload_data WHERE complaint_number = ?";
+        Map<String, Object> details = jdbcTemplate.queryForMap(selectQuery, complaintNumber);
+
+        // Extract the required fields from the result (modify based on your table structure)
+        String detailField1 = (String) details.get("qaqc_id");
+        String detailField2 = (String) details.get("agent_id"); 
+        String detailField3 = (String) details.get("complaint_number");
+        String detailField4 = (String) details.get("complaint_person_name");
+        String detailField5 = (String) details.get("complaint_mobilenumber");
+        String detailField6 = (String) details.get("complaint_type");
+        String detailField7 = (String) details.get("complaint_mode");
+        String detailField8 = (String) details.get("department");
+        String detailField9 = (String) details.get("complaint_group");
+        String detailField10 = (String) details.get("official_name");
+        String detailField11 = (String) details.get("official_mobilenum");
+
+        // Step 2: Insert the fetched details along with call_status and remarks into qaqc_call_logs
+        String insertQuery = "INSERT INTO qaqc_call_logs (qaqc_id, agent_id, complaint_number, complaint_person_name, complaint_mobilenumber,complaint_type,complaint_mode,department,complaint_group,official_name,official_mobilenum) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?)";
+        jdbcTemplate.update(insertQuery,detailField1, detailField2,detailField3,detailField4,detailField5,detailField6,detailField7,detailField8,detailField9,detailField10,detailField11,call_status,remarks);
+	    
+	}
+	
+	
+	public List<Map<String,Object>> getPreviousDayDashboardCounts()
+	{
+		String sqlQuery = "SELECT \r\n"
+	            + "    COUNT(DISTINCT assigned_stats.agent_id) AS TotalAgents, \r\n"
+	            + "    SUM(COALESCE(assigned_stats.Assigned, 0)) AS TotalAssigned, \r\n"
+	            + "    SUM(COALESCE(completed_stats.TotalCompleted, 0)) AS TotalCompleted, \r\n"
+	            + "    SUM(COALESCE(assigned_stats.Assigned, 0) - COALESCE(completed_stats.TotalCompleted, 0)) AS TotalPending \r\n"
+	            + "FROM \r\n"
+	            + "    (SELECT al.agent_id AS agent_id, SUM(aa.data_count) AS Assigned \r\n"
+	            + "     FROM agent_assigned aa \r\n"
+	            + "     JOIN agents_list al ON aa.agent_id = al.agent_id \r\n"
+	            + "     WHERE DATE(aa.created_date) = DATE(SUBDATE(CURDATE(), 1)) \r\n"
+	            + "     GROUP BY al.agent_id) AS assigned_stats \r\n"
+	            + "LEFT JOIN \r\n"
+	            + "    (SELECT agent_id, COUNT(DISTINCT (complaint_number)) AS TotalCompleted \r\n"
+	            + "     FROM qaqc_call_logs \r\n"
+	            + "     WHERE DATE(created_date) = DATE(SUBDATE(CURDATE(), 1)) \r\n"
+	            + "     GROUP BY agent_id) AS completed_stats \r\n"
+	            + "ON assigned_stats.agent_id = completed_stats.agent_id;";
+				
+        
+        return jdbcTemplate.queryForList(sqlQuery);
+	}
+	
+//	public List<Map<String,Object>> getAgentPreviousDayCount()
+//	{
+//		String sqlQuery = "SELECT DISTINCT \r\n"
+//				+ "    assigned_stats.agent_id, \r\n"
+//				+ "    assigned_stats.agent_name as agent_name,  -- Use the alias assigned_stats here instead of aa\r\n"
+//				+ "    COALESCE(assigned_stats.Assigned, 0) AS Assigned, \r\n"
+//				+ "    COALESCE(completed_stats.TotalCompleted, 0) AS TotalCompleted, \r\n"
+//				+ "    COALESCE(assigned_stats.Assigned, 0) - COALESCE(completed_stats.TotalCompleted, 0) AS Pending, \r\n"
+//				+ "    CASE \r\n"
+//				+ "        WHEN COALESCE(assigned_stats.Assigned, 0) = 0 THEN 0 \r\n"
+//				+ "        ELSE ROUND(COALESCE(completed_stats.TotalCompleted, 0) * 100.0 / COALESCE(assigned_stats.Assigned, 1)) \r\n"
+//				+ "    END AS CompletionPercentage, \r\n"
+//				+ "    COALESCE(call_stats.Completed_count, 0) AS Completed_count, \r\n"
+//				+ "    COALESCE(call_stats.Reopened_count, 0) AS Reopened_count, \r\n"
+//				+ "    COALESCE(call_stats.Followup_count, 0) AS Followup_count, \r\n"
+//				+ "    COALESCE(call_stats.Other_count, 0) AS Other_count \r\n"
+//				+ "FROM \r\n"
+//				+ "    (SELECT al.agent_id AS agent_id, al.agent_name AS agent_name, SUM(aa.data_count) AS Assigned \r\n"
+//				+ "     FROM agent_assigned aa \r\n"
+//				+ "     JOIN agents_list al ON aa.agent_id = al.agent_id \r\n"
+//				+ "     WHERE DATE(aa.created_date) = DATE(SUBDATE(CURDATE(), 1)) \r\n"
+//				+ "     GROUP BY al.agent_id,al.agent_name) AS assigned_stats  -- The alias 'assigned_stats' is used here\r\n"
+//				+ "LEFT JOIN \r\n"
+//				+ "    (SELECT agent_id, COUNT(qaqc_id) AS TotalCompleted \r\n"
+//				+ "     FROM qaqc_call_logs \r\n"
+//				+ "     WHERE DATE(created_date) = DATE(SUBDATE(CURDATE(), 1)) \r\n"
+//				+ "     GROUP BY agent_id) AS completed_stats ON assigned_stats.agent_id = completed_stats.agent_id \r\n"
+//				+ "LEFT JOIN \r\n"
+//				+ "    (SELECT agent_id, \r\n"
+//				+ "        SUM(CASE WHEN call_status IN ('COMPLETED', 'FOLLOWUP_COMPLETED') THEN 1 ELSE 0 END) AS Completed_count, \r\n"
+//				+ "        SUM(CASE WHEN call_status = 'REOPEN' THEN 1 ELSE 0 END) AS Reopened_count, \r\n"
+//				+ "        SUM(CASE WHEN call_status = 'FOLLOWUP' THEN 1 ELSE 0 END) AS Followup_count, \r\n"
+//				+ "        SUM(CASE WHEN call_status NOT IN ('COMPLETED', 'FOLLOWUP_COMPLETED', 'REOPEN', 'FOLLOWUP') THEN 1 ELSE 0 END) AS Other_count \r\n"
+//				+ "     FROM qaqc_call_logs \r\n"
+//				+ "     WHERE DATE(created_date) = DATE(SUBDATE(CURDATE(), 1)) \r\n"
+//				+ "     GROUP BY agent_id) AS call_stats ON assigned_stats.agent_id = call_stats.agent_id;\r\n";
+//        
+//        return jdbcTemplate.queryForList(sqlQuery);
+//	}
+	
+	
+	public List<Map<String,Object>> getAgentPreviousDayCount()
+	{
+		String sqlQuery = "SELECT DISTINCT \r\n"
+				+ "    assigned_stats.agent_id, \r\n"
+				+ "    assigned_stats.agent_name as agent_name,  -- Use the alias assigned_stats here instead of aa\r\n"
+				+ "    COALESCE(assigned_stats.Assigned, 0) AS Assigned, \r\n"
+				+ "    COALESCE(completed_stats.TotalCompleted, 0) AS TotalCompleted, \r\n"
+				+ "    COALESCE(assigned_stats.Assigned, 0) - COALESCE(completed_stats.TotalCompleted, 0) AS Pending, \r\n"
+				+ "    CASE \r\n"
+				+ "        WHEN COALESCE(assigned_stats.Assigned, 0) = 0 THEN 0 \r\n"
+				+ "        ELSE ROUND(COALESCE(completed_stats.TotalCompleted, 0) * 100.0 / COALESCE(assigned_stats.Assigned, 1)) \r\n"
+				+ "    END AS CompletionPercentage, \r\n"
+				+ "    COALESCE(call_stats.Completed_count, 0) AS Completed_count, \r\n"
+				+ "    COALESCE(call_stats.Reopened_count, 0) AS Reopened_count, \r\n"
+				+ "    COALESCE(call_stats.Followup_count, 0) AS Followup_count, \r\n"
+				+ "    COALESCE(call_stats.Other_count, 0) AS Other_count \r\n"
+				+ "FROM \r\n"
+				+ "    (SELECT al.agent_id AS agent_id, al.agent_name AS agent_name, SUM(aa.data_count) AS Assigned \r\n"
+				+ "     FROM agent_assigned aa \r\n"
+				+ "     JOIN agents_list al ON aa.agent_id = al.agent_id \r\n"
+				+ "     WHERE DATE(aa.created_date) = DATE(SUBDATE(CURDATE(), 1)) \r\n"
+				+ "     GROUP BY al.agent_id,al.agent_name) AS assigned_stats  -- The alias 'assigned_stats' is used here\r\n"
+				+ "LEFT JOIN \r\n"
+				+ "    (SELECT agent_id, count(DISTINCT (complaint_number)) AS TotalCompleted \r\n"
+				+ "     FROM qaqc_call_logs \r\n"
+				+ "     WHERE DATE(created_date) = DATE(SUBDATE(CURDATE(), 1)) \r\n"
+				+ "     GROUP BY agent_id) AS completed_stats ON assigned_stats.agent_id = completed_stats.agent_id \r\n"
+				+ "LEFT JOIN \r\n"
+				+ "    (SELECT agent_id, \r\n"
+				+ "        SUM(CASE WHEN call_status IN ('COMPLETED', 'FOLLOWUP_COMPLETED') THEN 1 ELSE 0 END) AS Completed_count, \r\n"
+				+ "        SUM(CASE WHEN call_status = 'REOPEN' THEN 1 ELSE 0 END) AS Reopened_count, \r\n"
+				+ "        SUM(CASE WHEN call_status = 'FOLLOWUP' THEN 1 ELSE 0 END) AS Followup_count, \r\n"
+				+ "        SUM(CASE WHEN call_status NOT IN ('COMPLETED', 'FOLLOWUP_COMPLETED', 'REOPEN', 'FOLLOWUP') THEN 1 ELSE 0 END) AS Other_count \r\n"
+				+ "     FROM qaqc_call_logs \r\n"
+				+ "     WHERE DATE(created_date) = DATE(SUBDATE(CURDATE(), 1)) \r\n"
+				+ "     GROUP BY agent_id) AS call_stats ON assigned_stats.agent_id = call_stats.agent_id \r\n"
+				+ "     ORDER BY agent_name \r\n;";
+        
+        return jdbcTemplate.queryForList(sqlQuery);
+	}
+	
+
+	public List<Map<String, Object>> getAgentDashboard(int userId, String startDate, String endDate) {
+	    String sql = "SELECT " +
+	                 "    COALESCE(SUM(aa.data_count), 0) AS Total_Calls_assigned, " +
+	                 "    COALESCE(SUM(CASE WHEN qr.call_category = 'closed' THEN aa.data_count ELSE 0 END), 0) AS Closed_Call_count, " +
+	                 "    COALESCE(SUM(CASE WHEN qr.call_category IN ('inprogress', 'redressed', 'reopened','processing') THEN aa.data_count ELSE 0 END), 0) AS Inprogress_Call_count, " +
+	                 "    COALESCE(SUM(CASE WHEN qr.call_category = 'officialfollowup' THEN aa.data_count ELSE 0 END), 0) AS Followup_Call_count, " +
+	                 "    COALESCE(SUM(CASE WHEN qr.call_category = 'publicfollowup' THEN aa.data_count ELSE 0 END), 0) AS PublicFollowup_Call_count " +
+	                 "FROM agent_assigned aa " +
+	                 "LEFT JOIN qaqc_request qr ON aa.qaqc_id = qr.qaqc_id " +
+	                 "WHERE aa.agent_id = ? " +
+	                 "AND DATE(qr.created_date) BETWEEN ? AND ?";
+	    
+	    return jdbcTemplate.queryForList(sql, userId, startDate, endDate);
+	}
+
+	
+	public List<Map<String, Object>> getAgentPerformanceData(int agentId, String startDate, String endDate) {
+	    String sql = "SELECT \n"
+	            + "    COALESCE(total_data_count, 0) AS total_data_count,\n" // Ensure total_data_count is 0 if null
+	            + "    COALESCE(completed_count, 0) AS completed_count,\n"  // Ensure completed_count is 0 if null
+	            + "    COALESCE((total_data_count - completed_count), 0) AS pending_count,\n" // Ensure pending_count is 0
+	            + "    CASE \n"
+	            + "        WHEN COALESCE(total_data_count, 0) > 0 THEN ROUND((COALESCE(completed_count, 0) / total_data_count) * 100, 1)\n"
+	            + "        ELSE 0\n"
+	            + "    END AS completed_percentage\n"
+	            + "FROM \n"
+	            + "    (\n"
+	            + "        SELECT \n"
+	            + "            (SELECT COALESCE(SUM(aa.data_count), 0) \n"
+	            + "             FROM agent_assigned aa \n"
+	            + "             WHERE aa.agent_id = ? AND DATE(aa.created_date) BETWEEN ? AND ?) AS total_data_count,\n"
+	            + "            \n"
+	            + "            (SELECT COALESCE(COUNT(*), 0) \n"
+	            + "             FROM qaqc_call_logs cl \n"
+	            + "             WHERE cl.agent_id = ?\n"
+	            + "             AND DATE(cl.created_date) BETWEEN ? AND ? \n"
+	            + "             AND cl.call_status IS NOT NULL) AS completed_count\n"
+	            + "    ) AS combined";
+
+	    return jdbcTemplate.queryForList(sql, agentId, startDate, endDate, agentId, startDate, endDate);
+	}
+
+
+   
+   
+   public List<Map<String, Object>> getAgentTaskDetails(int userId, String startDate, String endDate) {
+	   String sql = "WITH LatestCallLogs AS ( " +
+			    "    SELECT " +
+			    "        cl.qaqc_id, " +
+			    "        cl.agent_id, " +
+			    "        cl.complaint_number, " +
+			    "        cl.call_status, " +
+			    "        cl.created_date, " +
+			    "        ROW_NUMBER() OVER (PARTITION BY cl.qaqc_id, cl.agent_id, cl.complaint_number ORDER BY cl.created_date DESC) AS row_num " +
+			    "    FROM " +
+			    "        qaqc_call_logs cl " +
+			    ") " +
+			    "SELECT DISTINCT " +
+			    "    qr.taskid AS taskid, " +
+			    "    qr.call_category AS call_category, " +
+			    "    DATE(aa.created_date) AS cdate, " +
+			    "    aa.data_count AS assigned, " +
+			    "    COUNT(lcl.agent_id) AS callstaken, " +
+			    "    (aa.data_count - COUNT(lcl.agent_id)) AS pending, " +
+			    "    ROUND((CASE WHEN aa.data_count > 0 THEN (COUNT(lcl.agent_id) / aa.data_count) * 100 ELSE 0 END), 2) AS percentage, " +
+			    "    COUNT(CASE WHEN lcl.call_status IN ('COMPLETED', 'FOLLOWUP_COMPLETED') THEN 1 END) AS Completed, " +
+			    "    COUNT(CASE WHEN lcl.call_status = 'REOPEN' THEN 1 END) AS Reopened, " +
+			    "    COUNT(CASE WHEN lcl.call_status = 'FOLLOWUP' THEN 1 END) AS Followup, " +
+			    "    COUNT(CASE WHEN lcl.call_status NOT IN ('COMPLETED', 'FOLLOWUP_COMPLETED', 'REOPEN', 'FOLLOWUP') THEN 1 END) AS Others " +
+			    "FROM " +
+			    "    qaqc_request qr " +
+			    "JOIN " +
+			    "    agent_assigned aa ON aa.qaqc_id = qr.qaqc_id " +
+			    "JOIN " +
+			    "    agents_list al ON al.agent_id = aa.agent_id " +
+			    "LEFT JOIN " +
+			    "    LatestCallLogs lcl ON qr.qaqc_id = lcl.qaqc_id AND al.agent_id = lcl.agent_id AND lcl.row_num = 1 " +
+			    "WHERE " +
+			    "    al.agent_id = ? AND aa.data_count != 0 " +
+			    "    AND DATE(aa.created_date) BETWEEN ? AND ? " +
+			    "GROUP BY " +
+			    "    taskid, cdate, assigned, call_category";
+
+			return jdbcTemplate.queryForList(sql, userId, startDate, endDate);
+	}
+		
+		public List<Map<String, Object>> getAgentPerformanceCount(String startDate, String endDate) {
+		    String sql = "SELECT " +
+		        "t2.total_calls, " +
+		        "t3.completed_calls, " +
+		        "t2.total_calls - t3.completed_calls AS pending_calls, " +
+		        "t4.no_of_agents " +
+		        "FROM " +		        
+		        "( " +
+		        "    SELECT " +
+		        "        SUM(aa.data_count) AS total_calls " +
+		        "    FROM " +
+		        "        agent_assigned aa " +
+		        "     INNER JOIN " +
+		        "        qaqc_request qr " +
+		        "     ON " +
+		        "        aa.qaqc_id = qr.qaqc_id " +
+		        "    WHERE " +
+		        "        (? IS NULL OR date(qr.created_date) BETWEEN ? AND ?) " +
+		        ") AS t2, " +
+		        "( " +
+		        "    SELECT " +
+		        "        SUM(qr.total_data) AS total_data, " +
+		        "        COUNT(DISTINCT CONCAT(qcl.qaqc_id, '_', qcl.complaint_number)) AS completed_calls " +
+		        "    FROM " +
+		        "       qaqc_request qr " +
+		        "    LEFT JOIN " +
+		        "        qaqc_call_logs qcl " +
+		        "    ON " +
+		        "        qr.qaqc_id = qcl.qaqc_id " +
+		        "    WHERE " +
+		        "        (? IS NULL OR date(qr.created_date) BETWEEN ? AND ?) " +
+		        ") AS t3, " +
+		        "( " +
+		        "    SELECT " +
+		        "        COUNT(DISTINCT aa.agent_id) AS no_of_agents " +
+		        "    FROM " +
+		        "        agent_assigned aa " +
+		        "    WHERE " +
+		        "        (? IS NULL OR date(aa.created_date) BETWEEN ? AND ?) " +
+		        ") AS t4";
+
+		    // Prepare the parameters for the query
+		    Object[] params = new Object[] {
+		        startDate, startDate, endDate, // For t2
+		        startDate, startDate, endDate, // For t3
+		        startDate, startDate, endDate  // For t4
+		    };
+
+		    // Execute the query and return the results as a List of Maps
+		    return jdbcTemplate.queryForList(sql, params);
+		}
+	
+		public List<Map<String, Object>> getAgentPerformanceList(String startDate, String endDate) {
+		    // Base query with subqueries for Assigned, Completed, and Pending
+		    StringBuilder query = new StringBuilder(
+		        "SELECT DISTINCT " +
+		        "    assigned_stats.agent_id, " + 
+		        "    assigned_stats.agent_name, " +  
+		        "    COALESCE(assigned_stats.Assigned, 0) AS Assigned, " +
+		        "    COALESCE(completed_stats.TotalCompleted, 0) AS TotalCompleted, " +
+		        "    COALESCE(assigned_stats.Assigned, 0) - COALESCE(completed_stats.TotalCompleted, 0) AS Pending, " +
+		        "    CASE WHEN COALESCE(assigned_stats.Assigned, 0) = 0 THEN 0 ELSE " +
+		        "        ROUND(COALESCE(completed_stats.TotalCompleted, 0) * 100.0 / COALESCE(assigned_stats.Assigned, 1), 2) " +
+		        "    END AS CompletionPercentage, " +
+		        "    COALESCE(call_stats.Completed_count, 0) AS Completed_count, " +
+		        "    COALESCE(call_stats.Reopened_count, 0) AS Reopened_count, " +
+		        "    COALESCE(call_stats.Followup_count, 0) AS Followup_count, " +
+		        "    COALESCE(call_stats.Other_count, 0) AS Other_count " +
+		        "FROM " +
+		        "    (SELECT al.agent_id as agent_id, al.agent_name as agent_name,SUM(aa.data_count) AS Assigned " +
+		        "     FROM agent_assigned aa JOIN agents_list al ON aa.agent_id=al.agent_id " +
+		        "     WHERE (? IS NULL OR DATE(aa.created_date) >= STR_TO_DATE(?, '%Y-%m-%d')) " + // Conditional date filtering
+		        "       AND (? IS NULL OR DATE(aa.created_date) <= STR_TO_DATE(?, '%Y-%m-%d')) " +
+		        "     GROUP BY al.agent_id,al.agent_name) AS assigned_stats " +  // The alias 'assigned_stats' is used here
+		        "LEFT JOIN " +
+		        "    (SELECT agent_id, COUNT(qaqc_id) AS TotalCompleted " +
+		        "     FROM qaqc_call_logs " +
+		        "     WHERE (? IS NULL OR DATE(created_date) >= STR_TO_DATE(?, '%Y-%m-%d')) " + // Conditional date filtering
+		        "       AND (? IS NULL OR DATE(created_date) <= STR_TO_DATE(?, '%Y-%m-%d')) " +
+		        "     GROUP BY agent_id) AS completed_stats ON assigned_stats.agent_id = completed_stats.agent_id " +
+		        "LEFT JOIN " +
+		        "    (SELECT agent_id, " +
+		        "        SUM(CASE WHEN call_status IN ('COMPLETED', 'FOLLOWUP_COMPLETED') THEN 1 ELSE 0 END) AS Completed_count, " +
+		        "        SUM(CASE WHEN call_status = 'REOPEN' THEN 1 ELSE 0 END) AS Reopened_count, " +
+		        "        SUM(CASE WHEN call_status = 'FOLLOWUP' THEN 1 ELSE 0 END) AS Followup_count, " +
+		        "        SUM(CASE WHEN call_status NOT IN ('COMPLETED', 'FOLLOWUP_COMPLETED', 'REOPEN', 'FOLLOWUP') THEN 1 ELSE 0 END) AS Other_count " +
+		        "     FROM qaqc_call_logs " +
+		        "     WHERE (? IS NULL OR DATE(created_date) >= STR_TO_DATE(?, '%Y-%m-%d')) " + // Conditional date filtering
+		        "       AND (? IS NULL OR DATE(created_date) <= STR_TO_DATE(?, '%Y-%m-%d')) " +
+		        "     GROUP BY agent_id) AS call_stats ON assigned_stats.agent_id = call_stats.agent_id"
+		    );
+
+		    // Execute query with date range parameters
+		    return jdbcTemplate.queryForList(
+		        query.toString(),
+		        startDate, startDate, endDate, endDate, // Parameters for assigned_stats
+		        startDate, startDate, endDate, endDate, // Parameters for completed_stats
+		        startDate, startDate, endDate, endDate  // Parameters for call_stats
+		    );
+		}
+		
+
+
+
+		public List<Map<String, Object>> getAgentTaskwiseData(String agentId) {
+		  
+		      String query="WITH LatestCallLogs AS (\r\n"
+		      		+ "    SELECT \r\n"
+		      		+ "        cl.qaqc_id,\r\n"
+		      		+ "        cl.agent_id,\r\n"
+		      		+ "        cl.complaint_number,\r\n"
+		      		+ "        cl.call_status,\r\n"
+		      		+ "        cl.created_date,\r\n"
+		      		+ "        ROW_NUMBER() OVER (PARTITION BY cl.qaqc_id, cl.agent_id, cl.complaint_number ORDER BY cl.created_date DESC) AS row_num\r\n"
+		      		+ "    FROM \r\n"
+		      		+ "        qaqc_call_logs cl\r\n"
+		      		+ ")\r\n"
+		      		+ "SELECT DISTINCT \r\n"
+		      		+ "    qr.taskid as taskid,\r\n"
+		      		+ "    date(aa.created_date) as cdate,\r\n"
+		      		+ "    aa.data_count AS assigned,\r\n"
+		      		+ "    COUNT(lcl.agent_id) AS callstaken,\r\n"
+		      		+ "    (aa.data_count - COUNT(lcl.agent_id)) AS pending,\r\n"
+		      		+ "    ROUND((COUNT(lcl.agent_id) / aa.data_count) * 100, 2) AS percentage,\r\n"
+		      		+ "    COUNT(CASE WHEN lcl.call_status IN ('COMPLETED', 'FOLLOWUP_COMPLETED') THEN 1 END) AS Completed,\r\n"
+		      		+ "    COUNT(CASE WHEN lcl.call_status = 'REOPEN' THEN 1 END) AS Reopened,\r\n"
+		      		+ "    COUNT(CASE WHEN lcl.call_status = 'FOLLOWUP' THEN 1 END) AS Followup,\r\n"
+		      		+ "    COUNT(CASE WHEN lcl.call_status NOT IN ('COMPLETED', 'FOLLOWUP_COMPLETED', 'REOPEN', 'FOLLOWUP') THEN 1 END) AS Others\r\n"
+		      		+ "FROM \r\n"
+		      		+ "    qaqc_request qr\r\n"
+		      		+ "JOIN \r\n"
+		      		+ "    agent_assigned aa ON aa.qaqc_id = qr.qaqc_id\r\n"
+		      		+ "JOIN \r\n"
+		      		+ "    agents_list al ON al.agent_id = aa.agent_id\r\n"
+		      		+ "LEFT JOIN \r\n"
+		      		+ "    LatestCallLogs lcl ON qr.qaqc_id = lcl.qaqc_id AND al.agent_id = lcl.agent_id AND lcl.row_num = 1\r\n"
+		      		+ "WHERE \r\n"
+		      		+ "    al.agent_id = ?\r\n"
+		      		+ "GROUP BY \r\n"
+		      		+ "    taskid, cdate, assigned";  
+
+		   
+		        return jdbcTemplate.queryForList(query, agentId);
+		    
+		}
+		
+		
+		public List<Map<String, Object>> getAttendedComplaintStatus(
+		        String startDate, String endDate, String complaintNumber, String complaintMobileNumber) {
+
+		    // Base query with JOIN to include agent_name
+		    StringBuilder query = new StringBuilder(
+		        "SELECT qcl.*,date(qcl.created_date) as updated_date, al.agent_name " +
+		        "FROM qaqc_call_logs qcl " +
+		        "LEFT JOIN agents_list al ON qcl.agent_id = al.agent_id " +
+		        "WHERE 1=1 ");
+
+		    // List to store query parameters
+		    List<Object> params = new ArrayList<>();
+
+		    // Add date range condition if provided
+		    if (startDate != null && !startDate.isEmpty()) {
+		        query.append("AND DATE(qcl.created_date) >= ? ");
+		        params.add(startDate);
+		    }
+		    if (endDate != null && !endDate.isEmpty()) {
+		        query.append("AND DATE(qcl.created_date) <= ? ");
+		        params.add(endDate);
+		    }
+
+		    // Add complaint number condition if provided
+		    if (complaintNumber != null && !complaintNumber.isEmpty()) {
+		        query.append("AND qcl.complaint_number = ? ");
+		        params.add(complaintNumber);
+		    }
+
+		    // Add complaint mobile number condition if provided
+		    if (complaintMobileNumber != null && !complaintMobileNumber.isEmpty()) {
+		        query.append("AND qcl.complaint_mobilenumber = ? ");
+		        params.add(complaintMobileNumber);
+		    }
+
+		    // Add ORDER BY clause
+		    query.append("ORDER BY qcl.created_date DESC ");
+
+		    // Add LIMIT clause only if complaintNumber is provided
+		    if (complaintNumber != null && !complaintNumber.isEmpty()) {
+		        query.append("LIMIT 1 ");
+		    }
+
+		    // Execute the query with dynamic parameters
+		    return jdbcTemplate.queryForList(query.toString(), params.toArray());
+		}
+		
+		
+		public List<Map<String, Object>> getAttendedComplainthistory(
+		        String startDate, String endDate, String complaintNumber, String complaintMobileNumber) {
+
+		    // Base query with JOIN to include agent_name
+		    StringBuilder query = new StringBuilder(
+		        "SELECT qcl.*, al.agent_name " +
+		        "FROM qaqc_call_logs qcl " +
+		        "LEFT JOIN agents_list al ON qcl.agent_id = al.agent_id " +
+		        "WHERE 1=1 ");
+
+		    // List to store query parameters
+		    List<Object> params = new ArrayList<>();
+
+		    // Add date range condition if provided
+		    if (startDate != null && !startDate.isEmpty()) {
+		        query.append("AND DATE(qcl.created_date) >= ? ");
+		        params.add(startDate);
+		    }
+		    if (endDate != null && !endDate.isEmpty()) {
+		        query.append("AND DATE(qcl.created_date) <= ? ");
+		        params.add(endDate);
+		    }
+
+		    // Add complaint number condition if provided
+		    if (complaintNumber != null && !complaintNumber.isEmpty()) {
+		        query.append("AND qcl.complaint_number = ? ");
+		        params.add(complaintNumber);
+		    }
+
+		    // Add complaint mobile number condition if provided
+		    if (complaintMobileNumber != null && !complaintMobileNumber.isEmpty()) {
+		        query.append("AND qcl.complaint_mobilenumber = ? ");
+		        params.add(complaintMobileNumber);
+		    }
+
+		    // Group by qcl.id and agent_name to avoid SQL error
+		    query.append("GROUP BY qcl.id, al.agent_name ");
+
+		    // Add ordering clause
+		    query.append("ORDER BY qcl.created_date DESC");
+
+		    // Execute the query with dynamic parameters
+		    return jdbcTemplate.queryForList(query.toString(), params.toArray());
+		}
+		
+		public List<Map<String, Object>> getAgentTaskwiseAssign(String agentId) {
+			String query="SELECT * FROM qaqc_upload_data_history where agent_id=? ";  
+			return jdbcTemplate.queryForList(query, agentId);
+			}
+
+		public List<Map<String, Object>> getAgentName(int userId) {
+			String query="SELECT agent_name \r\n"
+					+ "FROM agents_list\r\n"
+					+ "where agent_id=?";
+			return jdbcTemplate.queryForList(query, userId);
+		}
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcCallsService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcCallsService.java
new file mode 100644
index 0000000..2191a3c
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcCallsService.java
@@ -0,0 +1,391 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.time.LocalDateTime;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.client.RestTemplate;
+
+import java.io.InputStream;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.net.URLConnection;
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
+
+@Service
+@Transactional
+public class QaqcCallsService {
+	 
+	 @Autowired
+	 private JdbcTemplate jdbcTemplate;
+	 
+	 @Autowired
+	 public void setDataSource(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		 this.jdbcTemplate = new JdbcTemplate(dataSource);
+	 }
+	 
+	 public List<Map<String, Object>> getClosedComplaints(int agent_id) {
+		    String query = "SELECT data_id, complaint_number, complaint_date,complaint_person_name, complaint_mobilenumber, complaint_type,official_name, official_mobilenum,complaint_mode, department,call_category " +
+		                   "FROM gcc_1913_qaqc.qaqc_upload_data " +
+		                   "WHERE call_category = 'CLOSED' " +
+		                   "  AND is_processed = FALSE " + // Fetch only unprocessed entries
+		                   "  AND agent_id = ?";
+		    return jdbcTemplate.queryForList(query, agent_id);
+		}
+
+	 
+	    public List<Map<String, Object>> getCallCategories() 
+	    {
+	    	String query = "SELECT call_status " +
+                    "FROM gcc_1913_qaqc.call_status WHERE call_category_id ='1' and isactive='1'";
+	        return jdbcTemplate.queryForList(query);	    	
+	    }
+	    
+	    
+	    @Transactional
+	    public int uploadComplaintDetailsInLogs(Map<String, Object> logDetails, String action,  String complaintNumber, String remainderDate) {
+	    	System.out.println("Complaint Details: " + logDetails);
+		    // Extract other field values from complaintDetails
+		    int qaqcid = (int) logDetails.get("qaqc_id");
+		    String ccategory = logDetails.get("call_category").toString();
+		    String complaintDate = logDetails.get("complaint_date").toString();
+		    String personName = logDetails.get("complaint_person_name").toString();
+		    String personMobNo = logDetails.get("complaint_mobilenumber").toString();
+		    String cType = logDetails.get("complaint_type").toString();
+		    String cMode = logDetails.get("complaint_mode").toString();
+		    String department = logDetails.get("department").toString();
+		    String cGroup = logDetails.get("complaint_group").toString();
+		    String officialName = logDetails.get("official_name").toString();
+		    String officialMobileNum = logDetails.get("official_mobilenum").toString();
+		    String callStatus = logDetails.get("call_status").toString();
+		    String remarks = logDetails.get("remarks").toString();
+		    int agentId = (int) logDetails.get("agent_id");
+		    int updated_agent=(int)logDetails.get("updated_agent");
+		    boolean isProcessed = (boolean)logDetails.get("is_processed");
+		    LocalDateTime currentDate = LocalDateTime.now();
+
+		    // Determine which table to insert into based on the action
+		    if (action.equals("FOLLOWUP")) {
+		        String query = "INSERT INTO gcc_1913_qaqc.qaqc_followup_call_logs (qaqc_id, call_category, agent_id, complaint_number,complaint_date, complaint_person_name, "
+		                     + "complaint_mobilenumber, complaint_type, complaint_mode, department, complaint_group, official_name, remainder_date,official_mobilenum, call_status, remarks,created_date,updated_agent) "
+		                     + "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,?,?,?)";
+
+		        int rowsAffected = jdbcTemplate.update(query, qaqcid, ccategory, agentId, complaintNumber, complaintDate,personName,
+		                personMobNo, cType, cMode, department, cGroup, officialName,remainderDate, officialMobileNum,callStatus,
+		                 remarks,currentDate,updated_agent);
+		        System.out.println("Rows Inserted in qaqc_followup_call_logs : " + rowsAffected); 
+		        
+		        String query1 = "INSERT INTO gcc_1913_qaqc.qaqc_call_logs (qaqc_id, call_category, agent_id, complaint_number,complaint_date, complaint_person_name, "
+	                    + "complaint_mobilenumber, complaint_type, complaint_mode, department, complaint_group, official_name,remainder_date, official_mobilenum, call_status, remarks, is_processed,updated_agent) "
+	                    + "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,?,?,?)";
+
+	       int rowsAffected1 = jdbcTemplate.update(query1, qaqcid, ccategory, agentId, complaintNumber, complaintDate,personName,
+	               personMobNo, cType, cMode, department, cGroup, officialName,remainderDate, officialMobileNum, callStatus, remarks,
+	               isProcessed,updated_agent);
+	       System.out.println("Rows Inserted in qaqc_call_logs : " + rowsAffected1); 
+
+	       
+		        return rowsAffected + rowsAffected1;
+		        
+		    } else {
+		        String query = "INSERT INTO gcc_1913_qaqc.qaqc_call_logs (qaqc_id, call_category, agent_id, complaint_number, complaint_date,complaint_person_name, "
+		                     + "complaint_mobilenumber, complaint_type, complaint_mode, department, complaint_group, official_name, official_mobilenum, call_status, remarks, is_processed,updated_agent) "
+		                     + "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,?,?)";
+
+		        int rowsAffected = jdbcTemplate.update(query, qaqcid, ccategory, agentId, complaintNumber,complaintDate, personName,
+		                personMobNo, cType, cMode, department, cGroup, officialName, officialMobileNum, callStatus, remarks,
+		                isProcessed,updated_agent);
+		        
+		        System.out.println("Rows Inserted in qaqc_call_logs: " + rowsAffected);
+
+		        return rowsAffected;
+		    }
+		}
+	    
+	    public void updateComplaintDetails(String complaintNumber,int dataId, String action, String remarks,int updated_agent)
+		  { 
+	    	String query = "UPDATE gcc_1913_qaqc.qaqc_upload_data " +
+		  "SET call_status = ?, " + "    remarks = ?,updated_agent=?, " +
+		  "    updated_date = CURRENT_TIMESTAMP, " + "    is_processed = TRUE " + 
+		  "WHERE data_id = ? "  +"  AND complaint_number = ? " +"  AND call_category = 'CLOSED'";
+		  
+		  int rowsUpdated = jdbcTemplate.update(query, action, remarks,updated_agent, dataId,complaintNumber);
+		  
+		  System.out.println("Rows Updated in upload data: " + rowsUpdated); 
+		  }
+	    
+	    public Map<String, Object> getComplaintDetails(int dataId) {
+			String query = "Select * from gcc_1913_qaqc.qaqc_upload_data where data_id = ?";
+			return jdbcTemplate.queryForMap(query, dataId);
+		}
+
+		public Map<String, Object> getErpnameById(Integer agentId) {
+			String query = "Select erp_username from agents_list where agent_id = ?";
+			return jdbcTemplate.queryForMap(query, agentId);
+		}
+
+//		public boolean ChangeStatusInErp(String complaintNumber, String remarks, String action,String Erpname) {
+//			String urlString = "";
+//			
+//			if(remarks.isEmpty()) {
+//				remarks="N/A";
+//			}
+//			
+//			if("COMPLETED".equals(action) || "WRONG_ASSIGN".equals(action)) {
+//				
+//				urlString="https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=UpdateComplaint&ComplaintId="+complaintNumber+"&Message="+remarks+"&UserType=Official&Status=11&erp_username="+Erpname;
+//				System.out.println(urlString);
+//				//urlencode
+//				try {					
+//					
+//					URL url = new URL(urlString);
+//					URLConnection urlcon=url.openConnection();    
+//					InputStream stream=urlcon.getInputStream(); 
+//					 StringBuilder responseBuilder = new StringBuilder();
+//					int i;    
+//					while((i=stream.read())!=-1){    
+//					responseBuilder.append((char) i);
+//					 }  
+//					stream.close();
+//
+//		            // Parse the response
+//		            String response = responseBuilder.toString();
+//		            System.out.println("Raw Response from ERP if Completed: " + response); // Debug: Print the raw response
+//
+//		            // Check ResultStatus in the response
+//		            if (response.contains("\"ResultStatus\": true")) {
+//		            	System.out.println("ResultStatus is true in the response."); // Debug: Positive ResultStatus
+//		                return true;
+//		            }
+//		            else {
+//		                System.out.println("ResultStatus is false or not present in the response."); // Debug: Negative or missing ResultStatus
+//		                return false;
+//		            }
+//				} catch (Exception e) {
+//					e.printStackTrace();
+//					 return false;
+//				}
+//			}
+//			
+//			if("REOPEN".equals(action)) {
+//				urlString="https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=UpdateComplaint&ComplaintId="+complaintNumber+"&Message="+remarks+"&UserType=Official&Status=9&Comp_Image=64baseString&erp_username="+Erpname;
+//				System.out.println(urlString);
+//				try {
+//					URL url = new URL(urlString);
+//					URLConnection urlcon=url.openConnection();    
+//					InputStream stream=urlcon.getInputStream(); 
+//					 StringBuilder responseBuilder = new StringBuilder();
+//					int i;    
+//					while((i=stream.read())!=-1){    
+//					responseBuilder.append((char) i);
+//					}  
+//					stream.close();
+//
+//		            // Parse the response
+//		            String response = responseBuilder.toString();
+//		            System.out.println("Raw Response from ERP if Reopen: " + response);
+//		            
+//		            // Check ResultStatus in the response
+//		            if (response.contains("\"ResultStatus\": true")) {
+//		            	System.out.println("ResultStatus is true in the response."); // Debug: Positive ResultStatus
+//		                return true;
+//		            }
+//		            else {
+//		                System.out.println("ResultStatus is false or not present in the response."); // Debug: Negative or missing ResultStatus
+//		                return false;
+//		            }
+//				} catch (Exception e) {
+//					e.printStackTrace();
+//					 return false;
+//				}
+//			}
+//			return false;
+//						
+//		}
+		
+//		public boolean ChangeStatusInErp(String complaintNumber, String remarks, String action, String Erpname) {
+//		    String urlString = "";
+//
+//		    if (remarks.isEmpty()) {
+//		        remarks = "N/A";
+//		    }
+//
+//		    try {
+//		        // Encode parameters
+//		    	String encodedComplaintNumber = URLEncoder.encode(complaintNumber, StandardCharsets.UTF_8.toString()).replace("+", "%20");
+//				  String encodedRemarks = URLEncoder.encode(remarks, StandardCharsets.UTF_8.toString()).replace("+", "%20");
+//				  String encodedErpname = URLEncoder.encode(Erpname, StandardCharsets.UTF_8.toString()).replace("+", "%20");
+//
+//		        if ("COMPLETED".equals(action) || "WRONG_ASSIGN".equals(action)) {
+//		            urlString = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?"
+//		                    + "serviceId=UpdateComplaint"
+//		                    + "&ComplaintId=" + encodedComplaintNumber
+//		                    + "&Message=" + encodedRemarks
+//		                    + "&UserType=Official"
+//		                    + "&Status=11"
+//		                    + "&erp_username=" + encodedErpname;
+//
+//		            System.out.println(urlString);
+//
+//		            return sendRequest(urlString);
+//		        }
+//
+//		        if ("REOPEN".equals(action)) {
+//		            urlString = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?"
+//		                    + "serviceId=UpdateComplaint"
+//		                    + "&ComplaintId=" + encodedComplaintNumber
+//		                    + "&Message=" + encodedRemarks
+//		                    + "&UserType=Official"
+//		                    + "&Status=9"
+//		                    + "&Comp_Image=64baseString"
+//		                    + "&erp_username=" + encodedErpname;
+//
+//		            System.out.println(urlString);
+//
+//		            return sendRequest(urlString);
+//		        }
+//		    } catch (Exception e) {
+//		        e.printStackTrace();
+//		        return false;
+//		    }
+//
+//		    return false;
+//		}
+		
+		public boolean ChangeStatusInErp(String complaintNumber, String remarks, String action, String Erpname) {
+		    String baseUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?";
+		    String status = "";
+		    
+		    if (remarks.isEmpty()) {
+		        remarks = "N/A";
+		    }
+
+		    try {
+		        // Encode parameters
+		        String encodedComplaintNumber = URLEncoder.encode(complaintNumber, StandardCharsets.UTF_8.toString()).replace("+", "%20");
+		        String encodedRemarks = URLEncoder.encode(remarks, StandardCharsets.UTF_8.toString()).replace("+", "%20");
+		        String encodedErpname = URLEncoder.encode(Erpname, StandardCharsets.UTF_8.toString()).replace("+", "%20");
+
+		        // Determine status based on action
+		        if ("COMPLETED".equals(action) || "WRONG_ASSIGN".equals(action)) {
+		            status = "11";
+		        } else if ("REOPEN".equals(action)) {
+		            status = "9";
+		        } else {
+		            return false; // Invalid action, return false
+		        }
+
+		        // Construct the URL
+		        String urlString = baseUrl
+		                + "serviceId=UpdateComplaint"
+		                + "&ComplaintId=" + encodedComplaintNumber
+		                + "&Message=" + encodedRemarks
+		                + "&UserType=Official"
+		                + "&Status=" + status
+		                + "&Comp_Image="
+		                + "&erp_username=" + encodedErpname;
+
+		        System.out.println(urlString);
+
+		        // Send the request
+		        return sendRequest(urlString);
+
+		    } catch (Exception e) {
+		        e.printStackTrace();
+		        return false;
+		    }
+		}
+
+
+		private boolean sendRequest(String urlString) {
+		    try {
+		        URL url = new URL(urlString);
+		        URLConnection urlcon = url.openConnection();
+		        InputStream stream = urlcon.getInputStream();
+		        StringBuilder responseBuilder = new StringBuilder();
+		        int i;
+		        while ((i = stream.read()) != -1) {
+		            responseBuilder.append((char) i);
+		        }
+		        stream.close();
+
+		        // Parse the response
+		        String response = responseBuilder.toString();
+		        System.out.println("Raw Response: " + response);
+
+		        // Check ResultStatus in the response
+		        if (response.contains("\"ResultStatus\": true")) {
+		            System.out.println("ResultStatus is true in the response.");
+		            return true;
+		        } else {
+		            System.out.println("ResultStatus is false or not present in the response.");
+		            return false;
+		        }
+		    } catch (Exception e) {
+		        e.printStackTrace();
+		        return false;
+		    }
+		}
+		
+		
+		public void saveMobileNumDetails(String complaintNumber, String remarks) {
+	        String query = "insert into officer_mobileno (complaint_number,remarks) values(?,?)";
+	        int rowsUpdated = jdbcTemplate.update(query, complaintNumber, remarks);
+	        System.out.println("Rows Updated: " + rowsUpdated);
+	    }
+
+	    public Map<String,Object> checkComplaintDetail(String complaintNumber) {
+	        String query = "select id,complaint_number from qaqc_followup_call_logs where complaint_number = ?";
+	        try {
+	            return jdbcTemplate.queryForMap(query, complaintNumber);
+	        } catch (Exception e) {
+	            System.out.println("Complaint number not found");
+	            return null;
+	        }
+	    }
+
+	    public void updateFollowupCallLogs(String complaintNumber, String action, String remarks, int followupid) {
+	    	System.out.println(complaintNumber+action+remarks);
+	    	
+	        String query = "update gcc_1913_qaqc.qaqc_followup_call_logs set call_status = ?,remarks = ? where complaint_number= ? and id =?";
+	        
+	        int rowsUpdated = jdbcTemplate.update(query, action, remarks, complaintNumber, followupid);
+	        System.out.println("Rows Updated in followup: " + rowsUpdated);
+
+	    }
+	    
+	    public List<Map<String, Object>> getSubmitDetails(int userId) {
+	    	
+	    	 String query = "SELECT complaint_number, complaint_date,complaint_person_name, complaint_mobilenumber, " +
+                    "complaint_type, call_status, remarks " +
+                    "FROM gcc_1913_qaqc.qaqc_upload_data " +
+                    "WHERE agent_id = ? AND call_category = 'CLOSED' AND is_processed = '1'";
+	    	 
+			return jdbcTemplate.queryForList(query,userId);
+			  
+		}
+
+		public void updateComplaintHistoryDetails(String complaintNumber, int dataId, String action, String remarks,int updated_agent,
+				String remainderDate) {
+		
+			String query = "UPDATE gcc_1913_qaqc.qaqc_upload_data_history \r\n"
+					+ "SET call_status = ?, remarks = ?, updated_date = CURRENT_TIMESTAMP, remainder_date = ?,updated_agent=?\r\n"
+					+ "WHERE data_id = ?   AND complaint_number = ?  AND call_category = 'CLOSED'";
+					  
+					  int rowsUpdated = jdbcTemplate.update(query, action, remarks, remainderDate,updated_agent, dataId, complaintNumber);
+					  
+					  System.out.println("Rows Updated in upload history: " + rowsUpdated); 
+			
+		}
+	    
+}
+
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcService.java
new file mode 100644
index 0000000..62c6dd5
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcService.java
@@ -0,0 +1,126 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.time.LocalDate;
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List; 
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.namedparam.NamedParameterJdbcTemplate;
+import org.springframework.stereotype.Service;
+
+@Service
+public class QaqcService {
+	
+
+	    private JdbcTemplate jdbcTemplate;
+	 
+		 @Autowired
+		 public void setDataSource(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+			 this.jdbcTemplate = new JdbcTemplate(dataSource);
+		 }
+	 
+
+	    
+	    public List<Map<String, Object>> getFollowUpDetailsByStatus(String callStatus, LocalDate fromDate, LocalDate toDate) {
+	        // Start the SQL query
+	        String sql = "SELECT " +
+	                     "f.id, " +
+	                     "f.qaqc_id, " +
+	                     "f.call_category, " +
+	                     "f.complaint_number, " +
+	                     "f.agent_id, " +
+	                     "f.complaint_person_name, " +
+	                     "f.complaint_mobilenumber, " +
+	                     "f.complaint_type, " +
+	                     "f.complaint_mode, " +
+	                     "f.department, " +
+	                     "f.complaint_group, " +
+	                     "f.official_name, " +
+	                     "f.official_mobilenum, " +
+	                     "f.call_status, " +
+	                     "f.remainder_date, " +
+	                     "f.remarks, " +
+	                     "f.created_date, " +
+	                     "r.taskid " +
+	                     "FROM qaqc_followup_call_logs f " +
+	                     "LEFT JOIN qaqc_request r ON f.qaqc_id = r.qaqc_id ";
+
+	        // List to hold the query parameters
+	        List<Object> params = new ArrayList<>();
+	        boolean hasCondition = false;
+
+	        // Filter by callStatus if provided
+	        if (callStatus != null && !callStatus.isEmpty()) {
+	            sql += " WHERE f.call_status = ?";
+	            params.add(callStatus);
+	            hasCondition = true;
+	        }
+
+	        // Filter by date range (fromDate to toDate) if both are provided
+	        if (fromDate != null && toDate != null) {
+	            if (hasCondition) {
+	                sql += " AND f.remainder_date BETWEEN ? AND ?";
+	            } else {
+	                sql += " WHERE f.remainder_date BETWEEN ? AND ?";
+	                hasCondition = true;
+	            }
+	            params.add(fromDate);
+	            params.add(toDate);
+	        }
+	        // If only fromDate is provided
+	        else if (fromDate != null) {
+	            if (hasCondition) {
+	                sql += " AND f.remainder_date >= ?";
+	            } else {
+	                sql += " WHERE f.remainder_date >= ?";
+	                hasCondition = true;
+	            }
+	            params.add(fromDate);
+	        }
+	        // If only toDate is provided (include records with remainder_date greater than toDate)
+	        else if (toDate != null) {
+	            if (hasCondition) {
+	                sql += " AND (f.remainder_date <= ? OR f.remainder_date > ?)";
+	            } else {
+	                sql += " WHERE (f.remainder_date <= ? OR f.remainder_date > ?)";
+	                hasCondition = true;
+	            }
+	            params.add(toDate);  // <= toDate condition
+	            params.add(toDate);  // > toDate condition
+	        }
+
+	        // Final debugging: print the query and parameters
+	        System.out.println("Final SQL Query: " + sql);
+	        System.out.println("Query Parameters: " + params);
+
+	        // Execute the query with the dynamically added parameters
+	        return jdbcTemplate.queryForList(sql, params.toArray());
+	    }
+
+
+
+	    public Map<String, Long> countFollowUpsByDateAndStatus(LocalDate today, String followupStatus) {
+	    	String sqlNotClosed = "SELECT COUNT(*) FROM qaqc_followup_call_logs " +
+                    "WHERE call_status = ? AND DATE(remainder_date) = ? AND call_category NOT IN ('CLOSED')";
+
+			String sqlClosed = "SELECT COUNT(*) FROM qaqc_followup_call_logs " +
+			                 "WHERE call_status = ? AND DATE(remainder_date) = ? AND call_category IN ('CLOSED')";
+			
+			long countNotClosed = jdbcTemplate.queryForObject(sqlNotClosed, new Object[]{followupStatus, today}, Long.class);
+			long countClosed = jdbcTemplate.queryForObject(sqlClosed, new Object[]{followupStatus, today}, Long.class);
+			
+			Map<String, Long> result = new HashMap<>();
+			result.put("officialfollowup", countNotClosed);
+			result.put("publicfollowup", countClosed);
+			
+			return result;
+	    }
+	    
+	    
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcTaskListService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcTaskListService.java
new file mode 100644
index 0000000..e4440d2
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcTaskListService.java
@@ -0,0 +1,292 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.util.ArrayList;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+import javax.transaction.Transactional;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+
+@Service
+public class QaqcTaskListService {
+	
+	@Autowired
+    private JdbcTemplate jdbcTemplate;
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+// old overalltaskcount wise method
+	
+//	 public List<Map<String, Object>>  getComplaintAndCallStatusCounts(String startDate, String endDate) {
+//	        String sql = "SELECT " +
+//	            "t1.total_tasks, " +
+//	            "t2.total_calls, " +
+//	            "t3.completed_calls, " +
+//	            "t2.total_calls - t3.completed_calls AS pending_calls " +
+//	            "FROM " +
+//	            "( " +
+//	            "    SELECT " +
+//	            "        COUNT(qaqc_id) AS total_tasks " +
+//	            "    FROM " +
+//	            "       qaqc_request " +
+//	            "    WHERE " +
+//	            "        (? IS NULL OR created_date BETWEEN ? AND ?) " +
+//	            ") AS t1, " +
+//	            "( " +
+//	            "    SELECT " +
+//	            "        SUM(total_data) AS total_calls " +
+//	            "    FROM " +
+//	            "       qaqc_request " +
+//	            "    WHERE " +
+//	            "        (? IS NULL OR created_date BETWEEN ? AND ?) " +
+//	            ") AS t2, " +
+//	            "( " +
+//	            "    SELECT " +
+//	            "        SUM(qr.total_data) AS total_data, " +
+//	            "        COUNT(CASE WHEN qcl.qaqc_id IS NOT NULL THEN qcl.qaqc_id END) AS completed_calls " +
+//	            "    FROM " +
+//	            "        qaqc_request qr " +
+//	            "    LEFT JOIN " +
+//	            "       qaqc_call_logs qcl " +
+//	            "    ON " +
+//	            "        qr.qaqc_id = qcl.qaqc_id " +
+//	            "    WHERE " +
+//	            "        (? IS NULL OR qcl.created_date BETWEEN ? AND ?) " +
+//	            ") AS t3;";
+//
+//	        // Prepare the parameters for the query
+//	        Object[] params = new Object[] {
+//	            startDate, startDate, endDate,
+//	            startDate, startDate, endDate,
+//	            startDate, startDate, endDate
+//	        };
+//
+//	        // Execute the query and return the results as a List of Maps
+//	        return jdbcTemplate.queryForList(sql, params);
+//	    }
+	 
+	 
+	 
+	 //updated overalltaskcount method
+     public List<Map<String, Object>> getComplaintAndCallStatusCounts(String startDate, String endDate) {
+	    // Start constructing the SQL query dynamically
+	    StringBuilder sql = new StringBuilder();
+	    sql.append("SELECT ")
+	       .append("t1.total_tasks, ")
+	       .append("t2.total_calls, ")
+	       .append("t3.completed_calls, ")
+	       .append("t2.total_calls - t3.completed_calls AS pending_calls, ")
+	       .append("t4.no_of_agents ")
+	       .append("FROM ")
+	       .append("( ")
+	       .append("    SELECT ")
+	       .append("        COUNT(qaqc_id) AS total_tasks ")
+	       .append("    FROM ")
+	       .append("        qaqc_request qr ");
+
+	    // Adding dynamic WHERE conditions for date range if provided
+	    if (startDate != null && endDate != null) {
+	        sql.append("WHERE DATE(qr.created_date) >= ? AND DATE(qr.created_date) <= ? ");
+	    }
+
+	    sql.append(") AS t1, ")
+	       .append("( ")
+	       .append("    SELECT ")
+	       .append("        SUM(aa.data_count) AS total_calls ")
+	       .append("    FROM ")
+	       .append("        agent_assigned aa ")
+	       .append("     INNER JOIN ")
+	       .append("        qaqc_request qr ")
+	       .append("     ON ")
+	       .append("        aa.qaqc_id = qr.qaqc_id ");
+
+	    if (startDate != null && endDate != null) {
+	        sql.append("WHERE DATE(qr.created_date) >= ? AND DATE(qr.created_date) <= ? ");
+	    }
+
+	    sql.append(") AS t2, ")
+	       .append("( ")
+	       .append("    SELECT ")
+	       .append("        SUM(qr.total_data) AS total_data, ")
+	       .append("        COUNT(CASE WHEN qcl.qaqc_id IS NOT NULL THEN qcl.qaqc_id END) AS completed_calls ")
+	       .append("    FROM ")
+	       .append("       qaqc_request qr ")
+	       .append("    LEFT JOIN ")
+	       .append("        qaqc_call_logs qcl ")
+	       .append("    ON ")
+	       .append("        qr.qaqc_id = qcl.qaqc_id ");
+
+	    if (startDate != null && endDate != null) {
+	        sql.append("WHERE DATE(qcl.created_date) >= ? AND DATE(qcl.created_date) <= ? ");
+	    }
+
+	    sql.append(") AS t3, ")
+	       .append("( ")
+	       .append("    SELECT ")
+	       .append("        COUNT(DISTINCT aa.agent_id) AS no_of_agents ")
+	       .append("    FROM ")
+	       .append("        agent_assigned aa ");
+
+	    if (startDate != null && endDate != null) {
+	        sql.append("WHERE DATE(aa.created_date) >= ? AND DATE(aa.created_date) <= ? ");
+	    }
+
+	    sql.append(") AS t4;");
+
+	    // Prepare the parameters dynamically based on the presence of the date range
+	    List<Object> params = new ArrayList<>();
+	    if (startDate != null && endDate != null) {
+	        params.add(startDate);
+	        params.add(endDate);
+	        params.add(startDate);
+	        params.add(endDate);
+	        params.add(startDate);
+	        params.add(endDate);
+	        params.add(startDate);
+	        params.add(endDate);
+	    }
+
+	    // Execute the query and return the results as a List of Maps
+	    return jdbcTemplate.queryForList(sql.toString(), params.toArray());
+	}
+
+
+	
+
+	//old taskwise querymethod
+	
+//	public List<Map<String, Object>> getTaskwiseData(String startDate, String endDate) {
+//	    // Base query
+//	    StringBuilder query = new StringBuilder(
+//	        "SELECT " +
+//	        "    qr.taskid, " +
+//	        "    MAX(qr.total_data) AS Assigned, " +
+//	        "    MAX(qr.created_date) AS TaskCreatedDate, " +
+//	        "    COUNT(CASE WHEN acl.qaqc_id IS NOT NULL THEN qr.qaqc_id END) AS TotalCompleted, " +
+//	        "     MAX(qr.total_data) - COUNT(CASE WHEN acl.qaqc_id IS NOT NULL THEN qr.qaqc_id END) AS Pending, " + // Pending calculated as Assigned - TotalCompleted
+//	        "    COUNT(CASE WHEN acl.call_status = 'COMPLETED' THEN 1 END) AS Completed, " +
+//	        "    COUNT(CASE WHEN acl.call_status = 'REOPENED' THEN 1 END) AS Reopened, " +
+//	        "    COUNT(CASE WHEN acl.call_status = 'FOLLOWUP' THEN 1 END) AS Followup " +
+//	        "FROM qaqc_request qr " +
+//	        "LEFT JOIN qaqc_call_logs acl " +
+//	        "ON qr.qaqc_id = acl.qaqc_id "
+//	    );
+//
+//	    // Adding dynamic WHERE conditions for date range
+//	    if (startDate != null && endDate != null) {
+//	        query.append("WHERE qr.created_date BETWEEN ? AND ? ");
+//	    }
+//
+//	    // Grouping by taskid
+//	    query.append("GROUP BY qr.taskid");
+//
+//	    // Query Execution
+//	    if (startDate != null && endDate != null) {
+//	        return jdbcTemplate.queryForList(query.toString(), startDate, endDate);
+//	    } else {
+//	        return jdbcTemplate.queryForList(query.toString());
+//	    }
+//	}
+
+	 
+	 //updated taskwisedata query method
+	 
+     public List<Map<String, Object>> getTaskwiseData(String startDate, String endDate) {
+    	    // Base query with subqueries for Assigned and Pending calculations
+    	    StringBuilder query = new StringBuilder(
+    	        "SELECT " +
+    	        "    qr.qaqc_id, " +
+    	        "    qr.taskid, " +
+    	        "    qr.call_category, " +
+    	        "    qr.description, " +
+    	        "    (" +
+    	        "        SELECT SUM(aa.data_count) " +
+    	        "        FROM agent_assigned aa " +
+    	        "        WHERE aa.qaqc_id = qr.qaqc_id" +
+    	        "    ) AS Assigned, " +
+    	        "    MAX(DATE(qr.created_date)) AS TaskCreatedDate, " +
+    	        "    COUNT(CASE WHEN acl.qaqc_id IS NOT NULL THEN qr.qaqc_id END) AS TotalCompleted, " +
+    	        "    (" +
+    	        "        SELECT SUM(aa.data_count) " +
+    	        "        FROM agent_assigned aa " +
+    	        "        WHERE aa.qaqc_id = qr.qaqc_id" +
+    	        "    ) - COUNT(CASE WHEN acl.qaqc_id IS NOT NULL THEN qr.qaqc_id END) AS Pending, " +
+    	        "    COUNT(CASE WHEN acl.call_status IN ('COMPLETED', 'FOLLOWUP_COMPLETED') THEN 1 END) AS Completed, " +
+    	        "    COUNT(CASE WHEN acl.call_status = 'REOPEN' THEN 1 END) AS Reopened, " +
+    	        "    COUNT(CASE WHEN acl.call_status = 'FOLLOWUP' THEN 1 END) AS Followup, " +
+    	        "    COUNT(CASE WHEN acl.call_status NOT IN ('COMPLETED', 'FOLLOWUP_COMPLETED', 'REOPEN', 'FOLLOWUP') THEN 1 ELSE NULL END) AS Others " +
+    	        "FROM qaqc_request qr " +
+    	        "LEFT JOIN qaqc_call_logs acl " +
+    	        "ON qr.qaqc_id = acl.qaqc_id "
+    	    );
+
+    	    // Adding dynamic WHERE conditions for date range if provided
+    	    if (startDate != null && endDate != null) {
+    	        query.append("WHERE DATE(qr.created_date) >= ? AND DATE(qr.created_date) <= ? ");
+    	    }
+
+    	    // Grouping by taskid and qaqc_id to calculate Assigned and Pending
+    	    query.append("GROUP BY qr.taskid, qr.qaqc_id ");
+
+    	    // Adding ORDER BY clause for descending order of created_date
+    	    query.append("ORDER BY TaskCreatedDate DESC, qr.qaqc_id DESC");
+
+    	    // Query execution with parameters for start and end dates if available
+    	    if (startDate != null && endDate != null) {
+    	        return jdbcTemplate.queryForList(query.toString(), startDate, endDate);
+    	    } else {
+    	        return jdbcTemplate.queryForList(query.toString());
+    	    }
+    	}
+
+
+
+	
+
+     public List<Map<String, Object>> getAgentwiseData(String qaqc_id) {
+         
+         String query= "WITH LatestCallLogs AS (\r\n"
+         		+ "    SELECT cl.qaqc_id,\r\n"
+         		+ "           cl.agent_id,\r\n"
+         		+ "           cl.complaint_number,\r\n"
+         		+ "           cl.call_status,\r\n"
+         		+ "           cl.created_date,\r\n"
+         		+ "           ROW_NUMBER() OVER (PARTITION BY cl.qaqc_id, cl.agent_id, cl.complaint_number ORDER BY cl.created_date DESC) AS row_num\r\n"
+         		+ "    FROM qaqc_call_logs cl\r\n"
+         		+ ")\r\n"
+         		+ "SELECT DISTINCT al.agent_id,\r\n"
+         		+ "                al.agent_name AS agentName,\r\n"
+         		+ "                qr.taskid as taskId,\r\n"
+         		+ "                qr.fromdate as fromdate,qr.todate as todate,qr.description as description,qr.call_category as call_category,\r\n"
+         		+ "                qr.complaint_group as complaint_group,qr.complaint_type as complaint_type,qr.complaint_mode as complaint_mode,qr.complaint_zone as complaint_zone,\r\n"
+         		+ "                DATE(qr.created_date) AS TaskCreatedDate,\r\n"
+         		+ "                aa.data_count AS assigned,\r\n"
+         		+ "                COUNT(lcl.qaqc_id) AS callstaken,\r\n"
+         		+ "                (aa.data_count - COUNT(lcl.qaqc_id)) AS pending,\r\n"
+         		+ "                ROUND((COUNT(lcl.qaqc_id) / aa.data_count) * 100, 2) AS percentage,\r\n"
+         		+ "                COUNT(CASE WHEN lcl.call_status IN ('COMPLETED', 'FOLLOWUP_COMPLETED') THEN 1 END) AS Completed,\r\n"
+         		+ "                COUNT(CASE WHEN lcl.call_status = 'REOPEN' THEN 1 END) AS Reopened,\r\n"
+         		+ "                COUNT(CASE WHEN lcl.call_status = 'FOLLOWUP' THEN 1 END) AS Followup,\r\n"
+         		+ "                COUNT(CASE WHEN lcl.call_status NOT IN ('COMPLETED', 'FOLLOWUP_COMPLETED', 'REOPEN', 'FOLLOWUP') THEN 1 END) AS Others\r\n"
+         		+ "FROM qaqc_request qr\r\n"
+         		+ "JOIN agent_assigned aa ON aa.qaqc_id = qr.qaqc_id\r\n"
+         		+ "JOIN agents_list al ON al.agent_id = aa.agent_id\r\n"
+         		+ "LEFT JOIN LatestCallLogs lcl ON qr.qaqc_id = lcl.qaqc_id AND al.agent_id = lcl.agent_id AND lcl.row_num = 1\r\n"
+         		+ "WHERE qr.qaqc_id = ?\r\n"
+         		+ "GROUP BY al.agent_id, al.agent_name, aa.data_count";
+     
+      return jdbcTemplate.queryForList(query, qaqc_id);
+  }
+
+	
+}
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/SocialMediaService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/SocialMediaService.java
new file mode 100644
index 0000000..3cc3066
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/SocialMediaService.java
@@ -0,0 +1,103 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.time.LocalDateTime;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@Service
+@Transactional
+public class SocialMediaService {
+	
+	 @Autowired
+	 private JdbcTemplate jdbcTemplate;
+	 
+	 @Autowired
+	 public void setDataSource(@Qualifier("mysql1913QAQCDataSource") DataSource dataSource) {
+		 this.jdbcTemplate = new JdbcTemplate(dataSource);
+	 }
+	 
+	 @Transactional
+	    public int uploadComplaintDetailsInLogs(Map<String, Object> details,String action,String remarks,int updated_agent) {
+	    	System.out.println("Complaint Details: " + details);
+		    // Extract other field values from complaintDetails
+		    String complaintNumber = details.get("complaintid").toString();
+		    String complaintDate = details.get("complaintdate").toString();
+		    String personName = details.get("complainantName").toString();
+		    String personMobNo = details.get("mobileNumber").toString();
+		    String cType = details.get("complaintType").toString();
+		    String cMode = details.get("compmode").toString();
+		    String department = details.get("deptname").toString();
+		    String officialName = details.get("Officialname").toString();
+		    String officialMobileNum = details.get("OfficialMobile").toString();
+		    String callStatus = action;
+		    String remarksfield = remarks;
+		    String zone = details.get("Zone").toString();
+		    int updated_by=updated_agent;
+		    
+		    LocalDateTime currentDate = LocalDateTime.now();
+		    
+		        String query = "INSERT INTO gcc_1913_qaqc.social_media_completed (complaint_number,zone,complaint_date, complaint_person_name,remarks, "
+		                     + "complaint_mobilenumber, complaint_type, complaint_mode, department, official_name,official_mobilenum, call_status,created_date,updated_by) "
+		                     + "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?,?,?)";
+
+		        int rowsAffected = jdbcTemplate.update(query, complaintNumber,zone, complaintDate,personName,remarksfield,
+		                personMobNo, cType, cMode, department, officialName, officialMobileNum,callStatus,
+		                 currentDate,updated_by);
+		        System.out.println("Rows Inserted in table : " + rowsAffected); 
+		        	       
+		        return rowsAffected;
+		        		    
+		}
+
+	 public List<Map<String, Object>> getdetails(String formattedFromDate, String formattedToDate, String status, String zone) {
+		    StringBuilder query = new StringBuilder("SELECT * FROM gcc_1913_qaqc.social_media_completed WHERE DATE(created_date) BETWEEN ? AND ? ");
+		    List<Object> params = new ArrayList<>();
+		    params.add(formattedFromDate);
+		    params.add(formattedToDate);
+
+		    if (zone != null && !zone.isEmpty()) {
+		        query.append(" AND zone = ?");
+		        params.add(zone);
+		    }
+
+		    if (status != null && !status.equals("ALL")) {
+		        query.append(" AND call_status = ?");
+		        params.add(status);
+		    }
+
+		    // Log the query and parameters for debugging
+		    System.out.println("Executing query: " + query.toString());
+		    System.out.println("With parameters: " + params);
+
+		    // Execute the query
+		    List<Map<String, Object>> results = jdbcTemplate.queryForList(query.toString(), params.toArray());
+
+		    // Log the results for debugging
+		    System.out.println("Query results: " + results);
+
+		    return results.isEmpty() ? null : results;
+		}
+
+	public String getErpusernamebyId(String userId) {
+		
+		String query="SELECT erp_username FROM gcc_1913_qaqc.agents_list\r\n"
+				+ "where calling_type='SOCIALMEDIA' and agent_id=?";
+		
+		System.out.println("query====="+query);
+		String erpUsername = jdbcTemplate.queryForObject(query,new Object[]{userId},String.class);
+		
+	     return erpUsername;
+	}
+
+
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/StatusCountService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/StatusCountService.java
new file mode 100644
index 0000000..bf120f5
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/StatusCountService.java
@@ -0,0 +1,239 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.stereotype.Service;
+import org.springframework.web.client.RestTemplate;
+
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+
+@Service
+public class StatusCountService {
+
+    private RestTemplate restTemplate;
+    private ObjectMapper objectMapper;
+    @Autowired
+    private AppConfig appconfig;
+
+    public StatusCountService(RestTemplate restTemplate, ObjectMapper objectMapper) {
+        this.restTemplate = restTemplate;
+        this.objectMapper = objectMapper;
+    }
+
+    public Map<String, String> fetchComplaintCounts(String fromDate, String toDate, String compType, String zoneName, String compMode, String compGroup) {
+    	//https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?serviceId=common_api&jsonResp=Yes&subService=dashboardAbs&fromDate=&toDate=&compType=&zoneName=&compMode=&compGroup=
+    	String apiUrl;
+        if ("SOCIAL MEDIA".equalsIgnoreCase(compMode)) {
+    	
+         apiUrl = appconfig.qaqcurl+"serviceId=common_api&jsonResp=Yes"
+                + "&subService=dashboardAbs"
+                + "&fromDate=" + fromDate
+                + "&toDate=" + toDate;                
+        } 
+        
+        else {
+        	apiUrl = appconfig.qaqcurl+"serviceId=common_api&jsonResp=Yes"
+                    + "&subService=dashboardAbs"
+                    + "&fromDate=" + fromDate
+                    + "&toDate=" + toDate
+                    +"&excludeMode=7";
+                    
+        }
+        
+     // Append parameters based on their availability
+        if (!compType.isEmpty()) {
+            apiUrl += "&compType=" + compType;
+        }
+
+        if (!zoneName.isEmpty()) {
+            apiUrl += "&zoneName=" + zoneName;
+        }
+
+        if (!compMode.isEmpty()) {
+            apiUrl += "&compMode=" + compMode;
+        }
+
+        if (!compGroup.isEmpty()) {
+            apiUrl += "&compGroup=" + compGroup;
+        }
+
+        Map<String, String> counts = new HashMap<>();
+        System.out.println("url: " + apiUrl);
+
+        try {
+            // Get the raw response
+            String response = restTemplate.getForObject(apiUrl, String.class);
+            System.out.println("API Response: " + response);  // Log the response for debugging
+
+            JsonNode jsonResponse = objectMapper.readTree(response);
+
+            // Check if "ListResult" exists and is an array
+            JsonNode listResult = jsonResponse.path("ListResult");
+            if (!listResult.isArray() || listResult.isEmpty()) {
+                System.out.println("ListResult is null or empty");
+                return counts; // Return empty map or default values
+            }
+
+            JsonNode resultNode = listResult.get(0);
+            if (resultNode != null && !resultNode.isNull()) {
+                counts.put("Total Complaints", resultNode.path("RECEIVED").asText(""));
+                counts.put("In Progress", resultNode.path("PENDING").asText(""));
+                counts.put("Redressed", resultNode.path("REDRESSED").asText(""));
+                counts.put("Reopened", resultNode.path("REOPEN").asText(""));
+                counts.put("Closed", resultNode.path("CLOSED").asText(""));
+            } else {
+                System.out.println("ResultNode is null");
+            }
+
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+
+        return counts;
+
+    }
+    
+
+    public List<String> fetchComplaintTypes(String compGroup) {
+        // Construct the API URL with the compGroup parameter
+        String apiUrl = appconfig.qaqcurl + 
+                        "serviceId=common_api&jsonResp=Yes&subService=compTypelist&compGroup=" + compGroup;
+        List<String> complaintTypes = new ArrayList<>();
+
+        try {
+            // Call the external API
+            ResponseEntity<String> response = restTemplate.getForEntity(apiUrl, String.class);
+
+            if (response.getStatusCode() == HttpStatus.OK) {
+                // Parse the response JSON
+                ObjectMapper objectMapper = new ObjectMapper();
+                JsonNode rootNode = objectMapper.readTree(response.getBody());
+                
+                // Navigate to "ListResult" and extract "COMPLAINTTYPENAME"
+                JsonNode listResultNode = rootNode.path("ListResult");
+                if (listResultNode.isArray()) {
+                    for (JsonNode item : listResultNode) {
+                        String complaintTypeName = item.path("COMPLAINTTYPENAME").asText().trim();
+                        complaintTypes.add(complaintTypeName);
+                    }
+                }
+            }
+        } catch (Exception e) {
+            System.err.println("Error fetching complaint types for compGroup " + compGroup + ": " + e.getMessage());
+        }
+
+        return complaintTypes;
+    }
+
+    
+    
+    
+    
+    //for complaintgroup api
+    public List<String> fetchComplaintGroup() {
+        String apiUrl = appconfig.qaqcurl+"serviceId=common_api&jsonResp=Yes&subService=compGrouplist";
+        List<String> complaintGroup = new ArrayList();
+
+        try {
+            // Call the external API
+            ResponseEntity<String> response = restTemplate.getForEntity(apiUrl, String.class);
+
+            if (response.getStatusCode() == HttpStatus.OK) {
+                // Parse the response JSON
+                ObjectMapper objectMapper = new ObjectMapper();
+                JsonNode rootNode = objectMapper.readTree(response.getBody());
+                
+                // Navigate to "ListResult" and extract "COMPLAINTTYPENAME"
+                JsonNode listResultNode = rootNode.path("ListResult");
+                if (listResultNode.isArray()) {
+                    for (JsonNode item : listResultNode) {
+                        String complaintTypeName = item.path("COMPLAINTGROUPNAME").asText().trim();
+                        complaintGroup.add(complaintTypeName);
+                    }
+                }
+            }
+        } catch (Exception e) {
+            System.err.println("Error fetching complaint types: " + e.getMessage());
+        }
+
+        return complaintGroup;
+    }
+    
+    
+    
+    //for modes api
+    public List<String> fetchModes() {
+        String apiUrl = appconfig.qaqcurl+"serviceId=common_api&jsonResp=Yes&subService=compModelist";
+        List<String> modes = new ArrayList();
+
+        try {
+            // Call the external API
+            ResponseEntity<String> response = restTemplate.getForEntity(apiUrl, String.class);
+
+            if (response.getStatusCode() == HttpStatus.OK) {
+                // Parse the response JSON
+                ObjectMapper objectMapper = new ObjectMapper();
+                JsonNode rootNode = objectMapper.readTree(response.getBody());
+                
+                // Navigate to "ListResult" and extract "COMPLAINTTYPENAME"
+                JsonNode listResultNode = rootNode.path("ListResult");
+                if (listResultNode.isArray()) {
+                    for (JsonNode item : listResultNode) {
+                        String complaintModeName = item.path("COMP_MODE").asText().trim();
+                        modes.add(complaintModeName);
+                    }
+                }
+            }
+        } catch (Exception e) {
+            System.err.println("Error fetching complaint types: " + e.getMessage());
+        }
+
+        return modes;
+    }
+    
+    
+    // for zones api
+    public List<String> fetchZones() {
+        String apiUrl = appconfig.qaqcurl+"serviceId=common_api&jsonResp=Yes&subService=zoneNamelist";
+        List<String> zones = new ArrayList();
+
+        try {
+            // Call the external API
+            ResponseEntity<String> response = restTemplate.getForEntity(apiUrl, String.class);
+
+            if (response.getStatusCode() == HttpStatus.OK) {
+                // Parse the response JSON
+                ObjectMapper objectMapper = new ObjectMapper();
+                JsonNode rootNode = objectMapper.readTree(response.getBody());
+                
+                // Navigate to "ListResult" and extract "COMPLAINTTYPENAME"
+                JsonNode listResultNode = rootNode.path("ListResult");
+                if (listResultNode.isArray()) {
+                    for (JsonNode item : listResultNode) {
+                        String complaintzone = item.path("NAME").asText().trim();
+                        zones.add(complaintzone);
+                    }
+                }
+            }
+        } catch (Exception e) {
+            System.err.println("Error fetching complaint types: " + e.getMessage());
+        }
+
+        return zones;
+    }
+    
+    
+    
+
+}
+
+
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/WhatsappqaqcMsgService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/WhatsappqaqcMsgService.java
new file mode 100644
index 0000000..4ca214d
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/WhatsappqaqcMsgService.java
@@ -0,0 +1,48 @@
+package in.gov.chennaicorporation.gccoffice.callcenterqaqc.service;
+
+import java.net.HttpURLConnection;
+import java.net.URL;
+
+import org.springframework.stereotype.Service;
+import org.springframework.web.client.RestTemplate;
+
+@Service
+public class WhatsappqaqcMsgService {
+	
+    public String sendMsg(String msgUrl, String tamilmsgUrl) {
+        StringBuilder response = new StringBuilder();
+
+    
+        response.append("English Message Response: ").append(sendWhatsAppMessage(msgUrl)).append("\n");
+        
+
+        response.append("Tamil Message Response: ").append(sendWhatsAppMessage(tamilmsgUrl));
+
+        return response.toString();
+    }
+
+    private String sendWhatsAppMessage(String urlString) {
+        String response = "";
+        try {
+            URL url = new URL(urlString);
+            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
+            connection.setRequestMethod("GET");
+
+            int responseCode = connection.getResponseCode();
+            response = String.valueOf(responseCode);
+            System.out.println("Response Code for URL: " + urlString + " is " + responseCode);
+
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return response;
+    }
+
+
+   
+    public String sendSMS(String SMS_Url) {
+        RestTemplate restTemplate = new RestTemplate();
+        String response =restTemplate.getForObject(SMS_Url,String.class);
+        return response;
+    }
+	}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/.DS_Store b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/.DS_Store
new file mode 100644
index 0000000..09aadd7
Binary files /dev/null and b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/.DS_Store differ
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/ApiController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/ApiController.java
new file mode 100644
index 0000000..4f816bc
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/ApiController.java
@@ -0,0 +1,111 @@
+package in.gov.chennaicorporation.gccoffice.cdwastecollectorregistrations.controller;
+
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.core.env.Environment;
+
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.client.RestTemplate;
+import org.springframework.web.multipart.MultipartFile;
+
+import in.gov.chennaicorporation.gccoffice.cdwastecollectorregistrations.service.RegistrationService;
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+@RestController("cdapiController")
+@RequestMapping("/gcc/api/registration")
+public class ApiController {
+	
+	private final RestTemplate restTemplate;
+	private final AppConfig appConfig;
+	
+	@Autowired  
+    public ApiController(RestTemplate restTemplate, AppConfig appConfig) {
+        this.restTemplate = restTemplate;
+        this.appConfig = appConfig;
+    }
+
+    @Autowired
+    private Environment environment;
+    
+    @GetMapping("/pending")
+	 public String getUserDetails(){
+		 String apiUrl = appConfig.cdwastecollectors + "/volunteer/wastecollectors/api/getuserdetails";
+		 ResponseEntity<String> responseEntity = restTemplate.getForEntity(apiUrl, String.class);
+		 return responseEntity.getBody();		 
+	 }
+    
+    @GetMapping("/pendingbyid")
+	 public String getUserDetailsById(@RequestParam("registerId") Long registerId){
+		 String apiUrl = appConfig.cdwastecollectors + "/volunteer/wastecollectors/api/getuserbyid"+"?registerId="+ registerId;
+		 ResponseEntity<String> responseEntity = restTemplate.getForEntity(apiUrl, String.class);
+		 return responseEntity.getBody();		 
+	 }
+    
+    
+//    @PostMapping("/acceptbyid")
+//    public String acceptRegistration(@RequestParam("registerId") Long registerId) {
+//        // Your logic to accept the registration
+//    	 String apiUrl = appConfig.cdwastecollectors +"/volunteer/wastecollector/api/accept"+"?registerId="+ registerId;
+//    	 ResponseEntity<String> responseEntity = restTemplate.getForEntity(apiUrl, String.class);
+//    	 return responseEntity.getBody();	
+//    }
+
+    @PostMapping("/acceptbyid")
+    public ResponseEntity<String> acceptRegistration(@RequestParam("registerId") Long registerId) {
+        String apiUrl = appConfig.cdwastecollectors + "/volunteer/wastecollectors/api/accept?registerId=" + registerId;
+        ResponseEntity<String> responseEntity = restTemplate.postForEntity(apiUrl, null, String.class);
+        return ResponseEntity.ok("Registration Accepted for ID: " + registerId);
+    }
+
+
+    
+    @PostMapping("/rejectbyid")
+    public ResponseEntity<String> rejectRegistration(
+        @RequestParam("registerId") Long registerId, 
+        @RequestParam("reason") String reason) {
+        
+        String apiUrl = appConfig.cdwastecollectors + "/volunteer/wastecollectors/api/reject?registerId=" + registerId + "&reason=" + reason;
+        ResponseEntity<String> responseEntity = restTemplate.postForEntity(apiUrl, null, String.class);
+        return ResponseEntity.ok("Registration Rejected for ID: " + registerId);
+    }
+
+    @GetMapping("/approvallist")
+	 public String getApprovalDetails(){
+		 String apiUrl = appConfig.cdwastecollectors + "/volunteer/wastecollectors/api/approvedlist";
+		 ResponseEntity<String> responseEntity = restTemplate.getForEntity(apiUrl, String.class);
+		 return responseEntity.getBody();		 
+	 }
+    
+    @GetMapping("/rejectedlist")
+	 public String getRejectedDetails(){
+		 String apiUrl = appConfig.cdwastecollectors + "/volunteer/wastecollectors/api/rejectedlist";
+		 ResponseEntity<String> responseEntity = restTemplate.getForEntity(apiUrl, String.class);
+		 return responseEntity.getBody();		 
+	 }
+
+    
+}
+
+
+
+
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController.java
new file mode 100644
index 0000000..79e0c6a
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController.java
@@ -0,0 +1,142 @@
+package in.gov.chennaicorporation.gccoffice.cdwastecollectorregistrations.controller;
+
+import java.util.Collections;
+import java.util.List;
+
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.core.ParameterizedTypeReference;
+import org.springframework.http.HttpEntity;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpMethod;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.userdetails.UserDetails;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.client.RestTemplate;
+
+import com.fasterxml.jackson.databind.JsonMappingException;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+import in.gov.chennaicorporation.gccoffice.cdwastecollectorregistrations.service.RegistrationService;
+import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+import org.springframework.http.MediaType;
+
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
+
+
+
+@RequestMapping("/gcc/cdwaste")
+@Controller("cdcontroller")
+public class MainController {
+	
+	private final LoginUserInfo loginUserInfo;
+	private final RestTemplate restTemplate;
+	private final AppConfig appConfig;
+	
+	@Autowired
+    public MainController(RestTemplate restTemplate,LoginUserInfo loginUserInfo,
+    		AppConfig appConfig) {
+    	this.restTemplate = restTemplate;
+    	this.appConfig = appConfig;
+        this.loginUserInfo = loginUserInfo;     
+    }
+    		
+	@Autowired
+	private RegistrationService registrationservice;
+	
+	@GetMapping("/registration")
+	public String SavecdRegistraion(Model model){	
+		return "modules/cdwaste/registration";
+	}
+
+	@GetMapping("/pending")
+	public String Pendinglist(Model model) throws JsonMappingException, JsonProcessingException {
+	    String apiUrl = appConfig.cdwastecollectors + "/volunteer/wastecollectors/api/getuserdetails";
+	    ResponseEntity<String> responseEntity = restTemplate.getForEntity(apiUrl, String.class);
+
+	    // Get the response body
+	    String responseBody = responseEntity.getBody();
+
+	    ObjectMapper objectMapper = new ObjectMapper();
+
+	    if (responseBody != null && !responseBody.isEmpty()) {
+	        // Check if the response is an object or an array
+	        if (responseBody.trim().startsWith("{")) { // Single object case
+	            Map<String, Object> userDetails = objectMapper.readValue(responseBody, new TypeReference<Map<String, Object>>() {});
+	            model.addAttribute("userDetails", List.of(userDetails)); // Convert to a list for consistency
+	        } else { // It's expected to be an array
+	            List<Map<String, Object>> userDetails = objectMapper.readValue(responseBody, new TypeReference<List<Map<String, Object>>>() {});
+	            model.addAttribute("userDetails", userDetails); // Add the list directly
+	        }
+	    } else {
+	        // If response is null or empty, pass an empty list to the model
+	        model.addAttribute("userDetails", Collections.emptyList());
+	    }
+
+	    return "modules/cdwaste/pending"; // Return the view
+	}
+
+
+	@GetMapping("/approval")
+	public String approvalList(Model model) throws JsonMappingException, JsonProcessingException {
+	    String apiUrl = appConfig.cdwastecollectors + "/volunteer/wastecollectors/api/approvedlist";
+	    ResponseEntity<String> responseEntity = restTemplate.getForEntity(apiUrl, String.class);
+
+	    // Get the response body
+	    String responseBody = responseEntity.getBody();
+
+	    ObjectMapper objectMapper = new ObjectMapper();
+
+	    if (responseBody != null && !responseBody.isEmpty()) {
+	        // Check if the response is an object or an array
+	        if (responseBody.trim().startsWith("{")) { // Single object case
+	            Map<String, Object> approvalDetails = objectMapper.readValue(responseBody, new TypeReference<Map<String, Object>>() {});
+	            model.addAttribute("approvalDetails", List.of(approvalDetails)); // Convert to list
+	        } else { // It's an array
+	            List<Map<String, Object>> approvalDetails = objectMapper.readValue(responseBody, new TypeReference<List<Map<String, Object>>>() {});
+	            model.addAttribute("approvalDetails", approvalDetails);
+	        }
+	    } else {
+	        model.addAttribute("approvalDetails", Collections.emptyList());
+	    }
+
+	    return "modules/cdwaste/approval"; // Return the appropriate view
+	}
+
+	@GetMapping("/rejected")
+	public String rejectedList(Model model) throws JsonMappingException, JsonProcessingException {
+	    String apiUrl = appConfig.cdwastecollectors + "/volunteer/wastecollectors/api/rejectedlist";
+	    ResponseEntity<String> responseEntity = restTemplate.getForEntity(apiUrl, String.class);
+
+	    // Get the response body
+	    String responseBody = responseEntity.getBody();
+
+	    ObjectMapper objectMapper = new ObjectMapper();
+
+	    if (responseBody != null && !responseBody.isEmpty()) {
+	        // Check if the response is an object or an array
+	        if (responseBody.trim().startsWith("{")) { // Single object case
+	            Map<String, Object> rejectedDetails = objectMapper.readValue(responseBody, new TypeReference<Map<String, Object>>() {});
+	            model.addAttribute("rejectedDetails", List.of(rejectedDetails)); // Convert to list
+	        } else { // It's an array
+	            List<Map<String, Object>> rejectedDetails = objectMapper.readValue(responseBody, new TypeReference<List<Map<String, Object>>>() {});
+	            model.addAttribute("rejectedDetails", rejectedDetails);
+	        }
+	    } else {
+	        model.addAttribute("rejectedDetails", Collections.emptyList());
+	    }
+
+	    return "modules/cdwaste/rejected"; // Return the appropriate view
+	}
+
+	
+
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/WhatsappControllerCD.java b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/WhatsappControllerCD.java
new file mode 100644
index 0000000..4d05dfe
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/WhatsappControllerCD.java
@@ -0,0 +1,29 @@
+package in.gov.chennaicorporation.gccoffice.cdwastecollectorregistrations.controller;
+
+import org.springframework.beans.factory.annotation.Autowired;
+
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import in.gov.chennaicorporation.gccoffice.cdwastecollectorregistrations.service.WhatsappMsgService;
+
+
+
+@RestController("whatsappconCD")
+@RequestMapping("/gcc/api/cd/whatsapp")
+public class WhatsappControllerCD {
+
+    @Autowired
+    private WhatsappMsgService whatsappMsgService;
+
+    @PostMapping("/send-whatsapp-message")
+    public ResponseEntity<String> sendWhatsAppMessage(@RequestParam String msgUrl) {
+        String response = whatsappMsgService.sendMsg(msgUrl);
+        return ResponseEntity.ok(response);
+    }
+
+}
+
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/RegistrationService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/RegistrationService.java
new file mode 100644
index 0000000..a2fd4f4
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/RegistrationService.java
@@ -0,0 +1,33 @@
+package in.gov.chennaicorporation.gccoffice.cdwastecollectorregistrations.service;
+
+import java.io.File;
+
+import java.io.IOException;
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.UUID;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.core.env.Environment;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.web.multipart.MultipartFile;
+
+@Service
+public class RegistrationService {
+
+    @Autowired
+    private JdbcTemplate jdbcTemplate;
+    
+   
+}
+
+
+
+
+
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/WhatsappMsgService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/WhatsappMsgService.java
new file mode 100644
index 0000000..e9ac1ac
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/WhatsappMsgService.java
@@ -0,0 +1,41 @@
+package in.gov.chennaicorporation.gccoffice.cdwastecollectorregistrations.service;
+
+import java.net.HttpURLConnection;
+
+import java.net.URL;
+
+import org.springframework.stereotype.Service;
+import org.springframework.web.client.RestTemplate;
+
+@Service("whatsappServiceCD")
+public class WhatsappMsgService {
+	
+	
+    public String sendMsg(String msgUrl) {
+
+        String response ="";
+        try{
+            HttpURLConnection connection =null;
+
+            URL url = new URL(msgUrl);
+            connection = (HttpURLConnection) url.openConnection();
+            connection.setRequestMethod("GET");
+
+            int responseCode = connection.getResponseCode();
+            response=responseCode+"";
+            System.out.println("Response Code: " + responseCode);
+
+        }catch (Exception e){
+            e.printStackTrace();
+        }
+
+        return response;
+    }
+
+   
+    public String sendSMS(String SMS_Url) {
+        RestTemplate restTemplate = new RestTemplate();
+        String response =restTemplate.getForObject(SMS_Url,String.class);
+        return response;
+    }
+	}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/.DS_Store b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/.DS_Store
new file mode 100644
index 0000000..e75b544
Binary files /dev/null and b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/.DS_Store differ
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/APIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/APIController.java
new file mode 100644
index 0000000..85b37eb
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/APIController.java
@@ -0,0 +1,160 @@
+package in.gov.chennaicorporation.gccoffice.com_petition.controller;
+
+import java.util.List;
+import org.springframework.security.core.Authentication;
+
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.core.userdetails.UserDetails;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
+
+import in.gov.chennaicorporation.gccoffice.com_petition.service.Petition;
+import in.gov.chennaicorporation.gccoffice.com_petition.service.PetitionMaster;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+@RequestMapping("gcc/api/com_petition")
+@RestController("commpRest") // Mayor Petition Rest
+public class APIController {
+	private PetitionMaster petitionMaster;
+	private Petition petition;
+	
+	@Autowired
+	public APIController(PetitionMaster petitionMaster,Petition petition) {
+		this.petitionMaster = petitionMaster;
+		this.petition = petition;
+	}
+	
+	@GetMapping(value="/getComplaintTypes")
+	public List getComplaintTypeList() {
+		return petitionMaster.getComplaintType();
+	}
+	
+	@GetMapping(value="/getOfficerList")
+	public List getOfficerList() {
+		return petitionMaster.getOfficerList();
+	}
+	
+	@GetMapping(value="/getPetitionTypes")
+	public List getPetitionTypes() {
+		return petitionMaster.getPetitionTypes();
+	}
+	
+	@GetMapping(value="/getPetitionList")
+	public List getPetitionList() {
+		return petition.getPetitionList();
+	}
+	
+	@GetMapping(value="/getUnmapPetitionList")
+	public List getUnmapPetitionList() {
+		return petition.getUnmapPetitionList();
+	}
+	
+	@GetMapping(value="/getPetitionDetails")
+	public List getPetitionDetails(@RequestParam("petitionNo") String petitionNo) {
+		return petition.getPetitionDetails(petitionNo);
+	}
+	
+	@PostMapping(value="/savePetition")
+	public String savePetition(
+			@RequestParam("createdBy") String createdBy,
+			@RequestParam("petitionType") String petitionType,
+			@RequestParam("petitionerName") String petitionerName,
+			@RequestParam("petitionerMobile") String petitionerMobile,
+			@RequestParam("complaintType") String petitionerComplaint,
+			@RequestParam("san_page1") MultipartFile page1,
+			@RequestParam("san_page2") MultipartFile page2,
+			@RequestParam("san_page3") MultipartFile page3,
+			@RequestParam("san_page4") MultipartFile page4) {
+		
+		return petition.savePetition(petitionType, createdBy, petitionerName, petitionerMobile, petitionerComplaint, page1, page2, page3, page4);
+	}
+	
+	@PostMapping(value="/updatePetition")
+	public Boolean updatePetition(
+			@RequestParam("petitionType") String petitionType,
+			@RequestParam("petitionNo") String petitionNo,
+			@RequestParam("createdBy") String createdBy,
+			@RequestParam("petitionerName") String petitionerName,
+			@RequestParam("petitionerMobile") String petitionerMobile,
+			@RequestParam("petitionerAddress") String petitionerAddress,
+			@RequestParam("petitionerPincode") String petitionerPincode,
+			@RequestParam("complaintType") String petitionerComplaint,
+			@RequestParam("complaintNature") String complaintNature,
+			@RequestParam("remarks") String remarks) {
+		
+		return petition.updatePetition(petitionNo, petitionType, createdBy, petitionerName, petitionerMobile, petitionerAddress, petitionerPincode, petitionerComplaint, complaintNature, remarks);
+	}
+	
+	@PostMapping(value="/mapComplientToOfficer")
+	public Boolean updatePetition(
+			@RequestParam("petitionId") String petitionId,
+			@RequestParam("petitionNo") String petitionNo,
+			@RequestParam("createdBy") String createdBy,
+			@RequestParam(value = "", required = false) String mapOfficers) {
+		
+			String  com_mapping = mapOfficers;
+			
+			// First before Mapping need to unmaps old list
+			petition.unmapComplient(petitionId, petitionNo);
+			
+	        if(com_mapping!=null) {
+	            String[] com_mapping_parts = com_mapping.split(",");
+	            for (String values : com_mapping_parts) {
+	                String[] com_mapping_val = values.split("_");
+	                if (com_mapping_val.length > 0) {
+	                    String complientId = com_mapping_val[0];
+	                    String offcierId = com_mapping_val[1];
+	                    petition.mapComplientToOfficer(createdBy, petitionId, petitionNo, complientId, offcierId);
+	                }
+	            }
+	        }
+		return true;
+	}
+	
+	
+	@GetMapping(value="/getComplaintMappingDetails")
+	public List getComplaintMappingDetails(
+			@RequestParam("petitionId") String petitionId,
+			@RequestParam("petitionNo") String petitionNo,
+			@RequestParam("complaintTypeId") String complaintTypeId) {
+		return petition.getComplaintMappingDetails(petitionNo,petitionId,complaintTypeId);
+	}
+	
+	@GetMapping(value="/getComplaintList")
+	public List getComplaintList(@RequestParam("loginId") String loginId) {
+		return petition.getComplaintList(loginId);
+	}
+	
+	@GetMapping(value="/getComplaintListByPetitionId")
+	public List getComplaintListByPetitionId(@RequestParam("petitionId") String petitionId) {
+		return petition.getComplaintListByPetitionId(petitionId);
+	}
+	
+	@GetMapping(value="/getComplaintDetails")
+	public List<?> getComplaintDetails(@RequestParam("mapId") String mapId) {
+		return petition.getComplaintDetails(mapId);
+	}
+	
+	@GetMapping(value="/getComplaintActionDetails")
+	public List<?> getComplaintActionDetails(@RequestParam("mapId") String mapId) {
+		return petition.getComplaintActionDetails(mapId);
+	}
+	
+	@PostMapping(value="/saveComplanitStatus")
+	public String saveComplanitStatus(
+			@RequestParam("createdBy") String createdBy,
+			@RequestParam("mapId") String mapId,
+			@RequestParam("complaintStatus") String complaintStatus,
+			@RequestParam("complaintActionText") String complaintActionText,
+			@RequestParam("action_san_page1") MultipartFile actionPage1,
+			@RequestParam("petitionId") String petitionId,
+			@RequestParam("petitionNo") String petitionNo) {
+		
+		return petition.saveComplanitStatus(createdBy, mapId, complaintStatus, complaintActionText, actionPage1, petitionId, petitionNo);
+	}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/MainController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/MainController.java
new file mode 100644
index 0000000..93da00d
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/MainController.java
@@ -0,0 +1,130 @@
+package in.gov.chennaicorporation.gccoffice.com_petition.controller;
+
+import org.hibernate.hql.internal.ast.tree.RestrictableStatement;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.client.RestTemplate;
+
+import in.gov.chennaicorporation.gccoffice.service.Base64Util;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+@RequestMapping("/gcc/com_petition")
+@Controller("ComPetitionController")
+public class MainController {
+	private final RestTemplate restTemplate;
+	private String BasePath = "modules/com_petition/";
+	@Autowired
+	public MainController(RestTemplate restTemplate) {
+		this.restTemplate = restTemplate;
+	}
+ 
+	@GetMapping({"", "/", "/index", "/dashboard"})
+	public String dashboard(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"index";
+	}
+	
+	@GetMapping({"/new_petition"})
+	public String newPetition(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"new_petition";
+	}
+	
+	@GetMapping("/petition-ack/{petitionNo}")
+    public String petitionAck(Model model,@PathVariable("petitionNo") String petitionNo) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		model.addAttribute("petitionNo",petitionNo);
+		return BasePath+"petition_ack";
+	}
+	
+	@GetMapping("/petition-list")
+    public String petitionList(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"petition_list";
+	}
+	
+	@GetMapping("/unmapped-petition-list")
+    public String unMappedPetitionList(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"petition_not_mapped_list";
+	}
+	
+	@GetMapping("/update-petition")
+    public String petitionUpadte(Model model,@RequestParam(value="petitionNo", required = false) String petitionNo) {
+		
+		if (petitionNo != null && !petitionNo.isEmpty()) {
+			// Decrypt the encrypted value
+			 petitionNo = Base64Util.decodeBase64(petitionNo);
+		}
+		else {
+			 petitionNo = null;
+		}
+       
+        
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		model.addAttribute("petitionNo",petitionNo);
+		return BasePath+"petition_update";
+	}
+	
+	@GetMapping("/view-petition")
+    public String petitionView(Model model,@RequestParam(value="petitionNo", required = false) String petitionNo) {
+		
+		if (petitionNo != null && !petitionNo.isEmpty()) {
+			// Decrypt the encrypted value
+			 petitionNo = Base64Util.decodeBase64(petitionNo);
+		}
+		else {
+			 petitionNo = null;
+		}
+       
+        
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		model.addAttribute("petitionNo",petitionNo);
+		return BasePath+"petition_view";
+	}
+	
+	@GetMapping("/view-petition-modal")
+    public String petitionViewModal(Model model,@RequestParam(value="petitionNo", required = false) String petitionNo) {
+		
+		if (petitionNo != null && !petitionNo.isEmpty()) {
+			// Decrypt the encrypted value
+			 petitionNo = Base64Util.decodeBase64(petitionNo);
+		}
+		else {
+			 petitionNo = null;
+		}
+       
+        
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		model.addAttribute("petitionNo",petitionNo);
+		return BasePath+"petition_view_modal_page";
+	}
+	
+	@GetMapping("/search-petition")
+    public String petitionSearch(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		//model.addAttribute("petitionNo",petitionNo);
+		return BasePath+"petition_update";
+	}
+	
+	@GetMapping("/complaint-list")
+    public String complaintList(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"complaint_list";
+	}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/package-info.java
new file mode 100644
index 0000000..86a3ebb
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.com_petition.controller;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/data/ComplaintType.java b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/data/ComplaintType.java
new file mode 100644
index 0000000..d81475c
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/data/ComplaintType.java
@@ -0,0 +1,21 @@
+package in.gov.chennaicorporation.gccoffice.com_petition.data;
+
+import java.util.Map;
+
+public class ComplaintType {
+	private int complaintTypeId;
+    private String complaintType;
+
+    public ComplaintType(Map<String, Object> map) {
+        this.complaintTypeId = (int) map.get("complaint_typeid");
+        this.complaintType = (String) map.get("complaint_type");
+    }
+
+    public int getComplaintTypeId() {
+        return complaintTypeId;
+    }
+
+    public String getComplaintType() {
+        return complaintType;
+    }
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/data/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/data/package-info.java
new file mode 100644
index 0000000..afa4a2a
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/data/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.com_petition.data;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/package-info.java
new file mode 100644
index 0000000..f11e606
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/package-info.java
@@ -0,0 +1,7 @@
+/**
+ * 
+ */
+/**
+ * 
+ */
+package in.gov.chennaicorporation.gccoffice.com_petition;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/Petition.java b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/Petition.java
new file mode 100644
index 0000000..5ff2e56
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/Petition.java
@@ -0,0 +1,719 @@
+package in.gov.chennaicorporation.gccoffice.com_petition.service;
+
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.sql.PreparedStatement;
+import java.sql.SQLException;
+import java.sql.Statement;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+import javax.sql.DataSource;
+
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.core.env.Environment;
+import org.springframework.dao.DataAccessException;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.multipart.MultipartFile;
+
+import in.gov.chennaicorporation.gccoffice.com_petition.data.ComplaintType;
+import in.gov.chennaicorporation.gccoffice.service.Base64Util;
+import in.gov.chennaicorporation.gccoffice.service.GetMappingUserDetails;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+import org.springframework.jdbc.core.PreparedStatementCreator;
+import org.springframework.jdbc.support.GeneratedKeyHolder;
+import org.springframework.jdbc.support.KeyHolder;
+
+@Service("commissionerPetition")
+public class Petition {
+	private JdbcTemplate jdbcTemplate;
+	private final Environment environment;
+	private PetitionMaster petitionMaster;
+	private GetMappingUserDetails getMappingUserDetails;
+
+	@Autowired
+	public Petition(Environment environment,PetitionMaster petitionMaster,GetMappingUserDetails getMappingUserDetails) {
+		this.environment = environment;
+		this.petitionMaster = petitionMaster;
+		this.getMappingUserDetails = getMappingUserDetails;
+	}
+
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysqlCommissionerPetitionDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	 
+	@Transactional(readOnly = true)
+	public List getComplaintTypeList() {
+		return petitionMaster.getComplaintType();
+	}
+	/*
+	@Transactional(readOnly = true)
+	public static List<ComplaintType> convertToComplaintTypes(List<Map<String, Object>> complaintTypeMaps) {
+        return complaintTypeMaps.stream()
+                .map(ComplaintType::new)
+                .collect(Collectors.toList());
+    }
+    */
+	
+	@Transactional(readOnly = true)
+	public static List<ComplaintType> convertToComplaintTypes(List<Map<String, Object>> complaintTypeMaps) {
+	    List<ComplaintType> complaintTypes = new ArrayList<>();
+	    for (Map<String, Object> complaintTypeMap : complaintTypeMaps) {
+	        complaintTypes.add(new ComplaintType(complaintTypeMap));
+	    }
+	    return complaintTypes;
+	}
+	
+	@Transactional(readOnly = true)
+	// Method to map complaint type IDs to their respective complaint types
+	public static String mapComplaintTypes(List<ComplaintType> complaintTypes, String complaint) {
+        String[] complaintIds = complaint.split(",");
+        StringBuilder complaintTxtBuilder = new StringBuilder();
+
+        for (String complaintId : complaintIds) {
+            int id = Integer.parseInt(complaintId);
+            for (ComplaintType type : complaintTypes) {
+                if (type.getComplaintTypeId() == id) {
+                    if (complaintTxtBuilder.length() > 0) {
+                        complaintTxtBuilder.append(",");
+                    }
+                    complaintTxtBuilder.append(type.getComplaintType());
+                    break;
+                }
+            }
+        }
+
+        return complaintTxtBuilder.toString();
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getPetitionList() {
+        try {
+            //String sqlQuery = "SELECT * FROM petition WHERE (`isactive`=1 AND `isdelete`=0)";
+            String sqlQuery = "SELECT p.* , pt.name petition_type_name FROM petition p, petition_master.petition_types pt "
+            		+ "WHERE (p.`isactive`=1 AND p.`isdelete`=0) AND p.petition_type = pt.petition_type_id";
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
+            Base64Util.encodeBase64(sqlQuery);
+            
+            // Iterate over the list of maps
+            for (Map<String, Object> map : result) {
+                // Get the value of the 'petitionNo' field from the map
+                String petitionNo = (String) map.get("petition_no");
+                
+                // Encode the 'petitionNo' value using Base64Util
+                String petitionNoEncoded = Base64Util.encodeBase64(petitionNo);
+                
+                // Add the encoded value as 'petitionNoEncode' to the map
+                map.put("petitionNoEncode", petitionNoEncoded);
+            }
+            
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getUnmapPetitionList() {
+        try {
+            String sqlQuery = "SELECT "
+            		+ "    p.* , pt.name petition_type_name "
+            		+ "FROM "
+            		+ "    `petition` p, petition_master.petition_types pt "
+            		+ "WHERE "
+            		+ "    (p.`isactive` = 1 AND p.`isdelete` = 0) AND (p.petition_type = pt.petition_type_id)"
+            		+ "    AND NOT EXISTS ("
+            		+ "        SELECT 1 "
+            		+ "        FROM `petition_mapping` pm "
+            		+ "        WHERE (p.`petition_id` = pm.`petition_id`) AND (pm.`isactive` = 1 AND pm.`isdelete` = 0 ) "
+            		+ "    )";
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
+            
+            // Iterate over the list of maps
+            for (Map<String, Object> map : result) {
+                // Get the value of the 'petitionNo' field from the map
+                String petitionNo = (String) map.get("petition_no");
+                
+                // Encode the 'petitionNo' value using Base64Util
+                String petitionNoEncoded = Base64Util.encodeBase64(petitionNo);
+                
+                // Add the encoded value as 'petitionNoEncode' to the map
+                map.put("petitionNoEncode", petitionNoEncoded);
+            }
+            
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getPetitionDetails(String petitionNo) {
+        try {
+            String sqlQuery = "SELECT * FROM petition WHERE petition_no = ? AND (`isactive`=1 AND `isdelete`=0) LIMIT 1";
+            //System.out.println("SELECT * FROM petition WHERE petition_no = '"+petitionNo+"' AND (`isactive`=1 AND `isdelete`=0) LIMIT 1");
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery, petitionNo);
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional
+	public String savePetition(
+			String petitionType,
+			String createdBy,
+			String petitionerName,
+			String petitionerMobile,
+			String petitionerComplaint,
+			MultipartFile page1,
+			MultipartFile page2,
+			MultipartFile page3,
+			MultipartFile page4) {
+		
+		//System.out.println("I am from Service Page "+petitionerName);
+		
+		//String complaintNature = "";
+		int lastInsertId = 0;
+		String  sqlQuery = "INSERT INTO `petition` "
+                + "(`petition_type`,`created_by`, `petitioner_name`, `petitioner_mobile`, "
+                + "`petitioner_complaint`, `petitioner_complaint_txt`) "
+                + "VALUES (?, ?, ?, ?, ?, ?)";
+		
+		try {
+			// Complaint Type List
+			List complaintTypelist = getComplaintTypeList();
+			// Convert the list of maps to a list of ComplaintType objects
+	        List<ComplaintType> complaintTypes = convertToComplaintTypes(complaintTypelist);
+
+			// Map complaint types
+	        String petitionerComplaint_txt = mapComplaintTypes(complaintTypes, petitionerComplaint);
+			
+			KeyHolder keyHolder = new GeneratedKeyHolder();
+			// Use JdbcTemplate's update method to execute the query with parameters
+			jdbcTemplate.update(connection -> {
+	            PreparedStatement ps = connection.prepareStatement(sqlQuery, Statement.RETURN_GENERATED_KEYS);
+	            ps.setString(1, petitionType);
+	            ps.setString(2, createdBy);
+	            ps.setString(3, petitionerName);
+	            ps.setString(4, petitionerMobile);
+	            ps.setString(5, petitionerComplaint);
+	            ps.setString(6, petitionerComplaint_txt);
+	            return ps;
+	        }, keyHolder);
+			
+			// Get the last insert ID
+	        lastInsertId = (int) keyHolder.getKey().longValue();
+
+	        // Get the value of mp_ackno from application.properties
+	        String ackno = environment.getProperty("com_ackno");
+	        String ackno_prefix = environment.getProperty("com_ackno_prefix");
+
+	        // Convert ackno to int if needed
+	        int acknoInt = Integer.parseInt(ackno);
+
+	        // Calculate the petition number
+	        int petitionNo = (int) (lastInsertId + acknoInt);
+
+	        // Construct the petition number string
+	        String petitionNoString = ackno_prefix + petitionNo;
+
+	        // Update the petition number in the database
+	        updatePetitionNumber(lastInsertId, petitionNoString);
+	        
+	        // Add Petition Scan File in the database
+	        addPetitionFile(createdBy,lastInsertId, petitionNoString, page1, page2, page3, page4);
+	        
+            return petitionNoString; // If no exception, query executed successfully
+        } catch (DataAccessException e) {
+            // Handle exception (e.g., log error)
+            e.printStackTrace();
+            return "error"; // Query execution failed
+        }
+	}
+	
+	@Transactional
+	public boolean updatePetitionNumber(int petitionId,String petitionNoString) {
+		String  sqlQuery = "UPDATE `petition` SET `petition_no`='"+petitionNoString+"' WHERE `petition_id`='"+petitionId+"'";
+		jdbcTemplate.update(sqlQuery);
+		return true;
+	}
+	
+	@Transactional
+	public String addPetitionFile(String createdBy, 
+			int petitionId,
+    		String petitionNoString,
+    		MultipartFile page1,
+			MultipartFile page2,
+			MultipartFile page3,
+			MultipartFile page4) {
+		
+		String fileName="";
+        for (int i = 1; i <= 4; i++) {
+            MultipartFile file = null;
+            switch (i) {
+                case 1:
+                    file = page1;
+                    fileName = "Scan1";
+                    break;
+                case 2:
+                    file = page2;
+                    fileName = "Scan2";
+                    break;
+                case 3:
+                    file = page3;
+                    fileName = "Scan3";
+                    break;
+                case 4:
+                    file = page4;
+                    fileName = "Scan4";
+                    break;
+            }
+            if (file != null && !file.isEmpty()) {
+            	try {
+                    // Get the bytes of the file
+                    byte[] bytes = file.getBytes();
+                    
+                    // Set the file path where you want to save it
+                    String uploadDirectory = environment.getProperty("file.upload.directory");
+                    String serviceFolderName = environment.getProperty("com_foldername");
+                    uploadDirectory = uploadDirectory + serviceFolderName;
+                    
+                    // File name 
+                    fileName = petitionId + "_" + fileName + "_" + petitionNoString + "_" + file.getOriginalFilename();
+                    
+                    //File Size
+                    Long fileSize = file.getSize();
+                    
+                    // File Type
+                    String fileType = file.getContentType();
+                    
+                    // Create directory if it doesn't exist
+                    Path directoryPath = Paths.get(uploadDirectory);
+                    if (!Files.exists(directoryPath)) {
+                        Files.createDirectories(directoryPath);
+                    }
+                    
+                    String filePath = uploadDirectory + "/" + fileName;
+
+                    // Create a new Path object
+                    Path path = Paths.get(filePath);
+
+                    // Write the bytes to the file
+                    Files.write(path, bytes);
+                    
+                    // Save the file path to a database
+                    String  sqlQuery = "INSERT INTO `pentition_files`(`created_by`, `file_name`, `file_size`, `file_type`, `petition_no`, `petition_id`) "
+                    		+ "VALUES ('"+createdBy+"','"+fileName+"','"+fileSize+"','"+fileType+"','"+petitionNoString+"','"+petitionId+"')";
+            		jdbcTemplate.update(sqlQuery);
+                    
+                } catch (IOException e) {
+                    e.printStackTrace();
+                    return "Failed to save file " + file.getOriginalFilename();
+                }
+            }
+            
+        }
+        return "success";
+	}
+	
+	@Transactional
+	public boolean updatePetition(
+			String petitionNo,
+			String petitionType,
+			String createdBy,
+			String petitionerName,
+			String petitionerMobile,
+			String petitionerAddress,
+			String petitionerPincode,
+			String petitionerComplaint,
+			String complaintNature,
+			String remarks) {
+		
+		try {
+			// Complaint Type List
+			List complaintTypelist = getComplaintTypeList();
+			// Convert the list of maps to a list of ComplaintType objects
+	        List<ComplaintType> complaintTypes = convertToComplaintTypes(complaintTypelist);
+
+			// Map complaint types
+	        String petitionerComplaint_txt = mapComplaintTypes(complaintTypes, petitionerComplaint);
+			/*
+	        String  sqlQuery = "UPDATE `petition` SET "
+	                + "`petition_type`='"+petitionType+"', `created_by`='"+createdBy+"', `petitioner_name`='"+petitionerName+"', `petitioner_mobile`='"+petitionerMobile+"', "
+	                + "`petitioner_address`='"+petitionerAddress+"', `petitioner_pincode`='"+petitionerPincode+"',"
+	                + "`petitioner_complaint`='"+petitionerComplaint+"', `petitioner_complaint_txt`='"+petitionerComplaint_txt+"', `complaint_nature`='"+complaintNature+"', `remarks`='"+remarks+"' "
+	                + "WHERE (`petition_no`='"+petitionNo+"') LIMIT 1";
+	        System.out.println(sqlQuery);
+			// Use JdbcTemplate's update method to execute the query with parameters
+			jdbcTemplate.update(sqlQuery);*/
+	        String sqlQuery = "UPDATE `petition` SET "
+	                + "`petition_type` = ?, `created_by` = ?, `petitioner_name` = ?, `petitioner_mobile` = ?, "
+	                + "`petitioner_address` = ?, `petitioner_pincode` = ?, `petitioner_complaint` = ?, "
+	                + "`petitioner_complaint_txt` = ?, `complaint_nature` = ?, `remarks` = ? "
+	                + "WHERE `petition_no` = ? LIMIT 1";
+
+	        int rowsUpdated = jdbcTemplate.update(sqlQuery, 
+	        	    petitionType, 
+	        	    createdBy, 
+	        	    petitionerName, 
+	        	    petitionerMobile, 
+	        	    petitionerAddress, 
+	        	    petitionerPincode, 
+	        	    petitionerComplaint, 
+	        	    petitionerComplaint_txt,  // Safely includes single quotes
+	        	    complaintNature, 
+	        	    remarks, 
+	        	    petitionNo
+	        	);
+			
+			// Add Petition Scan File in the database
+	        //addPetitionFile(createdBy,lastInsertId, petitionNoString, page1, page2, page3, page4);
+	        
+            return true; // If no exception, query executed successfully
+        } catch (DataAccessException e) {
+            // Handle exception (e.g., log error)
+            e.printStackTrace();
+            return false; // Query execution failed
+        }
+	}
+	
+	@Transactional
+	public boolean updatePetitionStatus(String petitionId,String petitionNo) {
+		String status_value = "close";
+		List<Map<String, Object>> petitionMappingDetails = getPetitionMappingDetails(petitionNo, petitionId);
+
+		for (Map<String, Object> mapping : petitionMappingDetails) {
+		    // Access values from the map using keys
+		    Object status = mapping.get("status");
+		    // Check if status is "close"
+		    if (!"close".equals(status)) {
+		    	status_value = "partial";
+		    }
+		    
+		}
+		
+		String sqlQuery = "UPDATE `petition` SET `status`='"+status_value+"' WHERE `petition_no`='"+petitionNo+"' AND `petition_id`='"+petitionId+"' LIMIT 1";
+		jdbcTemplate.update(sqlQuery);
+		System.out.println(sqlQuery);
+		return true;
+	}
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getPetitionMappingDetails(String petitionNo, String petitionId) {
+        try {
+            String sqlQuery = "SELECT * FROM petition_mapping WHERE (`petition_id`= ? AND petition_no = ?) AND (`isactive`=1 AND `isdelete`=0)";
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery, petitionId, petitionNo);
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional
+	public boolean unmapComplient(String petitionId, String petitionNo) {
+		    String sqlQuery = "UPDATE `petition_mapping` SET `isactive`='0',`isdelete`='1' WHERE `petition_id`='"+petitionId+"' AND `petition_no`='"+petitionNo+"'";
+		    jdbcTemplate.update(sqlQuery);
+	    return true;
+	}
+	
+	@Transactional
+	public boolean mapComplientToOfficer(
+	        String createdBy, String petitionId, String petitionNo, String complaintId, String officerId) {
+		    String sqlQuery = "INSERT INTO `petition_mapping`"
+		            + "(`created_by`, `off_id`, `petition_no`, `complaint_typeid`, `petition_id`) "
+		            + "VALUES (?, ?, ?, ?, ?)";
+		    jdbcTemplate.update(sqlQuery, createdBy, officerId, petitionNo, complaintId, petitionId);
+	    return true;
+	}
+	
+	@Transactional
+	public boolean updateMapComplientStatus(String mapId,String status) {
+		    String sqlQuery = "UPDATE `petition_mapping` SET `status`=? WHERE `mapid`=? LIMIT 1";
+		    jdbcTemplate.update(sqlQuery, status, mapId);
+		    System.out.println(sqlQuery);
+	    return true;
+	}
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getComplaintMappingDetails(String petitionNo, String petitionId, String complaintTypeId) {
+        try {
+            String sqlQuery = "SELECT * FROM petition_mapping WHERE (`petition_id`= ? AND petition_no = ?) AND `complaint_typeid`= ?  AND (`isactive`=1 AND `isdelete`=0) LIMIT 1";
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery, petitionId, petitionNo,complaintTypeId);
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getComplaintList(String loginId) {
+		String sqlQuery = "";
+        try {
+        	sqlQuery = "SELECT "
+            		+ "    p.`petition_id`, p.`cdate`, p.`created_by`, p.`isactive`, p.`isdelete`, p.`petition_no`, "
+            		+ "    p.`petitioner_address`, p.`petitioner_complaint`, p.`petitioner_complaint_txt`, "
+            		+ "    p.`petitioner_mobile`, p.`petitioner_name`, p.`complaint_nature`, p.`petitioner_pincode`, "
+            		+ "    pm.`mapid`, pm.`complaint_typeid`, pm.`off_id`, pm.`status`, om.`off_nm`, ctype.`complaint_type` "
+            		+ " FROM  "
+            		+ "    `petition` p, `petition_mapping` pm, `petition_master`.`officer_master` om, `petition_master`.`complaint_types` ctype "
+            		+ " WHERE "
+            		+ "    (p.`isactive` = 1 AND p.`isdelete` = 0) "
+            		+ "	   AND (pm.`isactive` = 1 AND pm.`isdelete` = 0) "
+            		+ "	   AND (om.`isactive` = 1 AND om.`isdelete` = 0) "
+            		+ "	   AND (om.`off_id` = pm.`off_id`) "
+            		+ "	   AND (ctype.`complaint_typeid` = pm.`complaint_typeid`) "
+            		+ "    AND (p.`petition_id` = pm.`petition_id`)"
+            		+ " ";
+        	
+        	String officerMaster  = getMappingUserDetails.getOfficerMaster(loginId);
+    		
+    		if (officerMaster != null && !officerMaster.isEmpty()) {
+    			sqlQuery = sqlQuery + "AND (pm.off_id IN("+officerMaster+"))";
+    		}
+    		
+        	System.out.println(sqlQuery);
+        	
+        	List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
+        	
+        	// Iterate over the list of maps
+            for (Map<String, Object> map : result) {
+                // Get the value of the 'petitionNo' field from the map
+                String petitionNo = (String) map.get("petition_no");
+                
+                // Encode the 'petitionNo' value using Base64Util
+                String petitionNoEncoded = Base64Util.encodeBase64(petitionNo);
+                
+                // Add the encoded value as 'petitionNoEncode' to the map
+                map.put("petitionNoEncode", petitionNoEncoded);
+            }
+            
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getComplaintListByPetitionId(String petitionId) {
+        try {
+        	String sqlQuery = "SELECT "
+            		+ " p.`petition_id`, p.`cdate`, p.`created_by`, p.`isactive`, p.`isdelete`, p.`petition_no`, "
+            		+ " p.`petitioner_address`, p.`petitioner_complaint`, p.`petitioner_complaint_txt`, "
+            		+ " p.`petitioner_mobile`, p.`petitioner_name`, p.`complaint_nature`, p.`petitioner_pincode`, p.`status` petition_status, "
+            		+ " pm.`mapid`, pm.`complaint_typeid`, pm.`off_id`, pm.`status` complaint_status, pm.`cdate` mappedOn, om.`off_nm`, ctype.`complaint_type` "
+            		+ " FROM "
+            		+ " 	`commissioner_petition`.`petition` p,`commissioner_petition`.`petition_mapping` pm, `petition_master`.`officer_master` om, `petition_master`.`complaint_types` ctype "
+            		+ " WHERE "
+            		+ "		(p.`petition_id` = '"+petitionId+"' AND p.`isactive` = 1 AND p.`isdelete` = 0) "
+            		+ "		AND (pm.`isactive` = 1 AND pm.`isdelete` = 0) "
+            		+ "		AND (om.`isactive` = 1 AND om.`isdelete` = 0) "
+            		+ "		AND (om.`off_id` = pm.`off_id`) "
+            		+ "		AND (ctype.`complaint_typeid` = pm.`complaint_typeid`) "
+            		+ " 	AND (p.`petition_id` = pm.`petition_id`)"
+            		+ " ";
+        	System.out.println(sqlQuery);
+        	List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
+        	
+        	// Iterate over the list of maps
+            for (Map<String, Object> map : result) {
+                // Get the value of the 'petitionNo' field from the map
+                String petitionNo = (String) map.get("petition_no");
+                
+                // Encode the 'petitionNo' value using Base64Util
+                String petitionNoEncoded = Base64Util.encodeBase64(petitionNo);
+                
+                // Add the encoded value as 'petitionNoEncode' to the map
+                map.put("petitionNoEncode", petitionNoEncoded);
+            }
+            
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getComplaintDetails(String mapid) {
+        try {
+        	String sqlQuery = "SELECT "
+            		+ "    p.`petition_id`, p.`cdate`, p.`created_by`, p.`isactive`, p.`isdelete`, p.`petition_no`, "
+            		+ "    p.`petitioner_address`, p.`petitioner_complaint`, p.`petitioner_complaint_txt`, "
+            		+ "    p.`petitioner_mobile`, p.`petitioner_name`, p.`complaint_nature`, p.`petitioner_pincode`, "
+            		+ "    pm.`mapid`, pm.`complaint_typeid`, pm.`off_id`, pm.`status`, om.`off_nm`, ctype.`complaint_type` "
+            		+ " FROM "
+            		+ "    `petition` p,`petition_mapping` pm, `petition_master`.`officer_master` om, `petition_master`.`complaint_types` ctype "
+            		+ " WHERE "
+            		+ "	   pm.`mapid`='"+mapid+"' " 
+            		+ "    AND (p.`isactive` = 1 AND p.`isdelete` = 0) "
+            		+ "	   AND (pm.`isactive` = 1 AND pm.`isdelete` = 0) "
+            		+ "	   AND (om.`isactive` = 1 AND om.`isdelete` = 0) "
+            		+ "	   AND (om.`off_id` = pm.`off_id`) "
+            		+ "	   AND (ctype.`complaint_typeid` = pm.`complaint_typeid`) "
+            		+ "    AND (p.`petition_id` = pm.`petition_id`)"
+            		+ "    ";
+        	//System.out.println(sqlQuery);
+        	List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
+        	
+        	// Iterate over the list of maps
+            for (Map<String, Object> map : result) {
+                // Get the value of the 'petitionNo' field from the map
+                String petitionNo = (String) map.get("petition_no");
+                
+                // Encode the 'petitionNo' value using Base64Util
+                String petitionNoEncoded = Base64Util.encodeBase64(petitionNo);
+                
+                // Add the encoded value as 'petitionNoEncode' to the map
+                map.put("petitionNoEncode", petitionNoEncoded);
+            }
+            
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getComplaintActionDetails(String mapId) {
+        try {
+            String sqlQuery = "SELECT * FROM `petition_action_taken` WHERE (`mapid`= ? AND `isactive`=1 AND `isdelete`=0) LIMIT 1";
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery, mapId);
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional
+	public String saveComplanitStatus(
+			String createdBy,
+			String mapId,
+			String complaintStatus,
+			String complaintActionText,
+			MultipartFile actionPage1,
+			String petitionId,
+			String petitionNo) {
+		
+		//System.out.println("I am from Service Page "+petitionerName);
+		
+		//String complaintNature = "";
+		int lastInsertId = 0;
+		String  sqlQuery = "INSERT INTO `petition_action_taken` "
+                + "(`created_by`, `off_id`, `mapid`, `status`, "
+                + "`comments`) "
+                + "VALUES (?, ?, ?, ?, ?)";
+		
+		try {
+			
+			KeyHolder keyHolder = new GeneratedKeyHolder();
+			// Use JdbcTemplate's update method to execute the query with parameters
+			jdbcTemplate.update(connection -> {
+	            PreparedStatement ps = connection.prepareStatement(sqlQuery, Statement.RETURN_GENERATED_KEYS);
+	            ps.setString(1, createdBy);
+	            ps.setString(2, createdBy);
+	            ps.setString(3, mapId);
+	            ps.setString(4, complaintStatus);
+	            ps.setString(5, complaintActionText);
+	            return ps;
+	        }, keyHolder);
+			
+			// Get the last insert ID
+	        lastInsertId = (int)keyHolder.getKey().longValue();
+	        String actionID = "error";
+	        if(lastInsertId>0) {
+	        	// Update Complaint Status
+	        	updateMapComplientStatus(mapId,"close");
+	        	// Update Petition Status
+	        	updatePetitionStatus(petitionId,petitionNo);
+	        	// Add Action Scan File in the database
+		        addActionFile(mapId,lastInsertId, actionPage1);
+		        actionID = ""+lastInsertId;
+	        }
+	        
+            return actionID; // If no exception, query executed successfully
+        } catch (DataAccessException e) {
+            // Handle exception (e.g., log error)
+            e.printStackTrace();
+            return "error"; // Query execution failed
+        }
+	}
+	
+	@Transactional
+	public String addActionFile( String mapId, int solmapid,
+    		MultipartFile page1) {
+		
+        MultipartFile file = page1;
+        String fileName = "Scan1_"+solmapid;
+                   
+            if (file != null && !file.isEmpty()) {
+            	try {
+                    // Get the bytes of the file
+                    byte[] bytes = file.getBytes();
+                    
+                    // Set the file path where you want to save it
+                    String uploadDirectory = environment.getProperty("file.upload.directory");
+                    String serviceFolderName = environment.getProperty("com_foldername");
+                    String serviceActionFolderName = environment.getProperty("com_action_Foldername");
+                    
+                    uploadDirectory = uploadDirectory + serviceFolderName +"/"+ serviceActionFolderName;
+                    
+                    // File name 
+                    fileName = mapId + "_" + fileName + "_" + file.getOriginalFilename();
+                    
+                    //File Size
+                    Long fileSize = file.getSize();
+                    
+                    // File Type
+                    String fileType = file.getContentType();
+                    
+                    // Create directory if it doesn't exist
+                    Path directoryPath = Paths.get(uploadDirectory);
+                    if (!Files.exists(directoryPath)) {
+                        Files.createDirectories(directoryPath);
+                    }
+                    
+                    String filePath = uploadDirectory + "/" + fileName;
+
+                    // Create a new Path object
+                    Path path = Paths.get(filePath);
+
+                    // Write the bytes to the file
+                    Files.write(path, bytes);
+                    
+                    // Save the file path to a database
+                    String  sqlQuery = "UPDATE `petition_action_taken` SET "
+                    					+ "`file_name`='"+fileName+"', "
+                    					+ "`file_size`='"+fileSize+"', "
+                    					+ "`file_type`='"+fileType+"' "
+                    					+ "WHERE `solmapid`='"+solmapid+"' LIMIT 1";
+            		jdbcTemplate.update(sqlQuery);
+                    
+                } catch (IOException e) {
+                    e.printStackTrace();
+                    return "Failed to save file " + file.getOriginalFilename();
+                }
+            }
+        return "success";
+	}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/PetitionMaster.java b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/PetitionMaster.java
new file mode 100644
index 0000000..c68078a
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/PetitionMaster.java
@@ -0,0 +1,58 @@
+package in.gov.chennaicorporation.gccoffice.com_petition.service;
+
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@Service("ComPetitionMaster")
+public class PetitionMaster {
+	private JdbcTemplate jdbcTemplate;
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysqlPetitionMasterDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	 
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getComplaintType(){
+		String SqlQuery = "";
+		
+		SqlQuery = "SELECT * FROM `complaint_types` WHERE `isactive`=1 AND `isdelete`=0";
+		
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+		
+	}
+	
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getOfficerList(){
+		String SqlQuery = "";
+		
+		SqlQuery = "SELECT * FROM `officer_master` WHERE `isactive`=1 AND `isdelete`=0";
+		
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+		
+	}
+	
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getPetitionTypes(){
+		String SqlQuery = "";
+		
+		SqlQuery = "SELECT * FROM `petition_types` WHERE `isactive`=1 AND `isdelete`=0  ORDER BY `orderby` ASC";
+		
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+		
+	}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/package-info.java
new file mode 100644
index 0000000..7cb8120
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.com_petition.service;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/AppConfig.java b/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/AppConfig.java
index 467c2b7..2bafdef 100644
--- a/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/AppConfig.java
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/AppConfig.java
@@ -13,11 +13,13 @@ public class AppConfig {
 	@Autowired
     private Environment env;
 	
-	public String qrAssetFeedback = "http://localhost:8063";
-	public String mtm = "http://localhost:8060";
+	public String qrAssetFeedback = "http://117.232.67.158:8063";
+	public String mtm = "http://117.232.67.158:8060";
 	public String petRegistration = "http://117.232.67.158:8061";
-	public String garbageCollection = "http://localhost:8067"; //117.232.67.158
-	
+	public String garbageCollection = "http://117.232.67.158:8067"; //117.232.67.158
+	public String cdwastecollectors = "http://117.232.67.158:8071";
+	public String qaqcurl="https://erp.chennaicorporation.gov.in/pgr/external/mobileservice?";
+	public String attendanceReport = "http://117.232.67.158:8076";
 	public String gccappsMysqlPassword = "";
 	
     @Bean
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.java b/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.java
index c535be2..189bdb6 100644
--- a/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.java
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.java
@@ -23,9 +23,17 @@ import java.util.Properties;
 @Configuration
 @EnableTransactionManagement
 public class DataSourceConfig {
+		
+	private static String host = "localhost:3306";
+	
+	//private static String dbpassword = "gccroot";
+		
+	private static String dbpassword = "";
+	// AWS 
+	
+	//private static String host = "gcc-facial-db-instance-1.cf48eqcciziq.ap-south-1.rds.amazonaws.com:3306";
+	//private static String dbpassword = "gcc-facial-password";
 	
-	private static String dbpassword = "gccroot";
-    
 	//////////////////////////////(For GCC APP) ////////////////////////
     @Configuration
     @EnableTransactionManagement
@@ -40,7 +48,7 @@ public class DataSourceConfig {
         public DataSource mysqlAppDataSource() {
             DriverManagerDataSource dataSource = new DriverManagerDataSource();
             dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
-            dataSource.setUrl("jdbc:mysql://localhost:3306/gcc_apps");
+            dataSource.setUrl("jdbc:mysql://"+host+"/gcc_apps");
             dataSource.setUsername("root");
             dataSource.setPassword(dbpassword);
             return dataSource;
@@ -86,7 +94,7 @@ public class DataSourceConfig {
         public DataSource mysqlTaxCollectionDataSource() {
             DriverManagerDataSource dataSource = new DriverManagerDataSource();
             dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
-            dataSource.setUrl("jdbc:mysql://localhost:3306/gcc_tax_collection");
+            dataSource.setUrl("jdbc:mysql://"+host+"/gcc_tax_collection");
             dataSource.setUsername("root");
             dataSource.setPassword(dbpassword);
             return dataSource;
@@ -117,12 +125,23 @@ public class DataSourceConfig {
 	//////////////////////////////(For Mayor Petition) ////////////////////////
 	@Bean(name = "mysqlMayorPetitionDataSource")
 	public DataSource mysqlMayorPetitionDataSource() {
-	DriverManagerDataSource dataSource = new DriverManagerDataSource();
-	dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
-	dataSource.setUrl("jdbc:mysql://localhost:3306/mayor_petition");
-	dataSource.setUsername("root");
-	dataSource.setPassword(dbpassword);
-	return dataSource;
+		DriverManagerDataSource dataSource = new DriverManagerDataSource();
+		dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+		dataSource.setUrl("jdbc:mysql://"+host+"/mayor_petition");
+		dataSource.setUsername("root");
+		dataSource.setPassword(dbpassword);
+		return dataSource;
+	}
+
+	//////////////////////////////(For Commissioner Petition) ////////////////////////
+	@Bean(name = "mysqlCommissionerPetitionDataSource")
+	public DataSource mysqlCommissionerPetitionDataSource() {
+		DriverManagerDataSource dataSource = new DriverManagerDataSource();
+		dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+		dataSource.setUrl("jdbc:mysql://"+host+"/commissioner_petition");
+		dataSource.setUsername("root");
+		dataSource.setPassword(dbpassword);
+		return dataSource;
 	}
 
     //////////////////////////////(For Petition Master) ////////////////////////
@@ -130,7 +149,7 @@ public class DataSourceConfig {
     public DataSource mysqlPetitionMasterDataSource() {
         DriverManagerDataSource dataSource = new DriverManagerDataSource();
         dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
-        dataSource.setUrl("jdbc:mysql://localhost:3306/petition_master");
+        dataSource.setUrl("jdbc:mysql://"+host+"/petition_master");
         dataSource.setUsername("root");
         dataSource.setPassword(dbpassword);
         return dataSource;
@@ -139,37 +158,103 @@ public class DataSourceConfig {
 	//////////////////////////////(For Councillor Petition) ////////////////////////
 	@Bean(name = "mysqlCouncillorPetitionDataSource")
 	public DataSource mysqlCouncillorPetitionDataSource() {
-	DriverManagerDataSource dataSource = new DriverManagerDataSource();
-	dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
-	dataSource.setUrl("jdbc:mysql://localhost:3306/councillor_petition");
-	dataSource.setUsername("root");
-	dataSource.setPassword(dbpassword);
-	return dataSource;
+		DriverManagerDataSource dataSource = new DriverManagerDataSource();
+		dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+		dataSource.setUrl("jdbc:mysql://"+host+"/councillor_petition");
+		dataSource.setUsername("root");
+		dataSource.setPassword(dbpassword);
+		return dataSource;
 	}
 	
-//////////////////////////////(For PGR Master) ////////////////////////
-@Bean(name = "mysqlPGRMasterDataSource")
-public DataSource mysqlPGRMasterDataSource() {
-DriverManagerDataSource dataSource = new DriverManagerDataSource();
-dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
-dataSource.setUrl("jdbc:mysql://localhost:3306/erp_pgr");
-dataSource.setUsername("root");
-dataSource.setPassword(dbpassword);
-return dataSource;
-}
+	//////////////////////////////(For PGR Master) ////////////////////////
+	@Bean(name = "mysqlPGRMasterDataSource")
+	public DataSource mysqlPGRMasterDataSource() {
+		DriverManagerDataSource dataSource = new DriverManagerDataSource();
+		dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+		dataSource.setUrl("jdbc:mysql://"+host+"/erp_pgr");
+		dataSource.setUsername("root");
+		dataSource.setPassword(dbpassword);
+		return dataSource;
+	}
 	
 	//////////////////////////////(For Circular Petition) ////////////////////////
 	@Bean(name = "mysqlCircularDataSource")
 	public DataSource mysqlCircularDataSource() {
-	DriverManagerDataSource dataSource = new DriverManagerDataSource();
-	dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
-	dataSource.setUrl("jdbc:mysql://localhost:3306/circular");
-	dataSource.setUsername("root");
-	dataSource.setPassword(dbpassword);
-	return dataSource;
+		DriverManagerDataSource dataSource = new DriverManagerDataSource();
+		dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+		dataSource.setUrl("jdbc:mysql://"+host+"/circular");
+		dataSource.setUsername("root");
+		dataSource.setPassword(dbpassword);
+		return dataSource;
 	}
     
-    ////////////////////////////// ORACLE ////////////////////////
+	//////////////////////////////(For NULM Staff) ////////////////////////
+	@Bean(name = "mysqlNulmDataSource")
+	public DataSource mysqlNulmDataSource() {
+		DriverManagerDataSource dataSource = new DriverManagerDataSource();
+		dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+		dataSource.setUrl("jdbc:mysql://"+host+"/gcc_nulm");
+		dataSource.setUsername("root");
+		dataSource.setPassword(dbpassword);
+		return dataSource;
+	}
+	
+	//////////////////////////////(For Zero Hours Petition) ////////////////////////
+	@Bean(name = "mysqlZeroHoursDataSource")
+	public DataSource mysqlZeroHoursDataSource() {
+		DriverManagerDataSource dataSource = new DriverManagerDataSource();
+		dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+		dataSource.setUrl("jdbc:mysql://"+host+"/zerohours_petition");
+		dataSource.setUsername("root");
+		dataSource.setPassword(dbpassword);
+		return dataSource;
+	}
+	
+	//////////////////////////////(For 1913 Campaign) ////////////////////////
+	@Bean(name = "mysql1913CampaignDataSource")
+	public DataSource mysql1913CampaignDataSource() {
+		DriverManagerDataSource dataSource = new DriverManagerDataSource();
+		dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+		dataSource.setUrl("jdbc:mysql://"+host+"/gcc_1913_campaign");
+		dataSource.setUsername("root");
+		dataSource.setPassword(dbpassword);
+		return dataSource;
+	}
+	
+	//////////////////////////////(For 1913 QAQC) ////////////////////////
+	@Bean(name = "mysql1913QAQCDataSource")
+	public DataSource mysql1913QAQCDataSource() {
+		DriverManagerDataSource dataSource = new DriverManagerDataSource();
+		dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+		dataSource.setUrl("jdbc:mysql://"+host+"/gcc_1913_qaqc");
+		dataSource.setUsername("root");
+		dataSource.setPassword(dbpassword);
+		return dataSource;
+	}
+	
+	//////////////////////////////(For SOS) ////////////////////////
+	@Bean(name = "mysqlGccSOSDataSource")
+	public DataSource mysqlGccSOSDataSource() {
+		DriverManagerDataSource dataSource = new DriverManagerDataSource();
+		dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+		dataSource.setUrl("jdbc:mysql://"+host+"/gcc_sos");
+		dataSource.setUsername("root");
+		dataSource.setPassword(dbpassword);
+		return dataSource;
+	}
+	
+	//////////////////////////////(For Kural) ////////////////////////
+	@Bean(name = "mysqlKuralDataSource")
+	public DataSource mysqlKuralDataSource() {
+		DriverManagerDataSource dataSource = new DriverManagerDataSource();
+		dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+		dataSource.setUrl("jdbc:mysql://"+host+"/Kural");
+		dataSource.setUsername("root");
+		dataSource.setPassword(dbpassword);
+		return dataSource;
+	}
+	
+	////////////////////////////// ORACLE ////////////////////////
     @Bean(name = "oracleDataSource")
     public DataSource oracleDataSource() {
         DriverManagerDataSource dataSource = new DriverManagerDataSource();
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/controller/APIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/controller/APIController.java
index f984d01..ade7c25 100644
--- a/src/main/java/in/gov/chennaicorporation/gccoffice/controller/APIController.java
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/controller/APIController.java
@@ -33,6 +33,9 @@ import in.gov.chennaicorporation.gccoffice.repository.MenuItemRepository;
 import in.gov.chennaicorporation.gccoffice.repository.SubMenuItemAccessRepository;
 import in.gov.chennaicorporation.gccoffice.repository.SubMenuItemRepository;
 import in.gov.chennaicorporation.gccoffice.repository.UserActivityLogRepository;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 
 @RequestMapping("/gcc/api")
 @RestController
@@ -46,6 +49,9 @@ public class APIController {
 	@Autowired
 	private AppUserRepository appUserRepository;
 	
+	@Autowired
+	private LoginUserInfo loginUserInfo;
+	
 	List<UserActivityLog> getActivityLogs;
 	@Autowired
 	private UserActivityLogRepository userActivityLogRepository;
@@ -414,4 +420,48 @@ public class APIController {
         }
         return ipAddress;
     }
+	
+	@GetMapping(value="/passwordGenerator")
+	public String passwordGenerator(@RequestParam(value = "password", required = false) String password) {
+		BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
+        String rawPassword = password;
+        String encodedPassword = passwordEncoder.encode(rawPassword);
+		return encodedPassword;
+	}
+	
+	@PostMapping(value="/resetPassword")
+	public String resetPassword(
+			@RequestParam(value = "", required = false) String userid,
+			@RequestParam(value = "", required = false) String oldpassword,
+			@RequestParam(value = "", required = false) String newpassword
+			) {
+		
+		System.out.println(userid+" : "+oldpassword+" : "+newpassword);
+		
+		String oldPasswordTxt=oldpassword; //passwordGenerator(oldpassword);
+		String newPasswordTxt=newpassword; //passwordGenerator(newpassword);
+		String rawPasswordTxt=newpassword;
+		
+		System.out.println(oldPasswordTxt+" : "+newPasswordTxt+" : "+rawPasswordTxt);
+		
+        String response = loginUserInfo.resetPassword(userid,oldPasswordTxt,newPasswordTxt,rawPasswordTxt);
+		return response;
+	}
+	
+	@PostMapping(value="/userCheck")
+	public List<Map<String, Object>> userCheck(
+			@RequestParam(value = "", required = false) String usernametxt,
+			@RequestParam(value = "", required = false) String passwordtxt
+			) {
+		
+		System.out.println("HRM Service : "+usernametxt+" : "+passwordtxt);
+		
+        List<Map<String, Object>> response = loginUserInfo.userCheck(usernametxt,passwordtxt);
+		return response;
+	}
+	
+	@GetMapping(value="/getDailyKural")
+	public List getDailyKural() {
+		return loginUserInfo.getDailyContent();
+	}
 }
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/controller/DateTimeUtil.java b/src/main/java/in/gov/chennaicorporation/gccoffice/controller/DateTimeUtil.java
new file mode 100644
index 0000000..40a2b0e
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/controller/DateTimeUtil.java
@@ -0,0 +1,34 @@
+package in.gov.chennaicorporation.gccoffice.controller;
+
+import org.springframework.stereotype.Service;
+import java.time.LocalDateTime;
+import java.time.format.DateTimeFormatter;
+
+@Service
+public class DateTimeUtil {
+	public static String getCurrentDateTime() {
+        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("ddMMyyyyHHmmss");
+        LocalDateTime now = LocalDateTime.now();
+        return now.format(formatter);
+    }
+	public static String getCurrentYear() {
+        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy");
+        LocalDateTime now = LocalDateTime.now();
+        return now.format(formatter);
+    }
+	public static String getCurrentMonth() {
+        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("MM");
+        LocalDateTime now = LocalDateTime.now();
+        return now.format(formatter);
+    }
+	public static String getCurrentDay() {
+        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("dd");
+        LocalDateTime now = LocalDateTime.now();
+        return now.format(formatter);
+    }
+	public static String getCurrentDateTimeMysql() {
+		DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
+		LocalDateTime now = LocalDateTime.now();
+		return now.format(formatter);
+    }
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/controller/MenuController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/controller/MenuController.java
index fb1b4b9..887c1c1 100644
--- a/src/main/java/in/gov/chennaicorporation/gccoffice/controller/MenuController.java
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/controller/MenuController.java
@@ -137,7 +137,9 @@ public class MenuController {
     	        	
     			}
     			else {
-    				subMenuHTML = subMenuHTML+"<a href=\"/gcc/"+menuItem.getUrl()+"\" class=\"menu-item\"><i class=\""+menuItem.getIcon()+"\"></i><span>"+menuItem.getName()+"</span></a>";
+    				if(menuItem.getOrderby()>0) {
+    					subMenuHTML = subMenuHTML+"<a href=\"/gcc/"+menuItem.getUrl()+"\" class=\"menu-item\"><i class=\""+menuItem.getIcon()+"\"></i><span>"+menuItem.getName()+"</span></a>";
+    				}
     			}
     		}
     		
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/controller/APIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/controller/APIController.java
index 6653c96..7e77446 100644
--- a/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/controller/APIController.java
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/controller/APIController.java
@@ -122,12 +122,12 @@ public class APIController {
 	}
 	
 	@GetMapping(value="/getComplaintList")
-	public List getComplaintList() {
-		return petition.getComplaintList();
+	public List getComplaintList(@RequestParam("loginId") String loginId) {
+		return petition.getComplaintList(loginId);
 	}
 	
 	@GetMapping(value="/getComplaintListByPetitionId")
-	public List getComplaintList(@RequestParam("petitionId") String petitionId) {
+	public List getComplaintListByPetitionId(@RequestParam("petitionId") String petitionId) {
 		return petition.getComplaintListByPetitionId(petitionId);
 	}
 	
@@ -153,4 +153,15 @@ public class APIController {
 		
 		return petition.saveComplanitStatus(createdBy, mapId, complaintStatus, complaintActionText, actionPage1, petitionId, petitionNo);
 	}
+	/*
+	// Import Old Data
+	@PostMapping("/upload")
+    public String uploadExcelFile() {
+        try {
+        	return petition.saveOldData();
+        } catch (Exception e) {
+            return "Error: " + e.getMessage();
+        }
+    }
+    */
 }
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/service/Petition.java b/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/service/Petition.java
index 67e78ad..3d6bd38 100644
--- a/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/service/Petition.java
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/service/Petition.java
@@ -1,11 +1,16 @@
 package in.gov.chennaicorporation.gccoffice.m_petition.service;
 
 import java.io.IOException;
+import java.io.InputStream;
+import java.math.BigDecimal;
 import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.Paths;
 import java.sql.PreparedStatement;
 import java.sql.Statement;
+import java.sql.Timestamp;
+import java.text.SimpleDateFormat;
+import java.time.LocalTime;
 import java.util.List;
 import java.util.Map;
 import java.util.stream.Collectors;
@@ -22,29 +27,45 @@ import org.springframework.stereotype.Service;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.multipart.MultipartFile;
 
+import ch.qos.logback.core.recovery.ResilientSyslogOutputStream;
 import in.gov.chennaicorporation.gccoffice.m_petition.data.ComplaintType;
 import in.gov.chennaicorporation.gccoffice.service.Base64Util;
+import in.gov.chennaicorporation.gccoffice.service.GetMappingUserDetails;
 import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
 
 import org.springframework.jdbc.core.PreparedStatementCreator;
 import org.springframework.jdbc.support.GeneratedKeyHolder;
 import org.springframework.jdbc.support.KeyHolder;
 
+//import org.apache.poi.ss.usermodel.*;
+//import org.apache.poi.xssf.usermodel.XSSFWorkbook;
+
+//import org.jsoup.Jsoup;
+
+import in.gov.chennaicorporation.gccoffice.controller.DateTimeUtil;
+
 @Service
 public class Petition {
 	private JdbcTemplate jdbcTemplate;
+	private JdbcTemplate jdbcOracleTemplate;
 	private final Environment environment;
 	private PetitionMaster petitionMaster;
+	private GetMappingUserDetails getMappingUserDetails;
 	
 	@Autowired
 	public Petition(Environment environment,PetitionMaster petitionMaster) {
 		this.environment = environment;
 		this.petitionMaster = petitionMaster;
+		this.getMappingUserDetails = getMappingUserDetails;
 	}
 	
 	@Autowired
-	public void setDataSource(@Qualifier("mysqlMayorPetitionDataSource") DataSource dataSource) {
+	public void setDataSource(
+			@Qualifier("mysqlMayorPetitionDataSource") DataSource dataSource,
+			@Qualifier("oracleDataSource") DataSource oracleDataSource
+			) {
 		this.jdbcTemplate = new JdbcTemplate(dataSource);
+		this.jdbcOracleTemplate = new JdbcTemplate(oracleDataSource);
 	}
 	 
 	@Transactional(readOnly = true)
@@ -142,7 +163,6 @@ public class Petition {
         }
     }
 	
-	
 	@Transactional(readOnly = true)
     public List<Map<String,Object>> getPetitionDetails(String petitionNo) {
         try {
@@ -273,7 +293,13 @@ public class Petition {
                     // Set the file path where you want to save it
                     String uploadDirectory = environment.getProperty("file.upload.directory");
                     String serviceFolderName = environment.getProperty("mp_foldername");
-                    uploadDirectory = uploadDirectory + serviceFolderName;
+                    
+                    var year = DateTimeUtil.getCurrentYear();
+            		var month = DateTimeUtil.getCurrentMonth();
+
+            		uploadDirectory = uploadDirectory + serviceFolderName;// + year + "/" + month;
+            		
+                    //uploadDirectory = uploadDirectory + serviceFolderName;
                     
                     // File name 
                     fileName = petitionId + "_" + fileName + "_" + petitionNoString + "_" + file.getOriginalFilename();
@@ -425,7 +451,7 @@ public class Petition {
     }
 	
 	@Transactional(readOnly = true)
-    public List<Map<String,Object>> getComplaintList() {
+    public List<Map<String,Object>> getComplaintList(String loginId) {
         try {
         	String sqlQuery = "SELECT "
             		+ "    p.`petition_id`, p.`cdate`, p.`created_by`, p.`isactive`, p.`isdelete`, p.`petition_no`, "
@@ -442,6 +468,14 @@ public class Petition {
             		+ "	   AND (ctype.`complaint_typeid` = pm.`complaint_typeid`) "
             		+ "    AND (p.`petition_id` = pm.`petition_id`)"
             		+ "    ";
+        	
+        	
+        	//if (officerMaster != null && !officerMaster.isEmpty() && loginId!='256') {
+        	if (!loginId.equals("256") && !loginId.equals("1")) {
+        		String officerMaster  = getMappingUserDetails.getOfficerMaster(loginId);
+        	    sqlQuery = sqlQuery + " AND (pm.off_id IN("+officerMaster+"))";
+        	}
+        	
         	System.out.println(sqlQuery);
         	List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
         	
@@ -628,7 +662,12 @@ public class Petition {
                     String serviceFolderName = environment.getProperty("mp_foldername");
                     String serviceActionFolderName = environment.getProperty("mp_action_Foldername");
                     
-                    uploadDirectory = uploadDirectory + serviceFolderName +"/"+ serviceActionFolderName;
+                    //uploadDirectory = uploadDirectory + serviceFolderName +"/"+ serviceActionFolderName;
+                    
+                    var year = DateTimeUtil.getCurrentYear();
+            		var month = DateTimeUtil.getCurrentMonth();
+
+            		uploadDirectory = uploadDirectory + serviceFolderName + serviceActionFolderName;// + year + "/" + month;
                     
                     // File name 
                     fileName = mapId + "_" + fileName + "_" + file.getOriginalFilename();
@@ -668,4 +707,333 @@ public class Petition {
             }
         return "success";
 	}
+	
+	// Import Old data
+	/*
+	public String HtmlDecoder(String tamilTxt) {
+        // HTML-encoded string
+        String encodedString = ""+tamilTxt;
+
+        // Decode the HTML-encoded string using Jsoup
+        String decodedString = Jsoup.parse(encodedString).text();
+        
+        // Output the decoded Tamil text
+        System.out.println(decodedString);
+        
+        return decodedString;
+    }
+	
+	@Transactional
+	public String importPetition(
+			String oldPetionid,
+			String petitionType,
+			String createdBy,
+			String petitionerName,
+			String petitionerMobile,
+			String petitionerComplaint,
+			String page1,
+			String page2,
+			String page3,
+			String page4,
+			String cdate,
+			String officerId,
+			String address,
+			String complainttxt,
+			String pin) {
+		
+		//System.out.println("I am from Service Page "+petitionerName);
+		
+		//String complaintNature = "";
+		int lastInsertId = 0;
+		String  sqlQuery = "INSERT INTO `petition` "
+                + "(`petition_type`,`created_by`, `petitioner_name`, `petitioner_mobile`, "
+                + "`petitioner_complaint`, `petitioner_complaint_txt`,`cdate`,`petitioner_address`,`complaint_nature`,`petitioner_pincode`) "
+                + "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
+		
+		try {
+			// Complaint Type List
+			List complaintTypelist = getComplaintTypeList();
+			// Convert the list of maps to a list of ComplaintType objects
+	        List<ComplaintType> complaintTypes = convertToComplaintTypes(complaintTypelist);
+
+			// Map complaint types
+	        String petitionerComplaint_txt = mapComplaintTypes(complaintTypes, petitionerComplaint);
+			
+			KeyHolder keyHolder = new GeneratedKeyHolder();
+			// Use JdbcTemplate's update method to execute the query with parameters
+			jdbcTemplate.update(connection -> {
+	            PreparedStatement ps = connection.prepareStatement(sqlQuery, Statement.RETURN_GENERATED_KEYS);
+	            ps.setString(1, petitionType);
+	            ps.setString(2, createdBy);
+	            ps.setString(3, petitionerName);
+	            ps.setString(4, petitionerMobile);
+	            ps.setString(5, petitionerComplaint);
+	            ps.setString(6, petitionerComplaint_txt);
+	            ps.setString(7, cdate);
+	            ps.setString(8, address);
+	            ps.setString(9, complainttxt);
+	            ps.setString(10, pin);
+	            return ps;
+	        }, keyHolder);
+			
+			// Get the last insert ID
+	        lastInsertId = (int) keyHolder.getKey().longValue();
+
+	        // Get the value of mp_ackno from application.properties
+	        String ackno = environment.getProperty("mp_ackno");
+	        String ackno_prefix = environment.getProperty("mp_ackno_prefix");
+
+	        // Convert ackno to int if needed
+	        int acknoInt = Integer.parseInt(ackno);
+
+	        // Calculate the petition number
+	        int petitionNo = (int) (lastInsertId + acknoInt);
+
+	        // Construct the petition number string
+	        String petitionNoString = ackno_prefix + petitionNo;
+
+	        // Update the petition number in the database
+	        updatePetitionNumber(lastInsertId, petitionNoString);
+	        
+	        // Add Petition Scan File in the database
+	        //addPetitionFile(createdBy,lastInsertId, petitionNoString, page1, page2, page3, page4);
+	     // Set the file path where you want to save it
+            String uploadDirectory = environment.getProperty("file.upload.directory");
+            String serviceFolderName = environment.getProperty("mp_foldername");
+            
+            var year = DateTimeUtil.getCurrentYear();
+    		var month = DateTimeUtil.getCurrentMonth();
+
+    		uploadDirectory = uploadDirectory + serviceFolderName;// + year + "/" + month;
+    		
+	        String fileName = page1;//uploadDirectory + "/" + page1;
+	        String fileSize = "10000";
+	        String fileType = "application/pdf";
+	        
+	        // Save the file path to a database
+            String  sqlFileQuery = "INSERT INTO `pentition_files`(`created_by`, `file_name`, `file_size`, `file_type`, `petition_no`, `petition_id`) "
+            		+ "VALUES ('"+createdBy+"','"+fileName+"','"+fileSize+"','"+fileType+"','"+petitionNoString+"','"+lastInsertId+"')";
+    		jdbcTemplate.update(sqlFileQuery);
+    		
+    		String lastInsertIdtxt = ""+lastInsertId;
+    		
+    		// map Complient Mapping
+    		if(mapComplientToOfficer(
+    				createdBy, lastInsertIdtxt, petitionNoString, petitionerComplaint, officerId
+    				)) {
+    			System.out.println("Complient Created : "+ lastInsertIdtxt);
+    			
+    			String sqlQueryMap = "SELECT * FROM petition_mapping WHERE (`petition_id`= ? AND petition_no = ?) AND `complaint_typeid`= ? AND (`isactive`=1 AND `isdelete`=0) LIMIT 1";
+    			List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQueryMap, lastInsertId, petitionNoString, petitionerComplaint);
+    			
+    			//System.out.println(sqlQueryMap);
+    			// Check if result is not empty
+    			if (result.size() > 0) {
+    			    // Retrieve mapId from the first result
+    			    String mapId = String.valueOf(result.get(0).get("mapid"));
+    			    
+    			    // Save the reply with the retrieved mapId
+    			    saveReplay(oldPetionid, mapId, createdBy, lastInsertIdtxt, petitionNoString);
+    			}
+    		}
+    		
+            return petitionNoString; // If no exception, query executed successfully
+            
+        } catch (Exception e) {
+            // Handle exception (e.g., log error)
+            e.printStackTrace();
+            return "error"; // Query execution failed
+        }
+	}
+	
+	public String saveReplay(String oldPetionid, String mapId, String createdBy, String petitionId, String petitionNo) {
+		try {
+			
+			String sqlQuery2 = "SELECT mr.PET_ID, mr.FLE_UPD, mr.REPLY_DT, mr.REPLY "
+					+ "FROM FAS.MAYOR_REPLY mr "
+					+ "WHERE mr.PET_ID = ? "
+					+ "AND ROWNUM <= 1";
+			List<Map<String, Object>> petData = jdbcOracleTemplate.queryForList(sqlQuery2,oldPetionid);
+			
+			int lastInsertId = 0;
+			for (Map<String, Object> pet : petData) {
+				
+				String complaintActionText = HtmlDecoder((String) pet.get("REPLY"));
+				String status = "close";
+				String fileName = (String) pet.get("FLE_UPD");
+				//String cdate = (String) pet.get("REPLY_DT");
+				String cdate ="";
+				Object replyDateObj = pet.get("REPLY_DT");
+
+				if (replyDateObj != null) {
+				    if (replyDateObj instanceof Timestamp) {
+				        Timestamp timestamp = (Timestamp) replyDateObj;
+				        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
+				         cdate = dateFormat.format(timestamp);
+				        // Now you can use cdate
+				    } else {
+				        // Handle other types or null case
+				         cdate = replyDateObj.toString();
+				    }
+				} else {
+				    // Handle the case where REPLY_DT is null
+				     cdate = "";
+				}
+				
+				String cdatetxt = cdate;
+				System.out.println(cdate);
+				
+				String  sqlQuery = "INSERT INTO `petition_action_taken` "
+		                + "(`created_by`, `off_id`, `mapid`, `status`, "
+		                + "`comments`, `cdate`) "
+		                + "VALUES (?, ?, ?, ?, ?, ?)";
+				
+				KeyHolder keyHolder = new GeneratedKeyHolder();
+				// Use JdbcTemplate's update method to execute the query with parameters
+				jdbcTemplate.update(connection -> {
+		            PreparedStatement ps = connection.prepareStatement(sqlQuery, Statement.RETURN_GENERATED_KEYS);
+		            ps.setString(1, createdBy);
+		            ps.setString(2, createdBy);
+		            ps.setString(3, mapId);
+		            ps.setString(4, status);
+		            ps.setString(5, complaintActionText);
+		            ps.setString(6, cdatetxt);
+		            return ps;
+		        }, keyHolder);
+				
+				// Get the last insert ID
+		        lastInsertId = (int)keyHolder.getKey().longValue();
+		        String actionID = "error";
+		        if(lastInsertId>0) {
+		        	// Update Complaint Status
+		        	updateMapComplientStatus(mapId,"close");
+		        	// Update Petition Status
+		        	updatePetitionStatus(petitionId,petitionNo);
+		        	// Add Action Scan File in the database
+			        //addActionFile(mapId,lastInsertId, actionPage1);
+		        	
+		        	String uploadDirectory = environment.getProperty("file.upload.directory");
+		            String serviceFolderName = environment.getProperty("mp_foldername");
+                    String serviceActionFolderName = environment.getProperty("mp_action_Foldername");
+                    
+		            var year = DateTimeUtil.getCurrentYear();
+		    		var month = DateTimeUtil.getCurrentMonth();
+
+		    		uploadDirectory = uploadDirectory + serviceFolderName + serviceActionFolderName;// + year + "/" + month;
+		    		
+			        //fileName = uploadDirectory + "/" + fileName;
+			        String fileSize = "10000";
+			        String fileType = "application/pdf";
+			        
+			        actionID = ""+lastInsertId;
+			        
+                    // Save the file path to a database
+                    String  sqlQueryFile = "UPDATE `petition_action_taken` SET "
+                    					+ "`file_name`='"+fileName+"', "
+                    					+ "`file_size`='"+fileSize+"', "
+                    					+ "`file_type`='"+fileType+"' "
+                    					+ "WHERE `solmapid`='"+actionID+"' LIMIT 1";
+            		jdbcTemplate.update(sqlQueryFile);
+            		
+			        
+		        }
+			}
+			return "Success";
+		}
+		catch (DataAccessException e) {
+            e.printStackTrace();
+            return "Fail " + e.getMessage();
+        }
+	}
+	
+	public String saveOldData() {
+        //try (InputStream is = file.getInputStream(); Workbook workbook = new XSSFWorkbook(is)) {
+            //Sheet sheet = workbook.getSheetAt(0); // Get the first sheet
+			String oldPetionid = "";
+            String petitionType = "";
+            String petDate = "";
+			String createdBy = "";
+			String petitionerName = "";
+			String petitionerMobile = "";
+			String petitionerComplaint = "50";
+			String page1 = null;
+			String page2 = null;
+			String page3 = null;
+			String page4 = null;
+			String officerId="";
+			String complaint_nature="";
+			String petitioner_address="";
+			String petitioner_pincode="";
+
+			String SqlQuery = "SELECT PET_ID, "
+	                + "PET_DT, "
+	                + "CASE "
+	                + "    WHEN PET_TYPE = 'P' THEN '1' "
+	                + "    WHEN PET_TYPE = 'O' THEN '6' "
+	                + "    WHEN PET_TYPE = 'N' THEN '5' "
+	                + "    ELSE PET_TYPE "  // Keep the original PET_TYPE if none of the conditions match
+	                + "END AS PET_TYPE, "
+	                + "PET_NM, "
+	                + "PET_DET, "
+	                + "COMP_TYPE, "
+	                + "FLE, "
+	                + "HQ_DEPT_ID, "
+	                + "OTHR_DEPT,  PET_ADD1 ,PET_ADD2 , PET_ADD3, PET_PIN "
+	                + "FROM FAS.MAYOR_PETITION "
+	                + "WHERE PET_DT > TO_DATE('2022-09-01', 'YYYY-MM-DD') "
+	                + "AND PET_ID LIKE 'M%'";
+			List<Map<String, Object>> petData = jdbcOracleTemplate.queryForList(SqlQuery);
+			
+			// Set the file path where you want to save it
+            String uploadDirectory = environment.getProperty("file.upload.directory");
+            String serviceFolderName = environment.getProperty("mp_foldername");
+            uploadDirectory = uploadDirectory + serviceFolderName;
+            int countData=0;
+			// Loop through the database data if necessary
+	        for (Map<String, Object> pet : petData) {
+	        	oldPetionid = (String) pet.get("PET_ID");
+	        	countData++;
+	            petitionType = (String) pet.get("PET_TYPE");
+	            petDate = pet.get("PET_DT").toString(); // Convert date to string
+	            createdBy = "1";
+	            petitionerName = HtmlDecoder((String) pet.get("PET_NM"));
+	            petitionerMobile = "";
+	            complaint_nature = HtmlDecoder((String) pet.get("PET_DET"));
+	            petitioner_address = (String) pet.get("PET_ADD1") + " " + pet.get("PET_ADD2") + " "+ pet.get("PET_ADD3");
+	            petitioner_address = HtmlDecoder(petitioner_address);
+	            petitioner_pincode = (String) pet.get("PET_PIN");
+	            //petitionerComplaint = ((String) pet.get("COMP_TYPE"));
+	            page1 = (String) pet.get("FLE");
+	            //officerId = (String) pet.get("OTHR_DEPT");
+	         // Retrieve the BigDecimal value and convert it to String
+	            BigDecimal officerIdBigDecimal = (BigDecimal) pet.get("OTHR_DEPT");
+	            if (officerIdBigDecimal != null) {
+	                officerId = officerIdBigDecimal.toString(); // Convert BigDecimal to String
+	            } else {
+	                officerId = ""; // In case the value is null
+	            }
+
+	            BigDecimal petitionerComplaintnum = (BigDecimal) pet.get("COMP_TYPE");
+	            if (petitionerComplaintnum != null) {
+	            	petitionerComplaint = petitionerComplaintnum.toString(); // Convert BigDecimal to String
+	            } else {
+	            	petitionerComplaint = ""; // In case the value is null
+	            }
+	            System.out.println("OnGoing : "+countData + " == " + oldPetionid);
+	            // Handle each record from the database
+	            importPetition(oldPetionid, petitionType, createdBy, petitionerName,
+	                    petitionerMobile, petitionerComplaint,
+	                    page1, page2, page3, page4, petDate,officerId,petitioner_address, complaint_nature, petitioner_pincode);
+	                    
+	            System.out.println("Completed : "+countData + " == " + oldPetionid);
+	        }
+	        
+	        return "Total Data Completed " + countData;
+       // } catch (Exception e) {
+         //   throw new RuntimeException("Failed to process Excel file: " + e.getMessage());
+       // }
+       
+    }
+     * 
+        */
 }
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/.DS_Store b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/.DS_Store
new file mode 100644
index 0000000..09c4e42
Binary files /dev/null and b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/.DS_Store differ
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmAPIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmAPIController.java
new file mode 100644
index 0000000..52e468e
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmAPIController.java
@@ -0,0 +1,722 @@
+package in.gov.chennaicorporation.gccoffice.nulm.controller;
+
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.time.LocalDate;
+import java.time.Month;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.core.env.Environment;
+import org.springframework.dao.DataAccessException;
+import org.springframework.dao.EmptyResultDataAccessException;
+import org.springframework.format.annotation.DateTimeFormat;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
+
+import in.gov.chennaicorporation.gccoffice.nulm.service.NulmService;
+
+@RequestMapping("/gcc/api/nulm")
+@RestController("nulmAPI")
+public class NulmAPIController {
+	
+	private final Environment environment;
+	
+	@Autowired
+	private NulmService nulmService;
+	
+	@Autowired
+    private JdbcTemplate nulmJdbcTemplate;
+	
+	@Autowired
+	public NulmAPIController(NulmService nulmService,JdbcTemplate nulmJdbcTemplate,Environment environment) {
+		this.nulmService = nulmService;
+		this.nulmJdbcTemplate = nulmJdbcTemplate;
+		this.environment = environment;
+	}
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysqlNulmDataSource") DataSource dataSource) {
+		this.nulmJdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	
+	@GetMapping("/getYear")
+    public ResponseEntity<List<Map<String, Object>>> getYear() {
+        List<Map<String, Object>> yearList = nulmService.getYearList();
+        return ResponseEntity.ok(yearList);
+    }
+    
+    @GetMapping("/getMonth")
+    public ResponseEntity<List<Map<String, Object>>> getMonth(int year) {
+    	//System.out.println("year: "+year);
+        List<Map<String, Object>> monthList = nulmService.getMonthList(year);
+        return ResponseEntity.ok(monthList);
+    }
+    
+    @GetMapping("/getGender")
+    public ResponseEntity<List<Map<String, Object>>> getGender() {
+    	
+        List<Map<String, Object>> genderList = nulmService.getGenderList();
+        return ResponseEntity.ok(genderList);
+    }
+    
+    @GetMapping("/getDivisionList")
+    public ResponseEntity<List<Map<String, Object>>> getDivisionList(@RequestParam(required = false) String zone) {
+        List<Map<String, Object>> divisionList = nulmService.getDivisionList(zone);
+        return ResponseEntity.ok(divisionList);
+    }
+	
+    
+	@PostMapping("/saveGroup")
+	public ResponseEntity<String> saveSchemeGroup(@RequestBody Map<String, Object> payload) {
+        try {
+            Map<String, Object> groupData = new HashMap<>(payload);
+            nulmService.saveSchemeGroup(groupData);
+            return ResponseEntity.ok("Self Help Group Saved Successfully");
+        } catch (Exception e) {
+            return ResponseEntity.status(500).body("Error saving Scheme Group: " + e.getMessage());
+        }
+    }
+   /* 
+    @PostMapping("/saveOrder")
+    public ResponseEntity<String> saveOrderDetails(@RequestBody Map<String, Object> payload) {
+        try {
+            Map<String, Object> orderData = new HashMap<>(payload);
+            nulmService.saveOrderDetails(orderData);
+            return ResponseEntity.ok("Order saved successfully.");
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.badRequest().body("Invalid data: " + e.getMessage());
+        } catch (Exception e) {
+            return ResponseEntity.status(500).body("Error saving order: " + e.getMessage());
+        }
+    }
+    */
+    @PostMapping("/saveStaff")
+    public ResponseEntity<String> saveStaffDetails(@RequestBody Map<String, Object> payload) {
+        try {
+        	nulmService.saveStaffDetails(payload);
+            return ResponseEntity.ok("Staff details saved successfully.");
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.badRequest().body("Error: " + e.getMessage());
+        } catch (Exception e) {
+            return ResponseEntity.status(500).body("Error saving staff details: " + e.getMessage());
+        }
+    }
+    
+    @PostMapping("/assignAppointment")
+    public ResponseEntity<String> assignOrderToEnrollments(@RequestBody Map<String, Object> requestBody) {
+        int orderId = (int) requestBody.get("orderId");
+        String inchargePhoneno = ((String) requestBody.get("incharge_phoneno"));
+        String designation = (String) requestBody.get("designation");
+        List<Integer> enrollmentIds = (List<Integer>) requestBody.get("enrollmentIds");
+
+        // Step 1: Retrieve the selected order
+        String getOrderSql = "SELECT * FROM order_details WHERE order_id = ?";
+        Map<String, Object> orderDetails;
+
+        try {
+            orderDetails = nulmJdbcTemplate.queryForMap(getOrderSql, orderId);
+        } catch (EmptyResultDataAccessException e) {
+            // Handle the case where no order is found
+            return new ResponseEntity<>("No order found with order_id: " + orderId, HttpStatus.NOT_FOUND);
+        }
+
+        if (orderDetails != null) {
+            // Step 2: Build the SQL for updating enrollments with dynamic IN clause
+            StringBuilder updateSql = new StringBuilder("UPDATE enrollment_table SET order_id = ?, appointed = 'Yes', facial_attendance = 'No', incharge_phoneno = ?, designation = ?, appointed_date = CURRENT_DATE WHERE enrollment_id IN (");
+
+            // Add placeholders for the IN clause based on the size of the enrollmentIds list
+            for (int i = 0; i < enrollmentIds.size(); i++) {
+                updateSql.append("?");
+                if (i < enrollmentIds.size() - 1) {
+                    updateSql.append(", ");
+                }
+            }
+            updateSql.append(")");
+
+            // Combine the orderId, inchargePhoneno, designation, and the list of enrollmentIds
+            List<Object> parameters = new ArrayList<>();
+            parameters.add(orderId);
+            parameters.add(inchargePhoneno);
+            parameters.add(designation);
+            parameters.addAll(enrollmentIds);
+
+            // Execute the update query
+            try {
+                nulmJdbcTemplate.update(updateSql.toString(), parameters.toArray());
+                return new ResponseEntity<>("Order assigned to enrollments and appointed successfully.", HttpStatus.OK);
+            } catch (DataAccessException e) {
+                // Handle any data access exceptions
+                return new ResponseEntity<>("Error updating enrollments: " + e.getMessage(), HttpStatus.INTERNAL_SERVER_ERROR);
+            }
+        }
+
+        return new ResponseEntity<>("Unexpected error occurred.", HttpStatus.INTERNAL_SERVER_ERROR);
+    }     
+    
+    @PostMapping("/assignDropout")
+    public ResponseEntity<String> assignDropout(@RequestBody Map<String, Object> requestBody) {
+        int orderId = (int) requestBody.get("orderId");
+        List<Integer> enrollmentIds = (List<Integer>) requestBody.get("enrollmentIds");
+
+        // Step 1: Retrieve the selected order
+        String getOrderSql = "SELECT * FROM order_details WHERE order_id = ?";
+        Map<String, Object> orderDetails;
+
+        try {
+            orderDetails = nulmJdbcTemplate.queryForMap(getOrderSql, orderId);
+        } catch (EmptyResultDataAccessException e) {
+            // Handle the case where no order is found
+            return new ResponseEntity<>("No order found with order_id: " + orderId, HttpStatus.NOT_FOUND);
+        }
+
+        if (orderDetails != null) {
+            // Step 2: Build the SQL for updating enrollments with dynamic IN clause
+            StringBuilder updateSql = new StringBuilder("UPDATE enrollment_table SET appointed = 'Drop', dropout = 'Yes', dropout_date = CURRENT_DATE WHERE enrollment_id IN (");
+
+            // Add placeholders for the IN clause based on the size of the enrollmentIds list
+            for (int i = 0; i < enrollmentIds.size(); i++) {
+                updateSql.append("?");
+                if (i < enrollmentIds.size() - 1) {
+                    updateSql.append(", ");
+                }
+            }
+            updateSql.append(") AND order_id = ?"); // Match the order_id in the WHERE clause
+
+            // Combine the list of enrollmentIds and the orderId
+            List<Object> parameters = new ArrayList<>(enrollmentIds);
+            parameters.add(orderId); // Add orderId at the end of the parameters list
+
+            // Execute the update query
+            try {
+                int rowsAffected = nulmJdbcTemplate.update(updateSql.toString(), parameters.toArray());
+                if (rowsAffected > 0) {
+                    return new ResponseEntity<>("Order assigned to enrollments has been Dropout successfully.", HttpStatus.OK);
+                } else {
+                    return new ResponseEntity<>("No matching records found to update.", HttpStatus.NOT_FOUND);
+                }
+            } catch (DataAccessException e) {
+                // Handle any data access exceptions
+                return new ResponseEntity<>("Error updating enrollments: " + e.getMessage(), HttpStatus.INTERNAL_SERVER_ERROR);
+            }
+        }
+
+        return new ResponseEntity<>("Unexpected error occurred.", HttpStatus.INTERNAL_SERVER_ERROR);
+    }
+ 
+    @GetMapping("/getAllSchemeGroupNames")
+    public ResponseEntity<List<Map<String, Object>>> getAllSchemeGroupNames() {
+        try {
+            List<Map<String,Object>> schemeGroupNames = nulmService.getAllSchemeGroupNames();
+            return ResponseEntity.ok(schemeGroupNames);
+        } catch (Exception e) {
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                                 .body(Collections.emptyList());
+        }
+    }
+   
+    @GetMapping("/getAllOrderNumber")
+    public ResponseEntity<List<String>> getAllOrderNumber() {
+        try {
+            List<String> schemeGroupNames = nulmService.getAllOrderNumber();
+            return ResponseEntity.ok(schemeGroupNames);
+        } catch (Exception e) {
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                                 .body(Collections.emptyList());
+        }
+    }
+   
+    @GetMapping("/getAllSchemeGroups")
+    public ResponseEntity<List<Map<String, Object>>> getAllSchemeGroups() {
+        try {
+            List<Map<String, Object>> groups = nulmService.getAllSchemeGroups();
+            return ResponseEntity.ok(groups);
+        } catch (Exception e) {
+            return ResponseEntity.status(500).body(null);
+        }
+    }
+    
+    ///////get all list of orders////////////////////////////
+    @GetMapping("/getAllOrders")
+    public ResponseEntity<List<Map<String, Object>>> getAllOrders() {
+    	try {
+            List<Map<String, Object>> groups = nulmService.getAllOrders();
+            return ResponseEntity.ok(groups);
+        } catch (Exception e) {
+            return ResponseEntity.status(500).body(null);
+        }
+    }
+    
+    @GetMapping("/getAllStaffNames")
+    public ResponseEntity<List<String>> getAllStaffNames() {
+        try {
+            List<String> schemeGroupNames = nulmService.getStaffName();
+            return ResponseEntity.ok(schemeGroupNames);
+        } catch (Exception e) {
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+                                 .body(Collections.emptyList());
+        }
+    }
+    
+    @GetMapping("/appointedCounts")
+    public ResponseEntity<Map<String, Integer>> getAppointedCounts(
+            @RequestParam(required = false) Integer groupId) {
+
+        try {
+            // Validate that groupId is provided
+            if (groupId == null) {
+                return ResponseEntity.badRequest().body(null); // You can also return a specific error message
+            }
+
+            // Call the service method to get the counts
+            Map<String, Integer> counts = nulmService.getAppointedCounts(groupId);
+            
+            return ResponseEntity.ok(counts);
+        } catch (Exception e) {
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null); // You can also return the error message
+        }
+    }
+  
+    @PostMapping("/markAbsent")
+    public ResponseEntity<String> markAbsent(@RequestParam int employeeId) {
+        int result = nulmService.markAbsentEntry(employeeId);
+
+        if (result > 0) {
+            return ResponseEntity.ok("Employee marked as absent successfully.");
+        } else {
+            return ResponseEntity.status(304).body("No update made. Employee may already be marked as absent or has attended.");
+        }
+    }
+    
+    @PostMapping("/markOverDuty")
+    public ResponseEntity<String> markOverDuty(@RequestParam int employeeId) {
+        int result = nulmService.markOverDuty(employeeId);
+
+        if (result > 0) {
+            return ResponseEntity.ok("Over Duty marked successfully.");
+        } else {
+            return ResponseEntity.status(304).body("No update made. Employee ID may not exist.");
+        }
+    }
+    
+    @PostMapping("/markAttendance")
+    public ResponseEntity<String> markAttendance(
+            @RequestParam int employeeId,
+            @RequestParam String markAttendance) {
+        try {
+            String result = nulmService.markAttendance(employeeId, markAttendance);
+            if ("Checked in successfully".equals(result) || "Checked out successfully".equals(result)) {
+                return ResponseEntity.ok(result);
+            } else {
+                return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(result);
+            }
+        } catch (Exception e) {
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to mark attendance");
+        }
+    }
+
+    
+    @GetMapping("/getAllOrderDetails")
+    public ResponseEntity<List<Map<String, Object>>> getAllOrderDetails() {
+        try {
+            List<Map<String, Object>> orderDetails = nulmService.getAllOrderDetails();
+            return ResponseEntity.ok(orderDetails);
+        } catch (Exception e) {
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(Collections.emptyList());
+        }
+    }
+    
+    @GetMapping("/enrollmentCountsbyorderId")
+    public ResponseEntity<Map<String, Integer>> getEnrollmentCounts(@RequestParam int orderId) {
+        Map<String, Integer> counts = nulmService.getAppointedCounts(orderId);
+        return ResponseEntity.ok(counts);
+    }
+    
+    
+    @GetMapping("/dropOutCounts")
+    public ResponseEntity<Map<String, Integer>> getDropCounts(@RequestParam int orderId) {
+        Map<String, Integer> counts = nulmService.getDropCounts(orderId);
+        return ResponseEntity.ok(counts);
+    }
+    
+    @GetMapping("/enrollmentCountsbygroupId")
+    public ResponseEntity<List<Map<String, Object>>> getEnrollmentbygroupId(@RequestParam int groupId) {
+        List<Map<String, Object>> enrollmentDetails = nulmService.getEnrollmentDetails(groupId);
+        return ResponseEntity.ok(enrollmentDetails);
+    }
+    
+    @GetMapping("/appointmentCountsbygroupId")
+    public ResponseEntity<List<Map<String, Object>>> getAppointedDetails(@RequestParam int groupId) {
+        List<Map<String, Object>> enrollmentDetails = nulmService.getAppointedDetails(groupId);
+        return ResponseEntity.ok(enrollmentDetails);
+    }
+    
+    @GetMapping("/getDepartment")
+    public ResponseEntity<List<Map<String, Object>>> getDepartment() {
+        List<Map<String, Object>> orderNumbers = nulmService.getDepartment();
+        return ResponseEntity.ok(orderNumbers);
+    }
+    
+    @GetMapping("/getEnrollmentdeatilsByID/{enrollmentId}")
+    public ResponseEntity<List<Map<String, Object>>> getEnrollmentsById(@PathVariable("enrollmentId") int enrollmentId) {
+        List<Map<String, Object>> enrollments = nulmService.getEnrollmentsById(enrollmentId);
+
+        if (enrollments.isEmpty()) {
+            return ResponseEntity.noContent().build(); // Return 204 No Content if no enrollments are found
+        }
+
+        return ResponseEntity.ok(enrollments); // Return 200 OK with the list of enrollments
+    }
+    
+    @GetMapping("/selfHelpGroups")
+    public ResponseEntity<List<Map<String, Object>>> getSelfHelpGroups() {
+        List<Map<String, Object>> selfHelpGroups = nulmService.getSelfHelpGroups();
+        return ResponseEntity.ok(selfHelpGroups);
+    }
+    
+    @GetMapping("/orderNumbers")
+    public ResponseEntity<List<Map<String, Object>>> getOrderNumbers() {
+        List<Map<String, Object>> orderNumbers = nulmService.getOrderNumbers();
+        return ResponseEntity.ok(orderNumbers);
+    }
+    
+    @PostMapping("/updateEnrollment/{id}")
+    public ResponseEntity<String> updateEnrollment(
+            @PathVariable("id") int id,
+            @RequestParam String dateOfBirth,
+            @RequestParam String gender,
+            @RequestParam int groupId, // New parameter
+            @RequestParam int orderId  // New parameter
+    ) {
+        int rowsAffected = nulmService.updateEnrollment(id, dateOfBirth, gender, groupId, orderId);
+
+        if (rowsAffected > 0) {
+            return new ResponseEntity<>("Enrollment updated successfully", HttpStatus.OK);
+        } else {
+            return new ResponseEntity<>("Enrollment update failed", HttpStatus.NOT_FOUND);
+        }
+    }
+    
+	@PostMapping("/saveOrder")
+    public ResponseEntity<String> saveOrderDetails(@RequestParam String order_number,
+                                                   @RequestParam @DateTimeFormat(pattern = "yyyy-MM-dd") Date order_date,
+                                                   @RequestParam int no_of_staffs,
+                                                   @RequestParam String order_description,
+                                                   @RequestParam MultipartFile ordercopyurl,
+                                                   @RequestParam String order_generated_by,
+                                                   @RequestParam String category,
+                                                   @RequestParam @DateTimeFormat(pattern = "yyyy-MM-dd") Date validity_date) {
+        String order_copy_url = "";
+        try {
+            // Fetch the upload directory and folder name from environment
+            String uploadDirectory = environment.getProperty("file.upload.directory");
+            String folderName = environment.getProperty("nulm_foldername");
+            String fileName = "OrderCopy_" + ordercopyurl.getOriginalFilename();
+
+            // Construct the file path
+            String filepath = uploadDirectory + folderName + "/" + fileName;
+            Path path = Paths.get(filepath);
+            
+            // Ensure the directory exists
+            Files.createDirectories(path.getParent());
+
+            // Write the file to the specified path
+            Files.write(path, ordercopyurl.getBytes());
+
+            // Set the order_copy_url to the relative file path for storing in DB
+            order_copy_url = folderName + "/" + fileName;
+
+            // Save the order details using the service method
+            String savedOrderNumber = nulmService.saveOrderDetails(
+                order_number,
+                order_date,
+                no_of_staffs,
+                order_description,
+                order_copy_url,
+                order_generated_by,
+                category,
+                validity_date
+            );
+
+            return ResponseEntity.ok("Order saved successfully with order number: " + savedOrderNumber);
+
+        } catch (Exception e) {
+            // Handle error scenarios
+            return ResponseEntity.status(500).body("Error saving order: " + e.getMessage());
+        }
+    }
+	 /*
+	@GetMapping("/staffInititeadList")
+    public ResponseEntity<List<Map<String, Object>>> getAttendanceWithInitiatedSalaryByGroupId(@RequestParam("inchargeName") String inchargeName,
+            @RequestParam("month") String month) {
+        List<Map<String, Object>> staffList = nulmService.getAttendanceWithInitiatedSalary(inchargeName, month);
+        return ResponseEntity.ok(staffList);
+    }
+	
+	@GetMapping("/staffInititeadList")
+    public ResponseEntity<List<Map<String, Object>>> getAttendanceWithInitiatedSalaryByGroupId(
+            @RequestParam(value = "inchargeId", required = false) String inchargeId,
+            @RequestParam(value = "month", required = false) String month,
+            @RequestParam(value = "inchargeName", required = false) String inchargeName,
+            @RequestParam(value = "zone", required = false) Integer zone) {
+
+        List<Map<String, Object>> staffList = nulmService.getAttendanceWithInitiatedSalary(inchargeId, month, inchargeName, zone);
+        return ResponseEntity.ok(staffList);
+    }
+	*/
+	
+	@GetMapping("/staffInititeadList")
+    public ResponseEntity<List<Map<String, Object>>> getAttendanceWithInitiatedSalaryByGroupId(
+            @RequestParam(value = "inchargeId", required = false) Integer inchargeId,
+            @RequestParam(value = "month", required = false) String month,
+            @RequestParam(value = "incharge_name", required = false) String inchargeName,
+            @RequestParam (value = "enrollmentIds", required = false) List<Integer> enrollmentIds) {
+
+        List<Map<String, Object>> staffList = nulmService.getAttendanceWithInitiatedSalary(inchargeId, month, inchargeName, enrollmentIds);
+        return ResponseEntity.ok(staffList);
+    }
+	
+	 @PostMapping("/salaryDetailUpdate")
+	    public ResponseEntity<String> addSalaryDetails(@RequestBody List<Map<String, Object>> requestList) {
+	        System.out.println("Received POST request with data: " + requestList);
+	        try {
+	            for (Map<String, Object> request : requestList) {
+	                int totalDaysPresent = Integer.parseInt(request.get("total_days_present").toString());
+	                int totalDaysOd = Integer.parseInt(request.get("total_days_od").toString());
+	                int totalDaysSalary = Integer.parseInt(request.get("total_days_salary").toString());
+	                int totalDaysAbsent = Integer.parseInt(request.get("total_days_absent").toString());
+	                String month = request.get("month").toString();
+	                int year = Integer.parseInt(request.get("year").toString());
+	                int salaryAmount = Integer.parseInt(request.get("salary_amount").toString());
+	                int enrollmentId = Integer.parseInt(request.get("enrollment_id").toString());
+	                int groupId = Integer.parseInt(request.get("group_id").toString());
+	                int wageId = Integer.parseInt(request.get("wage_id").toString());
+
+	                // Check if the month and year are valid for salary initiation (past month)
+	                if (isFutureOrCurrentMonth(month, year)) {
+	                    return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+	                            .body("Salary cannot be initiated for the current or future months. Please select a past month.");
+	                }
+
+	                String salaryStatus = "Initiated";
+
+	                // Call the service method to insert the salary details
+	                int rowsAffected = nulmService.addSalaryDetails(totalDaysPresent, totalDaysOd, totalDaysSalary, totalDaysAbsent, month, year, salaryAmount, salaryStatus, enrollmentId, groupId, wageId);
+
+	                if (rowsAffected <= 0) {
+	                    return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
+	                            .body("Failed to add salary details for enrollment ID: " + enrollmentId);
+	                }
+	            }
+	            return ResponseEntity.status(HttpStatus.CREATED)
+	                    .body("Salary details added successfully for all selected entries.");
+	        } catch (Exception e) {
+	            e.printStackTrace(); // Log the exception for debugging
+	            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+	                    .body("Invalid request data: " + e.getMessage());
+	        }
+	    }
+
+	    // Helper method to check if the month is future or current
+	    private boolean isFutureOrCurrentMonth(String month, int year) {
+	        // Get the current month and year
+	        LocalDate currentDate = LocalDate.now();
+	        Month currentMonth = currentDate.getMonth();
+	        int currentYear = currentDate.getYear();
+
+	        // Convert the string month from the request to Month enum
+	        Month requestMonth = Month.valueOf(month.toUpperCase()); // Ensure that month is passed in capitalized format like "JANUARY", "FEBRUARY", etc.
+
+	        // Compare the request month and year with the current date
+	        if (year > currentYear) {
+	            return true; // Future year
+	        } else if (year == currentYear && requestMonth.compareTo(currentMonth) >= 0) {
+	            return true; // Current or future month in the current year
+	        }
+	        return false; // Past month
+	    }
+	
+//	@PostMapping("/salaryDetailUpdate")
+//    public ResponseEntity<String> addSalaryDetails(@RequestBody List<Map<String, Object>> requestList) {
+//        System.out.println("Received POST request with data: " + requestList);
+//        try {
+//            for (Map<String, Object> request : requestList) {
+//                int totalDaysPresent = Integer.parseInt(request.get("total_days_present").toString());
+//                int totalDaysOd = Integer.parseInt(request.get("total_days_od").toString());
+//                int totalDaysSalary = Integer.parseInt(request.get("total_days_salary").toString());
+//                int totalDaysAbsent = Integer.parseInt(request.get("total_days_absent").toString());
+//                String month = request.get("month").toString();
+//                int year = Integer.parseInt(request.get("year").toString());
+//                int salaryAmount = Integer.parseInt(request.get("salary_amount").toString());
+//                int enrollmentId = Integer.parseInt(request.get("enrollment_id").toString());
+//                int groupId = Integer.parseInt(request.get("group_id").toString());
+//                int wageId = Integer.parseInt(request.get("wage_id").toString()); 
+//
+//                String salaryStatus = "Initiated";
+//
+//                // Call the service method to insert the salary details
+//                int rowsAffected = nulmService.addSalaryDetails(totalDaysPresent, totalDaysOd, totalDaysSalary, totalDaysAbsent, month, year, salaryAmount, salaryStatus, enrollmentId, groupId, wageId);
+//
+//                if (rowsAffected <= 0) {
+//                    return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to add salary details for enrollment ID: " + enrollmentId);
+//                }
+//            }
+//            return ResponseEntity.status(HttpStatus.CREATED).body("Salary details added successfully for all selected entries.");
+//        } catch (Exception e) {
+//            e.printStackTrace(); // Log the exception for debugging
+//            return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Invalid request data: " + e.getMessage());
+//        }
+//    }
+	
+	 @PostMapping("/update-salary-status")
+    public ResponseEntity<String> updateSalaryStatus(
+            @RequestParam List<Integer> enrollmentIds,
+            @RequestParam String month,
+            @RequestParam int year) {
+    	 System.out.println("Enrollment IDs: " + enrollmentIds);
+    	    System.out.println("Month: " + month);
+    	    System.out.println("Year: " + year);
+        nulmService.updateSalaryStatusToApproved(enrollmentIds, month, year);
+        return ResponseEntity.ok("Salary status updated to 'Approved' for the provided enrollments.");
+    }
+		
+	/***************API For Mobile Application*********************************/  
+	 /*
+    @GetMapping("/attendanceWithSalary")
+    public ResponseEntity<List<Map<String, Object>>> getAttendanceWithSalaryByInchargeId(
+            @RequestParam(value = "month", required = false) String month,
+            @RequestParam(value = "year", required = false) Integer year,
+            @RequestParam(value = "incharge_id", required = false) Integer inchargeId) {
+
+        try {
+            // Call the service method to fetch the data
+            List<Map<String, Object>> attendanceWithSalary = nulmService.getAttendanceWithSalaryByInchargeId(month, year, inchargeId);
+
+            // If no data is found, return a NOT FOUND response
+            if (attendanceWithSalary.isEmpty()) {
+                return ResponseEntity.status(404).body(List.of(Map.of("error", "No attendance records found for the specified parameters.")));
+            }
+
+            // Return the data in the response
+            return ResponseEntity.ok(attendanceWithSalary);
+        } catch (Exception ex) {
+            // Return a 500 Internal Server Error with the error message
+            return ResponseEntity.status(500).body(List.of(Map.of("error", "An error occurred while fetching attendance data: " + ex.getMessage())));
+        }
+    }
+    */
+	 
+	@GetMapping("/attendanceWithSalary")
+    public ResponseEntity<List<Map<String, Object>>> getAttendanceWithSalaryByInchargeId(
+            @RequestParam(value = "month", required = false) String month,
+            @RequestParam(value = "year", required = false) Integer year,
+            @RequestParam(value = "incharge_id", required = false) Integer inchargeId) {
+
+		 try {
+        	 // Call the service method to fetch the data
+        	List<Map<String, Object>> attendanceWithSalary = nulmService.getAttendanceWithSalaryByInchargeId(month, year, inchargeId);
+        	// If no data is found, return a NOT FOUND response total_days_salary, total_salary and total_days_absent
+        	if (attendanceWithSalary.isEmpty()) {
+                return ResponseEntity.status(404).body(List.of(Map.of("error", "No attendance records found for the specified parameters.")));
+            }
+           
+            
+        	for (Map<String, Object> aa : attendanceWithSalary) {
+        	    long days = ((Number) aa.get("total_days")).longValue();
+        	    long present = ((Number) aa.get("total_days_present")).longValue();
+        	    long od = ((Number) aa.get("total_days_od")).longValue();
+        	    long salaryPerDay = ((Number) aa.get("salary_per_day")).longValue();
+        	    
+        	    long totalPresent = present + od;
+        	    long totalAbsent = days - totalPresent;
+        	    long totalSalary = totalPresent * salaryPerDay;
+        	    
+        	    aa.put("total_salary", totalSalary);
+        	    aa.put("total_days_absent", totalAbsent);
+        	    aa.put("total_days_salary", totalPresent);
+        	}
+
+
+            // Return the data in the response
+            return ResponseEntity.ok(attendanceWithSalary);
+        } catch (Exception ex) {
+            // Return a 500 Internal Server Error with the error message
+            return ResponseEntity.status(500).body(List.of(Map.of("error", "An error occurred while fetching attendance data: " + ex.getMessage())));
+        }
+    }
+
+    @PostMapping("/salaryDetailInitiate")
+    public ResponseEntity<String> addInitiatedSalaryDetails(
+    		@RequestParam("total_days_present") List<Integer> totalDaysPresentList,
+    	    @RequestParam("total_days_od") List<Integer> totalDaysOdList,
+    	    @RequestParam("total_days_salary") List<Integer> totalDaysSalaryList,
+    	    @RequestParam("total_days_absent") List<Integer> totalDaysAbsentList,
+    	    @RequestParam("month") List<String> monthList,
+    	    @RequestParam("year") List<Integer> yearList,
+    	    @RequestParam("salary_amount") List<Integer> salaryAmountList,
+    	    @RequestParam("enrollment_id") List<Integer> enrollmentIdList,
+    	    @RequestParam("group_id") List<Integer> groupIdList,
+    	    @RequestParam("wage_id") List<Integer> wageIdList
+    	) {
+	    //System.out.println("Received POST request with form-data");
+
+	    try {
+	        // Iterate through each list to process the form data
+	        for (int i = 0; i < totalDaysPresentList.size(); i++) {
+	            int totalDaysPresent = totalDaysPresentList.get(i);
+	            int totalDaysOd = totalDaysOdList.get(i);
+	            int total_days_salary = totalDaysSalaryList.get(i);
+	            int totalDaysAbsent= totalDaysAbsentList.get(i);
+	            String month = monthList.get(i);
+	            int year = yearList.get(i);
+	            int salaryAmount = salaryAmountList.get(i);
+	            int enrollmentId = enrollmentIdList.get(i);
+	            int groupId = groupIdList.get(i);
+	            int wageId = wageIdList.get(i);
+
+	            String salaryStatus = "Initiated";
+
+	            // Call the service method to insert the salary details
+	            int rowsAffected = nulmService.addSalaryDetails(totalDaysPresent, totalDaysOd, total_days_salary, totalDaysAbsent, month, year, salaryAmount, salaryStatus, enrollmentId, groupId, wageId);
+
+	            if (rowsAffected <= 0) {
+	                return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to add salary details for enrollment ID: " + enrollmentId);
+	            }
+	        }
+	        return ResponseEntity.status(HttpStatus.CREATED).body("Salary details added successfully for all selected entries.");
+	    } catch (Exception e) {
+	        e.printStackTrace(); // Log the exception for debugging
+	        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Invalid request data: " + e.getMessage());
+	    }
+	}
+    
+    
+//    @GetMapping("/filtered-details")
+//    public List<Map<String, Object>> getFilteredSalaryDetails(
+//            @RequestParam(required = false) String month,
+//            @RequestParam(required = false) Integer year,
+//            @RequestParam(required = false) String salaryStatus) {
+//
+//        // Call the service method to get the filtered salary details
+//        return nulmService.getFilteredSalaryDetails(month, year, salaryStatus);
+//    }
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmController.java
new file mode 100644
index 0000000..5db72a0
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmController.java
@@ -0,0 +1,207 @@
+package in.gov.chennaicorporation.gccoffice.nulm.controller;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+import java.util.Map;
+
+import in.gov.chennaicorporation.gccoffice.nulm.service.NulmService;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+@Controller
+@RequestMapping("/gcc/nulm")
+public class NulmController {
+	
+	@Autowired
+	private NulmService nulmService;
+	
+	@GetMapping("/appointment")
+	public String viewappoinmentMaster(Model model) {
+		System.out.println("appointment");
+		return "modules/nulm/appointment";
+	}
+
+	@GetMapping("/self-enrollment")
+	public String viewselfenrollment(Model model) {
+		System.out.println("self-enrollment");
+		return "modules/nulm/staff-enrollment";
+	}
+
+	@GetMapping("/create-order")
+	public String viewcreateorder(Model model) {
+		System.out.println("create-order");
+		return "modules/nulm/create-order";
+	}
+	
+	@GetMapping("/scheme-group")
+	public String viewschemegroup(Model model) {
+		System.out.println("scheme-group");
+		return "modules/nulm/scheme-group";
+	}
+	
+	@GetMapping("/dropout")
+	public String viewappointmentscreengroup(Model model) {
+		System.out.println("dropout");
+		return "modules/nulm/dropout";
+	}
+	
+	@GetMapping("/updateStaff")
+    public String viewUpdateScreen(
+            @RequestParam(value = "department", required = false) String department,
+            @RequestParam(value = "division", required = false) String division,
+            Model model) {
+
+        // Fetch the full list or filtered list based on parameters
+        List<Map<String, Object>> enrollments = nulmService.getEnrollments(department, null);
+
+        // Add the list to the model to be accessed in the view
+        model.addAttribute("enrollments", enrollments);
+        model.addAttribute("selectedDepartment", department);  // Pass the selected department
+
+        // Return the view name
+        return "modules/nulm/updated-staff";
+    }
+		
+	@GetMapping("/salaryDetails")
+	public String getSalaryDetails(
+	         @RequestParam(value = "month", required = false) String month,
+	         @RequestParam(value = "year", required = false) Integer year,  // Use Integer instead of int
+	         Model model) {
+
+		 List<Map<String, Object>> salaryDetails = new ArrayList<>();
+		
+		 // Check if month and year are provided
+		 if (month != null && year != null) {
+		     salaryDetails = nulmService.getAttendanceWithSalary(month, year);
+		 } else {
+		     // Handle case when no month or year is provided
+		     model.addAttribute("message", "Please select a month and year.");
+		 }
+		
+		 model.addAttribute("salaryCounts", salaryDetails);
+		 System.out.println("salarydetails for month: " + month + ", year: " + year);
+		 return "modules/nulm/salary-details";
+	}
+	/*
+	@GetMapping("/salary-approve")
+	public String viewSalaryApproveScreen(@RequestParam(required = false) String month,
+	                                      @RequestParam(required = false) Integer year,
+	                                      @RequestParam(required = false) String salaryStatus,
+	                                      Model model) {
+	    List<Map<String, Object>> salaryInitiatedCounts;
+
+	    // If both month and year are provided, fetch the data; otherwise, return an empty list
+	    if (month != null && year != null) {
+	        salaryInitiatedCounts = nulmService.getFilteredSalaryDetails(month, year, salaryStatus);
+	    } else {
+	        salaryInitiatedCounts = Collections.emptyList(); // Empty list if no month and year are provided
+	    }
+
+	    model.addAttribute("salaryInitiatedCounts", salaryInitiatedCounts);
+	    return "modules/nulm/salary-approve";
+	}
+	*/
+	@GetMapping("/salary-approve")
+	public String viewSalaryApproveScreen(@RequestParam(required = false) String month,
+	                                      @RequestParam(required = false) Integer year,
+	                                      @RequestParam(required = false) String salaryStatus,  // Added department parameter
+	                                      Model model) {
+	    
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+		List<Map<String, Object>> salaryInitiatedCounts;
+
+	    // Fetch data if both month and year are provided, otherwise return an empty list
+	    if (month != null && year != null) {
+	        salaryInitiatedCounts = nulmService.getFilteredSalaryDetails(month, year, salaryStatus,LoginUserId); // Pass department to the service method
+	    } else {
+	        salaryInitiatedCounts = Collections.emptyList(); // Empty list if no month and year are provided
+	    }
+
+	    model.addAttribute("salaryInitiatedCounts", salaryInitiatedCounts);
+	    
+	    return "modules/nulm/salary-approve";
+	}
+	
+	@GetMapping("/salary-report")
+	public String viewSalaryReport(
+	        @RequestParam(required = false) String month, 
+	        @RequestParam(required = false) Integer year, 
+	        @RequestParam(required = false) String salaryStatus, 
+	        @RequestParam(required = false) String groupName,
+	        Model model) {
+		
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		
+	    // Initialize an empty salaryReport list
+	    List<Map<String, Object>> salaryReport = new ArrayList<>();
+	    
+	    // Only fetch the report if month and year are provided
+	    if (month != null && year != null) {
+	        salaryReport = nulmService.getSalaryReport(month, year, salaryStatus, groupName, LoginUserId);
+	    }
+
+	    // Add the fetched data to the model
+	    model.addAttribute("salaryReport", salaryReport);
+	    
+	    return "modules/nulm/salary-report";  // Returns the view 'salary-report'
+	}
+	
+
+	@GetMapping("/salary-zonereport")
+	public String viewZoneWiseReport(
+	        @RequestParam(required = false) String month, 
+	        @RequestParam(required = false) Integer year, 
+	        @RequestParam(required = false) String salaryStatus, 
+	        @RequestParam(required = false) String groupName, 
+	        @RequestParam(required = false) String zone,
+	        @RequestParam(required = false) String division,
+	        Model model) {
+		//System.out.println("Zone: "+zone);
+		
+	    // Initialize an empty salaryReport list
+	    List<Map<String, Object>> zoneWiseReport = new ArrayList<>();
+	    
+	    // Only fetch the report if month, year and zone are provided
+	    if (month != null && year != null && zone!= null) {
+	        zoneWiseReport = nulmService.getZoneWiseReport(month, year, salaryStatus ,groupName, zone, division);
+	    }
+
+	    // Add the fetched data to the model
+	    model.addAttribute("zonewiseReport", zoneWiseReport);
+	    
+	    return "modules/nulm/zone-wise-report";  // Returns the view 'salary-zonereport'
+	}
+	
+	@GetMapping("/attendance-report")
+	public String viewAttendanceReport( 
+	        @RequestParam(required = false) String fromdate,
+	        @RequestParam(required = false) String todate,
+	        @RequestParam(required = false) String groupName, 
+	        @RequestParam(required = false) String zone,
+	        @RequestParam(required = false) String division,
+	        Model model) {
+		
+	    // Initialize an empty salaryReport list
+	    List<Map<String, Object>> attendanceReport = new ArrayList<>();
+	    
+	    // Only fetch the report if month, year and zone are provided
+	    if (division != null && zone!= null) {
+	        attendanceReport = nulmService.getAttendanceReport(fromdate ,todate ,groupName, zone, division);
+	    }
+
+	    // Add the fetched data to the model
+	    model.addAttribute("attendanceReport", attendanceReport);
+	    
+	    return "modules/nulm/attendance-report";  
+	}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/package-info.java
new file mode 100644
index 0000000..ed06c39
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.nulm.controller;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository.java b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository.java
new file mode 100644
index 0000000..2395748
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository.java
@@ -0,0 +1,279 @@
+package in.gov.chennaicorporation.gccoffice.nulm.repository;
+
+import java.sql.ResultSet;
+import java.sql.SQLException;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.RowMapper;
+import org.springframework.stereotype.Repository;
+
+@Repository
+public class NulmRepository {
+	
+	@Autowired
+	private JdbcTemplate nulmJdbcTemplate;
+	
+	@Autowired
+	private JdbcTemplate jdbcTemplate;
+	 
+	@Autowired
+	public NulmRepository(JdbcTemplate nulmJdbcTemplate,JdbcTemplate jdbcTemplate) {
+		this.nulmJdbcTemplate = nulmJdbcTemplate;
+		this.jdbcTemplate = jdbcTemplate;
+	}
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysqlNulmDataSource") DataSource dataSource) {
+		this.nulmJdbcTemplate = new JdbcTemplate(dataSource);
+	}
+		
+/////////////////////////// Order Repository ///////////////////////////////
+public void saveOrderDetails(Map<String, Object> orderData) {
+String sql = "INSERT INTO order_details (order_number, order_date, no_of_staffs, order_description, order_copy_url, order_generated_by, created_date, validity_date, order_status, isactive, isdelete) " +
+		"VALUES (?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP, ?, " +
+		"CASE WHEN ? >= ? THEN 'Active' ELSE 'Expired' END, 1, 0)";
+nulmJdbcTemplate.update(sql,
+		  orderData.get("orderNumber"),
+          orderData.get("orderDate"),
+          orderData.get("noOfStaffs"),
+          orderData.get("orderDescription"),
+          orderData.get("orderCopyUrl"),
+          orderData.get("orderGeneratedBy"),
+          orderData.get("validityDate"),
+          orderData.get("validityDate"),
+          orderData.get("orderDate"));
+}
+
+/////To get all the list of orders/////////////////////////////////
+public List<Map<String, Object>> getAllOrders() {
+    String sql = "SELECT od.*, " +
+                 "SUM(CASE WHEN ed.appointed = '1' THEN 1 ELSE 0 END) AS appointed_yes_count " +
+                 "FROM order_details od " +
+                 "LEFT JOIN enrollment_table ed ON od.order_id = ed.order_id " +
+                 "GROUP BY od.order_id, od.order_number, od.order_date, od.order_generated_by, od.order_description, od.no_of_staffs, od.category, od.validity_date, od.order_copy_url";
+
+    // Fetch the list of orders with the appointed counts
+    List<Map<String, Object>> orderLists = nulmJdbcTemplate.queryForList(sql);
+
+    // Add the calculated value (appointed_yes_count - no_of_staffs) to each order map
+    for (Map<String, Object> order : orderLists) {
+        int appointedYesCount = ((Number) order.get("appointed_yes_count")).intValue();
+        int noOfStaffs = ((Number) order.get("no_of_staffs")).intValue();
+
+        // Calculate the output value
+        int outputValue = noOfStaffs-appointedYesCount;
+
+        // Add the output value to the order map
+        order.put("output_value", outputValue);
+    }
+
+    return orderLists;
+}
+//public List<Map<String, Object>> getAllOrders() {
+//    String sql = "SELECT od.*, " +
+//                 "SUM(CASE WHEN ed.appointed = 'Yes' THEN 1 ELSE 0 END) AS appointed_yes_count, " +
+//                 "SUM(CASE WHEN ed.appointed = 'No' THEN 1 ELSE 0 END) AS appointed_no_count " +
+//                 "FROM order_details od " +
+//                 "LEFT JOIN enrollment_table ed ON od.order_id = ed.order_id " +
+//                 "GROUP BY od.order_id, od.order_number, od.order_date, od.order_generated_by, od.order_description, od.no_of_staffs, od.validity_date";
+//
+//    List<Map<String, Object>> orderLists = nulmJdbcTemplate.queryForList(sql);
+//    return orderLists;
+//}
+
+public List<Map<String, Object>> getAllOrderDetails() {
+    String sql = "SELECT order_id, order_number FROM order_details";
+    
+    // Use queryForList to fetch the data
+    return nulmJdbcTemplate.queryForList(sql);
+}
+
+public List<String> getAllOrderNumber() {
+    String sql = "SELECT order_number FROM order_details";
+    
+    // Use query with a RowMapper to map each row to a String
+    return nulmJdbcTemplate.query(sql, new RowMapper<String>() {
+        @Override
+        public String mapRow(ResultSet rs, int rowNum) throws SQLException {
+            return rs.getString("order_number");
+        }
+    });
+}
+
+
+/////////////////////////// Scheme Group Repository ///////////////////////////////
+public void saveSchemeGroup(Map<String, Object> groupData) {
+String sql = "INSERT INTO suyaudavi_kuzhu (group_name, incharge_name, incharge_phoneno, bank_name, bank_branch, ifsc_code, bank_accountno, created_date, isactive, isdelete) " +
+"VALUES (?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP, 1, 0)";
+nulmJdbcTemplate.update(sql, 
+		groupData.get("groupName"),
+		groupData.get("inchargeName"),
+		groupData.get("inchargePhoneNo"),
+		groupData.get("bankName"),
+		groupData.get("bankBranch"),
+		groupData.get("ifscCode"),
+		groupData.get("bankAccountno"));
+}
+
+public List<Map<String, Object>> getAllSchemeGroupNames() {
+    String sql = "SELECT group_id,group_name FROM suyaudavi_kuzhu";
+    
+    // Use query with a RowMapper to map each row to a String
+    return nulmJdbcTemplate.queryForList(sql);
+}
+
+public List<Map<String, Object>> getAllSchemeGroups() {
+    String sql = "SELECT k.group_name, k.incharge_name, k.incharge_phoneno, k.created_date, " +
+                 "SUM(CASE WHEN e.appointed = '1' THEN 1 ELSE 0 END) AS appointed_count, " +
+                 "SUM(CASE WHEN e.appointed = '0' AND e.isactive = 1 THEN 1 ELSE 0 END) AS available_count, " +
+                 "SUM(CASE WHEN e.isactive = 1 AND e.dropout = '1' THEN 1 ELSE 0 END) AS dropout_count " +
+                 "FROM suyaudavi_kuzhu k " +
+                 "LEFT JOIN enrollment_table e ON k.group_id = e.group_id " +
+                 "GROUP BY k.group_name, k.incharge_name, k.incharge_phoneno, k.created_date";
+    
+    return nulmJdbcTemplate.queryForList(sql);
+}
+
+//public List<String> getAllSchemeGroupNames() {
+//    String sql = "SELECT group_name FROM suyaudavi_kuzhu";
+//    
+//    // Use query with a RowMapper to map each row to a String
+//    return nulmJdbcTemplate.query(sql, new RowMapper<String>() {
+//        @Override
+//        public String mapRow(ResultSet rs, int rowNum) throws SQLException {
+//            return rs.getString("group_name");
+//        }
+//    });
+//}
+
+
+
+/////////////////////////// Staff Detail Repository ///////////////////////////////
+private RowMapper<Integer> groupIdRowMapper = new RowMapper<Integer>() {
+    @Override
+    public Integer mapRow(ResultSet rs, int rowNum) throws SQLException {
+        return rs.getInt("group_id");
+    }
+};
+
+// Method to retrieve group_id based on scheme_group_name
+public Integer getGroupIdBySchemeGroupName(String groupName) {
+    String sql = "SELECT group_id FROM suyaudavi_kuzhu WHERE group_name = ?";
+    
+    // Correct use of queryForObject with RowMapper and parameter
+    return jdbcTemplate.queryForObject(sql, groupIdRowMapper, groupName);
+}
+
+
+public void saveStaffDetails(Map<String, Object> staffData) {
+    String sql = "INSERT INTO enrollment_table (name, employee_id, phone_number, gender, date_of_birth, education_qualification, address, additional_skills, aadhar_card_url, ration_card_url, bank_passbook_url, staff_photo_url, created_date, group_id, appointed, facial_attendance, isactive, isdelete) " +
+            "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP, ?, 'No', 'No', 1, 0)";
+
+nulmJdbcTemplate.update(sql, 
+          staffData.get("name"),
+          staffData.get("employeeId"),
+          staffData.get("phoneNumber"),
+          staffData.get("gender"),
+          staffData.get("dateOfBirth"),
+          staffData.get("educationQualification"),
+          staffData.get("address"), // Ensure address is included
+          staffData.get("additionalSkills"),
+          staffData.get("aadharCardUrl"),
+          staffData.get("rationCardUrl"),
+          staffData.get("bankPassbookUrl"),
+          staffData.get("staffPhotoUrl"),
+          staffData.get("groupId"));
+}
+
+
+public List<String> getStaffName() {
+    String sql = "SELECT name FROM enrollment_table ";
+    
+    // Use query with a RowMapper to map each row to a String
+    return nulmJdbcTemplate.query(sql, new RowMapper<String>() {
+        @Override
+        public String mapRow(ResultSet rs, int rowNum) throws SQLException {
+            return rs.getString("name");
+        }
+    });
+}
+
+
+//////////////////Attendance Repository/////////////////////////////////////////////////////////////////////////////
+
+
+
+
+////////////////Appointment Repository/////////////////////////////////////////////////////////////////
+//Existing RowMappers
+//private RowMapper<Integer> groupIdsRowMapper = new RowMapper<Integer>() {
+// @Override
+// public Integer mapRow(ResultSet rs, int rowNum) throws SQLException {
+//     return rs.getInt("group_id");
+// }
+//};
+//
+//private RowMapper<Integer> enrollmentIdRowMapper = new RowMapper<Integer>() {
+// @Override
+// public Integer mapRow(ResultSet rs, int rowNum) throws SQLException {
+//     return rs.getInt("enrollment_id");
+// }
+//};
+//
+//private RowMapper<Integer> orderIdRowMapper = new RowMapper<Integer>() {
+// @Override
+// public Integer mapRow(ResultSet rs, int rowNum) throws SQLException {
+//     return rs.getInt("order_id");
+// }
+//};
+//
+////Method to retrieve group_id based on scheme_group_name
+//public Integer getGroupIdsBySchemeGroupName(String schemeGroupName) {
+// String sql = "SELECT group_id FROM scheme_group WHERE scheme_group_name = ?";
+// return jdbcTemplate.queryForObject(sql, groupIdsRowMapper, schemeGroupName);
+//}
+//
+////Method to retrieve staff_id based on staff_name
+//public Integer getEnrollmentIdByStaffName(String name) {
+// String sql = "SELECT enrollment_id FROM enrollment_table WHERE name = ?";
+// return jdbcTemplate.queryForObject(sql, enrollmentIdRowMapper, name);
+//}
+//
+////Method to retrieve order_id based on both order_number and order_title
+//public Integer getOrderIdByOrderNumberAndTitle(int orderNumber, String orderTitle) {
+// String sql = "SELECT order_id FROM order_details WHERE order_number = ? AND order_title = ?";
+// return jdbcTemplate.queryForObject(sql, orderIdRowMapper, orderNumber, orderTitle);
+//}
+//
+////Method to save appointment
+//public void saveAppointment(Map<String, Object> appointmentData) {
+// String schemeGroupName = (String) appointmentData.get("schemeGroupName");
+// Integer groupId = getGroupIdsBySchemeGroupName(schemeGroupName);
+//
+// String name = (String) appointmentData.get("name");
+// Integer staffId = getEnrollmentIdByStaffName(name);
+//
+// int orderNumber = (int) appointmentData.get("orderNumber");
+// String orderTitle = (String) appointmentData.get("orderTitle");
+// Integer orderId = getOrderIdByOrderNumberAndTitle(orderNumber, orderTitle);
+//
+// String sql = "INSERT INTO appointment (zone, ward, supervisor_name, department, date_of_appointment, created_at, group_id, staff_id, order_id, is_active, is_delete) " +
+//              "VALUES (?, ?, ?, ?, ?, CURRENT_TIMESTAMP, ?, ?, ?, 1, 0)";
+// nulmJdbcTemplate.update(sql, 
+//        appointmentData.get("zone"),
+//        appointmentData.get("ward"),
+//        appointmentData.get("supervisorName"),
+//        appointmentData.get("department"),
+//        appointmentData.get("dateOfAppointment"),
+//        groupId,
+//        staffId,
+//        orderId);
+//}
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/repository/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/repository/package-info.java
new file mode 100644
index 0000000..d6398ad
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/repository/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.nulm.repository;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/service/NulmService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/service/NulmService.java
new file mode 100644
index 0000000..57551d9
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/service/NulmService.java
@@ -0,0 +1,1771 @@
+package in.gov.chennaicorporation.gccoffice.nulm.service;
+
+import java.sql.Timestamp;
+import java.time.LocalDate;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.Date;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Objects;
+import java.util.stream.Collectors;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.dao.DataAccessException;
+import org.springframework.dao.EmptyResultDataAccessException;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import in.gov.chennaicorporation.gccoffice.nulm.repository.NulmRepository;
+
+@Service
+public class NulmService {
+	
+	@Autowired
+	private NulmRepository nulmRepository;
+	
+	@Autowired
+	private JdbcTemplate jdbcTemplate;
+	
+	@Autowired
+	public NulmService(NulmRepository nulmRepository,JdbcTemplate jdbcTemplate) {
+		this.nulmRepository = nulmRepository;
+		this.jdbcTemplate = jdbcTemplate;
+	}
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysqlNulmDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	 public void saveOrderDetails(Map<String, Object> orderData) {
+	   nulmRepository.saveOrderDetails(orderData);
+	    }
+	 
+	 public void saveSchemeGroup(Map<String, Object> groupData) {
+		 nulmRepository.saveSchemeGroup(groupData);
+	    }
+	 
+	 public void saveStaffDetails(Map<String, Object> staffData) {
+		 nulmRepository.saveStaffDetails(staffData);
+	    }
+	 
+		
+	 public List<Map<String, Object>> getYearList() {
+	 		    String sql = "SELECT DISTINCT year(coalesce(indatetime,oddatetime,leavedatetime)) as year FROM attendance ";
+	 		    return jdbcTemplate.queryForList(sql);
+	 		}
+	 		
+	 public List<Map<String, Object>> getMonthList(int year) {
+	 		    String sql = "SELECT DISTINCT MONTHNAME(coalesce(indatetime,oddatetime,leavedatetime)) as month FROM attendance where "
+	 		    		+ "year(coalesce(indatetime,oddatetime,leavedatetime)) = ? ";
+	 		    return jdbcTemplate.queryForList(sql, year);
+	 		}
+	 		
+	 public List<Map<String, Object>> getGenderList() {
+	 		    String sql = "SELECT DISTINCT(gender) as gender FROM enrollment_table ";
+	 		    return jdbcTemplate.queryForList(sql);
+	 		}
+
+
+
+	 public List<Map<String, Object>> getDivisionList(String zone) {
+	 			String sql = "SELECT DISTINCT(division) as division FROM enrollment_table where zone = ? ";
+	 		    return jdbcTemplate.queryForList(sql, zone);
+	 		}
+
+	 
+	 public void assignOrderToEnrollments(int orderId, List<Integer> enrollmentIds) {
+		    // Step 1: Retrieve the selected order
+		    String getOrderSql = "SELECT * FROM order_details WHERE order_id = ?";
+		    Map<String, Object> orderDetails;
+		    try {
+		        orderDetails = jdbcTemplate.queryForMap(getOrderSql, orderId);
+		    } catch (EmptyResultDataAccessException e) {
+		        // Handle the case where no order is found
+		        System.err.println("No order found with order_id: " + orderId);
+		        return; // Exit the method if the order is not found
+		    }
+
+		    if (orderDetails != null) {
+		        // Step 2: Build the SQL for updating enrollments with dynamic IN clause
+		        StringBuilder updateSql = new StringBuilder("UPDATE enrollment_table SET order_id = ?, appointed = 'Yes', facial_attendance = 'No', appointed_date = CURRENT_DATE WHERE enrollment_id IN (");
+
+		        // Add placeholders for the IN clause based on the size of the enrollmentIds list
+		        for (int i = 0; i < enrollmentIds.size(); i++) {
+		            updateSql.append("?");
+		            if (i < enrollmentIds.size() - 1) {
+		                updateSql.append(", ");
+		            }
+		        }
+		        updateSql.append(")");
+
+		        // Combine the orderId with the list of enrollmentIds
+		        List<Object> parameters = new ArrayList<>();
+		        parameters.add(orderId);
+		        parameters.addAll(enrollmentIds);
+
+		        // Execute the update query
+		        try {
+		        	jdbcTemplate.update(updateSql.toString(), parameters.toArray());
+		        } catch (DataAccessException e) {
+		            // Handle any data access exceptions
+		            System.err.println("Error updating enrollments: " + e.getMessage());
+		        }
+		    }
+		}
+	 
+	 
+	 public Map<String, Integer> getAppointedCounts(int orderId) {
+		    // Query to get counts from the enrollment_table
+		    String enrollmentQuery = "SELECT " +
+		                             "COUNT(CASE WHEN appointed = 'Yes' THEN 1 END) AS total_yes, " +
+		                             "COUNT(CASE WHEN appointed = 'No' THEN 1 END) AS total_no " +
+		                             "FROM enrollment_table " +
+		                             "WHERE order_id = ?";
+
+		    // Query to get total_count from order_details
+		    String orderDetailsQuery = "SELECT no_of_staffs AS total_count " +
+		                               "FROM order_details " +
+		                               "WHERE order_id = ?";
+
+		    // Execute the first query
+		    Map<String, Integer> counts = jdbcTemplate.queryForObject(enrollmentQuery, new Object[]{orderId}, (rs, rowNum) -> {
+		        Map<String, Integer> result = new HashMap<>();
+		        result.put("total_yes", rs.getInt("total_yes"));
+		        result.put("total_no", rs.getInt("total_no"));
+		        return result;
+		    });
+
+		    // Execute the second query
+		    Integer totalCount = jdbcTemplate.queryForObject(orderDetailsQuery, new Object[]{orderId}, Integer.class);
+
+		    // Add the total_count to the result map
+		    counts.put("total_count", totalCount);
+
+		    // Calculate the output value: total_count - total_yes
+		    int outputValue = totalCount - counts.get("total_yes");
+
+		    // Add the output value to the result map
+		    counts.put("output_value", outputValue);
+
+		    return counts;
+		}
+	
+	 public Map<String, Integer> getDropCounts(int orderId) {
+		    // Query to get counts from the enrollment_table
+		    String enrollmentQuery = "SELECT " +
+		                             "COUNT(CASE WHEN appointed = 'Yes' THEN 1 END) AS total_yes, " +
+		                             "COUNT(CASE WHEN dropout = 'Yes' THEN 1 END) AS total_drop, " +
+		                             "COUNT(CASE WHEN appointed IS NULL THEN 1 END) AS total_null " +
+		                             "FROM enrollment_table " +
+		                             "WHERE order_id = ?";
+
+		    // Query to get total_count from order_details
+		    String orderDetailsQuery = "SELECT no_of_staffs AS total_count " +
+		                               "FROM order_details " +
+		                               "WHERE order_id = ?";
+
+		    // Execute the first query
+		    Map<String, Integer> counts = jdbcTemplate.queryForObject(enrollmentQuery, new Object[]{orderId}, (rs, rowNum) -> {
+		        Map<String, Integer> result = new HashMap<>();
+		        result.put("total_yes", rs.getInt("total_yes"));
+		        result.put("total_drop", rs.getInt("total_drop"));
+		        result.put("total_null", rs.getInt("total_null"));
+		        return result;
+		    });
+
+		    // Execute the second query
+		    Integer totalCount = jdbcTemplate.queryForObject(orderDetailsQuery, new Object[]{orderId}, Integer.class);
+
+		    // Add the total_count to the result map
+		    counts.put("total_count", totalCount);
+
+		    return counts;
+		}
+
+	 public List<Map<String, Object>> getAllSchemeGroupNames() {
+	        return nulmRepository.getAllSchemeGroupNames();
+	    }
+
+
+		public List<Map<String, Object>> getEnrollmentDetails(int groupId) {
+		    String sql = "SELECT * FROM enrollment_table WHERE group_id = ? AND (appointed IS NULL OR appointed = 'NO')";
+		    return jdbcTemplate.queryForList(sql, groupId);
+		}
+		
+		
+		public List<Map<String, Object>> getAppointedDetails(int groupId) {
+		    String sql = "SELECT * FROM enrollment_table WHERE group_id = ? AND (appointed IS NULL OR appointed = 'Yes')";
+		    return jdbcTemplate.queryForList(sql, groupId);
+		}
+	 
+
+		public int markAbsentEntry(int employeeId) {
+		    // Query to check if the employee has already been marked absent for today
+		    String checkAbsentQuery = "SELECT absent FROM attendance WHERE employee_id = ? AND attendance_date = CURDATE()";
+
+		    List<Integer> absentResults = jdbcTemplate.query(
+		        checkAbsentQuery,
+		        ps -> ps.setInt(1, employeeId),
+		        (rs, rowNum) -> rs.getInt("absent")
+		    );
+
+		    // If no record found for today, mark as absent
+		    if (absentResults.isEmpty()) {
+		        // Insert a new row to mark the employee as absent for today
+		        String insertAbsentQuery = "INSERT INTO attendance (employee_id, absent, mark_attendance, attendance_date) VALUES (?, 1, 'ABSENT', CURDATE())";
+		        return jdbcTemplate.update(insertAbsentQuery, employeeId);
+		    }
+
+		    // If already marked absent for today, return 0 indicating no action taken
+		    return 0;
+		}
+		
+		public int markOverDuty(int employeeId) {
+		    // Check if the employee ID exists in the attendance table
+		    String checkEmployeeQuery = "SELECT od FROM attendance WHERE employee_id = ?";
+
+		    List<Integer> odResults = jdbcTemplate.query(
+		        checkEmployeeQuery,
+		        ps -> ps.setInt(1, employeeId),
+		        (rs, rowNum) -> rs.getInt("od")
+		    );
+
+		    // If the employee ID exists, update the OD field to 1
+		    if (!odResults.isEmpty()) {
+		        String updateOdQuery = "UPDATE attendance SET od = 1, mark_attendance = 'OD' WHERE employee_id = ?";
+		        return jdbcTemplate.update(updateOdQuery, employeeId);
+		    }
+
+		    // If the employee ID doesn't exist, return 0 to indicate no update
+		    return 0;
+		}
+	 
+	 public List<Map<String, Object>> getAllOrderDetails() {
+		    return nulmRepository.getAllOrderDetails();
+		}
+	 
+	 
+	    public String markAttendance(int employeeId, String markAttendance) {
+	        // Get today's date
+	        LocalDate today = LocalDate.now();
+
+	        // Query to check the current status of check_in and check_out for the employee on the current date
+	        String checkAttendanceQuery = "SELECT check_in, check_out FROM attendance WHERE employee_id = ? AND attendance_date = ?";
+
+	        List<Map<String, Object>> attendanceResults = jdbcTemplate.query(
+	            checkAttendanceQuery,
+	            ps -> {
+	                ps.setInt(1, employeeId);
+	                ps.setObject(2, today);
+	            },
+	            (rs, rowNum) -> {
+	                Map<String, Object> result = new HashMap<>();
+	                result.put("check_in", rs.getInt("check_in"));
+	                result.put("check_out", rs.getInt("check_out"));
+	                return result;
+	            }
+	        );
+
+	        // If the employee has not checked in today
+	        if (attendanceResults.isEmpty()) {
+	            if ("IN".equalsIgnoreCase(markAttendance)) {
+	                // Mark check-in (entry phase)
+	                String insertAttendanceQuery = "INSERT INTO attendance (employee_id, mark_attendance, check_in, in_time, attendance_date) VALUES (?, 'IN', 1, NOW(), ?)";
+	                jdbcTemplate.update(insertAttendanceQuery, employeeId, today);
+	                return "Checked in successfully";
+	            } else {
+	                // Trying to check out without a check-in for today
+	                return "Failed to mark attendance - Cannot check out without checking in first";
+	            }
+	        }
+
+	        // Retrieve the first (and only) result since attendance is checked by employee ID and date
+	        Map<String, Object> result = attendanceResults.get(0);
+	        Integer checkInStatus = (Integer) result.get("check_in");
+	        Integer checkOutStatus = (Integer) result.get("check_out");
+
+	        // If the markAttendance is 'OUT' and check-in is already marked as 1
+	        if ("OUT".equalsIgnoreCase(markAttendance) && checkInStatus == 1 && (checkOutStatus == null || checkOutStatus == 0)) {
+	            // Mark check-out (exit phase)
+	            String updateCheckOutQuery = "UPDATE attendance SET check_out = 1, out_time = NOW(), mark_attendance = 'OUT' WHERE employee_id = ? AND attendance_date = ?";
+	            int rowsUpdated = jdbcTemplate.update(updateCheckOutQuery, employeeId, today);
+	            if (rowsUpdated > 0) {
+	                return "Checked out successfully";
+	            } else {
+	                return "Failed to mark attendance - Could not update check-out status";
+	            }
+	        }
+
+	        // If trying to check in again when already checked in
+	        if ("IN".equalsIgnoreCase(markAttendance) && checkInStatus == 1) {
+	            return "Failed to mark attendance - Already checked in today";
+	        }
+
+	        // If trying to check out but not meeting the conditions
+	        return "Failed to mark attendance - Invalid conditions for check-out";
+	    }
+		 
+
+	 public List<String> getAllOrderNumber() {
+	        return nulmRepository.getAllOrderNumber();
+	    }
+	
+	 
+	 public List<Map<String, Object>> getAllSchemeGroups() {
+	        return nulmRepository.getAllSchemeGroups();
+	    }
+	 
+	 public List<Map<String, Object>> getAllOrders() {
+	        return nulmRepository.getAllOrders();
+	    }
+	 
+	 public List<String> getStaffName() {
+	        return nulmRepository.getStaffName();
+	    }
+	 
+	 public List<Map<String, Object>> getEnrollments(String department, String division) {
+		    StringBuilder sql = new StringBuilder("SELECT e.*, o.order_number, s.group_name " +
+		            "FROM enrollment_table e " +
+		            "LEFT JOIN order_details o ON e.order_id = o.order_id " +
+		            "LEFT JOIN suyaudavi_kuzhu s ON e.group_id = s.group_id " +
+		            "WHERE e.appointed = '1' AND e.isactive = '1' AND e.isdelete = '0'");
+
+		    if (department != null && !department.isEmpty()) {
+		        sql.append(" AND e.department = '").append(department).append("'");
+		    }
+		    if (division != null && !division.isEmpty()) {
+		        sql.append(" AND e.division = '").append(division).append("'");
+		    }
+
+		    return jdbcTemplate.queryForList(sql.toString());
+		}
+	 
+	 public List<Map<String, Object>> getDepartment() {
+			String sql = "SELECT DISTINCT department FROM enrollment_table WHERE isactive = 1 AND isdelete = 0";
+			return jdbcTemplate.queryForList(sql);
+		}
+	 
+	 public List<Map<String, Object>> getDivision() {
+		    String sql = "SELECT DISTINCT division FROM enrollment_table WHERE isactive = 1 AND isdelete = 0";
+		    return jdbcTemplate.queryForList(sql);
+		}
+	 
+	 public List<Map<String, Object>> getEnrollmentsById(int enrollmentId) {
+		    String sql = "SELECT * FROM enrollment_table " +
+		                 "WHERE enrollment_id = ? " +
+		                 "AND isactive = 1 " +
+		                 "AND isdelete = 0 " +
+		                 "AND (appointed = 1 OR appointed IS NULL) " +
+		                 "AND (dropout = 0 OR dropout IS NULL) ";
+
+		    try {
+		        // Query the database for enrollment details based on the specified conditions and enrollment_id
+		        return jdbcTemplate.queryForList(sql, new Object[]{enrollmentId});
+		    } catch (Exception e) {
+		        // Return an empty list if no enrollments are found
+		        return List.of();
+		    }
+		}
+	 
+ 	public List<Map<String, Object>> getSelfHelpGroups() {
+	    String sql = "SELECT group_id AS groupId, group_name AS groupName FROM suyaudavi_kuzhu WHERE isactive = 1 AND isdelete = 0";
+	    return jdbcTemplate.queryForList(sql);
+	}
+ 	
+ 	public List<Map<String, Object>> getOrderNumbers() {
+	    String sql = "SELECT order_id AS orderId, order_number AS orderNumber FROM order_details WHERE isactive = 1 AND isdelete = 0";
+	    return jdbcTemplate.queryForList(sql);
+	}
+ 	
+ 	public int updateEnrollment(
+	        int enrollmentId,
+	        String dateOfBirth,
+	        String gender,
+	        int groupId,  // New parameter
+	        int orderId   // New parameter
+	) {
+	    String sql = "UPDATE enrollment_table SET date_of_birth = ?, gender = ?, group_id = ?, order_id = ? WHERE enrollment_id = ?";
+
+	    return jdbcTemplate.update(sql, dateOfBirth, gender, groupId, orderId, enrollmentId);
+	}
+ 	
+ 	/*
+ 	public String saveOrderDetails(String order_number, Date order_date, int no_of_staffs, String order_description, String order_copy_url, String order_generated_by, String category, Date validity_date) {
+	    String sql = "INSERT INTO order_details (order_number, order_date, no_of_staffs, order_description, order_copy_url, order_generated_by, category, created_date, validity_date, order_status, isactive, isdelete) " +
+	                 "VALUES (?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP, ?, CASE WHEN ? >= ? THEN 'Active' ELSE 'Expired' END, 1, 0)";
+	    
+	    try {
+	        // Parameters array to be passed to the update method
+	        Object[] params = new Object[] {
+	            order_number,
+	            order_date,
+	            no_of_staffs,
+	            order_description,
+	            order_copy_url,
+	            order_generated_by,
+	            category,
+	            validity_date,
+	            validity_date, // For the CASE WHEN condition
+	            new Date() // Current date for comparison with validity_date
+	        };
+	        	
+	        // Execute the update
+	        jdbcTemplate.update(sql, params);
+
+	        return order_number;
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return "Error in Saving Order Details, give proper input";
+	    }
+	}
+		*/
+ 	
+ 	public String saveOrderDetails(String order_number, Date order_date, int no_of_staffs, String order_description, String order_copy_url, String order_generated_by, String category, Date validity_date) {
+	    String sql = "INSERT INTO order_details (order_number, order_date, no_of_staffs, order_description, order_copy_url, order_generated_by, category, created_date, validity_date, order_status, isactive, isdelete) " +
+	                 "VALUES (?, ?, ?, ?, ?, ?, ?, CURRENT_TIMESTAMP, ?, CASE WHEN ? >= ? THEN 'Active' ELSE 'Expired' END, 1, 0)";
+
+	    try {
+	        // Parameters array to be passed to the update method
+	        Object[] params = new Object[] {
+	            order_number,
+	            order_date,
+	            no_of_staffs,
+	            order_description,
+	            order_copy_url,
+	            order_generated_by,
+	            category,
+	            validity_date,
+	            validity_date, // For the CASE WHEN condition
+	            order_date // Comparison with order_date instead of the current date
+	        };
+
+	        // Log the SQL query for debugging
+	        System.out.println("INSERT INTO order_details (order_number, order_date, no_of_staffs, order_description, order_copy_url, order_generated_by, category, created_date, validity_date, order_status, isactive, isdelete) " +
+	                 "VALUES ('" + order_number + "', '" + order_date + "', '" + no_of_staffs + "', '" + order_description + "', '" + order_copy_url + "', '" + order_generated_by + "', '" + category + "', CURRENT_TIMESTAMP, " +
+	                 validity_date + ", CASE WHEN " + validity_date + " >= " + order_date + " THEN 'Active' ELSE 'Expired' END, 1, 0)");
+
+	        // Execute the update
+	        jdbcTemplate.update(sql, params);
+
+	        return order_number;
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return "Error in Saving Order Details, give proper input";
+	    }
+	}
+ 	
+ 	public int addSalaryDetails(int totalDaysPresent, int totalDaysOd, int totalDaysSalary, int totalDaysAbsent, String month, int year, int salaryAmount, 
+	            String salaryStatus, int enrollmentId, int groupId, int wageId) {
+	String sql = "INSERT INTO salary_details (total_days_present, total_days_od, total_days_salary, total_days_absent, month, year, salary_amount, salary_status, enrollment_id, group_id, wage_id) " +
+	 "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
+	
+	return jdbcTemplate.update(sql, totalDaysPresent, totalDaysOd, totalDaysSalary, totalDaysAbsent, month, year, salaryAmount, salaryStatus, enrollmentId, groupId, wageId);
+	}
+ 	
+ 	public List<Map<String, Object>> getAttendanceWithSalary(String month, Integer year) {
+	    StringBuilder sql = new StringBuilder("SELECT " +
+	        "e.enrollment_id, " +
+	        "e.name, " +
+	        "e.incharge_id, " +    
+	        "YEAR(coalesce((a.indatetime),(a.oddatetime),(a.leavedatetime))) AS year, " +
+	        "MONTHNAME(coalesce((a.indatetime),(a.oddatetime),(a.leavedatetime))) AS month, " +
+	        "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+	        "COUNT(DISTINCT DATE(a.leavedatetime)) AS total_days_absent, " +
+	        "COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END) AS total_days_od, " +
+	        "COUNT(DISTINCT DATE(a.indatetime)) + " +
+	        "COUNT(DISTINCT DATE(a.leavedatetime)) + " +
+	        "COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END) AS total_days, " +
+	        "COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END) AS total_days_salary, " +
+	        "(SELECT sw.wage_id FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS wage_id, " +
+	        "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS salary_per_day, " +
+	        "((COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END)) * " +
+	        "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1)) AS total_salary, " +
+	        "sd.salary_status, " +
+	        "sk.group_id, " +
+	        "sk.group_name " +
+	        "FROM enrollment_table e " +
+	        "LEFT JOIN attendance a ON e.enrollment_id = a.enrollment_id " +  // Changed JOIN to LEFT JOIN to include all enrollments
+	        "LEFT JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +
+	        "AND YEAR(a.indatetime and a.oddatetime and a.leavedatetime) = sd.year " +
+	        "AND MONTHNAME(a.indatetime and a.oddatetime and a.leavedatetime) = sd.month " +
+	        "LEFT JOIN suyaudavi_kuzhu sk ON e.group_id = sk.group_id " +
+	        "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) ");
+
+	    // Add month condition if month is provided
+	    if (month != null && !month.isEmpty()) {
+	        sql.append("AND MONTHNAME(coalesce((a.indatetime),(a.leavedatetime),(a.oddatetime)))= ? ");
+	    }
+
+	    // Add year condition if year is provided
+	    if (year != null) {
+	        sql.append("AND YEAR(coalesce((a.indatetime),(a.leavedatetime),(a.oddatetime))) = ? ");
+	    }
+
+	    sql.append("GROUP BY e.enrollment_id, YEAR(coalesce((a.indatetime),(a.oddatetime),(a.leavedatetime))), "
+	    		+ "MONTHNAME(coalesce((a.indatetime),(a.oddatetime),(a.leavedatetime))), sd.salary_status ");
+
+	    // Create a list of parameters to pass to the query
+	    List<Object> params = new ArrayList<>();
+	    if (month != null && !month.isEmpty()) {
+	        params.add(month);
+	    }
+	    if (year != null) {
+	        params.add(year);
+	    }
+
+	    // Execute the query with the provided parameters
+	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+	    //List<Map<String, Object>> results = nulmJdbcTemplate.queryForList(sql.toString());
+	    return results;
+	}
+/*
+ 	public List<Map<String, Object>> getAttendanceWithSalaryByInchargeId(String month, Integer year, Integer incharge_id) {
+ 	    String sql = "SELECT e.enrollment_id, e.emp_id, COALESCE(e.name, '') AS name, YEAR(a.indatetime) AS year, "
+ 	            + "MONTHNAME(a.indatetime) AS month, COUNT(a.inby) AS total_days_present, "
+ 	            + "COUNT(a.leaveby) AS total_days_absent, COUNT(a.odby) AS total_days_od, "
+ 	            + "(COUNT(a.inby) + COUNT(a.leaveby) + COUNT(a.odby)) AS total_days, "
+ 	            + "(COUNT(a.inby) + COUNT(a.odby)) AS total_days_salary, "
+ 	            + "COALESCE((SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1), 0) AS salary_per_day, "
+ 	            + "COALESCE(((COUNT(a.inby) + COUNT(a.odby)) * (SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1)), 0) AS total_salary, "
+ 	            + "COALESCE(sd.salary_status, '') AS salary_status, COALESCE(sk.group_id, '') AS group_id, "
+ 	            + "COALESCE(sk.group_name, '') AS group_name "
+ 	            + "FROM enrollment_table e "
+ 	            + "JOIN attendance a ON e.enrollment_id = a.enrollment_id "
+ 	            + "LEFT JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id "
+ 	            + "AND YEAR(a.indatetime) = sd.year AND MONTHNAME(a.indatetime) = sd.month "
+ 	            + "LEFT JOIN suyaudavi_kuzhu sk ON e.group_id = sk.group_id "
+ 	            + "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) "
+ 	            + "AND e.incharge_id = '" + incharge_id + "' "
+ 	            + "AND MONTHNAME(a.indatetime) = '" + month + "' "
+ 	            + "AND YEAR(a.indatetime) = '" + year + "' "
+ 	            + "GROUP BY e.enrollment_id, e.name, YEAR(a.indatetime), MONTHNAME(a.indatetime), "
+ 	            + "sd.salary_status, sk.group_id, sk.group_name";
+ 	    
+ 	    System.out.println(sql);
+ 	    
+ 	    // Execute the query with the provided parameters
+ 	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql);
+ 	    return results;
+ 	}
+
+ 	public List<Map<String, Object>> getAttendanceWithSalary(String month, Integer year) {
+	    StringBuilder sql = new StringBuilder("SELECT " +
+	            "e.enrollment_id, " +
+	            "e.name, " +
+	            "YEAR(a.indatetime) AS year, " +
+	            "MONTHNAME(a.indatetime) AS month, " +
+	            "COUNT(a.inby) AS total_days_present, " +
+	            "COUNT(a.leaveby) AS total_days_absent, " +
+	            "COUNT(a.odby) AS total_days_od, " +
+	            "(COUNT(a.inby) + COUNT(a.leaveby) + COUNT(a.odby)) AS total_days, " +
+	            "(COUNT(a.inby) + COUNT(a.odby)) AS total_days_salary, " +
+	            "(SELECT sw.wage_id FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS wage_id, " +
+	            "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS salary_per_day, " +
+	            "((COUNT(a.inby) + COUNT(a.odby)) * " +
+	            "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1)) AS total_salary, " +
+	            "sd.salary_status, " +
+	            "sk.group_id, " +
+	            "sk.group_name " +
+	            "FROM enrollment_table e " +
+	            "JOIN attendance a ON e.enrollment_id = a.enrollment_id " +
+	            "LEFT JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +
+	            "AND YEAR(a.indatetime) = sd.year " +
+	            "AND MONTHNAME(a.indatetime) = sd.month " +
+	            "LEFT JOIN suyaudavi_kuzhu sk ON e.group_id = sk.group_id " +
+	            "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) ");
+
+	    // Add month condition if month is provided
+	    if (month != null && !month.isEmpty()) {
+	        sql.append("AND MONTHNAME(a.indatetime) = ? ");
+	    }
+
+	    // Add year condition if year is provided
+	    if (year != null) {
+	        sql.append("AND YEAR(a.indatetime) = ? ");
+	    }
+
+	    sql.append("GROUP BY e.enrollment_id, e.name, YEAR(a.indatetime), MONTHNAME(a.indatetime), sd.salary_status, sk.group_id, sk.group_name");
+
+	    // Create a list of parameters to pass to the query
+	    List<Object> params = new ArrayList<>();
+	    if (month != null && !month.isEmpty()) {
+	        params.add(month);
+	    }
+	    if (year != null) {
+	        params.add(year);
+	    }
+
+	    // Execute the query with the provided parameters
+	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+	    return results;
+	}
+	
+	public List<Map<String, Object>> getSalaryReport(String month, int year, String salaryStatus,String loginId) {
+		
+		// Retrieve zone access for the user
+	    String ZoneWhare;
+		String zoneAccessSQL = "SELECT zone FROM gcc_apps.login_mapping_user WHERE appuser_id = ?";
+	    List<Map<String, Object>> getAccess = jdbcTemplate.queryForList(zoneAccessSQL, loginId);
+	    System.out.println(zoneAccessSQL +"->"+ loginId);
+	    // Extract the zones from getAccess
+	    List<String> zones = getAccess.stream()
+	                                  .map(access -> (String) access.get("zone"))
+	                                  .filter(Objects::nonNull)
+	                                  .collect(Collectors.toList());
+
+	    // If the user has zone acc	ess, add it to the WHERE clause
+	    if (!zones.isEmpty()) {
+	        String zoneList = zones.stream()
+	                               .map(zone -> "'" + zone + "'")
+	                               .collect(Collectors.joining(", "));
+	        ZoneWhare = " AND e.zone IN ("+zoneList+")";
+	       // System.out.println("AND e.zone IN ("+zoneList+")");
+	    }
+	    else {
+	    	ZoneWhare = " AND e.zone IN (0)";
+	    }
+	    
+	    String sql = "SELECT " +
+	                 "e.enrollment_id, " +
+	                 "e.emp_id, " +
+	                 "e.name, " +
+	                 "e.incharge_name, " +  // Fetch incharge_name from enrollment_table
+	                 "e.incharge_designation, " +  // Fetch incharge_designation from enrollment_table
+	                 "YEAR(a.indatetime) AS year, " +
+	                 "MONTHNAME(a.indatetime) AS month, " +  // Use MONTHNAME to get month in words
+	                 "COUNT(a.inby) AS total_days_present, " +
+	                 "COUNT(a.leaveby) AS total_days_absent, " +  // Changed to total_days_absent
+	                 "COUNT(a.odby) AS total_days_od, " +
+	                 "(COUNT(a.inby) + COUNT(a.odby)) AS total_days_salary, " +
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS salary_per_day, " +  // Fetch salary_per_day from staff_wages table
+	                 "((COUNT(a.inby) + COUNT(a.odby)) * " +
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1)) AS total_salary, " +  // Calculate total salary
+	                 "sd.salary_status, " +
+	                 "sk.group_id, " +  // Fetch group_id from suyaudavi_kuzhu table
+	                 "sk.group_name " +  // Fetch group_name from suyaudavi_kuzhu table
+	                 "FROM enrollment_table e " +
+	                 "JOIN attendance a ON e.enrollment_id = a.enrollment_id " +
+	                 "LEFT JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +
+	                 "AND YEAR(a.indatetime) = sd.year " +  // Match year
+	                 "AND MONTHNAME(a.indatetime) = sd.month " +  // Match month name
+	                 "LEFT JOIN suyaudavi_kuzhu sk ON e.group_id = sk.group_id " +  // Join with suyaudavi_kuzhu table on group_id
+	                 "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) " +  // Removed unauthorizedleaveby
+	                 "AND MONTHNAME(a.indatetime) = ? " +  // Filter by month
+	                 "AND YEAR(a.indatetime) = ? "+  // Filter by year
+	                 "AND (sd.salary_status = 'Initiated' OR sd.salary_status = 'Approved') " +   // Filter by year
+	                 (salaryStatus != null && !salaryStatus.isEmpty() ? "AND sd.salary_status = ? " : "") +  // Optional filter by salary status
+	                 ZoneWhare +" GROUP BY e.enrollment_id, e.name, e.incharge_name, e.incharge_designation, YEAR(a.indatetime), MONTHNAME(a.indatetime), salary_per_day, sd.salary_status, sk.group_id, sk.group_name";  // Group by new fields
+
+	    // Prepare the query parameters based on provided inputs
+	    List<Object> params = new ArrayList<>();
+	    params.add(month);
+	    params.add(year);
+	    if (salaryStatus != null && !salaryStatus.isEmpty()) {
+	        params.add(salaryStatus);
+	    }
+
+	    // Execute the query with dynamic parameters
+	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql, params.toArray());
+	    return results;
+	}
+		*/	
+ 	
+ 	/*
+ 	public List<Map<String, Object>> getSalaryReport(String month, int year, String salaryStatus,String loginId) {
+ 		
+ 	// Retrieve zone access for the user
+	    String ZoneWhare;
+		String zoneAccessSQL = "SELECT zone FROM gcc_apps.login_mapping_user WHERE appuser_id = ?";
+	    List<Map<String, Object>> getAccess = jdbcTemplate.queryForList(zoneAccessSQL, loginId);
+	    System.out.println(zoneAccessSQL +"->"+ loginId);
+	    // Extract the zones from getAccess
+	    List<String> zones = getAccess.stream()
+	                                  .map(access -> (String) access.get("zone"))
+	                                  .filter(Objects::nonNull)
+	                                  .collect(Collectors.toList());
+
+	    // If the user has zone acc	ess, add it to the WHERE clause
+	    if (!zones.isEmpty()) {
+	        String zoneList = zones.stream()
+	                               .map(zone -> "'" + zone + "'")
+	                               .collect(Collectors.joining(", "));
+	        ZoneWhare = " AND e.zone IN ("+zoneList+")";
+	       // System.out.println("AND e.zone IN ("+zoneList+")");
+	    }
+	    else {
+	    	ZoneWhare = " AND e.zone IN (0)";
+	    }
+	    
+	    String sql = "SELECT " +
+	                 "e.enrollment_id, " +
+	                 "e.emp_id, " +
+	                 "e.name, " +
+	                 "e.incharge_name, " +  // Fetch incharge_name from enrollment_table
+	                 "e.incharge_designation, " +  // Fetch incharge_designation from enrollment_table
+	                 "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS iyear, " +
+	                 "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS imonth, " +  // Use MONTHNAME to get month in words
+	                 "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+	                 "COUNT(DISTINCT DATE(a.leavedatetime)) AS total_days_absent, " +  // Changed to total_days_absent
+	                 "COUNT(DISTINCT DATE(a.oddatetime)) AS total_days_od, " +
+	                 "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) AS total_days_salary, " +
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS salary_per_day, " +  // Fetch salary_per_day from staff_wages table
+	                 "((COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) * " +
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1)) AS total_salary, " +  // Calculate total salary
+	                 "sd.salary_status, " +
+	                 "sk.group_id, " +  // Fetch group_id from suyaudavi_kuzhu table
+	                 "sk.group_name " +  // Fetch group_name from suyaudavi_kuzhu table
+	                 "FROM enrollment_table e " +
+	                 "JOIN attendance a ON e.enrollment_id = a.enrollment_id " +
+	                 "LEFT JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +
+	                 "AND YEAR(a.indatetime) = sd.year " +  // Match year
+	                 "AND MONTHNAME(a.indatetime) = sd.month " +  // Match month name
+	                 "LEFT JOIN suyaudavi_kuzhu sk ON e.group_id = sk.group_id " +  // Join with suyaudavi_kuzhu table on group_id
+	                 "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) " +  // Removed unauthorizedleaveby
+	                 "AND MONTHNAME(a.indatetime) = ? " +  // Filter by month
+	                 "AND YEAR(a.indatetime) = ? "+  // Filter by year
+	                 "AND (sd.salary_status = 'Initiated' OR sd.salary_status = 'Approved') " +   // Filter by year
+	                 (salaryStatus != null && !salaryStatus.isEmpty() ? "AND sd.salary_status = ? " : "") +  // Optional filter by salary status
+	                 ZoneWhare +" GROUP BY e.enrollment_id, e.name, e.incharge_name, e.incharge_designation, iyear, imonth, salary_per_day, sd.salary_status, sk.group_id, sk.group_name";  // Group by new fields
+
+	    // Prepare the query parameters based on provided inputs
+	    List<Object> params = new ArrayList<>();
+	    params.add(month);
+	    params.add(year);
+	    if (salaryStatus != null && !salaryStatus.isEmpty()) {
+	        params.add(salaryStatus);
+	    }
+
+	    // Execute the query with dynamic parameters
+	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql, params.toArray());
+	    return results;
+	}
+ 	*/
+ 	public List<Map<String, Object>> getSalaryReport(String month, Integer year, String salaryStatus, String groupName, String loginId) {
+
+		// Retrieve zone access for the user
+		String ZoneWhare;
+		String zoneAccessSQL = "SELECT zone FROM gcc_apps.login_mapping_user WHERE appuser_id = ?";
+		List<Map<String, Object>> getAccess = jdbcTemplate.queryForList(zoneAccessSQL, loginId);
+		System.out.println(zoneAccessSQL +"->"+ loginId);
+		// Extract the zones from getAccess
+		List<String> zones = getAccess.stream()
+				.map(access -> (String) access.get("zone"))
+				.filter(Objects::nonNull)
+				.collect(Collectors.toList());
+
+		// If the user has zone access, add it to the WHERE clause
+		if (!zones.isEmpty()) {
+			String zoneList = zones.stream()
+					.map(zone -> "'" + zone + "'")
+					.collect(Collectors.joining(", "));
+			ZoneWhare = " AND en.zone IN ("+zoneList+")";
+		}
+		else {
+			ZoneWhare = " AND en.zone IN (0)";
+		}
+
+		String sql = "select en.emp_id, en.name, en.incharge_name, en.incharge_designation, sk.group_name, s.total_days_present, s.total_days_od, "
+				+ "s.total_days_absent, s.total_days_salary, s.month as imonth,s.year as iyear, s.salary_status, s.salary_amount as total_salary, "
+				+ "DAY(LAST_DAY(STR_TO_DATE(CONCAT(s.year, '-', s.month, '-01'), '%Y-%M-%d'))) AS total_days from salary_details s "
+				+ "left join enrollment_table en on s.enrollment_id = en.enrollment_id "
+				+ "left join suyaudavi_kuzhu sk on s.group_id = sk.group_id "
+				+ "where s.month = ? and s.year =? "
+				+ "AND (s.salary_status = 'Initiated' OR s.salary_status = 'Approved') "
+				+ (salaryStatus != null && !salaryStatus.isEmpty() ? "AND s.salary_status = ? " : "")
+				+ (groupName != null && !groupName.isEmpty() ? "AND sk.group_name = ? " : "")
+				+ ZoneWhare;
+
+		// Prepare the query parameters based on provided inputs
+		List<Object> params = new ArrayList<>();
+		params.add(month);
+		params.add(year);
+		if (salaryStatus != null && !salaryStatus.isEmpty()) {
+			params.add(salaryStatus);
+		}
+		if (groupName != null && !groupName.isEmpty()) {
+			params.add(groupName);
+		}
+
+		List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+		return results;
+	}
+ 	/*
+ 	public List<Map<String, Object>> getSalaryReport(String month, Integer year, String salaryStatus, String groupName) {
+		String sql = "select en.emp_id, en.name, en.incharge_name, en.incharge_designation, sk.group_name, s.total_days_present, s.total_days_od, "
+				+ "s.total_days_absent, s.total_days_salary, s.month as imonth,s.year as iyear, s.salary_status, s.salary_amount as total_salary, "
+				+ "DAY(LAST_DAY(STR_TO_DATE(CONCAT(s.year, '-', s.month, '-01'), '%Y-%M-%d'))) AS total_days from salary_details s "
+				+ "left join enrollment_table en on s.enrollment_id = en.enrollment_id "
+				+ "left join suyaudavi_kuzhu sk on s.group_id = sk.group_id "
+				+ "where s.month = ? and s.year =? "
+				+ "AND (s.salary_status = 'Initiated' OR s.salary_status = 'Approved') " 
+                + (salaryStatus != null && !salaryStatus.isEmpty() ? "AND s.salary_status = ? " : "") 
+                + (groupName != null && !groupName.isEmpty() ? "AND sk.group_name = ? " : "");
+		
+		// Prepare the query parameters based on provided inputs
+	    List<Object> params = new ArrayList<>();
+	    params.add(month);
+	    params.add(year);
+	    if (salaryStatus != null && !salaryStatus.isEmpty()) {
+	        params.add(salaryStatus);
+	    }
+	    if (groupName != null && !groupName.isEmpty()) {
+	        params.add(groupName);
+	    }
+	    
+	List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+    return results;
+}
+*/
+ 	/*
+ 	public List<Map<String, Object>> getSalaryReport(String month, int year, String salaryStatus ,String groupName, String loginId) {
+ 		// Retrieve zone access for the user
+	    String ZoneWhere;
+		String zoneAccessSQL = "SELECT zone FROM gcc_apps.login_mapping_user WHERE appuser_id = ?";
+	    List<Map<String, Object>> getAccess = jdbcTemplate.queryForList(zoneAccessSQL, loginId);
+	    System.out.println(zoneAccessSQL +"->"+ loginId);
+	    // Extract the zones from getAccess
+	    List<String> zones = getAccess.stream()
+	                                  .map(access -> (String) access.get("zone"))
+	                                  .filter(Objects::nonNull)
+	                                  .collect(Collectors.toList());
+
+	    // If the user has zone acc	ess, add it to the WHERE clause
+	    if (!zones.isEmpty()) {
+	        String zoneList = zones.stream()
+	                               .map(zone -> "'" + zone + "'")
+	                               .collect(Collectors.joining(", "));
+	        ZoneWhere = " AND e.zone IN ("+zoneList+")";
+	       // System.out.println("AND e.zone IN ("+zoneList+")");
+	    }
+	    else {
+	    	ZoneWhere = " AND e.zone IN (0)";
+	    }
+ 		
+ 		String sql = "SELECT " +
+	                 "e.enrollment_id, " +
+	                 "e.emp_id, " +
+	                 "e.name, " +
+	                 "e.incharge_name, " +  // Fetch incharge_name from enrollment_table
+	                 "e.incharge_designation, " +  // Fetch incharge_designation from enrollment_table
+	                 "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS iyear, " +
+	                 "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS imonth, " +  // Use MONTHNAME to get month in words
+	                 "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+	                 "COUNT(DISTINCT DATE(a.oddatetime)) AS total_days_od, " +  // Count of OD days
+	                 "MAX(DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)))) AS total_days, " +  // Calculate total days in the month
+	                 "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) AS total_days_salary, " +  // Calculate total present and OD days
+	                 "(MAX(DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)))) - " +  // Calculate total days absent
+	                 "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime)))) AS total_days_absent, " +  // Calculate total days absent
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS salary_per_day, " +  // Fetch salary_per_day from staff_wages table
+	                 "((COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) * " +
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1)) AS total_salary, " +  // Calculate total salary
+	                 "sd.salary_status, " +
+	                 "sk.group_id, " +  // Fetch group_id from suyaudavi_kuzhu table
+	                 "sk.group_name " +  // Fetch group_name from suyaudavi_kuzhu table
+	                 "FROM enrollment_table e " +
+	                 "JOIN attendance a ON e.enrollment_id = a.enrollment_id " +
+	                 "LEFT JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +
+	                 "AND YEAR(a.indatetime) = sd.year " +  // Match year
+	                 "AND MONTHNAME(a.indatetime) = sd.month " +  // Match month name
+	                 "LEFT JOIN suyaudavi_kuzhu sk ON e.group_id = sk.group_id " +  // Join with suyaudavi_kuzhu table on group_id
+	                 "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) " +  // Removed unauthorizedleaveby
+	                 "AND MONTHNAME(a.indatetime) = ? " +  // Filter by month
+	                 "AND YEAR(a.indatetime) = ? " +  // Filter by year
+	                 "AND (sd.salary_status = 'Initiated' OR sd.salary_status = 'Approved') " +   // Filter by salary status
+	                 (salaryStatus != null && !salaryStatus.isEmpty() ? "AND sd.salary_status = ? " : "") +
+	                 (groupName != null && !groupName.isEmpty() ? "AND sk.group_name = ? " : "")+// Optional filter by salary status
+	                 ZoneWhere +" GROUP BY e.enrollment_id, e.name, e.incharge_name, e.incharge_designation, iyear, imonth, salary_per_day, sd.salary_status, sk.group_id, sk.group_name";  // Group by new fields
+
+	    // Prepare the query parameters based on provided inputs
+	    List<Object> params = new ArrayList<>();
+	    params.add(month);
+	    params.add(year);
+	    if (salaryStatus != null && !salaryStatus.isEmpty()) {
+	        params.add(salaryStatus);
+	    }
+	    if (groupName != null && !groupName.isEmpty()) {
+	        params.add(groupName);
+	    }
+
+	    // Execute the query with dynamic parameters
+	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql, params.toArray());
+	    return results;
+	}
+	*/
+ 	
+ 	/*
+	public List<Map<String, Object>> getAttendanceWithInitiatedSalary(String inchargeName, String month) {
+	    String sql = "SELECT " +
+	                 "e.enrollment_id, " +
+	                 "e.emp_id, " +		 
+	                 "e.name, " +
+	                 "YEAR(a.indatetime) AS year, " +
+	                 "MONTHNAME(a.indatetime) AS month, " +  // Get month in words
+	                 "COUNT(a.inby) AS total_days_present, " +
+	                 "COUNT(a.leaveby) AS total_days_absent, " +  // Changed to total_days_absent
+	                 "COUNT(a.odby) AS total_days_od, " +
+	                 "(COUNT(a.inby) + COUNT(a.odby)) AS total_days_salary, " +
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS salary_per_day, " +  // Fetch salary_per_day from staff_wages table
+	                 "((COUNT(a.inby) + COUNT(a.odby)) * " +
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1)) AS total_salary, " +  // Calculate total salary
+	                 "sd.salary_status " +
+	                 "FROM enrollment_table e " +
+	                 "JOIN attendance a ON e.enrollment_id = a.enrollment_id " +  // Join with attendance table
+	                 "LEFT JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +  // Left join with salary_details
+	                 "AND YEAR(a.indatetime) = sd.year " +  // Match year
+	                 "AND MONTHNAME(a.indatetime) = sd.month " +  // Match month name
+	                 "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) " +  // Removed unauthorizedleaveby
+	                 "AND e.incharge_name = ? " +  // Filter by incharge_name
+	                 "AND MONTHNAME(a.indatetime) = ? " +  // Filter by month
+	                 "AND sd.salary_status IN ('Initiated', 'Approved') " +  // Filter by salary status 'Initiated' or 'Approved'
+	                 "GROUP BY e.enrollment_id, e.name, YEAR(a.indatetime), MONTHNAME(a.indatetime), salary_per_day, sd.salary_status";  // Group by required fields
+
+	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql, inchargeName, month);
+	    return results;
+	}
+		*/
+ 	/*
+ 	public List<Map<String, Object>> getAttendanceWithInitiatedSalary(String inchargeName, String month) {
+	    String sql = "SELECT " +
+	                 "e.enrollment_id, " +
+	                 "e.emp_id, " +         
+	                 "e.name, " +
+	                 "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS year, " +
+	                 "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS month, " +  
+	                 "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+	                 "COUNT(DISTINCT DATE(a.leavedatetime)) AS total_days_absent, " +  
+	                 "COUNT(DISTINCT DATE(a.oddatetime)) AS total_days_od, " +
+	                 "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) AS total_days_salary, " +
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS salary_per_day, " +
+	                 "((COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) * " +
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1)) AS total_salary, " +
+	                 "sd.salary_status " +
+	                 "FROM enrollment_table e " +
+	                 "JOIN attendance a ON e.enrollment_id = a.enrollment_id " + 
+	                 "LEFT JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +  
+	                 "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) " +  
+	                 "AND e.incharge_name = ? " +  
+	                 "AND sd.salary_status IN ('Initiated', 'Approved') " +  
+	                 "AND (MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? OR ? IS NULL) " + // Ensure month matches
+	                 "GROUP BY e.enrollment_id, e.emp_id, e.name, " +
+	                 "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " + // Grouping by COALESCE year
+	                 "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), sd.salary_status";  // Grouping by COALESCE month
+
+	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql, inchargeName, month, month);
+	    return results;
+	}
+	*/
+ 	/*
+ 	public List<Map<String, Object>> getAttendanceWithInitiatedSalary(String inchargeId, String month) {
+	    String sql = "SELECT " +
+	                 "e.enrollment_id, " +
+	                 "e.emp_id, " +         
+	                 "e.name, " +
+	                 "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS year, " +
+	                 "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS month, " +  
+	                 "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+	                 "COUNT(DISTINCT DATE(a.oddatetime)) AS total_days_od, " +
+	                 "MAX(DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)))) AS total_days, " +  // Total days in the month
+	                 "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) AS total_days_salary, " +
+	                 "(MAX(DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)))) - " +  // Total days in the month
+	                 "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime)))) AS total_days_absent, " +  // Calculate total days absent
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS salary_per_day, " +
+	                 "((COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) * " +
+	                 "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1)) AS total_salary, " +
+	                 "sd.salary_status " +
+	                 "FROM enrollment_table e " +
+	                 "JOIN attendance a ON e.enrollment_id = a.enrollment_id " + 
+	                 "LEFT JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +  
+	                 "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) " +  
+	                 "AND e.incharge_id = ? " +  
+	                 "AND sd.salary_status IN ('Initiated', 'Approved') " +  
+	                 "AND sd.month = ? " +  // Filtering based on salary_details month
+	                 "AND MONTHNAME(a.indatetime) = ? " +  // Additional filtering on attendance
+	                 "GROUP BY e.enrollment_id, e.emp_id, e.name, " +
+	                 "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " + 
+	                 "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), sd.salary_status"; 
+
+	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql, inchargeId, month, month);
+	    return results;
+	}
+ 	*/
+ 	/*
+ 	public List<Map<String, Object>> getAttendanceWithInitiatedSalary(String inchargeId, String month, String inchargeName, Integer zone) {
+ 	    StringBuilder sql = new StringBuilder("SELECT " +
+ 	            "e.group_id, " +
+ 	            "(SELECT group_name FROM suyaudavi_kuzhu WHERE suyaudavi_kuzhu.group_id = e.group_id LIMIT 1) AS group_name, " +
+ 	            "a.enrollment_id, " +
+ 	            "e.emp_id, " +
+ 	            "e.name, " +
+ 	            "e.incharge_id, " +
+ 	            "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1) AS salary_per_day, " +
+ 	            "(SELECT wage_id FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1) AS wage_id, " +
+ 	            "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS year, " +
+ 	            "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS month, " +
+ 	            "DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime))) AS total_days, " +
+ 	            "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+ 	            "COUNT(DISTINCT DATE(a.oddatetime)) AS total_days_od, " +
+ 	            "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) AS total_days_salary, " +
+ 	            "((COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) * " +
+ 	            "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1)) AS total_salary, " +
+ 	            "(MAX(DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)))) - " +
+ 	            "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime)))) AS total_days_absent, " +
+ 	            "IFNULL(s.salary_status, '') AS salary_status " +
+ 	            "FROM attendance AS a " +
+ 	            "INNER JOIN enrollment_table AS e ON a.enrollment_id = e.enrollment_id " +
+ 	            "LEFT JOIN salary_details AS s ON a.enrollment_id = s.enrollment_id " +
+ 	            "AND s.month = MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) " +
+ 	            "AND s.year = YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) " +
+ 	            "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) ");
+
+ 	    // Append condition for incharge_id
+ 	    sql.append("AND (? IS NULL OR e.incharge_id = ?) ");
+ 	    
+ 	    // Append condition for incharge_name
+ 	    sql.append("AND (? IS NULL OR e.incharge_name = ?) ");
+ 	    
+ 	    // Append condition for zone
+ 	    sql.append("AND (? IS NULL OR e.zone = ?) ");
+
+ 	    // Append condition for month if provided
+ 	    if (month != null && !month.isEmpty()) {
+ 	        sql.append("AND MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? ");
+ 	    }
+
+ 	    // Add condition to filter by salary_status (only 'Initiated' or 'Approved')
+ 	    sql.append("AND IFNULL(s.salary_status, '') IN ('Initiated', 'Approved') ");
+
+ 	    // Group by necessary columns
+ 	    sql.append("GROUP BY a.enrollment_id, e.group_id, " +
+ 	            "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+ 	            "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+ 	            "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1), " +
+ 	            "(SELECT wage_id FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1), " +
+ 	            "(SELECT group_name FROM suyaudavi_kuzhu WHERE suyaudavi_kuzhu.group_id = e.group_id LIMIT 1), " +
+ 	            "DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime))), " +
+ 	            "s.salary_status");
+
+ 	    // Create a list of parameters
+ 	    List<Object> params = new ArrayList<>();
+ 	    params.add(inchargeId);
+ 	    params.add(inchargeId);
+ 	    params.add(inchargeName);
+ 	    params.add(inchargeName);
+ 	    params.add(zone);
+ 	    params.add(zone); // Added twice for the conditional check in the SQL
+ 	    if (month != null && !month.isEmpty()) {
+ 	        params.add(month);
+ 	    }
+
+ 	    // Log the SQL and parameters (optional for debugging)
+ 	    System.out.println("Generated SQL: " + sql.toString());
+ 	    System.out.println("Parameters: " + params);
+
+ 	    // Execute the query using JdbcTemplate
+ 	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+ 	    return results;
+ 	}
+
+ 	*/
+ 	/*
+ 	public List<Map<String, Object>> getAttendanceWithInitiatedSalary(String inchargeId, String month, String inchargeName, int zone) {
+	    StringBuilder sql = new StringBuilder("SELECT " +
+	            "e.group_id, " +
+	            "(SELECT group_name FROM suyaudavi_kuzhu WHERE suyaudavi_kuzhu.group_id = e.group_id LIMIT 1) AS group_name, " +
+	            "a.enrollment_id, " +
+	            "e.emp_id, " +
+	            "e.name, " +
+	            "e.incharge_id, " +
+	            "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1) AS salary_per_day, " +
+	            "(SELECT wage_id FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1) AS wage_id, " +
+	            "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS year, " +
+	            "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS month, " +
+	            "DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime))) AS total_days, " +
+	            "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+	            "COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END) AS total_days_od, " +
+	            "COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END) AS total_days_salary, " +
+	            "((COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END)) * " +
+	            "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1)) AS total_salary, " +
+	            "(MAX(DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)))) - " +
+	            "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END))) AS total_days_absent, " +
+	            "IFNULL(s.salary_status, '') AS salary_status " +
+	            "FROM attendance AS a " +
+	            "INNER JOIN enrollment_table AS e ON a.enrollment_id = e.enrollment_id " +
+	            "LEFT JOIN salary_details AS s ON a.enrollment_id = s.enrollment_id " +
+	            "AND s.month = MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) " +
+	            "AND s.year = YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) " +
+	            "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) ");
+
+	    // Append condition for incharge_id
+	    sql.append("AND (? IS NULL OR e.incharge_id = ?) ");
+
+	    // Append condition for incharge_name
+	    sql.append("AND (? IS NULL OR e.incharge_name = ?) ");
+
+	    // Append condition for month if provided
+	    if (month != null && !month.isEmpty()) {
+	        sql.append("AND MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? ");
+	    }
+
+	    // Add condition to filter by salary_status (only 'Initiated' or 'Approved')
+	    sql.append("AND IFNULL(s.salary_status, '') IN ('Initiated', 'Approved') ");
+
+	    // Group by necessary columns
+	    sql.append("GROUP BY a.enrollment_id, e.group_id, " +
+	            "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+	            "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+	            "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1), " +
+	            "(SELECT wage_id FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1), " +
+	            "(SELECT group_name FROM suyaudavi_kuzhu WHERE suyaudavi_kuzhu.group_id = e.group_id LIMIT 1), " +
+	            "DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime))), " +
+	            "s.salary_status");
+
+	    // Create a list of parameters
+	    List<Object> params = new ArrayList<>();
+	    params.add(inchargeId);
+	    params.add(inchargeId);  // Added twice for the conditional check in the SQL
+	    params.add(inchargeName);
+	    params.add(inchargeName);  // Added twice for the conditional check in the SQL
+	    if (month != null && !month.isEmpty()) {
+	        params.add(month);
+	    }
+
+	    // Log the SQL and parameters (optional for debugging)
+	    System.out.println("Generated SQL: " + sql.toString());
+	    System.out.println("Parameters: " + params);
+
+	    // Execute the query using JdbcTemplate
+	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+	    return results;
+	}
+	*/
+ 	
+ 	public List<Map<String, Object>> getAttendanceWithInitiatedSalary(
+		    int inchargeId, String month, String inchargeName, List<Integer> enrollmentIds) {
+
+		    String sql = "SELECT " +
+		        "e.group_id, " +
+		        "(SELECT group_name FROM suyaudavi_kuzhu WHERE suyaudavi_kuzhu.group_id = e.group_id LIMIT 1) AS group_name, " +
+		        "a.enrollment_id, e.emp_id, e.name, e.incharge_id, " +
+		        "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1) AS salary_per_day, " +
+		        "(SELECT wage_id FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1) AS wage_id, " +
+		        "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS year, " +
+		        "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS month, " +
+		        "DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime))) AS total_days, " +
+		        "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+		        "COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END) AS total_days_od, " +
+		        "COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END) AS total_days_salary, " +
+		        "((COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END)) * " +
+		        "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1)) AS total_salary, " +
+		        "(MAX(DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)))) - " +
+		        "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT CASE WHEN a.indatetime IS NULL THEN DATE(a.oddatetime) END))) AS total_days_absent, " +
+		        "IFNULL(s.salary_status, '') AS salary_status " +
+		        "FROM attendance AS a " +
+		        "INNER JOIN enrollment_table AS e ON a.enrollment_id = e.enrollment_id " +
+		        "LEFT JOIN salary_details AS s ON a.enrollment_id = s.enrollment_id " +
+		        "AND s.month = MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) " +
+		        "AND s.year = YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) " +
+		        "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) " +
+		        "AND (? IS NULL OR e.incharge_id = ?) " +
+		        "AND (? IS NULL OR e.incharge_name = ?) ";
+
+		    if (month != null && !month.isEmpty()) {
+		        sql += "AND MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? ";
+		    }
+
+		    sql += "AND IFNULL(s.salary_status, '') IN ('Initiated', 'Approved') " +
+		           "AND e.enrollment_id IN (" +
+		           enrollmentIds.stream().map(id -> "?").collect(Collectors.joining(", ")) + ") " +
+		           "GROUP BY a.enrollment_id, e.group_id, " +
+		           "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+		           "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+		           "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1), " +
+		           "(SELECT wage_id FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1), " +
+		           "(SELECT group_name FROM suyaudavi_kuzhu WHERE suyaudavi_kuzhu.group_id = e.group_id LIMIT 1), " +
+		           "DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime))), " +
+		           "s.salary_status";
+
+		    List<Object> params = new ArrayList<>();
+		    params.add(inchargeId);
+		    params.add(inchargeId);
+		    params.add(inchargeName);
+		    params.add(inchargeName);
+		    
+
+		    if (month != null && !month.isEmpty()) {
+		        params.add(month);
+		    }
+
+		    params.addAll(enrollmentIds);
+		    
+		    System.out.println("SQL = " + sql);
+		    System.out.println("Parameter = "+ params);
+
+		    return jdbcTemplate.queryForList(sql, params.toArray());
+		}
+	@Transactional
+	public void updateSalaryStatusToApproved(List<Integer> enrollmentIds, String month, int year) {
+	    String sql = "UPDATE salary_details SET salary_status = 'Approved' WHERE enrollment_id = ? AND month = ? AND year = ?";
+
+	    for (Integer enrollmentId : enrollmentIds) {
+	        // Pass the individual enrollmentId instead of the entire list
+	    	jdbcTemplate.update(sql, enrollmentId, month, year);
+	    }
+    }
+	/*	
+	public List<Map<String, Object>> getFilteredSalaryDetails(String month, Integer year, String salaryStatus) {
+	    StringBuilder sql = new StringBuilder("SELECT " +
+	                 "e.incharge_name, " +
+	                 "GROUP_CONCAT(e.enrollment_id) AS enrollment_ids, " + 
+	                 "COUNT(e.enrollment_id) AS total_staff_count, " + 
+	                 "sd.month, " + 
+	                 "sd.year, " +   
+	                 "sd.salary_status, " +  
+	                 "COUNT(CASE WHEN sd.salary_status = 'Initiated' THEN 1 END) AS total_initiated_count, " +  
+	                 "COUNT(CASE WHEN sd.salary_status = 'Approved' THEN 1 END) AS total_approved_count, " +   
+	                 "SUM(CASE WHEN sd.salary_status IN ('Initiated', 'Approved') THEN sd.salary_amount ELSE 0 END) AS total_salary_amount " + 
+	                 "FROM enrollment_table e " +
+	                 "JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +
+	                 "WHERE 1=1 "); // Placeholder for dynamic conditions
+
+	    if (month != null && !month.isEmpty()) {
+	        sql.append(" AND sd.month = '").append(month).append("'");
+	    }
+	    if (year != null) {
+	        sql.append(" AND sd.year = ").append(year);
+	    }
+	    if (salaryStatus != null && !salaryStatus.isEmpty()) {
+	        sql.append(" AND sd.salary_status = '").append(salaryStatus).append("'");
+	    }
+	    
+	    sql.append(" GROUP BY e.incharge_name, sd.month, sd.year, sd.salary_status ");
+	    sql.append(" ORDER BY sd.year DESC, sd.month DESC");
+
+	    try {
+	        List<Map<String, Object>> result = jdbcTemplate.queryForList(sql.toString());
+	        for (Map<String, Object> row : result) {
+	            String enrollmentIdsString = (String) row.get("enrollment_ids");
+	            if (enrollmentIdsString != null) {
+	                List<Integer> enrollmentIds = Arrays.stream(enrollmentIdsString.split(","))
+	                                                    .map(String::trim)
+	                                                    .filter(id -> !id.isEmpty())
+	                                                    .map(Integer::parseInt)
+	                                                    .collect(Collectors.toList());
+	                row.put("enrollment_ids", enrollmentIds);
+	            }
+	        }
+	        return result;
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return Collections.emptyList();
+	    }
+	}
+	*/
+	/*
+	public List<Map<String, Object>> getFilteredSalaryDetails(String month, Integer year, String salaryStatus, String department, String loginId) {
+	    StringBuilder sql = new StringBuilder("SELECT " +
+	                     "e.incharge_name, " +
+	                     "GROUP_CONCAT(e.enrollment_id) AS enrollment_ids, " + 
+	                     "COUNT(e.enrollment_id) AS total_staff_count, " + 
+	                     "sd.month, " + 
+	                     "sd.year, " +   
+	                     "sd.salary_status, " +  
+	                     "COUNT(CASE WHEN sd.salary_status = 'Initiated' THEN 1 END) AS total_initiated_count, " +  
+	                     "COUNT(CASE WHEN sd.salary_status = 'Approved' THEN 1 END) AS total_approved_count, " +   
+	                     "SUM(CASE WHEN sd.salary_status IN ('Initiated', 'Approved') THEN sd.salary_amount ELSE 0 END) AS total_salary_amount, " +
+	                     "e.department " + // Select the department as well
+	                     "FROM enrollment_table e " +
+	                     "JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +
+	                     "WHERE 1=1 "); // Placeholder for dynamic conditions
+
+	    // Add filters for month, year, salary status, and department
+	    if (month != null && !month.isEmpty()) {
+	        sql.append(" AND sd.month = '").append(month).append("'");
+	    }
+	    if (year != null) {
+	        sql.append(" AND sd.year = ").append(year);
+	    }
+	    if (salaryStatus != null && !salaryStatus.isEmpty()) {
+	        sql.append(" AND sd.salary_status = '").append(salaryStatus).append("'");
+	    }
+	    if (department != null && !department.isEmpty()) {
+	        sql.append(" AND e.department = '").append(department).append("'");
+	    }
+	    
+	    // Retrieve zone access for the user
+	    String zoneAccessSQL = "SELECT zone FROM gcc_apps.login_mapping_user WHERE appuser_id = ?";
+	    List<Map<String, Object>> getAccess = jdbcTemplate.queryForList(zoneAccessSQL, loginId);
+	    System.out.println(zoneAccessSQL +"->"+ loginId);
+	    // Extract the zones from getAccess
+	    List<String> zones = getAccess.stream()
+	                                  .map(access -> (String) access.get("zone"))
+	                                  .filter(Objects::nonNull)
+	                                  .collect(Collectors.toList());
+
+	    // If the user has zone acc	ess, add it to the WHERE clause
+	    if (!zones.isEmpty()) {
+	        String zoneList = zones.stream()
+	                               .map(zone -> "'" + zone + "'")
+	                               .collect(Collectors.joining(", "));
+	        sql.append(" AND e.zone IN (").append(zoneList).append(")");
+	       // System.out.println("AND e.zone IN ("+zoneList+")");
+	    }
+	    else {
+	    	sql.append(" AND e.zone IN (").append("0").append(")");
+	    }
+	    
+	    sql.append(" GROUP BY e.incharge_name, sd.month, sd.year, sd.salary_status, e.department ");
+	    sql.append(" ORDER BY sd.year DESC, sd.month DESC");
+	    
+	    System.out.println(sql);
+
+	    try {
+	        List<Map<String, Object>> result = jdbcTemplate.queryForList(sql.toString());
+	        for (Map<String, Object> row : result) {
+	            String enrollmentIdsString = (String) row.get("enrollment_ids");
+	            if (enrollmentIdsString != null) {
+	                List<Integer> enrollmentIds = Arrays.stream(enrollmentIdsString.split(","))
+	                                                    .map(String::trim)
+	                                                    .filter(id -> !id.isEmpty())
+	                                                    .map(Integer::parseInt)
+	                                                    .collect(Collectors.toList());
+	                row.put("enrollment_ids", enrollmentIds);
+	            }
+	        }
+	        return result;
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return Collections.emptyList();
+	    }
+	}
+	*/
+	
+	public List<Map<String, Object>> getFilteredSalaryDetails(String month, Integer year, String salaryStatus, String loginId) {
+	    StringBuilder sql = new StringBuilder("SELECT " +
+	                     "e.incharge_name, " +
+	    		         "e.incharge_id, " +
+	    		         "e.zone, " +
+	                     "GROUP_CONCAT(e.enrollment_id) AS enrollment_ids, " + 
+	                     "COUNT(e.enrollment_id) AS total_staff_count, " + 
+	                     "sd.month, " + 
+	                     "sd.year, " +   
+	                     "sd.salary_status, " +  
+	                     "COUNT(CASE WHEN sd.salary_status = 'Initiated' THEN 1 END) AS total_initiated_count, " +  
+	                     "COUNT(CASE WHEN sd.salary_status = 'Approved' THEN 1 END) AS total_approved_count, " +   
+	                     "SUM(CASE WHEN sd.salary_status IN ('Initiated', 'Approved') THEN sd.salary_amount ELSE 0 END) AS total_salary_amount, " +
+	                     "e.department " + // Select the department as well
+	                     "FROM enrollment_table e " +
+	                     "JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +
+	                     "WHERE 1=1 "); // Placeholder for dynamic conditions
+
+	    // Add filters for month, year, salary status, and department
+	    if (month != null && !month.isEmpty()) {
+	        sql.append(" AND sd.month = '").append(month).append("'");
+	    }
+	    if (year != null) {
+	        sql.append(" AND sd.year = ").append(year);
+	    }
+	    if (salaryStatus != null && !salaryStatus.isEmpty()) {
+	        sql.append(" AND sd.salary_status = '").append(salaryStatus).append("'");
+	    }
+	    
+	    
+	    // Retrieve zone access for the user
+	    String zoneAccessSQL = "SELECT zone FROM gcc_apps.login_mapping_user WHERE appuser_id = ?";
+	    List<Map<String, Object>> getAccess = jdbcTemplate.queryForList(zoneAccessSQL, loginId);
+	    System.out.println(zoneAccessSQL +"->"+ loginId);
+	    // Extract the zones from getAccess
+	    List<String> zones = getAccess.stream()
+	                                  .map(access -> (String) access.get("zone"))
+	                                  .filter(Objects::nonNull)
+	                                  .collect(Collectors.toList());
+
+	    // If the user has zone acc	ess, add it to the WHERE clause
+	    if (!zones.isEmpty()) {
+	        String zoneList = zones.stream()
+	                               .map(zone -> "'" + zone + "'")
+	                               .collect(Collectors.joining(", "));
+	        sql.append(" AND e.zone IN (").append(zoneList).append(")");
+	       // System.out.println("AND e.zone IN ("+zoneList+")");
+	    }
+	    else {
+	    	sql.append(" AND e.zone IN (").append("0").append(")");
+	    }
+	    
+	    sql.append(" GROUP BY e.incharge_name, e.incharge_id, e.zone, sd.month, sd.year, sd.salary_status, e.department ");
+	    sql.append(" ORDER BY sd.year DESC, sd.month DESC");
+
+	    try {
+	        List<Map<String, Object>> result = jdbcTemplate.queryForList(sql.toString());
+	        for (Map<String, Object> row : result) {
+	            String enrollmentIdsString = (String) row.get("enrollment_ids");
+	            if (enrollmentIdsString != null) {
+	                List<Integer> enrollmentIds = Arrays.stream(enrollmentIdsString.split(","))
+	                                                    .map(String::trim)
+	                                                    .filter(id -> !id.isEmpty())
+	                                                    .map(Integer::parseInt)
+	                                                    .collect(Collectors.toList());
+	                row.put("enrollment_ids", enrollmentIds);
+	            }
+	        }
+	        return result;
+	    } catch (Exception e) {
+	        e.printStackTrace();
+	        return Collections.emptyList();
+	    }
+	}
+	
+	public List<Map<String, Object>> getAttendanceWithSalaryByInchargeId(String month, Integer year, Integer incharge_id) {
+	    StringBuilder sql = new StringBuilder("SELECT " +
+	        "e.group_id, " +
+	        "(SELECT group_name FROM suyaudavi_kuzhu WHERE suyaudavi_kuzhu.group_id = e.group_id LIMIT 1) AS group_name, " +
+	        "a.enrollment_id, " +
+	        "e.emp_id, " +
+	        "e.name, " +
+	        "e.incharge_id, " +
+	        "e.incharge_name, " +
+	        "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1) AS salary_per_day, " +
+	        "(SELECT wage_id FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1) AS wage_id, " +
+	        "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS year, " +
+	        "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS month, " +
+	        "DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime))) AS total_days, " +
+	        "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+	        // Subquery to get total_days_od
+	        "(SELECT COUNT(DISTINCT DATE(a2.oddatetime)) " +
+	        " FROM attendance AS a2 " +
+	        " WHERE MONTHNAME(a2.oddatetime) = ? " +  // Use placeholder for month
+	        " AND YEAR(a2.oddatetime) = ? " +        // Use placeholder for year
+	        " AND a2.enrollment_id = a.enrollment_id " +
+	        " AND DATE(a2.oddatetime) NOT IN ( " +
+	        "   SELECT DISTINCT DATE(a3.indatetime) " +
+	        "   FROM attendance AS a3 " +
+	        "   WHERE MONTHNAME(a3.indatetime) = ? " +  // Use placeholder for month
+	        "   AND YEAR(a3.indatetime) = ? " +        // Use placeholder for year
+	        "   AND a3.enrollment_id = a.enrollment_id " +
+	        ")) AS total_days_od, " +
+	        "IFNULL(s.salary_status, '') AS salary_status " +
+	        "FROM attendance AS a " +
+	        "INNER JOIN enrollment_table AS e ON a.enrollment_id = e.enrollment_id " +
+	        "LEFT JOIN salary_details AS s ON a.enrollment_id = s.enrollment_id " +
+	        "AND s.month = MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) " +
+	        "AND s.year = YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) " +
+	        "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) ");
+
+	    // Append condition for incharge_id
+	    sql.append("AND (? IS NULL OR e.incharge_id = ?) ");
+
+	    // Append condition for month if provided
+	    if (month != null && !month.isEmpty()) {
+	        sql.append("AND MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? ");
+	    }
+
+	    // Append condition for year if provided
+	    if (year != null) {
+	        sql.append("AND YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? ");
+	    }
+
+	    // Group by necessary columns
+	    sql.append("GROUP BY a.enrollment_id, e.group_id, " +
+	               "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+	               "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+	               "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1), " +
+	               "(SELECT wage_id FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1), " +
+	               "(SELECT group_name FROM suyaudavi_kuzhu WHERE suyaudavi_kuzhu.group_id = e.group_id LIMIT 1), " +
+	               "DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime))), " +
+	               "s.salary_status");
+
+	    // Create a list of parameters
+	    List<Object> params = new ArrayList<>();
+	    params.add(month);  // Add month for total_days_od
+	    params.add(year);   // Add year for total_days_od
+	    params.add(month);  // Add month for the inner subquery
+	    params.add(year);   // Add year for the inner subquery
+	    params.add(incharge_id);
+	    params.add(incharge_id);  // Added twice for the conditional check in the SQL
+	    if (month != null && !month.isEmpty()) {
+	        params.add(month);
+	    }
+	    if (year != null) {
+	        params.add(year);
+	    }
+
+	    // Log the SQL and parameters (optional for debugging)
+	    System.out.println("Generated SQL: " + sql.toString());
+	    System.out.println("Parameters: " + params);
+
+	    // Execute the query using JdbcTemplate
+	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+	    return results;
+	}
+	
+	public List<Map<String, Object>> getZoneWiseReport(String month, Integer year, String salaryStatus, String groupName, String zone, String division) {
+		String sql = "select en.zone,en.division, en.emp_id, en.name, en.incharge_name, en.incharge_designation, sk.group_name, s.total_days_present, s.total_days_od, "
+				+ "s.total_days_absent, s.total_days_salary, s.month as imonth,s.year as iyear, s.salary_status, s.salary_amount as total_salary, "
+				+ "DAY(LAST_DAY(STR_TO_DATE(CONCAT(s.year, '-', s.month, '-01'), '%Y-%M-%d'))) AS total_days from salary_details s "
+				+ "left join enrollment_table en on s.enrollment_id = en.enrollment_id "
+				+ "left join suyaudavi_kuzhu sk on s.group_id = sk.group_id "
+				+ "where s.month = ? and s.year =? "
+				+ "AND (s.salary_status = 'Initiated' OR s.salary_status = 'Approved') " 
+                + (salaryStatus != null && !salaryStatus.isEmpty() ? "AND s.salary_status = ? " : "") 
+                + (groupName != null && !groupName.isEmpty() ? "AND sk.group_name = ? " : "")
+                + (zone != null && !zone.isEmpty() ? "AND en.zone = ? " : "")
+                + (division != null && !division.isEmpty() ? "AND en.division = ? " : "");
+		
+		// Prepare the query parameters based on provided inputs
+	    List<Object> params = new ArrayList<>();
+	    params.add(month);
+	    params.add(year);
+	    if (salaryStatus != null && !salaryStatus.isEmpty()) {
+	        params.add(salaryStatus);
+	    }
+	    if (groupName != null && !groupName.isEmpty()) {
+	        params.add(groupName);
+	    }
+	    if (zone != null && !zone.isEmpty()) {
+	        params.add(zone);
+	    }
+	    if (division != null && !division.isEmpty()) {
+	        params.add(division);
+	    }
+	    
+		
+		List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+	    return results;
+	}
+	
+	public List<Map<String, Object>> getAttendanceReport(String fromdate, String todate, String groupName, String zone, String division) {
+		String sql = "select date_format(coalesce(att.indatetime, att.oddatetime, att.leavedatetime),'%d-%m-%Y') as attendance_date, et.emp_id, et.name, "
+				+ " CASE WHEN att.indatetime IS NOT NULL THEN 'Present' WHEN att.leavedatetime IS NOT NULL THEN 'Absent' "
+				+ " WHEN att.oddatetime IS NOT NULL THEN 'On Duty' ELSE 'No Record' END AS attendance_status, "
+				+ " et.incharge_name,et.incharge_phoneno, et.incharge_designation, et.zone, et.division, et.department, sk.group_name from attendance att "
+				+ " left join enrollment_table et on att.enrollment_id = et.enrollment_id "
+				+ " left join suyaudavi_kuzhu sk on et.group_id = sk.group_id where "
+				+ " (DATE(att.indatetime) BETWEEN STR_TO_DATE('"+fromdate+"', '%Y-%m-%d') AND STR_TO_DATE('"+todate+"', '%Y-%m-%d') "
+				+ " OR DATE(att.oddatetime) BETWEEN STR_TO_DATE('"+fromdate+"', '%Y-%m-%d') AND STR_TO_DATE('"+todate+"', '%Y-%m-%d')"
+				+ " OR DATE(att.leavedatetime) BETWEEN STR_TO_DATE('"+fromdate+"', '%Y-%m-%d') AND STR_TO_DATE('"+todate+"', '%Y-%m-%d')) "
+				+ (zone != null && !zone.isEmpty() ? " and et.zone = ? " : "")
+				+ (division != null && !division.isEmpty() ?" and et.division = ? " : "") 
+				+ (groupName != null && !groupName.isEmpty() ?" and sk.group_name = ? " : "");
+		
+		// Prepare the query parameters based on provided inputs
+	    List<Object> params = new ArrayList<>();
+	    
+	    if (groupName != null && !groupName.isEmpty()) {
+	        params.add(groupName);
+	    }
+	    if (zone != null && !zone.isEmpty()) {
+	        params.add(zone);
+	    }
+	    if (division != null && !division.isEmpty()) {
+	        params.add(division);
+	    }
+		
+		List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+	    return results;
+	}
+	/**************************************Updated code working 08-10-2024******************************************/
+//	 public List<Map<String, Object>> getAttendanceWithSalaryByInchargeId(String month, Integer year, Integer incharge_id) {
+//		    StringBuilder sql = new StringBuilder("SELECT " +
+//		        "e.group_id, " +
+//		        "(SELECT group_name FROM suyaudavi_kuzhu WHERE suyaudavi_kuzhu.group_id = e.group_id LIMIT 1) AS group_name, " +
+//		        "a.enrollment_id, " +
+//		        "e.emp_id, " +
+//		        "e.name, " +
+//		        "e.incharge_id, " +
+//		        "e.incharge_name, " +
+//		        "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1) AS salary_per_day, " +
+//		        "(SELECT wage_id FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1) AS wage_id, " +
+//		        "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS year, " +
+//		        "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS month, " +
+//		        "DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime))) AS total_days, " +
+//		        "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+//		        "COUNT(DISTINCT DATE(a.oddatetime)) AS total_days_od, " +
+//		        "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) AS total_days_salary, " +
+//		        "((COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) * " +
+//		        "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1)) AS total_salary, " +
+//		        "(MAX(DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)))) - " +
+// 	            "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime)))) AS total_days_absent, " +
+//		        "IFNULL(s.salary_status, '') AS salary_status " +
+//		        "FROM attendance AS a " +
+//		        "INNER JOIN enrollment_table AS e ON a.enrollment_id = e.enrollment_id " +
+//		        "LEFT JOIN salary_details AS s ON a.enrollment_id = s.enrollment_id " +
+//		        "AND s.month = MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) " +
+//		        "AND s.year = YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) " +
+//		        "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) ");
+//
+//		    // Append condition for incharge_id
+//		    sql.append("AND (? IS NULL OR e.incharge_id = ?) ");
+//
+//		    // Append condition for month if provided
+//		    if (month != null && !month.isEmpty()) {
+//		        sql.append("AND MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? ");
+//		    }
+//
+//		    // Append condition for year if provided
+//		    if (year != null) {
+//		        sql.append("AND YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? ");
+//		    }
+//
+//		    // Group by necessary columns
+//		    sql.append("GROUP BY a.enrollment_id, e.group_id, " +
+//		               "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+//		               "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+//		               "(SELECT salary_per_day FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1), " +
+//		               "(SELECT wage_id FROM staff_wages WHERE isactive = 1 ORDER BY wage_id DESC LIMIT 1), " +
+//		               "(SELECT group_name FROM suyaudavi_kuzhu WHERE suyaudavi_kuzhu.group_id = e.group_id LIMIT 1), " +
+//		               "DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime))), " +
+//		               "s.salary_status");
+//
+//		    // Create a list of parameters
+//		    List<Object> params = new ArrayList<>();
+//		    params.add(incharge_id);
+//		    params.add(incharge_id);  // Added twice for the conditional check in the SQL
+//		    if (month != null && !month.isEmpty()) {
+//		        params.add(month);
+//		    }
+//		    if (year != null) {
+//		        params.add(year);
+//		    }
+//
+//		    // Log the SQL and parameters (optional for debugging)
+//		    System.out.println("Generated SQL: " + sql.toString());
+//		    System.out.println("Parameters: " + params);
+//
+//		    // Execute the query using JdbcTemplate
+//		    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+//		    return results;
+//		}
+	
+//	 public List<Map<String, Object>> getAttendanceWithSalaryByInchargeId(String month, Integer year, Integer incharge_id) {
+//		    StringBuilder sql = new StringBuilder("SELECT " +
+//		        "e.enrollment_id, " +
+//		        "e.emp_id, " +
+//		        "e.name, " +
+//		        "e.incharge_id, " +
+//		        "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS year, " +
+//		        "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS month, " +
+//		        "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+//		        "COUNT(DISTINCT DATE(a.oddatetime)) AS total_days_od, " +
+//		        "MAX(DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)))) AS total_days, " +
+//		        "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) AS total_days_salary, " +
+//		        "(MAX(DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)))) - " +
+//		        "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime)))) AS total_days_absent, " +
+//		        "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS salary_per_day, " +
+//		        "((COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) * " +
+//		        "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1)) AS total_salary, " +
+//		        "IFNULL(sd.salary_status, '') AS salary_status, " +  // Modified salary_status to return an empty string
+//		        "sk.group_id, " +
+//		        "sk.group_name " +
+//		        "FROM enrollment_table e " +
+//		        "JOIN attendance a ON e.enrollment_id = a.enrollment_id " +
+//		        "LEFT JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +
+//		        "LEFT JOIN suyaudavi_kuzhu sk ON e.group_id = sk.group_id " +
+//		        "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) ");
+//
+//		    // Check if incharge_id is present
+//		    sql.append("AND (? IS NULL OR e.incharge_id = ?) ");
+//
+//		    // Check if month is provided
+//		    if (month != null && !month.isEmpty()) {
+//		        sql.append("AND MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? ");
+//		    }
+//
+//		    // Check if year is provided
+//		    if (year != null) {
+//		        sql.append("AND YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? ");
+//		    }
+//
+//		    // Updated GROUP BY to include all non-aggregated columns
+//		    sql.append("GROUP BY e.enrollment_id, e.emp_id, e.name, e.incharge_id, " +
+//		               "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+//		               "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), " +
+//		               "sd.salary_status, sk.group_id, sk.group_name");
+//
+//		    // Create a list of parameters
+//		    List<Object> params = new ArrayList<>();
+//		    params.add(incharge_id);
+//		    params.add(incharge_id);  // Added twice for the conditional check in the SQL
+//		    if (month != null && !month.isEmpty()) {
+//		        params.add(month);
+//		    }
+//		    if (year != null) {
+//		        params.add(year);
+//		    }
+//
+//		    // Log SQL and parameters
+//		    System.out.println("Generated SQL: " + sql.toString());
+//		    System.out.println("Parameters: " + params);
+//
+//		    // Execute the query
+//		    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+//		    return results;
+//		}
+	/*
+	public List<Map<String, Object>> getAttendanceWithSalaryByInchargeId(String month, Integer year, Integer incharge_id) {
+		 
+	    StringBuilder sql = new StringBuilder("SELECT " +
+	        "e.enrollment_id, " +
+	        "e.emp_id, " +	
+	        "e.name, " +
+	        "e.incharge_id, " +
+	        "YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS year, " +
+	        "MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) AS month, " +
+	        "COUNT(DISTINCT DATE(a.indatetime)) AS total_days_present, " +
+	        "COUNT(DISTINCT DATE(a.leavedatetime)) AS total_days_absent, " +
+	        "COUNT(DISTINCT DATE(a.oddatetime)) AS total_days_od, " +
+	        "DAY(LAST_DAY(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime))) AS total_days, " +
+	        "(COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) AS total_days_salary, " +
+	        "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1) AS salary_per_day, " +
+	        "((COUNT(DISTINCT DATE(a.indatetime)) + COUNT(DISTINCT DATE(a.oddatetime))) * " +
+	        "(SELECT sw.salary_per_day FROM staff_wages sw WHERE sw.isactive = 1 ORDER BY sw.effect_from_date DESC LIMIT 1)) AS total_salary, " +
+	        "COALESCE(sd.salary_status, '') AS salary_status, COALESCE(sk.group_id, '') AS group_id, " +
+	        "COALESCE(sk.group_name, '') AS group_name " +
+	        "FROM enrollment_table e " +
+	        "JOIN attendance a ON e.enrollment_id = a.enrollment_id " +
+	        "LEFT JOIN salary_details sd ON e.enrollment_id = sd.enrollment_id " +
+	        "LEFT JOIN suyaudavi_kuzhu sk ON e.group_id = sk.group_id " +
+	        "WHERE (a.inby IS NOT NULL OR a.leaveby IS NOT NULL OR a.odby IS NOT NULL) ");
+
+	    // Check if incharge_id is present
+	    sql.append("AND (? IS NULL OR e.incharge_id = ?) ");
+
+	    // Check if month is provided
+	    if (month != null && !month.isEmpty()) {
+	        sql.append("AND MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? ");
+	    }
+
+	    // Check if year is provided
+	    if (year != null) {
+	        sql.append("AND YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)) = ? ");
+	    }
+
+	    sql.append("GROUP BY e.enrollment_id, e.name, YEAR(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), MONTHNAME(COALESCE(a.indatetime, a.leavedatetime, a.oddatetime)), total_days, sd.salary_status, sk.group_id, sk.group_name");
+
+	    // Create a list of parameters
+	    List<Object> params = new ArrayList<>();
+	    params.add(incharge_id);
+	    params.add(incharge_id);  // Added twice for the conditional check in the SQL
+	    if (month != null && !month.isEmpty()) {
+	        params.add(month);
+	    }
+	    if (year != null) {
+	        params.add(year);
+	    }
+
+	    // Log SQL and parameters
+	    System.out.println("Generated SQL: " + sql.toString());
+	    System.out.println("Parameters: " + params);
+
+	    // Execute the query
+	    List<Map<String, Object>> results = jdbcTemplate.queryForList(sql.toString(), params.toArray());
+	    return results;
+	}
+	*/
+}
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/service/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/service/package-info.java
new file mode 100644
index 0000000..56a1d9f
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/service/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.nulm.service;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/service/DataSyncService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/service/DataSyncService.java
index 10a7acb..4e1fc2b 100644
--- a/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/service/DataSyncService.java
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/service/DataSyncService.java
@@ -34,12 +34,27 @@ public class DataSyncService {
    
     private int getTotalRecordCount(String tablename) {
         String countQuery = "SELECT COUNT(*) FROM "+tablename;
+        if(tablename.equals("EGGR_COMPLAINTDETAILS@erp")) {
+        	countQuery = "SELECT COUNT(*) FROM "+tablename+" WHERE YEAR(`COMPLAINTDATE`) = '2023'";
+    	}
+    	if(tablename.equals("EGGR_REDRESSALDETAILS@erp")) {
+    		countQuery = "SELECT COUNT(*) FROM "+tablename+" WHERE YEAR(`RESPONSEDATE`) = '2023'";
+    	}
         return oracleJdbcTemplate.queryForObject(countQuery, Integer.class);
     }
 
     private List<Map<String, Object>> fetchBatch(int startRow, int endRow, String tablename) {
-    	String fetchQuery = "SELECT * FROM (SELECT a.*, ROWNUM rnum FROM (SELECT * FROM "+tablename+") a " +
+    	String fetchQuery = "";
+    	fetchQuery = "SELECT * FROM (SELECT a.*, ROWNUM rnum FROM (SELECT * FROM "+tablename+") a " +
                 "WHERE ROWNUM <= ?) WHERE rnum > ?";
+    	if(tablename.equals("EGGR_COMPLAINTDETAILS@erp")) {
+    		fetchQuery = "SELECT * FROM (SELECT a.*, ROWNUM rnum FROM (SELECT * FROM "+tablename+") a " +
+                    "WHERE ROWNUM <= ?) WHERE rnum > ? AND YEAR(`COMPLAINTDATE`) = '2023'";
+    	}
+    	if(tablename.equals("EGGR_REDRESSALDETAILS@erp")) {
+    		fetchQuery = "SELECT * FROM (SELECT a.*, ROWNUM rnum FROM (SELECT * FROM "+tablename+") a " +
+    				"WHERE ROWNUM <= ?) WHERE rnum > ? AND YEAR(`RESPONSEDATE`) = '2023'";
+    	}
         return oracleJdbcTemplate.queryForList(fetchQuery, endRow, startRow);
     }
     
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/service/Base64Util.java b/src/main/java/in/gov/chennaicorporation/gccoffice/service/Base64Util.java
index e5030a7..dab293a 100644
--- a/src/main/java/in/gov/chennaicorporation/gccoffice/service/Base64Util.java
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/service/Base64Util.java
@@ -10,14 +10,15 @@ import org.springframework.transaction.annotation.Transactional;
 public class Base64Util {
 
     // Encode to Base64
-    public static String encodeBase64(String value) {
-    	if (value != null && !value.isEmpty()) {
-        byte[] encodedBytes = Base64.getEncoder().encode(value.getBytes());
-        return new String(encodedBytes);
-    	}
-    	else {
-    		return "";
-    	}
+	public static String encodeBase64(String value) {
+        if (value != null && !value.isEmpty()) {
+            byte[] encodedBytes = Base64.getEncoder().encode(value.getBytes());
+            // Print the original value and its encoded version
+           // System.out.println(value + " : " + new String(encodedBytes)); 
+            return new String(encodedBytes);
+        } else {
+            return "";
+        }
     }
 
     // Decode from Base64
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/service/CustomUserDetailsService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/service/CustomUserDetailsService.java
index da468ee..15cfe7c 100644
--- a/src/main/java/in/gov/chennaicorporation/gccoffice/service/CustomUserDetailsService.java
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/service/CustomUserDetailsService.java
@@ -38,6 +38,7 @@ public class CustomUserDetailsService implements UserDetailsService {
         	userActivityService.logUserActivity("0","User (" + username +") not found");
             throw new UsernameNotFoundException("User not found");
         }
+        
         /*
         return org.springframework.security.core.userdetails.User.builder()
                 .username(appUserEntity.getUsername())
@@ -45,7 +46,7 @@ public class CustomUserDetailsService implements UserDetailsService {
                 .roles(appUserEntity.getRoles())
                 .additionalAttributes(Map.of("userid", appUserEntity.getUserid()))
                 .build();
-                */
+        */
         
         String userRole = appUserEntity.getRoles();
         // Ensure that the role starts with "ROLE_"
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/service/GetMappingUserDetails.java b/src/main/java/in/gov/chennaicorporation/gccoffice/service/GetMappingUserDetails.java
new file mode 100644
index 0000000..1d393c4
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/service/GetMappingUserDetails.java
@@ -0,0 +1,79 @@
+package in.gov.chennaicorporation.gccoffice.service;
+
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.dao.DataAccessException;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+
+@Service
+public class GetMappingUserDetails {
+	private JdbcTemplate jdbcTemplate;
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysqlAppDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getMappingList(String loginId) {
+		try {
+        	String sqlQuery = "SELECT * FROM `login_mapping_user` WHERE appuser_id=? LIMIT 1";
+        	//System.out.println(sqlQuery+loginId);
+        	List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery,loginId);
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+	}
+	
+	@Transactional(readOnly = true)
+    public String getOfficerMaster(String loginId) {
+        try {
+            String sqlQuery = "SELECT `officer_master_id` FROM `login_mapping_user` WHERE appuser_id = ? LIMIT 1";
+            List<Map<String, Object>> results = jdbcTemplate.queryForList(sqlQuery, loginId);
+            
+            if (results.isEmpty()) {
+                return null; // No record found
+            } else {
+                // Assuming there is only one result because of LIMIT 1
+                Map<String, Object> row = results.get(0);
+                Object officerMasterId = row.get("officer_master_id");
+                
+                return officerMasterId != null ? officerMasterId.toString() : null;
+            }
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public String getERPUserId(String loginId) {
+        try {
+            String sqlQuery = "SELECT `erpuser_id` FROM `login_mapping_user` WHERE appuser_id = ? LIMIT 1";
+            List<Map<String, Object>> results = jdbcTemplate.queryForList(sqlQuery, loginId);
+            
+            if (results.isEmpty()) {
+                return null; // No record found
+            } else {
+                // Assuming there is only one result because of LIMIT 1
+                Map<String, Object> row = results.get(0);
+                Object erpUserId = row.get("erpuser_id");
+                
+                return erpUserId != null ? erpUserId.toString() : null;
+            }
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Handle error appropriately
+        }
+    }
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/service/LoginUserInfo.java b/src/main/java/in/gov/chennaicorporation/gccoffice/service/LoginUserInfo.java
index 77dcf5d..dc119c0 100644
--- a/src/main/java/in/gov/chennaicorporation/gccoffice/service/LoginUserInfo.java
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/service/LoginUserInfo.java
@@ -1,15 +1,36 @@
 package in.gov.chennaicorporation.gccoffice.service;
 
+import java.time.LocalDate;
+import java.time.temporal.ChronoUnit;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
 
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
 import org.springframework.security.core.Authentication;
 import org.springframework.security.core.context.SecurityContextHolder;
 import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.stereotype.Service;
 
+import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
+
 @Service
 public class LoginUserInfo {
-
+	private JdbcTemplate jdbcAppTemplate;
+	private JdbcTemplate jdbcKuralTemplate;
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysqlAppDataSource") DataSource sosDataSource,
+			@Qualifier("mysqlKuralDataSource") DataSource kuralDataSource) {
+		this.jdbcAppTemplate = new JdbcTemplate(sosDataSource);
+		this.jdbcKuralTemplate = new JdbcTemplate(kuralDataSource);
+	}
+	
     public static UserDetails getCurrentUserDetails() {
         Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
         if (authentication != null && authentication.isAuthenticated()) {
@@ -74,4 +95,114 @@ public class LoginUserInfo {
         }
     	return null;
     }
+    
+    public String resetPassword(String userid, String oldPassword, String newPassword, String rawPassword) {
+        BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
+
+        // Query to get the stored encoded password for the given user ID
+        String fetchPasswordQuery = "SELECT `password` FROM `appusers` WHERE `id` = ?";
+        List<Map<String, Object>> result = jdbcAppTemplate.queryForList(fetchPasswordQuery, new Object[]{userid});
+
+        if (result.isEmpty()) {
+            // If no matching user is found, return an error message
+            return "User not found.";
+        }
+
+        String storedEncodedPassword = (String) result.get(0).get("password");
+
+        // Verify the old password against the stored encoded password
+        if (!passwordEncoder.matches(oldPassword, storedEncodedPassword)) {
+            // If the old password doesn't match, return an error message
+            return "Old password does not match.";
+        }
+
+        // Encode the new password using BCrypt
+        String encodedNewPassword = passwordEncoder.encode(newPassword);
+
+        // Update the password in the database
+        String updateQuery = "UPDATE `appusers` SET `password` = ?, `pwd_txt` = ? WHERE `id` = ?";
+        int rowsAffected = jdbcAppTemplate.update(updateQuery, new Object[]{encodedNewPassword, newPassword, userid});
+
+        if (rowsAffected > 0) {
+            // If the update is successful, return a success message
+            return "success";
+        } else {
+            // If the update fails, return an error message
+            return "Failed to reset the password. Please try again.";
+        }
+    }
+    
+    
+    public List<Map<String, Object>> userCheck(String username, String password) {
+    	
+    	Integer statusCode=404;
+    	String statusTxt="error";
+    	String msgTxt="User not found.";
+    	
+    	Map<String, Object> response = new HashMap<>();
+    	 
+        BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
+
+        // Query to get the stored encoded password for the given user ID
+        String fetchPasswordQuery = "SELECT `id`, `roles`, `usergroup_id`, `isactive`, `dname`, `password` as saltref FROM `appusers` WHERE `username` = ? AND (`isactive`=1 AND `isdelete`=0)";
+        List<Map<String, Object>> result = jdbcAppTemplate.queryForList(fetchPasswordQuery, new Object[]{username});
+        
+        if (result.isEmpty()) {
+        	System.out.println(fetchPasswordQuery);
+            // If no matching user is found, return an error message
+        	msgTxt = "User not found.";
+        	response.put("Data", Collections.emptyList());
+        }
+        else {
+
+	        String storedEncodedPassword = (String) result.get(0).get("saltref");
+	
+	        // Verify the password against the stored encoded password
+	        if (!passwordEncoder.matches(password, storedEncodedPassword)) {
+	        	msgTxt = "User not found.";
+	        	response.put("Data", Collections.emptyList());
+	        }
+	        else {
+	        	statusCode=200;
+	        	statusTxt="success";
+	        	msgTxt = "Login Successfully";
+	        	if (result.isEmpty()) {
+	    	    } else {
+	    	        response.put("Data", result);
+	    	    }
+	        }
+        }
+        response.put("statusCode", statusCode);
+	    response.put("statusText", statusTxt);
+	    response.put("message", msgTxt);
+	    
+	    return Collections.singletonList(response);
+    }
+    
+    // Dashboard : தினம் ஒரு திருக்குறள் // thirukkural
+    
+    public List<Map<String, Object>> getDailyContent() {
+        // Query to get all content from the table
+        String contentQuery = "SELECT * FROM kural"; // Replace content_table with your actual table name
+        List<Map<String, Object>> contentList = jdbcKuralTemplate.queryForList(contentQuery);
+
+        // Total number of records
+        int totalRecords = contentList.size();
+
+        if (totalRecords == 0) {
+            // If there are no records, return an empty list
+            return Collections.emptyList();
+        }
+
+        // Calculate the number of days since a specific start date (e.g., October 21, 2024)
+        LocalDate startDate = LocalDate.of(2024, 10, 21);
+        LocalDate currentDate = LocalDate.now();
+        long daysSinceStart = ChronoUnit.DAYS.between(startDate, currentDate);
+
+        // Get the content index for today (using modulo to cycle through the records)
+        int contentIndex = (int) (daysSinceStart % totalRecords);
+
+        // Return the content for today as a list
+        return Collections.singletonList(contentList.get(contentIndex));
+    }
 }
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/APIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/APIController.java
new file mode 100644
index 0000000..44c28ab
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/APIController.java
@@ -0,0 +1,64 @@
+package in.gov.chennaicorporation.gccoffice.sos.controller;
+
+import java.util.List;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import in.gov.chennaicorporation.gccoffice.sos.service.SOSService;
+
+@RequestMapping("gcc/api/sos")
+@RestController("sosRest") 
+public class APIController {
+	private SOSService sosService;
+	
+	@Autowired
+	public APIController(SOSService sosService) {
+		this.sosService = sosService;
+	}
+	
+	@GetMapping(value="/getZoneAndWard")
+	public List getZoneAndWard() {
+		return sosService.getZoneAndWard();
+	}
+	
+	@GetMapping(value="/getRescueList")
+	public List getRescueList(@RequestParam(value = "", required = false) String status) {
+		return sosService.getRescueList(status);
+	}
+	
+	@GetMapping(value="/getRescueUpdateData")
+	public List getRequestDataById(@RequestParam(value = "", required = false) String rescueid) {
+		return sosService.getRequestDataById(rescueid);
+	}
+	
+	@PostMapping(value="/saveRequest")
+	public List<?> saveRequest(
+			@RequestParam(value="contact_name", required = false) String contact_name,
+			@RequestParam(value="contact_number", required = false) String contact_number,
+			@RequestParam(value="latitude", required = false) String latitude,
+			@RequestParam(value="longitude", required = false) String longitude,
+			@RequestParam(value="zone", required = false) String zone,
+			@RequestParam(value="ward", required = false) String ward,
+			@RequestParam(value="streetid", required = false) String streetid,
+			@RequestParam(value="streetname", required = false) String streetname,
+			@RequestParam(value="location_details", required = false) String location_details,
+			@RequestParam(value="request_type", required = false) String request_type,
+			@RequestParam(value="no_of_count", required = false) String no_of_count,
+			@RequestParam(value="if_any", required = false) String if_any,
+			@RequestParam(value="land_mark", required = false) String land_mark,
+			@RequestParam(value="remarks", required = false) String remarks,
+			@RequestParam(value="loginId", required = false) String loginId,
+			@RequestParam(value="mode", required = false) String mode
+			){
+		return sosService.saveRequest(contact_name, contact_number, 
+				latitude, longitude, zone, ward, streetid, streetname, 
+				location_details, request_type, no_of_count, if_any, 
+				land_mark, remarks, loginId,mode);
+	}
+	
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/SOSController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/SOSController.java
new file mode 100644
index 0000000..6f1381a
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/SOSController.java
@@ -0,0 +1,44 @@
+package in.gov.chennaicorporation.gccoffice.sos.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+@RequestMapping("/gcc/sos")
+@Controller("SOSRestController")
+public class SOSController {
+	
+	private String BasePath = "modules/sos/";
+	
+	@GetMapping({"", "/", "/index"})
+	public String dashboard(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"inbox";
+	}
+	
+	@GetMapping({"/new"})
+	public String sosNew(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"new_sos";
+	}
+	
+	@GetMapping({"/pending"})
+	public String sosPending(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"pending_inbox";
+	}
+	
+	@GetMapping({"/closed"})
+	public String sosClosed(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"closed_inbox";
+	}
+
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/package-info.java
new file mode 100644
index 0000000..e8c9bf7
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.sos.controller;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/sos/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/package-info.java
new file mode 100644
index 0000000..e52ecfb
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.sos;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/sos/service/SOSService.java b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/service/SOSService.java
new file mode 100644
index 0000000..df3cbb3
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/service/SOSService.java
@@ -0,0 +1,192 @@
+package in.gov.chennaicorporation.gccoffice.sos.service;
+
+import java.sql.Connection;
+import java.sql.PreparedStatement;
+import java.sql.SQLException;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.core.env.Environment;
+import org.springframework.dao.DataAccessException;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.PreparedStatementCreator;
+import org.springframework.jdbc.support.GeneratedKeyHolder;
+import org.springframework.jdbc.support.KeyHolder;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@Service("sosService")
+public class SOSService {
+	private JdbcTemplate jdbcTemplate;
+	private final Environment environment;
+	private String fileBaseUrl;
+	
+	@Autowired
+	public SOSService(Environment environment) {
+		this.environment = environment;
+		this.fileBaseUrl="https://gccservices.in";
+	}
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysqlGccSOSDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getZoneAndWard(){
+		String SqlQuery = "";
+		
+		SqlQuery = "SELECT LPAD(CAST(zone AS UNSIGNED), 2, '0') AS zone, "
+				+ "GROUP_CONCAT(LPAD(CAST(divid AS UNSIGNED), 3, '0') "
+				+ "ORDER BY CAST(divid AS UNSIGNED) ASC) AS wards "
+				+ "FROM petition_master.councillor GROUP BY CAST(zone AS UNSIGNED) "
+				+ "ORDER BY CAST(zone AS UNSIGNED) ASC";
+		
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+		
+	}
+	
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getRescueList(String status){
+		String SqlQuery = "";
+		
+		SqlQuery = "SELECT *,CASE "
+				+ "           WHEN status = 1 THEN 'Closed' "
+				+ "           WHEN status = 0 THEN 'Pending' "
+				+ "           ELSE 'Unknown' "
+				+ "       END AS statusText FROM `rescue` where isactive=1";
+		if(status!="") {
+			SqlQuery = SqlQuery + " AND `status`='"+status+"'";
+		}
+		
+		System.out.println(SqlQuery);
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+	}
+	
+	@Transactional
+	public List<Map<String, Object>> getRequestDataById(
+			String rescue_id){
+		String sqlQuery = "SELECT *,CASE"
+				+ "	WHEN status = 0 THEN 'Pending' "
+				+ "	WHEN status = 1 THEN 'Closed' "
+				+ "    ELSE 'unknown'"
+				+ "    END AS status_name "
+				+ " FROM `rescue` WHERE `id`='"+rescue_id+"'";
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
+		Map<String, Object> response = new HashMap<>();
+	    if (result.isEmpty()) {
+	    	return result;
+	    }else {
+	    
+			String sqlQuery2 = "SELECT *,CONCAT('"+fileBaseUrl+"/gccofficialapp/files', filepath) AS imageUrl "
+					+ "FROM `rescue_officer_update` WHERE rescue_id='"+rescue_id+"'";
+		    List<Map<String, Object>> result2 = jdbcTemplate.queryForList(sqlQuery2);
+		   System.out.println(sqlQuery2);
+		    // Add the result2 and result3 to the main result map
+		    result.get(0).put("officer_activity_data", result2);
+	    }
+	    response.put("status", "success");
+        response.put("message", "Request Information");
+        response.put("Data", result);
+        return Collections.singletonList(response);
+	}
+	
+	
+	@Transactional
+	public List<Map<String, Object>> saveRequest(
+			String contact_name,
+			String contact_number,
+			String latitude,
+			String longitude,
+			String zone,
+			String ward,
+			String streetid,
+			String streetname,
+			String location_details,
+			String request_type,
+			String no_of_count,
+			String if_any,
+			String land_mark,
+			String remarks,
+			String loginId,
+			String mode
+			) {
+		List<Map<String, Object>> result=null;
+		Map<String, Object> response = new HashMap<>();
+		int lastInsertId = 0;
+		
+		String sqlQuery = "INSERT INTO `rescue`(`contact_name`, `contact_number`, `latitude`, `longitude`, `zone`, `ward`, "
+				+ "`streetid`, `streetname`, `location_details`, `request_type`, `no_of_count`, `if_any`, `land_mark`, "
+				+ "`remarks`, `user_id`,`modeofcomplient`) "
+				+ "VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)";
+		
+		KeyHolder keyHolder = new GeneratedKeyHolder();
+		
+		try {
+            int affectedRows = jdbcTemplate.update(new PreparedStatementCreator() {
+                @Override
+                public PreparedStatement createPreparedStatement(Connection connection) throws SQLException {
+                    PreparedStatement ps = connection.prepareStatement(sqlQuery, new String[]{"id"});
+                    ps.setString(1, contact_name);
+                    ps.setString(2, contact_number);
+                    ps.setString(3, latitude);
+                    ps.setString(4, longitude);
+                    ps.setString(5, zone);
+                    ps.setString(6, ward);
+                    ps.setString(7, streetid);
+                    ps.setString(8, streetname);
+                    ps.setString(9, location_details);
+                    ps.setString(10, request_type);
+                    ps.setString(11, no_of_count);
+                    ps.setString(12, if_any);
+                    ps.setString(13, land_mark);
+                    ps.setString(14, remarks);
+                    ps.setString(15, loginId);
+                    ps.setString(16, mode);
+                    return ps;
+                }
+            }, keyHolder);
+
+            if (affectedRows > 0) {
+                Number generatedId = keyHolder.getKey();
+                lastInsertId = (generatedId != null) ? generatedId.intValue() : 0;
+                response.put("insertId", lastInsertId);
+                response.put("status", "success");
+                response.put("message", "A new SOS request was inserted successfully!");
+                System.out.println("A new SOS request was inserted successfully! Insert ID: " + generatedId);
+            } else {
+                response.put("status", "error");
+                response.put("message", "Failed to insert a new SOS request.");
+            }
+        } catch (DataAccessException e) {
+            System.out.println("Data Access Exception:");
+            Throwable rootCause = e.getMostSpecificCause();
+            if (rootCause instanceof SQLException) {
+                SQLException sqlException = (SQLException) rootCause;
+                System.out.println("SQL State: " + sqlException.getSQLState());
+                System.out.println("Error Code: " + sqlException.getErrorCode());
+                System.out.println("Message: " + sqlException.getMessage());
+                response.put("status", "error");
+                response.put("message", sqlException.getMessage());
+                response.put("sqlState", sqlException.getSQLState());
+                response.put("errorCode", sqlException.getErrorCode());
+            } else {
+                System.out.println("Message: " + rootCause.getMessage());
+                response.put("status", "error");
+                response.put("message", rootCause.getMessage());
+            }
+        }
+
+        return Collections.singletonList(response);
+    }
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/sos/service/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/service/package-info.java
new file mode 100644
index 0000000..e10b410
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/sos/service/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.sos.service;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/works/controller/MainController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/works/controller/MainController.java
new file mode 100644
index 0000000..b648c22
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/works/controller/MainController.java
@@ -0,0 +1,33 @@
+package in.gov.chennaicorporation.gccoffice.works.controller;
+
+import java.util.List;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+@RequestMapping("/gcc/works")
+@Controller("worksController")
+public class MainController {
+	@GetMapping({"", "/", "/index", "/dashboard"})
+	public String home(Model model) {
+		return "modules/works/index";
+	}
+	
+	@GetMapping("/erp-works-update")
+	public String CreateRequest(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return "modules/works/erp-works-update";
+	}
+	
+	@GetMapping("/nonerp-works-add")
+	public String nonErpCreateRequest(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return "modules/works/non-erp-works-add";
+	}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/works/controller/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/works/controller/package-info.java
new file mode 100644
index 0000000..040b9e8
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/works/controller/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.works.controller;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/works/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/works/package-info.java
new file mode 100644
index 0000000..343a03b
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/works/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.works;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/works/service/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/works/service/package-info.java
new file mode 100644
index 0000000..a24f454
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/works/service/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.works.service;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/.DS_Store b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/.DS_Store
new file mode 100644
index 0000000..e75b544
Binary files /dev/null and b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/.DS_Store differ
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/APIController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/APIController.java
new file mode 100644
index 0000000..c062941
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/APIController.java
@@ -0,0 +1,218 @@
+package in.gov.chennaicorporation.gccoffice.zerohours_petition.controller;
+
+import java.util.List;
+import org.springframework.security.core.Authentication;
+
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.core.userdetails.UserDetails;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
+
+import in.gov.chennaicorporation.gccoffice.zerohours_petition.service.Petition;
+import in.gov.chennaicorporation.gccoffice.zerohours_petition.service.PetitionMaster;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+@RequestMapping("gcc/api/zerohours_petition")
+@RestController("zeroRest") // Mayor Petition Rest
+public class APIController {
+	private PetitionMaster petitionMaster;
+	private Petition petition;
+	
+	@Autowired
+	public APIController(PetitionMaster petitionMaster,Petition petition) {
+		this.petitionMaster = petitionMaster;
+		this.petition = petition;
+	}
+	
+	@GetMapping(value="/getEventList")
+	public List getEvents() {
+		return petition.getEvents();
+	}
+	
+	@GetMapping(value="/getCurrentEventList")
+	public List getCurrentEventList() {
+		return petition.getCurrentEventList();
+	}
+	
+	@GetMapping(value="/getZoneAndWard")
+	public List getZoneAndWard() {
+		return petitionMaster.getZoneAndWard();
+	}
+	
+	@GetMapping(value="/getCouncillor")
+	public List getCouncillor(@RequestParam("ward") String ward) {
+		return petitionMaster.getCouncillor(ward);
+	}
+	
+	@GetMapping(value="/getComplaintTypes")
+	public List getComplaintTypeList() {
+		return petitionMaster.getComplaintType();
+	}
+	
+	@GetMapping(value="/getOfficerList")
+	public List getOfficerList() {
+		return petitionMaster.getOfficerList();
+	}
+	
+	@GetMapping(value="/getPetitionTypes")
+	public List getPetitionTypes() {
+		return petitionMaster.getPetitionTypes();
+	}
+	
+	@GetMapping(value="/getPetitionList")
+	public List getPetitionList(@RequestParam("eventId") String eventId) {
+		return petition.getPetitionList(eventId);
+	}
+	
+	@GetMapping(value="/getUnmapPetitionList")
+	public List getUnmapPetitionList(@RequestParam("eventId") String eventId) {
+		return petition.getUnmapPetitionList(eventId);
+	}
+	
+	@GetMapping(value="/getPetitionDetails")
+	public List getPetitionDetails(@RequestParam("petitionNo") String petitionNo) {
+		return petition.getPetitionDetails(petitionNo);
+	}
+	
+	@PostMapping(value="/savePetition")
+	public String savePetition(
+			@RequestParam(value = "createdBy", required = false) String createdBy,
+			@RequestParam(value = "petitionType", required = false) String petitionType,
+			//@RequestParam(value = "petitionerName", required = false) String petitionerName,
+			//@RequestParam(value = "petitionerMobile", required = false) String petitionerMobile,
+			@RequestParam(value = "complaintType", required = false) String petitionerComplaint,
+			@RequestParam(value = "zone", required = false) String zone,
+			@RequestParam(value = "ward", required = false) String ward,
+			@RequestParam(value = "councillorName", required = false) String councillorName,
+			@RequestParam(value = "councillorMobile", required = false) String councillorMobile,
+			@RequestParam(value = "complaintNature", required = false) String complaintNature,
+			@RequestParam(value = "eventid", required = false) String eventid,
+			@RequestParam(value = "san_page1", required = false) MultipartFile page1,
+			@RequestParam(value = "san_page2", required = false) MultipartFile page2,
+			@RequestParam(value = "san_page3", required = false) MultipartFile page3,
+			@RequestParam(value = "san_page4", required = false) MultipartFile page4) {
+		
+		return petition.savePetition(petitionType, createdBy, zone, ward, councillorName, councillorMobile, petitionerComplaint, complaintNature, eventid,page1, page2, page3, page4);
+	}
+	
+	@PostMapping(value="/updatePetition")
+	public Boolean updatePetition(
+			@RequestParam(value = "petitionType", required = false) String petitionType,
+			@RequestParam(value = "petitionNo", required = false) String petitionNo,
+			@RequestParam(value = "createdBy", required = false) String createdBy,
+			@RequestParam(value = "petitionerName", required = false) String petitionerName,
+			@RequestParam(value = "petitionerMobile", required = false) String petitionerMobile,
+			@RequestParam(value = "petitionerAddress", required = false) String petitionerAddress,
+			@RequestParam(value = "petitionerPincode", required = false) String petitionerPincode,
+			@RequestParam(value = "complaintType", required = false) String petitionerComplaint,
+			@RequestParam(value = "complaintNature", required = false) String complaintNature) {
+		
+		return petition.updatePetition(petitionNo, petitionType, createdBy, petitionerName, petitionerMobile, petitionerAddress, petitionerPincode, petitionerComplaint, complaintNature);
+	}
+	
+	@PostMapping(value="/mapComplientToOfficer")
+	public Boolean updatePetition(
+			@RequestParam("petitionId") String petitionId,
+			@RequestParam("petitionNo") String petitionNo,
+			@RequestParam("createdBy") String createdBy,
+			@RequestParam(value = "", required = false) String mapOfficers) {
+		
+			String  zerohours_mapping = mapOfficers;
+			
+			// First before Mapping need to unmaps old list
+			petition.unmapComplient(petitionId, petitionNo);
+			
+	        if(zerohours_mapping!=null) {
+	            String[] zerohours_mapping_parts = zerohours_mapping.split(",");
+	            for (String values : zerohours_mapping_parts) {
+	                String[] zerohours_mapping_val = values.split("_");
+	                if (zerohours_mapping_val.length > 0) {
+	                    String complientId = zerohours_mapping_val[0];
+	                    String offcierId = zerohours_mapping_val[1];
+	                    petition.mapComplientToOfficer(createdBy, petitionId, petitionNo, complientId, offcierId);
+	                }
+	            }
+	        }
+		return true;
+	}
+	
+	@PostMapping(value="/mapPetitionToOfficer")
+	public Boolean mapPetition(
+			@RequestParam("petitionId") String petitionId,
+			@RequestParam("petitionNo") String petitionNo,
+			@RequestParam("createdBy") String createdBy,
+			@RequestParam(value = "", required = false) String offidto) {
+		
+			String  zerohours_mapping = offidto;
+			
+			// First before Mapping need to unmaps old list
+			//petition.unmapComplient(petitionId, petitionNo);
+			System.out.println("zerohours_mapping: "+zerohours_mapping);
+	        if(zerohours_mapping!=null) {
+	            
+	                    String complientId = "0";
+	                    String offcierId = zerohours_mapping;
+	                    petition.mapComplientToOfficer(createdBy, petitionId, petitionNo, complientId, offcierId);
+	               
+	        }
+		return true;
+	}
+	
+	@GetMapping(value="/unmapPetition")
+	public String getComplaintMappingDetails(
+			@RequestParam("mapid") String mapid) {
+		return petition.unmapPetition(mapid);
+	}
+	
+	@GetMapping(value="/getComplaintMappingDetails")
+	public List getComplaintMappingDetails(
+			@RequestParam("petitionId") String petitionId,
+			@RequestParam("petitionNo") String petitionNo,
+			@RequestParam("complaintTypeId") String complaintTypeId) {
+		return petition.getComplaintMappingDetails(petitionNo,petitionId,complaintTypeId);
+	}
+	
+	@GetMapping(value="/getPetitionMappingDetails2")
+	public List getComplaintMappingDetails2(
+			@RequestParam("petitionId") String petitionId) {
+		return petition.getPetitionMappingDetails2(petitionId);
+	}
+	
+	@GetMapping(value="/getComplaintList")
+	public List getComplaintList(@RequestParam("eventId") String eventId,@RequestParam("loginId") String loginId) {
+		return petition.getComplaintList(eventId,loginId);
+	}
+	
+	@GetMapping(value="/getComplaintListByPetitionId")
+	public List getComplaintListByPetitionId(@RequestParam("petitionId") String petitionId) {
+		return petition.getComplaintListByPetitionId(petitionId);
+	}
+	
+	@GetMapping(value="/getComplaintDetails")
+	public List<?> getComplaintDetails(@RequestParam("mapId") String mapId) {
+		return petition.getComplaintDetails(mapId);
+	}
+	
+	@GetMapping(value="/getComplaintActionDetails")
+	public List<?> getComplaintActionDetails(@RequestParam("mapId") String mapId) {
+		return petition.getComplaintActionDetails(mapId);
+	}
+	
+	@PostMapping(value="/saveComplanitStatus")
+	public String saveComplanitStatus(
+			@RequestParam("createdBy") String createdBy,
+			@RequestParam("mapId") String mapId,
+			@RequestParam("complaintStatus") String complaintStatus,
+			@RequestParam("complaintActionText") String complaintActionText,
+			@RequestParam("action_san_page1") MultipartFile actionPage1,
+			@RequestParam("petitionId") String petitionId,
+			@RequestParam("petitionNo") String petitionNo) {
+		
+		return petition.saveComplanitStatus(createdBy, mapId, complaintStatus, complaintActionText, actionPage1, petitionId, petitionNo);
+	}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/MainController.java b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/MainController.java
new file mode 100644
index 0000000..7597a7f
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/MainController.java
@@ -0,0 +1,131 @@
+package in.gov.chennaicorporation.gccoffice.zerohours_petition.controller;
+
+import org.hibernate.hql.internal.ast.tree.RestrictableStatement;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.client.RestTemplate;
+
+import in.gov.chennaicorporation.gccoffice.service.Base64Util;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+@RequestMapping("/gcc/zerohours_petition")
+@Controller("ZeorHoursPetitionController")
+public class MainController {
+	private final RestTemplate restTemplate;
+	private String BasePath = "modules/zerohours_petition/";
+	@Autowired
+	public MainController(RestTemplate restTemplate) {
+		this.restTemplate = restTemplate;
+	}
+ 
+	@GetMapping({"", "/", "/index", "/dashboard"})
+	public String dashboard(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"index";
+	}
+	
+	@GetMapping({"/new_petition"})
+	public String newPetition(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"new_petition";
+	}
+	
+	@GetMapping("/petition-ack/{petitionNo}")
+    public String petitionAck(Model model,@PathVariable("petitionNo") String petitionNo) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		model.addAttribute("petitionNo",petitionNo);
+		return BasePath+"petition_ack";
+	}
+	
+	@GetMapping("/petition-list")
+    public String petitionList(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"petition_list";
+	}
+	
+	@GetMapping("/unmapped-petition-list")
+    public String unMappedPetitionList(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"petition_not_mapped_list";
+	}
+	
+	@GetMapping("/update-petition")
+    public String petitionUpadte(Model model,@RequestParam(value="petitionNo", required = false) String petitionNo) {
+		
+		if (petitionNo != null && !petitionNo.isEmpty()) {
+			// Decrypt the encrypted value
+			 petitionNo = Base64Util.decodeBase64(petitionNo);
+		}
+		else {
+			 petitionNo = null;
+		}
+       
+        
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		model.addAttribute("petitionNo",petitionNo);
+		return BasePath+"petition_update";
+	}
+	
+	@GetMapping("/view-petition")
+    public String petitionView(Model model,@RequestParam(value="petitionNo", required = false) String petitionNo) {
+		
+		if (petitionNo != null && !petitionNo.isEmpty()) {
+			// Decrypt the encrypted value
+			 petitionNo = Base64Util.decodeBase64(petitionNo);
+		}
+		else {
+			 petitionNo = null;
+		}
+       
+        
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		model.addAttribute("petitionNo",petitionNo);
+		return BasePath+"petition_view";
+	}
+	
+	@GetMapping("/view-petition-modal")
+    public String petitionViewModal(Model model,@RequestParam(value="petitionNo", required = false) String petitionNo) {
+		
+		if (petitionNo != null && !petitionNo.isEmpty()) {
+			// Decrypt the encrypted value
+			 petitionNo = Base64Util.decodeBase64(petitionNo);
+			 //System.out.println(petitionNo);
+		}
+		else {
+			 petitionNo = null;
+		}
+       
+        
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		model.addAttribute("petitionNo",petitionNo);
+		return BasePath+"petition_view_modal_page";
+	}
+	
+	@GetMapping("/search-petition")
+    public String petitionSearch(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		//model.addAttribute("petitionNo",petitionNo);
+		return BasePath+"petition_update";
+	}
+	
+	@GetMapping("/complaint-list")
+    public String complaintList(Model model) {
+		String LoginUserId =  LoginUserInfo.getLoginUserId();
+		model.addAttribute("LoginUserId",LoginUserId);
+		return BasePath+"complaint_list";
+	}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/package-info.java
new file mode 100644
index 0000000..fadc59c
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.zerohours_petition.controller;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/ComplaintType.java b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/ComplaintType.java
new file mode 100644
index 0000000..44ef6e8
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/ComplaintType.java
@@ -0,0 +1,21 @@
+package in.gov.chennaicorporation.gccoffice.zerohours_petition.data;
+
+import java.util.Map;
+
+public class ComplaintType {
+	private int complaintTypeId;
+    private String complaintType;
+
+    public ComplaintType(Map<String, Object> map) {
+        this.complaintTypeId = (int) map.get("complaint_typeid");
+        this.complaintType = (String) map.get("complaint_type");
+    }
+
+    public int getComplaintTypeId() {
+        return complaintTypeId;
+    }
+
+    public String getComplaintType() {
+        return complaintType;
+    }
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/package-info.java
new file mode 100644
index 0000000..f0eb6a3
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.zerohours_petition.data;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/package-info.java
new file mode 100644
index 0000000..9727141
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/package-info.java
@@ -0,0 +1,7 @@
+/**
+ * 
+ */
+/**
+ * 
+ */
+package in.gov.chennaicorporation.gccoffice.zerohours_petition;
\ No newline at end of file
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/Petition.java b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/Petition.java
new file mode 100644
index 0000000..7d49cdc
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/Petition.java
@@ -0,0 +1,782 @@
+package in.gov.chennaicorporation.gccoffice.zerohours_petition.service;
+
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.sql.PreparedStatement;
+import java.sql.Statement;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+import javax.sql.DataSource;
+
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.core.env.Environment;
+import org.springframework.dao.DataAccessException;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.multipart.MultipartFile;
+
+import in.gov.chennaicorporation.gccoffice.com_petition.data.ComplaintType;
+import in.gov.chennaicorporation.gccoffice.service.Base64Util;
+import in.gov.chennaicorporation.gccoffice.service.GetMappingUserDetails;
+import in.gov.chennaicorporation.gccoffice.service.LoginUserInfo;
+
+import org.springframework.jdbc.core.PreparedStatementCreator;
+import org.springframework.jdbc.support.GeneratedKeyHolder;
+import org.springframework.jdbc.support.KeyHolder;
+
+@Service("zeroHoursPetition")
+public class Petition {
+	private JdbcTemplate jdbcTemplate;
+	private final Environment environment;
+	private PetitionMaster petitionMaster;
+	private GetMappingUserDetails getMappingUserDetails;
+
+	@Autowired
+	public Petition(Environment environment,PetitionMaster petitionMaster,GetMappingUserDetails getMappingUserDetails) {
+		this.environment = environment;
+		this.petitionMaster = petitionMaster;
+		this.getMappingUserDetails = getMappingUserDetails;
+	}
+
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysqlZeroHoursDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	 
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getEvents(){
+		String SqlQuery = "";
+		
+		SqlQuery = "SELECT * FROM `event_master` WHERE `isactive`=1 AND `isdelete`=0 ORDER BY date(`date`) DESC";
+		//System.out.println(SqlQuery);
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+	}
+	
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getCurrentEventList(){
+		String SqlQuery = "";
+		
+		//SqlQuery = "SELECT * FROM event_master WHERE date(`date`)= date(NOW())";
+		SqlQuery = "SELECT * FROM event_master WHERE `isactive`=1 AND `isdelete`=0 ORDER BY date(`date`) DESC";
+		//System.out.println(SqlQuery);
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+	}
+	
+	@Transactional(readOnly = true)
+	public List getComplaintTypeList() {
+		return petitionMaster.getComplaintType();
+	}
+	
+	@Transactional(readOnly = true)
+	public static List<ComplaintType> convertToComplaintTypes(List<Map<String, Object>> complaintTypeMaps) {
+        return complaintTypeMaps.stream()
+                .map(ComplaintType::new)
+                .collect(Collectors.toList());
+    }
+	
+	@Transactional(readOnly = true)
+	// Method to map complaint type IDs to their respective complaint types
+	public static String mapComplaintTypes(List<ComplaintType> complaintTypes, String complaint) {
+        String[] complaintIds = complaint.split(",");
+        StringBuilder complaintTxtBuilder = new StringBuilder();
+
+        for (String complaintId : complaintIds) {
+            int id = Integer.parseInt(complaintId);
+            for (ComplaintType type : complaintTypes) {
+                if (type.getComplaintTypeId() == id) {
+                    if (complaintTxtBuilder.length() > 0) {
+                        complaintTxtBuilder.append(",");
+                    }
+                    complaintTxtBuilder.append(type.getComplaintType());
+                    break;
+                }
+            }
+        }
+
+        return complaintTxtBuilder.toString();
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getPetitionList(String eventid) {
+        try {
+            //String sqlQuery = "SELECT * FROM petition WHERE (`isactive`=1 AND `isdelete`=0)";
+            String sqlQuery = "SELECT p.* , pt.name petition_type_name FROM petition p, petition_master.petition_types pt "
+            		+ "WHERE (p.`isactive`=1 AND p.`isdelete`=0) AND `eventid`='"+eventid+"' AND p.petition_type = pt.petition_type_id ";
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
+            //Base64Util.encodeBase64(sqlQuery);
+            
+            // Iterate over the list of maps
+            for (Map<String, Object> map : result) {
+                // Get the value of the 'petitionNo' field from the map
+                String petitionNo = (String) map.get("petition_no");
+                
+                // Encode the 'petitionNo' value using Base64Util
+                String petitionNoEncoded = Base64Util.encodeBase64(petitionNo);
+                
+                // Add the encoded value as 'petitionNoEncode' to the map
+                map.put("petitionNoEncode", petitionNoEncoded);
+            }
+            
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getUnmapPetitionList(String eventid) {
+        try {
+            String sqlQuery = "SELECT "
+            		+ "    p.* "
+            		+ "FROM "
+            		+ "    `petition` p "
+            		+ "WHERE "
+            		+ "    (p.`isactive` = 1 AND p.`isdelete` = 0) AND `eventid`='"+eventid+"' ";
+            		//+ "    AND NOT EXISTS ("
+            		//+ "        SELECT 1 "
+            		//+ "        FROM `petition_mapping` pm "
+            		//+ "        WHERE (p.`petition_id` = pm.`petition_id`) AND (pm.`isactive` = 1 AND pm.`isdelete` = 0 ) "
+            		//+ "    )";
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
+            
+            // Iterate over the list of maps
+            for (Map<String, Object> map : result) {
+                // Get the value of the 'petitionNo' field from the map
+                String petitionNo = (String) map.get("petition_no");
+                
+                // Encode the 'petitionNo' value using Base64Util
+                String petitionNoEncoded = Base64Util.encodeBase64(petitionNo);
+                
+                // Add the encoded value as 'petitionNoEncode' to the map
+                map.put("petitionNoEncode", petitionNoEncoded);
+            }
+            
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getPetitionDetails(String petitionNo) {
+        try {
+            String sqlQuery = "SELECT * FROM petition WHERE petition_no = ? AND (`isactive`=1 AND `isdelete`=0) LIMIT 1";
+            //System.out.println("SELECT * FROM petition WHERE petition_no = '"+petitionNo+"' AND (`isactive`=1 AND `isdelete`=0) LIMIT 1");
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery, petitionNo);
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional
+	public String savePetition(
+			String petitionType,
+			String createdBy,
+			String zone,
+			String ward,
+			String petitionerName,
+			String petitionerMobile,
+			String petitionerComplaint,
+			String complaintNature,
+			String eventid,
+			MultipartFile page1,
+			MultipartFile page2,
+			MultipartFile page3,
+			MultipartFile page4) {
+		
+		//System.out.println("I am from Service Page "+petitionerName);
+		
+		//String complaintNature = "";
+		int lastInsertId = 0;
+		String  sqlQuery = "INSERT INTO `petition` "
+		         + "(`petition_type`, `created_by`, `petitioner_name`, `petitioner_mobile`, "
+		         + "`petitioner_complaint`, `petitioner_complaint_txt`, `eventid`, `zone`, `ward`,`complaint_nature`) "
+		         + "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
+		
+		try {
+			// Complaint Type List
+			//List complaintTypelist = getComplaintTypeList();
+			// Convert the list of maps to a list of ComplaintType objects
+	        //List<ComplaintType> complaintTypes = convertToComplaintTypes(complaintTypelist);
+
+			// Map complaint types
+	        //String petitionerComplaint_txt = mapComplaintTypes(complaintTypes, petitionerComplaint);
+			String petitionerComplaint_txt="";
+			KeyHolder keyHolder = new GeneratedKeyHolder();
+			// Use JdbcTemplate's update method to execute the query with parameters
+			jdbcTemplate.update(connection -> {
+	            PreparedStatement ps = connection.prepareStatement(sqlQuery, Statement.RETURN_GENERATED_KEYS);
+	            ps.setString(1, "1");
+	            ps.setString(2, createdBy);
+	            ps.setString(3, petitionerName);
+	            ps.setString(4, petitionerMobile);
+	            ps.setString(5, petitionerComplaint);
+	            ps.setString(6, petitionerComplaint_txt);
+	            ps.setString(7, eventid);
+	            ps.setString(8, zone);
+	            ps.setString(9, ward);
+	            ps.setString(10, complaintNature);
+	            return ps;
+	        }, keyHolder);
+			
+			// Get the last insert ID
+	        lastInsertId = (int) keyHolder.getKey().longValue();
+
+	        // Get the value of mp_ackno from application.properties
+	        String ackno = environment.getProperty("zh_ackno");
+	        String ackno_prefix = environment.getProperty("zh_ackno_prefix");
+
+	        // Convert ackno to int if needed
+	        int acknoInt = Integer.parseInt(ackno);
+
+	        // Calculate the petition number
+	        int petitionNo = (int) (lastInsertId + acknoInt);
+
+	        // Construct the petition number string
+	        String petitionNoString = ackno_prefix + petitionNo;
+
+	        // Update the petition number in the database
+	        updatePetitionNumber(lastInsertId, petitionNoString);
+	        
+	        // Add Petition Scan File in the database
+	        addPetitionFile(createdBy,lastInsertId, petitionNoString, page1, page2, page3, page4);
+	        
+            return petitionNoString; // If no exception, query executed successfully
+        } catch (DataAccessException e) {
+            // Handle exception (e.g., log error)
+            e.printStackTrace();
+            return "error"; // Query execution failed
+        }
+	}
+	
+	@Transactional
+	public boolean updatePetitionNumber(int petitionId,String petitionNoString) {
+		String  sqlQuery = "UPDATE `petition` SET `petition_no`='"+petitionNoString+"' WHERE `petition_id`='"+petitionId+"'";
+		jdbcTemplate.update(sqlQuery);
+		return true;
+	}
+	
+	@Transactional
+	public String addPetitionFile(String createdBy, 
+			int petitionId,
+    		String petitionNoString,
+    		MultipartFile page1,
+			MultipartFile page2,
+			MultipartFile page3,
+			MultipartFile page4) {
+		
+		String fileName="";
+        for (int i = 1; i <= 4; i++) {
+            MultipartFile file = null;
+            switch (i) {
+                case 1:
+                    file = page1;
+                    fileName = "Scan1";
+                    break;
+                case 2:
+                    file = page2;
+                    fileName = "Scan2";
+                    break;
+                case 3:
+                    file = page3;
+                    fileName = "Scan3";
+                    break;
+                case 4:
+                    file = page4;
+                    fileName = "Scan4";
+                    break;
+            }
+            if (file != null && !file.isEmpty()) {
+            	try {
+                    // Get the bytes of the file
+                    byte[] bytes = file.getBytes();
+                    
+                    // Set the file path where you want to save it
+                    String uploadDirectory = environment.getProperty("file.upload.directory");
+                    String serviceFolderName = environment.getProperty("zh_foldername");
+                    uploadDirectory = uploadDirectory + serviceFolderName;
+                    
+                    // File name 
+                    fileName = petitionId + "_" + fileName + "_" + petitionNoString + "_" + file.getOriginalFilename();
+                    
+                    //File Size
+                    Long fileSize = file.getSize();
+                    
+                    // File Type
+                    String fileType = file.getContentType();
+                    
+                    // Create directory if it doesn't exist
+                    Path directoryPath = Paths.get(uploadDirectory);
+                    if (!Files.exists(directoryPath)) {
+                        Files.createDirectories(directoryPath);
+                    }
+                    
+                    String filePath = uploadDirectory + "/" + fileName;
+
+                    // Create a new Path object
+                    Path path = Paths.get(filePath);
+
+                    // Write the bytes to the file
+                    Files.write(path, bytes);
+                    
+                    // Save the file path to a database
+                    String  sqlQuery = "INSERT INTO `pentition_files`(`created_by`, `file_name`, `file_size`, `file_type`, `petition_no`, `petition_id`) "
+                    		+ "VALUES ('"+createdBy+"','"+fileName+"','"+fileSize+"','"+fileType+"','"+petitionNoString+"','"+petitionId+"')";
+            		jdbcTemplate.update(sqlQuery);
+                    
+                } catch (IOException e) {
+                    e.printStackTrace();
+                    return "Failed to save file " + file.getOriginalFilename();
+                }
+            }
+            
+        }
+        return "success";
+	}
+	
+	@Transactional
+	public boolean updatePetition(
+			String petitionNo,
+			String petitionType,
+			String createdBy,
+			String petitionerName,
+			String petitionerMobile,
+			String petitionerAddress,
+			String petitionerPincode,
+			String petitionerComplaint,
+			String complaintNature) {
+		
+		try {
+			// Complaint Type List
+			List complaintTypelist = getComplaintTypeList();
+			// Convert the list of maps to a list of ComplaintType objects
+	        List<ComplaintType> complaintTypes = convertToComplaintTypes(complaintTypelist);
+
+			// Map complaint types
+	        String petitionerComplaint_txt = mapComplaintTypes(complaintTypes, petitionerComplaint);
+			/*
+	        String  sqlQuery = "UPDATE `petition` SET "
+	                //+ "`petition_type`='"+petitionType+"', "
+	                		+ "`created_by`='"+createdBy+"', `petitioner_name`='"+petitionerName+"', `petitioner_mobile`='"+petitionerMobile+"', "
+	                //+ "`petitioner_address`='"+petitionerAddress+"', `petitioner_pincode`='"+petitionerPincode+"',"
+	                + "`petitioner_complaint`='"+petitionerComplaint+"', `petitioner_complaint_txt`='"+petitionerComplaint_txt+"', `complaint_nature`='"+complaintNature+"' "
+	                + "WHERE (`petition_no`='"+petitionNo+"') LIMIT 1";
+	        System.out.println(sqlQuery);
+			// Use JdbcTemplate's update method to execute the query with parameters
+			jdbcTemplate.update(sqlQuery);
+			*/
+			String sqlQuery = "UPDATE `petition` SET "
+	                + "`petition_type` = ?, `created_by` = ?, `petitioner_name` = ?, `petitioner_mobile` = ?, "
+	                + "`petitioner_address` = ?, `petitioner_pincode` = ?, `petitioner_complaint` = ?, "
+	                + "`petitioner_complaint_txt` = ?, `complaint_nature` = ? "
+	                + "WHERE `petition_no` = ? LIMIT 1";
+
+	        int rowsUpdated = jdbcTemplate.update(sqlQuery, 
+	        	    petitionType, 
+	        	    createdBy, 
+	        	    petitionerName, 
+	        	    petitionerMobile, 
+	        	    petitionerAddress, 
+	        	    petitionerPincode, 
+	        	    petitionerComplaint, 
+	        	    petitionerComplaint_txt,  // Safely includes single quotes
+	        	    complaintNature, 
+	        	    petitionNo
+	        	);
+			
+			// Add Petition Scan File in the database
+	        // addPetitionFile(createdBy,lastInsertId, petitionNoString, page1, page2, page3, page4);
+	        
+            return true; // If no exception, query executed successfully
+        } catch (DataAccessException e) {
+            // Handle exception (e.g., log error)
+            e.printStackTrace();
+            return false; // Query execution failed
+        }
+	}
+	
+	@Transactional
+	public boolean updatePetitionStatus(String petitionId,String petitionNo) {
+		String status_value = "close";
+		List<Map<String, Object>> petitionMappingDetails = getPetitionMappingDetails(petitionNo, petitionId);
+
+		for (Map<String, Object> mapping : petitionMappingDetails) {
+		    // Access values from the map using keys
+		    Object status = mapping.get("status");
+		    // Check if status is "close"
+		    if (!"close".equals(status)) {
+		    	status_value = "partial";
+		    } 
+		}
+		
+		String sqlQuery = "UPDATE `petition` SET `status`='"+status_value+"' WHERE `petition_no`='"+petitionNo+"' AND `petition_id`='"+petitionId+"' LIMIT 1";
+		jdbcTemplate.update(sqlQuery);
+		System.out.println(sqlQuery);
+		return true;
+	}
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getPetitionMappingDetails(String petitionNo, String petitionId) {
+        try {
+            String sqlQuery = "SELECT * FROM petition_mapping WHERE (`petition_id`= ? AND petition_no = ?) AND (`isactive`=1 AND `isdelete`=0)";
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery, petitionId, petitionNo);
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getPetitionMappingDetails2(String petitionId) {
+        try {
+            String sqlQuery = "SELECT pm.mapid,pm.petition_no,pm.petition_id,pm.status,om.* FROM zerohours_petition.petition_mapping as pm,petition_master.officer_master_zh as om WHERE (pm.`petition_id`= ?) AND (pm.`isactive`=1 AND pm.`isdelete`=0) AND pm.off_id=om.off_id";
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery, petitionId);
+            System.out.println(sqlQuery + petitionId);
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional
+	public boolean unmapComplient(String petitionId, String petitionNo) {
+		    String sqlQuery = "UPDATE `petition_mapping` SET `isactive`='0',`isdelete`='1' WHERE `petition_id`='"+petitionId+"' AND `petition_no`='"+petitionNo+"'";
+		    jdbcTemplate.update(sqlQuery);
+	    return true;
+	}
+	
+	@Transactional
+	public String unmapPetition(String mapid) {
+		    String sqlQuery = "UPDATE `petition_mapping` SET `isactive`='0',`isdelete`='1' WHERE `mapid`='"+mapid+"'";
+		    jdbcTemplate.update(sqlQuery);
+	    return "success";
+	}
+	
+	@Transactional
+	public boolean mapComplientToOfficer(
+	        String createdBy, String petitionId, String petitionNo, String complaintId, String officerId) {
+		    String sqlQuery = "INSERT INTO `petition_mapping`"
+		            + "(`created_by`, `off_id`, `petition_no`, `complaint_typeid`, `petition_id`) "
+		            + "VALUES (?, ?, ?, ?, ?)";
+		    jdbcTemplate.update(sqlQuery, createdBy, officerId, petitionNo, complaintId, petitionId);
+	    return true;
+	}
+	
+	@Transactional
+	public boolean updateMapComplientStatus(String mapId,String status) {
+		    String sqlQuery = "UPDATE `petition_mapping` SET `status`=? WHERE `mapid`=? LIMIT 1";
+		    jdbcTemplate.update(sqlQuery, status, mapId);
+		    System.out.println(sqlQuery);
+	    return true;
+	}
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getComplaintMappingDetails(String petitionNo, String petitionId, String complaintTypeId) {
+        try {
+            String sqlQuery = "SELECT * FROM petition_mapping WHERE (`petition_id`= ? AND petition_no = ?) AND `complaint_typeid`= ?  AND (`isactive`=1 AND `isdelete`=0) LIMIT 1";
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery, petitionId, petitionNo,complaintTypeId);
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getComplaintList(String eventId, String loginId) {
+		String sqlQuery = "";
+        try {
+        	sqlQuery = "SELECT "
+            		+ "    p.`petition_id`, p.`cdate`, p.`created_by`, p.`isactive`, p.`isdelete`, p.`petition_no`, "
+            		+ "    p.`petitioner_address`, p.`petitioner_complaint`, p.`petitioner_complaint_txt`, "
+            		+ "    p.`petitioner_mobile`, p.`petitioner_name`, p.`complaint_nature`, p.`petitioner_pincode`, "
+            		+ "    pm.`mapid`, pm.`complaint_typeid`, pm.`off_id`, pm.`status`, om.`off_nm` "
+            		+ " FROM  "
+            		+ "    `petition` p, `petition_mapping` pm, `petition_master`.`officer_master_zh` om"
+            		+ " WHERE "
+            		+ "    (p.`isactive` = 1 AND p.`isdelete` = 0) "
+            		+ "	   AND (pm.`isactive` = 1 AND pm.`isdelete` = 0) "
+            		+ "	   AND (om.`isactive` = 1 AND om.`isdelete` = 0) "
+            		+ "	   AND (om.`off_id` = pm.`off_id`) "
+            		//+ "	   AND (ctype.`complaint_typeid` = pm.`complaint_typeid`) "
+            		+ "    AND (p.`petition_id` = pm.`petition_id`)"
+            		+ " AND p.eventid='"+eventId+"' ";
+        	
+        	String officerMaster  = getMappingUserDetails.getOfficerMaster(loginId);
+    		
+    		//if (officerMaster != null && !officerMaster.isEmpty() && loginId!='256') {
+        	if (!loginId.equals("256") && !loginId.equals("1")) {
+        	    sqlQuery = sqlQuery + " AND (pm.off_id IN("+officerMaster+"))";
+        	}
+    		
+        	System.out.println(sqlQuery + loginId);
+        	
+        	List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
+        	
+        	// Iterate over the list of maps
+            for (Map<String, Object> map : result) {
+                // Get the value of the 'petitionNo' field from the map
+                String petitionNo = (String) map.get("petition_no");
+                
+                // Encode the 'petitionNo' value using Base64Util
+                String petitionNoEncoded = Base64Util.encodeBase64(petitionNo);
+                //System.out.println(petitionNo + " : "+petitionNoEncoded + " : "+Base64Util.encodeBase64(petitionNo));
+                // Add the encoded value as 'petitionNoEncode' to the map
+                map.put("petitionNoEncode", petitionNoEncoded);
+            }
+            
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getComplaintListByPetitionId(String petitionId) {
+        try {
+        	String sqlQuery = "SELECT "
+            		+ " p.`petition_id`, p.`cdate`, p.`created_by`, p.`isactive`, p.`isdelete`, p.`petition_no`, "
+            		+ " p.`petitioner_address`, p.`petitioner_complaint`, p.`petitioner_complaint_txt`, "
+            		+ " p.`petitioner_mobile`, p.`petitioner_name`, p.`complaint_nature`, p.`petitioner_pincode`, p.`status` petition_status, "
+            		+ " pm.`mapid`, pm.`complaint_typeid`, pm.`off_id`, pm.`status` complaint_status, pm.`cdate` mappedOn, om.`off_nm`, ctype.`complaint_type` "
+            		+ " FROM "
+            		+ " 	`zerohours_petition`.`petition` p,`zerohours_petition`.`petition_mapping` pm, `petition_master`.`officer_master_zh` om, `petition_master`.`complaint_types` ctype "
+            		+ " WHERE "
+            		+ "		(p.`petition_id` = '"+petitionId+"' AND p.`isactive` = 1 AND p.`isdelete` = 0) "
+            		+ "		AND (pm.`isactive` = 1 AND pm.`isdelete` = 0) "
+            		+ "		AND (om.`isactive` = 1 AND om.`isdelete` = 0) "
+            		+ "		AND (om.`off_id` = pm.`off_id`) "
+            		+ "		AND (ctype.`complaint_typeid` = pm.`complaint_typeid`) "
+            		+ " 	AND (p.`petition_id` = pm.`petition_id`)"
+            		+ " ";
+        	System.out.println(sqlQuery);
+        	List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
+        	
+        	// Iterate over the list of maps
+            for (Map<String, Object> map : result) {
+                // Get the value of the 'petitionNo' field from the map
+                String petitionNo = (String) map.get("petition_no");
+                
+                // Encode the 'petitionNo' value using Base64Util
+                String petitionNoEncoded = Base64Util.encodeBase64(petitionNo);
+                
+                // Add the encoded value as 'petitionNoEncode' to the map
+                map.put("petitionNoEncode", petitionNoEncoded);
+            }
+            
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getComplaintDetails(String mapid) {
+        try {
+        	String sqlQuery = "SELECT "
+            		+ "    p.`petition_id`, p.`cdate`, p.`created_by`, p.`isactive`, p.`isdelete`, p.`petition_no`, "
+            		+ "    p.`petitioner_address`, p.`petitioner_complaint`, p.`petitioner_complaint_txt`, "
+            		+ "    p.`petitioner_mobile`, p.`petitioner_name`, p.`complaint_nature`, p.`petitioner_pincode`, "
+            		+ "    pm.`mapid`, pm.`complaint_typeid`, pm.`off_id`, pm.`status`, om.`off_nm` "
+            		+ " FROM "
+            		+ "    `petition` p,`petition_mapping` pm, `petition_master`.`officer_master_zh` om"
+            		+ " WHERE "
+            		+ "	   pm.`mapid`='"+mapid+"' " 
+            		+ "    AND (p.`isactive` = 1 AND p.`isdelete` = 0) "
+            		+ "	   AND (pm.`isactive` = 1 AND pm.`isdelete` = 0) "
+            		+ "	   AND (om.`isactive` = 1 AND om.`isdelete` = 0) "
+            		+ "	   AND (om.`off_id` = pm.`off_id`) "
+            		//+ "	   AND (ctype.`complaint_typeid` = pm.`complaint_typeid`) "
+            		+ "    AND (p.`petition_id` = pm.`petition_id`)"
+            		+ "    ";
+        	//System.out.println(sqlQuery);
+        	List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery);
+        	
+        	// Iterate over the list of maps
+            for (Map<String, Object> map : result) {
+                // Get the value of the 'petitionNo' field from the map
+                String petitionNo = (String) map.get("petition_no");
+                
+                // Encode the 'petitionNo' value using Base64Util
+                String petitionNoEncoded = Base64Util.encodeBase64(petitionNo);
+                
+                // Add the encoded value as 'petitionNoEncode' to the map
+                map.put("petitionNoEncode", petitionNoEncoded);
+            }
+            
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional(readOnly = true)
+    public List<Map<String,Object>> getComplaintActionDetails(String mapId) {
+        try {
+            String sqlQuery = "SELECT * FROM `petition_action_taken` WHERE (`mapid`= ? AND `isactive`=1 AND `isdelete`=0) LIMIT 1";
+            List<Map<String, Object>> result = jdbcTemplate.queryForList(sqlQuery, mapId);
+            return result;
+        } catch (DataAccessException e) {
+            e.printStackTrace();
+            return null; // Return null or handle error appropriately
+        }
+    }
+	
+	@Transactional
+	public String saveComplanitStatus(
+			String createdBy,
+			String mapId,
+			String complaintStatus,
+			String complaintActionText,
+			MultipartFile actionPage1,
+			String petitionId,
+			String petitionNo) {
+		
+		//System.out.println("I am from Service Page "+petitionerName);
+		
+		//String complaintNature = "";
+		int lastInsertId = 0;
+		String selectQuery ="Select solmapid,count(`solmapid`) as total FROM `petition_action_taken` WHERE mapid=?";
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(selectQuery, mapId);
+		int total = (result.isEmpty()) ? 0 : ((Number) result.get(0).get("total")).intValue();
+
+	    String sqlQuery;
+	    boolean isUpdate = total > 0; // If total > 0, we will update, otherwise insert
+	    System.out.println("selectQuery: "+selectQuery);
+	    System.out.println("isUpdate: "+isUpdate +" mapId: "+mapId);
+	    if (isUpdate) {
+	    	lastInsertId = (int) result.get(0).get("solmapid");
+	        // Update existing record
+	        sqlQuery = "UPDATE `petition_action_taken` SET `created_by` = ?,  `off_id` = ?,`mapid`=?, `status` = ?, `comments` = ? WHERE `mapid` = '"+mapId+"'";
+	    } else {
+	        // Insert new record
+	        sqlQuery = "INSERT INTO `petition_action_taken` "
+	                + "(`created_by`, `off_id`, `mapid`, `status`, `comments`) "
+	                + "VALUES (?, ?, ?, ?, ?)";
+	    }
+		
+		try {
+		    KeyHolder keyHolder = new GeneratedKeyHolder();
+		    int rowsAffected = jdbcTemplate.update(connection -> {
+		        PreparedStatement ps = connection.prepareStatement(sqlQuery, Statement.RETURN_GENERATED_KEYS);
+		        ps.setString(1, createdBy);
+		        ps.setString(2, createdBy);
+		        ps.setString(3, mapId);
+		        ps.setString(4, complaintStatus);
+		        ps.setString(5, complaintActionText);
+		        return ps;
+		    }, keyHolder);
+		    
+		    if (rowsAffected > 0) {
+		    	if (!isUpdate) {
+			        Number key = keyHolder.getKey();
+			        if (key != null) {
+			            lastInsertId = key.intValue();
+			            // Continue with further processing
+			        } else {
+			        	
+			            // Handle the case when the key is null
+			            System.out.println("Insertion succeeded but no key was generated.");
+			            return String.valueOf(rowsAffected); // Or some other appropriate response
+			        }
+		    	}
+		    } else {
+		        System.out.println("Insertion failed, no rows affected.");
+		        return "error";
+		    }
+
+		    // Further logic to update status and add files
+		    if (lastInsertId > 0) {
+		        updateMapComplientStatus(mapId, "close");
+		        updatePetitionStatus(petitionId, petitionNo);
+		        addActionFile(mapId, lastInsertId, actionPage1);
+		        return String.valueOf(lastInsertId);
+		    }
+
+		} catch (DataAccessException e) {
+		    e.printStackTrace();
+		    return "error";
+		}
+		return "";
+	}
+	
+	@Transactional
+	public String addActionFile( String mapId, int solmapid,
+    		MultipartFile page1) {
+		
+        MultipartFile file = page1;
+        String fileName = "Scan1_"+solmapid;
+                   
+            if (file != null && !file.isEmpty()) {
+            	try {
+                    // Get the bytes of the file
+                    byte[] bytes = file.getBytes();
+                    
+                    // Set the file path where you want to save it
+                    String uploadDirectory = environment.getProperty("file.upload.directory");
+                    String serviceFolderName = environment.getProperty("zh_foldername");
+                    String serviceActionFolderName = environment.getProperty("zh_action_Foldername");
+                    
+                    uploadDirectory = uploadDirectory + serviceFolderName +"/"+ serviceActionFolderName;
+                    
+                    // File name 
+                    fileName = mapId + "_" + fileName + "_" + file.getOriginalFilename();
+                    
+                    //File Size
+                    Long fileSize = file.getSize();
+                    
+                    // File Type
+                    String fileType = file.getContentType();
+                    
+                    // Create directory if it doesn't exist
+                    Path directoryPath = Paths.get(uploadDirectory);
+                    if (!Files.exists(directoryPath)) {
+                        Files.createDirectories(directoryPath);
+                    }
+                    
+                    String filePath = uploadDirectory + "/" + fileName;
+
+                    // Create a new Path object
+                    Path path = Paths.get(filePath);
+
+                    // Write the bytes to the file
+                    Files.write(path, bytes);
+                    
+                    // Save the file path to a database
+                    String  sqlQuery = "UPDATE `petition_action_taken` SET "
+                    					+ "`file_name`='"+fileName+"', "
+                    					+ "`file_size`='"+fileSize+"', "
+                    					+ "`file_type`='"+fileType+"' "
+                    					+ "WHERE `solmapid`='"+solmapid+"' LIMIT 1";
+            		jdbcTemplate.update(sqlQuery);
+                    
+                } catch (IOException e) {
+                    e.printStackTrace();
+                    return "Failed to save file " + file.getOriginalFilename();
+                }
+            }
+        return "success";
+	}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/PetitionMaster.java b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/PetitionMaster.java
new file mode 100644
index 0000000..c87207a
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/PetitionMaster.java
@@ -0,0 +1,90 @@
+package in.gov.chennaicorporation.gccoffice.zerohours_petition.service;
+
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@Service("ZeroPetitionMaster")
+public class PetitionMaster {
+	private JdbcTemplate jdbcTemplate;
+	
+	@Autowired
+	public void setDataSource(@Qualifier("mysqlPetitionMasterDataSource") DataSource dataSource) {
+		this.jdbcTemplate = new JdbcTemplate(dataSource);
+	}
+	
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getZoneAndWard(){
+		String SqlQuery = "";
+		
+		SqlQuery = "SELECT "
+				+ "    CAST(zone AS UNSIGNED) AS zone, "
+				+ "    GROUP_CONCAT(CAST(divid AS UNSIGNED) ORDER BY CAST(divid AS UNSIGNED) ASC) AS wards "
+				+ "FROM "
+				+ "    councillor "
+				+ "GROUP BY "
+				+ "    CAST(zone AS UNSIGNED) "
+				+ "ORDER BY "
+				+ "    CAST(zone AS UNSIGNED) ASC";
+		
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+		
+	}
+	
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getCouncillor(String ward){
+		String SqlQuery = "";
+		
+		SqlQuery = "SELECT * FROM councillor WHERE `divid`='"+ward+"' LIMIT 1";
+		
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+		
+	}
+	 
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getComplaintType(){
+		String SqlQuery = "";
+		
+		SqlQuery = "SELECT * FROM `complaint_types` WHERE `isactive`=1 AND `isdelete`=0";
+		
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+		
+	}
+	
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getOfficerList(){
+		String SqlQuery = "";
+		
+		SqlQuery = "SELECT * FROM `officer_master_zh` WHERE `isactive`=1 AND `isdelete`=0";
+		
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+		
+	}
+	
+	@Transactional(readOnly = true)
+	public List<Map<String,Object>> getPetitionTypes(){
+		String SqlQuery = "";
+		
+		SqlQuery = "SELECT * FROM `petition_types` WHERE `isactive`=1 AND `isdelete`=0  ORDER BY `orderby` ASC";
+		
+		List<Map<String, Object>> result = jdbcTemplate.queryForList(SqlQuery);
+		
+		return result;
+		
+	}
+}
diff --git a/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/package-info.java b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/package-info.java
new file mode 100644
index 0000000..bf7547f
--- /dev/null
+++ b/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/package-info.java
@@ -0,0 +1 @@
+package in.gov.chennaicorporation.gccoffice.zerohours_petition.service;
\ No newline at end of file
diff --git a/src/main/resources/.DS_Store b/src/main/resources/.DS_Store
index eb654ea..4ed772d 100644
Binary files a/src/main/resources/.DS_Store and b/src/main/resources/.DS_Store differ
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index df82279..7a8e703 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -1,6 +1,6 @@
-#spring.profiles.active=local
-spring.profiles.active=production
-#For Server production 
+spring.profiles.active=local
+#spring.profiles.active=production
+#For Server production
 #assets.base-url=/gcc/assets/
 #For local test
 #assets.base-url=/assets/
@@ -13,13 +13,21 @@ spring.application.name=gcc-portal
 
 spring.datasource.hikari.connection-timeout=30000
 
+spring.jackson.time-zone=Asia/Kolkata
+
+# Maximum file size
+spring.servlet.multipart.max-file-size=20MB
+
+# Maximum request size (including all files)
+spring.servlet.multipart.max-request-size=20MB
+
 # HTTP Server
 server.port = 8064
 #server.servlet.context-path=/gccoffice
 server.error.include-stacktrace= on_param
 # Hibernate logging
-logging.level.org.hibernate.SQL=DEBUG
-logging.level.org.hibernate.type.descriptor.sql.BasicBinder=TRACE
+#logging.level.org.hibernate.SQL=DEBUG
+#logging.level.org.hibernate.type.descriptor.sql.BasicBinder=TRACE
 
 # Enable CORS globally for all endpoints
 spring.webmvc.cors.enabled=true
@@ -68,7 +76,29 @@ cp_ackno = 10000000
 cp_foldername = c_petition
 cp_action_Foldername = c_action_file
 
+#///////// For Councillor Petition //////////
+com_ackno_prefix=COM
+com_ackno = 10000000
+com_foldername = com_petition
+com_action_Foldername = com_action_file
+
 #///////// For Circular Petition //////////
 cir_ackno_prefix=CP
 cir_ackno = 10000000
 cir_foldername = circular
+
+#///////// For Zero Hours Petition //////////
+zh_ackno_prefix=ZH
+zh_ackno = 10000000
+zh_foldername = zh_petition
+zh_action_Foldername = zh_action_file
+
+#//////// NULM Staff /////////////
+nulm_foldername = nulm_ordercopy
+
+#/////////// For 1913 campaign ////////////
+campaign.foldername = campaign_uploads
+
+#/////////// For SOS ////////////
+sos_activity_foldername= sos_rescue_activity_images
+
diff --git a/src/main/resources/static/.DS_Store b/src/main/resources/static/.DS_Store
index 5e1b97e..300989b 100644
Binary files a/src/main/resources/static/.DS_Store and b/src/main/resources/static/.DS_Store differ
diff --git a/src/main/resources/static/assets/.DS_Store b/src/main/resources/static/assets/.DS_Store
index 38d5da3..6bafd53 100644
Binary files a/src/main/resources/static/assets/.DS_Store and b/src/main/resources/static/assets/.DS_Store differ
diff --git a/src/main/resources/static/assets/images/dog.png b/src/main/resources/static/assets/images/dog.png
new file mode 100644
index 0000000..5ed51c2
Binary files /dev/null and b/src/main/resources/static/assets/images/dog.png differ
diff --git a/src/main/resources/static/assets/images/donut-chart.png b/src/main/resources/static/assets/images/donut-chart.png
new file mode 100644
index 0000000..e91603b
Binary files /dev/null and b/src/main/resources/static/assets/images/donut-chart.png differ
diff --git a/src/main/resources/static/assets/images/menu.png b/src/main/resources/static/assets/images/menu.png
new file mode 100644
index 0000000..001ecde
Binary files /dev/null and b/src/main/resources/static/assets/images/menu.png differ
diff --git a/src/main/resources/static/assets/images/mosquito.png b/src/main/resources/static/assets/images/mosquito.png
new file mode 100644
index 0000000..6c222e5
Binary files /dev/null and b/src/main/resources/static/assets/images/mosquito.png differ
diff --git a/src/main/resources/static/assets/images/portable-bathroom.png b/src/main/resources/static/assets/images/portable-bathroom.png
new file mode 100644
index 0000000..b1afab1
Binary files /dev/null and b/src/main/resources/static/assets/images/portable-bathroom.png differ
diff --git a/src/main/resources/static/assets/images/recycle.png b/src/main/resources/static/assets/images/recycle.png
new file mode 100644
index 0000000..6a16856
Binary files /dev/null and b/src/main/resources/static/assets/images/recycle.png differ
diff --git a/src/main/resources/static/assets/images/road.png b/src/main/resources/static/assets/images/road.png
new file mode 100644
index 0000000..e249745
Binary files /dev/null and b/src/main/resources/static/assets/images/road.png differ
diff --git a/src/main/resources/static/assets/images/sewage.png b/src/main/resources/static/assets/images/sewage.png
new file mode 100644
index 0000000..8dddbf7
Binary files /dev/null and b/src/main/resources/static/assets/images/sewage.png differ
diff --git a/src/main/resources/static/assets/images/street-lamp.png b/src/main/resources/static/assets/images/street-lamp.png
new file mode 100644
index 0000000..64a8e65
Binary files /dev/null and b/src/main/resources/static/assets/images/street-lamp.png differ
diff --git a/src/main/resources/static/assets/images/tsunami.png b/src/main/resources/static/assets/images/tsunami.png
new file mode 100644
index 0000000..8cf6b35
Binary files /dev/null and b/src/main/resources/static/assets/images/tsunami.png differ
diff --git a/src/main/resources/static/assets/images/waste-bin.png b/src/main/resources/static/assets/images/waste-bin.png
new file mode 100644
index 0000000..243dc4c
Binary files /dev/null and b/src/main/resources/static/assets/images/waste-bin.png differ
diff --git a/src/main/resources/templates/.DS_Store b/src/main/resources/templates/.DS_Store
index 13150a9..a9650f9 100644
Binary files a/src/main/resources/templates/.DS_Store and b/src/main/resources/templates/.DS_Store differ
diff --git a/src/main/resources/templates/fragments/.DS_Store b/src/main/resources/templates/fragments/.DS_Store
index dd04de5..5e9cf7b 100644
Binary files a/src/main/resources/templates/fragments/.DS_Store and b/src/main/resources/templates/fragments/.DS_Store differ
diff --git a/src/main/resources/templates/fragments/modules/base/app_module_menu_box.html b/src/main/resources/templates/fragments/modules/base/app_module_menu_box.html
index db89087..15b13ac 100644
--- a/src/main/resources/templates/fragments/modules/base/app_module_menu_box.html
+++ b/src/main/resources/templates/fragments/modules/base/app_module_menu_box.html
@@ -1,3 +1,4 @@
+
 		<div class="modal fade apps-modal" id="appsModal" tabindex="-1" role="dialog" aria-labelledby="appsModalLabel" aria-hidden="true" data-backdrop="false">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="ik ik-x-circle"></i></button>
             <div class="modal-dialog modal-dialog-centered" role="document">
@@ -17,60 +18,77 @@
                     <div class="modal-body d-flex align-items-center">
                         <div class="container">
                             <div class="apps-wrap">
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-bar-chart-2"></i><span>Dashboard</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-mail"></i><span>Message</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-users"></i><span>Accounts</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-shopping-cart"></i><span>Sales</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-briefcase"></i><span>Purchase</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-server"></i><span>Menus</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-clipboard"></i><span>Pages</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-message-square"></i><span>Chats</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-map-pin"></i><span>Contacts</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-box"></i><span>Blocks</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-calendar"></i><span>Events</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-bell"></i><span>Notifications</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-pie-chart"></i><span>Reports</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-layers"></i><span>Tasks</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-edit"></i><span>Blogs</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-settings"></i><span>Settings</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-more-horizontal"></i><span>More</span></a>
-                                </div>
+                                
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
\ No newline at end of file
+        </div>
+        
+        
+        <!--  Box 1 -->
+			<div class="modal fade" id="passwordreset" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-l" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="ackModalTitle">Password Reset Form</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    
+	                    <div class="modal-body">
+                        	<div id="passwordModalBody">
+                        		<input type="hidden" value="" name="resetuserid" id="resetuserid">
+                        		<div class="form-group">
+                                  <label for="councillorName">Old Password / பழைய கடவுச்சொல்</label>
+                                  <input type="password" class="form-control" name="oldpassword" id="oldpassword" required>
+                              	</div>
+                              	<div class="form-group">
+                                  <label for="councillorName">New Password / புதிய கடவுச்சொல்</label>
+                                  <input type="password" class="form-control" name="password" id="password" required>
+                              	</div>
+                              	<div class="form-group">
+                                  <label for="councillorName">Confirm Password / கடவுச்சொல்லை உறுதிப்படுத்தவும்</label>
+                                  <input type="password" class="form-control" name="newpassword" id="newpassword" required>
+                              	</div>
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                          <button type="button" class="btn btn-secondary" onclick="savePassword();">Save</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Kural Modal Page -->
+			<div class="modal fade" id="kuralModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="kuralTitle">Kural</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    
+	                    <div class="modal-body">
+                        	<div id="kuralBody">
+                        		
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			
+       
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/modules/base/header.html b/src/main/resources/templates/fragments/modules/base/header.html
index b0b97bb..872f939 100644
--- a/src/main/resources/templates/fragments/modules/base/header.html
+++ b/src/main/resources/templates/fragments/modules/base/header.html
@@ -14,6 +14,7 @@
                             <button type="button" id="navbar-fullscreen" class="nav-link"><i class="ik ik-maximize"></i></button>
                         </div>
                         <div class="top-menu d-flex align-items-center">
+                        <!-- 
                             <div class="dropdown">
                                 <a class="nav-link dropdown-toggle" href="#" id="notiDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 <i class="ik ik-bell bell"></i><span class="badge bg-danger">3</span>
@@ -52,17 +53,18 @@
                                     <div class="footer"><a href="javascript:void(0);">See all activity</a></div>
                                 </div>
                             </div>
-                            
+                            -->
                             <div class="dropdown">
                                 <a class="dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 									<img class="avatar" src="images/users/user.jpg" alt="">
                                 </a>
                                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
-                                    <a class="dropdown-item" href="profile.html"><i class="ik ik-user dropdown-icon"></i> Profile</a>
+                                  <!--   <a class="dropdown-item" href="profile.html"><i class="ik ik-user dropdown-icon"></i> Profile</a>
                                     <a class="dropdown-item" href="#"><i class="ik ik-settings dropdown-icon"></i> Settings</a>
                                     <a class="dropdown-item" href="#"><span class="float-right"><span class="badge badge-primary">6</span></span><i class="ik ik-mail dropdown-icon"></i> Inbox</a>
-                                    <a class="dropdown-item" href="#"><i class="ik ik-navigation dropdown-icon"></i> Message</a>
+                                    <a class="dropdown-item" href="#"><i class="ik ik-navigation dropdown-icon"></i> Message</a> -->
                                     <a class="dropdown-item" th:href="@{/gcc/logout}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"><i class="ik ik-power dropdown-icon"></i> Logout</a>
+                                    <a class="dropdown-item" th:href="@{#}" onclick="event.preventDefault();passwordReset();"><i class="ik ik-settings dropdown-icon"></i> Password Reset</a>
                                 </div>
                             </div>
 
diff --git a/src/main/resources/templates/fragments/modules/base/script.html b/src/main/resources/templates/fragments/modules/base/script.html
index c0f1655..6fcc0f4 100644
--- a/src/main/resources/templates/fragments/modules/base/script.html
+++ b/src/main/resources/templates/fragments/modules/base/script.html
@@ -288,6 +288,72 @@ function callDownload(fileUrl,fileName){
 	        return '';
 	    }
 	}
+ 
+ 
+ function passwordReset(){
+	var loginid = /*[[${LoginUserId}]]*/'';
+	if(loginid!="" && loginid>0){
+		$("#passwordreset").modal({
+		    backdrop: 'static',
+		    keyboard: false
+		}); // Show Modal Box
+		
+		$("#resetuserid").val(loginid);
+		$("#oldpassword").val('');
+	    $("#password").val('');
+	    $("#newpassword").val('');
+	}
+ }
+
+ function savePassword() {
+	    var userid = $("#resetuserid").val();
+	    var oldpassword = $("#oldpassword").val();
+	    var password = $("#password").val();
+	    var confirmpassword = $("#newpassword").val();
+
+	    // Input validation
+	    if (!userid || !oldpassword || !password || !confirmpassword) {
+	        alert("All fields are required.");
+	        return;
+	    }
+
+	    if (password !== confirmpassword) {
+	        alert("New password and confirmation password do not match.");
+	        return;
+	    }
+
+	    var formData = new FormData();
+	    formData.append('userid', userid);
+	    formData.append('oldpassword', oldpassword);
+	    formData.append('newpassword', password);
+
+	    // Send AJAX request to reset password
+	    $.ajax({
+	        url: '/gcc/api/resetPassword', // Update with the actual endpoint URL
+	        type: 'POST',
+	        data: formData,
+	        contentType: false, // Required for FormData
+	        processData: false, // Required for FormData
+	        success: function(response) {
+	            // Handle success response
+	            if (response === 'success') {
+	                alert("Password reset successfully.");
+	                // Optionally, redirect the user or reset the form
+	                document.getElementById('logout-form').submit();
+	            } else {
+	                alert(response.message || "Failed to reset password.");
+	            }
+	        },
+	        error: function(xhr, status, error) {
+	            // Handle error response
+	            var errorMessage = "An error occurred. Please try again later.";
+	            if (xhr.responseJSON && xhr.responseJSON.message) {
+	                errorMessage = xhr.responseJSON.message;
+	            }
+	            alert(errorMessage);
+	        }
+	    });
+	}
 </script>
 <!--
 <script th:inline="javascript">
diff --git a/src/main/resources/templates/fragments/modules/com_petition/modal-box.html b/src/main/resources/templates/fragments/modules/com_petition/modal-box.html
new file mode 100644
index 0000000..ae2f994
--- /dev/null
+++ b/src/main/resources/templates/fragments/modules/com_petition/modal-box.html
@@ -0,0 +1,116 @@
+			
+			<!--  Box 1 -->
+			<div class="modal fade" id="ackModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="ackModalTitle">Modal Title</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="ackModalBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 2 -->
+			<div class="modal fade" id="ComplaintStatusBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="complaint-title">புகார் நிலை / Complaint Status:</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="ComplaintStatusBoxBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 3 -->
+			<div class="modal fade" id="viewFileBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="viewFileTitle">View File</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="viewFileBoxBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 4 -->
+			<div class="modal fade" id="viewpetition" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="viewPetitionTitle">View Petition</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="viewPetitionBoxBody">
+                        		<iframe id="iframe" width="100%" height="400px" src=""></iframe>
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 0 common -->
+			<div class="modal fade" id="forwardModalBox" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-lg" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="forwardModalTitle">Modal Title</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="forwardModalBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/modules/com_petition/petition_view_script.html b/src/main/resources/templates/fragments/modules/com_petition/petition_view_script.html
new file mode 100644
index 0000000..89c4507
--- /dev/null
+++ b/src/main/resources/templates/fragments/modules/com_petition/petition_view_script.html
@@ -0,0 +1,292 @@
+<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var petitionId = 0;
+			var closedComplaintsList=[];
+			var complaintTypeList = "";
+			var officerMasterList = "";
+			
+			 /* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Call Petition function to fetch the data
+	    		    get_petition_data();
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			 
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+			 
+	     	// Function to get complaint_type and complaint_typeid by complaint_typeid
+	        function getComplaintTypeById(complaintTypeId) {
+	            for (var i = 0; i < complaintTypeList.length; i++) {
+	                if (complaintTypeList[i].complaint_typeid == complaintTypeId) {
+	                    return {
+	                        complaint_type: complaintTypeList[i].complaint_type,
+	                        complaint_typeid: complaintTypeList[i].complaint_typeid
+	                    };
+	                }
+	            }
+	            return null; // Return null if no matching complaint_typeid is found
+	        }
+	     
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint;
+					petitionId = petitionDetails[0].petition_id;
+					var complaintArray = complaint.split(",");
+					$("#complaintType").val(complaintArray);
+					
+					$('#complaintType').trigger('change');
+					
+					closedComplaintsList = complaintArray;
+					$("#cdate_value").html(convertdate(petitionDetails[0].cdate));
+					$("#petition_no_value").html(petitionDetails[0].petition_no);
+					$("#petitioner_name_value").html(petitionDetails[0].petitioner_name);
+					$("#petitioner_mobile_value").html(petitionDetails[0].petitioner_mobile);
+					$("#petitioner_address_value").html(petitionDetails[0].petitioner_address);
+					$("#petitioner_pincode_value").html(petitionDetails[0].petitioner_pincode);
+					
+					$("#complaint_with_maping_value").html(petitionDetails[0].complaint_nature);
+					
+					var petition_status = petitionDetails[0].status
+					
+					if(petition_status=='pending' || petition_status=='partial'){
+						$("#petition_summary_title").html("Pending Summary");
+						var currentDate = new Date();
+						var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),'');
+						$("#petition_summary_html").html(`This petition has been pending for more than ${totaldayspending}`);
+					}
+					if(petition_status=='close'){
+						$("#petition_summary_title").html("Close Summary");
+						var currentDate = new Date();
+						var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),'');
+						$("#petition_summary_html").html(`The time taken to close this petition is ${totaldayspending}`);
+					}
+						
+					petition_status=petition_status.charAt(0).toUpperCase() + petition_status.slice(1);
+					
+					$("#petition_status_value").html(`<b style="color:red">${petition_status}</b>`);
+					
+					// Call Complaint list based on Petition No and Id
+					get_petition_mapping_data();
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition Data ('+petitionNo+'):', error.message);
+				    call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			function get_petition_details() {
+			    
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/com_petition/getPetitionDetails?petitionNo='+petitionNo;
+				//alert(petitionNo);
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			function get_petition_mapping_data(){
+				get_petition_mapping_list().then(function(mappingDetails) {
+					
+					// Initialize count
+					let totalCount = mappingDetails.length;
+					let completedCount = 0;
+					let pendingCount = 0;
+
+					var tableListHTML = "";
+					
+					for(j = 0; j < mappingDetails.length; j++){
+						var complaint_status=mappingDetails[j].complaint_status;
+						complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1);
+						
+						tableListHTML += `<tr>
+						                    <td>${j+1}</td>
+						                    <td>${mappingDetails[j].complaint_type}</td>
+						                    <td>${mappingDetails[j].off_nm} (${mappingDetails[j].off_id})</td>
+						                    <td>${convertdate(mappingDetails[j].mappedOn)}</td>
+						                    <td>${complaint_status}</td>
+						                  </tr>`;
+						                  
+		               	// Check if the status is "pending"
+					    if (mappingDetails[j].complaint_status === "pending") {
+					        // Increment the count
+					        pendingCount++;
+					    }
+					    else if(mappingDetails[j].complaint_status === "close"){
+					    	completedCount++;
+						}
+					}
+					
+					var listOfComplaintsHTML = `<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th>S.no</th>
+									                    <th>Complaint</th>
+									                    <th>Assigned To</th>
+									                    <th>Assigned On</th>
+									                    <th>Status</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+								                 		${tableListHTML}
+								                	</tbody>
+								              	</table>`;
+					$("#listOfComplaintsHTML").html(listOfComplaintsHTML);
+					
+					$("#total_complaints_value").html(`<b>${totalCount}</b>`);
+					$("#total_complaints_completed_value").html(`<b style="color:green">${completedCount}</b>`);
+					$("#total_complaints_pending_value").html(`<b style="color:red">${pendingCount}</b>`);
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching Mapping Data ('+petitionId+'):', error.message);
+				});
+			}
+			
+			/* Get Petition details by petition number */
+			function get_petition_mapping_list() {
+			    
+				var formData = new FormData();
+				var apiUrl = '/gcc/api/com_petition/getComplaintListByPetitionId?petitionId='+petitionId;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+		
+		function call_petition_search_from(errorTXT){
+			var errorHTML = "";
+			if(errorTXT!=""){
+				errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`;
+			}
+			var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();">
+										<div class="card-header">
+						                <h3>View Petition Form</h3>
+						                <div class="card-header-right">
+						                    <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+						                </div>
+						            </div>
+						       		<div class="card-body">
+						       			<div class="row">
+											<div class="col-12 text-center">
+												${errorHTML}
+												<div class="form-group">
+						                            <label for="petitionNoSearch">Petition No / மனு எண் </label>
+						                            <input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="COM00000000" maxlength="11" required>
+						                        </div>
+						                        
+											</div>
+											<div class="col-12">
+												<div class="block-content" id="userinfo2">
+													<div id="comp_mapping_to_officers" class="row"></div>
+												</div>
+										 	</div>
+										</div>
+						          	</div>
+						          	<div class="card-footer text-center">
+										<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+						            	<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button>
+						        	</div>
+						    	</form>`;
+			
+			$("#petitionViewtable").html(searchFormHTML);
+			$("#petitionNoSearch").mask('COM00000000');
+		}
+		
+		function searchRequest(){
+			var searchValue = $('#petitionNoSearch').val();
+			if (searchValue && searchValue.trim() !== '') {
+				searchValue = encodeBase64(searchValue);
+				window.location.href = "/gcc/com_petition/view-petition?petitionNo="+searchValue;
+			}
+			else{
+				call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+			}
+			return false;
+		}
+		</script>
+		<script>
+		$(document).ready(function() {
+			if(petitionNo!=null && petitionNo!="error"){
+				get_complaint_type_data();
+				get_officer_master_data();
+			}
+			else{
+				if(petitionNo=="error"){
+					call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				}
+				else{
+					call_petition_search_from("");
+				}
+			}
+			
+		});
+		</script>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/modules/com_petition/script.html b/src/main/resources/templates/fragments/modules/com_petition/script.html
new file mode 100644
index 0000000..9fe9674
--- /dev/null
+++ b/src/main/resources/templates/fragments/modules/com_petition/script.html
@@ -0,0 +1,360 @@
+<script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
+<script th:inline="javascript">
+	var nodata = nodata();
+	
+	var baseURL = "/gcc/com_petition/";
+	
+	/* Complaint Type List */
+	function get_complaint_type_list() {
+	    
+		var apiUrl = '/gcc/api/com_petition/getComplaintTypes';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Officer Master List */
+	function get_officer_list() {
+	    
+		var apiUrl = '/gcc/api/com_petition/getOfficerList';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Petition Type List */
+	function get_petition_type_list() {
+	    
+		var apiUrl = '/gcc/api/com_petition/getPetitionTypes';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	function viewAck(petitionNo){
+
+		loading_text_msg = getLoadingMessage(); // get Loading random text
+		$('#ackModalTitle').html("Loading Petition Acknowledgement ("+petitionNo+")");
+		var loading=searchinfo("<b>"+loading_text_msg+"</b>");
+		var ackContentHTML=`
+							<div class="row">
+							    <div class="col-lg-6">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack1table" class="ack-content">
+						                <div id="ack1">${loading}</div>
+						            </div>
+						        </div>
+						    </div>
+						    
+						    <div class="col-lg-6 printack2">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack2table" class="ack-content">
+						                <div id="ack2">${loading}</div>
+						            </div>
+						        </div>
+						    </div>
+						    <!--<div class="col-lg-12 text-center block-options pt-10">
+						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+						    </div>-->
+						</div>`;
+		
+		$('#ackModalBody').html(ackContentHTML); // Box content (Body)
+		
+		$("#ackModalBox").modal({
+			    backdrop: 'static',
+			    keyboard: false
+		}); // Show Modal Box
+			
+		get_petition_ack_data(petitionNo);
+		
+		return false;
+	}
+	
+	
+	 /* Get Petition data */
+	function get_petition_ack_data(petitionNo){
+		get_petition_details_byNo(petitionNo).then(function(petitionDetails) {
+		    // Handle the Complaint list
+		    var complaintHTML = "";
+			var complaint = petitionDetails[0].petitioner_complaint_txt;
+			
+			var complaintArray = complaint.split(',');
+			
+			for(j = 0; j < complaintArray.length; j++){
+				if(j>0){
+					complaintHTML+="<br>";
+				}
+				complaintHTML+= (j+1)+') '+complaintArray[j];
+			}
+			var ack =`
+			<table class="table table-borderless table-vcenter p-0 m-0">
+			  <tbody>
+			    <tr>
+			      <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+			      <td class="fw-semibold text-center">
+						<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br>
+						மக்களை தேடி மேயர் திட்டம்<br>
+						ஒப்புகை சீட்டு / Acknowledgement Receipt</b>
+				  </td>
+				  <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+			    </tr>
+			</tbody>
+			</table>
+			<hr style="margin:0px">
+			  <div class="block-content p-0 m-0">
+			    <table class="table table-borderless table-vcenter" style="font-size:12px;">
+			      <tbody>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${convertdate(petitionDetails[0].cdate)}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petition_no}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petitioner_name}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petitioner_mobile}
+			          </td>
+			        </tr>
+			        <tr style="font-size:12px;">
+			          <th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${complaintHTML}
+					</td>
+			        </tr>
+			        <tr>
+			          <td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th>
+			        </tr>
+			        <tr style="text-align: right;">
+			          <th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th>
+			        </tr>
+			      </tbody>
+			    </table>
+			  </div>`;
+		    $('#ackModalTitle').html("Acknowledgement Of Petition ("+petitionNo+")");
+			$("#ack1").html(ack);
+			$("#ack2").html(ack);
+			  
+		}).catch(function(error) {
+		    // Handle errors
+		    console.error('Error fetching petition details ('+petitionNo+'):', error);
+		});
+	}
+	 
+	/* Get Petition details by petition number */
+	function get_petition_details_byNo(petitionNo) {
+		
+		var apiUrl = '/gcc/api/com_petition/getPetitionDetails?petitionNo='+petitionNo
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Get Petition details by petition number */
+	function get_complaint_details_byId(mapId) {
+		
+		var apiUrl = '/gcc/api/com_petition/getComplaintDetails?mapId='+mapId
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Get Petition details by petition number */
+	function get_complaint_action_byId(mapId) {
+		
+		var apiUrl = '/gcc/api/com_petition/getComplaintActionDetails?mapId='+mapId
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	
+	/* File View */
+	function viewFile(fileOf,fileName,fileType){
+		$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box
+		
+		var fileUrl = "/gcc/files/com_petition/";
+		
+		if(fileOf=="petition")
+		{
+			fileUrl=fileUrl+fileName;
+		}
+		else if(fileOf="action"){
+			fileUrl=fileUrl+"com_action_file/"+fileName;
+		}
+		else{
+			fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name
+		}
+		
+		checkFileExists(fileUrl).then(exists => {
+			if (exists) {
+				if(fileType=='application/pdf'){
+					var fileHTML = `<iframe src="${fileUrl}" type="application/pdf" width="100%" height="600px"></iframe>`;
+					
+				}
+				else if(fileType=='application/octet-stream'){
+					fileHTML =`<p class='text-danger m-0 p-0'>File Preview not avaiable.<br>Try to download and view.</p>`;
+				}
+				else{
+					fileHTML =`<img src="${fileUrl}" alt="${fileType}" width="100%">`;
+				}
+		    } else {
+		        console.log('File does not exist');
+		        fileHTML = `<p class='text-danger m-0 p-0'>File does not exist</p>`;
+		    }
+			
+			$("#viewFileBoxBody").html(fileHTML); // Modal Box Body
+			$("#viewFileBox").modal({
+			    backdrop: 'static',
+			    keyboard: false
+			}); // Show Modal Box
+		});
+	}
+	
+	/* Downlaod file */
+	function downloadFile(fileOf,fileName,fileType){
+		$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box
+		
+		var fileUrl = "/gcc/files/com_petition/";
+		
+		if(fileOf=="petition")
+		{
+			fileUrl=fileUrl+fileName;
+			callDownload(fileUrl,fileName);
+		}
+		else if(fileOf="action"){
+			fileUrl=fileUrl+"com_action_file/"+fileName;
+			callDownload(fileUrl,fileName);
+		}
+		else{
+			fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name
+		}
+	}
+	
+	/* Show Complaint forward Modal */
+	function forward_compliant(mapId,title){
+		var compmapHTML =`<div class="col-12" id="comp${mapId}">
+			
+								<div class="widget mb-0">
+					                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                    <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+					                </div>
+					                <div class="widget-body">
+					                	<div class="form-group">
+					                    	<label for="dept${mapId}">Select Department Type</label>
+											<select name="dept[]" id="dept${mapId}" class="form-control" onchange="javascript:calloffice(this.value,${mapId})">
+												<option value="0">Select Department</option>
+												<option value="1">GCC Department</option>
+												<option value="2">External Department</option>
+										    </select>
+										</div>
+										<div id="officedata${mapId}"></div>
+										<div id="officers${mapId}"></div>
+					                </div>
+					            </div>
+							
+						  </div>`;
+	  
+		$("#forwardModalBody").html(compmapHTML); // Modal Box Body
+		$("#forwardModalBox").modal({
+		    backdrop: 'static',
+		    keyboard: false
+		}); // Show Modal Box
+	}
+</script>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/modules/com_petition/search_form.html b/src/main/resources/templates/fragments/modules/com_petition/search_form.html
new file mode 100644
index 0000000..e0f28b3
--- /dev/null
+++ b/src/main/resources/templates/fragments/modules/com_petition/search_form.html
@@ -0,0 +1,19 @@
+				<div class="row">
+					<div class="col-12 mb-2">
+						<div class="input-group mb-0">
+							<span class="input-group-prepend">
+                        	<button type="button" id="filter_reset_btn" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset">
+                          	  <i class="ik ik-refresh-ccw"></i>
+                        	</button>
+                        	</span>
+						 <select class="form-control" id="search_department_id" name="search_department_id">
+	                        <option value="0">All Department`s</option>
+	                      </select>
+	                      <span class="input-group-append">
+                         <button type="button" id="filter_search_btn" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search">
+                           <i class="ik ik-search me-1"></i> Search
+                         </button>
+                         </span>
+						</div>
+					</div>
+				</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/modules/zerohours_petition/modal-box.html b/src/main/resources/templates/fragments/modules/zerohours_petition/modal-box.html
new file mode 100644
index 0000000..38e0c8c
--- /dev/null
+++ b/src/main/resources/templates/fragments/modules/zerohours_petition/modal-box.html
@@ -0,0 +1,139 @@
+			
+			<!--  Box 1 -->
+			<div class="modal fade" id="ackModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="ackModalTitle">Modal Title</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="ackModalBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 1 -->
+			<div class="modal fade" id="mappingModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="mappingModalTitle">Modal Title</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="mappingModalBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 2 -->
+			<div class="modal fade" id="ComplaintStatusBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="complaint-title">புகார் நிலை / Complaint Status:</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="ComplaintStatusBoxBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 3 -->
+			<div class="modal fade" id="viewFileBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="viewFileTitle">View File</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="viewFileBoxBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 4 -->
+			<div class="modal fade" id="viewpetition" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="viewPetitionTitle">View Petition</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="viewPetitionBoxBody">
+                        		<iframe id="iframe" width="100%" height="400px" src=""></iframe>
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 0 common -->
+			<div class="modal fade" id="forwardModalBox" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-lg" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="forwardModalTitle">Modal Title</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="forwardModalBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/modules/zerohours_petition/petition_view_script.html b/src/main/resources/templates/fragments/modules/zerohours_petition/petition_view_script.html
new file mode 100644
index 0000000..5689940
--- /dev/null
+++ b/src/main/resources/templates/fragments/modules/zerohours_petition/petition_view_script.html
@@ -0,0 +1,293 @@
+<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var petitionId = 0;
+			var closedComplaintsList=[];
+			var complaintTypeList = "";
+			var officerMasterList = "";
+			
+			 /* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Call Petition function to fetch the data
+	    		    get_petition_data();
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			 
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+			 
+	     	// Function to get complaint_type and complaint_typeid by complaint_typeid
+	        function getComplaintTypeById(complaintTypeId) {
+	            for (var i = 0; i < complaintTypeList.length; i++) {
+	                if (complaintTypeList[i].complaint_typeid == complaintTypeId) {
+	                    return {
+	                        complaint_type: complaintTypeList[i].complaint_type,
+	                        complaint_typeid: complaintTypeList[i].complaint_typeid
+	                    };
+	                }
+	            }
+	            return null; // Return null if no matching complaint_typeid is found
+	        }
+	     
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint;
+					petitionId = petitionDetails[0].petition_id;
+					var complaintArray = complaint.split(",");
+					$("#complaintType").val(complaintArray);
+					
+					$('#complaintType').trigger('change');
+					
+					closedComplaintsList = complaintArray;
+					$("#cdate_value").html(convertdate(petitionDetails[0].cdate));
+					$("#petition_no_value").html(petitionDetails[0].petition_no);
+					$("#petitioner_name_value").html(petitionDetails[0].petitioner_name);
+					$("#petitioner_mobile_value").html(petitionDetails[0].petitioner_mobile);
+					$("#petitioner_address_value").html(petitionDetails[0].petitioner_address);
+					$("#petitioner_pincode_value").html(petitionDetails[0].petitioner_pincode);
+					
+					$("#complaint_with_maping_value").html(petitionDetails[0].complaint_nature);
+					
+					var petition_status = petitionDetails[0].status
+					
+					if(petition_status=='pending' || petition_status=='partial'){
+						$("#petition_summary_title").html("Pending Summary");
+						var currentDate = new Date();
+						var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),'');
+						$("#petition_summary_html").html(`This petition has been pending for more than ${totaldayspending}`);
+					}
+					if(petition_status=='close'){
+						$("#petition_summary_title").html("Close Summary");
+						var currentDate = new Date();
+						var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),'');
+						$("#petition_summary_html").html(`The time taken to close this petition is ${totaldayspending}`);
+					}
+						
+					petition_status=petition_status.charAt(0).toUpperCase() + petition_status.slice(1);
+					
+					$("#petition_status_value").html(`<b style="color:red">${petition_status}</b>`);
+					
+					// Call Complaint list based on Petition No and Id
+					get_petition_mapping_data();
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition Data ('+petitionNo+'):', error.message);
+				    call_petition_search_from("** Invalid Petition Number: Please provide a valid petition number.");
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			function get_petition_details() {
+			    //alert();
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/zerohours_petition/getPetitionDetails?petitionNo='+petitionNo;
+				//alert(petitionNo);
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                //alert(jsonResponse[0].petitioner_name);
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("* Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			function get_petition_mapping_data(){
+				get_petition_mapping_list().then(function(mappingDetails) {
+					
+					// Initialize count
+					let totalCount = mappingDetails.length;
+					let completedCount = 0;
+					let pendingCount = 0;
+
+					var tableListHTML = "";
+					
+					for(j = 0; j < mappingDetails.length; j++){
+						var complaint_status=mappingDetails[j].complaint_status;
+						complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1);
+						
+						tableListHTML += `<tr>
+						                    <td>${j+1}</td>
+						                    <td>${mappingDetails[j].complaint_type}</td>
+						                    <td>${mappingDetails[j].off_nm} (${mappingDetails[j].off_id})</td>
+						                    <td>${convertdate(mappingDetails[j].mappedOn)}</td>
+						                    <td>${complaint_status}</td>
+						                  </tr>`;
+						                  
+		               	// Check if the status is "pending"
+					    if (mappingDetails[j].complaint_status === "pending") {
+					        // Increment the count
+					        pendingCount++;
+					    }
+					    else if(mappingDetails[j].complaint_status === "close"){
+					    	completedCount++;
+						}
+					}
+					
+					var listOfComplaintsHTML = `<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th>S.no</th>
+									                    <th>Complaint</th>
+									                    <th>Assigned To</th>
+									                    <th>Assigned On</th>
+									                    <th>Status</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+								                 		${tableListHTML}
+								                	</tbody>
+								              	</table>`;
+					$("#listOfComplaintsHTML").html(listOfComplaintsHTML);
+					
+					$("#total_complaints_value").html(`<b>${totalCount}</b>`);
+					$("#total_complaints_completed_value").html(`<b style="color:green">${completedCount}</b>`);
+					$("#total_complaints_pending_value").html(`<b style="color:red">${pendingCount}</b>`);
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching Mapping Data ('+petitionId+'):', error.message);
+				});
+			}
+			
+			/* Get Petition details by petition number */
+			function get_petition_mapping_list() {
+			    alert(petitionId);
+				var formData = new FormData();
+				var apiUrl = '/gcc/api/zerohours_petition/getComplaintListByPetitionId?petitionId='+petitionId;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("***Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+		
+		function call_petition_search_from(errorTXT){
+			var errorHTML = "";
+			if(errorTXT!=""){
+				errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`;
+			}
+			var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();">
+										<div class="card-header">
+						                <h3>View Petition Form</h3>
+						                <div class="card-header-right">
+						                    <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+						                </div>
+						            </div>
+						       		<div class="card-body">
+						       			<div class="row">
+											<div class="col-12 text-center">
+												${errorHTML}
+												<div class="form-group">
+						                            <label for="petitionNoSearch">Petition No / மனு எண் </label>
+						                            <input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="ZH00000000" maxlength="11" required>
+						                        </div>
+						                        
+											</div>
+											<div class="col-12">
+												<div class="block-content" id="userinfo2">
+													<div id="comp_mapping_to_officers" class="row"></div>
+												</div>
+										 	</div>
+										</div>
+						          	</div>
+						          	<div class="card-footer text-center">
+										<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+						            	<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button>
+						        	</div>
+						    	</form>`;
+			
+			$("#petitionViewtable").html(searchFormHTML);
+			$("#petitionNoSearch").mask('ZH00000000');
+		}
+		
+		function searchRequest(){
+			var searchValue = $('#petitionNoSearch').val();
+			if (searchValue && searchValue.trim() !== '') {
+				searchValue = encodeBase64(searchValue);
+				window.location.href = "/gcc/zerohours_petition/view-petition?petitionNo="+searchValue;
+			}
+			else{
+				call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+			}
+			return false;
+		}
+		</script>
+		<script>
+		$(document).ready(function() {
+			if(petitionNo!=null && petitionNo!="error"){
+				get_complaint_type_data();
+				get_officer_master_data();
+			}
+			else{
+				if(petitionNo=="error"){
+					call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				}
+				else{
+					call_petition_search_from("");
+				}
+			}
+			
+		});
+		</script>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/modules/zerohours_petition/script.html b/src/main/resources/templates/fragments/modules/zerohours_petition/script.html
new file mode 100644
index 0000000..43fa529
--- /dev/null
+++ b/src/main/resources/templates/fragments/modules/zerohours_petition/script.html
@@ -0,0 +1,660 @@
+<script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
+<script th:inline="javascript">
+	var nodata = nodata();
+	
+	var baseURL = "/gcc/zerohours_petition/";
+	
+	
+	/* Zero Hours Event List */
+	function get_event_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getEventList';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Zero Hours Event List */
+	function get_current_event_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getCurrentEventList';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	
+	/* Zone and Ward List */
+	function get_zone_ward_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getZoneAndWard';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Councillor List */
+	function get_councillor_list(ward) {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getCouncillor?ward='+ward;
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Complaint Type List */
+	function get_complaint_type_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getComplaintTypes';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Officer Master List */
+	function get_officer_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getOfficerList';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Petition Type List */
+	function get_petition_type_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getPetitionTypes';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	function viewAck(petitionNo){
+
+		loading_text_msg = getLoadingMessage(); // get Loading random text
+		$('#ackModalTitle').html("Loading Petition Acknowledgement ("+petitionNo+")");
+		var loading=searchinfo("<b>"+loading_text_msg+"</b>");
+		var ackContentHTML=`
+							<div class="row">
+							    <div class="col-lg-6">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack1table" class="ack-content">
+						                <div id="ack1">${loading}</div>
+						            </div>
+						        </div>
+						    </div>
+						    
+						    <div class="col-lg-6 printack2">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack2table" class="ack-content">
+						                <div id="ack2">${loading}</div>
+						            </div>
+						        </div>
+						    </div>
+						    <!--<div class="col-lg-12 text-center block-options pt-10">
+						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+						    </div>-->
+						</div>`;
+		
+		$('#ackModalBody').html(ackContentHTML); // Box content (Body)
+		
+		$("#ackModalBox").modal({
+			    backdrop: 'static',
+			    keyboard: false
+		}); // Show Modal Box
+			
+		get_petition_ack_data(petitionNo);
+		
+		return false;
+	}
+	
+	
+	 /* Get Petition data */
+	function get_petition_ack_data(petitionNo){
+		get_petition_details_byNo(petitionNo).then(function(petitionDetails) {
+		    // Handle the Complaint list
+		    var complaintHTML = "";
+			var complaint = petitionDetails[0].petitioner_complaint_txt;
+			
+			var complaintArray = complaint.split(',');
+			
+			for(j = 0; j < complaintArray.length; j++){
+				if(j>0){
+					complaintHTML+="<br>";
+				}
+				complaintHTML+= (j+1)+') '+complaintArray[j];
+			}
+			var ack =`
+			<table class="table table-borderless table-vcenter p-0 m-0">
+			  <tbody>
+			    <tr>
+			      <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+			      <td class="fw-semibold text-center">
+						<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br>
+						மக்களை தேடி மேயர் திட்டம்<br>
+						ஒப்புகை சீட்டு / Acknowledgement Receipt</b>
+				  </td>
+				  <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+			    </tr>
+			</tbody>
+			</table>
+			<hr style="margin:0px">
+			  <div class="block-content p-0 m-0">
+			    <table class="table table-borderless table-vcenter" style="font-size:12px;">
+			      <tbody>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${convertdate(petitionDetails[0].cdate)}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petition_no}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petitioner_name}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petitioner_mobile}
+			          </td>
+			        </tr>
+			        <tr style="font-size:12px;">
+			          <th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${complaintHTML}
+					</td>
+			        </tr>
+			        <tr>
+			          <td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th>
+			        </tr>
+			        <tr style="text-align: right;">
+			          <th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th>
+			        </tr>
+			      </tbody>
+			    </table>
+			  </div>`;
+		    $('#ackModalTitle').html("Acknowledgement Of Petition ("+petitionNo+")");
+			$("#ack1").html(ack);
+			$("#ack2").html(ack);
+			  
+		}).catch(function(error) {
+		    // Handle errors
+		    console.error('Error fetching petition details ('+petitionNo+'):', error);
+		});
+	}
+	 
+	/* Get Petition details by petition number */
+	function get_petition_details_byNo(petitionNo) {
+		
+		var apiUrl = '/gcc/api/zerohours_petition/getPetitionDetails?petitionNo='+petitionNo
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Get Petition details by petition number */
+	function get_complaint_details_byId(mapId) {
+		
+		var apiUrl = '/gcc/api/zerohours_petition/getComplaintDetails?mapId='+mapId
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Get Petition details by petition number */
+	function get_complaint_action_byId(mapId) {
+		
+		var apiUrl = '/gcc/api/zerohours_petition/getComplaintActionDetails?mapId='+mapId
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	
+	/* File View */
+	function viewFile(fileOf,fileName,fileType){
+		$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box
+		
+		var fileUrl = "/gcc/files/zh_petition/";
+		
+		if(fileOf=="petition")
+		{
+			fileUrl=fileUrl+fileName;
+		}
+		else if(fileOf="action"){
+			fileUrl=fileUrl+"zh_action_file/"+fileName;
+		}
+		else{
+			fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name
+		}
+		
+		checkFileExists(fileUrl).then(exists => {
+			if (exists) {
+				if(fileType=='application/pdf'){
+					var fileHTML = `<iframe src="${fileUrl}" type="application/pdf" width="100%" height="600px"></iframe>`;
+					
+				}
+				else if(fileType=='application/octet-stream'){
+					fileHTML =`<p class='text-danger m-0 p-0'>File Preview not avaiable.<br>Try to download and view.</p>`;
+				}
+				else{
+					fileHTML =`<img src="${fileUrl}" alt="${fileType}" width="100%">`;
+				}
+		    } else {
+		        console.log('File does not exist');
+		        fileHTML = `<p class='text-danger m-0 p-0'>File does not exist</p>`;
+		    }
+			
+			$("#viewFileBoxBody").html(fileHTML); // Modal Box Body
+			$("#viewFileBox").modal({
+			    backdrop: 'static',
+			    keyboard: false
+			}); // Show Modal Box
+		});
+	}
+	
+	/* Downlaod file */
+	function downloadFile(fileOf,fileName,fileType){
+		$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box
+		
+		var fileUrl = "/gcc/files/zh_petition/";
+		
+		if(fileOf=="petition")
+		{
+			fileUrl=fileUrl+fileName;
+			callDownload(fileUrl,fileName);
+		}
+		else if(fileOf="action"){
+			fileUrl=fileUrl+"zh_action_file/"+fileName;
+			callDownload(fileUrl,fileName);
+		}
+		else{
+			fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name
+		}
+	}
+	
+	/* Show Complaint forward Modal */
+	function forward_compliant(mapId,title){
+		var compmapHTML =`<div class="col-12" id="comp${mapId}">
+			
+								<div class="widget mb-0">
+					                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                    <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+					                </div>
+					                <div class="widget-body">
+					                	<div class="form-group">
+					                    	<label for="dept${mapId}">Select Department Type</label>
+											<select name="dept[]" id="dept${mapId}" class="form-control" onchange="javascript:calloffice(this.value,${mapId})">
+												<option value="0">Select Department</option>
+												<option value="1">GCC Department</option>
+												<option value="2">External Department</option>
+										    </select>
+										</div>
+										<div id="officedata${mapId}"></div>
+										<div id="officers${mapId}"></div>
+					                </div>
+					            </div>
+							
+						  </div>`;
+	  
+		$("#forwardModalBody").html(compmapHTML); // Modal Box Body
+		$("#forwardModalBox").modal({
+		    backdrop: 'static',
+		    keyboard: false
+		}); // Show Modal Box
+	}
+	
+	/* Show Complaint forward Modal */
+	function compliant_mapping(petitionId,title,petitionNo){
+		get_mapped_list(petitionId).then(function(listHTML) {
+			var compmapHTML =`<div class="row"><div class="col-6" id="comp${petitionId}">
+									<input type="hidden" name="petitionid" id="petitionid" value="${petitionId}">
+									<input type="hidden" name="petitionno" id="petitionno" value="${petitionNo}">
+									<div class="widget mb-0">
+						                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+						                    <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+						                </div>
+						                <div class="widget-body">
+						                	<div class="form-group">
+						                    	<label for="dept${petitionId}">Select Department Type</label>
+												<select name="dept[]" id="dept${petitionId}" class="form-control" onchange="javascript:calloffice(this.value,${petitionId})">
+													<option value="0">Select Department</option>
+													<option value="1">GCC Department</option>
+													<option value="2">External Department</option>
+											    </select>
+											</div>
+											<div id="officedata${petitionId}"></div>
+											<div id="officers${petitionId}"></div>
+						                </div>
+						            </div>
+								
+							  </div>`;
+				
+				var strListHTML = "";
+			  	for (const key in listHTML) {
+				    if (listHTML.hasOwnProperty(key)) {
+				        //console.log(`${key}: ${listHTML[key]}`);
+				    	strListHTML += `<tr>
+							            	<td class="fw-semibold">${key+1}</td>
+							            	<td class="fw-semibold">${listHTML[key]['petition_no']}</td>
+							            	<td class="fw-semibold">${listHTML[key]['off_nm']}</td>
+							            	<td class="fw-semibold">
+							            		<a href="javascript:void(0)" class="link mr-10"  onclick="unmapOfficer(${listHTML[key]['mapid']},${listHTML[key]['petition_id']},'${listHTML[key]['off_nm']}','${listHTML[key]['petition_no']}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Un-Map" data-original-title="Un-Map"><i class="fas fa-unlink"></i></a>
+							            	</td>
+						              	</tr>`;
+				    }
+				}
+			  	strListHTML = `<table class="table table-bordered table-vcenter mb-0">
+							              <thead>
+							              <tr>
+							                <th>S.no</th>
+							                <th>Petition No</th>
+							                <th>Department</th>
+							                <th><i class="fas fa-unlink"></i></th>
+							              </tr>
+							            </thead>
+							        	<tbody>
+							         		${strListHTML}
+							        	</tbody>
+							      	</table>`;
+	      	
+			compmapHTML = compmapHTML + `<div class="col-6" id="mappeddata">
+								
+								<div class="widget mb-0">
+					                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                    <h3 class="widget-title" style="font-size:13px;">Mapped List</h3>
+					                </div>
+					                <div class="widget-body">
+					                	<div id="mappedTableHTML">
+					                    	${strListHTML}
+										</div>
+					                </div>
+					            </div>
+							
+						  </div></div>`;
+		  
+			$("#mappingModalTitle").html("Mapping Form"); 
+			$("#mappingModalBody").html(compmapHTML); // Modal Box Body
+			$("#mappingModalBox").modal({
+			    backdrop: 'static',
+			    keyboard: false
+			}); // Show Modal Box
+		}).catch(function(error) {
+		    // Handle errors
+		    console.error('Error fetching Mapped data:', error);
+		});
+		return false;
+	}
+	
+	function updateModelBox(petitionId,title,petitionNo){
+		get_mapped_list(petitionId).then(function(listHTML) {
+			var compmapHTML =`<div class="row"><div class="col-6" id="comp${petitionId}">
+									<input type="hidden" name="petitionid" id="petitionid" value="${petitionId}">
+									<input type="hidden" name="petitionno" id="petitionno" value="${petitionNo}">
+									<div class="widget mb-0">
+						                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+						                    <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+						                </div>
+						                <div class="widget-body">
+						                	<div class="form-group">
+						                    	<label for="dept${petitionId}">Select Department Type</label>
+												<select name="dept[]" id="dept${petitionId}" class="form-control" onchange="javascript:calloffice(this.value,${petitionId})">
+													<option value="0">Select Department</option>
+													<option value="1">GCC Department</option>
+													<option value="2">External Department</option>
+											    </select>
+											</div>
+											<div id="officedata${petitionId}"></div>
+											<div id="officers${petitionId}"></div>
+						                </div>
+						            </div>
+								
+							  </div>`;
+							  
+				var strListHTML = "";
+							  
+			  	for (const key in listHTML) {
+				    if (listHTML.hasOwnProperty(key)) {
+				        //console.log(`${key}: ${listHTML[key]}`);
+				    	strListHTML += `<tr>
+							            	<td class="fw-semibold">${key+1}</td>
+							            	<td class="fw-semibold">${listHTML[key]['petition_no']}</td>
+							            	<td class="fw-semibold">${listHTML[key]['off_nm']}</td>
+							            	<td class="fw-semibold">
+							            		<a href="javascript:void(0)" class="link mr-10" onclick="unmapOfficer(${listHTML[key]['mapid']},${listHTML[key]['petition_id']},'${listHTML[key]['off_nm']}','${listHTML[key]['petition_no']}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="un-Map" data-original-title="Un-Map"><i class="fas fa-unlink"></i></a>
+							            	</td>
+						              	</tr>`;
+				    }
+				}
+			  	strListHTML = `<table class="table table-bordered table-vcenter mb-0">
+							              <thead>
+							              <tr>
+							                <th>S.no</th>
+							                <th>Petition No</th>
+							                <th>Department</th>
+							                <th><i class="fas fa-unlink"></i></th>
+							              </tr>
+							            </thead>
+							        	<tbody>
+							         		${strListHTML}
+							        	</tbody>
+							      	</table>`;
+	      	
+			compmapHTML = compmapHTML + `<div class="col-6" id="mappeddata">
+								
+								<div class="widget mb-0">
+					                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                    <h3 class="widget-title" style="font-size:13px;">Mapped List</h3>
+					                </div>
+					                <div class="widget-body">
+					                	<div id="mappedTableHTML">
+					                    	${strListHTML}
+										</div>
+					                </div>
+					            </div>
+							
+						  </div></div>`;
+		  
+			
+			$("#mappingModalBody").html(compmapHTML); // Modal Box Body
+			
+		}).catch(function(error) {
+		    // Handle errors
+		    console.error('Error fetching Mapped data:', error);
+		});
+		return false;
+	}
+	function unmapOfficer(mapid,petitionId,department,petitionNo){
+		// Handle the response
+    	Swal.fire({
+			title: 'Are you sure to unmap this department?<br>'+department,
+			customClass: {
+		        title: 'swal-title-custom' // Add a custom class for the title
+		    },
+			//text: "Error",
+			icon: 'warning',
+			showCancelButton: true,
+			confirmButtonColor: '#3085d6',
+			cancelButtonColor: '#d33',
+			confirmButtonText: 'Yes',
+			}).then(function(result) {
+			if (result.isConfirmed) {
+				unmapPetition(mapid).then(function(status) {
+					if(status=="success"){
+						updateModelBox(petitionId,"Assign to the Department Officer",petitionNo);
+					}
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error unmapping mapid:'+mapid, error);
+				});
+			}
+		});
+		
+		return false;
+	}
+	function unmapPetition(mapid){
+		var apiUrl = '/gcc/api/zerohours_petition/unmapPetition?mapid='+mapid
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            //dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition maping details ('+mapid+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+</script>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/modules/zerohours_petition/search_form.html b/src/main/resources/templates/fragments/modules/zerohours_petition/search_form.html
new file mode 100644
index 0000000..e0f28b3
--- /dev/null
+++ b/src/main/resources/templates/fragments/modules/zerohours_petition/search_form.html
@@ -0,0 +1,19 @@
+				<div class="row">
+					<div class="col-12 mb-2">
+						<div class="input-group mb-0">
+							<span class="input-group-prepend">
+                        	<button type="button" id="filter_reset_btn" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset">
+                          	  <i class="ik ik-refresh-ccw"></i>
+                        	</button>
+                        	</span>
+						 <select class="form-control" id="search_department_id" name="search_department_id">
+	                        <option value="0">All Department`s</option>
+	                      </select>
+	                      <span class="input-group-append">
+                         <button type="button" id="filter_search_btn" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search">
+                           <i class="ik ik-search me-1"></i> Search
+                         </button>
+                         </span>
+						</div>
+					</div>
+				</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 662b7cb..44a4c0c 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -63,7 +63,7 @@
                                         </div>
                                     </div>
                                    
-                                    <div class="widget-body">
+                                    <div class="widget-body" id="kural_dashboard">
                                     	<table>
 	                                    	<tr>
 	                                    		<td class="text-center" width="20%"><img src="/gcc/files/app_uploads/icons/thiruvalluvar.jpeg" width="90%" class="rounded"></td>
@@ -207,10 +207,152 @@
 	  		});
 	   }
        
+       function getDailyContent_kural(){
+			get_kural_data().then(function(data) {
+				var kural_html =``;
+				$.each(data, function(index, row) {
+				kural_html =`<table>
+					               	<tr>
+					           		<td class="text-center" width="20%"><img src="/gcc/files/app_uploads/icons/thiruvalluvar.jpeg" width="90%" class="rounded"></td>
+					           		<td>
+					           			<div class="mb-0" style="font-size:20px;">${row['Line1']}</div>
+					           			<div class="mb-0" style="font-size:20px;">${row['Line2']}</div>
+					           			<div class="mb-0 text-right">( குறள் எண் : ${row['Number']} ) | <a href="#" onclick="return openKural(${row['Number']});" class="link"> விளக்கம் </a></div>
+					           		</td>
+					           	</tr>
+					       	</table>`;
+				});
+				$("#kural_dashboard").html(kural_html);
+			}).catch(function(error) {
+	  		    // Handle errors
+		        if (error && error.message) {
+		            console.error('Error fetching Kural:', error.message);
+		        } else {
+		            console.error('An error occurred while fetching Kural:', error);
+		        }
+	  		});
+       }
+       
+       function get_kural_data(){
+    	   var apiUrl = '/gcc/api/getDailyKural';
+	  	    // Return a Promise
+	  	    return new Promise(function(resolve, reject) {
+	  	        $.ajax({
+	  	            url: apiUrl,
+	  	            type: 'GET',
+	  	            success: function(jsonResponse) {
+	  	                // Resolve the Promise with the department list
+	  	                resolve(jsonResponse);
+	  	            },
+	  	            error: function(xhr, status, error) {
+	  	                // Reject the Promise with the error message
+	  	                reject(error);
+	  	            }
+	  	        });
+	  	    });
+       }
+      
+       function openKural(number){
+			//alert(number);
+			get_kural_data().then(function(data) {
+				var kural_html =``;
+				$.each(data, function(index, row) {
+				kural_html =`<table class="table bg-warning" style="color:#fff">
+						            <tr>
+						           		<td>
+						           			<div class="mb-0" style="font-size:18px;">குறள் எண் : ${row['Number']}</div>
+						           		</td>
+						           		<td>
+						           			<div class="mb-0" style="font-size:18px;">${row['Line1']}</div>
+						           			<div class="mb-0" style="font-size:18px;">${row['Line2']}</div>
+						           		</td>
+						           		<td>
+					           				<div class="mb-0" style="font-size:18px;">${row['transliteration1']}</div>
+					           				<div class="mb-0" style="font-size:18px;">${row['transliteration2']}</div>
+					           			</td>
+					           		</tr>
+					       	</table>
+					       	
+							<div class="row pt-10">
+			                    <div class="col-md-6">
+			                        <div class="card" style="min-height: 100px;margin-bottom: 10px;">
+			                            <div class="card-header" style="background:#cdd6a0;padding:5px;">
+			                                <h3>மு.வ விளக்கம்:</h3>
+			                                <div class="card-header-right">
+			                                    
+			                                </div>
+			                            </div>
+			                            <div class="card-body timeline" style="font-size:15px;">
+			                           		${row['mv']}
+			                            </div>
+			                        </div>
+			                    </div>
+			                    
+			                    <div class="col-md-6">
+			                        <div class="card" style="min-height: 100px;margin-bottom: 10px;">
+			                            <div class="card-header" style="background:#cdd6a0;padding:5px;">
+			                                <h3>சாலமன் பாப்பையா விளக்கம்:</h3>
+			                                <div class="card-header-right">
+			                                    
+			                                </div>
+			                            </div>
+			                            <div class="card-body timeline" style="font-size:15px;">
+			                            	${row['sp']}
+			                            </div>
+			                        </div>
+		                    	</div>
+		                    <div class="col-md-6">
+			                    <div class="card" style="min-height: 100px;margin-bottom: 10px;">
+			                        <div class="card-header" style="background:#cdd6a0;padding:5px;">
+			                            <h3>கலைஞர் விளக்கம்:</h3>
+			                            <div class="card-header-right">
+			                            	
+			                            </div>
+			                        </div>
+			                        <div class="card-body timeline" style="font-size:15px;">
+			                        	${row['mk']}
+			                        </div>
+			                    </div>
+		                	</div>
+		                	
+		                	<div class="col-md-6">
+		                    <div class="card" style="min-height: 100px;">
+		                        <div class="card-header" style="background:#cdd6a0;padding:5px;">
+		                            <h3>Explanation:</h3>
+		                            <div class="card-header-right">
+		                            	
+		                            </div>
+		                        </div>
+		                        <div class="card-body timeline" style="font-size:15px;">
+		                        	${row['explanation']}
+		                        </div>
+		                    </div>
+	                	</div>
+	                	</div>
+							`;
+				});
+				$("#kuralBody").html(kural_html);
+				$("#kuralModal").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+			}).catch(function(error) {
+	  		    // Handle errors
+		        if (error && error.message) {
+		            console.error('Error fetching Kural:', error.message);
+		        } else {
+		            console.error('An error occurred while fetching Kural:', error);
+		        }
+	  		});
+			
+			return false;
+       }
+       
        $(document).ready(function() {
 			call_loading();
 			//get_user_info();
 			get_user_basic_info();
+			getDailyContent_kural();
 		});
        </script>
     </body>
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index a1d55c1..8c56c11 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -27,11 +27,11 @@
 						    </div>
 						    <form th:action="@{/gcc/login}" method="post">
                                 <div class="form-group">
-                                    <input type="text" class="form-control" id="username" name="username" placeholder="Username" required="" value="balaji">
+                                    <input type="text" class="form-control" id="username" name="username" placeholder="Username" required="" value="">
                                     <i class="ik ik-user"></i>
                                 </div>
                                 <div class="form-group">
-                                    <input type="password" class="form-control" id="password" name="password" placeholder="Password" required="" value="test">
+                                    <input type="password" class="form-control" id="password" name="password" placeholder="Password" required="" value="">
                                     <i class="ik ik-lock"></i>
                                 </div>
                                 <div class="row">
@@ -42,7 +42,7 @@
                                         </label>
                                     </div>
                                     <div class="col text-right">
-                                        <a href="forgot-password.html">Forgot Password ?</a>
+                                        <a href="#">Forgot Password ?</a>
                                     </div>
                                 </div>
                                 <div class="sign-btn text-center">
@@ -50,7 +50,7 @@
                                 </div>
                             </form>
                             <div class="register">
-                                <p>Don't have an account? <a href="register.html">Create an account</a></p>
+                                <p>Don't have an account? <a href="#">Create an account</a></p>
                             </div>
                         </div>
                     </div>
diff --git a/src/main/resources/templates/modules/.DS_Store b/src/main/resources/templates/modules/.DS_Store
index 4440303..6b8d902 100644
Binary files a/src/main/resources/templates/modules/.DS_Store and b/src/main/resources/templates/modules/.DS_Store differ
diff --git a/src/main/resources/templates/modules/c_petition/complaint_list.html b/src/main/resources/templates/modules/c_petition/complaint_list.html
index 40b8f02..da824cc 100644
--- a/src/main/resources/templates/modules/c_petition/complaint_list.html
+++ b/src/main/resources/templates/modules/c_petition/complaint_list.html
@@ -508,12 +508,12 @@
 					complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1);
 					
 					actionHTML = `<div class="dropdown d-inline-block show">
-			                        <a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
+			                        <!--<a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
 			                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end">
 			                        Action for: `+row['petition_no']+` 
 			                        	<a class="dropdown-item" href="" onclick="return viewAck('`+row['petition_no']+`');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View Acknowledgement"><i class="ik ik-eye"></i> Acknowledgement</a>
 			                        	<a class="dropdown-item" href="/gcc/c_petition/petition-ack/`+row['petition_no']+`" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print Acknowledgement"><i class="ik ik-printer"></i> Acknowledgement</a>
-			                        </div>
+			                        </div>-->
 			                    </div>`
 	                table.row.add([
 	                	rowNum++,
diff --git a/src/main/resources/templates/modules/callcenter/addcategory.html b/src/main/resources/templates/modules/callcenter/addcategory.html
new file mode 100644
index 0000000..43c398c
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenter/addcategory.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.required{
+	color: red;
+}
+
+/* Custom CSS for SweetAlert2 */
+.swal-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.swal-popup {
+    width: 80% !important; /* Adjust width as needed */
+    max-width: 600px; /* Max width for larger screens */
+    border-radius: 8px; /* Optional: round the corners */
+    padding: 2rem; /* Optional: adjust padding */
+}
+
+.swal-confirm-button {
+    background-color: #dc3545; /* Example: red background for delete button */
+    border: none;
+    color: #fff;
+}
+
+.swal-cancel-button {
+    background-color: #6c757d; /* Example: gray background for cancel button */
+    border: none;
+    color: #fff;
+}
+
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-th-large bg-blue"></i>
+									<div class="d-inline">	
+										<h5>Add Category</h5>
+										<span>1913 Add Category</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">1913 Campaign</li>
+										<li class="breadcrumb-item active" aria-current="page">Add Category</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                    <h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auot refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>    
+                      
+                      <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+                                    <div class="page-header-title" >
+										<h5 style="margin: 0;font-weight: bold;">Category List</h5><hr>
+								   </div> 
+                                        <div>
+											<table id="categoryDatatable" 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">S.No</th>
+													        <th class="text-center">Category</th>
+													        <th class="text-center no-sort">Action</th>
+													    </tr>
+													</thead>
+													<tbody>
+													    <tr th:each="category, iterStat : ${categories}">
+													        <td class="text-center" th:text="${iterStat.index + 1}"></td>
+													        <td class="text-center" th:text="${category.category_name}"></td>
+													        <td class="text-center">
+													            <a href="#" th:onclick="return callEdit([[${category.category_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit">
+													                <i class="ik ik-edit f-16 mr-15 text-green"></i>
+													            </a>
+													                       <!-- Delete button -->
+													            <a href="javascript:void(0);" th:onclick="return openDeleteModal([[${category.category_id}]])" title="Delete">
+													                <i class="ik ik-trash-2 f-16 text-red ml-4"></i>
+													            </a>
+													        </td>
+													    </tr>
+													</tbody>
+
+
+													<tfoot class="thead-dark">
+													    <tr>
+													        <th class="text-center no-sort">S.No</th>
+													        <th class="text-center">Category</th>
+													        <th class="text-center no-sort">Action</th>
+													    </tr>
+													</tfoot>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+		
+
+        <!-- Category Modal Form -->
+		<div class="modal fade" id="addcategoryform" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
+		    <div class="modal-dialog modal-lg" role="document">
+		        <div class="modal-content">
+		            <div class="modal-header">
+		                <h5 class="modal-title" id="exampleModalCenterLabel">Category Form</h5>
+		                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		                    <span aria-hidden="true">&times;</span>
+		                </button>
+		            </div>
+		
+		            <div class="modal-body">
+		                <form id="addCategoryForm">
+		                    <div class="form-group row">
+		                        <label for="categoryname" class="col-sm-12 col-form-label">Category Name <span class="required">*</span></label>
+		                        <div class="col-sm-12">
+		                            <input type="text" class="form-control" name="categoryname" id="categoryname" placeholder="Category Name" required>
+		                        </div>
+		                    </div>
+		                </form>
+		            </div>
+		
+		            <div class="modal-footer">
+		                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+		                <button type="button" class="btn btn-primary" id="createCategoryBtn">Create</button>
+		            </div>
+		        </div>
+		    </div>
+		</div>
+		
+		<!-- Edit Category Modal -->
+		<div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
+		    <div class="modal-dialog" role="document">
+		        <div class="modal-content">
+		            <div class="modal-header">
+		                <h5 class="modal-title" id="editCategoryModalLabel">Edit Category</h5>
+		                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		                    <span aria-hidden="true">&times;</span>
+		                </button>
+		            </div>
+		            <div class="modal-body">
+		                <form id="editCategoryForm">
+		                    <input type="hidden" id="categoryId" name="categoryId">
+		                    <div class="form-group">
+		                        <label for="categoryName">Category Name</label>
+		                        <input type="text" class="form-control" id="categoryName" name="categoryName" required>
+		                    </div>
+		                    <button type="button" class="btn btn-primary" id="updateCategoryButton">Save Changes</button>
+		                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+		                </form>
+		            </div>
+		        </div>
+		    </div>
+		</div>
+		
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteCategoryModal" tabindex="-1" role="dialog" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document"> <!-- Add modal-lg here -->
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="deleteCategoryModalLabel">Confirm Deletion</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete this category?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger" id="confirmDeleteButton">Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+        
+             
+             
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>     
+        <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        
+        <script>
+        $(document).ready(function () {
+            // Initialize DataTables with export buttons
+            var buttons = [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    text: '<i class="far fa-plus-square"></i> Add New Category',
+                    className: 'btn btn-warning',
+                    action: function () {
+                        callAdd();
+                    }
+                }
+            ];
+
+            $('#categoryDatatable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+                ],
+                scrollY: '30vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: buttons,
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false,
+            });
+
+            // Function to show the modal and reset the form
+            function callAdd() {
+                // Reset the form inside the modal when opened
+                var form = $('#addCategoryForm');
+                if (form.length) {
+                    form[0].reset(); // Reset all form fields
+                }
+
+                // Show the modal with static backdrop and disabled keyboard close
+                $('#addcategoryform').modal({
+                    backdrop: 'static',
+                    keyboard: false
+                });
+                $('#addcategoryform').modal('show');
+            }
+
+            // Handle the Create button click event
+          $('#createCategoryBtn').click(function () {
+		    var categoryName = $('#categoryname').val().trim();
+		
+		    // Basic validation to ensure the category name is not empty
+		    if (categoryName === '') {
+		        Swal.fire({
+		            title: 'Validation Error',
+		            text: 'Please enter a category name.',
+		            icon: 'warning',
+		            confirmButtonText: 'OK',
+		        });
+		        return;
+		    }
+		
+		    // AJAX request to save the category
+		    $.ajax({
+		        url: '/gcc/api/category/save', // Ensure the URL points to the correct endpoint
+		        type: 'POST',
+		        contentType: 'application/json',
+		        data: JSON.stringify({ categoryname: categoryName }), // Ensure the key matches what backend expects
+		        success: function (response) {
+		            Swal.fire({
+		                title: 'Success',
+		                text: 'Category saved successfully!',
+		                icon: 'success',
+		                confirmButtonText: 'OK',
+		            }).then(function () {
+		                $('#addcategoryform').modal('hide'); // Close the modal after successful save
+		                location.reload(); // Reload the page to update the category list
+		            });
+		        },
+		        error: function (error) {
+		            Swal.fire({
+		                title: 'Error',
+		                text: 'Error saving category: ' + error.responseText,
+		                icon: 'error',
+		                confirmButtonText: 'OK',
+		            });
+		        }
+		    });
+		});
+            
+          window.callEdit = function (categoryId) {
+		        fetchCategoryDetails(categoryId);
+		        return false; // Prevent default anchor click behavior
+
+		    };
+            
+       // Function to open the Edit Category Modal and populate it with current data
+          function fetchCategoryDetails(categoryId) {
+              // AJAX request to fetch category details by ID
+              $.ajax({
+                  url: '/gcc/api/category/showcategoryId', // Ensure this URL matches your API endpoint
+                  type: 'GET',
+                  data: { category_id: categoryId }, // Send the category ID as a request parameter
+                  success: function (response) {
+                      // Check if the response contains the category data
+                      if (response) {
+                          // Populate the form fields with the retrieved data
+                          $('#categoryId').val(response.category_id);
+                          $('#categoryName').val(response.category_name);
+
+                          // Show the edit modal
+                          $('#editCategoryModal').modal({
+                              backdrop: 'static',
+                              keyboard: false
+                          });
+                      } else {
+                          Swal.fire({
+                              title: 'Error',
+                              text: 'Category not found.',
+                              icon: 'error',
+                              confirmButtonText: 'OK'
+                          });
+                      }
+                  },
+                  error: function (xhr, status, error) {
+                      // Handle error if the API call fails
+                      Swal.fire({
+                          title: 'Error',
+                          text: 'Error fetching category details: ' + xhr.responseText,
+                          icon: 'error',
+                          confirmButtonText: 'OK'
+                      });
+                  }
+              });
+
+              // Prevent the default action (if any) when the link is clicked
+              return false;
+          }
+
+
+            
+       // Event handler for the Save Changes button click in the edit modal
+          $('#updateCategoryButton').click(function () {
+              var categoryId = $('#categoryId').val();
+              var categoryName = $('#categoryName').val().trim();
+
+              // Validate the input
+              if (categoryName === '') {
+                  Swal.fire({
+                      title: 'Validation Error',
+                      text: 'Please enter a category name.',
+                      icon: 'warning',
+                      confirmButtonText: 'OK'
+                  });
+                  return;
+              }
+
+              // AJAX request to update the category
+              $.ajax({
+                  url: '/gcc/api/category/update/' + categoryId, // Ensure this URL is correct and matches your API endpoint
+                  type: 'PUT',
+                  contentType: 'application/x-www-form-urlencoded', // Content type for form data
+                  data: $.param({ categoryName: categoryName }), // Send category name as URL-encoded parameter
+                  success: function (response) {
+                      Swal.fire({
+                          title: 'Success',
+                          text: 'Category updated successfully!',
+                          icon: 'success',
+                          confirmButtonText: 'OK'
+                      }).then(function () {
+                          $('#editCategoryModal').modal('hide'); // Hide the modal
+                          location.reload(); // Reload the page to refresh the category list
+                      });
+                  },
+                  error: function (xhr, status, error) {
+                      Swal.fire({
+                          title: 'Error',
+                          text: 'Error updating category: ' + xhr.responseText,
+                          icon: 'error',
+                          confirmButtonText: 'OK'
+                      });
+                  }
+              });
+          });
+
+     
+          window.openDeleteModal = function (categoryId) {
+        	    $('#categoryId').val(categoryId); // Set the categoryId before showing the modal
+        	    fetchDeleteCategoryDetails();
+        	    return false; // Prevent default anchor click behavior
+        	};
+
+       
+		    function fetchDeleteCategoryDetails() {
+		        Swal.fire({
+		            title: 'Confirm Deletion',
+		            text: 'Are you sure you want to delete this category?',
+		            icon: 'warning',
+		            showCancelButton: true,
+		            confirmButtonText: 'Delete',
+		            cancelButtonText: 'Cancel',
+		            customClass: {
+		                container: 'swal-container',
+		                popup: 'swal-popup',
+		                confirmButton: 'swal-confirm-button',
+		                cancelButton: 'swal-cancel-button'
+		            },
+		            width: '80%',
+		            padding: '3rem',
+		            heightAuto: false
+		        }).then((result) => {
+		            if (result.isConfirmed) {
+		                // Call the function to delete the category
+		                deleteCategory();
+		            }
+		        });
+		    }
+
+		    function deleteCategory() {
+		        var categoryId = $('#categoryId').val(); // Ensure this is correctly set
+		        console.log("Deleting category with ID: " + categoryId); // Debugging line
+		        $.ajax({
+		            url: '/gcc/api/category/delete/' + categoryId,
+		            type: 'DELETE',
+		            success: function (response) {
+		                Swal.fire({
+		                    title: 'Deleted!',
+		                    text: 'Category has been deleted.',
+		                    icon: 'success'
+		                }).then(() => {
+		                    location.reload(); // Refresh the page or update the UI as needed
+		                });
+		            },
+		            error: function (xhr, status, error) {
+		                Swal.fire({
+		                    title: 'Error',
+		                    text: 'Error deleting category: ' + xhr.responseText,
+		                    icon: 'error'
+		                });
+		            }
+		        });
+		    }
+
+
+
+        });
+
+            
+				
+		</script>
+        
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenter/agentscampaign.html b/src/main/resources/templates/modules/callcenter/agentscampaign.html
new file mode 100644
index 0000000..25159c5
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenter/agentscampaign.html
@@ -0,0 +1,888 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+
+.custom-width1 {
+    width: 140px; /* Adjust the width as needed */
+}
+.custom-width2 {
+    width: 200px; /* Adjust the width as needed */
+}
+.custom-width3{
+	width: 100px;
+}
+table td {
+    text-align: center;
+}
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-headset bg-blue"></i>
+									<div class="d-inline">
+										<h5>Agent's Campaign</h5>
+										<span>1913 Agent's Campaign</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">1913 Campaign</li>
+										<li class="breadcrumb-item active" aria-current="page">Agents Campaign</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                    <h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auot refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>    
+                      
+                      <div class="row">
+                      <div class="col-md-12 mt-2">
+                      <div class="card">
+                         <div class="card-block">  
+                         <div class="page-header-title" >
+                         		<h4 style="margin: 0;font-weight: bold;" class="text-center"><span th:text="${agent_name}"></span>' s Campaign</h4>
+								<div class="mt-2 d-flex justify-content-between align-items-center">
+								    <h5 style="margin: 0; font-weight: bold; font-style: italic;">Campaign List</h5>
+								    <button type="button" class="btn btn-primary" id="refresh"><i class="ik ik-refresh-ccw"></i>Refresh</button>
+								</div>
+							<hr>
+						   </div>              	
+                      		<div>
+                      		<table id="Agenttask" class="table table-striped table-bordered table-hover dataTable" role="grid" style="width:99%;">
+                                                <thead class="thead-dark">
+	                                                <tr role="row">
+														<th class="text-center no-sort">S.No</th>
+														<th class="text-center" >Category</th>
+														<th class="text-center" >CampaignName</th>
+														<th class="text-center">Calls Assigned</th>
+														<th class="text-center">Calls Pending</th>
+														<th class="text-center">Calls Completed</th>
+														<th class="text-center">Follow ups</th>
+														<th class="text-center " >Start Calls</th>
+														<th class="text-center " >Further Calls</th>
+													</tr>
+                                                </thead>
+                                               <tbody>
+												    
+												    <tr th:each="agentsCampaign, iterStat : ${agentsCampaigns}">
+											            <td th:text="${iterStat.index + 1}" class="text-center"></td> <!-- Serial number -->
+											            <td th:text="${agentsCampaign['category_name']}" class="text-center"></td> <!-- Category name -->
+											            <td th:text="${agentsCampaign['campaign_name']}" class="text-center"></td> <!-- Campaign name -->
+											            <td th:text="${agentsCampaign['calls_assigned']}" class="text-center"></td>
+											            <td th:text="${agentsCampaign['pending_count']}" class="text-center"></td>
+											            <td th:text="${agentsCampaign['complete_count']}" class="text-center"></td>
+											            <td th:text="${agentsCampaign['followup_count']}" class="text-center"></td>											            
+											            <td class="text-center">
+											                <!-- Add your action button -->
+											                <button type="button" class="btn btn-primary" 
+											               	th:onclick="'viewCampaignDetails(' + ${agentsCampaign['campaign_id']} + ',' + ${agentsCampaign['calls_per_agent']} + ',' + ${agentsCampaign['agent_id']} + ')'">
+											                    view
+											                </button>
+											            </td>
+											            <td class="text-center">
+											            	<button type="button" class="btn btn-info" 
+												               th:onclick="'PendingCampaignDetails(' + ${agentsCampaign['campaign_id']} + ',' + ${agentsCampaign['calls_per_agent']} + ',' + ${agentsCampaign['agent_id']} + ')'">
+												                view
+												             </button>
+											            </td>
+											        </tr>
+												    
+												</tbody>
+
+                                                <tfoot class="thead-dark">
+	                                               <tr role="row">
+														<th class="text-center no-sort">S.No</th>
+														<th class="text-center" >Category</th>
+														<th class="text-center" >CampaignName</th>
+														<th class="text-center">Calls Assigned</th>
+														<th class="text-center">Calls Pending</th>
+														<th class="text-center">Calls Completed</th>
+														<th class="text-center">Follow ups</th>
+														<th class="text-center " >Start Calls</th>
+														<th class="text-center " >Further Calls</th>
+													</tr> 
+                                                </tfoot>
+                                            </table> 
+                                            </div>
+                      		</div>
+                      	</div>
+                      </div>
+                    	
+                    	<div class="col-md-12" id="tablesforcalls" style="display: none;">
+							<div class="card">							
+									<div class="card-block">
+									<div class="page-header-title" >
+									       <h5 style="margin: 0;font-weight: bold;"><span id="campaign-name-display" style="font-weight: bold;color:blue; margin-right: 5px;"></span>- Calls List</h5><hr>
+						  			 </div>
+                                    <div>
+                                        <table id="AgentDatatable" class="table  table-bordered table-hover  dataTable" role="grid">
+                                            <thead class="thead-dark">
+                                                <tr role="row">
+                                                    <th >S.No</th>                                                  
+                                                    <th class="custom-width3">ID</th>
+                                                    <th class="text-center">Name</th>
+                                                    <th class="text-center">Address</th>
+                                                    <th class="text-center">Balance Amount</th>
+                                                    <th class="text-center">Mobile number</th>
+                                                    <th class="text-center">ViewDetails</th>
+                                                    <th class="text-center custom-width1">Action</th>
+                                                    <th class="text-center custom-width2">Remarks</th>
+                                                    <th class="text-center">Send Message</th>                                                    
+                                                    <th class="text-center">Status</th>                                                                                                                                                    
+                                                </tr>                                             
+                                            </thead>
+                                             <tbody>
+                                             
+										    </tbody>
+                                            <tfoot class="thead-dark">
+                                                <tr role="row">
+                                                    <th >S.No</th>                                                  
+                                                    <th class="custom-width3">ID</th>
+                                                    <th class="text-center">Name</th>
+                                                    <th class="text-center">Address</th>
+                                                    <th class="text-center">Balance Amount</th>
+                                                    <th class="text-center">Mobile number</th>
+                                                    <th class="text-center">ViewDetails</th>
+                                                     <th class="text-center custom-width1">Action</th>
+                                                    <th class="text-center custom-width2">Remarks</th>
+                                                    <th class="text-center">Send Message</th>                                                    
+                                                    <th class="text-center"> Status</th>                                              
+                                                </tr>                                               
+                                            </tfoot>
+                                        </table>
+                                    </div>
+                                    
+                                    
+                                </div>
+                                
+							</div>
+						</div>
+						
+						
+						<div class="col-md-12" id="tablesforpendingcalls" style="display: none;">
+							<div class="card">							
+									<div class="card-block">
+									<div class="page-header-title" >
+									       <h5 style="margin: 0;font-weight: bold;"><span id="campaign-names-display" style="font-weight: bold;color:blue; margin-right: 5px;"></span>- Further Calls List</h5><hr>
+						   			</div>
+                                    <div>
+                                        <table id="Pendingtasktable" class="table table-bordered table-hover dataTable" role="grid">
+                                            <thead class="thead-dark">
+                                                <tr role="row">
+                                                    <th>S.No</th>                                                  
+                                                    <th class="custom-width3">ID</th>
+                                                    <th class="text-center">Name</th>
+                                                    <th class="text-center">Address</th>
+                                                    <th class="text-center">Balance Amount</th>
+                                                    <th class="text-center">Mobile number</th>
+                                                    <th class="text-center">ViewDetails</th>
+                                                    <th class="text-center custom-width1">Action</th>
+                                                    <th class="text-center custom-width2">Remarks</th> 
+                                                    <th class="text-center">Send Message</th>
+                                                    <th class="text-center">Status</th>                                                                                                                                                    
+                                                </tr>                                             
+                                            </thead>
+                                             <tbody>
+                                             
+										    </tbody>
+                                            <tfoot class="thead-dark">
+                                                <tr role="row">
+                                                    <th>S.No</th>                                                  
+                                                    <th class="custom-width3">ID</th>
+                                                    <th class="text-center">Name</th>
+                                                    <th class="text-center">Address</th>
+                                                    <th class="text-center">Balance Amount</th>
+                                                    <th class="text-center">Mobile number</th>
+                                                    <th class="text-center">ViewDetails</th>
+                                                     <th class="text-center custom-width1">Action</th>
+                                                    <th class="text-center custom-width2">Remarks</th> 
+                                                    <th class="text-center">Send Message</th> 
+                                                    <th class="text-center"> Status</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 src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        
+        <script>
+        $(document).ready(function() {
+
+        	var buttons = [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary'
+                }
+                
+            ];
+            
+            
+            $('#Agenttask').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    {targets: 'no-sort', orderable: false}
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+                ],
+                scrollY: '30vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: buttons,
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: true,
+                select: false,
+                processing: false,
+            });
+            
+            
+        }); 
+        
+        document.getElementById("refresh").addEventListener("click", function() {
+            location.reload(); // Reloads the current page
+        });
+        
+        
+        function viewCampaignDetails(campaignId, callsPerAgent, agentId) {
+            console.log('Calling viewCampaignDetails with:', {
+                callsPerAgent: callsPerAgent,
+                campaignId: campaignId, // this is 24, constant
+                agentId: agentId // this will change
+            });
+            
+            $.ajax({
+	            url: `/gcc/api/campaign/getCampaignDetailsbyId?campaign_id=${campaignId}`,
+	            type: 'GET',
+	            success: function (response) {
+					console.log(response);
+	                if (response) {
+	                    // Populate modal fields with data
+	                    //$('#campaign_id').val(response.campaign_id);
+	                    $('#campaign_names').val(response.campaign_name); // Assuming the key in the response is 'campaign_name'
+	                 // Display the campaign name near the h5 element
+	                    $('#campaign-name-display').text(response.campaign_name); // Add text dynamically to the element
+
+	                } else {
+	                	console.error('Error fetching campaign details:', error);
+	                }
+	            },
+	            error: function (xhr, status, error) {
+	                console.error('Error fetching campaign details:', error);
+	                alert('An error occurred while fetching campaign details.');
+	            }
+	        });
+            
+         // Get the card element by its ID (e.g., 'tablesforcalls')
+            var cardElement = document.getElementById('tablesforcalls');
+
+            // Toggle the display property based on current state
+            if (cardElement.style.display === 'block') {
+                cardElement.style.display = 'none'; // Hide the card if it's currently displayed
+            } else {
+                cardElement.style.display = 'block'; // Show the card if it's hidden
+            }
+            
+            $.ajax({					
+                url: '/gcc/api/campaign/startcampaign?campaign_id=' + campaignId + '&calls_per_agent=' + callsPerAgent, // URL to your Spring Boot controller
+                type: 'GET', // GET request
+                contentType: 'application/json',
+                success: function(response) {
+                    console.log('Campaign started successfully:', response); 
+                    
+                    // We are focusing on matching the agent_id since campaign_id is constant (24)
+                    let dataIds = [];
+                    response.forEach(function(item) {
+                        console.log('Checking agent_id:', item.agent_id, 'against passed agent_id:', agentId);
+                        
+                        if (item.agent_id === agentId) {
+                            dataIds = item.data_ids; // Get the corresponding data_ids
+                            console.log('Match found. Data IDs:', dataIds);
+                        }
+                    });
+
+                    if (dataIds.length > 0) {
+                        console.log('Data IDs for Agent ID ' + agentId + ':', dataIds);
+                        
+                        // Fetch the data for the matched data IDs
+                        $.ajax({
+                            url: '/gcc/api/agents/getdataByIds?ids=' + dataIds.join(','), // dataIds is the array [6, 7]
+                            type: 'GET',
+                            contentType: 'application/json',
+                            success: function(response) {
+                                console.log('Data retrieved successfully:', response);
+                                
+                                // Initialize DataTable if not already done
+                                let table = $('#AgentDatatable').DataTable();
+                                
+                                // Clear existing rows in the table
+                                table.clear();
+                                
+                                // Process and append the new data to the DataTable
+                                let rows = [];
+                                response.forEach(function(item, index) {
+                                    let row = [
+                                        index + 1,  // S.No
+                                        item.id,    // ID
+                                        item.name,  // Name
+                                        item.address,  // Address
+                                        item.dues,     // Dues
+                                        item.cellnumber,  // Mobile Number
+                                                        
+                                        
+                                        `<div class="text-center">
+                                        <button class="btn btn-primary" onclick="ViewDetails('${item.viewdetails}')">View</button>
+                                    	</div>`,
+                                        
+                                        // Dropdown for Action
+                                         `<div class="text-center">
+                                        <select class="form-control action-dropdown" name="action" data-index="${index}" ${item.call_status && item.call_status !== 'NONE' ? 'disabled' : ''}>
+								                <option value="NONE" ${item.call_status === "NONE" ? "selected" : ""}>Call Status</option>
+								                <option value="INFORMATION_GIVEN" ${item.call_status === "INFORMATION_GIVEN" ? "selected" : ""}>INFORMATION GIVEN</option>
+								                <option value="UNATTENDED" ${item.call_status === "UNATTENDED" ? "selected" : ""}>UNATTENDED</option>
+								                <option value="CALL_BACK_LATER" ${item.call_status === "CALL_BACK_LATER" ? "selected" : ""}>CALL BACK LATER</option>
+								                <option value="SWITCH_OFF" ${item.call_status === "SWITCH_OFF" ? "selected" : ""}>SWITCH OFF</option>
+								                <option value="WRONG_NUMBER" ${item.call_status === "WRONG_NUMBER" ? "selected" : ""}>WRONG NUMBER</option>
+								            </select>
+								        </div>`,
+                                        
+									     // Textarea for Remarks (populate saved remarks)
+									        `<div class="text-center">
+									        <textarea class="form-control" name="remarks" ${item.call_status && item.call_status !== 'NONE' ? 'disabled' : ''}>${item.remarks ? item.remarks : ""}</textarea>
+									        </div>`,
+									        								        
+									     // WhatsApp Message Button
+						                    `<div class="text-center">
+						                        <button class="btn btn-success" onclick="sendWhatsAppMessage('${item.cellnumber}', '${item.id}', '${item.viewdetails}')">Send</button>
+						                    </div>`,
+                                        
+                                        // Centered Button for Submit Action (Initially disabled)
+                                        `<div class="text-center">
+                                            <button class="btn btn-primary submit-button" id="submit-btn-${index}" disabled onclick="submitAction(${item.data_id}, ${index}, ${agentId},${campaignId})">${item.call_status && item.call_status !== 'NONE' ? 'Submit' : 'Submit'}</button>
+                                        </div>`
+                                    ];
+                                    
+                                    rows.push(row);
+                                });
+                                
+                                // Append the rows to your table
+                                $('#AgentDatatable').DataTable().rows.add(rows).draw();
+                             
+                                $('.action-dropdown').on('change', function () {
+                                    let selectedValue = $(this).val(); // Dropdown value
+                                    let index = $(this).data('index'); // Index of the row
+                                    let button = $('#submit-btn-' + index); // The submit button
+                                    let remarksField = $('textarea[name="remarks"]').eq(index); // The remarks textarea
+
+                                    // Function to check if the button should be enabled
+                                    function toggleButtonState() {
+                                        let remarksValue = remarksField.val().trim(); // Trimmed value of remarks
+                                        if (selectedValue !== 'NONE' && remarksValue !== '') {
+                                            button.prop('disabled', false);
+                                            button.text('Submit');
+                                            button.removeClass('btn-primary').addClass('btn-primary');
+                                        } else {
+                                            button.prop('disabled', true);
+                                            button.text('Submit');
+                                            button.removeClass('btn-primary').addClass('btn-primary');
+                                        }
+                                    }
+
+                                    // Toggle button state based on the current conditions
+                                    toggleButtonState();
+
+                                    // Add an event listener to the remarks field to recheck conditions
+                                    remarksField.on('input', function () {
+                                        toggleButtonState();
+                                    });
+                                });
+
+                                
+                               
+                                
+                            },
+                            error: function(xhr, status, error) {
+                                console.error('Error retrieving data:', error);
+                            }
+                        });
+                    } 
+                    else {
+                        console.log('No matching data found for Agent ID ' + agentId);
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error starting campaign:', error);
+                }
+            });
+            
+            initializeAgentsDataTable();
+            // Show the #tablesforcalls div
+            //document.getElementById('tablesforcalls').style.display = 'block';
+        }
+        
+       
+
+        function submitAction(dataId, index,agentId,campaignId) {
+            // Get selected dropdown value and textarea value
+            let action = $('.action-dropdown[data-index="' + index + '"]').val(); // Ensure you're getting the correct value
+            let remarks = $(`#AgentDatatable tbody textarea[name="remarks"]`).eq(index).val() || "N/A";
+
+            
+            // Make an AJAX POST request to submit the data
+            $.ajax({
+                url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
+                type: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify({
+                    data_id: dataId,
+                    agent_id: agentId,
+                    campaign_id:campaignId,
+                    call_status: action,  // Use "call_status" as the key to match the controller parameter name
+                    remarks: remarks
+                }),
+                success: function(response) {
+                    console.log('Data Updated successfully:', response);                   
+                    // Update the button and form fields after successful submission                    
+                    Swal.fire({
+                                title: 'Success!',
+                                text: 'Data Updated successfully!',
+                                icon: 'success',
+                                timer: 2000,
+                                showConfirmButton: false
+                            })
+                    
+                    let button = $(`#submit-btn-${index}`);
+                    button.text('Submitted').removeClass('btn-primary').addClass('btn-primary').prop('disabled', true);
+                    $(`#AgentDatatable tbody .action-dropdown[data-index="${index}"]`).prop('disabled', true);
+                    $(`#AgentDatatable tbody textarea[name="remarks"]`).eq(index).prop('disabled', true);
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error submitting data:', error);
+                }
+            });
+        }
+        
+        function PendingCampaignDetails(campaignId, callsPerAgent, agentId) {
+            console.log('Calling PendingCampaignDetails with:', {
+                callsPerAgent: callsPerAgent,
+                campaignId: campaignId, 
+                agentId: agentId
+            });
+            
+            $.ajax({
+	            url: `/gcc/api/campaign/getCampaignDetailsbyId?campaign_id=${campaignId}`,
+	            type: 'GET',
+	            success: function (response) {
+					console.log(response);
+	                if (response) {
+	                    // Populate modal fields with data
+	                    //$('#campaign_id').val(response.campaign_id);
+	                    $('#campaign_names').val(response.campaign_name); // Assuming the key in the response is 'campaign_name'
+	                 // Display the campaign name near the h5 element
+	                    $('#campaign-names-display').text(response.campaign_name); // Add text dynamically to the element
+
+	                } else {
+	                	console.error('Error fetching campaign details:', error);
+	                }
+	            },
+	            error: function (xhr, status, error) {
+	                console.error('Error fetching campaign details:', error);
+	                alert('An error occurred while fetching campaign details.');
+	            }
+	        });
+            
+         // Get the card element by its ID (e.g., 'tablesforcalls')
+            var cardElement = document.getElementById('tablesforpendingcalls');
+
+            // Toggle the display property based on current state
+            if (cardElement.style.display === 'block') {
+                cardElement.style.display = 'none'; // Hide the card if it's currently displayed
+            } else {
+                cardElement.style.display = 'block'; // Show the card if it's hidden
+            }
+            
+            $.ajax({					
+                url: '/gcc/api/campaign/startcampaign?campaign_id=' + campaignId + '&calls_per_agent=' + callsPerAgent, // URL to your Spring Boot controller
+                type: 'GET', // GET request
+                contentType: 'application/json',
+                success: function(response) {
+                    console.log('Campaign started successfully:', response); 
+                    
+                    // We are focusing on matching the agent_id since campaign_id is constant (24)
+                    let dataIds = [];
+                    response.forEach(function(item) {
+                        console.log('Checking agent_id:', item.agent_id, 'against passed agent_id:', agentId);
+                        
+                        if (item.agent_id === agentId) {
+                            dataIds = item.data_ids; // Get the corresponding data_ids
+                            console.log('Match found. Data IDs:', dataIds);
+                        }
+                    });
+
+                    if (dataIds.length > 0) {
+                        console.log('Data IDs for Agent ID ' + agentId + ':', dataIds);
+                        
+                        // Fetch the data for the matched data IDs
+                        $.ajax({
+                            url: '/gcc/api/agents/getPendingDataByIds?ids=' + dataIds.join(','), // dataIds is the array [6, 7]
+                            type: 'GET',
+                            contentType: 'application/json',
+                            success: function(response) {
+                                console.log('Data retrieved successfully:', response);
+                                
+                                // Initialize DataTable if not already done
+                                let table = $('#Pendingtasktable').DataTable();
+                                
+                                // Clear existing rows in the table
+                                table.clear();
+                                
+                                // Process and append the new data to the DataTable
+                                let rows = [];
+                                response.forEach(function(item, index) {
+                                    let row = [
+                                        index + 1,  // S.No
+                                        item.id,    // ID
+                                        item.name,  // Name
+                                        item.address,  // Address
+                                        item.dues,     // Dues
+                                        item.cellnumber,  // Mobile Number
+                                        
+                                        `<div class="text-center">
+                                        <button class="btn btn-primary" onclick="ViewDetails('${item.viewdetails}')">View</button>
+                                    	</div>`,
+                                        
+                                        // Dropdown for Action
+                                        `<div class="text-center">
+					                        <select class="form-control action-dropdown2" name="action" data-index="${index}">
+					                            <option value="NONE" ${item.call_status === "NONE" ? "selected" : ""}>Call Status</option>
+					                            <option value="INFORMATION_GIVEN" ${item.call_status === "INFORMATION_GIVEN" ? "selected" : ""}>INFORMATION GIVEN</option>
+					                            <option value="UNATTENDED" ${item.call_status === "UNATTENDED" ? "selected" : ""}>UNATTENDED</option>
+					                            <option value="CALL_BACK_LATER" ${item.call_status === "CALL_BACK_LATER" ? "selected" : ""}>CALL BACK LATER</option>
+					                            <option value="SWITCH_OFF" ${item.call_status === "SWITCH_OFF" ? "selected" : ""}>SWITCH OFF</option>
+					                            <option value="WRONG_NUMBER" ${item.call_status === "WRONG_NUMBER" ? "selected" : ""}>WRONG NUMBER</option>
+					                        </select>
+					                    </div>`,
+                                        
+									     // Textarea for Remarks (populate saved remarks)
+									        `<div class="text-center">
+					                        <textarea class="form-control" name="remarks">${item.remarks ? item.remarks : ""}</textarea>
+					                    </div>`,
+					                    
+					                    
+					                 // WhatsApp Message Button
+					                    `<div class="text-center">
+					                        <button class="btn btn-success" onclick="sendWhatsAppMessage('${item.cellnumber}', '${item.id}', '${item.viewdetails}')">Send</button>
+					                    </div>`,
+					                                        
+					                  // Centered Button for Submit Action (Initially disabled)
+					                    `<div class="text-center">
+					                    <button class="btn btn-primary submit-button" id="submitt-btn-${index}" disabled onclick="editAction(${item.data_id}, ${index}, ${agentId},${campaignId})">${item.call_status && item.call_status !== 'NONE' ? 'Update' : 'Update'}</button>
+					                    
+					                </div>`
+                                    ];
+                                    
+                                    rows.push(row);
+                                });
+                                
+                                // Append the rows to your table
+                                $('#Pendingtasktable').DataTable().rows.add(rows).draw();
+                             
+                                
+                             // Add event listener to each dropdown to enable/disable the button
+                                 $('.action-dropdown2').on('change', function() {
+                                    let selectedValue = $(this).val();
+                                    let index = $(this).data('index');
+                                    let button = $('#submitt-btn-' + index);
+                                    
+                                    
+                                    // Enable the button if a valid option is selected, otherwise keep it disabled
+                                    if (selectedValue === 'NONE') {
+                                        button.prop('disabled', true);
+                                        button.text('Update');
+                                        button.removeClass('btn-primary').addClass('btn-primary');
+                                    } else {
+                                        button.prop('disabled', false);
+                                        button.text('Update');
+                                        button.removeClass('btn-primary').addClass('btn-primary');
+                                    }
+                                }); 
+                             
+                                /* $('.action-dropdown2').on('change', function () {
+                                    let selectedValue = $(this).val(); // Dropdown value
+                                    let index = $(this).data('index'); // Index of the row
+                                    let button = $('#submit-btn-' + index); // The submit button
+                                    let remarksField = $('textarea[name="remarks"]').eq(index); // The remarks textarea
+
+                                    // Function to check if the button should be enabled
+                                    function toggleButtonState() {
+                                        let remarksValue = remarksField.val().trim(); // Trimmed value of remarks
+                                        if (selectedValue !== 'NONE' && remarksValue !== '') {
+                                            button.prop('disabled', false);
+                                            button.text('Update');
+                                            button.removeClass('btn-primary').addClass('btn-primary');
+                                        } else {
+                                            button.prop('disabled', true);
+                                            button.text('Update');
+                                            button.removeClass('btn-primary').addClass('btn-primary');
+                                        }
+                                    }
+
+                                    // Toggle button state based on the current conditions
+                                    toggleButtonState();
+
+                                    // Add an event listener to the remarks field to recheck conditions
+                                    remarksField.on('input', function () {
+                                        toggleButtonState();
+                                    });
+                                }); */
+
+                                
+                            },
+                            error: function(xhr, status, error) {
+                                console.error('Error retrieving data:', error);
+                            }
+                        });
+                    }
+                    else {
+                        console.log('No matching data found for Agent ID ' + agentId);
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error starting campaign:', error);
+                }
+            });
+            
+            initializeAgentsDataTable();
+            // Show the #tablesforcalls div
+            //document.getElementById('tablesforpendingcalls').style.display = 'block';
+        }
+        
+        function editAction(dataId, index,agentId,campaignId) {
+            // Get selected dropdown value and textarea value
+            let action = $('.action-dropdown2[data-index="' + index + '"]').val(); // Ensure you're getting the correct value
+            let remarks = $(`#Pendingtasktable tbody textarea[name="remarks"]`).eq(index).val();
+            
+            // Make an AJAX POST request to submit the data
+            $.ajax({
+                url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
+                type: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify({
+                    data_id: dataId,
+                    agent_id: agentId,
+                    campaign_id:campaignId,
+                    call_status: action,  // Use "call_status" as the key to match the controller parameter name
+                    remarks: remarks
+                }),
+                success: function(response) {
+                    console.log('Data Updated successfully:', response);
+                    
+                    // Update the button and form fields after successful submission
+                    
+                    Swal.fire({
+                                title: 'Success!',
+                                text: 'Data Updated successfully!',
+                                icon: 'success',
+                                timer: 2000,
+                                showConfirmButton: false
+                            })
+                    
+                    
+                    
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error submitting data:', error);
+                }
+            });
+        }
+        
+        
+        function initializeAgentsDataTable() {
+            if (!$.fn.DataTable.isDataTable('#AgentDatatable')) {
+                $('#AgentDatatable').DataTable({
+                    dom: 'Bftip',
+                    columnDefs: [{ targets: 'no-sort', orderable: false }],
+                    lengthMenu: [
+                        [50, 100, 200, 500, -1],
+                        ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+                    ],
+                    scrollY: '60vh',
+                    fixedColumns: { left: 1, right: 1 },
+                    buttons: [
+                        { extend: 'pageLength', className: 'btn btn-warning' },
+                        { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+                        { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+                        { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+                        { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
+                    ],
+                    fixedHeader: true,
+                    autoWidth: true,
+                    responsive: true,
+                    searching: true,
+                    select: false,
+                    processing: false
+                });
+            }
+            
+         // Initialize the Pendingtasktable if it is not already initialized
+            if (!$.fn.DataTable.isDataTable('#Pendingtasktable')) {
+                $('#Pendingtasktable').DataTable({
+                    dom: 'Bftip',
+                    columnDefs: [{ targets: 'no-sort', orderable: false }],
+                    lengthMenu: [
+                        [50, 100, 200, 500, -1],
+                        ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+                    ],
+                    scrollY: '60vh',
+                    fixedColumns: { left: 1, right: 1 },
+                    buttons: [
+                        { extend: 'pageLength', className: 'btn btn-warning' },
+                        { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+                        { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+                        { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+                        { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
+                    ],
+                    fixedHeader: true,
+                    autoWidth: true,
+                    responsive: true,
+                    searching: true,
+                    select: false,
+                    processing: false
+                });
+            }
+        }
+        //view url for specific id details
+        function ViewDetails(url) {
+    		if(url)
+                {
+    				window.open( url,'_blank');
+    			}
+    		else
+    		{	 Swal.fire({
+           		 title: 'Error!',
+            	 text: 'NO Data Available!',
+             	 icon: 'error',
+            	 timer: 2000,
+            	 showConfirmButton: false
+      			  })
+    			}
+            }
+        
+        
+      	//whatsapp message function
+        function sendWhatsAppMessage(cellnumber, billNo, viewdetailsUrl) {
+            // Build the dynamic WhatsApp message URL
+        let msgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${cellnumber}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Greetings+from+Greater+Chennai+Corporation%2C%0A%0AProperty+Bill+No+${billNo}%0A%0ASkip+the+hassle+and+pay+your+property+tax+easily+on+WhatsApp.+It%E2%80%99s+quick%2C+stress-free%2C+and+just+a+few+taps+away%21+%F0%9F%93%B2%0A%0ASimply+click+the+button+below+to+view+your+payment+details+and+complete+your+payment+today%21+%F0%9F%92%B8&media_url=https%3A%2F%2Fres.cloudinary.com%2Fdpub5muar%2Fimage%2Fupload%2Fv1727080053%2Fang8tqjqdcxuqoeiuvjl.jpg&isTemplate=true&cta_button_url=${encodeURIComponent(viewdetailsUrl)}`;
+
+            // Send the WhatsApp message
+            $.ajax({
+                url: '/gcc/api/whatsapp/send-whatsapp-message', // Replace with your service path
+                type: 'POST',
+                data: { msgUrl: msgUrl },
+                success: function(response) {
+                    console.log('WhatsApp message sent successfully', response);
+                    //alert('WhatsApp message sent!');
+                    Swal.fire({
+                                title: 'Success!',
+                                text: 'Message sent successfully!',
+                                icon: 'success',
+                                timer: 2000,
+                                showConfirmButton: false
+                            })
+                    
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error sending WhatsApp message:', error);
+                    //alert('Failed to send WhatsApp message.');
+                    
+                    Swal.fire({
+                                title: 'Error!',
+                                text: 'Message Not sent!',
+                                icon: 'error',
+                                timer: 2000,
+                                showConfirmButton: false
+                            })
+                }
+            });
+        }
+        
+        
+        </script>
+        
+        
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/callcenter/assignagents.html b/src/main/resources/templates/modules/callcenter/assignagents.html
new file mode 100644
index 0000000..720fce7
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenter/assignagents.html
@@ -0,0 +1,692 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+ <style>
+         
+    </style>
+</head>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <div class="main-content">
+                <div class="container-fluid">
+                    <div class="page-header">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fas fa-user-graduate bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>Assign Agents</h5>
+                                        <span>1913 Assign agents for Campaign</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <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">1913 Campaign</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Assign Agents</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                 <hr>
+                 
+
+                  
+					  <!-- Card for Agent Assignment -->
+					  <div class="card">
+					    <div class="card-header">
+					      <h3>Agent Assign</h3>
+					    </div>
+					    <div class="card-body">
+					    
+					      <!-- Dropdown for Category -->
+					      <div class="row">
+						      <div class="form-group col-md-6 col-sm-12">
+						        <label for="category">Category</label>
+						        <select id="category" class="form-control">
+						          
+						        </select>
+						      </div>
+					
+						      <!-- Dropdown for Campaigns -->
+						      <div class="form-group col-md-6 col-sm-12">
+						        <label for="campaign">Campaign</label>
+						        <select id="campaign" class="form-control" disabled>						          
+						        </select>
+						      </div>
+						      
+						      
+						      <div class="form-group col-12 d-flex justify-content-center align-items-center">
+							        <!-- Centered button between the dropdowns -->
+							        <button id="searchBtn" class="btn btn-primary">Search</button>
+							        <button id="resetBtn" class="btn btn-secondary ml-3">Reset</button>
+							   </div>
+					     </div>
+					     
+					    </div>
+					  </div>
+					
+					  <!-- Card for Campaign Details -->
+					  <div class="card mt-3" id="campaignDetailsCard" style="display:none;">
+						    <div class="card-header">
+						      <h3>Campaign Details</h3>
+						    </div>
+						    
+						  				    
+					    <div class="card-body">
+					    
+						    <table class="table table-bordered">
+							  <tbody>
+							    <tr>
+							      <th >Name</th>
+							      <td class="fw-semibold" id="campaignName" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							    <tr>
+							      <th>From Date</th>
+							      <td class="fw-semibold" id="campaignStartdate" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							    <tr>
+							      <th>To Date</th>
+							      <td class="fw-semibold" id="campaignEnddate" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							    <tr>
+							      <th>Agents Assigned</th>
+							      <td class="fw-semibold" id="campaignAgents" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							    <tr>
+							      <th>Calls Assigned (per person)</th>
+							      <td class="fw-semibold" id="campaignCalls" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							    <tr>
+							      <th>Description</th>
+							      <td class="fw-semibold" id="campaignDesc" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							  </tbody>
+							</table>
+					    
+					    </div>
+					 </div>
+					  
+					  
+					  <div class="row" id="editagentCard" style="display:none;">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+                                    <div class="page-header-title" >
+										<h5 style="margin: 0;font-weight: bold;">Selected Agent List</h5><hr>
+								   </div> 
+										<table id="editagentsDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+											    <thead class="thead-dark">
+											        <tr role="row">
+											            <th class="text-center no-sort" width="1%">S.No</th>
+											            <th class="text-center">Agent Id</th>
+											            <th class="text-center">Name of Agents</th>
+											            <th class="text-center">Select/Not Selected</th>
+											        </tr>
+											    </thead>
+											    <tbody id="editagentList" style="text-align:center;">
+											        <!-- Rows will be dynamically inserted here -->
+											    </tbody>
+											</table>
+                                            
+                                        </div>
+                                      
+                                    </div>
+                                     
+                                </div>
+                            </div>
+					  
+					  
+					  
+					  <div class="row" id="agentCard" style="display:none;">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+                                    <div class="page-header-title" >
+										<h5 style="margin: 0;font-weight: bold;">Overall Agent List</h5><hr>
+								   </div> 
+	                                          <div class=" d-flex justify-content-end mb-2">
+	                                          
+	                                          		<button class="btn btn-primary" id="selectedCount"><i class="ik ik-user-plus f-16 mr-2"></i>0</button>
+												    <!-- <button class="btn btn-warning ml-2" id="editAgentsBtn"><i class="ik ik-edit f-16 mr-2"></i>Edit</button> -->
+												    
+												  </div>
+												  												  
+											<table id="agentsDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+											    <thead class="thead-dark">
+											        <tr role="row">
+											            <th class="text-center no-sort" width="1%">S.No</th>
+											            <th class="text-center">Agent Id</th>
+											            <th class="text-center">Name of Agents</th>
+											            <th class="text-center"><input type="checkbox" id="selectAllAgents"> Select All</th>
+											        </tr>
+											    </thead>
+											    <tbody id="agentList" style="text-align:center;">
+											        <!-- Rows will be dynamically inserted here -->
+											    </tbody>
+											</table>
+                                              <!-- Center the Submit button -->
+												    <div class="text-center">
+												      <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
+												    </div>
+                                            
+                                        </div>
+                                      
+                                    </div>
+                                     
+                                </div>
+                            </div>
+                            
+                            
+                            
+                        
+					
+					  
+				
+					  
+					</div>
+
+
+
+             
+        </div>
+   
+     <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+      </div>
+</div>
+
+   
+    <!-- Include jQuery and Bootstrap JavaScript -->
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <!--  sweet alert -->
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+   <script type="text/javascript">
+
+    // Fetch category dropdown on page load
+    fetchCategoryDropdown();
+
+	    // Handle category change event to fetch campaigns
+	    $(document).on('change', '#category', function() {
+	    let selectedCategoryId = $(this).val();
+	    if (selectedCategoryId != '0') {
+	        fetchCampaignDropdown(selectedCategoryId);
+	    } else {
+	        $('#campaign').empty().prop('disabled', true);
+	    }
+	});
+   
+
+
+$("#searchBtn").click(function () {
+	let selectedCampaignId = $('#campaign').val();
+	
+	
+    if(selectedCampaignId == null || selectedCampaignId=='0'){
+    	 Swal.fire({
+             title: 'Info!',
+             text: 'Please Select Category and Campaign!',
+             icon: 'info',
+             timer: 2000,
+             //timerProgressBar: true,
+             showConfirmButton: false
+         })
+         hideCampaignAndAgentDetails();
+    }
+    else if (selectedCampaignId != '0') {
+        fetchCampaignDetails(selectedCampaignId);
+        checkCampaignInAssigned(selectedCampaignId);
+        
+     // Disable the category and campaign dropdowns after search
+        $('#category').prop('disabled', true);
+        $('#campaign').prop('disabled', true);
+    } 
+    else {
+    	
+        hideCampaignAndAgentDetails();
+        
+    }
+});
+
+
+
+//Approve button click event
+$("#submitBtn").click(function () {
+    handleSubmit();
+});
+
+$("#resetBtn").click(function () {
+    location.reload(); // Reloads the current page
+});
+
+
+// Initial binding for checkbox events
+bindCheckboxEvents();
+
+// Function to fetch category dropdown
+function fetchCategoryDropdown() {
+    $.ajax({
+        url: '/gcc/api/callcenter/admin/getcategory',
+        type: 'GET',
+        dataType: 'json'
+    })
+    .done(function (data) {
+        let categoryDropdown = $('#category');
+        categoryDropdown.empty();
+        categoryDropdown.append($('<option selected value="0"></option>').text('Select a category'));
+        $.each(data, function (index, category) {
+            categoryDropdown.append($('<option></option>').attr('value', category.category_id).text(category.category_name));
+        });
+    })
+    .fail(function (xhr, status, error) {
+        console.error('Error fetching category:', error);
+    });
+}
+
+// Function to fetch campaigns based on selected category
+function fetchCampaignDropdown(categoryId) {
+    $('#campaign').prop('disabled', false);
+    $.ajax({
+        url: '/gcc/api/callcenter/admin/getcampaignbycategory?id=' + categoryId,
+        type: 'GET',
+        dataType: 'json'
+    })
+    .done(function (data) {
+        let campaignDropdown = $('#campaign');
+        campaignDropdown.empty();
+        campaignDropdown.append($('<option selected value="0"></option>').text('Select a campaign'));
+        $.each(data, function (index, campaign) {
+            campaignDropdown.append($('<option></option>').attr('value', campaign.campaign_id).text(campaign.campaign_name));
+        });
+    })
+    .fail(function (xhr, status, error) {
+        console.error('Error fetching campaign:', error);
+    });
+}
+
+// Function to fetch campaign details
+function fetchCampaignDetails(campaignId) {
+    $.ajax({
+        url: '/gcc/api/callcenter/admin/getcampaignbyid?id=' + campaignId,
+        method: 'GET',
+        dataType: 'json',
+        success: function (response) {
+            if (response.length === 0) {
+                console.error("No campaign details found.");
+                return;
+            }
+
+            document.getElementById("campaignName").innerHTML = response[0].campaign_name;
+            document.getElementById("campaignStartdate").innerHTML = response[0].start_date;
+            document.getElementById("campaignEnddate").innerHTML = response[0].end_date;
+            document.getElementById("campaignAgents").innerHTML = response[0].no_of_agents;
+            document.getElementById("campaignCalls").innerHTML = response[0].calls_per_agent;
+            document.getElementById("campaignDesc").innerHTML = response[0].description;
+
+            // Show the campaign details card
+            document.getElementById('campaignDetailsCard').style.display = 'block';
+        },
+        error: function () {
+            console.error("An error occurred while fetching campaign details.");
+        }
+    });
+}
+
+// Function to check if campaign is already assigned and fetch agents
+function checkCampaignInAssigned(selectedCampaignId) {
+		
+    $.ajax({
+        url: '/gcc/api/callcenter/admin/getassignedcampaign?id=' + selectedCampaignId,
+        type: 'GET',
+        dataType: 'json',
+        success: function(response) {
+        	//console.log('checkCampaignInAssigned response:', response);
+            fetchAgentsForCampaign(selectedCampaignId); // Always fetch agents
+
+            if (response.length > 0) {
+                populateEditAgentList(response);
+                document.getElementById('editagentCard').style.display = 'block';
+                initializeEditAgentsDataTable();
+            }
+            else{
+            	document.getElementById('editagentCard').style.display = 'none';
+            }
+        },
+        error: function(xhr, status, error) {
+            console.error('Error fetching assigned agents:', error);
+        }
+    });
+}
+
+
+// Function to populate the edit agent list
+function populateEditAgentList(agents) {
+    let editagentList = $('#editagentList');
+    editagentList.empty();
+    
+    $.each(agents, function(index, agent) {
+    	 
+         
+    	let row = `
+    	    <tr data-assigned-id="${agent.assigned_id}">
+    	        <td>${index + 1}</td>
+    	        <td>${agent.agent_id}</td>
+    	        <td>${agent.agent_name}</td>
+    	        <td>
+    	            <button class="btn btn-warning" onclick="editagent(${agent.assigned_id})">Remove</button>
+    	        </td>            
+    	    </tr>
+    	`;
+        // Log the row HTML to debug
+       // console.log('Appending row:', row);
+        
+        editagentList.append(row);
+    });
+}
+
+function editagent(assignedId) {
+    
+        $.ajax({
+            url: '/gcc/api/callcenter/admin/deleteassignedbyid?id=' + assignedId,
+            type: 'GET',
+            dataType: 'json',
+            success: function(response) {
+            	$('tr[data-assigned-id="' + assignedId + '"]').remove();
+                Swal.fire({
+                    title: 'Success!',
+                    text: 'Agents have been removed!',
+                    icon: 'success',
+                    timer: 2000,
+                    //timerProgressBar: true,
+                    showConfirmButton: false
+                })
+            },
+            error: function(xhr, status, error) {
+                console.error('Error removing agents:', error);
+                reject(error); // Reject the promise in case of an error
+            }
+        });
+   
+}
+
+
+
+// Function to fetch agents for the selected campaign
+function fetchAgentsForCampaign(campaignId) {
+    $.ajax({
+        url: '/gcc/api/callcenter/admin/getagentsfortask?id=' +campaignId,
+        type: 'GET',
+        dataType: 'json',
+        success: function(response) {
+            let agentList = $('#agentList');
+            agentList.empty();
+
+            if (response.length > 0) {
+                $.each(response, function(index, agent) {
+                    let row = `
+                        <tr>
+                            <td>${index + 1}</td>
+                            <td>${agent.agent_id}</td>
+                            <td>${agent.agent_name}</td>
+                            <td><input type="checkbox" class="agentCheckbox" value="${agent.agent_id}"></td>
+                        </tr>
+                    `;
+                    agentList.append(row);
+                });
+
+                document.getElementById('agentCard').style.display = 'block';
+                initializeAgentsDataTable();
+            } else {
+                agentList.append('<tr><td colspan="4">No agents available</td></tr>');
+            }
+
+            bindCheckboxEvents(); // Rebind checkbox events after adding new checkboxes
+        },
+        error: function(xhr, status, error) {
+            console.error('Error fetching agents:', error);
+        }
+    });
+}
+
+// Function to hide campaign and agent details
+function hideCampaignAndAgentDetails() {
+    document.getElementById('campaignDetailsCard').style.display = 'none';
+    document.getElementById('agentCard').style.display = 'none';
+    document.getElementById('editagentCard').style.display = 'none';
+}
+
+// Function to bind checkbox events and handle "Select All" functionality
+function bindCheckboxEvents() {
+    $('#selectAllAgents').on('click', function() {
+        let campaignAgentsCount = parseInt($('#campaignAgents').text(), 10);
+        let totalCheckboxes = $('.agentCheckbox').length;
+
+        if ($(this).is(':checked')) {
+            if (campaignAgentsCount > totalCheckboxes) {
+                Swal.fire({
+                    title: 'Sorry!',
+                    text: 'You cannot select more checkboxes than available.',
+                    icon: 'error',
+                    timer: 2000
+                }).then(() => {
+                    $('#selectAllAgents').prop('checked', false);
+                });
+            } else {
+                let checkboxes = $('.agentCheckbox');
+                checkboxes.prop('checked', false);
+                for (let i = 0; i < campaignAgentsCount; i++) {
+                    if (checkboxes[i]) {
+                        $(checkboxes[i]).prop('checked', true);
+                    }
+                }
+            }
+        } else {
+            $('.agentCheckbox').prop('checked', false);
+        }
+
+        updateSelectedCount();
+    });
+
+    $(document).on('change', '.agentCheckbox', function () {
+        if ($('.agentCheckbox:checked').length === $('.agentCheckbox').length) {
+            $('#selectAllAgents').prop('checked', true);
+        } else {
+            $('#selectAllAgents').prop('checked', false);
+        }
+
+        updateSelectedCount();
+    });
+}
+
+// Function to update the selected count
+function updateSelectedCount() {
+    let selectedCount = $('.agentCheckbox:checked').length;
+    $('#selectedCount').html('<i class="ik ik-user-plus f-16 mr-2"></i>' + selectedCount);
+}
+
+// Function to handle form submission and assign agents
+function handleSubmit() {
+
+    let selectedCategoryId = $('#category').val();
+    let selectedCampaignId = $('#campaign').val();
+    let campaignAgentsCount = parseInt($('#campaignAgents').text(), 10); // Get the required agent count
+    let assignedAgentCount = $('#editagentList tr').length; // Count already assigned agents
+
+    // Ensure category and campaign are selected
+    if (selectedCategoryId == 0 || selectedCampaignId == 0) {
+        Swal.fire({
+            title: 'Info!',
+            text: 'Please select a category and campaign before proceeding.',
+            icon: 'info',
+            timer: 2000,
+            timerProgressBar: true
+        });
+        return;
+    }
+
+    let selectedAgentsCount = $(".agentCheckbox:checked").length; // Count of selected checkboxes
+
+    // Total agent count (new selections + already assigned)
+    let totalSelectedCount = selectedAgentsCount + assignedAgentCount;
+
+    // Validation: Check if total selected count matches the campaignAgentsCount
+    if (totalSelectedCount < campaignAgentsCount) {
+        Swal.fire({
+            title: 'Error!',
+            text: `You need to select ${campaignAgentsCount - totalSelectedCount} more agents to meet the required count.`,
+            icon: 'error',
+            timer: 3000,
+            timerProgressBar: true
+        });
+        return;
+    } else if (totalSelectedCount > campaignAgentsCount) {
+        Swal.fire({
+            title: 'Error!',
+            text: `You have selected more agents than allowed. Please reduce the number of selected agents.`,
+            icon: 'error',
+            timer: 3000,
+            timerProgressBar: true
+        });
+        return;
+    }
+
+    let requestData = [];
+    $(".agentCheckbox:checked").each(function () {
+        requestData.push({
+            categoryId: parseInt(selectedCategoryId),
+            campaignId: parseInt(selectedCampaignId),
+            agentId: parseInt($(this).val())
+        });
+    });
+
+    if (requestData.length === 0) {
+        Swal.fire({
+            title: 'Info!',
+            text: 'Please select at least one agent to assign.',
+            icon: 'info',
+            timer: 3000,
+            timerProgressBar: true
+        });
+        return;
+    }
+
+    // AJAX request to submit the data
+    $.ajax({
+        url: "/gcc/api/callcenter/admin/addagentsfortask",
+        type: "POST",
+        contentType: "application/json",
+        data: JSON.stringify(requestData),
+        success: function (response) {
+            Swal.fire({
+                title: 'Success!',
+                text: 'Agents have been successfully assigned!',
+                icon: 'success',
+                timer: 2000,
+                timerProgressBar: true,
+                showConfirmButton: false
+            }).then(() => {
+                location.reload(); // Reload after success
+            });
+        },
+        error: function (xhr, status, error) {
+            Swal.fire({
+                title: 'Error!',
+                text: 'There was an error while assigning agents.',
+                icon: 'error',
+                timer: 3000,
+                timerProgressBar: true
+            });
+        }
+    });
+}
+
+
+
+
+//Initialize the first table: agentsDatatable
+function initializeAgentsDataTable() {
+    if (!$.fn.DataTable.isDataTable('#agentsDatatable')) {
+        $('#agentsDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [{ targets: 'no-sort', orderable: false }],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+            ],
+            scrollY: '30vh',
+            fixedColumns: { left: 1, right: 1 },
+            buttons: [
+                { extend: 'pageLength', className: 'btn btn-warning' },
+                { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+                { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+                { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+                { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false
+        });
+    } else {
+        $('#agentsDatatable').DataTable().clear().draw();
+    }
+}
+
+// Initialize the second table: editagentsDatatable
+function initializeEditAgentsDataTable() {
+    if (!$.fn.DataTable.isDataTable('#editagentsDatatable')) {
+        $('#editagentsDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [{ targets: 'no-sort', orderable: false }],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+            ],
+            scrollY: '30vh',
+            fixedColumns: { left: 1, right: 1 },
+            buttons: [
+                { extend: 'pageLength', className: 'btn btn-warning' },
+                { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+                { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+                { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+                { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false
+        });
+    } else {
+        $('#editagentsDatatable').DataTable().clear().draw();
+    }
+}
+
+</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenter/attendancereport.html b/src/main/resources/templates/modules/callcenter/attendancereport.html
new file mode 100644
index 0000000..cc58f84
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenter/attendancereport.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+ <style>
+        
+</style>
+</head>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <div class="main-content">
+                <div class="container-fluid">
+                    <div class="page-header">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fa fa-list-alt bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>1913 Attendance Reports</h5>
+                                        <span>List of 1913 Agents Attendance</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <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" aria-current="page">1913 Attendance</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Attendance Report</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                 <hr>
+                 
+                 <div id="pageLoader"
+				    style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				    <div style="position: relative; top: 50%; transform: translateY(-50%);">
+				        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+				            <span class="sr-only">Loading...</span>
+				        </div>
+				        <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
+				    </div>
+				</div>
+                 
+				<div class ="card-body">
+					<form th:action="@{/gcc/callcenter/attendancereport}" method="get" onsubmit="showLoader()">
+						<div class="row">
+						
+							<div class="col-sm-6 mb-3">
+								<label for="fromDate"
+									style="font-size: medium;; margin-bottom: 0px;">From
+									Date:</label> <input type="date" id="fromDate" name="fromDate"
+									th:value="${fromDate}" class="form-control" required>
+							</div>
+							<div class="col-sm-6  mb-3">
+								<label for="toDate"
+									style="font-size: medium; margin-bottom: 0px;">To
+									Date:</label> <input type="date" id="toDate" name="toDate"
+									th:value="${toDate}" class="form-control" required>
+							</div>
+							</div>
+
+						<div class="row">
+							<div class="col-12 d-flex justify-content-center">
+								<button type="submit" id="filterButton"
+									class="btn btn-primary mx-2">Filter</button>
+
+								<button class="btn btn-danger mx-2" onclick="resetDate()"
+									name="reset">Reset</button>
+							</div>
+						</div>
+						</form>
+					  
+					</div>
+
+                  
+					  <!--  Agents Attendance report -->
+					 <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+                                    <div class="page-header-title" >
+										<h5 style="margin: 0;font-weight: bold;">Attendance Reports</h5><hr>
+								   </div> 
+                                        <div>
+											<table id="AttendanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%" height="100%">
+                                                <thead class="thead-dark">
+													    <tr role="row">
+													        <th class="text-center">S.No</th>
+													        <!-- <th class="text-center">Zone</th>
+													        <th class="text-center">Division</th> -->
+													        <th class="text-center">Employee Id</th>
+													        <th class="text-center">Employee Name</th>
+													        <!-- <th class="text-center">Department Name</th> -->
+													        <th class="text-center">Designation</th>
+													        <th class="text-center">Device Location</th> 
+													        <th class="text-center">Punch Date</th>
+													        <th class="text-center">Punch In</th>
+													        <th class="text-center">Punch Out</th>
+													        <th class="text-center">Total Working hours</th>
+													        
+													    </tr>
+													</thead>
+													<tbody>
+															<tr th:each="row,sno : ${attendanceData}">
+															<td th:text="${sno.index + 1}" class="text-center"></td>
+											                <!-- <td th:text="${row.zone}" class="text-center"></td>
+											                <td th:text="${row.division}" class="text-center"></td> -->
+											                <td th:text="${row.user_id}" class="text-center"></td>
+											                <td th:text="${row.user_name}" class="text-center"></td>
+											                <!-- <td th:text="${row.departmentname}" class="text-center"></td> -->
+											                <td th:text="${row.designation}" class="text-center"></td>
+											                <td th:text="${row.device_name}" class="text-center"></td>
+											                <td th:text="${row.punch_date}" class="text-center"></td>
+											                <td th:text="${row.PUNCHIN}" class="text-center"></td>
+											                <td th:text="${row.PUNCHOUT}" class="text-center"></td>
+											                <td th:text="${row.total_working_hours}" class="text-center"></td>
+											            </tr>
+													
+													</tbody>
+
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>                            
+					  
+					</div>
+
+        </div>
+   
+     <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+      </div>
+</div>
+
+   
+    <!-- Include jQuery and Bootstrap JavaScript -->
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <!--  sweet alert -->
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+   <script type="text/javascript">
+
+// Initialize DataTables with export buttons
+$(document).ready(function () {
+    var buttons = [
+        { extend: 'pageLength', className: 'btn btn-warning' },
+        { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+        { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+        { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+        { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' },
+    ];
+
+    $('#AttendanceDatatable').DataTable({
+        dom: 'Bftip',
+        columnDefs: [
+            { targets: 'no-sort', orderable: false }
+        ],
+        lengthMenu: [
+            [50, 100, 200, 500, -1],
+            ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+        ],
+        scrollY: '50vh',
+        fixedColumns: { left: 1, right: 1 },
+        buttons: buttons,
+        fixedHeader: true,
+        autoWidth: true,
+        responsive: true,
+        searching: true,
+        select: false,
+        processing: false,
+    });
+});
+
+$("#fromDate").on("change", function() {
+    const startDate = $(this).val();  // Get the selected start date
+    // Set the min value for To Date to be the selected From Date
+    $("#toDate").attr("min", startDate);
+});
+
+// Event listener for To Date selection
+$("#toDate").on("change", function() {
+    const endDate = $(this).val();  // Get the selected end date
+    // Set the max value for From Date to be the selected To Date
+    $("#fromDate").attr("max", endDate);
+});
+
+//Function to reset the date fields and reload the page with cleared data
+function resetDate() {
+    // Clear the date inputs
+    document.getElementById("fromDate").value = "";
+    document.getElementById("toDate").value = "";
+
+    // Redirect to the endpoint without parameters to reset the page
+    window.location.href = "/gcc/callcenter/attendancereport";
+}
+
+//Function to show the loader when the form is submitted
+function showLoader() {
+	document.getElementById('pageLoader').style.display = 'block';
+}
+
+// Function to hide the loader after the page has loaded
+window.onload = function () {
+	document.getElementById('pageLoader').style.display = 'none';
+};
+   
+</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenter/campaignlist.html b/src/main/resources/templates/modules/callcenter/campaignlist.html
new file mode 100644
index 0000000..7f6ca42
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenter/campaignlist.html
@@ -0,0 +1,676 @@
+<!DOCTYPE html>
+<html lang="en"  xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fa fa-list-alt bg-blue"></i>
+									<div class="d-inline">
+										<h5>Campaign List</h5>
+										<span>1913 Campaign List</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">1913 Campaign</li>
+										<li class="breadcrumb-item active" aria-current="page">Campaign List</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                    <h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auot refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>
+                        
+                    <div class="row">
+                    	
+                    	<div class="col-md-12">
+							<div class="card">
+							
+								<div class="card-body">
+								<div class="page-header-title" >
+									<h5 style="margin: 0;font-weight: bold;">Campaigns List</h5><hr>
+							   </div> 
+									<table id="StartCampaigntable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+                                            <thead class="thead-dark">
+                                                <tr role="row">
+                                                    <th>S.No</th>                                                  
+                                                    <th class="text-center">Category</th>
+                                                    <th class="text-center">Campaign</th>
+                                                    <th class="text-center">Agents Assigned</th>
+                                                    <th class="text-center">Calls per Agents</th>
+                                                    <th class="text-center">Total Calls</th>                                                                                                                                                                                                        
+                                                    <th class="text-center">Action</th>                                                                                                                                                     
+                                                </tr>                                               
+                                            </thead>
+                                             <tbody>
+										          <tr th:each="campaign, iterStat : ${campaigns}">
+											            <td th:text="${iterStat.index + 1}" class="text-center"></td> <!-- Serial number -->
+											            <td th:text="${campaign['category_name']}" class="text-center"></td> <!-- Category name -->
+											            <td th:text="${campaign['campaign_name']}" class="text-center"></td> <!-- Campaign name -->
+											            <td th:text="${campaign['no_of_agents']}" class="text-center"></td> <!-- Number of agents assigned -->
+											            <td th:text="${campaign['calls_per_agent']}" class="text-center"></td> <!-- Calls per agent -->
+											            <td th:text="${campaign['total_calls']}" class="text-center"></td> <!-- Total calls -->
+											            <td class="text-center">
+											                <!-- Add your action button -->
+											                <button type="button" class="btn btn-primary" 
+											                      th:onclick="'startCampaign(' + ${campaign.calls_per_agent} + ',' + ${campaign.campaign_id} + ')'">
+											                    Start
+											                </button>
+											            </td>
+											        </tr>
+											    
+										    </tbody>
+                                            <tfoot class="thead-dark">
+                                                <tr role="row">
+                                                    <th>S.No</th>                                                  
+                                                    <th class="text-center">Category</th>
+                                                    <th class="text-center">Campaign</th>
+                                                    <th class="text-center">Agents Assigned</th>
+                                                    <th class="text-center">Calls per Agents</th>
+                                                    <th class="text-center">Total Calls</th>                                                                                                                                                                                                        
+                                                    <th class="text-center">Action</th>                                                                                                  
+                                                </tr>                                              
+                                            </tfoot>
+                                        </table>
+								</div>
+							</div>
+						</div>
+                    	
+                    	<div class="col-md-12">
+							<div class="card">
+							
+									<div class="card-block">
+									<div class="page-header-title" >
+								<h5 style="margin: 0;font-weight: bold;">Campaign Status List</h5><hr>
+						   </div> 
+                                    <div>
+                                        <table id="CampaignDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+                                            <thead class="thead-dark">
+                                                <tr role="row">
+                                                    <th>S.No</th>                                                  
+                                                    <th class="text-center">Name</th>
+                                                    <th  class="text-center">Category</th>                                                
+                                                    <th  class="text-center">Event Date</th>
+                                                    <th  class="text-center">Description</th>
+                                                    <th  class="text-center">Agents Performance</th>                                                                                                                                                      
+                                                    <th  class="text-center">Status</th>                                                  
+                                                                                                    
+                                                </tr>
+                                                
+                                            </thead>
+                                             <tbody>
+										         <tr th:each="activeCampaign, iterStat : ${activeCampaigns}">
+											            <td th:text="${iterStat.index + 1}" class="text-center"></td> <!-- Serial number -->
+											            <td th:text="${activeCampaign['campaign_name']}" class="text-center"></td> 
+											            <td th:text="${activeCampaign['category_name']}" class="text-center"></td> 
+											            <td th:text="${activeCampaign['start_date']} + ' - ' + ${activeCampaign['end_date']}" class="text-center"></td>
+											            <td th:text="${activeCampaign['description']}" class="text-center"></td> <!-- Calls per agent -->
+											            <td class="text-center">
+											                <!-- Add your action button -->
+											                <button type="button" class="btn btn-success" 
+											                     th:onclick="'viewdetailsModal(' + ${activeCampaign['campaign_id']} + ', ' + ${activeCampaign['calls_per_agent']} + ')'">
+											                    View
+											                </button>
+											            </td>
+											            <td class="text-center">
+											                <!-- Add your action button -->
+											                <button type="button" class="status-button btn">
+											                    Ongoing
+											                </button>
+											            </td>
+											        </tr>											    
+										    </tbody>
+                                            <tfoot class="thead-dark">
+                                                <tr role="row">
+                                                      <th>S.No</th>                                                  
+                                                    <th class="text-center">Name</th>
+                                                    <th  class="text-center">Category</th>
+                                                    <th  class="text-center">Event Date</th>
+                                                    <th  class="text-center">Description</th>
+                                                    <th  class="text-center">Agents Performance</th>                                                                                                                                                      
+                                                    <th  class="text-center">Status</th>                                                
+                                                                                                    
+                                                </tr>
+                                                
+                                            </tfoot>
+                                        </table>
+                                    </div>
+                                </div>
+							</div>
+						</div>
+                    	
+                    </div>  
+                        
+                     </div>
+                </div>
+               
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+				</div>
+				
+               
+            
+		</div>
+		
+		<!--agentperformance Modal -->
+		<div class="modal fade" id="agentperformance" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalCenterLabel">Agents Performance</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    
+                    <div class="modal-body">
+						<div class="table-responsive" >
+						<table id="agentperformanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+                              <thead class="thead-dark">
+                                 	<tr role="row">
+                            <th rowspan="2" class="text-center">S.No</th>
+                            <th rowspan="2" class="text-center">Agent Name</th>
+                            <th colspan="4" class="text-center">Performance</th>
+                            <th colspan="5" class="text-center">Call Results</th>
+                            
+                        </tr>
+                        <tr role="row">
+                            
+                            <th class="text-center">Assigned</th>
+                            <th class="text-center">Completed</th>
+                            <th class="text-center">Pending</th>
+                            <th class="text-center">Completion (%)</th>
+                            <th class="text-center">Information Given</th>
+                            <th class="text-center">Not Attended</th>
+                            <th class="text-center">Call back later</th>
+                            <th class="text-center">Switch Off</th>
+                            <th class="text-center">Wrong Number</th>
+                        </tr>
+						 </thead>
+                         <tbody>
+                                    
+                         </tbody>
+                               
+                       </table>
+						</div>
+                     </div>
+  					
+  					<div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                        
+                    </div>                                        
+                </div>
+            </div>
+        </div>
+		
+		
+		
+		
+		<!--viewCompletedModal Modal -->
+		<div class="modal fade" id="viewCompletedModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalCenterLabel">Calls Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    
+                    <div class="modal-body">
+						<div class="table-responsive" >
+						<table id="CompletedDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+                              <thead class="thead-dark">
+                                 	<tr role="row">
+                            			<th class="text-center">S.No</th>
+                            			<th class="text-center">ID</th>
+                            			<th class="text-center">Name</th>
+                            			<th class="text-center">Address</th>
+                            			<th class="text-center">Mobile no</th>
+                            			<th class="text-center">Call Status</th>
+                            			<th class="text-center">Remarks</th>
+                            			<th class="text-center">No of times called</th>
+                            			<th class="text-center">Updated Date</th>
+                        			</tr>
+						 	  </thead>
+	                          <tbody>
+	                                    
+	                          </tbody>
+                               <tfoot class="thead-dark">
+                                 	<tr role="row">
+                            			<th class="text-center">S.No</th>
+                            			<th class="text-center">ID</th>
+                            			<th class="text-center">Name</th>
+                            			<th class="text-center">Address</th>
+                            			<th class="text-center">Mobile no</th>
+                            			<th class="text-center">Call Status</th>
+                            			<th class="text-center">Remarks</th>
+                            			<th class="text-center">No of times called</th>
+                            			<th class="text-center">Updated Date</th>
+                        			</tr>
+						 	  </tfoot>
+                        </table>
+						</div>
+                     </div>
+  					
+  					<div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                        
+                    </div>                                        
+                </div>
+            </div>
+        </div>		
+		
+                      
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>     
+        <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        
+        <script type="text/javascript">
+    $(document).ready(function () {
+
+    	
+    	
+        // Define buttons for DataTables
+        var buttons = [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'excelHtml5',
+                text: 'Excel',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'csvHtml5',
+                text: 'CSV',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary'
+            }
+        ];
+
+        // DataTables initialization for #StartCampaigntable
+        $('#StartCampaigntable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                {targets: 'no-sort', orderable: false}
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+            ],
+            scrollY: '30vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: buttons,
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false,
+        });
+
+        // DataTables initialization for #CampaignDatatable
+        $('#CampaignDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                {targets: 'no-sort', orderable: false}
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+            ],
+            scrollY: '50vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: buttons,
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false,
+        });
+
+        const rows = document.querySelectorAll("#CampaignDatatable tbody tr");
+        rows.forEach(row => {
+            const eventDateText = row.querySelector('td:nth-child(4)').innerText; // Get the event date text
+            const statusButton = row.querySelector('.status-button'); // Select the status button
+            // Parse start and end dates
+            const dates = eventDateText.split(' - ');
+            const endDate = new Date(dates[1].trim()); // Extract the end date          
+            // Get the current date
+            const currentDate = new Date();
+            currentDate.setHours(0, 0, 0, 0); // Reset time to compare dates only
+            // Compare dates and update button text and class
+            if (endDate >= currentDate) {
+
+                statusButton.classList.remove('btn-success');
+
+                statusButton.classList.add('btn-danger');
+
+                statusButton.innerText = 'Ongoing';
+
+            } else {
+
+                statusButton.classList.remove('btn-danger');
+
+                statusButton.classList.add('btn-success');
+
+                statusButton.innerText = 'Completed';
+
+            }
+
+        });
+     
+    });
+    
+ // Initialize DataTable when modal is shown for agent performance
+    $('#agentperformance').on('shown.bs.modal', function () {
+
+    	 var buttons = [
+             {
+                 extend: 'pageLength',
+                 className: 'btn btn-warning'
+             },
+             {
+                 title: 'Data export',
+                 extend: 'copyHtml5',
+                 text: 'Copy',
+                 className: 'btn btn-secondary'
+             },
+             {
+                 extend: 'excelHtml5',
+                 text: 'Excel',
+                 className: 'btn btn-secondary'
+             },
+             {
+                 extend: 'csvHtml5',
+                 text: 'CSV',
+                 className: 'btn btn-secondary'
+             },
+             {
+                 extend: 'pdfHtml5',
+                 text: 'PDF',
+                 className: 'btn btn-secondary'
+             }
+         ];
+        if (!$.fn.DataTable.isDataTable('#agentperformanceDatatable')) {
+            $('#agentperformanceDatatable').DataTable({
+                dom: 'Bftip',               
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+                ],
+                scrollY: '30vh',
+                scrollX: true,  // Enable horizontal scrolling	
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: buttons,
+                fixedHeader: false,
+                autoWidth: false,
+                responsive: true,
+                searching: true,
+                select: false,
+                processing: false,
+            });
+        }
+        
+    });
+ 
+    
+    $('#viewCompletedModal').on('shown.bs.modal', function () {
+
+   	 var buttons = [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'excelHtml5',
+                text: 'Excel',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'csvHtml5',
+                text: 'CSV',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary'
+            }
+        ];
+       if (!$.fn.DataTable.isDataTable('#CompletedDatatable')) {
+           $('#CompletedDatatable').DataTable({
+               dom: 'Bftip',               
+               columnDefs: [
+                   { targets: 'no-sort', orderable: false }
+               ],
+               lengthMenu: [
+                   [50, 100, 200, 500, -1],
+                   ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+               ],
+               scrollY: '50vh',
+               scrollX: true,  // Enable horizontal scrolling	
+               fixedColumns: {
+                   left: 1,
+                   right: 1
+               },
+               buttons: buttons,
+               fixedHeader: false,
+               autoWidth: false,
+               responsive: true,
+               searching: true,
+               select: false,
+               processing: false,
+           });
+       }
+       
+   });
+    
+ // Open modal for agent performance
+    function viewdetailsModal(campaignId, callsPerAgent) {
+        
+
+        $('#agentperformance').modal({
+            backdrop: 'static',
+            keyboard: false
+        });
+        $('#agentperformance').modal('show');
+
+        
+        $.ajax({
+            url: '/gcc/api/campaign/viewcampaignstatus?campaign_id=' + campaignId ,
+            type: 'GET',  
+            contentType: 'application/json',			                               
+            success: function (response) {
+                console.log("Response", response);
+                let tableBody = $('#agentperformanceDatatable tbody');
+                tableBody.empty();
+                
+                response.forEach((data, index) => {
+                	
+                	let row = `
+                        <tr>
+                            <td class="text-center">${index + 1}</td>
+                            <td class="text-center">${data.agent_name}</td>
+                            <td class="text-center">${data.Assigned_count || 0}</td>
+                            <td class="text-center">
+                            ${data.Complete_count > 0 ? 
+                                `<button class="btn btn-success" onclick="viewCompletedDetails(${data.campaign_id}, ${data.agent_id})">
+                                    ${data.Complete_count}
+                                </button>` 
+                                : data.Complete_count || 0}
+                       		 </td>                   
+                        	<td class="text-center">${data.Pending_count || 0}</td>
+                            <td class="text-center">${data.Percentage || 0}%</td>
+                            <td class="text-center">${data.Information_Given_count || 0}</td>
+                            <td class="text-center">${data.Unattended_count || 0}</td>
+                            <td class="text-center">${data.Call_back_later_count || 0}</td>
+                            <td class="text-center">${data.Switch_off_count || 0}</td>
+                            <td class="text-center">${data.Wrong_number_count || 0}</td>
+                            
+                        </tr>
+                    `;
+                    tableBody.append(row);
+                }); 
+            },
+            error: function (xhr, status, error) {
+                console.error('Error in Fetching Campaign:', error);
+            }
+        });
+        
+    }
+
+    //function for CompletedDetails
+    function viewCompletedDetails(campaignId,agentID)
+    {
+    	console.log('Comp-Campaign ID:', campaignId);
+        console.log('Comp-CompletedAgent:', agentID);
+        
+        $('#viewCompletedModal').modal({
+            backdrop: 'static',
+            keyboard: false
+        });
+        $('#viewCompletedModal').modal('show');
+        
+        $.ajax({
+            url: '/gcc/api/campaign/viewcompletedby?campaign_id=' + campaignId+"&agent_id="+agentID ,
+            type: 'GET',  
+            contentType: 'application/json',			                               
+            success: function (response) {
+                console.log("Response", response);
+                let CtableBody = $('#CompletedDatatable tbody');
+                CtableBody.empty();
+                
+                response.forEach((data, index) => {
+                	
+                	let row = `
+                		<tr>
+	                        <td class="text-center">${index + 1}</td>
+	                        <td class="text-center">${data.id}</td>
+	                        <td class="text-center">${data.name}</td>
+	                        <td class="text-center">${data.address}</td>
+	                        <td class="text-center">${data.cellnumber}</td>
+	                        <td class="text-center">${data.call_status}</td>
+	                        <td class="text-center">${data.remarks}</td>
+	                        <td class="text-center">${data.call_count}</td>
+	                        <td class="text-center">${data.updated_date}</td>
+                    	</tr>
+                    `;
+                	CtableBody.append(row);
+                }); 
+            },
+            error: function (xhr, status, error) {
+                console.error('Error in Fetching Completed Details:', error);
+            }
+        });
+    }
+
+ 
+ // Start campaign function
+    function startCampaign(callsPerAgent, campaignId) {
+        $.ajax({
+            url: '/gcc/api/campaign/startcampaign?campaign_id=' + campaignId + '&calls_per_agent=' + callsPerAgent, // URL to your Spring Boot controller
+            type: 'GET', // GET request
+            contentType: 'application/json',
+            success: function (response) {
+            	if (response && response.length > 0 && response != 0) {
+                    // If the response contains values
+                    console.log('Campaign started successfully:', response);
+					
+                    
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'Data transferred successfully!',
+                        icon: 'success',
+                        timer: 2000,
+                        showConfirmButton: false
+                    }).then(() => {
+                        location.reload(); // Reload after success
+                    });
+
+                } else {
+                    // If the response is empty, null, or 0
+                    Swal.fire({
+                        title: 'Error!',
+                        text: 'No data was transferred ,Please check Agents are assigned!.',
+                        icon: 'error',
+                        timer: 3000,
+                        showConfirmButton: true
+                    });
+                }
+            },
+            error: function (xhr, status, error) {
+                // Handle error scenario here
+                console.error('Error starting campaign:', error);
+                // You can show an error message to the user
+                Swal.fire({
+                    title: 'Error!',
+                    text: 'An error occurred while transferring data.',
+                    icon: 'error',
+                    timer: 3000,
+                    showConfirmButton: true
+                });
+            }
+        });
+    }
+ 
+ 
+</script>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenter/createcampaign.html b/src/main/resources/templates/modules/callcenter/createcampaign.html
new file mode 100644
index 0000000..1b18e5c
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenter/createcampaign.html
@@ -0,0 +1,705 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.required{
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media (max-width: 767px) 
+{
+	#campaignrequestform label{
+		margin-top: 10px;
+	} 
+}
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="far fa-calendar-plus bg-blue"></i>
+									<div class="d-inline">
+										<h5>Create Campaign</h5>
+										<span>1913 Campaign creation</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">1913 Campaign</li>
+										<li class="breadcrumb-item active" aria-current="page">Create Campaign</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					<h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auot refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>
+					
+					<div class="row">
+					
+						<div class="col-md-12">
+							<div class="card" style="margin-top: 0px;">
+								<div class="card-header justify-content-between align-items-center">
+									<h3><b>Campaign Request Form</b></h3>
+									<button type="button" class="btn btn-warning btn-sm" id="downloadExcel"><i class="ik ik-download f-16 mr-2"></i>Template Download</button>
+								</div>
+								<div class="card-body">
+								
+									 <form id="campaignrequestform">
+					                    <div class="form-group">
+					                    	<div class="row">
+					                            <div class="col-sm-12 col-md-6">
+							                        <label for="name">Name<span class="required">*</span></label>
+							                        <input type="text" class="form-control" id="name" placeholder="Enter Name">
+					                    		</div>
+					                    
+					                     	 	<div class="col-sm-12 col-md-6">
+											    <label for="category">Category<span class="required">*</span></label>
+											    <select class="form-control" id="category">
+											        <option selected value="0">Select category</option>
+											    </select>
+											</div>
+
+					                    	</div>
+					                    </div>
+					                    <div class="form-group">
+					                    	<label><b><u>Event Date:</u></b></label>
+					                        <div class="row">
+					                            <div class="col-sm-12 col-md-6">
+					                                <label for="eventstartdate">From Date<span class="required">*</span></label>
+					                                <input type="date" class="form-control" id="eventstartdate">
+					                            </div>
+					                            <div class="col-sm-12 col-md-6">
+					                                <label for="eventenddate">To Date<span class="required">*</span></label>
+					                                <input type="date" class="form-control" id="eventenddate">
+					                            </div>
+					                        </div>
+					                    </div>
+					                   
+					                    
+					                    <div class="form-group">					                    	
+					                        <div class="row">
+					                            <div class="col-sm-12 col-md-6">
+					                                <label for="no_of_agent">No of Agents to be Assigned<span class="required">*</span></label>
+					                                <input type="number" class="form-control" id="no_of_agent">
+					                            </div>
+					                            <div class="col-sm-12 col-md-6">
+					                                <label for="no_of_calls">No of Calls to be Assigned (per Person)<span class="required">*</span></label>
+					                                <input type="number" class="form-control" id="no_of_calls">
+					                            </div>
+					                        </div>
+					                    </div>
+					                    
+					                    <div class="form-group">
+					                        <label for="description">Description<span class="required">*</span></label>
+					                        <textarea class="form-control" id="description" rows="2"></textarea>
+					                    </div>
+					                    
+					                     <div class="form-group">
+					                     	<label for="upload">Upload Excelsheet:<span class="required">*</span></label>
+					                     	<input type="file" class="form-control" id="fileInput">
+					                     	<small id="fileError" class="text-danger" style="display:none;">Only Excel files (.xlsx, .xls) are allowed.</small>
+					                     </div>
+					                    
+					                    <div class="form-group text-center">
+					                        <button type="submit" class="btn btn-primary " id="requestsubmit">Submit</button>
+					                        <button type="reset" class="btn btn-secondary ml-2" onclick="resetForm()">Reset</button>
+					                    </div>
+					                </form>
+								
+								</div>
+							</div>
+						</div>
+						
+						
+						
+						<div class="col-md-12">
+						    <div class="card">
+						        <div class="card-block">
+						        <div class="page-header-title" >
+									<h5 style="margin: 0;font-weight: bold;">Campaign Details</h5><hr>
+							   </div> 
+						        
+						            <div>
+						                <table id="CampaignDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+						                    <thead class="thead-dark">
+						                        <tr role="row">
+						                            <th class="text-center">S.No</th>                                                  
+						                            <th class="text-center">Name</th>
+						                            <th class="text-center">Event Date</th>
+						                            <th class="text-center">Description</th>
+						                            <th class="text-center">Agents Assigned</th>
+						                            <th class="text-center">Calls per Person</th>
+						                            <th class="text-center">Total Calls</th>                                                                                                       
+						                            <th class="text-center no-sort" width="%2">Action</th> 
+						                        </tr>
+						                    </thead>
+						                    <tbody>
+						                        <tr th:each="campaign, i: ${campaigns}">
+						                            <td th:text="${i.count}">0</td>
+						                            <td th:text="${campaign.campaign_name}"></td>
+						                            <td th:text="${campaign.event_dates}"></td>
+						                            <td th:text="${campaign.description}"></td>
+						                            <td th:text="${campaign.no_of_agents}" class="text-center"></td>
+						                            <td th:text="${campaign.calls_per_agent}" class="text-center"></td> 
+						                            <td th:text="${campaign.total_calls}" class="text-center"></td> 
+						                            <td class="text-center">
+													    <a href="#" th:onclick="return callEdit([[${campaign.campaign_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit">
+													        <i class="ik ik-edit f-16 mr-15 text-green"></i>
+													    </a>
+													</td>
+ 
+						                        </tr>
+						                    </tbody>
+						                    <tfoot class="thead-dark">
+						                        <tr>
+						                            <th class="text-center">S.No</th>                                                  
+						                            <th class="text-center">Name</th>
+						                            <th class="text-center">Event Date</th>
+						                            <th class="text-center">Description</th>
+						                            <th class="text-center">Agents Assigned</th>
+						                            <th class="text-center">Calls per Person</th> 
+						                            <th class="text-center">Total Calls</th>
+						                            <th class="text-center no-sort" width="%2">Action</th>                            
+						                        </tr>
+						                    </tfoot>
+						                </table>
+						            </div>
+						        </div>
+						    </div>
+						</div>
+
+						
+                      </div>
+                        
+                        
+                     </div>
+                </div>
+               
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+				</div>
+				
+               
+            
+		</div>
+		
+		<!-- The Modal -->
+		<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		    <div class="modal-dialog modal-lg" role="document">
+		        <div class="modal-content">
+		            <div class="modal-header">
+		                <h5 class="modal-title" id="editModalLabel">Edit Campaign</h5>
+		                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		                    <span aria-hidden="true">&times;</span>
+		                </button>
+		            </div>
+		            <div class="modal-body">
+		                <!-- Your form or content for editing can go here -->
+		                <form id="editForm" onsubmit="submitForm(event)" >
+		                   <input type="hidden"  name="campaign_id" id="campaign_id" />
+		                    <div class="form-group">
+					                        <label for="campaign_name">Name<span class="required">*</span></label>
+					                        <input type="text" class="form-control" id="campaign_name" placeholder="Enter Name" readonly="readonly">
+					                    </div>
+					                    <div class="form-group">
+					                    	<label><b><u>Event Date:</u></b></label>
+					                        <div class="row">
+					                            <div class="col">
+					                                <label for="start_date">From Date<span class="required">*</span></label>
+					                                <input type="date" class="form-control" id="start_date" onchange="setEndDateMin()" readonly="readonly" >
+					                            </div>
+					                            <div class="col">
+					                                <label for="end_date">To Date<span class="required">*</span></label>
+					                                <input type="date" class="form-control" id="end_date" required>
+					                            </div>
+					                        </div>
+					                    </div>
+					                   
+					                    
+					                    <div class="form-group">
+					                    	
+					                        <div class="row">
+					                            <div class="col">
+					                                <label for="no_of_agents">No of Agents to be Assigned<span class="required">*</span></label>
+					                                <input type="number" class="form-control" id="no_of_agents" required>
+					                            </div>
+					                            <div class="col">
+					                                <label for="calls_per_agent">No of Calls to be Assigned (per Person)<span class="required">*</span></label>
+					                                <input type="number" class="form-control" id="calls_per_agent" required>
+					                            </div>
+					                        </div>
+					                    </div>
+					                    
+					                    <div class="form-group">
+					                        <label for="description_modal">Description<span class="required">*</span></label>
+					                        <textarea class="form-control" id="description_modal" rows="2" readonly="readonly"></textarea>
+					                    </div>
+					                    
+					                    <div class="form-group text-center">				                       
+		                					<button type="submit" class="btn btn-primary"   id="editsubmit">Save changes</button>
+					                    </div>
+		                    
+		                </form>
+		            </div>
+		          
+		        </div>
+		    </div>
+		</div>
+				
+		
+                      
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>     
+        <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+        
+        <script type="text/javascript">
+        $(document).ready(function() {
+
+        	var table = $('#CampaignDatatable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                ],
+                scrollY: '50vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: [
+                    {
+                        extend: 'pageLength',
+                        className: 'btn btn-warning'
+                    },
+                    {
+                        title: 'Data export',
+                        extend: 'copyHtml5',
+                        text: 'Copy',
+                        className: 'btn btn-secondary',
+                        id: 'copyBtn'
+                    },
+                    {
+                        extend: 'excelHtml5',
+                        text: 'Excel',
+                        className: 'btn btn-secondary',
+                        id: 'excelBtn'
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        text: 'CSV',
+                        className: 'btn btn-secondary',
+                        id: 'csvBtn'
+                    },
+                    {
+                        extend: 'pdfHtml5',
+                        text: 'PDF',
+                        className: 'btn btn-secondary',
+                        id: 'pdfBtn'
+                    }
+                ],
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false
+            });
+        });
+        
+        document.addEventListener('DOMContentLoaded', function() {
+            const fromDate = document.getElementById('eventstartdate');
+            const toDate = document.getElementById('eventenddate');
+
+            // Initially disable the "To Date" field
+            toDate.disabled = true;
+
+            fromDate.addEventListener('change', function() {
+                if (fromDate.value) {
+                    // Enable the "To Date" field when "From Date" is selected
+                    toDate.disabled = false;
+
+                    // Get the selected "From Date"
+                    const selectedFromDate = new Date(fromDate.value);
+
+                 // Set the "To Date" minimum to the same day as the "From Date"
+                    const sameDayString = selectedFromDate.toISOString().split('T')[0];
+                    toDate.setAttribute('min', sameDayString);
+
+                    // Set the "To Date" value to the next day by default
+                    toDate.value = sameDayString;
+
+                } else {
+                    // Disable the "To Date" field if "From Date" is cleared
+                    toDate.disabled = true;
+                    toDate.value = ''; // Clear the "To Date" input
+                }
+            });
+        });
+        
+        function resetForm() {
+            document.getElementById('campaignrequestform').reset(); // Built-in reset functionality
+        }
+        
+        function setEndDateMin() {
+
+            var fromDate = document.getElementById('start_date').value;
+
+            document.getElementById('end_date').min = fromDate;
+
+        }
+
+ 	 	
+    	// excel format to download
+
+		document.getElementById('downloadExcel').addEventListener('click', function() {
+		    // Create a new workbook
+		    var wb = XLSX.utils.book_new();
+
+		    // Define the data for the worksheet
+
+		    var ws_data = [
+		        
+		        // Headers
+
+		        ["ID","NAME","ADDRESS","BALANCE AMOUNT","MOBILE NUMBER","TINY_URL"],
+
+		        // Add more data rows here as needed
+
+		    ];
+
+		    // Create the worksheet from the data
+
+		    var ws = XLSX.utils.aoa_to_sheet(ws_data);
+
+		    
+		
+		    // Optional: Set column widths for better readability
+
+		    ws['!cols'] = [
+
+		        { wch: 10 }, // ID
+
+		        { wch: 10 }, // NAME
+
+		        { wch: 20 }, // ADDRESS
+
+		        { wch: 15 }, // MOBILE NUMBER
+
+		        { wch: 20 }, // BALANCE AMOUNT
+
+		        { wch: 25 }, // TINY URL
+
+		    ];
+
+		    // Append the worksheet to the workbook
+
+		    XLSX.utils.book_append_sheet(wb, ws, 'Property Tax');
+
+		    // Export the workbook to an Excel file
+
+		    XLSX.writeFile(wb, 'PropertyTaxTemp.xlsx');
+
+		});
+    	
+    	
+    	
+		$(document).ready(function() {
+		    $('#requestsubmit').on('click', function(event) {
+		        event.preventDefault(); // Prevent form from submitting the traditional way
+
+		      $('#requestsubmit').attr('disabled', true).text('Submitting...');
+		        
+		     // Get form values
+		        var name = $('#name').val();
+		        var category = $('#category').val();
+		        var eventStartDate = $('#eventstartdate').val();
+		        var eventEndDate = $('#eventenddate').val();
+		        var noOfAgent = $('#no_of_agent').val();
+		        var noOfCalls = $('#no_of_calls').val();
+		        var description = $('#description').val();
+		        var fileInput = $('#fileInput')[0].files[0]; // Get the file from the input
+
+		        // Check for empty values and trigger Swal error
+		        if (!name || !category || !eventStartDate || !eventEndDate || !noOfAgent || !noOfCalls || !description || !fileInput) {
+		            Swal.fire({
+		                icon: 'info',
+		                title: 'Info',
+		                text: 'Please fill in all fields and upload a file before submitting.',
+		            });
+		            $('#requestsubmit').attr('disabled', false).text('Submit');
+		            return; // Stop form submission if any field is empty
+		        }
+
+		        // Create a FormData object to hold all form data, including the file
+		        var formData = new FormData();
+		        formData.append('name', name);
+		        formData.append('category', category);
+		        formData.append('eventstartdate', eventStartDate);
+		        formData.append('eventenddate', eventEndDate);
+		        formData.append('no_of_agent', noOfAgent);
+		        formData.append('no_of_calls', noOfCalls);
+		        formData.append('description', description);
+		        formData.append('file', fileInput); // Append the file to formData
+
+		        // Make an AJAX request to submit the form data
+		        $.ajax({
+		            url: '/gcc/api/campaign/save', // API endpoint to save form data
+		            type: 'POST',
+		            data: formData,
+		            processData: false, // Don't process the data (needed for FormData)
+		            contentType: false, // Don't set content type (needed for FormData)
+		            success: function(response) {
+		            								
+		                if (response.status === 'success') {
+		                    Swal.fire({
+		                        icon: 'success',
+		                        title: 'Success',
+		                        text: response.message
+		                    }).then((result) => {
+		                    	$('#requestsubmit').attr('disabled', false).text('Submit');
+	                            // Reload the page after the SweetAlert is closed
+		                    	if (result.isConfirmed) {
+		                            // Optional: Reset the form
+		                            $('#campaignrequestform')[0].reset();
+
+		                            // Send the categoryId to another AJAX call
+		                            let categoryId = parseInt(response.category_id, 10); // Extract the category_id from the response
+
+		                            // Make the second AJAX call with the categoryId
+		                            $.ajax({
+		                                url: `/gcc/api/campaign/getlastCampaignid`, // Replace with your actual endpoint
+		                                type: 'GET', // Or POST depending on your use case		                                
+		                                success: function(response) {
+		                                    console.log("Second AJAX call successful. Data: ", response);
+		                                    // Handle the success of the second AJAX call here
+		                                   
+		                                    $('#requestsubmit').attr('disabled', false).text('Submit');
+		                                   
+		                                    let campaignId = response[0].campaign_id;
+		                                    console.log('categoryId:', categoryId, 'campaignId:', campaignId); // Log values before AJAX call
+		                                 
+		                                    // Make the third AJAX call with both categoryId and campaignId
+		                                    $.ajax({
+		                                        url: '/gcc/api/agents/excel?categoryId='+categoryId+'&campaignId='+campaignId,
+		                                      
+		                                        type: 'GET',// Or POST depending on your use case		                                         
+		                                        success: function(response) {
+														//alert("third_ajax");
+		                                            console.log("Third AJAX call successful. Data: ", response);
+		                                            $('#requestsubmit').attr('disabled', false).text('Submit');
+		                                            
+		                                            // Handle the success of the third AJAX call here
+		                                        },
+		                                        error: function(xhr, status, error) {
+		                                            console.error('Error in third AJAX call:', error);
+		                                            $('#requestsubmit').attr('disabled', false).text('Submit');
+		                                        }
+		                                    });
+		                                    	                                    
+		                                    
+		                                },
+		                                error: function(xhr, status, error) {
+		                                    console.error('Error in second AJAX call:', error);
+		                                    $('#requestsubmit').attr('disabled', false).text('Submit');
+		                                }
+		                            });
+
+		                            // Reload the page after SweetAlert is closed
+		                            location.reload();
+		                        }
+		                    });
+
+		                    $('#requestsubmit').attr('disabled', false).text('Submit');
+		                    // Optionally reset the form
+		                    $('#campaignrequestform')[0].reset();
+		                } else {
+		                    Swal.fire({
+		                        icon: 'error',
+		                        title: 'Error',
+		                        text: 'Something went wrong. Please try again.'
+		                    });
+		                    $('#requestsubmit').attr('disabled', false).text('Submit');
+		                }
+		            },
+		            error: function(xhr, status, error) {
+		                Swal.fire({
+		                    icon: 'error',
+		                    title: 'Error',
+		                    text: 'An error occurred: ' + error
+		                });
+		                $('#requestsubmit').attr('disabled', false).text('Submit');
+		            }
+		        });
+		        
+		        
+		        //upload file data
+		        
+		    });
+		});
+		
+		//Update request form details 
+		$(document).ready(function () {
+			    // Function to open the edit modal and populate data
+			    window.callEdit = function (campaignId) {
+			        fetchCampaignDetails(campaignId);
+			      
+			        return false; // Prevent default anchor click behavior
+			    };
+			
+			    function fetchCampaignDetails(campaignId) {
+			        $.ajax({
+			            url: `/gcc/api/campaign/getCampaignDetailsbyId?campaign_id=${campaignId}`,
+			            type: 'GET',
+			            success: function (response) {
+							console.log(response);
+			                if (response) {
+			                    // Populate modal fields with data
+			                    $('#campaign_id').val(response.campaign_id);
+			                    $('#campaign_name').val(response.campaign_name); // Assuming the key in the response is 'campaign_name'
+			                    $('#start_date').val(response.start_date);
+			                    $('#end_date').val(response.end_date);
+			                    $('#no_of_agents').val(response.no_of_agents);
+			                    $('#calls_per_agent').val(response.calls_per_agent);
+			                    $('#description_modal').val(response.description);
+			                    
+			                    setEndDateMin();
+			                    // Open the modal
+			                    $('#editModal').modal('show');
+			                } else {
+			                    alert('Campaign details not found.');
+			                }
+			            },
+			            error: function (xhr, status, error) {
+			                console.error('Error fetching campaign details:', error);
+			                alert('An error occurred while fetching campaign details.');
+			            }
+			        });
+			    }
+			     window.submitForm = function (event) {
+			         event.preventDefault(); // Prevent the default form submission
+			        
+			       
+
+			        var campaignId = $('#campaign_id').val();
+			        var campaignName = $('#campaign_name').val();
+			        var startDate = $('#start_date').val();
+			        var endDate = $('#end_date').val();
+			        var noOfAgents = $('#no_of_agents').val();
+			        var callsPerAgent = $('#calls_per_agent').val();
+			        var description = $('#description_modal').val();
+
+
+
+			        $.ajax({
+			            url: '/gcc/api/campaign/updateCampaign',  // Endpoint without query parameters
+			            type: 'POST',
+			            data:  {
+			                campaign_id: campaignId,
+			                campaign_name: campaignName,
+			                start_date: startDate,
+			                end_date: endDate,
+			                no_of_agents: noOfAgents,
+			                calls_per_agent: callsPerAgent,
+			                description: description
+			            },  // Send all data as JSON
+			            success: function (response) {
+			                console.log('Campaign ID:',campaign_id);
+			                Swal.fire({
+			                    title: 'Success!',
+			                    text: response,  // Show the success message from the API response
+			                    icon: 'success',
+			                    confirmButtonText: 'OK'
+			                }).then((result) => {
+			                    if (result.isConfirmed) {
+			                        $('#editModal').modal('hide'); // Hide the modal
+			                        location.reload(); // Optionally reload the page to refresh the data
+			                    }
+			                });
+			            },
+			            error: function (xhr, status, error) {
+			                console.error('Error updating campaign details:', error);
+			                Swal.fire({
+			                    title: 'Error!',
+			                    text: 'An error occurred while updating campaign details.',
+			                    icon: 'error',
+			                    confirmButtonText: 'OK'
+			                });
+			            }
+			        });
+			    }
+ 
+		});
+
+
+	//hari category populate api
+	    // Fetch category dropdown from the server
+    $(document).ready(function() {
+        // Make an AJAX request to the API
+        $.ajax({
+            url: '/gcc/api/category/getcategory',
+            method: 'GET',
+            success: function(response) {
+                // Check if the response has data
+                if (response && response.length > 0) {
+                    // Populate the select dropdown with options
+                    var $categorySelect = $('#category');
+                    $.each(response, function(index, category) {
+                        $categorySelect.append(
+                            $('<option>', {
+                                value: category.category_id,
+                                text: category.category_name
+                            })
+                        );
+                    });
+                }
+            },
+            error: function(xhr, status, error) {
+                console.error('Error fetching categories:', error);
+            }
+        });
+    });
+	
+    document.getElementById('fileInput').addEventListener('change', function (event) {
+        var fileInput = event.target;
+        var filePath = fileInput.value;
+        var allowedExtensions = /(\.xlsx|\.xls)$/i;
+
+        if (!allowedExtensions.exec(filePath)) {
+            document.getElementById('fileError').style.display = 'block'; // Show error message
+            fileInput.value = ''; // Clear the input
+        } else {
+            document.getElementById('fileError').style.display = 'none'; // Hide error message
+        }
+    });
+		
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/agentgrievancedashboard.html b/src/main/resources/templates/modules/callcenterqaqc/agentgrievancedashboard.html
new file mode 100644
index 0000000..9bc101e
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/agentgrievancedashboard.html
@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+}
+</style>
+<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="far fa-calendar-plus bg-blue"></i>
+									<div class="d-inline">
+										<h5>Dashboard QAQC</h5>
+										<span>1913 QAQC Dashboard</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Agents
+											QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+
+
+					<div class="row mt-4">
+						<div class="col-12">
+							<div class="card">
+								<div
+									class="card-header d-flex justify-content-between align-items-center">
+									<h3 class="mb-0" style="font-weight: bold;font-size: large;"><span th:text="${agent[0]['agent_name']}" style="font-weight: bold;font-size: large;"></span>'s Task Dashboard</h3>
+									
+									
+
+									<form id="dateForm" method="POST"
+										action="/gcc/callcenterqaqc/agent/agentgrievancedashboard">
+										<div class="d-flex">
+											<!-- Date input fields for start and end dates -->
+
+											<input type="date" class="form-control mr-2" id="startDate"
+												name="startDate" placeholder="Start Date"> <input
+												type="date" class="form-control mr-2" id="endDate"
+												name="endDate" placeholder="Start Date">
+
+											<!-- Hidden form to submit the selected dates -->
+
+											<!-- 								        <input type="hidden" id="hiddenStartDate" name="startDate">
+								        <input type="hidden" id="hiddenEndDate" name="endDate"> -->
+											<button type="submit" class="btn btn-primary" id="searchBtn">Search</button>
+											<button type="button" class="btn btn-secondary ml-2"
+												id="resetBtn">Reset</button>
+										</div>
+									</form>
+
+
+
+								</div>
+								<div class="card-body">
+									<div class="row mt-2">
+										<!-- Total Calls Assigned -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center h-100">
+												<h6 class="text-facebook mb-2">
+													<b>Total Calls Assigned</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Total_Calls_assigned}">
+													<!-- Display Total Calls Assigned -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- QA&QC Calls -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center h-100">
+												<h6 class="text-facebook mb-2">
+													<b>QA&QC Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text=" ${details[0]?.Closed_Call_count}">
+													<!-- Display Closed Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- In-progress Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center h-100">
+												<h6 class="text-facebook mb-2">
+													<b>In-progress Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Inprogress_Call_count}">
+													<!-- Display In-progress Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- Follow-up Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center h-100">
+												<h6 class="text-facebook mb-2">
+													<b>Official Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Followup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center h-100">
+												<h6 class="text-facebook mb-2">
+													<b>Public Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.PublicFollowup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+									</div>
+								</div>
+
+
+								<div class="card-block">
+									<div class="card-header">
+										<h3 style="font-weight: bold;">Your Performance Overview</h3>
+									</div>
+									<div class="card-body">
+										<div class="row mt-2">
+											<div class="col-xl-3 col-md-6 col-sm-12">
+												<div class="card card-box p-3 text-center h-100">
+													<h6 class="text-facebook mb-2">
+														<b>Total Assigned</b>
+													</h6>
+													<h4 class="text-twitter fw-700 mt-3"
+														th:text="${details2[0]?.total_data_count}"></h4>
+												</div>
+											</div>
+											<!-- QA&QC Calls -->
+											<div class="col-xl-3 col-md-6 col-sm-12">
+												<div class="card card-box p-3 text-center h-100">
+													<h6 class="text-facebook mb-2">
+														<b>Finished</b>
+													</h6>
+													<h4 class="text-twitter fw-700 mt-3"
+														th:text="${details2[0]?.completed_count}"></h4>
+												</div>
+											</div>
+											<!-- In-progress Calls -->
+											<div class="col-xl-3 col-md-6 col-sm-12">
+												<div class="card card-box p-3 text-center h-100">
+													<h6 class="text-facebook mb-2">
+														<b>Pending</b>
+													</h6>
+													<h4 class="text-twitter fw-700 mt-3"
+														th:text="${details2[0]?.pending_count}"></h4>
+												</div>
+											</div>
+											<!-- Follow-up Calls -->
+											<div class="col-xl-3 col-md-6 col-sm-12">
+												<div class="card card-box p-3 text-center h-100">
+													<h6 class="text-facebook mb-2">
+														<b>Completion (%)</b>
+													</h6>
+													<h4 class="text-twitter fw-700 mt-3"
+														th:text="${details2[0]?.completed_percentage}+ '%'"></h4>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="row mt-4">
+						<div class="col-md-12">
+							<div class="card">
+							<div class="card-header"><h3><b>Your Task lists</b></h3></div>
+								<div class="card-body">
+									<div class="table-responsive">
+
+										<table id="AgentQaqcDatatable"
+											class="table table-striped table-bordered table-hover dataTable"
+											role="grid">
+											<thead class="thead-dark">
+												<tr>
+
+													<th rowspan="2" class="text-center">S.No</th>
+													<th rowspan="2" class="text-center">Task ID</th>
+													<th rowspan="2" class="text-center">Date</th>
+													<th rowspan="2" class="text-center">Type</th>
+													<th class="text-center" colspan="4">Performance</th>
+
+												</tr>
+												<tr>
+													<th class="text-center">Assigned</th>
+													<th class="text-center">Completed</th>
+													<th class="text-center">Pending</th>
+													<th class="text-center">Completion Percentage(%)</th>
+												</tr>
+											</thead>
+											<tbody>
+												<tr th:each="task, iterStat : ${tasks}">
+													<td class="text-center" th:text="${iterStat.count}"></td>
+													<td class="text-center" th:text="${task['taskid']}"></td>
+													<td class="text-center" th:text="${task['cdate']}"></td>
+													<td class="text-center" th:text="${task['call_category']}"></td>
+													<td class="text-center" th:text="${task['assigned']}"></td>
+													<td class="text-center" th:text="${task['callstaken']}"></td>
+													<td class="text-center" th:text="${task['pending']}"></td>
+													<td class="text-center"
+														th:text="${task['percentage'] + '%'}"></td>
+												</tr>
+											</tbody>
+										</table>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+				</div>
+			</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<!-- in the code use to show the download different type microsoft -->
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">	
+	 $(document).ready(function() {
+
+     	var table = $('#AgentQaqcDatatable').DataTable({
+             dom: 'Bftip',
+             columnDefs: [
+                 { targets: 'no-sort', orderable: false }
+             ],
+             lengthMenu: [
+                 [50, 100, 200, 500, -1],
+                 ['50 rows', '100 rows', '200 rows', 'Show all']
+             ],
+             scrollY: '50vh',
+             fixedColumns: {
+                 left: 1,
+                 right: 1
+             },
+             buttons: [
+                 {
+                     extend: 'pageLength',
+                     className: 'btn btn-warning'
+                 },
+                 {
+                     title: 'Data export',
+                     extend: 'copyHtml5',
+                     text: 'Copy',
+                     className: 'btn btn-secondary',
+                     id: 'copyBtn'
+                 },
+                 {
+                     extend: 'excelHtml5',
+                     text: 'Excel',
+                     className: 'btn btn-secondary',
+                     id: 'excelBtn'
+                 },
+                 {
+                     extend: 'csvHtml5',
+                     text: 'CSV',
+                     className: 'btn btn-secondary',
+                     id: 'csvBtn'
+                 },
+                 {
+                     extend: 'pdfHtml5',
+                     text: 'PDF',
+                     className: 'btn btn-secondary',
+                     id: 'pdfBtn'
+                 }
+             ],
+             fixedHeader: true,
+             autoWidth: true,
+             responsive: true,
+             searching: true,
+             select: false,
+             processing: false
+         });
+     	
+     	/* let startDate = new Date().toISOString().split('T')[0]; // Current date in 'yyyy-mm-dd' format
+     	let endDate = new Date().toISOString().split('T')[0];   // Current date in 'yyyy-mm-dd' format
+
+     	console.log("Start Date:", startDate);  // Logs the current date
+     	console.log("End Date:", endDate); */    // Logs the current date
+
+     	/* $.ajax({
+     	    url: '/gcc/api/callcenterqaqc/agent/getAgentDashboardData',
+     	    method: 'GET',
+     	    success: function(response) {
+     	        console.log("Response:", response);
+     	    },
+     	    error: function(xhr, status, error) {
+     	        console.error("Error occurred: ", error);
+     	    }
+     	}); */
+     	
+     	/* window.onload = function () {
+     	    // Get the current date in YYYY-MM-DD format
+     	    const today = new Date().toISOString().split('T')[0];
+     	    
+     	   //Set the hidden inputs with the current date
+     	    document.getElementById('hiddenStartDate').value = today;
+     	    document.getElementById('hiddenEndDate').value = today;
+     	    
+     	    // Set the date input fields to empty
+     	    document.getElementById('startDate').value = '';
+     	    document.getElementById('endDate').value = '';
+     	    
+     	    
+     	   // Retrieve stored start and end date from sessionStorage (only for the current session)
+     	    const storedStartDate = sessionStorage.getItem('startDate');
+     	    const storedEndDate = sessionStorage.getItem('endDate');
+
+     	    if (storedStartDate && storedEndDate) {
+     	        document.getElementById('startDate').value = storedStartDate;
+     	        document.getElementById('endDate').value = storedEndDate;
+     	    }
+     	}; */
+
+     	document.getElementById('resetBtn').addEventListener('click', function () {
+     	event.preventDefault();
+     	
+     	window.location.href="/gcc/callcenterqaqc/agent/agentgrievancedashboard";
+     	
+     	});
+     	
+     	
+     	document.getElementById('searchBtn').addEventListener('click', function (e) {
+     	    const startDate = document.getElementById('startDate').value;
+     	    const endDate = document.getElementById('endDate').value;
+
+     	    //console.log("startdate: ", startDate);
+     	    //console.log("enddate: ", endDate);
+
+     	    if (!startDate || !endDate) {
+     	        // Show SweetAlert if dates are missing
+     	        Swal.fire({
+     	            icon: 'warning', // Warning icon
+     	            title: 'Please select both start and end dates.',
+     	            showConfirmButton: true, // Show a confirmation button
+     	            timer: 3000 // Optional: Auto-close after 3 seconds
+     	        });
+
+     	        e.preventDefault(); // Prevent form submission if validation fails
+     	        return;
+     	    }
+     	   
+
+     	    // Submit the form to fetch the data based on the selected date range
+     	    document.getElementById('dateForm').submit(); // This will submit the form
+     	});
+
+     	
+     	
+     });
+	 
+	 
+
+	</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/agentqaqccalls.html b/src/main/resources/templates/modules/callcenterqaqc/agentqaqccalls.html
new file mode 100644
index 0000000..5f636ba
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/agentqaqccalls.html
@@ -0,0 +1,1024 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+	height: 140px;
+}
+
+@media ( max-width : 768px) {
+	.card-box {
+		text-align: center;
+	}
+}
+
+.custom-width1 {
+	width: 120px; /* Adjust the width as needed */
+}
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+    
+</style>
+<body>
+	<div class="wrapper">
+		<!-- Header -->
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<!-- Left Menu -->
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+			<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="ik ik-layers bg-blue"></i>
+									<div class="d-inline">
+										<h5>Agent's QAQC Calls</h5>
+										<span>1913 QAQC Call List</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="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Agents
+											QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">QAQC
+											Calls</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+				
+
+
+				<div class="row mt-4">
+
+					<div class="col-md-12">
+						<div class="card">
+
+							<div class="card-body">
+								<div class="page-header-title">
+									<h5 style="margin: 0; font-weight: bold;">Today Assigned
+										Calls</h5>
+								</div>
+								<div>
+									<div class="row mt-2">
+										<!-- Total Calls Assigned -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>Total Calls Assigned</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Total_Calls_assigned}">
+													<!-- Display Total Calls Assigned -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- QA&QC Calls -->
+										<div class="col-xl-3 col-md-6 col-sm-12"
+											style="background-color: aqua;">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>QA&QC Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text=" ${details[0]?.Closed_Call_count}">
+													<!-- Display Closed Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- In-progress Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4 ">
+												<h6 class="text-facebook mb-4">
+													<b>In-progress Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Inprogress_Call_count}">
+													<!-- Display In-progress Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- Follow-up Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Official Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Followup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Public Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.PublicFollowup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+									</div>
+
+
+
+									<div class="row mt-2">
+										<div class="col-md-12">
+											
+											<div class="card-header">
+												<h3 style="font-weight: bold;font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span><span th:text="${agent[0]['agent_name']}" style="font-weight: bold;font-size: large;"></span>'s QAQC Calls List</h3>
+
+											</div>
+
+											<div class="card-block">
+
+												<div class="col-md-12">
+													<div class="row">
+														<button id="primaryButton" class="btn btn-success">Non-Processed
+															Calls</button>
+														<button id="secondaryButton"
+															class="btn btn-secondary btn-custom ml-3">Processed
+															Calls</button>
+													</div>
+												</div>
+											</div>
+											<div class="card-body">
+
+												<div class="table-responsive" id="primaryTable"
+													style="display: block;">
+													<table id="QaqcDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Public Name</th>
+																<th class="text-center">Public PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+																<th class="text-center">Submit</th>
+															</tr>
+														</thead>
+														<tbody>
+
+															<!-- Thymeleaf loop for populating data -->
+															<tr th:each="call, iterStat : ${qaqcCallsLists}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_person_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_mobilenumber']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																
+																<td class="text-center">
+
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">
+																		View</button>
+																</td>
+																<td class="text-center"><select
+																	class="form-control form-control-sm action-select action-dropdown">
+																		<option value="" selected>Select</option>
+																		<option th:each="status : ${qaqcCallsActioin}"
+																			th:value="${status.call_status}"
+																			th:text="${status.call_status}"></option>
+																</select>
+																	<div class="schedule-call d-none mt-2">
+																		<input type="date" class="date-picker form-control"
+																			name="remainderDate">
+																	</div>            </td>
+
+																<td class="text-center"><input type="text"
+																	class="form-control form-control-sm "
+																	placeholder="Remarks"></td>
+
+																<td class="text-center">
+																	<button class="btn btn-primary btn-sm submit-btn submitid"
+																		th:data-id="${call['data_id']}"
+																		th:complaint-select="${call['complaint_number']}"
+																		th:data-name="${call['complaint_person_name']}"
+																		th:data-number="${call['complaint_mobilenumber']}"
+																		th:data-complaint-type="${call['complaint_type']}"
+																		onclick="submitComplaint(this)" disabled="disabled">
+																		Submit</button>
+																</td>
+															</tr>
+														</tbody>
+													</table>
+												</div>
+
+												<div class="table-responsive" id="secondaryTable"
+													style="display: none;">
+													<table id="SecondaryDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Public Name</th>
+																<th class="text-center">Public PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+															</tr>
+														</thead>
+														<tbody>
+															<tr th:each="call, iterStat : ${qaqcSubmitDetails}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_person_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_mobilenumber']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																<td class="text-center">
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">View</button>
+																</td>
+																<td th:text="${call['call_status']}" class="text-center"></td>
+																<td th:text="${call['remarks']}" class="text-center"></td>
+															</tr>
+														</tbody>
+													</table>
+												</div>
+
+
+											</div>
+											 </div>
+										</div>
+									</div>
+								</div>
+
+
+							</div>
+						</div>
+					</div>
+
+				</div>
+			</div>
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+
+	<!-- Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+
+	<script type="text/javascript">
+	
+	
+	$(document).ready(function () {
+				
+		$(document).on('click', '.btn-info', function () {
+	        // Retrieve the complaint number from the data attribute
+	        var complaintNumber = $(this).data('complaint-number');
+	        
+	        // Call the viewDetails function with the complaint number
+	        viewDetails(complaintNumber);
+	    });
+		
+		$('#primaryButton').addClass('btn-success').removeClass('btn-secondary');
+        $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+		
+		// Toggle functionality for Primary and Secondary buttons
+	    $('#primaryButton').click(function () {
+	        $('#primaryTable').show();
+	        $('#secondaryTable').hide();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+            $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#QaqcDatatable').DataTable().columns.adjust().draw();
+	    });
+
+	    $('#secondaryButton').click(function () {
+	        $('#primaryTable').hide();
+	        $('#secondaryTable').show();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+            $('#primaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#SecondaryDatatable').DataTable().columns.adjust().draw();
+
+	    });
+		
+	    var table = $('#QaqcDatatable').DataTable({
+	        dom: 'Bftip',
+	        columnDefs: [
+	            { targets: 'no-sort', orderable: false }
+	        ],
+	        lengthMenu: [
+	            [50, 100, 200, 500, -1],
+	            ['50 rows', '100 rows', '200 rows', 'Show all']
+	        ],
+	        scrollY: '50vh',
+	        fixedColumns: {
+	            left: 1,
+	            right: 1
+	        },
+	        buttons: [
+	            {
+	                extend: 'pageLength',
+	                className: 'btn btn-warning'
+	            },
+	            {
+	                title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn'
+	            }
+	        ],
+	        fixedHeader: true,
+	        autoWidth: true,
+	        responsive: true,
+	        searching: true,
+	        select: false,
+	        processing: false
+	    });
+	    
+	    var table1 = $('#SecondaryDatatable').DataTable({
+	        dom: 'Bftip',
+	        columnDefs: [
+	            { targets: 'no-sort', orderable: false }
+	        ],
+	        lengthMenu: [
+	            [50, 100, 200, 500, -1],
+	            ['50 rows', '100 rows', '200 rows', 'Show all']
+	        ],
+	        scrollY: '50vh',
+	        fixedColumns: {
+	            left: 1,
+	            right: 1
+	        },
+	        buttons: [
+	            {
+	                extend: 'pageLength',
+	                className: 'btn btn-warning'
+	            },
+	            {
+	                title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn'
+	            }
+	        ],
+	        fixedHeader: true,
+	        autoWidth: true,
+	        responsive: true,
+	        searching: true,
+	        select: false,
+	        processing: false
+	    });
+
+	    // Event listeners for changes in dropdown, remarks, and date picker
+	    $(document).on('change', '.action-dropdown', function () {
+	        const parentRow = $(this).closest('tr');
+	        const schedulerDiv = parentRow.find('.schedule-call');
+	        schedulerDiv.toggleClass('d-none', $(this).val() !== 'FOLLOWUP');
+	        validateFields(parentRow);
+	    });
+
+	    $(document).on('input', 'input[type="text"]', function () {
+	        const parentRow = $(this).closest('tr');
+	        validateFields(parentRow);
+	    });
+
+	    $(document).on('change', '.date-picker', function () {
+	        const parentRow = $(this).closest('tr');
+	        validateFields(parentRow);
+	    });
+
+	    // Validate function to check conditions for enabling/disabling submit button
+	    function validateFields(row) {
+	        const actionSelect = row.find('.action-select');
+	        const remarksInput = row.find('input[type="text"]');
+	        const submitButton = row.find('.submit-btn');
+	        const actionValue = actionSelect.val().trim();
+	        const remarksFilled = remarksInput.val().trim() !== "";
+
+	        const followUpSelected = actionValue === "FOLLOWUP";
+	        
+	        const remainderDateFilled = row.find('.date-picker').val()?.trim() !== ""; // Check if date is selected
+	        
+
+	     // Enable submit button based on conditions
+	        if (
+	            (followUpSelected && remainderDateFilled && remarksFilled) || (actionValue !== "FOLLOWUP" && actionValue !=="Select")|| (actionValue === "MOBILE_NUM"  && remarksFilled) // FOLLOWUP requires remainder date and remarks
+	        ) {
+	            submitButton.prop('disabled', false); // Enable submit button
+	        } else {
+	            submitButton.prop('disabled', true); // Disable submit button
+	        }
+	    }
+
+	 // Initial validation for all rows on page load
+		$("#QaqcDatatable tbody tr").each(function () {
+		    const row = $(this);
+		    const submitButton = row.find('.submit-btn');
+		    submitButton.prop('disabled', true); // Ensure submit button is initially disabled
+		    validateFields(row); // Validate fields for further interaction
+		});
+		
+		// Re-validate fields on input changes
+		$("#QaqcDatatable").on('input change', '.action-select, input[type="text"], .date-picker', function () {
+		    const row = $(this).closest('tr');
+		    validateFields(row);
+		});
+	});
+
+	
+	function submitComplaint(button) {
+		
+		// Access the userId from the hidden span
+	    var userId = document.getElementById('userIdSpan').textContent;
+
+	    // Log userId to the console
+	    //console.log('Inside submit button UserId=====:', userId);
+	    	    
+	    const row = button.parentNode.parentNode;
+
+	    // Fetch the values from the corresponding cells in the row
+	    const dataId = row.querySelector('.submit-btn').getAttribute('data-id'); // Fetch the data_id
+	    const action = row.querySelector('.action-select').value.trim(); // Fetch the action value
+	    const complaintNumber = row.querySelector('.complaint-select').innerText.trim(); // Fetch complaint number
+	    const remarks = row.querySelector('input[type="text"]').value.trim(); // Fetch the remarks value
+	    const remainderDate = row.querySelector('.date-picker')?.value.trim(); // Fetch the remainder date (if any) 
+	    
+	    
+ 		//console.log(row);
+		//console.log(dataId);
+		//console.log(action);
+		//console.log(complaintNumber);
+		//console.log(remarks);
+		//console.log(remainderDate);
+		$('.submitid').prop('disabled', true).text('Submitting...');
+		const name = button.getAttribute('data-name')?.trim() || "N/A";
+	    const cellnumber = button.getAttribute('data-number');
+	    const complaintTypeName = button.getAttribute('data-complaint-type');
+	    
+	  	    
+	    // Validation
+	    if (!dataId || !action || action === "Select") {
+	        Swal.fire("Error", "Action is required!", "error");
+	        $('.submitid').prop('disabled', false).text('Submit');
+	        return;
+	    }
+	    
+	    if (action !== 'COMPLETED' && remarks === "") {
+	        Swal.fire("Error", "Fill Remarks", "error");
+	        $('.submitid').prop('disabled', false).text('Submit');
+	        return;
+	    }
+
+	    if (action === 'FOLLOWUP' && remarks === "" && (!remainderDate || remainderDate === "")) {
+	        Swal.fire("Error", "Schedule Date is required for Follow-Up!", "error");
+	        $('.submitid').prop('disabled', false).text('Submit');
+	        return;
+	    }
+	    
+	    
+	    //console.log("outside ajax");
+	    // AJAX Request
+	     $.ajax({
+	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/update',
+	        type: 'POST',
+	        data: {
+	            dataId: dataId,
+	            complaintNumber: complaintNumber,
+	            action: action,
+	            remarks: remarks,
+	            remainderDate: remainderDate,
+	            userId:userId
+	        },	        
+	        success: function (response) {
+	            if (response === "Success") {
+	            	//console.log("Success");
+	            	
+            	    //console.log("name:",name);
+            	    //console.log("cellnumber:",cellnumber);
+            	    //console.log("complaintTypeName:",complaintTypeName);
+            	    //console.log("complaintNumber:",complaintNumber);
+					
+            	 //Validate cellnumber
+            	    if (!isNaN(cellnumber) || !cellnumber.trim() === "") {
+            	    	//console.log("valid phone number");
+            	    	$('.submitid').prop('disabled', false).text('Submit');
+            	    	// Trigger WhatsApp message functions based on action
+                	    if (action === "UNATTENDED") {
+                	    	//sendWhatsAppMessageUnattended(name, complaintNumber, cellnumber, complaintTypeName);
+                	    } else if (action === "REOPEN") {
+                	        sendWhatsAppMessageReopened(name, complaintNumber, cellnumber, complaintTypeName);
+                	   }
+            	    }            	   
+            	    else{
+            	    	console.log("not valid phone number,So message not sent");
+            	    }            	   
+	                Swal.fire({
+	                    icon: 'success',
+	                    title: 'Success',
+	                    text: 'Complaint updated successfully!',
+	                    allowOutsideClick: false, // Disable clicking outside the modal to close it
+	                    allowEscapeKey: false, // Disable escape key to close the modal
+	                    allowEnterKey: false, // Disable enter key to close the modal
+	                    showConfirmButton: true, // Ensure the confirm button is visible
+	                }).then((result) => {
+	                    if (result.isConfirmed) {
+	                    	console.log("ok button");
+	                    	$('.submitid').prop('disabled', false).text('Submit');
+                    	
+	                    	const table = $('#QaqcDatatable').DataTable();
+	                        
+	                        // Remove the row
+	                        table.row($(row)).remove();
+
+	                        // Reorder S.No column
+	                        table.rows().every(function (index) {
+	                            const row = this.node();
+	                            $(row).find('td:first-child').text(index + 1); // Update S.No
+	                        });
+
+	                        // Redraw the table
+	                        table.draw(false);
+	                	    
+	                    }
+	                });
+	            } 
+	            else if (response === "error") {
+	            	$('.submitid').prop('disabled', false).text('Submit');
+	            	Swal.fire("Error", "Failed to update complaint. Please try again later.", "error");
+	            }
+	            else {
+	            	$('.submitid').prop('disabled', false).text('Submit');
+	                Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+	            }
+	        },
+	        error: function (xhr, status, error) {
+	        	$('.submitid').prop('disabled', false).text('Submit');
+	            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+	        }
+	        
+	    });
+	    	    
+	    //$('.submitid').prop('disabled', false).text('Submit');
+	}
+	
+	function viewDetails(complaintNumber) {
+ 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+ 	    $('#detailsModal').modal('show');
+
+ 	    // Fetch the main complaint details
+ 	    $.ajax({
+ 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+ 	        type: 'GET',
+            data:{complaintNumber:complaintNumber},
+ 	        success: function (data) {
+ 	            //console.log('Complaint Data:', data);
+
+ 	            // Fetch agent response details
+ 	            $.ajax({
+ 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+ 	                type: 'GET',
+ 	                data: { complaintNumber },
+ 	                success: function (agentResponse) {
+ 	                    //console.log('Agent Response:', agentResponse);
+
+ 	                    // Use the logic for building complaint and agent details as HTML
+ 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+ 	                    // Update modal content
+ 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+ 	                },
+ 	                error: function () {
+ 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+ 	                }
+ 	            });
+ 	        },
+ 	        error: function () {
+ 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+ 	        }
+ 	    });
+ 	}
+
+ 	// Function to generate complaint and agent details HTML
+function generateDetailsHtml(data, agentResponse) {
+ 		
+ 	// Helper function to format date to yyyy-mm-dd
+         function formatDate(dateStr) {
+             if (!dateStr) return 'N/A';
+             const date = new Date(dateStr);
+             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+         }
+// Format complaint messages
+let messagesHtml = '';
+if (data.comments && data.comments.length > 0) {
+    data.comments.forEach((comment) => {
+        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+            : '<p style="color: red;">No image available for this comment.</p>';
+
+        messagesHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted">${comment.comment_date}</p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                        <p>${comment.message || 'No message available'}</p>
+                        <div class="user-image">${commentImageLink}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    messagesHtml = '<p>No comments available.</p>';
+}
+
+// Format agent responses
+let agentRepliedHtml = '';
+if (agentResponse.length > 0) {
+    agentResponse.forEach((agentItem) => {
+        agentRepliedHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+}
+
+// Check for user images
+const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+    : '<p style="color: red;">UserImages: No image available.</p>';
+
+// Combine all sections into the final HTML
+const detailsHtml = `
+    <div class="row">
+        <div class="col-md-12">
+            <h4>Complaint Person's Details:</h4>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <h4>Complaint Details:</h4>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+    <div class="col-6">
+        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+    </div>
+    
+</div>
+    <hr>
+    <h4>Complaint Messages:</h4>
+    ${messagesHtml}
+    <hr>
+    <h4>Agent Replied Messages:</h4>
+    ${agentRepliedHtml}
+    <hr>
+    ${imageLink}
+`;
+
+return detailsHtml;
+}
+
+
+	
+	//whatsapp message function for REOPENED
+    function sendWhatsAppMessageReopened(name,complaintNumber,cellnumber,complaintTypeName) {
+
+        //console.log('whatsapp CustomerMobile:', cellnumber);
+        
+        //console.log('name:',name);
+        //console.log('id:',complaintNumber);
+        //console.log('complainttype',complaintTypeName)
+        let viewstatus = "pgr" ;
+           // Send the WhatsApp message pending
+
+			    let msgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Dear+Mr%2FMs+${encodeURIComponent(name)}%2C%0A%0AYour+complaint+regarding+${encodeURIComponent(complaintTypeName)}+with+complaint+number+%2A${encodeURIComponent(complaintNumber)}%2A+has+been+reopened+based+on+your+feedback.%0AThe+relevant+department+is+working+to+resolve+the+issue%2C+and+updates+will+be+provided+on+the+progress.%0A%0AClick+the+button+below+to+view+your+complaint+status%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-Greater+Chennai+Corporation&buttonUrlParam=${encodeURIComponent(viewstatus)}`         		 
+			
+
+
+                 let tamilmsgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=%E0%AE%85%E0%AE%A9%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%2F%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%E0%AE%AE%E0%AE%A4%E0%AE%BF+${encodeURIComponent(name)}%2C%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%2A${encodeURIComponent(complaintNumber)}%2A%2C+${encodeURIComponent(complaintTypeName)}+%E0%AE%A4%E0%AF%8A%E0%AE%9F%E0%AE%B0%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%A9+%E0%AE%95%E0%AE%B0%E0%AF%81%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AF%81%E0%AE%95%E0%AE%B3%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%85%E0%AE%9F%E0%AE%BF%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%88%E0%AE%AF%E0%AE%BF%E0%AE%B2%E0%AF%8D%2C+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AF%8D+%E0%AE%AE%E0%AF%80%E0%AE%A3%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%A4%E0%AE%BF%E0%AE%B1%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%B3%E0%AF%8D%E0%AE%B3%E0%AE%A4%E0%AF%81.%0A%E0%AE%9A%E0%AE%AE%E0%AF%8D%E0%AE%AA%E0%AE%A8%E0%AF%8D%E0%AE%A4%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F+%E0%AE%A4%E0%AF%81%E0%AE%B1%E0%AF%88+%E0%AE%85%E0%AE%A4%E0%AE%BF%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%87%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%AA%E0%AE%BF%E0%AE%B0%E0%AE%9A%E0%AF%8D%E0%AE%9A%E0%AE%BF%E0%AE%A9%E0%AF%88%E0%AE%AF%E0%AF%88+%E0%AE%A4%E0%AF%80%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%AA%E0%AE%A3%E0%AE%BF%E0%AE%AF%E0%AE%BE%E0%AE%B1%E0%AF%8D%E0%AE%B1%E0%AE%BF+%E0%AE%B5%E0%AE%B0%E0%AF%81%E0%AE%95%E0%AE%BF%E0%AE%A9%E0%AF%8D%E0%AE%B1%E0%AE%A9%E0%AE%B0%E0%AF%8D.%0A%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A4%E0%AE%B1%E0%AF%8D%E0%AE%AA%E0%AF%8B%E0%AE%A4%E0%AF%88%E0%AE%AF+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88+%E0%AE%95%E0%AF%81%E0%AE%B1%E0%AE%BF%E0%AE%A4%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%95%E0%AE%B5%E0%AE%B2%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%B5%E0%AE%BF%E0%AE%B0%E0%AF%88%E0%AE%B5%E0%AE%BF%E0%AE%B2%E0%AF%8D+%E0%AE%AE%E0%AF%87%E0%AE%B2%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%B5%E0%AE%B4%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D.%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88%E0%AE%AF%E0%AF%88%E0%AE%AA%E0%AF%8D+%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%95%E0%AF%80%E0%AE%B4%E0%AF%87+%E0%AE%89%E0%AE%B3%E0%AF%8D%E0%AE%B3+%E0%AE%AA%E0%AF%8A%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AE%BE%E0%AE%A9%E0%AF%88%E0%AE%95%E0%AF%8D+%E0%AE%95%E0%AE%BF%E0%AE%B3%E0%AE%BF%E0%AE%95%E0%AF%8D+%E0%AE%9A%E0%AF%86%E0%AE%AF%E0%AF%8D%E0%AE%AF%E0%AE%B5%E0%AF%81%E0%AE%AE%E0%AF%8D%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-%E0%AE%AA%E0%AF%86%E0%AE%B0%E0%AF%81%E0%AE%A8%E0%AE%95%E0%AE%B0+%E0%AE%9A%E0%AF%86%E0%AE%A9%E0%AF%8D%E0%AE%A9%E0%AF%88+%E0%AE%AE%E0%AE%BE%E0%AE%A8%E0%AE%95%E0%AE%B0%E0%AE%BE%E0%AE%9F%E0%AF%8D%E0%AE%9A%E0%AE%BF.&buttonUrlParam=${encodeURIComponent(viewstatus)}`
+         		    		
+         		    		
+         		  
+           $.ajax({
+               url: '/gcc/qaqc/api/whatsapp/send-whatsapp-message', // Replace with your service path
+               type: 'POST',
+               data: { msgUrl: msgUrl,
+             	  tamilmsgUrl: tamilmsgUrl},
+               success: function(response) {
+                   //console.log('WhatsApp message sent successfully', response);
+                   console.log('success');
+                   //alert('WhatsApp message sent!');
+                  
+               },
+               error: function(xhr, status, error) {
+                   console.error('Error sending WhatsApp message:', error);
+                   //alert('Failed to send WhatsApp message.');
+                   
+                   Swal.fire({
+                               title: 'Error!',
+                               text: 'Message Not sent!',
+                               icon: 'error',
+                               timer: 2000,
+                               showConfirmButton: false
+                           })
+               }
+           });
+       }
+	
+
+    
+  //whatsapp message function for unattended
+    function sendWhatsAppMessageUnattended(name,complaintNumber,cellnumber,complaintTypeName) {
+
+        console.log('whatsapp CustomerMobile:', cellnumber);
+        
+        console.log('name:',name);
+        console.log('complaintNumber:',complaintNumber);
+        console.log('complainttype',complaintTypeName)
+        let viewstatus = "pgr" ;
+           // Send the WhatsApp message pending
+                    
+       		   
+              let msgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Dear+Mr%2FMs+${encodeURIComponent(name)}%2C%0A%0AAttempts+were+made+to+reach+you+by+phone+regarding+your+complaint+on+${encodeURIComponent(complaintTypeName)}+%28Complaint+ID%3A+%2A${encodeURIComponent(complaintNumber)}%2A%29+from+GCC%E2%80%99s+1913+helpline.+The+issue+has+been+addressed.+%0A%0AIf+you+are+satisfied+with+the+resolution%2C+please+reply+%2A%E2%80%98YES.%E2%80%99%2A+Otherwise%2C+reply+%2A%E2%80%98NO%2C%E2%80%99%2A+and+the+complaint+will+be+reopened.%0A%0AClick+the+button+below+to+view+your+complaint+status%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-Greater+Chennai+Corporation&buttonUrlParam=${encodeURIComponent(viewstatus)}`   		 
+             
+
+         		   
+              let tamilmsgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=%E0%AE%85%E0%AE%A9%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%2F%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%E0%AE%AE%E0%AE%A4%E0%AE%BF+${encodeURIComponent(name)}%2C%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AF%8D+%2A${encodeURIComponent(complaintNumber)}%2A+%E0%AE%A4%E0%AF%8A%E0%AE%9F%E0%AE%B0%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%95+1913+%E0%AE%AE%E0%AE%BE%E0%AE%A8%E0%AE%95%E0%AE%B0%E0%AE%BE%E0%AE%9F%E0%AF%8D%E0%AE%9A%E0%AE%BF+%E0%AE%89%E0%AE%A4%E0%AE%B5%E0%AE%BF+%E0%AE%8E%E0%AE%A3%E0%AF%8D%E0%AE%A3%E0%AE%BF%E0%AE%B2%E0%AE%BF%E0%AE%B0%E0%AF%81%E0%AE%A8%E0%AF%8D%E0%AE%A4%E0%AF%81+%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%88+%E0%AE%A4%E0%AF%8A%E0%AE%9F%E0%AE%B0%E0%AF%8D%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AF%8A%E0%AE%B3%E0%AF%8D%E0%AE%B3+%E0%AE%AE%E0%AF%81%E0%AE%AF%E0%AE%B1%E0%AF%8D%E0%AE%9A%E0%AE%BF%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AF%8B%E0%AE%AE%E0%AF%8D.%0A%E0%AE%A8%E0%AF%80%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%85%E0%AE%B3%E0%AE%BF%E0%AE%A4%E0%AF%8D%E0%AE%A4+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AF%81%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%BE%E0%AE%A9+%E0%AE%A4%E0%AF%80%E0%AE%B0%E0%AF%8D%E0%AE%B5%E0%AF%81+%E0%AE%A8%E0%AE%BF%E0%AE%B1%E0%AF%88%E0%AE%B5%E0%AF%87%E0%AE%B1%E0%AF%8D%E0%AE%B1%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%B3%E0%AF%8D%E0%AE%B3%E0%AE%A4%E0%AF%81.%0A%E0%AE%87%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AF%80%E0%AE%B0%E0%AF%8D%E0%AE%B5%E0%AF%81+%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%81%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AF%81+%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%E0%AE%AA%E0%AF%8D%E0%AE%A4%E0%AE%BF%E0%AE%95%E0%AE%B0%E0%AE%AE%E0%AE%BE%E0%AE%95+%E0%AE%87%E0%AE%B0%E0%AF%81%E0%AE%A8%E0%AF%8D%E0%AE%A4%E0%AE%BE%E0%AE%B2%E0%AF%8D%2C+%2A%E2%80%98%E0%AE%86%E0%AE%AE%E0%AF%8D%E2%80%99%2A+%E0%AE%8E%E0%AE%A9+%E0%AE%AA%E0%AE%A4%E0%AE%BF%E0%AE%B2%E0%AE%B3%E0%AE%BF%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%B5%E0%AF%81%E0%AE%AE%E0%AF%8D%3B+%E0%AE%87%E0%AE%B2%E0%AF%8D%E0%AE%B2%E0%AF%88%E0%AE%AF%E0%AF%86%E0%AE%A9%E0%AE%BF%E0%AE%B2%E0%AF%8D%2C+%2A%E2%80%98%E0%AE%87%E0%AE%B2%E0%AF%8D%E0%AE%B2%E0%AF%88%E2%80%99%2A+%E0%AE%8E%E0%AE%A9+%E0%AE%AA%E0%AE%A4%E0%AE%BF%E0%AE%B2%E0%AE%B3%E0%AE%BF%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%B5%E0%AF%81%E0%AE%AE%E0%AF%8D.%0A%E0%AE%A8%E0%AF%80%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E2%80%98%E0%AE%87%E0%AE%B2%E0%AF%8D%E0%AE%B2%E0%AF%88%E2%80%99+%E0%AE%8E%E0%AE%A9+%E0%AE%AA%E0%AE%A4%E0%AE%BF%E0%AE%B2%E0%AE%B3%E0%AE%BF%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AE%BE%E0%AE%B2%E0%AF%8D%2C+%E0%AE%87%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AF%8D+%E0%AE%AE%E0%AF%80%E0%AE%A3%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%A4%E0%AE%BF%E0%AE%B1%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D.%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88%E0%AE%AF%E0%AF%88%E0%AE%AA%E0%AF%8D+%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%95%E0%AF%80%E0%AE%B4%E0%AF%87+%E0%AE%89%E0%AE%B3%E0%AF%8D%E0%AE%B3+%E0%AE%AA%E0%AF%8A%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AE%BE%E0%AE%A9%E0%AF%88%E0%AE%95%E0%AF%8D+%E0%AE%95%E0%AE%BF%E0%AE%B3%E0%AE%BF%E0%AE%95%E0%AF%8D+%E0%AE%9A%E0%AF%86%E0%AE%AF%E0%AF%8D%E0%AE%AF%E0%AE%B5%E0%AF%81%E0%AE%AE%E0%AF%8D%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-%E0%AE%AA%E0%AF%86%E0%AE%B0%E0%AF%81%E0%AE%A8%E0%AE%95%E0%AE%B0+%E0%AE%9A%E0%AF%86%E0%AE%A9%E0%AF%8D%E0%AE%A9%E0%AF%88+%E0%AE%AE%E0%AE%BE%E0%AE%A8%E0%AE%95%E0%AE%B0%E0%AE%BE%E0%AE%9F%E0%AF%8D%E0%AE%9A%E0%AE%BF.&buttonUrlParam=${encodeURIComponent(viewstatus)}`
+         		    		 
+         		    		
+           $.ajax({
+               url: '/gcc/qaqc/api/whatsapp/send-whatsapp-message', // Replace with your service path
+               type: 'POST',
+               data: { msgUrl: msgUrl,
+             	  tamilmsgUrl: tamilmsgUrl},
+               success: function(response) {
+                   console.log('WhatsApp message sent successfully', response);
+                   console.log('success');
+                   //alert('WhatsApp message sent!');
+                  
+               },
+               error: function(xhr, status, error) {
+                   console.error('Error sending WhatsApp message:', error);
+                   //alert('Failed to send WhatsApp message.');
+                   
+                   Swal.fire({
+                               title: 'Error!',
+                               text: 'Message Not sent!',
+                               icon: 'error',
+                               timer: 2000,
+                               showConfirmButton: false
+                           })
+               }
+           });
+       }
+	
+	</script>
+
+	<script>
+	//Swal.fire("Success", "Complaint updated successfully!", "success");
+
+    // Remove the row from the table dynamically
+    /* const table = $('#QaqcDatatable').DataTable();
+    table.row($(row)).remove().draw(false);
+    location.reload(); */
+	</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/agentqaqcfollowupcalls.html b/src/main/resources/templates/modules/callcenterqaqc/agentqaqcfollowupcalls.html
new file mode 100644
index 0000000..7d58354
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/agentqaqcfollowupcalls.html
@@ -0,0 +1,899 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+	height: 140px;
+}
+
+@media ( max-width : 768px) {
+	.card-box {
+		text-align: center;
+	}
+}
+
+.custom-width1 {
+	width: 120px; /* Adjust the width as needed */
+}
+
+.custom-width2 {
+	width: 100px; /* Adjust the width as needed */
+}
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+    
+</style>
+<body>
+	<div class="wrapper">
+		<!-- Header -->
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<!-- Left Menu -->
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+			<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="ik ik-layers bg-blue"></i>
+									<div class="d-inline">
+										<h5>Agent's Followup Calls</h5>
+										<span>1913 Followup Call List</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="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Agents
+											QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Official FollowUp Calls</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+				
+
+
+				<div class="row mt-4">
+
+					<div class="col-md-12">
+						<div class="card">
+
+							<div class="card-body">
+								<div class="page-header-title">
+									<h5 style="margin: 0; font-weight: bold;">Today Assigned
+										Calls</h5>
+								</div>
+								<div>
+									<div class="row mt-2">
+										<!-- Total Calls Assigned -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>Total Calls Assigned</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Total_Calls_assigned}">
+													<!-- Display Total Calls Assigned -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- QA&QC Calls -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>QA&QC Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text=" ${details[0]?.Closed_Call_count}">
+													<!-- Display Closed Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- In-progress Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4 ">
+												<h6 class="text-facebook mb-4">
+													<b>In-progress Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Inprogress_Call_count}">
+													<!-- Display In-progress Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- Follow-up Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12" style="background-color: aqua;">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Official Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Followup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Public Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.PublicFollowup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+									</div>
+
+
+									<div class="row mt-2">
+										<div class="col-md-12">
+
+											<div class="card-header">
+												<h3 style="font-weight: bold; font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span>
+													<span th:text="${agent[0]['agent_name']}"
+														style="font-weight: bold; font-size: large;"></span>'s
+													Followup Calls List
+												</h3>
+											</div>
+
+											<div class="card-block">
+												<div class="col-md-12 ">
+													<div class="row">
+														<button id="primaryButton" class="btn btn-success">Non-Processed
+															Calls</button>
+														<button id="secondaryButton"
+															class="btn btn-secondary btn-custom ml-3">Processed
+															Calls</button>
+													</div>
+												</div>
+											</div>
+
+											<div class="card-body">
+
+												<div class="table-responsive" id="primaryTable"
+													style="display: block;">
+													<table id="QaqcDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<!-- <th class="text-center">Name</th>
+														<th class="text-center">Phone No</th> -->
+																<th class="text-center">Officer Name</th>
+																<th class="text-center">Officer PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center custom-width2">View</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+																<th class="text-center">Submit</th>
+															</tr>
+
+														</thead>
+														<tbody>
+
+															<!-- Thymeleaf loop for populating data -->
+
+
+															<tr th:each="call, iterStat : ${qaqcfollowuplists}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<!-- <td th:text="${call['complaint_person_name']}"
+															class="text-center"></td>
+														<td th:text="${call['complaint_mobilenumber']}"
+															class="text-center"></td> -->
+																<td th:text="${call['official_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_mobilenum']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+
+																<!-- view function -->
+
+																<td class="text-center">
+																	<button type="button" class="btn btn-info details-btn"
+																		style="margin-bottom: 3px"
+																		th:data-complaint-number="${call['complaint_number']}">
+																		View</button>
+																</td>
+
+
+																<td class="text-center"><select
+																	class="form-control form-control-sm action-select action-dropdown">
+																		<option value="" selected>Select</option>
+																		<option th:each="status : ${qaqccategorylists}"
+																			th:value="${status.call_status}"
+																			th:text="${status.call_status}"></option>
+																</select>
+																	<div class="schedule-call d-none mt-2">
+																		<!-- <span class="schedule-text">Schedule Call</span> -->
+																		<input type="date" class="date-picker form-control"
+																			name="remainderDate">
+																	</div></td>
+																<td class="text-center"><input type="text"
+																	class="form-control form-control-sm"
+																	placeholder="Remarks"></td>
+																<td class="text-center">
+																	<button class="btn btn-primary btn-sm submit-btn submitid"
+																		th:data-id="${call['data_id']}"
+																		onclick="submitComplaint(this)" disabled="disabled">
+																		Submit</button>
+																</td>
+															</tr>
+
+														</tbody>
+													</table>
+
+												</div>
+
+												<div class="table-responsive" id="secondaryTable"
+													style="display: none;">
+													<table id="SecondaryDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Officer Name</th>
+																<th class="text-center">Officer PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+															</tr>
+														</thead>
+														<tbody>
+															<tr th:each="call, iterStat : ${fcSubmitDetails}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_mobilenum']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																<td class="text-center">
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">View</button>
+																</td>
+																<td th:text="${call['call_status']}" class="text-center"></td>
+																<td th:text="${call['remarks']}" class="text-center"></td>
+															</tr>
+														</tbody>
+													</table>
+												</div>
+
+
+											</div>
+										 </div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+					</div>
+				</div>
+			</div>
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<!--Details button Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+	<script type="text/javascript">
+ 
+ 
+ 
+$(document).ready(function() {
+	
+	
+	 $(document).on('click', '.btn-info', function () {
+	        // Retrieve the complaint number from the data attribute
+	        var complaintNumber = $(this).data('complaint-number');
+	        
+	        // Call the viewDetails function with the complaint number
+	        viewDetails(complaintNumber);
+	    });
+	 
+	 $('#primaryButton').addClass('btn-success').removeClass('btn-secondary');
+     $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+		
+		// Toggle functionality for Primary and Secondary buttons
+	    $('#primaryButton').click(function () {
+	        $('#primaryTable').show();
+	        $('#secondaryTable').hide();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+         $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#QaqcDatatable').DataTable().columns.adjust().draw();
+	    });
+
+	    $('#secondaryButton').click(function () {
+	        $('#primaryTable').hide();
+	        $('#secondaryTable').show();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+         $('#primaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#SecondaryDatatable').DataTable().columns.adjust().draw();
+
+	    });
+				
+
+    	     	var table = $('#QaqcDatatable').DataTable({
+    	             dom: 'Bftip',
+    	             columnDefs: [
+    	                 { targets: 'no-sort', orderable: false }
+    	             ],
+    	             lengthMenu: [
+    	                 [50, 100, 200, 500, -1],
+    	                 ['50 rows', '100 rows', '200 rows', 'Show all']
+    	             ],
+    	             scrollY: '50vh',
+    	             fixedColumns: {
+    	                 left: 1,
+    	                 right: 1
+    	             },
+    	             buttons: [
+    	                 {
+    	                     extend: 'pageLength',
+    	                     className: 'btn btn-warning'
+    	                 },
+    	                 {
+    	                     title: 'Data export',
+    	                     extend: 'copyHtml5',
+    	                     text: 'Copy',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'copyBtn'
+    	                 },
+    	                 {
+    	                     extend: 'excelHtml5',
+    	                     text: 'Excel',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'excelBtn'
+    	                 },
+    	                 {
+    	                     extend: 'csvHtml5',
+    	                     text: 'CSV',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'csvBtn'
+    	                 },
+    	                 {
+    	                     extend: 'pdfHtml5',
+    	                     text: 'PDF',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'pdfBtn'
+    	                 }
+    	             ],
+    	             fixedHeader: true,
+    	             autoWidth: true,
+    	             responsive: true,
+    	             searching: true, // Enable default search functionality
+    	             select: false,
+    	             processing: false
+    	             
+    	         });
+    	     	
+    	     	var table1 = $('#SecondaryDatatable').DataTable({
+    		        dom: 'Bftip',
+    		        columnDefs: [
+    		            { targets: 'no-sort', orderable: false }
+    		        ],
+    		        lengthMenu: [
+    		            [50, 100, 200, 500, -1],
+    		            ['50 rows', '100 rows', '200 rows', 'Show all']
+    		        ],
+    		        scrollY: '50vh',
+    		        fixedColumns: {
+    		            left: 1,
+    		            right: 1
+    		        },
+    		        buttons: [
+    		            {
+    		                extend: 'pageLength',
+    		                className: 'btn btn-warning'
+    		            },
+    		            {
+    		                title: 'Data export',
+    		                extend: 'copyHtml5',
+    		                text: 'Copy',
+    		                className: 'btn btn-secondary',
+    		                id: 'copyBtn'
+    		            },
+    		            {
+    		                extend: 'excelHtml5',
+    		                text: 'Excel',
+    		                className: 'btn btn-secondary',
+    		                id: 'excelBtn'
+    		            },
+    		            {
+    		                extend: 'csvHtml5',
+    		                text: 'CSV',
+    		                className: 'btn btn-secondary',
+    		                id: 'csvBtn'
+    		            },
+    		            {
+    		                extend: 'pdfHtml5',
+    		                text: 'PDF',
+    		                className: 'btn btn-secondary',
+    		                id: 'pdfBtn'
+    		            }
+    		        ],
+    		        fixedHeader: true,
+    		        autoWidth: true,
+    		        responsive: true,
+    		        searching: true,
+    		        select: false,
+    		        processing: false
+    		    });
+    	     	
+    	     	 // // Event listeners for changes in dropdown, remarks, and date picker
+    	        $(document).on('change', '.action-dropdown', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            const schedulerDiv = parentRow.find('.schedule-call');
+    	            schedulerDiv.toggleClass('d-none', $(this).val() !== 'FOLLOWUP');
+    	            validateFields(parentRow);
+    	        });
+
+    	        $(document).on('input', 'input[type="text"]', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            validateFields(parentRow);
+    	        });
+
+    	        $(document).on('change', '.date-picker', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            validateFields(parentRow);
+    	        });
+
+    	        // Validate function to check conditions for enabling/disabling submit button
+    	        function validateFields(row) {
+    	            const actionSelect = row.find('.action-select');
+    	            const remarksInput = row.find('input[type="text"]');
+    	            const submitButton = row.find('.submit-btn');
+    	            const actionValue = actionSelect.val().trim();
+    	            const remarksFilled = remarksInput.val().trim() !== "";
+
+    	            const followUpSelected = actionValue === "FOLLOWUP";
+    	            const remainderDateFilled = row.find('.date-picker').val()?.trim() !== ""; // Check if date is selected
+
+    	           // Enable submit button based on conditions
+			        if (
+			            (followUpSelected && remainderDateFilled && remarksFilled) || (actionValue !== "FOLLOWUP" && actionValue !=="Select") // FOLLOWUP requires remainder date and remarks
+			        ) {
+			            submitButton.prop('disabled', false); // Enable submit button
+			        } else {
+			            submitButton.prop('disabled', true); // Disable submit button
+			        }
+    	        }
+
+    	     // Initial validation for all rows on page load
+    	    	$("#QaqcDatatable tbody tr").each(function () {
+    	    	    const row = $(this);
+    	    	    const submitButton = row.find('.submit-btn');
+    	    	    submitButton.prop('disabled', true); // Ensure submit button is initially disabled
+    	    	    validateFields(row); // Validate fields for further interaction
+    	    	});
+    	    	
+    	    	// Re-validate fields on input changes
+    	    	$("#QaqcDatatable").on('input change', '.action-select, input[type="text"], .date-picker', function () {
+    	    	    const row = $(this).closest('tr');
+    	    	    validateFields(row);
+    	    	});
+    	        
+    	
+    	     });
+    	     
+  
+function submitComplaint(button) {
+	var userId = document.getElementById('userIdSpan').textContent;
+	const row = button.parentNode.parentNode;
+
+    // Fetch the values from the corresponding cells in the row
+    const dataId = row.querySelector('.submit-btn').getAttribute('data-id'); // Fetch the data_id
+    const action = row.querySelector('.action-select').value.trim(); // Fetch the action value
+    const complaintNumber = row.querySelector('.complaint-select').innerText.trim(); // Fetch complaint number
+    const remarks = row.querySelector('input[type="text"]').value.trim(); // Fetch the remarks value
+    const remainderDate = row.querySelector('.date-picker')?.value.trim(); // Fetch the remainder date (if any)
+	/* console.log(row);
+	console.log(dataId);
+	console.log(action);
+	console.log(complaintNumber);
+	console.log(remarks);
+	console.log(remainderDate); */
+	
+    $('.submitid').prop('disabled', true).text('Submitting...');
+    
+    // Validation
+    if (!dataId || !action || action === "Select") {
+        Swal.fire("Error", "Action is required!", "error");
+        $('.submitid').prop('disabled', false).text('Submit');
+        return;
+    }
+
+    if (action === 'FOLLOWUP' && remarks === "" && (!remainderDate || remainderDate === "")) {
+        Swal.fire("Error", "Schedule Date is required for Follow-Up!", "error");
+        $('.submitid').prop('disabled', false).text('Submit');
+        return;
+    }
+
+    // AJAX Request
+    $.ajax({
+        url: '/gcc/api/callcenterqaqc/agent/followupcalls/update',
+        type: 'POST',
+        data: {
+            dataId: dataId,
+            complaintNumber: complaintNumber,
+            action: action,
+            remarks: remarks,
+            remainderDate: remainderDate,
+            userId:userId
+        },       
+        success: function (response) {
+            if (response === "Success") {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Complaint updated successfully!',
+                    allowOutsideClick: false, // Disable clicking outside the modal to close it
+                    allowEscapeKey: false, // Disable escape key to close the modal
+                    allowEnterKey: false, // Disable enter key to close the modal
+                    showConfirmButton: true, // Ensure the confirm button is visible
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                    	$('.submitid').prop('disabled', false).text('Submit');
+                   	
+                    	const table = $('#QaqcDatatable').DataTable();
+                        
+                        // Remove the row
+                        table.row($(row)).remove();
+
+                        // Reorder S.No column
+                        table.rows().every(function (index) {
+                            const row = this.node();
+                            $(row).find('td:first-child').text(index + 1); // Update S.No
+                        });
+
+                        // Redraw the table
+                        table.draw(false);
+                    }
+                });
+            } 
+            else if (response === "error") {
+            	$('.submitid').prop('disabled', false).text('Submit');
+            	Swal.fire("Error", "Failed to update complaint. Please try again later.", "error");
+            }
+            else {
+            	$('.submitid').prop('disabled', false).text('Submit');            	
+                Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+            }
+        },
+        error: function (xhr, status, error) {
+        	$('.submitid').prop('disabled', false).text('Submit');        	
+            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+        }
+        
+    });
+}
+	     
+    //view button script
+          
+	function viewDetails(complaintNumber) {
+ 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+ 	    $('#detailsModal').modal('show');
+
+ 	    // Fetch the main complaint details
+ 	    $.ajax({
+ 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+ 	        type: 'GET',
+            data:{complaintNumber:complaintNumber},
+ 	        success: function (data) {
+ 	            //console.log('Complaint Data:', data);
+
+ 	            // Fetch agent response details
+ 	            $.ajax({
+ 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+ 	                type: 'GET',
+ 	                data: { complaintNumber },
+ 	                success: function (agentResponse) {
+ 	                    //console.log('Agent Response:', agentResponse);
+
+ 	                    // Use the logic for building complaint and agent details as HTML
+ 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+ 	                    // Update modal content
+ 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+ 	                },
+ 	                error: function () {
+ 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+ 	                }
+ 	            });
+ 	        },
+ 	        error: function () {
+ 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+ 	        }
+ 	    });
+ 	}
+
+ 	// Function to generate complaint and agent details HTML
+function generateDetailsHtml(data, agentResponse) {
+ 		
+ 	// Helper function to format date to yyyy-mm-dd
+         function formatDate(dateStr) {
+             if (!dateStr) return 'N/A';
+             const date = new Date(dateStr);
+             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+         }
+// Format complaint messages
+let messagesHtml = '';
+if (data.comments && data.comments.length > 0) {
+    data.comments.forEach((comment) => {
+        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+            : '<p style="color: red;">No image available for this comment.</p>';
+
+        messagesHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted">${comment.comment_date}</p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                        <p>${comment.message || 'No message available'}</p>
+                        <div class="user-image">${commentImageLink}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    messagesHtml = '<p>No comments available.</p>';
+}
+
+// Format agent responses
+let agentRepliedHtml = '';
+if (agentResponse.length > 0) {
+    agentResponse.forEach((agentItem) => {
+        agentRepliedHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+}
+
+// Check for user images
+const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+    : '<p style="color: red;">UserImages: No image available.</p>';
+
+// Combine all sections into the final HTML
+const detailsHtml = `
+    <div class="row">
+        <div class="col-md-12">
+            <h4>Complaint Person's Details:</h4>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <h4>Complaint Details:</h4>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+    <div class="col-6">
+        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+    </div>
+    
+</div>
+    <hr>
+    <h4>Complaint Messages:</h4>
+    ${messagesHtml}
+    <hr>
+    <h4>Agent Replied Messages:</h4>
+    ${agentRepliedHtml}
+    <hr>
+    ${imageLink}
+`;
+
+return detailsHtml;
+}
+            
+
+
+
+  
+</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/agentqaqcinprogresscalls.html b/src/main/resources/templates/modules/callcenterqaqc/agentqaqcinprogresscalls.html
new file mode 100644
index 0000000..74bdc4a
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/agentqaqcinprogresscalls.html
@@ -0,0 +1,903 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+	height: 140px;
+}
+
+@media ( max-width : 768px) {
+	.card-box {
+		text-align: center;
+	}
+}
+
+/* .d-none {
+		display: none;
+	} */
+.custom-width1 {
+	width: 120px; /* Adjust the width as needed */
+}
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+    
+</style>
+<body>
+	<div class="wrapper">
+		<!-- Header -->
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<!-- Left Menu -->
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+			<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="ik ik-layers bg-blue"></i>
+									<div class="d-inline">
+										<h5>Agent's Inprogress Calls</h5>
+										<span>1913 Inprogress Call List</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="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Agents
+											QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Inprogress
+											Calls</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+				
+
+				
+
+				<div class="row mt-4">
+
+					<div class="col-md-12">
+						<div class="card">
+
+							<div class="card-body">
+								<div class="page-header-title">
+									<h5 style="margin: 0; font-weight: bold;">Today Assigned
+										Calls</h5>
+								</div>
+								<div>
+									<div class="row mt-2">
+										<!-- Total Calls Assigned -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>Total Calls Assigned</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Total_Calls_assigned}">
+													<!-- Display Total Calls Assigned -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- QA&QC Calls -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>QA&QC Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text=" ${details[0]?.Closed_Call_count}">
+													<!-- Display Closed Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- In-progress Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12" style="background-color: aqua;">
+											<div class="card card-box p-3 text-center mt-4 ">
+												<h6 class="text-facebook mb-4">
+													<b>In-progress Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Inprogress_Call_count}">
+													<!-- Display In-progress Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- Follow-up Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Official Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Followup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Public Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.PublicFollowup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+									</div>
+
+
+									<div class="row mt-2">
+										<div class="col-md-12">
+
+											<div class="card-header">
+												<h3 style="font-weight: bold; font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span>
+													<span th:text="${agent[0]['agent_name']}"
+														style="font-weight: bold; font-size: large;"></span>'s
+													Inprogress Calls List
+												</h3>
+											</div>
+
+											<div class="card-block">
+												<div class="col-md-12">
+													<div class="row">
+														<button id="primaryButton" class="btn btn-success">Non-Processed
+															Calls</button>
+														<button id="secondaryButton"
+															class="btn btn-secondary btn-custom ml-3">Processed
+															Calls</button>
+													</div>
+												</div>
+											</div>
+
+											<div class="card-body">
+
+												<div class="table-responsive" id="primaryTable"
+													style="display: block;">
+													<table id="QaqcDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr>
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Officer Name</th>
+																<th class="text-center">Phone No</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">Type</th>
+																<!-- Added Date Column -->
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+																<th class="text-center">Submit</th>
+															</tr>
+														</thead>
+														<tbody>
+															<!-- Rows will be dynamically populated using AJAX -->
+
+															<!-- Thymeleaf loop for populating data -->
+															<tr th:each="call, iterStat : ${inprogresslists}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_mobilenum']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																<td th:text="${call['call_category']}"
+																	class="text-center"></td>
+																<td class="text-center">
+
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">
+																		View</button>
+																</td>
+
+
+																<td class="text-center"><select
+																	class="form-control form-control-sm action-select action-dropdown">
+																		<option value="" selected>Select</option>
+																		<option th:each="status : ${qaqcactionlists}"
+																			th:value="${status.call_status}"
+																			th:text="${status.call_status}"></option>
+																</select>
+																	<div class="schedule-call d-none mt-2">
+																		<!-- <span class="schedule-text">Schedule Call</span> -->
+																		<input type="date" class="date-picker form-control"
+																			name="remainderDate">
+																	</div>             </td>
+
+																<td class="text-center"><input type="text"
+																	class="form-control form-control-sm"
+																	placeholder="Remarks"></td>
+
+
+																<td class="text-center">
+																	<button class="btn btn-primary btn-sm submit-btn submitid"
+																		th:data-id="${call['data_id']}"
+																		onclick="submitComplaint(this)" disabled="disabled">
+																		Submit</button>
+																</td>
+
+															</tr>
+															<!-- End loop -->
+
+														</tbody>
+													</table>
+												</div>
+
+												<div class="table-responsive" id="secondaryTable"
+													style="display: none;">
+													<table id="SecondaryDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Officer Name</th>
+																<th class="text-center">Officer PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+															</tr>
+														</thead>
+														<tbody>
+															<tr th:each="call, iterStat : ${inSubmitDetails}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_mobilenum']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																<td class="text-center">
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">View</button>
+																</td>
+																<td th:text="${call['call_status']}" class="text-center"></td>
+																<td th:text="${call['remarks']}" class="text-center"></td>
+															</tr>
+														</tbody>
+													</table>
+												</div>
+
+
+											</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+							</div>
+
+						</div>
+					</div>
+
+				</div>
+			</div>
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	<!-- Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">
+	
+	$(document).ready(function () {
+		
+		$(document).on('click', '.btn-info', function () {
+	        // Retrieve the complaint number from the data attribute
+	        var complaintNumber = $(this).data('complaint-number');
+	        var complaintDept = $(this).data('complaint-department');
+	        var complaintMode = $(this).data('complaint-mode');
+	        // Call the viewDetails function with the complaint number
+	        viewDetails(complaintNumber);
+	    });
+		
+		$('#primaryButton').addClass('btn-success').removeClass('btn-secondary');
+        $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+		
+		// Toggle functionality for Primary and Secondary buttons
+	    $('#primaryButton').click(function () {
+	        $('#primaryTable').show();
+	        $('#secondaryTable').hide();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+            $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#QaqcDatatable').DataTable().columns.adjust().draw();
+	    });
+
+	    $('#secondaryButton').click(function () {
+	        $('#primaryTable').hide();
+	        $('#secondaryTable').show();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+            $('#primaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#SecondaryDatatable').DataTable().columns.adjust().draw();
+
+	    });
+		
+    var table = $('#QaqcDatatable').DataTable({
+        dom: 'Bftip',
+        columnDefs: [
+            { targets: 'no-sort', orderable: false }
+        ],
+        lengthMenu: [
+            [50, 100, 200, 500, -1],
+            ['50 rows', '100 rows', '200 rows', 'Show all']
+        ],
+        scrollY: '50vh',
+        fixedColumns: {
+            left: 1,
+            right: 1
+        },
+        buttons: [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary',
+                id: 'copyBtn'
+            },
+            {
+                extend: 'excelHtml5',
+                text: 'Excel',
+                className: 'btn btn-secondary',
+                id: 'excelBtn'
+            },
+            {
+                extend: 'csvHtml5',
+                text: 'CSV',
+                className: 'btn btn-secondary',
+                id: 'csvBtn'
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary',
+                id: 'pdfBtn'
+            }
+        ],
+        fixedHeader: true,
+        autoWidth: true,
+        responsive: true,
+        searching: true,
+        select: false,
+        processing: true
+    });
+    
+    var table1 = $('#SecondaryDatatable').DataTable({
+        dom: 'Bftip',
+        columnDefs: [
+            { targets: 'no-sort', orderable: false }
+        ],
+        lengthMenu: [
+            [50, 100, 200, 500, -1],
+            ['50 rows', '100 rows', '200 rows', 'Show all']
+        ],
+        scrollY: '50vh',
+        fixedColumns: {
+            left: 1,
+            right: 1
+        },
+        buttons: [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary',
+                id: 'copyBtn'
+            },
+            {
+                extend: 'excelHtml5',
+                text: 'Excel',
+                className: 'btn btn-secondary',
+                id: 'excelBtn'
+            },
+            {
+                extend: 'csvHtml5',
+                text: 'CSV',
+                className: 'btn btn-secondary',
+                id: 'csvBtn'
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary',
+                id: 'pdfBtn'
+            }
+        ],
+        fixedHeader: true,
+        autoWidth: true,
+        responsive: true,
+        searching: true,
+        select: false,
+        processing: false
+    });
+    
+    
+ // // Event listeners for changes in dropdown, remarks, and date picker
+    $(document).on('change', '.action-dropdown', function () {
+        const parentRow = $(this).closest('tr');
+        const schedulerDiv = parentRow.find('.schedule-call');
+        schedulerDiv.toggleClass('d-none', $(this).val() !== 'FOLLOWUP');
+        validateFields(parentRow);
+    });
+
+    $(document).on('input', 'input[type="text"]', function () {
+        const parentRow = $(this).closest('tr');
+        validateFields(parentRow);
+    });
+
+    $(document).on('change', '.date-picker', function () {
+        const parentRow = $(this).closest('tr');
+        validateFields(parentRow);
+    });
+
+    // Validate function to check conditions for enabling/disabling submit button
+    function validateFields(row) {
+        const actionSelect = row.find('.action-select');
+        const remarksInput = row.find('input[type="text"]');
+        const submitButton = row.find('.submit-btn');
+        const actionValue = actionSelect.val().trim();
+        const remarksFilled = remarksInput.val().trim() !== "";
+
+        const followUpSelected = actionValue === "FOLLOWUP";
+        const remainderDateFilled = row.find('.date-picker').val()?.trim() !== ""; // Check if date is selected
+
+        
+        // Enable submit button based on conditions
+	        if (
+	            (followUpSelected && remainderDateFilled && remarksFilled) || (actionValue !== "FOLLOWUP" && actionValue !=="Select") // FOLLOWUP requires remainder date and remarks
+	        ) {
+	            submitButton.prop('disabled', false); // Enable submit button
+	        } else {
+	            submitButton.prop('disabled', true); // Disable submit button
+	        }
+    }
+
+    // Initial validation for all rows on page load
+	$("#QaqcDatatable tbody tr").each(function () {
+	    const row = $(this);
+	    const submitButton = row.find('.submit-btn');
+	    submitButton.prop('disabled', true); // Ensure submit button is initially disabled
+	    validateFields(row); // Validate fields for further interaction
+	});
+	
+	// Re-validate fields on input changes
+	$("#QaqcDatatable").on('input change', '.action-select, input[type="text"], .date-picker', function () {
+	    const row = $(this).closest('tr');
+	    validateFields(row);
+	});
+
+    
+});
+	
+	
+	function submitComplaint(button) {
+		
+		var userId = document.getElementById('userIdSpan').textContent;
+		const row = button.parentNode.parentNode;
+		
+		 const dataId = row.querySelector('.submit-btn').getAttribute('data-id'); // Fetch the data_id
+		    const action = row.querySelector('.action-select').value.trim(); // Fetch the action value
+		    const complaintNumber = row.querySelector('.complaint-select').innerText.trim(); // Fetch complaint number
+		    const remarks = row.querySelector('input[type="text"]').value.trim(); // Fetch the remarks value
+		    const remainderDate = row.querySelector('.date-picker')?.value.trim(); // Fetch the remainder date (if any)
+		    /* console.log(row);
+			console.log(dataId);
+			console.log(action);
+			console.log(complaintNumber);
+			console.log(remarks);
+			console.log(remainderDate); */
+			
+		
+			//console.log("outside ajax");
+			
+	    $('.submitid').prop('disabled', true).text('Submitting...');
+	    // Validation
+	    if (!dataId || !action || action === "Select") {
+	        Swal.fire("Error", "Action is required!", "error");
+	        $('.submitid').prop('disabled', false).text('Submit');
+	        return;
+	    }
+
+	    if (action === 'FOLLOWUP' && remarks === "" && (!remainderDate || remainderDate === "")) {
+	        Swal.fire("Error", "Schedule Date is required for Follow-Up!", "error");
+	        $('.submitid').prop('disabled', false).text('Submit');
+	        return;
+	    }
+	    
+		if(action === 'MOBILE_NUM' && remarks === "")
+			    	
+	    {
+	    	Swal.fire("Error", "remarks  is required for Mobile_Num!", "error");
+	    	$('.submitid').prop('disabled', false).text('Submit');
+	    	return;
+	    }
+
+	    // AJAX Request
+	    $.ajax({
+	        url: '/gcc/api/callcenterqaqc/agent/inprogresscalls/update',
+	        type: 'POST',
+	        data: {
+	            dataId: dataId,
+	            complaintNumber: complaintNumber,
+	            action: action,
+	            remarks: remarks,
+	            remainderDate: remainderDate,
+	            userId:userId
+	        },	        
+	        success: function (response) {
+	            if (response === "Success") {
+	            	//console.log("inside ajax success");
+	                Swal.fire({
+	                    icon: 'success',
+	                    title: 'Success',
+	                    text: 'Complaint updated successfully!',
+	                    allowOutsideClick: false, // Disable clicking outside the modal to close it
+	                    allowEscapeKey: false, // Disable escape key to close the modal
+	                    allowEnterKey: false, // Disable enter key to close the modal
+	                    showConfirmButton: true, // Ensure the confirm button is visible
+	                }).then((result) => {
+	                    if (result.isConfirmed) {
+	                    	//console.log("ok button");
+	                    	$('.submitid').prop('disabled', false).text('Submit');
+							const table = $('#QaqcDatatable').DataTable();
+	                        
+	                        // Remove the row
+	                        table.row($(row)).remove();
+
+	                        // Reorder S.No column
+	                        table.rows().every(function (index) {
+	                            const row = this.node();
+	                            $(row).find('td:first-child').text(index + 1); // Update S.No
+	                        });
+
+	                        // Redraw the table
+	                        table.draw(false);
+	                    }
+	                });
+	            } 
+	            else if (response === "error") {
+	            	$('.submitid').prop('disabled', false).text('Submit');
+	            	Swal.fire("Error", "Failed to update complaint. Please try again later.", "error");
+	            }
+	            else {
+	            	$('.submitid').prop('disabled', false).text('Submit');
+	                Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+	            }
+	        },
+	        error: function (xhr, status, error) {
+	        	$('.submitid').prop('disabled', false).text('Submit');
+	            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+	        }
+	        	        
+	    });
+	    
+	   // $('.submitid').prop('disabled', false).text('Submit');
+	    
+	}
+	
+	
+	function viewDetails(complaintNumber) {
+ 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+ 	    $('#detailsModal').modal('show');
+
+ 	    // Fetch the main complaint details
+ 	    $.ajax({
+ 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+ 	        type: 'GET',
+            data:{complaintNumber:complaintNumber},
+ 	        success: function (data) {
+ 	            //console.log('Complaint Data:', data);
+
+ 	            // Fetch agent response details
+ 	            $.ajax({
+ 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+ 	                type: 'GET',
+ 	                data: { complaintNumber },
+ 	                success: function (agentResponse) {
+ 	                    //console.log('Agent Response:', agentResponse);
+
+ 	                    // Use the logic for building complaint and agent details as HTML
+ 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+ 	                    // Update modal content
+ 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+ 	                },
+ 	                error: function () {
+ 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+ 	                }
+ 	            });
+ 	        },
+ 	        error: function () {
+ 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+ 	        }
+ 	    });
+ 	}
+
+ 	// Function to generate complaint and agent details HTML
+function generateDetailsHtml(data, agentResponse) {
+ 		
+ 	// Helper function to format date to yyyy-mm-dd
+         function formatDate(dateStr) {
+             if (!dateStr) return 'N/A';
+             const date = new Date(dateStr);
+             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+         }
+// Format complaint messages
+let messagesHtml = '';
+if (data.comments && data.comments.length > 0) {
+    data.comments.forEach((comment) => {
+        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+            : '<p style="color: red;">No image available for this comment.</p>';
+
+        messagesHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted">${comment.comment_date}</p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                        <p>${comment.message || 'No message available'}</p>
+                        <div class="user-image">${commentImageLink}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    messagesHtml = '<p>No comments available.</p>';
+}
+
+// Format agent responses
+let agentRepliedHtml = '';
+if (agentResponse.length > 0) {
+    agentResponse.forEach((agentItem) => {
+        agentRepliedHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+}
+
+// Check for user images
+const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+    : '<p style="color: red;">UserImages: No image available.</p>';
+
+// Combine all sections into the final HTML
+const detailsHtml = `
+    <div class="row">
+        <div class="col-md-12">
+            <h4>Complaint Person's Details:</h4>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <h4>Complaint Details:</h4>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+    <div class="col-6">
+        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+    </div>
+    
+</div>
+    <hr>
+    <h4>Complaint Messages:</h4>
+    ${messagesHtml}
+    <hr>
+    <h4>Agent Replied Messages:</h4>
+    ${agentRepliedHtml}
+    <hr>
+    ${imageLink}
+`;
+
+return detailsHtml;
+}
+
+
+
+</script>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/agentqaqcpublicfollowupcalls.html b/src/main/resources/templates/modules/callcenterqaqc/agentqaqcpublicfollowupcalls.html
new file mode 100644
index 0000000..96ceb30
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/agentqaqcpublicfollowupcalls.html
@@ -0,0 +1,969 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+	height: 140px;
+}
+
+@media ( max-width : 768px) {
+	.card-box {
+		text-align: center;
+	}
+}
+
+.custom-width1 {
+	width: 120px; /* Adjust the width as needed */
+}
+
+.custom-width2 {
+	width: 100px; /* Adjust the width as needed */
+}
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+    
+</style>
+<body>
+	<div class="wrapper">
+		<!-- Header -->
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<!-- Left Menu -->
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+			<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="ik ik-layers bg-blue"></i>
+									<div class="d-inline">
+										<h5>Agent's Followup Calls</h5>
+										<span>1913 Followup Call List</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="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Agents
+											QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Public FollowUp Calls</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+				
+
+
+				<div class="row mt-4">
+
+					<div class="col-md-12">
+						<div class="card">
+
+							<div class="card-body">
+								<div class="page-header-title">
+									<h5 style="margin: 0; font-weight: bold;">Today Assigned
+										Calls</h5>
+								</div>
+								<div>
+									<div class="row mt-2">
+										<!-- Total Calls Assigned -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>Total Calls Assigned</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Total_Calls_assigned}">
+													<!-- Display Total Calls Assigned -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- QA&QC Calls -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>QA&QC Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text=" ${details[0]?.Closed_Call_count}">
+													<!-- Display Closed Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- In-progress Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4 ">
+												<h6 class="text-facebook mb-4">
+													<b>In-progress Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Inprogress_Call_count}">
+													<!-- Display In-progress Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- Follow-up Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12" >
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Official Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Followup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<div class="col-xl-2 col-md-6 col-sm-12" style="background-color: aqua;">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Public Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.PublicFollowup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+									</div>
+
+
+									<div class="row mt-2">
+										<div class="col-md-12">
+
+											<div class="card-header">
+												<h3 style="font-weight: bold; font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span>
+													<span th:text="${agent[0]['agent_name']}"
+														style="font-weight: bold; font-size: large;"></span>'s
+													Followup Calls List
+												</h3>
+											</div>
+
+											<div class="card-block">
+												<div class="col-md-12 ">
+													<div class="row">
+														<button id="primaryButton" class="btn btn-success">Non-Processed
+															Calls</button>
+														<button id="secondaryButton"
+															class="btn btn-secondary btn-custom ml-3">Processed
+															Calls</button>
+													</div>
+												</div>
+											</div>
+
+											<div class="card-body">
+
+												<div class="table-responsive" id="primaryTable"
+													style="display: block;">
+													<table id="QaqcDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>																
+																<th class="text-center">Public Name</th>
+																<th class="text-center">Public PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center custom-width2">View</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+																<th class="text-center">Submit</th>
+															</tr>
+
+														</thead>
+														<tbody>
+
+															<!-- Thymeleaf loop for populating data -->
+
+
+															<tr th:each="call, iterStat : ${qaqcfollowuplists}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_person_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_mobilenumber']}"
+																	class="text-center"></td>
+																<!-- <td th:text="${call['official_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_mobilenum']}"
+																	class="text-center"></td> -->
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+
+																<!-- view function -->
+
+																<td class="text-center">
+																	<button type="button" class="btn btn-info details-btn"
+																		style="margin-bottom: 3px"
+																		th:data-complaint-number="${call['complaint_number']}">
+																		View</button>
+																</td>
+
+
+																<td class="text-center"><select
+																	class="form-control form-control-sm action-select action-dropdown">
+																		<option value="" selected>Select</option>
+																		<option th:each="status : ${qaqccategorylists}"
+																			th:value="${status.call_status}"
+																			th:text="${status.call_status}"></option>
+																</select>
+																	<div class="schedule-call d-none mt-2">
+																		<!-- <span class="schedule-text">Schedule Call</span> -->
+																		<input type="date" class="date-picker form-control"
+																			name="remainderDate">
+																	</div></td>
+																<td class="text-center"><input type="text"
+																	class="form-control form-control-sm"
+																	placeholder="Remarks"></td>
+																<td class="text-center">
+																	<button class="btn btn-primary btn-sm submit-btn submitid"
+																		th:data-id="${call['data_id']}"
+																		th:complaint-select="${call['complaint_number']}"
+																		th:data-name="${call['complaint_person_name']}"
+																		th:data-number="${call['complaint_mobilenumber']}"
+																		th:data-complaint-type="${call['complaint_type']}"
+																		onclick="submitComplaint(this)" disabled="disabled">
+																		Submit</button>
+																</td>
+															</tr>
+
+														</tbody>
+													</table>
+
+												</div>
+
+												<div class="table-responsive" id="secondaryTable"
+													style="display: none;">
+													<table id="SecondaryDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Public Name</th>
+																<th class="text-center">Public PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+															</tr>
+														</thead>
+														<tbody>
+															<tr th:each="call, iterStat : ${fcSubmitDetails}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_person_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_mobilenumber']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																<td class="text-center">
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">View</button>
+																</td>
+																<td th:text="${call['call_status']}" class="text-center"></td>
+																<td th:text="${call['remarks']}" class="text-center"></td>
+															</tr>
+														</tbody>
+													</table>
+												</div>
+
+
+											</div>
+										 </div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+					</div>
+				</div>
+			</div>
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<!--Details button Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+	<script type="text/javascript">
+ 
+ 
+ 
+$(document).ready(function() {
+	
+	
+	 $(document).on('click', '.btn-info', function () {
+	        // Retrieve the complaint number from the data attribute
+	        var complaintNumber = $(this).data('complaint-number');
+	        
+	        // Call the viewDetails function with the complaint number
+	        viewDetails(complaintNumber);
+	    });
+	 
+	 $('#primaryButton').addClass('btn-success').removeClass('btn-secondary');
+     $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+		
+		// Toggle functionality for Primary and Secondary buttons
+	    $('#primaryButton').click(function () {
+	        $('#primaryTable').show();
+	        $('#secondaryTable').hide();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+         $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#QaqcDatatable').DataTable().columns.adjust().draw();
+	    });
+
+	    $('#secondaryButton').click(function () {
+	        $('#primaryTable').hide();
+	        $('#secondaryTable').show();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+         $('#primaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#SecondaryDatatable').DataTable().columns.adjust().draw();
+
+	    });
+				
+
+    	     	var table = $('#QaqcDatatable').DataTable({
+    	             dom: 'Bftip',
+    	             columnDefs: [
+    	                 { targets: 'no-sort', orderable: false }
+    	             ],
+    	             lengthMenu: [
+    	                 [50, 100, 200, 500, -1],
+    	                 ['50 rows', '100 rows', '200 rows', 'Show all']
+    	             ],
+    	             scrollY: '50vh',
+    	             fixedColumns: {
+    	                 left: 1,
+    	                 right: 1
+    	             },
+    	             buttons: [
+    	                 {
+    	                     extend: 'pageLength',
+    	                     className: 'btn btn-warning'
+    	                 },
+    	                 {
+    	                     title: 'Data export',
+    	                     extend: 'copyHtml5',
+    	                     text: 'Copy',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'copyBtn'
+    	                 },
+    	                 {
+    	                     extend: 'excelHtml5',
+    	                     text: 'Excel',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'excelBtn'
+    	                 },
+    	                 {
+    	                     extend: 'csvHtml5',
+    	                     text: 'CSV',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'csvBtn'
+    	                 },
+    	                 {
+    	                     extend: 'pdfHtml5',
+    	                     text: 'PDF',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'pdfBtn'
+    	                 }
+    	             ],
+    	             fixedHeader: true,
+    	             autoWidth: true,
+    	             responsive: true,
+    	             searching: true, // Enable default search functionality
+    	             select: false,
+    	             processing: false
+    	             
+    	         });
+    	     	
+    	     	var table1 = $('#SecondaryDatatable').DataTable({
+    		        dom: 'Bftip',
+    		        columnDefs: [
+    		            { targets: 'no-sort', orderable: false }
+    		        ],
+    		        lengthMenu: [
+    		            [50, 100, 200, 500, -1],
+    		            ['50 rows', '100 rows', '200 rows', 'Show all']
+    		        ],
+    		        scrollY: '50vh',
+    		        fixedColumns: {
+    		            left: 1,
+    		            right: 1
+    		        },
+    		        buttons: [
+    		            {
+    		                extend: 'pageLength',
+    		                className: 'btn btn-warning'
+    		            },
+    		            {
+    		                title: 'Data export',
+    		                extend: 'copyHtml5',
+    		                text: 'Copy',
+    		                className: 'btn btn-secondary',
+    		                id: 'copyBtn'
+    		            },
+    		            {
+    		                extend: 'excelHtml5',
+    		                text: 'Excel',
+    		                className: 'btn btn-secondary',
+    		                id: 'excelBtn'
+    		            },
+    		            {
+    		                extend: 'csvHtml5',
+    		                text: 'CSV',
+    		                className: 'btn btn-secondary',
+    		                id: 'csvBtn'
+    		            },
+    		            {
+    		                extend: 'pdfHtml5',
+    		                text: 'PDF',
+    		                className: 'btn btn-secondary',
+    		                id: 'pdfBtn'
+    		            }
+    		        ],
+    		        fixedHeader: true,
+    		        autoWidth: true,
+    		        responsive: true,
+    		        searching: true,
+    		        select: false,
+    		        processing: false
+    		    });
+    	     	
+    	     	 // // Event listeners for changes in dropdown, remarks, and date picker
+    	        $(document).on('change', '.action-dropdown', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            const schedulerDiv = parentRow.find('.schedule-call');
+    	            schedulerDiv.toggleClass('d-none', $(this).val() !== 'FOLLOWUP');
+    	            validateFields(parentRow);
+    	        });
+
+    	        $(document).on('input', 'input[type="text"]', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            validateFields(parentRow);
+    	        });
+
+    	        $(document).on('change', '.date-picker', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            validateFields(parentRow);
+    	        });
+
+    	        // Validate function to check conditions for enabling/disabling submit button
+    	        function validateFields(row) {
+    	            const actionSelect = row.find('.action-select');
+    	            const remarksInput = row.find('input[type="text"]');
+    	            const submitButton = row.find('.submit-btn');
+    	            const actionValue = actionSelect.val().trim();
+    	            const remarksFilled = remarksInput.val().trim() !== "";
+
+    	            const followUpSelected = actionValue === "FOLLOWUP";
+    	            const remainderDateFilled = row.find('.date-picker').val()?.trim() !== ""; // Check if date is selected
+
+    	           // Enable submit button based on conditions
+			        if (
+			            (followUpSelected && remainderDateFilled && remarksFilled) || (actionValue !== "FOLLOWUP" && actionValue !=="Select") // FOLLOWUP requires remainder date and remarks
+			        ) {
+			            submitButton.prop('disabled', false); // Enable submit button
+			        } else {
+			            submitButton.prop('disabled', true); // Disable submit button
+			        }
+    	        }
+
+    	     // Initial validation for all rows on page load
+    	    	$("#QaqcDatatable tbody tr").each(function () {
+    	    	    const row = $(this);
+    	    	    const submitButton = row.find('.submit-btn');
+    	    	    submitButton.prop('disabled', true); // Ensure submit button is initially disabled
+    	    	    validateFields(row); // Validate fields for further interaction
+    	    	});
+    	    	
+    	    	// Re-validate fields on input changes
+    	    	$("#QaqcDatatable").on('input change', '.action-select, input[type="text"], .date-picker', function () {
+    	    	    const row = $(this).closest('tr');
+    	    	    validateFields(row);
+    	    	});
+    	        
+    	
+    	     });
+    	     
+  
+function submitComplaint(button) {
+	var userId = document.getElementById('userIdSpan').textContent;
+	const row = button.parentNode.parentNode;
+
+    // Fetch the values from the corresponding cells in the row
+    const dataId = row.querySelector('.submit-btn').getAttribute('data-id'); // Fetch the data_id
+    const action = row.querySelector('.action-select').value.trim(); // Fetch the action value
+    const complaintNumber = row.querySelector('.complaint-select').innerText.trim(); // Fetch complaint number
+    const remarks = row.querySelector('input[type="text"]').value.trim(); // Fetch the remarks value
+    const remainderDate = row.querySelector('.date-picker')?.value.trim(); // Fetch the remainder date (if any)
+	/* console.log(row);
+	console.log(dataId);
+	console.log(action);
+	console.log(complaintNumber);
+	console.log(remarks);
+	console.log(remainderDate); */
+	
+    $('.submitid').prop('disabled', true).text('Submitting...');
+	const name = button.getAttribute('data-name')?.trim() || "N/A";
+    const cellnumber = button.getAttribute('data-number');
+    const complaintTypeName = button.getAttribute('data-complaint-type');
+    
+    // Validation
+    if (!dataId || !action || action === "Select") {
+        Swal.fire("Error", "Action is required!", "error");
+        $('.submitid').prop('disabled', false).text('Submit');
+        return;
+    }
+    
+    if (action !== 'COMPLETED' && remarks === "") {
+        Swal.fire("Error", "Fill Remarks", "error");
+        $('.submitid').prop('disabled', false).text('Submit');
+        return;
+    }
+
+    if (action === 'FOLLOWUP' && remarks === "" && (!remainderDate || remainderDate === "")) {
+        Swal.fire("Error", "Schedule Date is required for Follow-Up!", "error");
+        $('.submitid').prop('disabled', false).text('Submit');
+        return;
+    }
+
+    // AJAX Request
+    $.ajax({
+        url: '/gcc/api/callcenterqaqc/agent/publicfollowupcalls/update',
+        type: 'POST',
+        data: {
+            dataId: dataId,
+            complaintNumber: complaintNumber,
+            action: action,
+            remarks: remarks,
+            remainderDate: remainderDate,
+            userId:userId
+        },       
+        success: function (response) {
+            if (response === "Success") {
+            	
+            	//Validate cellnumber
+        	    if (!isNaN(cellnumber) || !cellnumber.trim() === "") {
+        	    	//console.log("valid phone number");
+        	    	$('.submitid').prop('disabled', false).text('Submit');
+        	    	// Trigger WhatsApp message functions based on action
+            	    if (action === "UNATTENDED") {
+            	    	//sendWhatsAppMessageUnattended(name, complaintNumber, cellnumber, complaintTypeName);
+            	    } else if (action === "REOPEN") {
+            	        sendWhatsAppMessageReopened(name, complaintNumber, cellnumber, complaintTypeName);
+            	   }
+        	    }            	   
+        	    else{
+        	    	console.log("not valid phone number,So message not sent");
+        	    }
+            	
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Complaint updated successfully!',
+                    allowOutsideClick: false, // Disable clicking outside the modal to close it
+                    allowEscapeKey: false, // Disable escape key to close the modal
+                    allowEnterKey: false, // Disable enter key to close the modal
+                    showConfirmButton: true, // Ensure the confirm button is visible
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                    	$('.submitid').prop('disabled', false).text('Submit');
+                   	
+                    	const table = $('#QaqcDatatable').DataTable();
+                        
+                        // Remove the row
+                        table.row($(row)).remove();
+
+                        // Reorder S.No column
+                        table.rows().every(function (index) {
+                            const row = this.node();
+                            $(row).find('td:first-child').text(index + 1); // Update S.No
+                        });
+
+                        // Redraw the table
+                        table.draw(false);
+                    }
+                });
+            } 
+            else if (response === "error") {
+            	$('.submitid').prop('disabled', false).text('Submit');
+            	Swal.fire("Error", "Failed to update complaint. Please try again later.", "error");
+            }
+            else {
+            	$('.submitid').prop('disabled', false).text('Submit');            	
+                Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+            }
+        },
+        error: function (xhr, status, error) {
+        	$('.submitid').prop('disabled', false).text('Submit');        	
+            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+        }
+        
+    });
+}
+	     
+    //view button script
+          
+	function viewDetails(complaintNumber) {
+ 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+ 	    $('#detailsModal').modal('show');
+
+ 	    // Fetch the main complaint details
+ 	    $.ajax({
+ 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+ 	        type: 'GET',
+            data:{complaintNumber:complaintNumber},
+ 	        success: function (data) {
+ 	            //console.log('Complaint Data:', data);
+
+ 	            // Fetch agent response details
+ 	            $.ajax({
+ 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+ 	                type: 'GET',
+ 	                data: { complaintNumber },
+ 	                success: function (agentResponse) {
+ 	                    //console.log('Agent Response:', agentResponse);
+
+ 	                    // Use the logic for building complaint and agent details as HTML
+ 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+ 	                    // Update modal content
+ 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+ 	                },
+ 	                error: function () {
+ 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+ 	                }
+ 	            });
+ 	        },
+ 	        error: function () {
+ 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+ 	        }
+ 	    });
+ 	}
+
+ 	// Function to generate complaint and agent details HTML
+function generateDetailsHtml(data, agentResponse) {
+ 		
+ 	// Helper function to format date to yyyy-mm-dd
+         function formatDate(dateStr) {
+             if (!dateStr) return 'N/A';
+             const date = new Date(dateStr);
+             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+         }
+// Format complaint messages
+let messagesHtml = '';
+if (data.comments && data.comments.length > 0) {
+    data.comments.forEach((comment) => {
+        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+            : '<p style="color: red;">No image available for this comment.</p>';
+
+        messagesHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted">${comment.comment_date}</p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                        <p>${comment.message || 'No message available'}</p>
+                        <div class="user-image">${commentImageLink}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    messagesHtml = '<p>No comments available.</p>';
+}
+
+// Format agent responses
+let agentRepliedHtml = '';
+if (agentResponse.length > 0) {
+    agentResponse.forEach((agentItem) => {
+        agentRepliedHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+}
+
+// Check for user images
+const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+    : '<p style="color: red;">UserImages: No image available.</p>';
+
+// Combine all sections into the final HTML
+const detailsHtml = `
+    <div class="row">
+        <div class="col-md-12">
+            <h4>Complaint Person's Details:</h4>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <h4>Complaint Details:</h4>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+    <div class="col-6">
+        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+    </div>
+    
+</div>
+    <hr>
+    <h4>Complaint Messages:</h4>
+    ${messagesHtml}
+    <hr>
+    <h4>Agent Replied Messages:</h4>
+    ${agentRepliedHtml}
+    <hr>
+    ${imageLink}
+`;
+
+return detailsHtml;
+}
+            
+//whatsapp message function for REOPENED
+function sendWhatsAppMessageReopened(name,complaintNumber,cellnumber,complaintTypeName) {
+
+    //console.log('whatsapp CustomerMobile:', cellnumber);
+    
+    //console.log('name:',name);
+    //console.log('id:',complaintNumber);
+    //console.log('complainttype',complaintTypeName)
+    let viewstatus = "pgr" ;
+       // Send the WhatsApp message pending
+
+		    let msgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Dear+Mr%2FMs+${encodeURIComponent(name)}%2C%0A%0AYour+complaint+regarding+${encodeURIComponent(complaintTypeName)}+with+complaint+number+%2A${encodeURIComponent(complaintNumber)}%2A+has+been+reopened+based+on+your+feedback.%0AThe+relevant+department+is+working+to+resolve+the+issue%2C+and+updates+will+be+provided+on+the+progress.%0A%0AClick+the+button+below+to+view+your+complaint+status%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-Greater+Chennai+Corporation&buttonUrlParam=${encodeURIComponent(viewstatus)}`         		 
+		
+
+
+             let tamilmsgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=%E0%AE%85%E0%AE%A9%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%2F%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%E0%AE%AE%E0%AE%A4%E0%AE%BF+${encodeURIComponent(name)}%2C%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%2A${encodeURIComponent(complaintNumber)}%2A%2C+${encodeURIComponent(complaintTypeName)}+%E0%AE%A4%E0%AF%8A%E0%AE%9F%E0%AE%B0%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%A9+%E0%AE%95%E0%AE%B0%E0%AF%81%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AF%81%E0%AE%95%E0%AE%B3%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%85%E0%AE%9F%E0%AE%BF%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%88%E0%AE%AF%E0%AE%BF%E0%AE%B2%E0%AF%8D%2C+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AF%8D+%E0%AE%AE%E0%AF%80%E0%AE%A3%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%A4%E0%AE%BF%E0%AE%B1%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%B3%E0%AF%8D%E0%AE%B3%E0%AE%A4%E0%AF%81.%0A%E0%AE%9A%E0%AE%AE%E0%AF%8D%E0%AE%AA%E0%AE%A8%E0%AF%8D%E0%AE%A4%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F+%E0%AE%A4%E0%AF%81%E0%AE%B1%E0%AF%88+%E0%AE%85%E0%AE%A4%E0%AE%BF%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%87%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%AA%E0%AE%BF%E0%AE%B0%E0%AE%9A%E0%AF%8D%E0%AE%9A%E0%AE%BF%E0%AE%A9%E0%AF%88%E0%AE%AF%E0%AF%88+%E0%AE%A4%E0%AF%80%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%AA%E0%AE%A3%E0%AE%BF%E0%AE%AF%E0%AE%BE%E0%AE%B1%E0%AF%8D%E0%AE%B1%E0%AE%BF+%E0%AE%B5%E0%AE%B0%E0%AF%81%E0%AE%95%E0%AE%BF%E0%AE%A9%E0%AF%8D%E0%AE%B1%E0%AE%A9%E0%AE%B0%E0%AF%8D.%0A%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A4%E0%AE%B1%E0%AF%8D%E0%AE%AA%E0%AF%8B%E0%AE%A4%E0%AF%88%E0%AE%AF+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88+%E0%AE%95%E0%AF%81%E0%AE%B1%E0%AE%BF%E0%AE%A4%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%95%E0%AE%B5%E0%AE%B2%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%B5%E0%AE%BF%E0%AE%B0%E0%AF%88%E0%AE%B5%E0%AE%BF%E0%AE%B2%E0%AF%8D+%E0%AE%AE%E0%AF%87%E0%AE%B2%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%B5%E0%AE%B4%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D.%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88%E0%AE%AF%E0%AF%88%E0%AE%AA%E0%AF%8D+%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%95%E0%AF%80%E0%AE%B4%E0%AF%87+%E0%AE%89%E0%AE%B3%E0%AF%8D%E0%AE%B3+%E0%AE%AA%E0%AF%8A%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AE%BE%E0%AE%A9%E0%AF%88%E0%AE%95%E0%AF%8D+%E0%AE%95%E0%AE%BF%E0%AE%B3%E0%AE%BF%E0%AE%95%E0%AF%8D+%E0%AE%9A%E0%AF%86%E0%AE%AF%E0%AF%8D%E0%AE%AF%E0%AE%B5%E0%AF%81%E0%AE%AE%E0%AF%8D%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-%E0%AE%AA%E0%AF%86%E0%AE%B0%E0%AF%81%E0%AE%A8%E0%AE%95%E0%AE%B0+%E0%AE%9A%E0%AF%86%E0%AE%A9%E0%AF%8D%E0%AE%A9%E0%AF%88+%E0%AE%AE%E0%AE%BE%E0%AE%A8%E0%AE%95%E0%AE%B0%E0%AE%BE%E0%AE%9F%E0%AF%8D%E0%AE%9A%E0%AE%BF.&buttonUrlParam=${encodeURIComponent(viewstatus)}`
+     		    		
+     		    		
+     		  
+       $.ajax({
+           url: '/gcc/qaqc/api/whatsapp/send-whatsapp-message', // Replace with your service path
+           type: 'POST',
+           data: { msgUrl: msgUrl,
+         	  tamilmsgUrl: tamilmsgUrl},
+           success: function(response) {
+               //console.log('WhatsApp message sent successfully', response);
+               console.log('success');
+               //alert('WhatsApp message sent!');
+              
+           },
+           error: function(xhr, status, error) {
+               console.error('Error sending WhatsApp message:', error);
+               //alert('Failed to send WhatsApp message.');
+               
+               Swal.fire({
+                           title: 'Error!',
+                           text: 'Message Not sent!',
+                           icon: 'error',
+                           timer: 2000,
+                           showConfirmButton: false
+                       })
+           }
+       });
+   }
+
+
+  
+</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/complaintstatus.html b/src/main/resources/templates/modules/callcenterqaqc/complaintstatus.html
new file mode 100644
index 0000000..bebd501
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/complaintstatus.html
@@ -0,0 +1,980 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+}
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+</style>
+<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-question-circle bg-blue"></i>
+									<div class="d-inline">
+										<h5>PGR Complaint Status</h5>
+										<span>1913 Check PGR Complaint Status</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">PGR
+											Complaint Status</li>
+										<li class="breadcrumb-item active" aria-current="page">Check
+											Status</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+
+
+					<div class="row mt-4">
+						<div class="col-12">
+							<div class="card">
+								<div
+									class="card-header d-flex justify-content-between align-items-center">
+									<h3 class="mb-0" style="font-weight: bold">Check Complaint
+										Status</h3>
+
+									<!-- div class="d-flex">
+								       
+								        <button type="button" class="btn btn-primary" id="searchBtn">Search</button>
+								    </div> 	 -->
+
+									<div class="d-flex">
+
+										<input type="date" class="form-control mr-2" id="startDate"
+											placeholder="Start Date"> <input type="date"
+											class="form-control mr-2" id="endDate" placeholder="End Date">
+										<input class="form-control mr-2" placeholder="complaintnumber"
+											id="complaintNumber"> <input
+											class="form-control mr-2" placeholder="mobilenumber"
+											id="complaintMobileNumber"> <select id="year"
+											class="year-dropdown"></select>
+										<button type="submit" class="btn btn-primary ml-2"
+											id="searchBtn">Search</button>
+										<button type="button" class="btn btn-secondary ml-2"
+											id="resetBtn">Reset</button>
+									</div>
+								</div>
+
+
+
+								<div class="row mt-4">
+									<div class="col-md-12">
+										<!-- <div class="card"> -->
+										<div class="card-body">
+											<div class="table-responsive">
+
+												<table id="AgentQaqcDatatable"
+													class="table table-striped table-bordered table-hover dataTable"
+													role="grid">
+													<thead class="thead-dark">
+														<tr role="row">
+
+															<th class="text-center no-sort">S.No</th>
+															<th class="text-center no-sort">Complaint Number</th>
+															<th class="text-center">Complaint Date</th>
+															<th class="text-center no-sort">Name</th>
+															<th class="text-center no-sort">Mobile Number</th>
+															<th class="text-center">ComplaintType</th>
+															<th class="text-center no-sort ">View</th>
+															<th class="text-center">Call Status</th>
+															<th class="text-center">Updated Date</th>
+														</tr>
+													</thead>
+													<tbody>
+
+													</tbody>
+												</table>
+											</div>
+										</div>
+										<!-- </div> -->
+									</div>
+								</div>
+
+							</div>
+						</div>
+
+
+					</div>
+				</div>
+
+			</div>
+
+			<div id="pageLoader"
+				style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				<div
+					style="position: relative; top: 50%; transform: translateY(-50%);">
+					<div class="spinner-border text-primary" role="status"
+						style="width: 3rem; height: 3rem;">
+						<span class="sr-only">Loading...</span>
+					</div>
+					<!-- Add the 'Please wait' text below the spinner -->
+					<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please
+						wait...</p>
+				</div>
+			</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+
+
+
+	<!--Details button Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+
+	<!-- in the code use to show the download different type microsoft -->
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">	
+	 $(document).ready(function() {
+		 $('#AgentQaqcDatatable').DataTable({
+             dom: 'Bftip',
+             columnDefs: [
+                 { targets: 'no-sort', orderable: false }
+             ],
+             lengthMenu: [
+                 [50, 100, 200, 500, -1],
+                 ['50 rows', '100 rows', '200 rows', 'Show all']
+             ],
+             scrollY: '50vh',
+             fixedColumns: {
+                 left: 1,
+                 right: 1
+             },
+             buttons: [
+                 {
+                     extend: 'pageLength',
+                     className: 'btn btn-warning'
+                 },
+                 {
+                     title: 'Data export',
+                     extend: 'copyHtml5',
+                     text: 'Copy',
+                     className: 'btn btn-secondary',
+                     id: 'copyBtn'
+                 },
+                 {
+                     extend: 'excelHtml5',
+                     text: 'Excel',
+                     className: 'btn btn-secondary',
+                     id: 'excelBtn'
+                 },
+                 {
+                     extend: 'csvHtml5',
+                     text: 'CSV',
+                     className: 'btn btn-secondary',
+                     id: 'csvBtn'
+                 },
+                 {
+                     extend: 'pdfHtml5',
+                     text: 'PDF',
+                     className: 'btn btn-secondary',
+                     id: 'pdfBtn'
+                 }
+             ],
+             fixedHeader: true,
+             autoWidth: true,
+             responsive: true,
+             searching: true,
+             select: false,
+             processing: false
+         });  
+		// Get current year
+	        const currentYear = new Date().getFullYear();
+
+	        // Get reference to the year dropdown
+	        const yearDropdown = document.getElementById('year');
+
+	        // Populate the dropdown with years
+	        for (let year = currentYear; year >= 2010; year--) {
+	            const option = document.createElement('option');
+	            option.value = year;
+	            option.textContent = year;
+	            yearDropdown.appendChild(option);
+	        }
+
+	        
+     	
+
+     	document.getElementById('resetBtn').addEventListener('click', function () {
+     	event.preventDefault();
+     	
+     	window.location.href="/gcc/callcenterqaqc/complaintstatus";
+     	
+     	});
+
+     // Event listener for From Date selection
+ 	   $("#startDate").on("change", function() {
+ 	       const startDate = $(this).val();  // Get the selected start date
+ 	       // Set the min value for To Date to be the selected From Date
+ 	       $("#endDate").attr("min", startDate);
+ 	   });
+
+ 	   // Event listener for To Date selection
+ 	   $("#endDate").on("change", function() {
+ 	       const endDate = $(this).val();  // Get the selected end date
+ 	       // Set the max value for From Date to be the selected To Date
+ 	       $("#startDate").attr("max", endDate);
+ 	   }); 
+     	
+     	document.getElementById('searchBtn').addEventListener('click', function (e) {
+     	    let startDate = document.getElementById('startDate').value;
+     	    let endDate = document.getElementById('endDate').value;
+     	    const complaintNumber = $('#complaintNumber').val().toUpperCase();; // Fetch complaint number from input
+     	    const complaintMobileNumber = $('#complaintMobileNumber').val(); // Fetch mobile number (if exists)
+			const complaintYear=$('#year').val();
+     	    
+			//console.log("startdate: ", startDate);
+     	    //console.log("enddate: ", endDate);
+     	    //console.log("complaintNumber:",complaintNumber);
+     	    //console.log("complaintMobileNumber",complaintMobileNumber);
+     	    //console.log("complaintYear",complaintYear);
+     	    // Check if all required fields are empty
+     	    if (!startDate && !endDate && !complaintNumber && !complaintMobileNumber) {
+     	        Swal.fire({
+     	            icon: 'warning',
+     	            title: 'Error',
+     	            text: 'Please fill in at least one field to proceed.',
+     	            showConfirmButton: true,
+     	            timer: 3000
+     	        });
+     	        e.preventDefault(); // Prevent the default action
+     	        return; // Stop further execution
+     	    }
+
+     	    // Specific validation for startDate and endDate
+     	    if ((startDate && !endDate) || (!startDate && endDate)) {
+     	        Swal.fire({
+     	            icon: 'warning',
+     	            title: 'Error',
+     	            text: 'Please select both start and end dates.',
+     	            showConfirmButton: true,
+     	            timer: 3000
+     	        });
+     	        e.preventDefault();
+     	        return;
+     	    }
+     	    
+     	    if(complaintNumber !== '' && complaintMobileNumber !==''){
+     	    	Swal.fire({
+     	    		icon: 'info',
+     	            title: 'Info',
+     	            text: 'Please Enter any one either ComplaintNumber or MobileNumber',
+     	            showConfirmButton: true,
+     	            
+     	        });
+     	        e.preventDefault();
+     	        return;
+     	    }
+     	    
+     	 //complaintdetails datatable function script
+     	   if (complaintMobileNumber === '' && complaintNumber !== '') {
+     	      		    $('#pageLoader').show();
+
+     	      		    $.ajax({
+     	      		        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+     	      		        type: 'GET',
+     	      		        dataType: 'json',
+     	      		        data: { complaintNumber },
+     	      		        success: function (response) {
+     	      		            $('#pageLoader').hide();
+
+     	      		            // Initialize or update the DataTable
+     	      		            let table = $('#AgentQaqcDatatable').DataTable({
+     	      		                destroy: true, // Reinitialize the DataTable
+     	      		                searching: true, // Enable search
+     	      		               autoWidth: true,
+     	      		              responsive: true,
+     	      		                paging: true,    // Enable pagination
+     	      		                info: true,      // Show table info
+     	      		                data: response ? [response] : [],
+     	      		                columns: [
+     	      		                    { data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' },
+     	      		                    { data: 'complaintid', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complaintdate', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complainantName', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'mobileNumber', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complaintType', defaultContent: '-', className: 'text-center' },
+     	      		                    {
+     	      		                        data: 'complaintid',
+     	      		                        render: function (data) {
+     	      		                            return `
+     	      		                                <button type="button" class="btn btn-info details-btn" 
+     	      		                                    data-complaint-number="${data}">
+     	      		                                    View
+     	      		                                </button>`;
+     	      		                        },
+     	      		                        className: 'text-center'
+     	      		                    },
+     	      		                    { data: 'currentStatus', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'greatestDate', defaultContent: '-', className: 'text-center' }
+     	      		                ],
+     	      		               dom: 'Bfrtip', // Include buttons in the DOM layout
+     	      		              buttons: [
+     	      		                  {
+     	      		                      extend: 'pageLength',
+     	      		                      className: 'btn btn-warning'
+     	      		                  },
+     	      		                  {
+     	      		                      title: 'Data export',
+     	      		                      extend: 'copyHtml5',
+     	      		                      text: 'Copy',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'copyBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'excelHtml5',
+     	      		                      text: 'Excel',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'excelBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'csvHtml5',
+     	      		                      text: 'CSV',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'csvBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'pdfHtml5',
+     	      		                      text: 'PDF',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'pdfBtn'
+     	      		                  }
+     	      		              ],
+     	      		             columnDefs: [
+     	      		                { targets: 'no-sort', orderable: false }
+     	      		            ],
+     	      		            lengthMenu: [
+     	      		                [50, 100, 200, 500, -1],
+     	      		                ['50 rows', '100 rows', '200 rows', 'Show all']
+     	      		            ],
+     	      		            scrollY: '50vh',
+     	      		            fixedColumns: {
+     	      		                left: 1,
+     	      		                right: 1
+     	      		            }
+     	      		            });
+     	      		        },
+     	      		        error: function () {
+     	      		            $('#pageLoader').hide();
+     	      		            $('#AgentQaqcDatatable').DataTable().clear().destroy();
+     	      		            $('#AgentQaqcDatatable tbody').html(`
+     	      		                <tr>
+     	      		                    <td colspan="8" class="text-center text-danger">Failed to load data</td>
+     	      		                </tr>
+     	      		            `);
+     	      		        }
+     	      		    });
+     	      		}
+
+     	      		if (complaintMobileNumber !== '' && complaintNumber === '' && complaintYear !== '') {
+     	      		    $('#pageLoader').show();
+
+     	      		    $.ajax({
+     	      		        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetailsByMobileNumber',
+     	      		        type: 'GET',
+     	      		        dataType: 'json',
+     	      		        data: { complaintMobileNumber, startDate, endDate, complaintYear },
+     	      		        success: function (response) {
+     	      		            $('#pageLoader').hide();
+
+     	      		            // Initialize or update the DataTable
+     	      		            let table = $('#AgentQaqcDatatable').DataTable({
+     	      		                destroy: true, // Reinitialize the DataTable
+     	      		                searching: true, // Enable search
+     	      		               autoWidth: true,
+     	      		              responsive: true,
+     	      		                paging: true,    // Enable pagination
+     	      		                info: true,      // Show table info
+     	      		                order: [],       // Disable initial ordering
+     	      		                data: response && response.status === "success" ? response.complaints : [],
+     	      		                columns: [
+     	      		                    { data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' },
+     	      		                    { data: 'complaintid', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complaintdate', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complainantName', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'mobileNumber', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complaintType', defaultContent: '-', className: 'text-center' },
+     	      		                    {
+     	      		                        data: 'complaintid',
+     	      		                        render: function (data) {
+     	      		                            return `
+     	      		                                <button type="button" class="btn btn-info details-btn" 
+     	      		                                    data-complaint-number="${data}">
+     	      		                                    View
+     	      		                                </button>`;
+     	      		                        },
+     	      		                        className: 'text-center'
+     	      		                    },
+     	      		                    { data: 'currentStatus', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complaintcloseddate', defaultContent: '-', className: 'text-center' }
+     	      		                ],
+     	      		               dom: 'Bfrtip', // Include buttons in the DOM layout
+     	      		              buttons: [
+     	      		                  {
+     	      		                      extend: 'pageLength',
+     	      		                      className: 'btn btn-warning'
+     	      		                  },
+     	      		                  {
+     	      		                      title: 'Data export',
+     	      		                      extend: 'copyHtml5',
+     	      		                      text: 'Copy',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'copyBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'excelHtml5',
+     	      		                      text: 'Excel',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'excelBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'csvHtml5',
+     	      		                      text: 'CSV',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'csvBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'pdfHtml5',
+     	      		                      text: 'PDF',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'pdfBtn'
+     	      		                  }
+     	      		              ],
+     	      		             columnDefs: [
+     	      		                { targets: 'no-sort', orderable: false }
+     	      		            ],
+     	      		            lengthMenu: [
+     	      		                [50, 100, 200, 500, -1],
+     	      		                ['50 rows', '100 rows', '200 rows', 'Show all']
+     	      		            ],
+     	      		            scrollY: '50vh',
+     	      		            fixedColumns: {
+     	      		                left: 1,
+     	      		                right: 1
+     	      		            }
+     	      		            });
+     	      		        },
+     	      		        error: function () {
+     	      		            $('#pageLoader').hide();
+     	      		            $('#AgentQaqcDatatable').DataTable().clear().destroy();
+     	      		            $('#AgentQaqcDatatable tbody').html(`
+     	      		                <tr>
+     	      		                    <td colspan="8" class="text-center text-danger">Failed to load data</td>
+     	      		                </tr>
+     	      		            `);
+     	      		        }
+     	      		    });
+     	      		}
+     	});
+
+     	
+     	
+     	
+     	
+     // Handle the "View" button click
+     	$('#AgentQaqcDatatable').on('click', '.details-btn', function () {
+     	    const complaintNumber = $(this).data('complaint-number');
+     	    
+     	    // Call the `viewDetails` function
+     	    viewDetails(complaintNumber);
+     	});
+
+     	// Display detailed modal
+     	function viewDetails(complaintNumber) {
+     	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+     	    $('#detailsModal').modal('show');
+
+     	    // Fetch the main complaint details
+     	    $.ajax({
+     	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+     	        type: 'GET',
+                data:{complaintNumber:complaintNumber},
+     	        success: function (data) {
+     	           // console.log('Complaint Data:', data);
+
+     	            // Fetch agent response details
+     	            $.ajax({
+     	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+     	                type: 'GET',
+     	                data: { complaintNumber },
+     	                success: function (agentResponse) {
+     	                    //console.log('Agent Response:', agentResponse);
+
+     	                    // Use the logic for building complaint and agent details as HTML
+     	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+     	                    // Update modal content
+     	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+     	                },
+     	                error: function () {
+     	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+     	                }
+     	            });
+     	        },
+     	        error: function () {
+     	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+     	        }
+     	    });
+     	}
+
+     	// Function to generate complaint and agent details HTML
+   function generateDetailsHtml(data, agentResponse) {
+     		
+     	// Helper function to format date to yyyy-mm-dd
+             function formatDate(dateStr) {
+                 if (!dateStr) return 'N/A';
+                 const date = new Date(dateStr);
+                 return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+             }
+    // Format complaint messages
+    let messagesHtml = '';
+    if (data.comments && data.comments.length > 0) {
+        data.comments.forEach((comment) => {
+            const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+                ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+                : '<p style="color: red;">No image available for this comment.</p>';
+
+            messagesHtml += `
+                <div class="comment mb-4">
+                    <div class="row">
+                        <div class="col-2 text-center">
+                            <p class="text-muted">${comment.comment_date}</p>
+                        </div>
+                        <div class="col-10">
+                            <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                            <p>${comment.message || 'No message available'}</p>
+                            <div class="user-image">${commentImageLink}</div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+    } else {
+        messagesHtml = '<p>No comments available.</p>';
+    }
+
+    // Format agent responses
+    let agentRepliedHtml = '';
+    if (agentResponse.length > 0) {
+        agentResponse.forEach((agentItem) => {
+            agentRepliedHtml += `
+                <div class="comment mb-4">
+                    <div class="row">
+                        <div class="col-2 text-center">
+                            <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                        </div>
+                        <div class="col-10">
+                            <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                            <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                            <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+    } else {
+        agentRepliedHtml = '<p>No agent replied messages available.</p>';
+    }
+
+    // Check for user images
+    const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+    const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+        ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+        : '<p style="color: red;">UserImages: No image available.</p>';
+
+    // Combine all sections into the final HTML
+    const detailsHtml = `
+        <div class="row">
+            <div class="col-md-12">
+                <h4>Complaint Person's Details:</h4>
+                <div class="row">
+                    <div class="col-6">
+                        <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                    </div>
+                    <div class="col-6">
+                        <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6">
+                        <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                    </div>
+                    <div class="col-6">
+                        <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6">
+                        <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                    </div>
+                    <div class="col-6">
+                        <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6">
+                        <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                    </div>
+                    <div class="col-6">
+                        <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr>
+        <h4>Complaint Details:</h4>
+        <div class="row">
+            <div class="col-6">
+                <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+            </div>
+            <div class="col-6">
+                <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-6">
+                <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+            </div>
+            <div class="col-6">
+                <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-6">
+                <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+            </div>
+            <div class="col-6">
+                <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+            </div>
+        </div>
+        <div class="row">
+        <div class="col-6">
+            <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+        </div>
+        
+    </div>
+        <hr>
+        <h4>Complaint Messages:</h4>
+        ${messagesHtml}
+        <hr>
+        <h4>Agent Replied Messages:</h4>
+        ${agentRepliedHtml}
+        <hr>
+        ${imageLink}
+    `;
+
+    return detailsHtml;
+}
+
+     	
+     	//function for viewing complaintdetails
+     	
+     	/* function viewDetails(complaintNumber, complaintMode, complaintDept) {
+     	    // Display a loading message while data is being fetched
+     	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+     	    $('#detailsModal').modal('show');
+
+     	    // Fetch the main complaint details
+     	    $.ajax({
+     	        url: `/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails`,
+     	        type: 'GET',
+     	        dataType: 'json',
+     	        data: { complaintNumber: complaintNumber, complaintMode: complaintMode, complaintDept: complaintDept },
+     	        success: function (data) {
+     	            console.log(data);
+
+     	            // Fetch agent response details
+     	            $.ajax({
+     	                url: `/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory`,
+     	                type: 'GET',
+     	                data: { complaintNumber: complaintNumber },
+     	                success: function (agentResponse) {
+     	                    console.log('Agent Response:', agentResponse);
+
+     	                    const agentItem = agentResponse.find(
+     	                        (item) => item.complaint_number === complaintNumber
+     	                    );
+
+     	                    // Helper function to format date to yyyy-mm-dd
+     	                    function formatDate(dateStr) {
+     	                        if (!dateStr) return 'N/A';
+     	                        const date = new Date(dateStr);
+     	                        return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+     	                    }
+
+     	                    // Prepare complaint messages
+     	                    let messagesHtml = '';
+     	                    if (data.comments && data.comments.length > 0) {
+     	                        data.comments.forEach((comment) => {
+     	                            const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+     	                                ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+     	                                : '<p style="color: red;">No image available for this comment.</p>';
+
+     	                            messagesHtml += `
+     	                                <div class="comment mb-4">
+     	                                    <div class="row">
+     	                                        <div class="col-2 text-center">
+     	                                            <p class="text-muted">${comment.comment_date}</p>
+     	                                        </div>
+     	                                        <div class="col-10">
+     	                                            <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+     	                                            <p>${comment.message || 'No message available'}</p>
+     	                                            <div class="user-image">${commentImageLink}</div>
+     	                                        </div>
+     	                                    </div>
+     	                                </div>
+     	                            `;
+     	                        });
+     	                    } else {
+     	                        messagesHtml = '<p>No comments available.</p>';
+     	                    }
+     	                    
+     	                   let agentRepliedHtml = '';
+
+     	                // Iterate through all responses matching the complaint number
+     	                    const matchingResponses = agentResponse.filter(item => item.complaint_number === complaintNumber);
+     	                    if (matchingResponses.length > 0) {
+     	                        matchingResponses.forEach(agentItem => {
+     	                            agentRepliedHtml += `
+     	                                <div class="comment mb-4">
+     	                                    <div class="row">
+     	                                        <div class="col-2 text-center">
+     	                                            <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+     	                                        </div>
+     	                                        <div class="col-10">
+     	                                            <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+     	                                           <p><strong>Remarks: </strong>${agentItem.remarks || 'No remarks provided'}</p>
+     	                                            <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+     	                                            
+     	                                        </div>
+     	                                    </div>
+     	                                </div>
+     	                            `;
+     	                        });
+     	                    } else {
+     	                        agentRepliedHtml = '<p>No agent replied messages available.</p>';
+     	                    }
+
+
+     	                    // Check for user images
+     	                    const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+     	                    const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+     	                        ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+     	                        : '<p style="color: red;">UserImages: No image available.</p>';
+
+     	                    // Combine all details into the modal content
+     	                    const detailsHtml = `
+     	                        <div class="row">
+     	                            <div class="col-md-12">
+     	                                <h4>Complaint Person's Details:</h4>
+     	                                <div class="row">
+     	                                    <div class="col-6">
+     	                                        <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+     	                                    </div>
+     	                                    <div class="col-6">
+     	                                        <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+     	                                    </div>
+     	                                </div>
+     	                                <div class="row">
+     	                                    <div class="col-6">
+     	                                        <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+     	                                    </div>
+     	                                    <div class="col-6">
+     	                                        <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+     	                                    </div>
+     	                                </div>
+     	                                <div class="row">
+     	                                    <div class="col-6">
+     	                                        <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+     	                                    </div>
+     	                                    <div class="col-6">
+     	                                        <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+     	                                    </div>
+     	                                </div>
+     	                                <div class="row">
+     	                                    <div class="col-6">
+     	                                        <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+     	                                    </div>
+     	                                    <div class="col-6">
+     	                                        <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+     	                                    </div>
+     	                                </div>
+     	                            </div>
+     	                        </div>
+     	                        <hr>
+     	                        <h4>Complaint Details:</h4>
+     	                        <div class="row">
+     	                            <div class="col-6">
+     	                                <p><strong>Complaint Dept:</strong> ${complaintDept || 'N/A'}</p>
+     	                            </div>
+     	                            <div class="col-6">
+     	                                <p><strong>Complaint Mode:</strong> ${complaintMode || 'N/A'}</p>
+     	                            </div>
+     	                        </div>
+     	                        <div class="row">
+     	                            <div class="col-6">
+     	                                <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+     	                            </div>
+     	                            <div class="col-6">
+     	                                <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+     	                            </div>
+     	                        </div>
+     	                        <div class="row">
+     	                            <div class="col-6">
+     	                                <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+     	                            </div>
+     	                            <div class="col-6">
+     	                                <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+     	                            </div>
+     	                        </div>
+     	                        <hr>
+     	                        <h4>Complaint Messages:</h4>
+     	                        ${messagesHtml}
+     	                        <hr>
+     	                        <h4>Agent Replied Messages:</h4>
+     	                        ${agentRepliedHtml}
+     	                        <hr>
+     	                        ${imageLink}
+     	                    `;
+
+     	                    // Update the modal content
+     	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+     	                },
+     	                error: function () {
+     	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+     	                }
+     	            });
+     	        },
+     	        error: function () {
+     	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+     	        }
+     	    });
+     	} */
+
+    	
+});
+	 
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/overallreport.html b/src/main/resources/templates/modules/callcenterqaqc/overallreport.html
new file mode 100644
index 0000000..c0232eb
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/overallreport.html
@@ -0,0 +1,537 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+
+</style>
+<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fa fa-list-alt bg-blue"></i>
+									<div class="d-inline">
+										<h5>PGR Reports</h5>
+										<span>1913 PGR Reports</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">Reports</li>
+										<li class="breadcrumb-item active" aria-current="page">Overall Reports</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+					
+					<div class="row mt-4">
+						<div class="col-12">
+							<div class="card">
+								<div class="card-header">
+									<span style="font-size: medium;font-weight: bold;">Reports Filters</span>
+								</div>
+								<div class="card-body">
+									<div class="row">
+										<div class="col-sm-2 mb-2">
+											<label for="startDate" style="font-size: medium;">From Date:</label>
+						                    <input type="date" id="startDate" class="form-control">
+										</div>
+										<div class="col-sm-2 mb-2">
+											<label for="endDate" style="font-size: medium;">To Date:</label>
+						                    <input type="date" id="endDate" class="form-control">
+										</div>
+										
+										<div class="col-sm-2 mb-2">
+								            <label for="stsdropdown" style="font-size: medium;">Status:</label>
+								            <select id="stsdropdown" class="form-control">
+								            <option value="total">Select</option>
+								            <option value="processing">Processing</option>
+								            <option value="reopened">Reopened</option>
+								            <option value="redressed">Action Taken 1</option>
+								            <option value="closed">Action Taken 2</option>
+								            <option value="completed">Final Closure</option>
+											</select>
+										</div>
+										
+										<div class="col-sm-2 mb-2">
+								            <label for="dropdown4" style="font-size: medium;">Group:</label>
+								            <select id="dropdown4" class="form-control">
+								            <option value="">Select</option>
+								               <!--  <option value="">general</option> -->
+								                <!-- Add options here -->
+											</select>
+										</div>
+															
+									
+										<div class="col-sm-2 mb-2">
+											 <label for="dropdown1"  style="font-size: medium;">Type:</label>
+						                     <select id="dropdown1" class="form-control">
+							                 <option value="">Select</option>
+							            	 <!-- <option value="Cleanliness in Parks">Cleanliness in Parks</option> -->
+
+											</select>
+										</div>
+
+										<div class="col-sm-2 mb-2">
+								            <label for="dropdown3" style="font-size: medium;">Mode:</label>
+								            <select id="dropdown3" class="form-control">
+								                <option value="">Select</option>
+								                <!-- <option value="">INTERNET</option> -->
+
+											</select>
+										</div>
+										</div>
+										<div class="row mt-2">
+										<div class="col-sm-2 mb-2">
+											<label for="dropdown2" style="font-size: medium;">Zone:</label>
+						                    <select id="dropdown2" class="form-control">
+						                    <option value="">Select</option>
+						                    <!-- <option value="N01">N01</option> -->
+												<!-- <option value="ALL">ALL</option> -->
+
+											</select>
+										</div>
+										</div>
+									
+									
+									<div class="row mt-4">
+										<div class="col-12 d-flex justify-content-center">
+											<button type="submit" id="searchBtn"
+												class="btn btn-primary mx-2">Search</button>
+
+											<button class="btn btn-danger mx-2" id="resetBtn"
+												name="reset" type="reset">Reset</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+			
+					
+					<div class="row mt-4">
+									<div class="col-md-12">
+										<div class="card">
+										<div class="card-header">
+											<span style="font-size: medium;font-weight: bold;">Reports List</span>
+										</div>
+										<div class="card-body">
+											<div class="table-responsive">
+
+												<table id="ReportDatatable"
+													class="table table-striped table-bordered table-hover dataTable"
+													role="grid">
+													<thead class="thead-dark">
+														<tr role="row">
+
+															<th class="text-center no-sort">S.No</th>
+															<th class="text-center">Zone</th>
+															<th class="text-center">Ward</th>
+															<th class="text-center no-sort">Complaint No</th>
+															<th class="text-center">Reg Date</th>
+															<th class="text-center">ComplaintType</th>	
+															<th class="text-center">Mode</th>													
+															<th class="text-center no-sort">Public Name</th>
+															<th class="text-center">Public Mobile no</th>
+															<th class="text-center no-sort">Address</th>
+															<th class="text-center">Assign To</th>	
+															<th class="text-center">Status</th>														
+																																												
+														</tr>
+													</thead>
+													<tbody>
+
+													</tbody>
+												</table>
+											</div>
+										</div>
+									 </div>
+									</div>
+								</div>
+					
+				</div>
+
+			</div>
+
+			<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				    <div style="position: relative; top: 50%; transform: translateY(-50%);">
+				        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+				            <span class="sr-only">Loading...</span>
+				        </div>
+				        <!-- Add the 'Please wait' text below the spinner -->
+				        <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
+				    </div>
+				</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+
+
+	<!-- in the code use to show the download different type microsoft -->
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">
+	document.addEventListener("DOMContentLoaded", function () {
+	    const complaintTypeDropdown = document.getElementById('dropdown1');
+	    const complaintGroupDropdown = document.getElementById('dropdown4');
+	    const complaintModeDropdown = document.getElementById('dropdown3');
+	    const complaintZoneDropdown = document.getElementById('dropdown2');
+
+	    // Load Complaint Groups
+	    fetch('/gcc/api/callcenterqaqc/getComplaintGroup') 
+	        .then(response => response.json())
+	        .then(data => {
+	            // Clear existing options
+	            complaintGroupDropdown.innerHTML = `<option value="">Select</option>`;
+
+	            // Add options from the API response
+	            data.forEach(complaintGroupName => {
+	                complaintGroupDropdown.innerHTML += `<option value="${complaintGroupName}">${complaintGroupName}</option>`;
+	            });
+	        })
+	        .catch(error => {
+	            console.error('Error fetching complaint groups:', error);
+	        });
+
+	    // Event Listener for Complaint Group Change
+	    complaintGroupDropdown.addEventListener('change', function () {
+	        const selectedGroup = complaintGroupDropdown.value;
+
+	        if (selectedGroup) {
+	            // Fetch Complaint Types based on selected group
+	            fetch(`/gcc/api/callcenterqaqc/getComplaintTypesByGroup?group=${encodeURIComponent(selectedGroup)}`)
+	                .then(response => response.json())
+	                .then(data => {
+	                    // Clear existing options
+	                    complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+
+	                    // Add options from the API response
+	                    data.forEach(complaintTypeName => {
+	                        complaintTypeDropdown.innerHTML += `<option value="${complaintTypeName}">${complaintTypeName}</option>`;
+	                    });
+	                })
+	                .catch(error => {
+	                    console.error('Error fetching complaint types:', error);
+	                });
+	        } else {
+	            // Clear complaint type dropdown if no group is selected
+	            complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+	        }
+	    });
+	    
+	    
+	    // Load all Modes 
+	    fetch('/gcc/api/callcenterqaqc/getModes') 
+	    .then(response => response.json())
+	    .then(data => {
+	        // Clear existing options
+	        complaintModeDropdown.innerHTML = `<option value="">Select</option>`;
+
+	        // Add options from the API response
+	        data.forEach(complaintMode => {
+	        	complaintModeDropdown.innerHTML += `<option value="${complaintMode}">${complaintMode}</option>`;
+	        });
+	    })
+	    .catch(error => {
+	        console.error('Error fetching complaint groups:', error);
+	    });
+	    
+	    
+	 // Load all zones 
+	    fetch('/gcc/api/callcenterqaqc/getZones') 
+	    .then(response => response.json())
+	    .then(data => {
+	        // Clear existing options
+	        complaintZoneDropdown.innerHTML = `<option value="">Select</option>`;
+
+	        // Add options from the API response
+	        data.forEach(complaintZone => {
+	        	complaintZoneDropdown.innerHTML += `<option value="${complaintZone}">${complaintZone}</option>`;
+	        });
+	    })
+	    .catch(error => {
+	        console.error('Error fetching complaint groups:', error);
+	    });
+	    
+	});
+	
+	 $(document).ready(function() {
+
+     	var table = $('#ReportDatatable').DataTable({
+             dom: 'Bftip',
+             columnDefs: [
+                 { targets: 'no-sort', orderable: false }
+             ],
+             lengthMenu: [
+                 [50, 100, 200, 500, -1],
+                 ['50 rows', '100 rows', '200 rows', 'Show all']
+             ],
+             scrollY: '100vh',
+             fixedColumns: {
+                 left: 1,
+                 right: 1
+             },
+             buttons: [
+                 {
+                     extend: 'pageLength',
+                     className: 'btn btn-warning'
+                 },
+                 {
+                     title: 'Data export',
+                     extend: 'copyHtml5',
+                     text: 'Copy',
+                     className: 'btn btn-secondary',
+                     id: 'copyBtn'
+                 },
+                 {
+                     extend: 'excelHtml5',
+                     text: 'Excel',
+                     className: 'btn btn-secondary',
+                     id: 'excelBtn'
+                 },
+                 {
+                     extend: 'csvHtml5',
+                     text: 'CSV',
+                     className: 'btn btn-secondary',
+                     id: 'csvBtn'
+                 },
+                 {
+                     extend: 'pdfHtml5',
+                     text: 'PDF',
+                     className: 'btn btn-secondary',
+                     id: 'pdfBtn'
+                 }
+             ],
+             fixedHeader: true,
+             autoWidth: true,
+             responsive: true,
+             searching: true,
+             select: false,
+             processing: false
+         });
+     	
+     // Event listener for From Date selection
+  	   $("#startDate").on("change", function() {
+  	       const startDate = $(this).val();  // Get the selected start date
+  	       // Set the min value for To Date to be the selected From Date
+  	       $("#endDate").attr("min", startDate);
+  	   });
+
+  	   // Event listener for To Date selection
+  	   $("#endDate").on("change", function() {
+  	       const endDate = $(this).val();  // Get the selected end date
+  	       // Set the max value for From Date to be the selected To Date
+  	       $("#startDate").attr("max", endDate);
+  	   });
+  	   
+  	 	document.getElementById('resetBtn').addEventListener('click', function () {
+      	event.preventDefault();
+      	
+      	window.location.href="/gcc/callcenterqaqc/overallreport";
+      	
+      	});
+  	 	
+  	 	document.getElementById('searchBtn').addEventListener('click', function (e) {
+  	 		
+  	 		
+  	 		let startDate = document.getElementById('startDate').value;
+     	    let endDate = document.getElementById('endDate').value;
+     	    
+     	    let status = document.getElementById('stsdropdown').value;
+     	    let group= document.getElementById('dropdown4').value;
+     	 	let type= document.getElementById('dropdown1').value;
+     	    let mode= document.getElementById('dropdown3').value;
+     	    let zone= document.getElementById('dropdown2').value;
+     	    
+     	   console.log("startdate: ",startDate);
+    	   console.log("enddate: ",endDate);
+    	   console.log("status: ",status);
+    	   console.log("group: ",group);
+    	   console.log("type: ",type);
+    	   console.log("mode: ",mode);
+    	   console.log("zone: ",zone);
+    	   if (!startDate && !endDate) {
+    	        Swal.fire({
+    	            icon: 'warning',
+    	            title: 'Error',
+    	            text: 'Please Select Both From Date and To Date',
+    	            showConfirmButton: true,
+    	            timer: 3000
+    	        });
+    	        e.preventDefault(); // Prevent the default action
+    	        return; // Stop further execution
+    	    }
+    	   const params = new URLSearchParams({
+    	        startDate: startDate,
+    	        endDate: endDate,
+    	        status: status,
+    	        group: group,
+    	        type: type,
+    	        mode: mode,
+    	        zone: zone
+    	    });
+    	   $('#pageLoader').show();
+    	   $.ajax({
+               type: "GET",
+               url: `/gcc/api/callcenterqaqc/getfilterreport?${params.toString()}`, // Append query string to URL
+               contentType: "application/json",
+               success: function (response) {
+            	    console.log("API Response:", response);
+            	    $('#pageLoader').hide();
+            	    if (response.status === "success") {
+            	        console.log("Details Array:", response.details);
+            	        // Ensure details is an array and has at least one entry
+            	        if (Array.isArray(response.details) && response.details.length > 0) {
+            	            let table = $('#ReportDatatable').DataTable({
+            	                destroy: true,
+            	                searching: true,
+            	                autoWidth: true,
+            	                responsive: true,
+            	                paging: true,
+            	                info: true,
+            	                data: response.details,           	                
+            	                columns: [
+            	                    { 
+            	                        data: null, 
+            	                        render: (data, type, row, meta) => meta.row + 1, 
+            	                        className: 'text-center' 
+            	                    },
+            	                    { data: 'Zone', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Ward', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Number', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Opened Date', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Type', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Mode', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Person Name', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Person Number', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Address', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Assign To', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Current Status', defaultContent: '-', className: 'text-center' },
+            	                    
+            	                   
+            	                ],
+            	                dom: 'Bfrtip',
+            	                buttons: [
+   	      		                  {
+   	      		                      extend: 'pageLength',
+   	      		                      className: 'btn btn-warning'
+   	      		                  },
+   	      		                  {
+   	      		                      title: 'Data export',
+   	      		                      extend: 'copyHtml5',
+   	      		                      text: 'Copy',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'copyBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'excelHtml5',
+   	      		                      text: 'Excel',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'excelBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'csvHtml5',
+   	      		                      text: 'CSV',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'csvBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'pdfHtml5',
+   	      		                      text: 'PDF',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'pdfBtn'
+   	      		                  }
+   	      		              ],
+   	      		             columnDefs: [
+   	      		                { targets: 'no-sort', orderable: false }
+   	      		            ],
+   	      		            lengthMenu: [
+   	      		                [50, 100, 200, 500, -1],
+   	      		                ['50 rows', '100 rows', '200 rows', 'Show all']
+   	      		            ],
+   	      		            scrollY: '100vh',
+   	      		            fixedColumns: {
+   	      		                left: 1,
+   	      		                right: 1
+   	      		            }
+   	      		            });
+            	        }
+            	        
+            	    }
+            	    else if (response.status === "nodata") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	                icon: 'warning',
+        	                title: 'No Data',
+        	                text: 'No data available for the selected criteria.'
+        	            });
+        	        }
+            	    else if (response.status === "error") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	            	icon: 'error',
+            	            title: 'Error',
+            	            text: response.message || 'Something went wrong!'
+        	            });
+        	        }
+            	    else {
+            	    	$('#pageLoader').hide();
+            	        Swal.fire({
+            	            icon: 'error',
+            	            title: 'Error',
+            	            text: response.message || 'Something went wrong!'
+            	        });
+            	    }
+            	},
+
+               error: function (error) {
+               	$('#pageLoader').hide();
+               	Swal.fire({
+    	            icon: 'error',
+    	            title: 'Error',
+    	            text: response.message || 'Something went wrong!'
+    	        });
+               }
+           });
+    	   
+  	 	});
+     	
+     });
+	 
+	 
+	</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/pgrcomplaints.html b/src/main/resources/templates/modules/callcenterqaqc/pgrcomplaints.html
new file mode 100644
index 0000000..a5935e1
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/pgrcomplaints.html
@@ -0,0 +1,1362 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<link
+	href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"
+	rel="stylesheet">
+<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">-->
+<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
+<script
+	src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+
+
+<style>
+.required {
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media ( max-width : 767px) {
+	#complaintform label {
+		margin-top: 10px;
+	}
+}
+
+.form-row {
+	margin-bottom: 20px;
+}
+
+.form-step {
+	display: none;
+}
+
+.form-step.active {
+	display: block;
+}
+
+.container {
+	max-width: 100%;
+}
+
+/*css for step 3*/
+.complaint-icons {
+	display: flex;
+	justify-content: space-around;
+	margin-bottom: 20px;
+}
+
+.complaint-icon {
+	text-align: center;
+	cursor: pointer;
+}
+
+.complaint-icon img {
+	width: 50px;
+	height: 50px;
+}
+
+.complaint-fields {
+	display: none;
+}
+
+.complaint-fields.active {
+	display: block;
+}
+
+/*for radio button style*/
+.radio-group {
+	display: flex;
+	align-items: center;
+	/* Ensures all items are aligned to the center */
+}
+
+.radio-item {
+	display: flex;
+	align-items: center;
+	margin-right: 20px;
+	/* Adds space between each radio item */
+}
+
+.radio-item input[type="radio"] {
+	margin-right: 10px;
+	/* Adds space between the radio button and its label */
+	vertical-align: middle;
+	/* Ensures vertical alignment */
+}
+
+.radio-item label {
+	margin: 0;
+	/* Removes any default margins that might affect alignment */
+}
+
+.back-button {
+	background: none;
+	border: none;
+	color: #000;
+	font-size: 16px;
+	cursor: pointer;
+	padding: 0;
+	margin-right: auto;
+	/* Align the button to the left */
+}
+
+.title {
+	text-align: center;
+	flex-grow: 1;
+	font-size: 24px;
+	font-weight: bold;
+	margin: 0;
+}
+
+/*css for map in step2*/
+#map {
+	height: 300px;
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+	max-width: 100%;
+}
+
+#search-container {
+	position: absolute;
+	top: 10px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 1000;
+	width: 500px;
+	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+	background-color: white;
+	border-radius: 4px;
+	padding: 0;
+	/* Removed extra padding to match the input width */
+}
+
+#search-box {
+	width: 100%;
+	/* Ensures the input takes up the entire width of the container */
+	padding: 5px;
+	font-size: 16px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	/* Rounded corners matching the container */
+	box-sizing: border-box;
+	/* Makes sure padding is considered in width */
+}
+
+#suggestions {
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	max-height: 200px;
+	overflow-y: auto;
+	margin-top: 5px;
+	background-color: white;
+	display: none;
+	width: 100%;
+	/* Matches the width of the container and input */
+	box-sizing: border-box;
+	/* Ensures the width includes borders and padding */
+}
+
+#suggestions ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+#suggestions ul li {
+	padding: 5px;
+	cursor: pointer;
+}
+
+#suggestions ul li:hover {
+	background-color: #f0f0f0;
+}
+
+#reader-btn, #invertColorBtn {
+	padding: 5px 10px;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+.loader {
+	border: 16px solid #f3f3f3;
+	/* Light grey */
+	border-top: 16px solid #3498db;
+	/* Blue */
+	border-radius: 50%;
+	width: 120px;
+	height: 120px;
+	animation: spin 2s linear infinite;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -60px 0 0 -100px;
+	/* Center the loader */
+	z-index: 9999;
+	/* Ensure it's on top of everything */
+	display: none;
+	/* Initially hidden */
+}
+
+@keyframes spin { 0% 
+{
+	transform: rotate(0deg);
+}
+
+100%
+{
+transform:rotate(360deg);
+}
+}
+
+#snackbar {
+			visibility: hidden;
+			min-width: 250px;
+			background-color: #333;
+			color: #fff;
+			text-align: center;
+			border-radius: 2px;
+			padding: 16px;
+			position: fixed;
+			z-index: 1;
+			left: 50%;
+			bottom: 30px;
+			font-size: 17px;
+			transform: translateX(-50%);
+		}
+
+		#snackbar.show {
+			visibility: visible;
+			-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+			animation: fadein 0.5s, fadeout 0.5s 2.5s;
+		}
+
+
+@-webkit-keyframes fadein {from { bottom:0;
+	opacity: 0;
+}
+
+to {
+	bottom: 30px;
+	opacity: 1;
+}
+
+}
+@keyframes fadein {from { bottom:0;
+	opacity: 0;
+}
+
+to {
+	bottom: 30px;
+	opacity: 1;
+}
+
+}
+@-webkit-keyframes fadeout {from { bottom:30px;
+	opacity: 1;
+}
+
+to {
+	bottom: 0;
+	opacity: 0;
+}
+
+}
+@keyframes fadeout {from { bottom:30px;
+	opacity: 1;
+}
+
+to {
+	bottom: 0;
+	opacity: 0;
+}
+}
+
+/*for snack bar*/
+</style>
+<body>
+<div id="snackbar"></div>
+
+	<!--[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]-->
+
+	<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-ticket-alt bg-blue"></i>
+									<div class="d-inline">
+										<h5>PGR Complaint Registration</h5>
+										<span>1913 PGR Complaint Registration</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">PGR Register Complaint</li>											
+										<li class="breadcrumb-item active" aria-current="page">Complaint Registration</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+
+					<div class="row inside mt-4">
+
+						<div class="col-md-12">
+							<div class="card" style="margin-top: 0px;">
+
+								<div class="card-body">
+
+
+									<!-- Step 1 -->
+									<!-- Step 1 -->
+									<div class=" form-step active" id="step-1">
+										<!-- <div class="card-body"> -->
+										<h5 class="card-title">1. Complaining Person's Details:</h5>
+										<div class="form-row">
+											<div class="col-md-4">
+												<label for="mobile">Mobile Number:<span class="required">*</span></label>
+												<div class="input-group">
+													<input type="text" id="mobileNo" name="mobileNo"
+														class="form-control mb-1"
+														placeholder="Enter Mobile Number" maxlength="10"
+														minlength="10" required>
+												</div>
+											</div>
+										</div>
+										<div class="form-row">
+											<div class="col-md-4">
+												<label for="name">Name:<span class="required">*</span></label>
+												 <input type="text" class="form-control" id="name"
+													placeholder="Enter your name" required>
+											</div>
+											
+											<div class="col-md-4">
+												<label for="gender" class="ml-4">Gender/பாலினம்:<span
+													class="required">*</span></label>
+												<div class="radio-group mt-2 ml-4">
+													<div class="radio-item">
+														<input type="radio" id="male" name="gender" value="male"
+															checked> <label for="male">Male</label>
+													</div>
+													<div class="radio-item">
+														<input type="radio" id="female" name="gender"
+															value="female"> <label for="female">Female</label>
+													</div>
+													<div class="radio-item">
+														<input type="radio" id="transgender" name="gender"
+															value="transgender"> <label for="transgender">Transgender</label>
+													</div>
+												</div>
+											</div>
+
+											<div class="col-md-4">
+												<label for="email">Email:</label> <input type="email"
+													class="form-control" id="email"
+													placeholder="Enter your email">
+											</div>
+										</div>
+										<button id="nextStep1" class="btn btn-primary float-right"
+											onclick="nextStep('nextStep1')"
+											style="background-color: #414f69;">Next</button>
+										<!-- </div> -->
+									</div>
+									<!--step-2-->
+									<div class=" form-step readable" id="step-2">
+										<!-- <div class="card-body"> -->
+										<h5 class="card-title">2. Complaint Location Details:</h5>
+										<div class="form-row">
+
+											<!-- loader section -->
+											<div id="loader" class="loader" style="display: none;"></div>
+
+											<!--map fields-->
+
+											<div class="col-md-12">
+												<div id="map"></div>
+												<div id="search-container">
+													<input type="text" id="search-box"
+														placeholder="Search for a location...">
+													<div id="suggestions"></div>
+												</div>
+												<div class="row">
+													<div class="col-md-6">
+														<label for="street">Street:</label> <input type="text"
+															class="form-control" id="street">
+													</div>
+
+													<div class="col-md-6">
+														<label for="longitude_field">Longtitude</label> <input
+															type="text" class="form-control" id="longitude_field"
+															name="longtitude">
+													</div>
+													<div class="col-md-6">
+														<label for="latitude_field">Latitide</label> <input
+															type="text" class="form-control" id="latitude_field">
+													</div>
+													<div class="col-md-6">
+														<label for="street_id">Street Id</label> <input
+															type="text" class="form-control" id="street_id">
+													</div>
+													<div class="col-md-6">
+														<label for="landmark">Landmark</label> <input type="text"
+															class="form-control" id="landmark">
+													</div>
+												</div>
+											</div>
+										</div>
+										<button id="prevStep2" class="btn btn-secondary"
+											onclick="prevStep('prevStep2')">Previous</button>
+										<button id="nextStep2" class="btn btn-primary float-right"
+											onclick="nextStep('nextStep2')"
+											style="background-color: #414f69;">Next</button>
+										<!-- </div> -->
+									</div>
+									<!-- Step 3 -->
+									<div class=" form-step active readable" id="step-3">
+										<div class="card-body">
+											<h5 class="card-title">3. Complaint Type:</h5>
+
+											<!-- Icons -->
+											<div class="complaint-icons">
+												<div class="complaint-icon" data-type="specific"
+													data-id="112">
+													<img src="/gcc/assets/images/road.png" alt="Pothole">
+													<p>Pothole</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="97">
+													<img src="/gcc/assets/images/recycle.png" alt="garbage">
+													<p>Garbage</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="104">
+													<img src="/gcc/assets/images/waste-bin.png" alt="broken-bin">
+													<p>Broken-Bin</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="146">
+													<img src="/gcc/assets/images/street-lamp.png" alt="StreetLight">
+													<p>StreetLight</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="199">
+													<img src="/gcc/assets/images/portable-bathroom.png"
+														alt="public-toilet">
+													<p>Public Toilet</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="118">
+													<img src="/gcc/assets/images/mosquito.png" alt="mosquito">
+													<p>Mosquito Menace</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="138">
+													<img src="/gcc/assets/images/tsunami.png" alt="waterstag">
+													<p>WaterStagnation</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="142">
+													<img src="/gcc/assets/images/sewage.png" alt="sewage">
+													<p>Storm Water Drains</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="119">
+													<img src="/gcc/assets/images/dog.png" alt="dog">
+													<p>Street Dog</p>
+												</div>
+												<!--<div class="complaint-icon" data-type="specific" data-id="">
+							<img src="images/bad-weather.png" alt="weather">
+							<p>Tree Fallen</p>
+						</div>-->
+
+												<div class="complaint-icon" data-type="others">
+													<img src="/gcc/assets/images/menu.png" alt="Others">
+													<p>Others</p>
+												</div>
+											</div>
+
+
+											<!-- Specific Complaint Fields -->
+											<div class="complaint-fields active" id="specific-fields">
+												<div class="form-row">
+													<div class="col-md-6">
+														<label for="complaint-title">Complaint Title:</label> <input
+															type="text" class="form-control" id="complaint-title"
+															placeholder="Enter complaint title">
+													</div>
+													<div class="col-md-6">
+														<label for="complaint-id">Complaint Type:</label> <input
+															type="text" class="form-control" id="complaint-id"
+															disabled>
+													</div>
+
+												</div>
+												<div class="form-row">
+													<div class="col-md-6">
+														<label for="othercomplaint-details">Details of
+															Complaint:</label>
+														<textarea class="form-control" id="othercomplaint-details"
+															rows="3" placeholder="Enter complaint details"
+															maxlength="400"></textarea>
+													</div>
+													<div class="col-md-6">
+														<label for="complaint-image">Upload Photo:</label> <input
+															type="file" class="form-control" id="complaint-image"
+															name="Comp_Image"> <span style="color: red;">
+															<p>Upload Photo Less Than 1mb*.</p>
+														</span>
+													</div>
+
+												</div>
+											</div>
+
+											<!-- Others Complaint Fields -->
+											<div class="complaint-fields" id="others-fields">
+												<div class="form-row">
+													<div class="col-md-4">
+														<label for="type">Type:</label> <select
+															class="form-control" id="type">
+															<option value="">Please Select</option>
+														</select>
+													</div>
+													<div class="col-md-4">
+														<label for="sub-type">Sub-Type:</label> <select
+															class="form-control" id="sub-type">
+															<option value="">Select complaint</option>
+														</select>
+													</div>
+													<div class="col-md-4">
+														<label for="uploadothers">Upload Photo:</label> <input
+															type="file" class="form-control" id="uploadothers"
+															accept="image/*"> <span style="color: red;">
+															<p>Upload Photo Less Than 1mb*.</p>
+														</span>
+													</div>
+												</div>
+												<div class="form-row">
+													<div class="col-md-6">
+														<label for="othercomplaintdetailsss">Details of
+															Complaint:</label>
+														<textarea class="form-control"
+															id="othercomplaintdetailsss" rows="3"
+															placeholder="Enter complaint details" maxlength="400"></textarea>
+													</div>
+												</div>
+											</div>
+
+
+											<button id="prevStep3" class="btn btn-secondary"
+												onclick="prevStep('prevStep3')">Previous</button>
+											<button id="nextStep3" class="btn btn-primary float-right"
+												onclick="nextStep('nextStep3')"
+												style="background-color: #414f69;">Next</button>
+										</div>
+									</div>
+
+									<!-- Step 4 -->
+									<div class=" form-step readable" id="step-4">
+										<div class="card-body">
+											<h5 class="card-title">4. Complaint Details:</h5>
+											<table class="table">
+												<tbody>
+													<tr>
+														<td><strong>Name</strong></td>
+														<td>: <span id="summaryName"></span></td>
+														<td><strong>Complaint Location</strong></td>
+														<td>: <span id="summaryStreet"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Mobile Number</strong></td>
+														<td>: <span id="summaryMobile"></span></td>
+														<td><strong>Email Address</strong></td>
+														<td>: <span id="summaryEmail"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Complaint Type</strong></td>
+														<td>: <span id="summaryComplaintType"></span></td>
+														<td><strong>Complaint Title</strong></td>
+														<td>: <span id="summaryComplaintTitle"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Description</strong></td>
+														<td>: <span id="summaryDescription"></span></td>
+														<td><strong>Street Id</strong></td>
+														<td>: <span id="summaryStreetId"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Landmark</strong></td>
+														<td>: <span id="summaryLandmark"></span></td>
+														<td><strong>Latitude</strong></td>
+														<td>: <span id="summaryLatitude"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Longitude</strong></td>
+														<td>: <span id="summaryLongitude"></span></td>
+														<td><strong>Gender</strong></td>
+														<td>: <span id="summaryGender"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Image / Video</strong></td>
+														<td>: <img id="summaryImage" src="#"
+															alt="Uploaded Image/Video" width="100"
+															style="display: none;">
+														</td>
+													</tr>
+												</tbody>
+											</table>
+
+
+
+											<button id="prevStep4" class="btn btn-secondary"
+												onclick="prevStep('prevStep4')">Previous</button>
+
+
+											<button id="submitButton" class="btn btn-success float-right">Submit</button>
+
+										</div>
+									</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
+		src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+	<script
+		src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+	<script src="https://kit.fontawesome.com/a076d05399.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script th:src="@{/js/screenreader.js}"></script>
+
+	<script type="text/javascript">
+
+		//for snackbar script
+		 function showSnackbar(message) {
+			var snackbar = document.getElementById("snackbar");
+			snackbar.innerHTML = message;
+			snackbar.className = "show";
+			setTimeout(function () {snackbar.className = snackbar.className.replace("show", "");}, 3000);
+		} 
+
+		//for snackbar script
+
+		let currentStep = 1;
+		let mapInitialized = false;
+
+		function showStep(step) {
+			$('.form-step').removeClass('active');
+			$('#step-' + step).addClass('active');
+			/* updateProgressBar(step); */
+
+			if (step === 2 && !mapInitialized) {
+				document.getElementById('loader').style.display = 'block'; // Show loader before map initialization
+				setTimeout(initializeMap, 3000); // Load the map after 3 seconds
+				mapInitialized = true; // Ensure the map is only initialized once
+			}
+
+			// If we're on step 4, populate the summary fields
+			if (step === 4) {
+				populateSummary();
+			}
+		}
+
+		function nextStep() {
+			if (currentStep < 4) {
+				// Perform validation for the current step
+				if (validateStep(currentStep)) {
+					currentStep++;
+					showStep(currentStep);
+				}
+			}
+		}
+
+		function prevStep() {
+			if (currentStep > 1) {
+				currentStep--;
+				showStep(currentStep);
+			}
+		}
+
+		/* function updateProgressBar(step) {
+			const progress = (step / 4) * 100;
+			$('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
+		} */
+
+		function validateStep(step) {
+			let isValid = true;
+
+			if (step === 1) {
+				const mobileNo = $('#mobileNo').val().trim();
+				const name = $('#name').val().trim();
+				let email = $('#email').val().trim();
+
+				// Validate mobile number
+				if (mobileNo === '' || !/^\d{10}$/.test(mobileNo)) {
+					isValid = false;
+					showSnackbar("Please enter a valid 10-digit mobile number.");
+				}
+
+				// Validate name
+				if (name === '') {
+					isValid = false;
+					showSnackbar("Please enter your name.");
+				}
+
+				// Check email
+				if (email === '') {
+					email = 'N/A'; // Set N/A if empty
+					$('#email').val(email); // Update the input field with N/A
+				} else if (!/^\S+@\S+\.\S+$/.test(email)) {
+					isValid = false;
+					showSnackbar("Please enter a valid email address.");
+				}
+			} else if (step === 2) {
+				const street = $('#street').val().trim();
+				const longitude = $('#longitude_field').val().trim();
+				const latitude = $('#latitude_field').val().trim();
+				const streetId = $('#street_id').val().trim();
+				const landmark = $('#landmark').val().trim();
+
+				// Validate street
+				if (street === '') {
+					isValid = false;
+					showSnackbar("Please enter the street.");
+				}
+
+				// Validate longitude and latitude
+				if (longitude === '' || isNaN(longitude)) {
+					isValid = false;
+					showSnackbar("Please enter a valid longitude.");
+				}
+				if (latitude === '' || isNaN(latitude)) {
+					isValid = false;
+					showSnackbar("Please enter a valid latitude.");
+				}
+
+				// Validate street ID
+				if (streetId === '') {
+					isValid = false;
+					showSnackbar("Please enter the street ID.");
+				}
+
+				// Validate landmark
+				if (landmark === '') {
+					isValid = false;
+					showSnackbar("Please enter the landmark.");
+				}
+			}
+
+			return isValid;
+		}
+
+		function populateSummary() {
+			const name = $('#name').val();
+			const street = $('#street').val();
+			const mobileNo = $('#mobileNo').val();
+			const gender = $('input[name="gender"]:checked').val();
+			const email = $('#email').val();
+
+			// Check if 'specific-fields' is active and use its values
+			if ($('#specific-fields').hasClass('active')) {
+				const complaintTitle = $('#complaint-title').val();
+				const complaintid = $('#complaint-id').val();
+				const complaintDetails = $('#othercomplaint-details').val(); // Specific complaint details
+
+				$('#summaryComplaintTitle').text(complaintTitle);
+				$('#summaryComplaintType').text(complaintid);
+				$('#summaryDescription').text(complaintDetails);
+
+			} else if ($('#others-fields').hasClass('active')) {
+				const complaintTitle = $('#type').find('option:selected').text();
+				const complaintSubType = $('#sub-type').find('option:selected').text();
+				const complaintDetails = $('#othercomplaintdetailsss').val(); // Others complaint details
+
+				$('#summaryComplaintTitle').text(complaintTitle + ' - ' + complaintSubType);
+				$('#summaryComplaintType').text('Other Complaint');
+				$('#summaryDescription').text(complaintDetails);
+			}
+
+
+			const streetid = $('#street_id').val();
+			const landmark = $('#landmark').val();
+			const latitude = $('#latitude_field').val();
+			const longtitude = $('#longitude_field').val();
+
+			$('#summaryName').text(name);
+			$('#summaryStreet').text(street);
+			$('#summaryMobile').text(mobileNo);
+			$('#summaryGender').text(gender);
+			$('#summaryEmail').text(email);
+			$('#summaryStreetId').text(streetid);
+			$('#summaryLandmark').text(landmark);
+			$('#summaryLatitude').text(latitude);
+			$('#summaryLongitude').text(longtitude);
+
+			// Handle image preview
+			/*		const fileInput = $('#complaint-image')[0];  // Assuming this is for the "Others" section
+					if (fileInput.files && fileInput.files[0]) {
+						const reader = new FileReader();
+						reader.onload = function (e) {
+							$('#summaryImage').attr('src', e.target.result).show();
+						}
+						reader.readAsDataURL(fileInput.files[0]);
+					} else {
+						$('#summaryImage').hide();
+					}*/
+
+			// If there's a separate image input for the specific form, handle it similarly:
+			// Check if specific fields section is active
+			if ($('#specific-fields').hasClass('active')) {
+				const specificFileInput = $('#complaint-image')[0]; // Example ID for specific form
+				if (specificFileInput.files && specificFileInput.files[0]) {
+					const reader = new FileReader();
+					reader.onload = function (e) {
+						$('#summaryImage').attr('src', e.target.result).show();
+					};
+					reader.readAsDataURL(specificFileInput.files[0]);
+				} else {
+					$('#summaryImage').hide(); // Hide the image if no file is selected
+				}
+			}
+			// Check if "Others" section is active
+			else if ($('#others-fields').hasClass('active')) {
+				const fileInput = $('#uploadothers')[0]; // Assuming this is for the "Others" section
+				if (fileInput.files && fileInput.files[0]) {
+					const reader = new FileReader();
+					reader.onload = function (e) {
+						$('#summaryImage').attr('src', e.target.result).show();
+					};
+					reader.readAsDataURL(fileInput.files[0]);
+				} else {
+					$('#summaryImage').hide(); // Hide the image if no file is selected
+				}
+			} else {
+				$('#summaryImage').hide(); // Default hide if no section is active
+			}
+
+
+
+
+
+		}
+
+
+		$(document).ready(function () {
+			showStep(currentStep);
+		});
+
+
+
+
+
+		$(document).ready(function () {
+			showStep(currentStep);
+		});
+
+
+		//for step3 onclick function
+		$(document).ready(function () {
+			// On icon click
+			$('.complaint-icon').click(function () {
+				const type = $(this).data('type'); // Get the type (specific or others)
+				const title = $(this).find('p').text().trim(); // Get the icon name (complaint title)
+				const complaintId = $(this).data('id'); // Get the complaint ID
+
+				// Toggle complaint fields based on type
+				$('.complaint-fields').removeClass('active');
+
+				if (type === 'specific') {
+					$('#specific-fields').addClass('active'); // Show specific fields form
+					$('#others-fields').removeClass('active'); // Hide others form
+					$('#complaint-title').val(title); // Set the complaint title to the icon name
+					$('#complaint-id').val(complaintId); // Set the complaint ID to the corresponding ID
+				} else if (type === 'others') {
+					$('#others-fields').addClass('active'); // Show others form
+					$('#specific-fields').removeClass('active'); // Hide specific fields form
+					$('#complaint-title').val(''); // Clear the complaint title for 'Others'
+					$('#complaint-id').val(''); // Clear the complaint ID for 'Others'
+				}
+			});
+		});
+
+
+
+		//for complaint group and complainttype wise options dropdown api
+		$(document).ready(function () {
+			const $type = $('#type');
+			const $subType = $('#sub-type');
+
+			$subType.prop('disabled', true);
+
+			// Fetch and populate the Type dropdown
+			$.ajax({
+				url: '/gcc/api/callcenterqaqc/pgrcomplaint/getComplaintCategories',
+				method: 'GET',
+				success: function (response) {
+
+					const data = typeof response === 'string' ? JSON.parse(response) : response;
+					//console.log('Response:', response); // Log the response to verify
+					let optionsHtml = '<option value="">Please Select</option>';
+					data.ComplaintCategoryListResult.forEach(function (group) {
+						optionsHtml += `<option value="${group.groupid}">${group.groupname}</option>`;
+					});
+					$type.html(optionsHtml);
+				},
+				error: function (error) {
+					console.error('Error fetching complaint categories:', error);
+				}
+			});
+
+			// Handle Type dropdown change
+			$type.change(function () {
+				const selectedType = $(this).val();
+				$subType.empty().append('<option value="">Select complaint</option>');
+
+				if (selectedType) {
+
+					$.ajax({
+						url: `/gcc/api/callcenterqaqc/pgrcomplaint/getComplaintSubTypes?groupId=${selectedType}`,
+						method: 'GET',
+						success: function (response) {
+							const data = typeof response === 'string' ? JSON.parse(response) : response;
+							const selectedGroup = data.ComplaintCategoryListResult[0];
+
+							//console.log(data);
+
+
+							if (selectedGroup && selectedGroup.group) {
+								$subType.prop('disabled', false);
+								selectedGroup.group.forEach(function (complaint) {
+									$subType.append(`<option value="${complaint.id}">${complaint.complaintname}</option>`);
+								});
+							} else {
+								$subType.prop('disabled', true);
+							}
+						},
+						error: function (error) {
+							console.error('Error fetching sub-types:', error);
+							$subType.prop('disabled', true);
+						}
+					});
+				} else {
+					$subType.prop('disabled', true);
+				}
+			});
+		});
+
+		//api for saving
+		//for sweet alert
+		/* function showSuccessAlert() {
+			Swal.fire({
+				icon: 'success',
+				title: 'Complaint Registration Success',
+				text: 'Complaint Number 123456. Use this Number for Complaint Status Check.',
+				confirmButtonText: 'Back to Home',
+				confirmButtonColor: '#3085d6',
+			}).then((result) => {
+				if (result.isConfirmed) {
+					window.location.href = 'home';
+				}
+			});
+		} */
+
+
+		//Script For Map
+
+		var suggestedRoadName;
+		var suggestedWard;
+		var suggestedZone;
+		var suggestedRoadId;
+
+		function initializeMap() {
+			// Create the map
+			var map = L.map('map', {attributionControl: false}).setView([13.0827, 80.2707], 9);
+
+			// Add tile layer and track loading status
+			var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+				maxZoom: 19,
+				attributionControl: false,
+			}).addTo(map);
+
+			// Hide loader once the map tiles are fully loaded
+			tileLayer.on('load', function () {
+				document.getElementById('loader').style.display = 'none';
+				document.getElementById('map').style.visibility = 'visible'; // Ensure map is visible
+			});
+
+			var currentMarker = null;
+
+			// Handle map click events
+			map.on('click', function (e) {
+				var lat = e.latlng.lat;
+				var lng = e.latlng.lng;
+
+				if (currentMarker) {
+					map.removeLayer(currentMarker);
+				}
+
+				currentMarker = L.marker([lat, lng]).addTo(map);
+
+				fetchLocationInfoByMap(lat, lng, currentMarker);
+			});
+
+			// Handle input events in the search box
+			document.getElementById('search-box').addEventListener('input', function () {
+				var query = this.value.trim();
+				if (query.length > 2) {
+					fetchSuggestions(query);
+				} else {
+					document.getElementById('suggestions').style.display = 'none';
+				}
+			});
+
+			// Handle click events on suggestions
+			document.getElementById('suggestions').addEventListener('click', function (e) {
+				if (e.target.tagName === 'LI') {
+					var latlngArray = JSON.parse(e.target.dataset.latlng);
+
+					suggestedRoadId = e.target.dataset.roadId;
+					suggestedRoadName = e.target.dataset.roadName;
+					suggestedWard = e.target.dataset.ward;
+					suggestedZone = e.target.dataset.zone;
+
+					// Check if the data is in the correct format
+					if (Array.isArray(latlngArray) && latlngArray.every(item => Array.isArray(item) && item.length === 2 && typeof item[0] === 'number' && typeof item[1] === 'number')) {
+
+						// Calculate the average latitude and longitude
+						var totalLat = 0;
+						var totalLng = 0;
+						latlngArray.forEach(function (coords) {
+							totalLat += coords[1]; // Latitude
+							totalLng += coords[0]; // Longitude
+						});
+
+						var avgLat = totalLat / latlngArray.length;
+						var avgLng = totalLng / latlngArray.length;
+
+						var latlng = [avgLat, avgLng];
+						map.setView(latlng, 14);
+
+						if (currentMarker) {
+							map.removeLayer(currentMarker);
+						}
+
+						currentMarker = L.marker(latlng).addTo(map);
+
+						fetchLocationInfoBySuggestions(latlng[0], latlng[1], currentMarker);
+
+						// Clear the search box value
+						document.getElementById('search-box').value = '';
+
+						// Hide the suggestions
+						document.getElementById('suggestions').style.display = 'none';
+					} else {
+						// Convert the incorrect format into the correct format
+						const flattenCoordinates = (data) => {
+							return data.reduce((acc, item) => {
+								if (Array.isArray(item) && Array.isArray(item[0])) {
+									// If item is a nested array, flatten it
+									acc.push(...flattenCoordinates(item));
+								} else if (Array.isArray(item) && item.length === 2 && typeof item[0] === 'number' && typeof item[1] === 'number') {
+									// If item is a coordinate pair, add it to the list
+									acc.push(item);
+								}
+								return acc;
+							}, []);
+						};
+
+						// Flatten the nested latlngArray
+						var flattenedLatlngArray = flattenCoordinates(latlngArray);
+
+						// Now, continue with the same logic as before
+						var totalLat = 0;
+						var totalLng = 0;
+						flattenedLatlngArray.forEach(function (coords) {
+							totalLat += coords[1]; // Latitude
+							totalLng += coords[0]; // Longitude
+						});
+
+						var avgLat = totalLat / flattenedLatlngArray.length;
+						var avgLng = totalLng / flattenedLatlngArray.length;
+
+						var latlng = [avgLat, avgLng];
+						map.setView(latlng, 14);
+
+						if (currentMarker) {
+							map.removeLayer(currentMarker);
+						}
+
+						currentMarker = L.marker(latlng).addTo(map);
+
+						fetchLocationInfoBySuggestions(latlng[0], latlng[1], currentMarker);
+
+						// Clear the search box value
+						document.getElementById('search-box').value = '';
+
+						// Hide the suggestions
+						document.getElementById('suggestions').style.display = 'none';
+					}
+				}
+			});
+		}
+
+		function fetchSuggestions(query) {
+			// ArcGIS API URL to fetch suggestions based on the input query
+			const arcgisSuggestionUrl = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/Hosted/Road_API/FeatureServer/0/query?where=UPPER(road_name)%20LIKE%20'%25${query.toUpperCase()}%25'&outFields=road_name,zone,ward,road_id&returnGeometry=true&f=geojson`;
+
+			fetch(arcgisSuggestionUrl)
+				.then(response => response.json())
+				.then(data => {
+					var suggestions = document.getElementById('suggestions');
+					suggestions.innerHTML = '';
+
+					if (data.features && data.features.length > 0) {
+						suggestions.style.display = 'block';
+						var ul = document.createElement('ul');
+						data.features.forEach(function (result) {
+							var lat = result.geometry.coordinates[1];
+							var lng = result.geometry.coordinates[0];
+							var roadName = result.properties.road_name || 'Unknown Road';
+							var zone = result.properties.zone || 'Unknown Zone';
+							var ward = result.properties.ward || 'Unknown Ward';
+							var roadId = result.properties.road_id || 'Unknown Road ID'
+
+							// Creating the suggestion item with road name, zone, and ward
+							var li = document.createElement('li');
+							li.textContent = `${roadName} - Zone: ${zone}, Ward: ${ward}`;
+							li.dataset.latlng = JSON.stringify([lat, lng]);
+							li.dataset.roadName = roadName;
+							li.dataset.roadId = roadId;
+							li.dataset.zone = zone;
+							li.dataset.ward = ward;
+							ul.appendChild(li);
+						});
+						suggestions.appendChild(ul);
+					} else {
+						suggestions.style.display = 'none';
+					}
+				})
+				.catch(error => console.error('Error fetching suggestions:', error));
+		}
+
+		function fetchLocationInfoByMap(lat, lng, marker) {
+			const arcgisUrl = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/Hosted/Road_API/FeatureServer/0/query?where=&objectIds=&time=&geometry=%7B%22y%22%3A${lat}%2C%22x%22%3A${lng}%7D&geometryType=esriGeometryEnvelope&inSR=4326&defaultSR=4326&spatialRel=esriSpatialRelIntersects&distance=25&units=esriSRUnit_Meter&relationParam=&outFields=zone%2Cward%2Croad_id%2Croad_name&returnGeometry=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&gdbVersion=&historicMoment=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=xyFootprint&resultOffset=&resultRecordCount=&returnTrueCurves=false&returnCentroid=false&timeReferenceUnknownClient=false&maxRecordCountFactor=&sqlFormat=none&resultType=&datumTransformation=&lodType=geohash&lod=&lodSR=&f=geojson`;
+
+			fetch(arcgisUrl)
+				.then(response => response.json())
+				.then(data => {
+					console.log(data);
+					let info;
+					if (data.features && data.features.length > 0) {
+						const properties = data.features[0].properties;
+						const roadName = properties.road_name || 'N/A';
+						const zone = properties.zone || 'N/A';
+						const ward = properties.ward || 'N/A';
+						const roadId = properties.road_id || 'N/A';
+
+						info = `Road Name: ${roadName}<br>Zone: ${zone}<br>Ward: ${ward}<br>Latitude: ${lat}<br>Longitude: ${lng}`;
+						document.getElementById("street").value = roadName;
+						document.getElementById("latitude_field").value = lat;
+						document.getElementById("longitude_field").value = lng;
+						document.getElementById("street_id").value = roadId;
+						document.getElementById("landmark").value = roadName;
+						marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
+					} else {
+						document.getElementById("street").value = "No road data found for this location";
+						document.getElementById("latitude_field").value = "No latitude data found for this location";
+						document.getElementById("longitude_field").value = "No latitude data found for this location";
+						document.getElementById("street_id").value = "No street id data found for this location";
+						document.getElementById("landmark").value = "No landmark data found for this location";
+						info = `No road data found for this location`
+						marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
+					}
+				})
+				.catch(error => {
+					console.error('Error fetching road data:', error);
+					marker.bindTooltip(`Error fetching road data.<br>Latitude: ${lat}<br>Longitude: ${lng}`, {permanent: false, direction: 'top'}).openTooltip();
+				});
+		}
+
+		function fetchLocationInfoBySuggestions(lat, lng, marker) {
+			const arcgisUrl = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/Hosted/Road_API/FeatureServer/0/query?where=&objectIds=&time=&geometry=%7B%22y%22%3A${lat}%2C%22x%22%3A${lng}%7D&geometryType=esriGeometryEnvelope&inSR=4326&defaultSR=4326&spatialRel=esriSpatialRelIntersects&distance=25&units=esriSRUnit_Meter&relationParam=&outFields=zone%2Cward%2Croad_id%2Croad_name&returnGeometry=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&gdbVersion=&historicMoment=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=xyFootprint&resultOffset=&resultRecordCount=&returnTrueCurves=false&returnCentroid=false&timeReferenceUnknownClient=false&maxRecordCountFactor=&sqlFormat=none&resultType=&datumTransformation=&lodType=geohash&lod=&lodSR=&f=geojson`;
+
+			fetch(arcgisUrl)
+				.then(response => response.json())
+				.then(data => {
+					console.log(data);
+					let info;
+					if (data.features && data.features.length > 0) {
+						const properties = data.features[0].properties;
+						const roadName = properties.road_name || 'N/A';
+						const zone = properties.zone || 'N/A';
+						const ward = properties.ward || 'N/A';
+						const roadId = properties.road_id || 'N/A';
+
+						info = `Road Name: ${roadName}<br>Zone: ${zone}<br>Ward: ${ward}<br>Latitude: ${lat}<br>Longitude: ${lng}`;
+						document.getElementById("street").value = roadName;
+						document.getElementById("latitude_field").value = lat;
+						document.getElementById("longitude_field").value = lng;
+						document.getElementById("street_id").value = roadId;
+						document.getElementById("landmark").value = roadName;
+						marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
+					} else {
+						document.getElementById("street").value = suggestedRoadName;
+						document.getElementById("latitude_field").value = lat;
+						document.getElementById("longitude_field").value = lng;
+						document.getElementById("street_id").value = suggestedRoadId;
+						document.getElementById("landmark").value = suggestedRoadName;
+						info = `Road Name: ${suggestedRoadName}<br>Zone: ${suggestedZone}<br>Ward: ${suggestedWard}<br>Latitude: ${lat}<br>Longitude: ${lng}`
+						marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
+					}
+				})
+				.catch(error => {
+					console.error('Error fetching road data:', error);
+					marker.bindTooltip(`Error fetching road data.<br>Latitude: ${lat}<br>Longitude: ${lng}`, {permanent: false, direction: 'top'}).openTooltip();
+				});
+		}
+		
+		$(document).ready(function () {
+			$('#submitButton').click(function (e) {
+				e.preventDefault(); // Prevent the default form submission
+
+				// Collect data from the form fields
+				var complainantName = $('#summaryName').text().trim();
+				var complainantAddr = $('#summaryStreet').text().trim();
+				var mobileNo = $('#summaryMobile').text().trim();
+				var email = $('#summaryEmail').text().trim();
+				var complaintType = $('#summaryComplaintType').text().trim();
+				var complaintTitle = $('#summaryComplaintTitle').text().trim();
+				var complaintDetails = $('#summaryDescription').text().trim();
+				var streetId = $('#summaryStreetId').text().trim();
+				var landmark = $('#summaryLandmark').text().trim();
+				var latitude = $('#summaryLatitude').text().trim();
+				var longtitude = $('#summaryLongitude').text().trim(); // Note the misspelling
+				var gender = $('#summaryGender').text().trim();
+				var imageSrc = $('#summaryImage').attr('src');
+
+				/* console.log({
+					ComplainantName: complainantName,
+					ComplainantAddr: complainantAddr,
+					MobileNo: mobileNo,
+					Email: email,
+					ComplaintType: complaintType,
+					ComplaintTitle: complaintTitle,
+					ComplaintDetails: complaintDetails,
+					StreetId: streetId,
+					Comp_Image: imageSrc,
+					latitude: latitude,
+					longtitude: longtitude,
+					Landmark: landmark,
+					gender: gender
+				}); */
+
+				// AJAX call to your backend controller
+				$.ajax({
+					url: '/gcc/api/callcenterqaqc/pgrcomplaint/register', // Update to your Spring Boot endpoint
+					type: 'POST',
+					data: {
+						ComplainantName: complainantName,
+						ComplainantAddr: complainantAddr,
+						MobileNo: mobileNo,
+						Email: email,
+						ComplaintType: complaintType,
+						ComplaintTitle: complaintTitle,
+						ComplaintDetails: complaintDetails,
+						StreetId: streetId,
+						Comp_Image: imageSrc,
+						latitude: latitude,
+						longtitude: longtitude,
+						Landmark: landmark,
+						gender: gender
+					},
+					success: function (response) {
+						// SweetAlert upon success
+						 //console.log("API Response:", response);
+						// Ensure response is a JavaScript object
+						    if (typeof response === "string") {
+						        try {
+						            response = JSON.parse(response);
+						        } catch (error) {
+						            console.error("Failed to parse response:", error);
+						        }
+						    }
+						
+						 // Access the Complaint Number safely
+						    let complaintNumber = response["Complaint Number"];
+						    if (!complaintNumber || complaintNumber === "null" || complaintNumber === null) {
+						        complaintNumber = "N/A";
+						    }
+						
+						Swal.fire({
+							title: 'Success!',
+					        text: `Your complaint has been submitted successfully. Your Complaint Number is ${complaintNumber}. It will be sent to your mobile number.`,
+							icon: 'success',
+							allowOutsideClick: false, // Disable clicking outside the modal to close it
+		                    allowEscapeKey: false, // Disable escape key to close the modal
+		                    allowEnterKey: false, // Disable enter key to close the modal
+		                    showConfirmButton: true, // Ensure the confirm button is visible
+							confirmButtonText: 'OK'
+						}).then((result) => {
+							if (result.isConfirmed) {
+								
+								window.location.href = '/gcc/callcenterqaqc/pgrcomplaint';
+							}
+						});
+					},
+					error: function (xhr, status, error) {
+						// Improved error handling
+						console.log('Error:', xhr.responseText, status, error);
+						alert('Error: ' + xhr.status + ' ' + xhr.statusText);
+					}
+				});
+			});
+		});
+        
+
+		/*     html: `Your complaint has been submitted successfully. Your Complaint Number is <strong>${complaintNumber}</strong>. It will be sent to your mobile number.`, */
+        </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/qaqcadminsettings.html b/src/main/resources/templates/modules/callcenterqaqc/qaqcadminsettings.html
new file mode 100644
index 0000000..d0a67ed
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/qaqcadminsettings.html
@@ -0,0 +1,476 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.required{
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media (max-width: 767px) 
+{
+	#qaqcRequestForm label{
+		margin-top: 10px;
+	} 
+}
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-edit bg-blue"></i>
+									<div class="d-inline">	
+										<h5>Admin Settings</h5>
+										<span>1913 Admin Setting for Select Agents inbound or outbound</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">Admin Settings</li>
+										<li class="breadcrumb-item active" aria-current="page">Admin Settings</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                        
+                      
+                      <div class="row mt-4">
+                      
+
+					
+						<div class="col-md-12">
+							<div class="card" style="margin-top: 0px;">
+								<div class="card-header justify-content-between align-items-center">
+									<h3><b>Admin Settings</b></h3>
+									
+								</div>
+								<div class="card-body">
+								
+									 
+									    <div class="form-group">  
+										    <div class="row">
+										        <div class="col-sm-12 col-md-3">
+										            <label for="productivity_count">Productivity Count Per Agent<span class="required">*</span></label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="productivity_count" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].productivity_count : 0}" 
+										                >
+										        </div>	
+										        <div class="col-sm-12 col-md-3">
+										            <label for="total_count">Total Agents</label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="total_count" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].total_count : 0}" 
+										                readonly>
+										        </div>
+										        <div class="col-sm-12 col-md-3">
+										            <label for="assigned">Assigned Agents</label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="assigned" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].assigned : 0}" 
+										                readonly>
+										        </div>
+										        <div class="col-sm-12 col-md-3">
+										            <label for="notassigned">Not Assigned Agents</label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="notassigned" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].notassigned : 0}" 
+										                readonly>
+										        </div>
+										        
+										        
+										    </div>
+										    
+										    <div class="row mt-3">
+										    	<div class="col-sm-12 col-md-3">
+										            <label for="inbound_count">Inbound Agents</label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="inbound_count" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].inbound_count : 0}" 
+										                readonly>
+										        </div>
+										        
+										        <div class="col-sm-12 col-md-3">
+										            <label for="outbound_count">Outbound Agents</label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="outbound_count" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].outbound_count : 0}" 
+										                readonly>
+										        </div>
+										    </div>
+										</div>
+									
+									    <div class="form-group text-center">
+									        <button type="submit" class="btn btn-primary" id="requestSubmit">Submit</button>
+									    </div>																	
+								</div>
+							</div>
+						</div>
+						
+						
+						
+						<div class="col-md-12">
+						    <div class="card">
+						        <div class="card-block">
+						            <div class="page-header-title">
+						                <h5 style="margin: 0; font-weight: bold;">Agent List</h5>
+						                <hr>
+						            </div>
+						
+						            <div>
+						                <table id="QaqcDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+						                    <thead class="thead-dark">
+						                        <tr role="row">
+						                            <th class="text-center">S.No</th> 
+						                            <th class="text-center">Agent ID</th> 
+						                            <th class="text-center">Name</th> 
+						                            <th class="text-center">Phone No</th>
+						                            <th class="text-center">
+											            <div class="d-inline-flex align-items-center">
+											                <input type="checkbox" id="selectAllInbound" title="Select All InBound" style="margin-right: 5px;">
+											                <span>InBound</span>
+											            </div>
+											        </th>
+											        <th class="text-center">
+											            <div class="d-inline-flex align-items-center">
+											                <input type="checkbox" id="selectAllOutbound" title="Select All OutBound" style="margin-right: 5px;">
+											                <span>OutBound</span>
+											            </div>
+											        </th>
+						                        </tr>
+						                    </thead>
+						                    <tbody>
+						                        <!-- Populate the table dynamically using Thymeleaf -->
+						                        <tr th:each="agent, iterStat : ${Agents}">
+						                            <td th:text="${iterStat.index + 1}" class="text-center"></td>
+						                            <td th:text="${agent.agent_id}" class="text-center"></td>
+						                            <td th:text="${agent.agent_name}" class="text-center"></td>
+						                            <td th:text="${agent.mobile_number}" class="text-center"></td>
+						                            <td class="text-center">
+						                                <!-- Inbound checkbox, checked if calling_type is INBOUND -->
+						                                <input type="checkbox" th:id="'inbound_' + ${agent.agent_id}" th:checked="${'INBOUND'.equals(agent.calling_type)}">
+						                            </td>
+						                            <td class="text-center">
+						                                <!-- Outbound checkbox, checked if calling_type is OUTBOUND -->
+						                                <input type="checkbox" th:id="'outbound_' + ${agent.agent_id}" th:checked="${'OUTBOUND'.equals(agent.calling_type)}">
+						                            </td>
+						                        </tr>
+						                    </tbody>
+						                </table>
+						
+						                <!-- Center the Submit button -->
+						                <div class="text-center">
+						                    <button type="button" class="btn btn-primary" id="submitBtn">Click to Assign</button>
+						                </div>
+						            </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 src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        
+        <script type="text/javascript">
+        $(document).ready(function() {
+
+        	var table = $('#QaqcDatatable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                ],
+                scrollY: '50vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: [
+                    {
+                        extend: 'pageLength',
+                        className: 'btn btn-warning'
+                    },
+                    {
+                        title: 'Data export',
+                        extend: 'copyHtml5',
+                        text: 'Copy',
+                        className: 'btn btn-secondary',
+                        id: 'copyBtn'
+                    },
+                    {
+                        extend: 'excelHtml5',
+                        text: 'Excel',
+                        className: 'btn btn-secondary',
+                        id: 'excelBtn'
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        text: 'CSV',
+                        className: 'btn btn-secondary',
+                        id: 'csvBtn'
+                    },
+                    {
+                        extend: 'pdfHtml5',
+                        text: 'PDF',
+                        className: 'btn btn-secondary',
+                        id: 'pdfBtn'
+                    }
+                ],
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false
+            });
+        });
+        
+        $(document).ready(function () {
+            let lastClickedColumn = null; // Track the last clicked "Select All" checkbox
+
+            // Handle "Select All" for InBound
+            $('#selectAllInbound').on('change', function () {
+                if (this.checked) {
+                    // Uncheck the "Select All" checkbox in the OutBound column
+                    $('#selectAllOutbound').prop('checked', false);
+                    lastClickedColumn = 'Inbound';
+
+                    // Check all checkboxes in the InBound column
+                    $('#QaqcDatatable tbody input[id^="inbound_"]').prop('checked', true);
+
+                    // Uncheck all checkboxes in the OutBound column
+                    $('#QaqcDatatable tbody input[id^="outbound_"]').prop('checked', false);
+                } else {
+                    // Uncheck all checkboxes in the InBound column
+                    $('#QaqcDatatable tbody input[id^="inbound_"]').prop('checked', false);
+                }
+            });
+
+            // Handle "Select All" for OutBound
+            $('#selectAllOutbound').on('change', function () {
+                if (this.checked) {
+                    // Uncheck the "Select All" checkbox in the InBound column
+                    $('#selectAllInbound').prop('checked', false);
+                    lastClickedColumn = 'Outbound';
+
+                    // Check all checkboxes in the OutBound column
+                    $('#QaqcDatatable tbody input[id^="outbound_"]').prop('checked', true);
+
+                    // Uncheck all checkboxes in the InBound column
+                    $('#QaqcDatatable tbody input[id^="inbound_"]').prop('checked', false);
+                } else {
+                    // Uncheck all checkboxes in the OutBound column
+                    $('#QaqcDatatable tbody input[id^="outbound_"]').prop('checked', false);
+                }
+            });
+
+            // Ensure individual checkboxes deselect the "Select All" if unchecked
+            $('#QaqcDatatable').on('change', 'input[id^="inbound_"], input[id^="outbound_"]', function () {
+                const agentId = $(this).closest('tr').find('td:eq(1)').text().trim();
+
+                // Uncheck "Select All" if any checkbox in its column is deselected
+                if ($(this).attr('id').includes('inbound')) {
+                    if (!this.checked) {
+                        $('#selectAllInbound').prop('checked', false);
+                    }
+                    $('#outbound_' + agentId).prop('checked', false);
+                } else if ($(this).attr('id').includes('outbound')) {
+                    if (!this.checked) {
+                        $('#selectAllOutbound').prop('checked', false);
+                    }
+                    $('#inbound_' + agentId).prop('checked', false);
+                }
+            });
+        });
+
+                
+        $(document).ready(function () {
+            // Ensure only one checkbox is selected at a time (Inbound or Outbound)
+            $('#QaqcDatatable').on('change', 'input[type="checkbox"]', function () {
+                var agentId = $(this).closest('tr').find('td:eq(1)').text().trim(); // Get agent_id from the second column
+                if ($(this).attr('id').includes('inbound')) {
+                    // If Inbound checkbox is selected, uncheck Outbound
+                    $('#outbound_' + agentId).prop('checked', false);
+                } else if ($(this).attr('id').includes('outbound')) {
+                    // If Outbound checkbox is selected, uncheck Inbound
+                    $('#inbound_' + agentId).prop('checked', false);
+                }
+            });
+           
+            
+
+            $('#submitBtn').click(function () {
+                var selectedAgents = [];
+                $('#QaqcDatatable tbody tr').each(function () {
+                    var agentId = $(this).find('td:eq(1)').text().trim(); // Get agent_id from the second column
+                    var isInboundChecked = $(this).find('input[id="inbound_' + agentId + '"]').prop('checked');
+                    var isOutboundChecked = $(this).find('input[id="outbound_' + agentId + '"]').prop('checked');
+
+                    // Set calling_type based on the checked checkboxes
+                    var callingType = null;
+                    if (isInboundChecked) {
+                        callingType = 'INBOUND';
+                    } else if (isOutboundChecked) {
+                        callingType = 'OUTBOUND';
+                    }
+
+                 // Add agent object to the array with agent_id and calling_type
+                    selectedAgents.push({ agent_id: parseInt(agentId, 10), calling_type: callingType });
+                });
+
+                
+
+                // Check if no agents were selected and show an alert
+                if (selectedAgents.length === 0) {
+                    Swal.fire({
+                        icon: 'warning',
+                        title: 'No Selection',
+                        text: 'Please select at least one agent to proceed.',
+                    });
+                    return; // Stop further execution
+                }
+
+                // Send the selected agents and their calling types to the API
+                $.ajax({
+                    type: "POST",
+                    url: "/gcc/api/callcenterqaqc/adminsettings/updateCallType", // Your API endpoint
+                    data: JSON.stringify(selectedAgents),
+                    contentType: "application/json",
+                    success: function (response) {
+                        // Success: Show success message with Swal
+                        Swal.fire({
+                            icon: 'success',
+                            title: 'Success',
+                            text: response.message || 'Agents Assigned Successfully',
+                        }).then(function () {
+                            // Reload the page after the Swal is closed
+                            location.reload();
+                        });
+                    },
+                    error: function (error) {
+                        // Error: Show error message with Swal
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Error',
+                            text: error.responseJSON.message || 'Error in Assigning Agents',
+                        });
+                    }
+                });
+            });
+
+        });
+        
+        $(document).ready(function () {
+            $('#requestSubmit').click(function (event) {
+                event.preventDefault(); // Prevent form submission if it's inside a form
+                
+             // Get the productivity_count value from the input field
+                let productivityCount = $('#productivity_count').val();
+
+                // Check if the value is null, empty, or NaN
+                if (!productivityCount || isNaN(parseInt(productivityCount, 10))) {
+                    // Show an error message using Swal
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Invalid Input',
+                        text: 'Please enter a valid productivity count.',
+                    });
+                    return; // Stop further execution
+                }
+
+                // Parse productivityCount as an integer
+                productivityCount = parseInt(productivityCount, 10);
+
+                // Prepare the data to send
+                const data = { productivity_count: productivityCount };
+
+                // Send the data to the API using AJAX
+                $.ajax({
+                    type: "POST",
+                    url: "/gcc/api/callcenterqaqc/adminsettings/updateproductivity", // Replace with your API endpoint
+                    data: JSON.stringify(data),
+                    contentType: "application/json",
+                    success: function (response) {
+                        // Show a success message using Swal
+                        Swal.fire({
+                            icon: 'success',
+                            title: 'Success',
+                            text: response.message || 'Productivity updated successfully!',
+                        }).then(function () {
+                            // Reload the page after the Swal is closed
+                            location.reload();
+                        
+                        });
+                    },
+                    error: function (error) {
+                        // Show an error message using Swal
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Error',
+                            text: error.responseJSON?.message || 'Failed to update productivity!',
+                        });
+                    }
+                });
+            });
+        });
+
+
+                            	            
+
+		
+        </script>
+        
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/qaqcagentperformance.html b/src/main/resources/templates/modules/callcenterqaqc/qaqcagentperformance.html
new file mode 100644
index 0000000..92a9360
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/qaqcagentperformance.html
@@ -0,0 +1,730 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+
+    #QaqcDatatable th, #QaqcDatatable td {
+        text-align: center;
+    }
+
+.modal-dialog {
+    max-width: 80%; /* Adjust width as needed */
+}
+.modal-header {
+    background-color: #007bff;
+    color: #fff;
+}
+.modal-title {
+    font-weight: bold;
+}
+
+
+.boxcard {
+	height: 100px;
+	border-radius: 20px;
+}
+
+
+ .required{
+	color: red;
+}
+.card-box {
+       	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+    }
+    
+@media (max-width: 768px) {
+    .card-box {
+        text-align: center;
+    }
+
+}
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-6">
+								<div class="page-header-title">
+									<i class="fas fa-user-graduate bg-blue"></i>
+									<div class="d-inline">	
+										<h5>QAQC Agent Performance</h5>
+										<span>1913 Agent Performance</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="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 Reports</li>
+										<li class="breadcrumb-item active" aria-current="page">Agent Performance</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                        
+                      
+                      <div class="row mt-4">
+ 
+                      
+                      <div class="col-md-12">
+                             <div class="card">
+                             	<div class="card-header">
+                             		<h3>Agent Performance</h3>
+                             	</div>
+                             	<div class="row mt-3 ml-2">
+									
+									    <div class="col-md-3">
+									        <label for="startDate" class="form-label" style="font-size: medium;">From Date:</label>
+									        <input type="date" id="startDate" class="form-control">
+									    </div>
+									    <div class="col-md-3">
+									        <label for="endDate" class="form-label" style="font-size: medium;">To Date:</label>
+									        <input type="date" id="endDate" class="form-control">
+									    </div>
+									    <div class="col-md-3" style="margin-top: 30px;">
+									        <button id="searchBtn" class="btn btn-primary">Search</button>
+									        <button id="resetBtn" class="btn btn-secondary">Reset</button>
+									    </div>
+									
+									</div>
+
+
+                             	<div class="card-body">
+                             		
+										<div>
+										    <div class="row mt-2">
+										        <div class="col-xl-3 col-md-12">
+										            <div class="card card-box p-4">
+										                <p class="text-facebook mb-20 text-center mt-2"><b>No Of Agents</b></p>
+										                <h3 class="text-twitter fw-700 ml-5 text-center" id="totalnoofagentsCount"></h3>
+										            </div>
+										        </div>
+										        
+										        <div class="col-xl-3 col-md-4">
+										            <div class="card card-box p-4">
+										                <p class="text-facebook mb-20 text-center mt-2"><b>Assigned Calls</b></p> 
+										                <h3 class="text-twitter fw-700 ml-5 text-center" id="totalassignedCount"></h3>
+										            </div>
+										        </div>
+										        <div class="col-xl-3 col-md-4">
+										            <div class="card card-box p-4">
+										                <p class="text-facebook mb-20 text-center mt-2"><b>Finished</b></p> 
+										                <h3 class="text-twitter fw-700 ml-5 text-center" id="totalcompleteCount"></h3>
+										            </div>
+										        </div>
+										        <div class="col-xl-3 col-md-4">
+										            <div class="card card-box p-4">
+										                <p class="text-facebook mb-20 text-center mt-2"><b>Pending Calls</b></p> 
+										                <h3 class="text-twitter fw-700 ml-5 text-center" id="totalpendingCount"></h3>
+										            </div>
+										        </div>
+										    </div>
+										
+										    <div class="cards">
+										        <table id="QaqcDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+										            <thead class="thead-dark">
+										                <tr role="row">
+										                    <th rowspan="2" class="text-center">S.No</th>
+										                    <th rowspan="2" class="text-center">Agent Name</th>
+										                    <th colspan="4" class="text-center">Performance</th>
+							                            	<th colspan="4" class="text-center">Call Results</th>
+							                            </tr>
+							                       		<tr role="row">
+										                    <th class="text-center no-sort">Assigned Calls</th>							                            
+								                            <th class="text-center no-sort">Finished</th>
+								                            <th class="text-center no-sort">Pending Calls</th>
+								                            <th class="text-center no-sort">Completion(%)</th>
+								                            <th class="no-sort">Completed</th> 
+								                            <th class="no-sort">Reopen</th>
+								                            <th class="no-sort">Followup</th>
+								                            <th class="no-sort">Others</th>
+										                </tr>
+										            </thead>
+										            <tbody>
+										                <!-- Data will be populated here -->
+										            </tbody>
+										        </table>
+										    </div>
+										</div>
+                             	</div>						 
+							 </div>
+                         </div> 
+					
+						
+
+						
+                      </div>
+                        
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+        
+        
+<!--agentperformance Modal -->
+		<div class="modal fade" id="agentperformance" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalCenterLabel">Task Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    
+                    <div class="modal-body">
+						<div class="table-responsive" >
+						<table id="agentperformanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+                              <thead class="thead-dark">
+                                 	<tr role="row">
+                            <th rowspan="2" class="text-center">S.No</th>
+                            <th rowspan="2" class="text-center">TaskId</th>
+                            <th rowspan="2" class="text-center" width="100px;">Date</th>                           
+                            <th colspan="4" class="text-center">Performance</th>
+                            <th colspan="4" class="text-center">Call Results</th>
+                        </tr>
+                        <tr role="row">          
+                            <th class="text-center">Assigned Calls</th>
+                            <th class="text-center">Finished</th>
+                            <th class="text-center">Pending Calls</th>
+                            <th class="text-center no-sort">Completion (%)</th>
+                            <th class="text-center no-sort">Completed</th>
+                            <th class="text-center no-sort">Reopen</th>
+                            <th class="text-center no-sort">Followup</th>
+                            <th class="text-center no-sort">Others</th>
+                            
+                        </tr>
+						 </thead>
+                         <tbody>
+                                    
+                         </tbody>
+                               
+                       </table>
+						</div>
+                     </div>
+  					
+  					<div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                        
+                    </div>                                        
+                </div>
+            </div>
+        </div>
+        
+        
+        <!-- Assign Task Details Modal -->
+		<div class="modal fade" id="Assignagentperformance" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel1" aria-hidden="true">
+		    <div class="modal-dialog modal-xl" role="document">
+		        <div class="modal-content">
+		            <div class="modal-header">
+		                <h5 class="modal-title" id="exampleModalCenterLabel1">Assign Task Details</h5>
+		                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		                    <span aria-hidden="true">&times;</span>
+		                </button>
+		            </div>
+		            
+		            <div class="modal-body">
+		                <div class="table-responsive">
+		                    <table id="AssignagentperformanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+		                        <thead class="thead-dark">
+		                            <tr role="row">
+		                                <th class="text-center">S.No</th>
+		                                
+		                                <th class="text-center">Call Category</th>
+		                                <th class="text-center">Complaint Number</th>
+		                                <th class="text-center">Complaint Date</th>
+		                                <th class="text-center">Complaint Person Name</th>
+		                                <th class="text-center">Complaint Mob no</th>
+		                                <th class="text-center">Complaint Type</th>
+		                                <th class="text-center">Official Name</th>
+		                                <th class="text-center">Official Ph no</th>
+		                                <th class="text-center">Call Status</th>
+		                                <th class="text-center">Remarks</th>
+		                                <!-- <th class="text-center">Updated Date</th> -->
+		                            </tr>
+		                        </thead>
+		                        <tbody>
+		                            <!-- Dynamic content will be populated here -->
+		                        </tbody>
+		                    </table>
+		                </div>
+		            </div>
+		            
+		            <div class="modal-footer">
+		                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+		            </div>
+		        </div>
+		    </div>
+		</div>	
+               
+    
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>     
+        <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        
+         <script type="text/javascript">
+         
+         
+         
+        	 
+        	 
+
+        	 $(document).ready(function() { 
+        		 
+        		 
+        		 
+        		 $('#agentperformance').on('shown.bs.modal', function () {
+
+         	    	 var buttons = [
+         	             {
+         	                 extend: 'pageLength',
+         	                 className: 'btn btn-warning'
+         	             },
+         	             {
+         	                 title: 'Data export',
+         	                 extend: 'copyHtml5',
+         	                 text: 'Copy',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'excelHtml5',
+         	                 text: 'Excel',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'csvHtml5',
+         	                 text: 'CSV',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'pdfHtml5',
+         	                 text: 'PDF',
+         	                 className: 'btn btn-secondary'
+         	             }
+         	         ];
+         	        
+         	            $('#agentperformanceDatatable').DataTable({
+         	                dom: 'Bftip',               
+         	                columnDefs: [
+         	                    { targets: 'no-sort', orderable: false }
+         	                ],
+         	                lengthMenu: [
+         	                    [50, 100, 200, 500, -1],
+         	                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+         	                ],
+         	                scrollY: '50vh',
+         	                scrollX: true,  // Enable horizontal scrolling	
+         	                fixedColumns: {
+         	                    left: 1,
+         	                    right: 1
+         	                },
+         	                buttons: buttons,
+         	                fixedHeader: false,
+         	                autoWidth: false,
+         	                responsive: true,
+         	                searching: true,
+         	                select: false,
+         	                processing: false,
+         	            });
+         	        	
+         	        
+         	    });
+            	 
+            	 
+            	 $('#Assignagentperformance').on('shown.bs.modal', function () {
+
+         	    	 var buttons = [
+         	             {
+         	                 extend: 'pageLength',
+         	                 className: 'btn btn-warning'
+         	             },
+         	             {
+         	                 title: 'Data export',
+         	                 extend: 'copyHtml5',
+         	                 text: 'Copy',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'excelHtml5',
+         	                 text: 'Excel',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'csvHtml5',
+         	                 text: 'CSV',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'pdfHtml5',
+         	                 text: 'PDF',
+         	                 className: 'btn btn-secondary'
+         	             }
+         	         ];
+         	       
+         	            $('#AssignagentperformanceDatatable').DataTable({
+         	                dom: 'Bftip',               
+         	                columnDefs: [
+         	                    { targets: 'no-sort', orderable: false }
+         	                ],
+         	               lengthMenu: [
+        	                    [50, 100, 200, 500, -1],
+        	                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+        	                ],
+         	                scrollY: '30vh',
+         	                scrollX: true,  // Enable horizontal scrolling	
+         	                fixedColumns: {
+         	                    left: 1,
+         	                    right: 1
+         	                },
+         	                buttons: buttons,
+         	                fixedHeader: false,
+         	                autoWidth: false,
+         	                responsive: true,
+         	                searching: true,
+         	                select: false,
+         	                processing: false,
+         	            });
+         	        
+         	        
+         	    });
+        	 
+          	var table = $('#QaqcDatatable').DataTable({
+                  dom: 'Bftip',
+                  columnDefs: [
+                      { targets: 'no-sort', orderable: false }
+                  ],
+                  lengthMenu: [
+                      [50, 100, 200, 500, -1],
+                      ['50 rows', '100 rows', '200 rows', 'Show all']
+                  ],
+                  scrollY: '50vh',
+                  fixedColumns: {
+                      left: 1,
+                      right: 1
+                  },
+                  buttons: [
+                      {
+                          extend: 'pageLength',
+                          className: 'btn btn-warning'
+                      },
+                      {
+                          title: 'Data export',
+                          extend: 'copyHtml5',
+                          text: 'Copy',
+                          className: 'btn btn-secondary',
+                          id: 'copyBtn'
+                      },
+                      {
+                          extend: 'excelHtml5',
+                          text: 'Excel',
+                          className: 'btn btn-secondary',
+                          id: 'excelBtn'
+                      },
+                      {
+                          extend: 'csvHtml5',
+                          text: 'CSV',
+                          className: 'btn btn-secondary',
+                          id: 'csvBtn'
+                      },
+                      {
+                          extend: 'pdfHtml5',
+                          text: 'PDF',
+                          className: 'btn btn-secondary',
+                          id: 'pdfBtn'
+                      }
+                  ],
+                  fixedHeader: true,
+                  autoWidth: true,
+                  responsive: true,
+                  searching:true,
+                  select: false,
+                  processing: false
+              });
+          	
+                   	
+          	 // Initialize DataTable with export buttons
+            
+
+        
+                 const overallcountapiUrl = "/gcc/api/callcenterqaqc/agent/getagentperformancecount"; // Replace with your API endpoint
+     		    const tableApiUrl = "/gcc/api/callcenterqaqc/agent/getagentperformancelist";
+               
+                 
+                 
+                 const totalagents = document.getElementById("totalnoofagentsCount");
+         	   
+         	    const assignedcallscount = document.getElementById("totalassignedCount");
+         	    const totalcompletedcount = document.getElementById("totalcompleteCount");
+         	    const pendingcallscount = document.getElementById("totalpendingCount");
+         	    /* const dataTableElement = $("#QaqcDatatable").DataTable(); // Initialize DataTable
+                  */
+                 // Fetch Data Function
+         	    const fetchData = async (startDate = "", endDate = "") => {
+         	        try {
+         	            const params = new URLSearchParams();
+         	            if (startDate) params.append("startDate", startDate);
+         	            if (endDate) params.append("endDate", endDate);
+
+         	            const response = await fetch(`${overallcountapiUrl}?${params.toString()}`);
+         	            const data = await response.json();
+         				
+         	            //console.log(data);
+         	            // Update Summary Counts
+         	            const firstItem = data[0];  // Get the first object from the array
+         	            totalagents.textContent = firstItem.no_of_agents || 0;          	            
+         	            assignedcallscount.textContent = firstItem.total_calls || 0;  
+         	            totalcompletedcount.textContent = firstItem.completed_calls || 0; 
+         	            pendingcallscount.textContent = firstItem.pending_calls || 0; 
+                  } catch (error) {
+         	            console.error("Error fetching data:", error);
+         	        }
+         	    };
+         	
+         	
+         	fetchData();
+         	
+         // Fetch and Populate Table Data Function
+         const fetchTableData = async (startDate = "", endDate = "") => {
+             try {
+                 const params = new URLSearchParams();
+                 if (startDate) params.append("startDate", startDate);
+                 if (endDate) params.append("endDate", endDate);
+
+                 const response = await fetch(`${tableApiUrl}?${params.toString()}`);
+                 const tableData = await response.json();
+
+                 // Update DataTable with new data
+                 table.clear(); // Clear existing data
+                 tableData.forEach((row, index) => {
+                     
+                         
+                         const percentage = row.Assigned
+                         ? Math.round((row.TotalCompleted / row.Assigned) * 100)
+                         : 0;
+
+                     table.row.add([
+                     	
+                     	`<div style="text-align: center;">${index + 1}</div>`,
+                         `<button class="btn btn-success" data-agentId="${row.agent_id}" 
+                         onclick="handleTaskButtonClick('${row.agent_id}')">${row.agent_name}</button>`,                         
+                         `<button class="btn btn-success" data-agentId="${row.agent_id}" 
+                         onclick="handleAssignTaskButtonClick('${row.agent_id}')">${row.Assigned}</button>`,
+                         `<div style="text-align: center;">${row.TotalCompleted}</div>`,
+                         `<div style="text-align: center;">${row.Pending}</div>`,
+                         `<div style="text-align: center;">${percentage}%</div>`,
+                         `<div style="text-align: center;">${row.Completed_count}</div>`,
+                         `<div style="text-align: center;">${row.Reopened_count}</div>`,
+                         `<div style="text-align: center;">${row.Followup_count}</div>`,
+                         `<div style="text-align: center;">${row.Other_count}</div>`,
+                        
+                     	
+                     ]);
+                     
+                 });
+                 table.draw(); // Redraw the DataTable with the updated data
+           
+             } catch (error) {
+                 console.error("Error fetching table data:", error);
+             }
+         };
+
+         
+      
+         // Example: Fetch Data initially without filters
+         fetchTableData();
+     
+      // Event listener for From Date selection
+  	   $("#startDate").on("change", function() {
+  	       const startDate = $(this).val();  // Get the selected start date
+  	       // Set the min value for To Date to be the selected From Date
+  	       $("#endDate").attr("min", startDate);
+  	   });
+
+  	   // Event listener for To Date selection
+  	   $("#endDate").on("change", function() {
+  	       const endDate = $(this).val();  // Get the selected end date
+  	       // Set the max value for From Date to be the selected To Date
+  	       $("#startDate").attr("max", endDate);
+  	   });
+
+     		    // Search Button Click
+     		    document.getElementById("searchBtn").addEventListener("click", () => {
+     		        const startDate = document.getElementById("startDate").value;
+     		        const endDate = document.getElementById("endDate").value;
+     		        fetchData(startDate, endDate);
+     		        fetchTableData(startDate,endDate);
+     		        
+     		        
+     		    });
+
+     		    // Reset Button Click
+     		    document.getElementById("resetBtn").addEventListener("click", () => {
+     		        /* document.getElementById("startDate").value = "";
+     		        document.getElementById("endDate").value = "";
+     		        fetchData(); // Fetch data without date filters
+     		        fetchTableData(); */
+     		        window.location.href = "/gcc/callcenterqaqc/qaqcagentperformance";
+     		    });
+
+     		    // Initial Load
+     		    fetchData(); // Load overall data initially
+     		   fetchTableData();
+     		});
+
+         function handleTaskButtonClick(agentId)
+     	 {
+     		 //console.log("agentId",agentId);
+     		      		 
+     		$('#agentperformance').modal({
+                backdrop: 'static',
+                keyboard: false
+            });
+            $('#agentperformance').modal('show');
+            
+         // Clear old data from the table
+     	    if ($.fn.DataTable.isDataTable('#agentperformanceDatatable')) {
+     	        $('#agentperformanceDatatable').DataTable().clear().destroy();
+     	    }
+     		 
+             $.ajax({
+                url: '/gcc/api/callcenterqaqc/agent/agenttaskwise?agentId='+agentId,
+                type: 'GET',
+                contentType: 'application/json',
+                success: function (response) {
+                	//console.log("response",response);
+                	if (response && response.length > 0) {
+                		 
+                	let CtableBody = $('#agentperformanceDatatable tbody');
+                	CtableBody.empty();
+                	response.forEach((item, index) => {
+                		let row = `
+                			<tr>
+                            <td class="text-center">${index + 1}</td>
+                            <td class="text-center no-sort">${item.taskid}</td>
+                            <td class="text-center">${item.cdate}</td>
+                            <td class="text-center">${item.assigned || 0}</td>
+                            <td class="text-center">${item.callstaken || 0}</td>
+                            <td class="text-center">${item.pending || 0}</td>
+                            <td class="text-center">${item.percentage || 0}%</td>
+                            <td class="text-center">${item.Completed || 0}</td>
+                            <td class="text-center">${item.Reopened || 0}</td>
+                            <td class="text-center">${item.Followup || 0}</td>
+                            <td class="text-center">${item.Others || 0}</td>
+                        </tr>
+                    `;
+                		CtableBody.append(row); 
+                	});
+                	 
+                    
+                	}
+                	else {
+                        $('#agentperformanceDatatable tbody').html(`
+                            <tr>
+                                <td colspan="11" class="text-center">No data available</td>
+                            </tr>
+                        `);
+                    }
+                	 
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error in Fetching Task:', error);
+                    $('#agentperformanceDatatable tbody').html(`
+                            <tr>
+                                <td colspan="11" class="text-center text-danger">Failed to load data</td>
+                            </tr>
+                        `);
+                }
+            }); 
+     		 
+     	 }
+         
+         
+         function handleAssignTaskButtonClick(agentId) {
+     	    // Show modal with static backdrop
+     	    $('#Assignagentperformance').modal({
+     	        backdrop: 'static',
+     	        keyboard: false
+     	    });
+     	    $('#Assignagentperformance').modal('show');
+
+     	    // Clear old data from the table
+     	    if ($.fn.DataTable.isDataTable('#AssignagentperformanceDatatable')) {
+     	        $('#AssignagentperformanceDatatable').DataTable().clear().destroy();
+     	    }
+
+     	    // Fetch and display data
+     	    $.ajax({
+     	        url: `/gcc/api/callcenterqaqc/agent/agenttaskassign?agentId=${agentId}`,
+     	        type: 'GET',
+     	        contentType: 'application/json',
+     	        success: function (response) {
+     	            let CtableBody1 = $('#AssignagentperformanceDatatable tbody');
+     	            CtableBody1.empty();
+
+     	            if (response && response.length > 0) {
+     	                response.forEach((item, index) => {
+     	                	let callStatus = item.call_status && item.call_status.trim() !== '' ? item.call_status : 'N/A';
+     	                   let remarks = item.remarks && item.remarks.trim() !== '' ? item.remarks : 'N/A';
+     	                    let row = `
+     	                        <tr>
+     	                            <td class="text-center">${index + 1}</td>
+     	                            <td class="text-center">${item.call_category}</td>
+     	                            <td class="text-center">${item.complaint_number}</td>
+     	                            <td class="text-center">${item.complaint_date}</td>
+     	                            <td class="text-center">${item.complaint_person_name}</td>
+     	                            <td class="text-center">${item.complaint_mobilenumber}</td>
+     	                            <td class="text-center">${item.complaint_type}</td>
+     	                            <td class="text-center">${item.official_name}</td>
+     	                            <td class="text-center">${item.official_mobilenum}</td>
+     	                           <td class="text-center">${callStatus}</td>
+     	                          <td class="text-center">${remarks}</td>
+     	                        </tr>
+     	                    `;
+     	                    CtableBody1.append(row);
+     	                });
+     	            } else {
+     	                CtableBody1.html(`
+     	                    <tr>
+     	                        <td colspan="11" class="text-center">No data available</td>
+     	                    </tr>
+     	                `);
+     	            }
+
+     	        },
+     	        error: function (xhr, status, error) {
+     	            console.error('Error in Fetching Task:', error);
+     	            $('#AssignagentperformanceDatatable tbody').html(`
+     	                <tr>
+     	                    <td colspan="11" class="text-center text-danger">Failed to load data</td>
+     	                </tr>
+     	            `);
+     	        }
+     	    });
+     	}
+      	
+//<td class="text-center">${item.updated_date}</td>
+     	</script>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/qaqcfollowuplist.html b/src/main/resources/templates/modules/callcenterqaqc/qaqcfollowuplist.html
new file mode 100644
index 0000000..b1a3aa1
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/qaqcfollowuplist.html
@@ -0,0 +1,659 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+    .required{
+        color: red;
+    }
+    #modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+	
+	.card-box {
+		border-radius: 20px;
+       	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+    }
+    
+        #officialfollowupCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#officialfollowupCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+
+#publicfollowupCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#publicfollowupCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+
+</style>
+<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]-->
+
+    <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 mb-2">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fa fa-list-alt bg-blue"></i>
+                                    <div class="d-inline">	
+                                        <h5>FollowUp List</h5>
+                                        <span>1913 QAQC FollowUp List</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <nav class="breadcrumb-container" aria-label="breadcrumb">
+                                    <ol class="breadcrumb">
+                                        <li class="breadcrumb-item"><a href="/gcc/index"><i class="ik ik-home"></i></a></li>
+                                        <li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+                                        <li class="breadcrumb-item" aria-current="page">Admin QAQC</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Followup List</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                        
+					<div class="row mt-4">
+					<div class="col-md-12">
+					    <div class="card">
+					        <div class="card-block">
+								<p>Click the card to Assign Agents</p>							
+								<div class="row">
+									<div class="col-lg-4 col-md-4 col-sm-12">
+										<div class="card card-box" id="officialfollowupCard">
+											<p class="text-facebook mb-20 text-center mt-4" id="todayFollowUpText"><b>Today Followup</b></p>
+							                <h3 class="text-twitter fw-700 ml-5 text-center" id="officialtotalFollowup"></h3>
+										</div>
+									</div>
+									
+									<div class="col-lg-4 col-md-4 col-sm-12">
+										<div class="card card-box" id="publicfollowupCard">
+											<p class="text-facebook mb-20 text-center mt-4" id="todayFollowUpText2"><b>Today Followup</b></p>
+							                <h3 class="text-twitter fw-700 ml-5 text-center" id="publictotalFollowup"></h3>
+										</div>
+									</div>
+								</div>
+								<hr>
+								<div class="row mb-4">
+								    <div class="col-md-4">
+								        <label for="fromDate">From Date <span class="required">*</span></label>
+								        <input type="date" id="fromDate" class="form-control datepicker" placeholder="yyyy-mm-dd" >
+								    </div>
+								    <div class="col-md-4">
+								        <label for="toDate">To Date <span class="required">*</span></label>
+								        <input type="date" id="toDate" class="form-control datepicker" placeholder="yyyy-mm-dd" >
+								    </div>
+								    <div class="col-md-4 mt-4">
+								        <button id="filterButton" class="btn btn-primary mt-2">Filter</button>
+								        <button id="resetButton" class="btn btn-secondary mt-2">Reset</button>
+								    </div>
+								</div>
+
+					            <div class="page-header-title"></div>
+					            <div>
+					                <table id="FollowupDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+					                    <thead class="thead-dark">
+					                        <tr role="row">
+					                            <th class="text-center">S.No</th>
+					                            <th class="text-center">Task ID</th>
+												<th class="text-center">Complaint Number</th>
+												<th class="text-center">Scheduled Date</th>
+					                            <th class="text-center">Name</th>
+					                            <th class="text-center">Mobile Number</th>
+					                            <th class="text-center">Complaint Type</th>
+					                            <th class="text-center">View</th>
+					                            
+					                            
+
+					                        </tr>
+					                    </thead>
+					                    <tbody style="text-align:center;">
+					                        
+					                    </tbody>
+					                    <tfoot class="thead-dark">
+					                        <tr>
+					                            <th class="text-center">S.No</th>
+					                            <th class="text-center">Task ID</th>
+												<th class="text-center">Complaint Number</th>
+												<th class="text-center">Scheduled Date</th>
+					                            <th class="text-center">Name</th>
+				                                <th class="text-center">Mobile Number</th>
+					                            <th class="text-center">Complaint Type</th>
+					                            <th class="text-center">View</th>
+					                         	
+					                        </tr>
+					                    </tfoot>
+					                </table>
+					            </div>
+					        </div>
+					    </div>
+					</div>
+                    </div>
+                    </div>
+                </div>
+  
+							
+            <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+        </div>
+    </div>
+	<!-- Modal -->
+			<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+			    <div class="modal-dialog modal-lg" role="document">
+			        <div class="modal-content">
+			            <div class="modal-header">
+			                <h5 class="modal-title" id="detailsModalLabel">Complaint Details</h5>
+			                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+			                    <span aria-hidden="true">&times;</span>
+			                </button>
+			            </div>
+			            <div class="modal-body" id="modalBody">
+			                <!-- Details will be populated here -->
+			            </div>
+			            <div class="modal-footer">
+			                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+			            </div>
+			        </div>
+			    </div>
+			</div>
+			
+						
+
+    <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>     
+    <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+	<script>
+
+		$(document).ready(function () {
+		    // Initialize DataTable
+		    const table = $('#FollowupDatatable').DataTable({
+		        dom: 'Bftip',
+		        columnDefs: [
+		            { targets: 'no-sort', orderable: false }
+		        ],
+		        lengthMenu: [
+		            [50, 100, 200, 500, -1],
+		            ['50 rows', '100 rows', '200 rows', 'Show all']
+		        ],
+		        scrollY: '50vh',
+		        buttons: [
+		            { extend: 'pageLength', className: 'btn btn-warning' },
+		            { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+		            { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+		            { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+		            { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
+		        ],
+		        fixedHeader: true,
+		        autoWidth: true,
+		        responsive: true,
+		        searching: false,
+		        select: false,
+		        processing: false
+		    });
+
+			// Default Date Range Setup
+			let today = new Date();
+
+			// Get the first day of the current month (this should give 2024-11-01 for November)
+			let firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+			// Manually format the date as yyyy-mm-dd without relying on toISOString
+			let formattedFirstDay = firstDayOfMonth.getFullYear() + '-' + 
+			                        (firstDayOfMonth.getMonth() + 1).toString().padStart(2, '0') + '-' + 
+			                        firstDayOfMonth.getDate().toString().padStart(2, '0');
+
+			let formattedToday = today.getFullYear() + '-' + 
+			                     (today.getMonth() + 1).toString().padStart(2, '0') + '-' + 
+			                     today.getDate().toString().padStart(2, '0');
+
+			//console.log("formattedFirstDay:", formattedFirstDay); // Check what is printed in the console
+
+					
+			// Set default values for date inputs
+		    $('#fromDate').val(formattedFirstDay);
+		    $('#toDate').val(formattedToday);
+		    $('#toDate').attr('min', formattedFirstDay); // Initial minimum for To Date
+		    $('#fromDate').attr('max', formattedToday); // Initial maximum for From Date
+
+		    // Trigger data load on page load
+		    loadData(formattedFirstDay, formattedToday);
+
+		    // Update To Date's min attribute when From Date changes
+		    $('#fromDate').on('change', function () {
+		        const fromDate = $(this).val();
+		        $('#toDate').attr('min', fromDate); // Update min attribute for To Date
+
+		        // If To Date is earlier than the new From Date, adjust it
+		        const toDate = $('#toDate').val();
+		        if (new Date(toDate) < new Date(fromDate)) {
+		            $('#toDate').val(fromDate);
+		        }
+		    });
+
+		    // Update From Date's max attribute when To Date changes
+		    $('#toDate').on('change', function () {
+		        const toDate = $(this).val();
+		        $('#fromDate').attr('max', toDate); // Update max attribute for From Date
+
+		        // If From Date is later than the new To Date, adjust it
+		        const fromDate = $('#fromDate').val();
+		        if (new Date(fromDate) > new Date(toDate)) {
+		            $('#fromDate').val(toDate);
+		        }
+		    });
+
+		    // Event listener for the Filter button
+		    $('#filterButton').on('click', function () {
+		        const fromDate = $('#fromDate').val();
+		        const toDate = $('#toDate').val();
+
+		        // Ensure valid date range
+		        if (new Date(fromDate) > new Date(toDate)) {
+		            Swal.fire({
+		                icon: 'error',
+		                title: 'Invalid Date Range',
+		                text: 'From Date cannot be later than To Date.'
+		            });
+		            return;
+		        }
+
+		        // Load data for the selected date range
+		        loadData(fromDate, toDate);
+		    });
+		    
+		    $('#resetButton').on('click', function () {
+		    	window.location.href = "/gcc/callcenterqaqc/admin/qaqcfollowuplist";
+		    });
+			
+		    // Function to load data based on the date range
+		    function loadData(fromDate, toDate) {
+		    	const followupStatus = "FOLLOWUP";
+		        $.ajax({
+		            url: '/gcc/api/callcenterqaqc/followuplist',
+		            method: 'GET',
+		            data: { callStatus: followupStatus,fromDate: fromDate, toDate: toDate },
+		            success: function (response) {
+		                //console.log('API Response:', response);
+
+		                const table = $('#FollowupDatatable').DataTable();
+		                table.clear();
+
+		                if (response && response.length > 0) {
+		                    response.forEach(function (item, index) {
+		                        table.row.add([
+		                            index + 1,
+		                            item.taskid || 'N/A',
+		                            item.complaint_number || 'N/A',
+		                            item.remainder_date || 'N/A',
+		                            item.complaint_person_name || 'N/A',
+		                            item.complaint_mobilenumber || 'N/A',
+		                            item.complaint_type || 'N/A',
+		                            `<button type="button" class="btn btn-info" 
+		                                    onclick="viewDetails('${item.complaint_number}')">Details</button>`,
+                                    
+		                        ]);
+		                    });
+		                } else {
+		                    //alert('No data found for the selected date range.');
+		                    $('#FollowupDatatable tbody').html(`
+		                            <tr>
+		                                <td colspan="8" class="text-center">No data available</td>
+		                            </tr>
+		                        `);
+		                }
+
+		                table.draw();
+		            },
+		            error: function (xhr, status, error) {
+		                console.error('Error fetching data:', error);
+		            }
+		        });
+		    }
+		});
+
+		
+		
+		function viewDetails(complaintNumber, complaintMode, complaintDept) {
+	 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+	 	    $('#detailsModal').modal('show');
+
+	 	    // Fetch the main complaint details
+	 	    $.ajax({
+	 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+	 	        type: 'GET',
+	            data:{complaintNumber:complaintNumber},
+	 	        success: function (data) {
+	 	           // console.log('Complaint Data:', data);
+
+	 	            // Fetch agent response details
+	 	            $.ajax({
+	 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+	 	                type: 'GET',
+	 	                data: { complaintNumber },
+	 	                success: function (agentResponse) {
+	 	                    //console.log('Agent Response:', agentResponse);
+
+	 	                    // Use the logic for building complaint and agent details as HTML
+	 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+	 	                    // Update modal content
+	 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+	 	                },
+	 	                error: function () {
+	 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+	 	                }
+	 	            });
+	 	        },
+	 	        error: function () {
+	 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+	 	        }
+	 	    });
+	 	}
+
+	 	// Function to generate complaint and agent details HTML
+	function generateDetailsHtml(data, agentResponse) {
+	 		
+	 	// Helper function to format date to yyyy-mm-dd
+	         function formatDate(dateStr) {
+	             if (!dateStr) return 'N/A';
+	             const date = new Date(dateStr);
+	             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+	         }
+	// Format complaint messages
+	let messagesHtml = '';
+	if (data.comments && data.comments.length > 0) {
+	    data.comments.forEach((comment) => {
+	        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+	            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+	            : '<p style="color: red;">No image available for this comment.</p>';
+
+	        messagesHtml += `
+	            <div class="comment mb-4">
+	                <div class="row">
+	                    <div class="col-2 text-center">
+	                        <p class="text-muted">${comment.comment_date}</p>
+	                    </div>
+	                    <div class="col-10">
+	                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+	                        <p>${comment.message || 'No message available'}</p>
+	                        <div class="user-image">${commentImageLink}</div>
+	                    </div>
+	                </div>
+	            </div>
+	        `;
+	    });
+	} else {
+	    messagesHtml = '<p>No comments available.</p>';
+	}
+
+	// Format agent responses
+	let agentRepliedHtml = '';
+	if (agentResponse.length > 0) {
+	    agentResponse.forEach((agentItem) => {
+	        agentRepliedHtml += `
+	            <div class="comment mb-4">
+	                <div class="row">
+	                    <div class="col-2 text-center">
+	                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+	                    </div>
+	                    <div class="col-10">
+	                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+	                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+	                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+	                    </div>
+	                </div>
+	            </div>
+	        `;
+	    });
+	} else {
+	    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+	}
+
+	// Check for user images
+	const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+	const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+	    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+	    : '<p style="color: red;">UserImages: No image available.</p>';
+
+	// Combine all sections into the final HTML
+	const detailsHtml = `
+	    <div class="row">
+	        <div class="col-md-12">
+	            <h4>Complaint Person's Details:</h4>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+	                </div>
+	            </div>
+	        </div>
+	    </div>
+	    <hr>
+	    <h4>Complaint Details:</h4>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+        <div class="col-6">
+            <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+        </div>
+        
+    </div>
+	    <hr>
+	    <h4>Complaint Messages:</h4>
+	    ${messagesHtml}
+	    <hr>
+	    <h4>Agent Replied Messages:</h4>
+	    ${agentRepliedHtml}
+	    <hr>
+	    ${imageLink}
+	`;
+
+	return detailsHtml;
+	}
+		
+		$(document).ready(function () {
+		// Function to fetch today's follow-up count
+		    function fetchTodayFollowUpCount() {
+		        const followupStatus = "FOLLOWUP"; // Adjust based on your status filter
+
+		        $.ajax({
+		            url: '/gcc/api/callcenterqaqc/followup/todayCount',
+		            method: 'GET',
+		            data: { followupStatus: followupStatus },
+		            success: function (counts) {
+		                // Update the card with the fetched count
+		                $('#officialtotalFollowup').text(counts.officialfollowup || 0);
+		                $('#publictotalFollowup').text(counts.publicfollowup || 0);
+		                
+		             // Get the current date in 'yyyy-mm-dd' format
+		                const currentDate = new Date();
+		                const formattedDate = currentDate.toISOString().split('T')[0];
+		                
+		                sessionStorage.setItem('followupname1', 'officialfollowup');
+		                sessionStorage.setItem('followupcount1', counts.officialfollowup || "0");
+		                sessionStorage.setItem('followupname2', 'publicfollowup');
+		                sessionStorage.setItem('followupcount2', counts.publicfollowup || "0");
+		                sessionStorage.setItem('startDate', formattedDate);
+		                sessionStorage.setItem('endDate', formattedDate);
+		                sessionStorage.setItem('redirected', 'true');
+		                
+		                document.getElementById('officialfollowupCard').addEventListener('click', function () {
+		                    if (parseInt(sessionStorage.getItem('followupcount1')) === 0) {
+		                        Swal.fire({
+		                            icon: 'info',
+		                            title: 'No Data',
+		                            text: 'No Follow-up records available for today.',
+		                        });
+		                    } else {
+		                        sessionStorage.setItem('cardType', 'Followup1'); // Set card type
+		                        window.location.href = "/gcc/callcenterqaqc/admin/qaqcassigntaskagents";
+		                    }
+		                });
+		                
+		                document.getElementById('publicfollowupCard').addEventListener('click', function () {
+		                    if (parseInt(sessionStorage.getItem('followupcount2')) === 0) {
+		                        Swal.fire({
+		                            icon: 'info',
+		                            title: 'No Data',
+		                            text: 'No Follow-up records available for today.',
+		                        });
+		                    } else {
+		                        sessionStorage.setItem('cardType', 'Followup2'); // Set card type
+		                        window.location.href = "/gcc/callcenterqaqc/admin/qaqcassigntaskagents";
+		                    }
+		                });
+		                
+		                
+		            },
+		            error: function (xhr, status, error) {
+		                console.error('Error fetching follow-up count:', error);
+		                $('#officialtotalFollowup').text('N/A');
+		            }
+		        });
+		    }
+
+		    // Fetch count on page load
+		    fetchTodayFollowUpCount();
+			
+			    // Get the current date
+			    const currentDate = new Date();
+			    const formattedDate = currentDate.toISOString().split('T')[0]; // Format: YYYY-MM-DD
+
+			    // Update the text with the current date
+			    document.getElementById("todayFollowUpText").innerText = `Today Official Follow-up (${formattedDate})`;
+			    document.getElementById("todayFollowUpText2").innerText = `Today Public Follow-up (${formattedDate})`;
+		  });
+	</script>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/qaqcgrievancedashboard.html b/src/main/resources/templates/modules/callcenterqaqc/qaqcgrievancedashboard.html
new file mode 100644
index 0000000..1b4e42d
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/qaqcgrievancedashboard.html
@@ -0,0 +1,702 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.boxcard {
+	height: 100px;
+	border-radius: 20px;
+}
+.boxcard1 {
+	height: 200px;
+	border-radius: 20px;
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+}
+
+.required{
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media (max-width: 767px) 
+{
+	#qaqcRequestForm label{
+		margin-top: 10px;
+	} 
+}
+
+.card-box {
+		border-radius: 20px;
+       	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+    }  
+    
+.bg-grey-inline-text {
+        padding:2px 2px;
+        background-color: #e6e6e6; 
+        border-radius: 4px;
+    }
+    
+    #closedCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#closedCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+
+#inProgressCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#inProgressCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+    
+    #redressedCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#redressedCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+    
+   #reopenedCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#reopenedCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+    
+    #closedCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#closedCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-tachometer-alt bg-blue"></i>
+									<div class="d-inline">	
+										<h5>Dashboard QAQC</h5>
+										<span>1913 QAQC Dashboard</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Admin QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Grievance Dashboard</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                    <!-- <h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auto refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>  -->
+					
+					<div class="card mt-4">
+					 	<div class="card-header">
+								<h3>
+									<img alt="No image" src="/gcc/assets/images/donut-chart.png"
+										style="height: 23px; width: 23px;" class="mr-2"><b>Overall Grievance
+										Dashboard</b>
+									</h3>
+								</div> 
+							<div class="card-body">
+									<div class="row">
+										<div class="col-sm-2 mb-2">
+											<label for="startDate" style="font-size: medium; margin-bottom: 0px;">From Date:</label>
+						                    <input type="date" id="startDate" class="form-control">
+										</div>
+										<div class="col-sm-2 mb-2">
+											<label for="endDate" style="font-size: medium; margin-bottom: 0px;">To Date:</label>
+						                    <input type="date" id="endDate" class="form-control">
+										</div>
+
+										<div class="col-sm-2 mb-2">
+								            <label for="dropdown4" style="font-size: medium; margin-bottom: 0px;">Group:</label>
+								            <select id="dropdown4" class="form-control">
+								            <option value="">Select</option>
+								               <!--  <option value="">general</option> -->
+								                <!-- Add options here -->
+											</select>
+										</div>
+															
+									
+										<div class="col-sm-2 mb-2">
+											 <label for="dropdown1"  style="font-size: medium; margin-bottom: 0px;">Type:</label>
+						                     <select id="dropdown1" class="form-control">
+							                 <option value="">Select</option>
+							            	 <!-- <option value="Cleanliness in Parks">Cleanliness in Parks</option> -->
+
+											</select>
+										</div>
+
+										<div class="col-sm-2 mb-2">
+								            <label for="dropdown3" style="font-size: medium; margin-bottom: 0px;">Mode:</label>
+								            <select id="dropdown3" class="form-control">
+								                <option value="">Select</option>
+								                <!-- <option value="">INTERNET</option> -->
+
+											</select>
+										</div>
+										
+										<div class="col-sm-2 mb-2">
+											<label for="dropdown2" style="font-size: medium; margin-bottom: 0px;">zone:</label>
+						                    <select id="dropdown2" class="form-control">
+						                    <option value="">Select</option>
+						                    <!-- <option value="N01">N01</option> -->
+												<!-- <option value="ALL">ALL</option> -->
+
+											</select>
+										</div>
+
+									</div>
+									
+															
+					
+									<div class="row mt-4">
+										<div class="col-12 d-flex justify-content-center">
+											<button type="submit" id="searchButton"
+												class="btn btn-primary mx-2">Filter</button>
+
+											<button class="btn btn-danger mx-2" onclick="resetDate()"
+												name="reset" type="reset">Reset</button>
+										</div>
+									</div>
+
+								</div>
+							
+					
+							<div class="col-12">
+								<div class="row mt-3">
+								    <!-- First Part: 2 cards vertically -->
+								    <div class="col-lg-4 col-md-4 col-sm-12">
+								     	<div class="card card-box" id="inProgressCard">
+											 <p class="text-facebook mb-20 text-center mt-4" id="inProgressname" style="font-size: medium;"><i class="fas fa-spinner text-center" ></i>&nbsp;<b>In-progress</b></p>
+				                             <h3 class="text-twitter fw-700 ml-5 text-center" id="inProgressCount"></h3>
+										</div>
+								       
+								       
+										<div class="card card-box" id="redressedCard">
+											<p class="text-facebook mb-20 text-center mt-4"id="redressedname" style="font-size: medium;"><i class="fas fa-check-circle text-center" style=" color: green;"></i>&nbsp;<b>Action Taken Level 1</b></p>
+				                            <h3 class="text-twitter fw-700 ml-5 text-center" id="redressedCount"></h3>
+										</div>
+								        
+								    </div>
+								    
+								    <!-- Second Part: 1 card, height equal to both cards in the first part -->
+								    <div class="col-lg-4 col-md-4 col-sm-12 mt-3">
+								        								        	
+										<div class="card boxcard1">
+										   <div class="card-body">
+											 <p class="text-facebook mb-20 text-center mt-4" style="font-size: medium;"><i class="fas fa-clipboard-list text-center"></i>&nbsp;<b>Total Complaints</b></p>
+				            				<h3 class="text-twitter fw-700 ml-5 text-center" id="totalComplaints"></h3>
+				            				</div>
+										</div>
+											
+								        
+								    </div>
+								    
+								    <!-- Third Part: 2 cards vertically -->
+								    <div class="col-lg-4 col-md-4 col-sm-12">
+								        
+										<div class="card card-box" id="reopenedCard">
+											<p class="text-facebook mb-20 text-center mt-4" id="Reopenname" style="font-size: medium;"><i class="fas fa-exclamation-circle text-center" style=" color: orange;"></i>&nbsp;<b>Reopened</b></p>
+				            				<h3 class="text-twitter fw-700 ml-5 text-center" id="reopenedCount"></h3>
+										</div>
+						        
+						        
+										<div class="card card-box" id="closedCard">
+											 <p class="text-facebook mb-20 text-center mt-4" id="Closename" style="font-size: medium;"><i class="fas fa-check-circle text-center" style=" color: green;"></i>&nbsp;<b>Action Taken Level 2</b></p>
+				            				<h3 class="text-twitter fw-700 ml-5 text-center" id="closedCount"></h3>
+										</div>
+								        
+								    </div>
+								</div>
+							</div>
+					 
+						
+						<!-- agent wise yesterday performance counts card-->
+					<div class="card-body">
+						<div class="page-header-title" >
+									<h5 style="margin: 0;font-weight: bold;">Yesterday Event - Agent Performance Dashboard</h5><hr>
+					    </div>
+						<div class="row mt-2">
+						    <div class="col-xl-3 col-md-6 col-sm-12">
+						        <div class="card card-box">
+						            <p class="text-facebook mb-20 text-center mt-4"><b>Agent Assigned</b></p>
+						            <h3 class="text-twitter fw-700 ml-5 text-center" th:text="${previousday[0].TotalAgents}"></h3>
+						        </div>
+						    </div>
+						    <div class="col-xl-3 col-md-6 col-sm-12">
+						        <div class="card card-box">
+						            <p class="text-facebook mb-20 text-center mt-4"><b>Assigned Calls</b></p>
+						            <h3 class="text-twitter fw-700 ml-5 text-center" th:text="${previousday[0].TotalAssigned != null ? previousday[0].TotalAssigned : 0}"></h3>
+						        </div>
+						    </div>
+						
+						    <div class="col-xl-3 col-md-6 col-sm-12">
+						        <div class="card card-box">
+						            <p class="text-facebook mb-20 text-center mt-4"><b>Finished</b></p>
+						            <h3 class="text-twitter fw-700 ml-5 text-center" th:text="${previousday[0].TotalCompleted != null ? previousday[0].TotalCompleted : 0}"></h3>
+						        </div>
+						    </div>
+						    <div class="col-xl-3 col-md-6 col-sm-12">
+						        <div class="card card-box">
+						            <p class="text-facebook mb-20 text-center mt-4"><b>Pending Calls</b></p>
+						            <h3 class="text-twitter fw-700 ml-5 text-center" th:text="${previousday[0].TotalPending != null ? previousday[0].TotalPending : 0}"></h3>
+						        </div>
+						    </div>
+						</div>
+						
+						 
+					</div>	
+						
+						<div class="col-md-16">
+							
+							<div class="card-body">
+								<div class="page-header-title" >
+									<h5 style="margin: 0;font-weight: bold;">Yesterday Event - Agents Wise Breakup</h5><hr>
+							    </div> 
+									<table id="YesterdayQaqctable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+                                    	<thead class="thead-dark">
+		                                 	<tr role="row">
+					                            <th rowspan="2" class="text-center">S.No</th>
+					                            <th rowspan="2" class="text-center">Agent</th>
+					                            <th colspan="4" class="text-center">Performance</th>
+					                            <th colspan="4" class="text-center">Call Results</th>
+			                            
+			                        		</tr>
+			                        		<tr role="row">			                            
+					                            <th class="text-center">Assigned Calls</th>
+					                            <th class="text-center">Finished</th>
+					                            <th class="text-center">Pending Calls</th>
+					                            <th class="text-center">Completion (%)</th>
+					                            <th class="text-center">Completed</th>
+					                            <th class="text-center">ReOpen</th>
+					                            <th class="text-center">Followup</th>
+					                            <th class="text-center">Others</th>
+			                        		</tr>
+									 </thead>
+			                         <tbody>
+			                              <!-- Loop through the agentcount data -->
+									        <tr th:each="row, iterStat : ${agentcount}">
+									            <td class="text-center" th:text="${iterStat.index + 1}"></td>
+									            <td class="text-center" th:text="${row.agent_name}"></td>
+									            <td class="text-center" th:text="${row.Assigned}"></td>
+									            <td class="text-center" th:text="${row.TotalCompleted}"></td>
+									            <td class="text-center" th:text="${row.Pending}"></td>
+												<td class="text-center" th:text="${row.CompletionPercentage + '%'}"></td>									            <td class="text-center" th:text="${row.Completed_count}"></td>
+									            <td class="text-center" th:text="${row.Reopened_count}"></td>
+									            <td class="text-center" th:text="${row.Followup_count}"></td>
+									            <td class="text-center" th:text="${row.Other_count}"></td>
+									        </tr>      
+			                         </tbody>
+		                           </table>
+								</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 src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        
+       <script type="text/javascript">
+        $(document).ready(function() {
+
+        	var table = $('#YesterdayQaqctable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                ],
+                scrollY: '50vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: [
+                    {
+                        extend: 'pageLength',
+                        className: 'btn btn-warning'
+                    },
+                    {
+                        title: 'Data export',
+                        extend: 'copyHtml5',
+                        text: 'Copy',
+                        className: 'btn btn-secondary',
+                        id: 'copyBtn'
+                    },
+                    {
+                        extend: 'excelHtml5',
+                        text: 'Excel',
+                        className: 'btn btn-secondary',
+                        id: 'excelBtn'
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        text: 'CSV',
+                        className: 'btn btn-secondary',
+                        id: 'csvBtn'
+                    },
+                    {
+                        extend: 'pdfHtml5',
+                        text: 'PDF',
+                        className: 'btn btn-secondary',
+                        id: 'pdfBtn'
+                    }
+                ],
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false
+            });
+        });
+        
+
+<!------------------ this is updated getting data function ---------------->
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Get today's date
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+    const day = String(today.getDate()).padStart(2, '0');
+
+    // Calculate the first day of the current month
+    const startOfMonth = `${year}-${month}-01`; // yyyy-MM-dd format
+    const todayFormatted = `${year}-${month}-${day}`; // yyyy-MM-dd format
+
+    const startDateField = document.getElementById('startDate');
+    const endDateField = document.getElementById('endDate');
+	
+	// Event listener for To Date
+	   endDateField.addEventListener('change', function () {
+	       if (endDateField.value) {
+	           startDateField.max = endDateField.value; // Set max value for From Date
+	       } else {
+	           startDateField.removeAttribute('max'); // Remove max if To Date is cleared
+	       }
+
+	       // Validate From Date against updated To Date
+	       if (startDateField.value && new Date(startDateField.value) > new Date(endDateField.value)) {
+	           startDateField.value = ''; // Clear invalid From Date
+	           alert("From Date cannot be after To Date.");
+	       }
+	   });
+
+	   // Event listener for From Date
+	   startDateField.addEventListener('change', function () {
+	       if (startDateField.value) {
+	           endDateField.min = startDateField.value; // Set min value for To Date
+	       } else {
+	           endDateField.removeAttribute('min'); // Remove min if From Date is cleared
+	       }
+
+	       // Validate To Date against updated From Date
+	       if (endDateField.value && new Date(endDateField.value) < new Date(startDateField.value)) {
+	           endDateField.value = ''; // Clear invalid To Date
+	           alert("To Date cannot be before From Date.");
+	       }
+	   });
+
+    // Set the default date values in the input fields
+    if (startDateField && endDateField) {
+        startDateField.value = startOfMonth; // yyyy-MM-dd format required for input[type="date"]
+        endDateField.value = todayFormatted; // yyyy-MM-dd format required for input[type="date"]
+    } else {
+        console.error("Start date or end date input field not found!");
+    }
+
+    // Call the search logic directly to load default data on page load
+    loadDashboardData(formatDateForAPI(startOfMonth), formatDateForAPI(todayFormatted));
+});
+
+// Helper function to convert yyyy-MM-dd to dd-MM-yyyy for API calls
+function formatDateForAPI(dateStr) {
+    const [year, month, day] = dateStr.split('-');
+    return `${day}-${month}-${year}`; // Convert to dd-MM-yyyy
+}
+
+
+function loadDashboardData(startDate, endDate) {
+    // Show loading indicators
+    call_loading('totalComplaints', 'start');
+    call_loading('inProgressCount', 'start');
+    call_loading('redressedCount', 'start');
+    call_loading('reopenedCount', 'start');
+    call_loading('closedCount', 'start');
+
+    // Get dropdown values
+    const startDateValue = document.getElementById('startDate').value;
+    const endDateValue = document.getElementById('endDate').value;
+    const dropdown1 = document.getElementById('dropdown1').value;
+    const dropdown2 = document.getElementById('dropdown2').value;
+    const dropdown3 = document.getElementById('dropdown3').value;
+    const dropdown4 = document.getElementById('dropdown4').value;
+
+    // Make API call to get dashboard data
+    fetch(`/gcc/api/callcenterqaqc/dashboard?startDate=${startDate}&endDate=${endDate}&dropdown1=${dropdown1}&dropdown2=${dropdown2}&dropdown3=${dropdown3}&dropdown4=${dropdown4}`)
+        .then(response => response.json())
+        .then(data => {
+            //console.log(data);
+
+            // Store data in sessionStorage
+            sessionStorage.setItem('closename', 'closed');
+            sessionStorage.setItem('closedcount', data["Closed"] || "0");
+            sessionStorage.setItem('reopenname', 'reopened');
+            sessionStorage.setItem('reopenedcount', data["Reopened"] || "0");
+            sessionStorage.setItem('inProgressName', 'processing');
+            sessionStorage.setItem('inProgressCount', data["In Progress"] || "0");
+            sessionStorage.setItem('redressedName', 'redressed');
+            sessionStorage.setItem('redressedCount', data["Redressed"] || "0");
+            sessionStorage.setItem('startDate', startDateValue);
+            sessionStorage.setItem('endDate', endDateValue);
+             
+            sessionStorage.setItem('type', dropdown1);
+            sessionStorage.setItem('zone', dropdown2);
+            sessionStorage.setItem('mode', dropdown3);
+            sessionStorage.setItem('group', dropdown4);
+            
+            sessionStorage.setItem('redirected', 'true'); // Set flag for redirection
+            
+         // Function to handle redirection based on count
+            function handleCardClick(count, cardType, url) {
+                if (parseInt(count) === 0) {
+                    Swal.fire({
+                        icon: 'info',
+                        title: 'No Data',
+                        text: `No ${cardType} records available.`,
+                    });
+                } else {
+                    sessionStorage.setItem('cardType', cardType); // Set card type
+                    window.location.href = url;
+                }
+            }
+
+         // Attach click events to each card
+            document.getElementById('closedCard').addEventListener('click', function () {
+                handleCardClick(sessionStorage.getItem('closedcount'), 'Closed', '/gcc/callcenterqaqc/admin/qaqcassigntaskagents');
+            });
+
+            document.getElementById('reopenedCard').addEventListener('click', function () {
+                handleCardClick(sessionStorage.getItem('reopenedcount'), 'Reopened', '/gcc/callcenterqaqc/admin/qaqcassigntaskagents');
+            });
+
+            document.getElementById('inProgressCard').addEventListener('click', function () {
+                handleCardClick(sessionStorage.getItem('inProgressCount'), 'In Progress', '/gcc/callcenterqaqc/admin/qaqcassigntaskagents');
+            });
+
+            document.getElementById('redressedCard').addEventListener('click', function () {
+                handleCardClick(sessionStorage.getItem('redressedCount'), 'Redressed', '/gcc/callcenterqaqc/admin/qaqcassigntaskagents');
+            });
+
+            // Update UI with fetched data
+            document.getElementById('totalComplaints').textContent = data["Total Complaints"] || "0";
+            document.getElementById('inProgressCount').textContent = data["In Progress"] || "0";
+            document.getElementById('redressedCount').textContent = data["Redressed"] || "0";
+            document.getElementById('reopenedCount').textContent = data["Reopened"] || "0";
+            document.getElementById('closedCount').textContent = data["Closed"] || "0";
+
+            // Stop loading indicators
+            call_loading('totalComplaints', 'stop');
+            call_loading('inProgressCount', 'stop');
+            call_loading('redressedCount', 'stop');
+            call_loading('reopenedCount', 'stop');
+            call_loading('closedCount', 'stop');
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        });
+} 
+
+//Event listener for the search button to reload data based on selected filters
+document.getElementById('searchButton').addEventListener('click', function () {
+    // Get values from input fields
+    const startDateValue = document.getElementById('startDate').value; // yyyy-MM-dd format
+    const endDateValue = document.getElementById('endDate').value;   // yyyy-MM-dd format
+
+    // Function to format date as dd-MM-yyyy
+    const formatDate = (dateStr) => {
+        const [year, month, day] = dateStr.split('-'); // Split yyyy-MM-dd
+        return `${day}-${month}-${year}`;             // Rearrange to dd-MM-yyyy
+    };
+
+    // Convert to dd-MM-yyyy format
+    const formattedStartDate = formatDate(startDateValue);
+    const formattedEndDate = formatDate(endDateValue);
+
+    // Validate dates
+    const startDate = new Date(startDateValue); // Use original yyyy-MM-dd for comparison
+    const endDate = new Date(endDateValue);
+
+    if (startDate && endDate && startDate > endDate) {
+        alert("Start Date should be earlier than End Date.");
+        return;
+    }
+
+    // Call dashboard data loading logic with formatted date values
+    loadDashboardData(formattedStartDate, formattedEndDate);
+});
+
+//api for complainttypes,group,zone,ward
+
+document.addEventListener("DOMContentLoaded", function () {
+    const complaintTypeDropdown = document.getElementById('dropdown1');
+    const complaintGroupDropdown = document.getElementById('dropdown4');
+    const complaintModeDropdown = document.getElementById('dropdown3');
+    const complaintZoneDropdown = document.getElementById('dropdown2');
+
+    // Load Complaint Groups
+    fetch('/gcc/api/callcenterqaqc/getComplaintGroup') 
+        .then(response => response.json())
+        .then(data => {
+            // Clear existing options
+            complaintGroupDropdown.innerHTML = `<option value="">Select</option>`;
+
+            // Add options from the API response
+            data.forEach(complaintGroupName => {
+                complaintGroupDropdown.innerHTML += `<option value="${complaintGroupName}">${complaintGroupName}</option>`;
+            });
+        })
+        .catch(error => {
+            console.error('Error fetching complaint groups:', error);
+        });
+
+    // Event Listener for Complaint Group Change
+    complaintGroupDropdown.addEventListener('change', function () {
+        const selectedGroup = complaintGroupDropdown.value;
+
+        if (selectedGroup) {
+            // Fetch Complaint Types based on selected group
+            fetch(`/gcc/api/callcenterqaqc/getComplaintTypesByGroup?group=${encodeURIComponent(selectedGroup)}`)
+                .then(response => response.json())
+                .then(data => {
+                    // Clear existing options
+                    complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+
+                    // Add options from the API response
+                    data.forEach(complaintTypeName => {
+                        complaintTypeDropdown.innerHTML += `<option value="${complaintTypeName}">${complaintTypeName}</option>`;
+                    });
+                })
+                .catch(error => {
+                    console.error('Error fetching complaint types:', error);
+                });
+        } else {
+            // Clear complaint type dropdown if no group is selected
+            complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+        }
+    });
+    
+    
+    // Load all Modes 
+    fetch('/gcc/api/callcenterqaqc/getModes') 
+    .then(response => response.json())
+    .then(data => {
+        // Clear existing options
+        complaintModeDropdown.innerHTML = `<option value="">Select</option>`;
+
+        // Add options from the API response
+        data.forEach(complaintMode => {
+        	complaintModeDropdown.innerHTML += `<option value="${complaintMode}">${complaintMode}</option>`;
+        });
+    })
+    .catch(error => {
+        console.error('Error fetching complaint groups:', error);
+    });
+    
+    
+ // Load all zones 
+    fetch('/gcc/api/callcenterqaqc/getZones') 
+    .then(response => response.json())
+    .then(data => {
+        // Clear existing options
+        complaintZoneDropdown.innerHTML = `<option value="">Select</option>`;
+
+        // Add options from the API response
+        data.forEach(complaintZone => {
+        	complaintZoneDropdown.innerHTML += `<option value="${complaintZone}">${complaintZone}</option>`;
+        });
+    })
+    .catch(error => {
+        console.error('Error fetching complaint groups:', error);
+    });
+    
+});
+
+
+
+//Function to reset date fields
+  function resetDate() {
+
+  window.location.href = "/gcc/callcenterqaqc/admin/qaqcgrievancedashboard";
+      
+  } 
+
+</script>
+
+<script type="text/javascript">
+
+</script>
+
+        
+        
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/qaqctaskagentassign.html b/src/main/resources/templates/modules/callcenterqaqc/qaqctaskagentassign.html
new file mode 100644
index 0000000..31732f9
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/qaqctaskagentassign.html
@@ -0,0 +1,906 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.required{
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media (max-width: 767px) 
+{
+	#qaqcRequestForm label{
+		margin-top: 10px;
+	} 
+}
+
+.card-box {
+       	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+    }  
+    
+.bg-grey-inline-text {
+        padding:2px 2px;
+        background-color: #e6e6e6; 
+        border-radius: 4px;
+    }
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="far fa-calendar-plus bg-blue"></i>
+									<div class="d-inline">	
+										<h5>Assign Agents</h5>
+										<span>Assign Agents for Task</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>	
+										<li class="breadcrumb-item" aria-current="page">Admin QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Assign Agents</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                        
+                      
+                     <div class="row mt-4">
+
+						<div class="col-sm-4 mb-2">
+							<label for="displaystartDate" class="form-label"
+								style="font-size: medium; margin-bottom: 0px; font-weight: bold;">From
+								Date:</label> <input type="date" id="displaystartDate"
+								class="form-control" >
+						</div>
+						<div class="col-sm-4 mb-2">
+							<label for="displayendDate" class="form-label"
+								style="font-size: medium; margin-bottom: 0px; font-weight: bold;">To
+								Date:</label> <input type="date" id="displayendDate"
+								class="form-control">
+						</div>
+					</div>
+
+                      
+                      <div class="row mt-3">                   	
+                    	
+                    	<div class="col-xl-3 col-md-4 col-sm-12">
+
+							<div class="card card-box" id="closedCard" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayClosename"><b></b></p>
+							    <h2 class="text-twitter fw-700 ml-5 text-center" id="displayClosedcount"></h2>
+							</div>
+							
+							<div class="card card-box" id="reopenedCard" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayReopenname"><b></b></p>
+							    <h3 class="text-twitter fw-700 ml-5 text-center" id="displayReopenedcount"></h3>
+							</div>
+							
+							<div class="card card-box" id="inProgressCard" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayInProgressname"><b></b></p>
+							    <h3 class="text-twitter fw-700 ml-5 text-center" id="displayInProgresscount"></h3>
+							</div>
+							
+							<div class="card card-box" id="redressedCard" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayRedressedname"><b></b></p>
+							    <h3 class="text-twitter fw-700 ml-5 text-center" id="displayRedressedcount"></h3>
+							</div>
+							
+							<div class="card card-box" id="followupCard1" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayFollowupname1"><b></b></p>
+							    <h3 class="text-twitter fw-700 ml-5 text-center" id="displayfollowupcount1"></h3>
+							</div>
+							
+							<div class="card card-box" id="followupCard2" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayFollowupname2"><b></b></p>
+							    <h3 class="text-twitter fw-700 ml-5 text-center" id="displayfollowupcount2"></h3>
+							</div>
+							         	
+                    	</div>
+                    	                   	                  	
+                 	</div>
+                 	
+                 	<div class="row">
+                 		<div class="col-12">
+                 			<div class="card">
+                 				<div class="card-block">
+										<label>Task Description If any</label>
+										<textarea rows="1" cols="5" style="width: 100%;height:50px;" placeholder="Enter description"></textarea>
+								</div>								
+								
+                 			</div>
+                 		</div>
+                 	</div>
+                 	
+                 	<div class="row">
+                 		<div class="col-12">
+                 			<div class="card">
+                 				<div class="card-block">
+                 					<div class="row">
+                 						<div class=" col-lg-4 col-md-5 col-sm-12">
+											<label style="font-size: medium;font-weight: bold;">Click this Button to Clear the Pending Calls...</label>
+										</div>
+										<div class="col-lg-8 col-md-7 col-sm-12">
+											<button id="clearButton" class="btn btn-danger">Clear</button>
+										</div>
+									</div>
+								</div>														
+                 			</div>
+                 		</div>
+                 	</div>
+                 	
+                 	<div class="row">
+                 		<div class="col-12">
+                 			<div class="card">
+                 				<div class="card-header">
+									<h3><b>Available Agent List</b></h3>
+								</div>	
+								
+								<div class="card-body">
+									<div class="d-flex justify-content-end mb-2">
+										<button class="btn btn-light mr-4" disabled style="color: blue;border-color: blue;"><i class="ik ik-user-plus f-16" style="color: blue;"></i>Productivity Count:<span class="ml-4" id="productivitycount" style="color: blue;"></span></button>
+										<button class="btn btn-primary" disabled><i class="ik ik-user-plus f-16"></i>Total Available agents:<span class="ml-4" id="availableagentcount"></span></button>
+									</div>
+									<table id="AgentDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+									    <thead class="thead-dark">
+									        <tr role="row">
+									        	<th class="text-center">
+												    <input type="checkbox" id="selectAll" />
+												    <label for="selectAll">Select All</label>
+												</th>
+									            <th class="text-center" width="1%">S.No</th>									            
+									            <th class="text-center">AGENT ID</th>
+									            <th class="text-center">NAME</th>
+									            <th class="text-center">CAMPAIGN PENDING CALLS</th>
+									            <th class="text-center">ALREADY ASSIGNED CALLS</th>
+									            <th class="text-center">CALLS ASSIGNED</th>
+									            <th class="text-center">TOTAL CALLS</th>	
+												<th class="text-center">ACTION</th>
+									        </tr>
+									    </thead>
+									    <tbody style="text-align:center;">
+									        
+									    </tbody>
+										<!-- Transfer Modal -->
+										<div id="transferModal" class="modal" tabindex="-1" role="dialog">
+											<div class="modal-dialog" role="document">
+												<div class="modal-content">
+													<div class="modal-header">
+														<h5 class="modal-title">Transfer Calls</h5>
+														<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+															<span aria-hidden="true">&times;</span>
+														</button>
+													</div>
+													<div class="modal-body">
+														<!-- Editable Calls Assigned Count -->
+														<div class="form-group">
+															<label for="callsAssignedInput">Calls Assigned Count</label>
+															<input type="number" id="callsAssignedInput" class="form-control" min="1" placeholder="Enter Calls Count">
+														</div>
+														<!-- Transfer To Dropdown -->
+														<div class="form-group">
+															<label for="transferToDropdown">Transfer To</label>
+															<select id="transferToDropdown" class="form-control">
+																<!-- Options populated dynamically -->
+															</select>
+														</div>
+													</div>
+													<div class="modal-footer">
+														<button type="button" id="transferButton" class="btn btn-primary">Transfer</button>
+														<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+													</div>
+												</div>
+											</div>
+										</div>
+									</table>
+									 <div class="text-center">
+								      	<button class="btn btn-primary" id="assignBtn">Click to Assign</button>
+								    </div>
+									<div>
+								      	<button class="btn btn-secondary" id="backBtn">Back</button>
+								    </div>
+								</div>							
+								
+                 			</div>
+                 		</div>
+                 	</div>
+                        
+                    </div>
+                </div>
+                
+                <div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				    <div style="position: relative; top: 50%; transform: translateY(-50%);">
+				        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+				            <span class="sr-only">Loading...</span>
+				        </div>
+				        <!-- Add the 'Please wait' text below the spinner -->
+				        <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
+				    </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 src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        
+        <script type="text/javascript">
+        
+	        $(document).ready(function () {
+	
+	        	const redirected = sessionStorage.getItem('redirected'); // Check if redirected flag is set
+	            const cardType = sessionStorage.getItem('cardType'); // Get the card type
+	            //console.log("Redirected flag:", redirected);
+	            //console.log("Card Type:", cardType);
+	
+	            if (redirected === 'true') {
+	                // Fetch data from sessionStorage
+	                const closeName = sessionStorage.getItem("closename");
+	                const closedCount = sessionStorage.getItem("closedcount");
+	                const reopenName = sessionStorage.getItem("reopenname");
+	                const reopenedCount = sessionStorage.getItem("reopenedcount");
+	                const inProgressName = sessionStorage.getItem("inProgressName");
+	                const inProgressCount = sessionStorage.getItem("inProgressCount");
+	                const redressedName = sessionStorage.getItem("redressedName");
+	                const redressedCount = sessionStorage.getItem("redressedCount");
+	                const startDate = sessionStorage.getItem("startDate");
+	                const endDate = sessionStorage.getItem("endDate");
+	                const followupName1=sessionStorage.getItem("followupname1");
+	                const followupCount1=sessionStorage.getItem("followupcount1");
+	                const followupName2=sessionStorage.getItem("followupname2");
+	                const followupCount2=sessionStorage.getItem("followupcount2");
+	                
+	                const group=sessionStorage.getItem("group");
+	                const type=sessionStorage.getItem("type");
+	                const mode=sessionStorage.getItem("mode");
+	                const zone=sessionStorage.getItem("zone");
+	
+	                /* console.log("CloseName:", closeName);
+	                console.log("ClosedCount:", closedCount);
+	                console.log("ReopenName:", reopenName);
+	                console.log("ReopenedCount:", reopenedCount);
+	                console.log("InProgressName:", inProgressName);
+	                console.log("InProgressCount:", inProgressCount);
+	                console.log("RedressedName:", redressedName);
+	                console.log("RedressedCount:", redressedCount);
+	                console.log("StartDate:", startDate);
+	                console.log("EndDate:", endDate);
+	                console.log("followupName:", followupName);
+	                console.log("followupCount:", followupCount);
+	                
+	                console.log("group:",group);
+	                console.log("type",type);
+	                console.log("mode",mode);
+	                console.log("zone",zone);  */
+	                
+	                /* console.log("ofollowupName:", followupName1);
+	                console.log("ofollowupCount:", followupCount1);
+	                console.log("pfollowupName:", followupName2);
+	                console.log("pfollowupCount:", followupCount2); */
+	                
+	                let cardName = '';
+	                let cardCount = '';
+	
+	                // Set the relevant data based on cardType
+	                if (cardType === 'Closed') {
+	                	cardName = closeName;
+	                    cardCount = closedCount;
+	                    $("#displayClosename").text(closeName); // Display Closed
+	                    $("#displayClosedcount").text(closedCount);
+	                    // Hide others
+	                    $("#reopenedCard, #inProgressCard, #redressedCard","#followupCard1","#followupCard2").hide();
+	                    $("#closedCard").show();  // Show the Closed card
+	                } else if (cardType === 'Reopened') {
+	                	cardName = reopenName;
+	                    cardCount = reopenedCount;
+	                    $("#displayReopenname").text(reopenName); // Display Reopened
+	                    $("#displayReopenedcount").text(reopenedCount);
+	                    // Hide others
+	                    $("#closedCard, #inProgressCard, #redressedCard","#followupCard1","#followupCard2").hide();
+	                    $("#reopenedCard").show();  // Show the Reopened card
+	                } else if (cardType === 'In Progress') {
+	                	cardName = inProgressName;
+	                    cardCount = inProgressCount;
+	                    $("#displayInProgressname").text(inProgressName); // Display In Progress
+	                    $("#displayInProgresscount").text(inProgressCount);
+	                    // Hide others
+	                    $("#closedCard, #reopenedCard, #redressedCard","#followupCard1","#followupCard2").hide();
+	                    $("#inProgressCard").show();  // Show the In Progress card
+	                } else if (cardType === 'Redressed') {
+	                	 cardName = redressedName;
+	                     cardCount = redressedCount;
+	                    $("#displayRedressedname").text(redressedName); // Display Redressed
+	                    $("#displayRedressedcount").text(redressedCount);
+	                    // Hide others
+	                    $("#closedCard, #reopenedCard, #inProgressCard","#followupCard1","#followupCard2").hide();
+	                    $("#redressedCard").show();  // Show the Redressed card
+	                }
+	                else if (cardType === 'Followup1') {
+	               	 cardName = followupName1;
+	                    cardCount = followupCount1;
+	                   $("#displayFollowupname1").text(followupName1); // Display Redressed
+	                   $("#displayfollowupcount1").text(followupCount1);
+	                   // Hide others
+	                   $("#closedCard, #reopenedCard, #inProgressCard","#followupCard2").hide();
+	                   $("#followupCard1").show();  // Show the Redressed card
+	               }
+	                else if (cardType === 'Followup2') {
+		               	 cardName = followupName2;
+		                    cardCount = followupCount2;
+		                   $("#displayFollowupname2").text(followupName2); // Display Redressed
+		                   $("#displayfollowupcount2").text(followupCount2);
+		                   // Hide others
+		                   $("#closedCard, #reopenedCard, #inProgressCard","#followupCard1").hide();
+		                   $("#followupCard2").show();  // Show the Redressed card
+		               }
+	
+	                // Fill in date values
+	                $("#displaystartDate").val(startDate);
+	                $("#displayendDate").val(endDate);
+	
+	                // Disable the start and end date inputs
+	                $("#displaystartDate, #displayendDate").prop("disabled", true);
+	
+	                // Call the getStart function
+	                getStart(cardName, cardCount, startDate, endDate);
+	                
+	                
+	                $('#assignBtn').click(function (event) {
+	                    event.preventDefault();
+	                    
+	                    
+	                    if (!isCleared) {
+	                    	
+	                    	// Trigger Clear button flow
+	                        Swal.fire({
+	                        	allowOutsideClick: false, // Disable clicking outside the modal to close it
+	    	                    allowEscapeKey: false, // Disable escape key to close the modal
+	    	                    allowEnterKey: false, // Disable enter key to close the modal
+							    title: 'Clear pending calls before assigning?',
+							    icon: 'info',
+							    showCancelButton: true,
+							    showDenyButton: true, // Show the Deny button
+							    confirmButtonColor: 'green',
+							    cancelButtonColor: 'orange',
+							    denyButtonColor: 'grey',
+							    confirmButtonText: 'Yes, clear it!', // Confirm button text
+							    cancelButtonText: 'No, assign without clearing', // Cancel button text
+							    denyButtonText: 'Exit' // Deny button text
+							}).then((result) => {
+	                            if (result.isConfirmed) {
+	                                // Trigger Clear logic
+	                                $('#clearButton').click();
+	                                // Wait until Clear logic completes
+	                                const interval = setInterval(() => {
+	                                    if (isCleared) {
+	                                        clearInterval(interval); // Stop checking
+	                                        assignLogic(); // Proceed to Assign logic
+	                                    }
+	                                }, 500); // Check every 500ms
+	                            } 
+	                            else if (result.isDenied) {
+	                                // Do nothing on cancel (Cancel button clicked)
+	                                Swal.fire('Cancelled', 'No action performed.', 'info');
+	                            }
+	                            else {
+	                                // Proceed directly to Assign logic
+	                                assignLogic();
+	                            }
+	                        });
+	                    } else {
+	                        // Proceed with Assign logic directly if Clear is already done
+	                        assignLogic();
+	                    }
+	                    	
+	                });
+	
+	                    
+	            
+	        function assignLogic() {
+	        	
+	        	// Fetch the values from the fields
+                const startDate = $('#displaystartDate').val();
+                const endDate = $('#displayendDate').val();
+                
+                const description = $('textarea').val().trim() || "N/A"; // Default to "N/A" if empty
+                 /* console.log("startDate",startDate);  
+                 console.log("endDate",endDate); */ 
+
+                // Validate inputs if necessary
+                if (!startDate || !endDate || !cardName || !cardCount) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'All fields must be filled!',
+                    });
+                    return;
+                }
+                
+                const allAgents = [];
+                const table = $('#AgentDatatable').DataTable();
+                
+             //Loop through all rows in the DataTable
+                table.rows().every(function (rowIdx, tableLoop, rowLoop) {
+                    const row = $(this.node()); // Get the DOM row
+                    const checkbox = row.find('.select-agent');
+                    const agentId = row.find('td:nth-child(3)').text().trim();
+                    const callsPerAgent = row.find('td:nth-child(7)').text().trim();
+
+                    // Add agent to allAgents with default callsPerAgent = 0
+                    allAgents.push({ agentId: agentId, callsPerAgent: 0 });
+
+                    // If checkbox is checked, update callsPerAgent
+                    if (checkbox.is(':checked')) {
+                        const agent = allAgents.find(a => a.agentId === agentId);
+                        if (agent) {
+                            agent.callsPerAgent = callsPerAgent;
+                        }
+                    }
+                });
+
+                // Remove agents with callsPerAgent still set to 0
+                const filteredAgents = allAgents.filter(agent => agent.callsPerAgent > 0);
+
+             // Check if no agents were selected
+                if (filteredAgents.length === 0) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'Please select at least one agent or assign calls!',
+                    });
+                    return;
+                }
+             
+                //console.log('Filtered agents:', filteredAgents);
+                
+
+             // Prepare the data object to send in the AJAX request
+                const data = {
+                    startDate: startDate,
+                    endDate: endDate,
+                    closeName: cardName,
+                    closedCount: cardCount,
+                    description: description,
+                    group:group,
+	                type:type,
+	                mode:mode,
+	                zone:zone,
+                    agents:filteredAgents // Send only agents with callsPerAgent > 0
+                };
+
+                //console.log('Data to send:', data);
+                
+             	// Show the loader
+              $('#pageLoader').show();
+
+                // Send the AJAX request
+                $.ajax({
+                    type: "POST",
+                    url: "/gcc/api/callcenterqaqc/agentassign/taskassign", // Replace with your API endpoint
+                    data: JSON.stringify(data),
+                    contentType: "application/json",
+                    success: function (response) {
+                    	// Hide the loader
+                        $('#pageLoader').hide();
+                        // Show a success message using Swal
+                        Swal.fire({
+                            icon: 'success',
+                            title: 'Success',
+                            allowOutsideClick: false, // Disable clicking outside the modal to close it
+    	                    allowEscapeKey: false, // Disable escape key to close the modal
+    	                    allowEnterKey: false, // Disable enter key to close the modal
+    	                    showConfirmButton: true, // Ensure the confirm button is visible
+                            text: response.message || 'Data transferred successfully!',
+                        }).then((result) => {
+                        	if (result.isConfirmed) {       		            
+   		                 window.location.href = `/gcc/callcenterqaqc/qaqctasklist`;
+                        	}
+   		            });
+                    },
+                    error: function (error) {
+                    	$('#pageLoader').hide();
+                        // Show an error message using Swal
+                        Swal.fire({
+                        	allowOutsideClick: false, // Disable clicking outside the modal to close it
+    	                    allowEscapeKey: false, // Disable escape key to close the modal
+    	                    allowEnterKey: false, // Disable enter key to close the modal
+    	                    showConfirmButton: true, // Ensure the confirm button is visible
+                            icon: 'error',
+                            title: 'Error',
+                            text: error.responseJSON?.message,
+                        }).then((result) => {
+                        	if (result.isConfirmed) {       		            
+          		                 window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
+                               	}
+          		            });
+                    }
+                }); 
+	        }
+	
+	                // Clear the redirected flag after use
+	                sessionStorage.removeItem('redirected');
+	            } else {
+	                // Clear sessionStorage and notify the user
+	                sessionStorage.clear();
+	             // Show Swal alert and redirect on OK button
+	                Swal.fire({
+	                	allowOutsideClick: false, // Disable clicking outside the modal to close it
+	                    allowEscapeKey: false, // Disable escape key to close the modal
+	                    allowEnterKey: false, // Disable enter key to close the modal
+	                    showConfirmButton: true, // Ensure the confirm button is visible
+	                    icon: 'error',
+	                    title: 'Access Denied',
+	                    text: 'Please navigate from the Dashboard Page.',
+	                    confirmButtonText: 'OK',
+	                }).then((result) => {
+	                    if (result.isConfirmed) {
+	                        // Redirect to the desired page
+	                    	window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
+	                    }
+	                });	            }
+
+            // Optional: You can still allow toggling of cards if needed:
+            $('.card-box').on('click', function () {
+                // Hide all the card-box elements
+                $('.card-box').hide();
+                
+                // Get the id of the clicked card-box and show it
+                const cardId = $(this).attr('id');
+                $('#' + cardId).show();
+            });
+
+            function getStart(closeName,closedCount,startDate,endDate)
+            {	
+            	// Show the loader
+                $('#pageLoader').show();
+            	
+            	$.ajax({
+    		        url: '/gcc/api/callcenterqaqc/agentassign/getavailableagents?totalDataCount='+closedCount,
+    		        type: 'GET',
+    		        dataType: 'json',
+    		        success: function(response) {
+    		        	// Hide the loader
+                        $('#pageLoader').hide();
+    		        	if (response.status === 'success') {
+    	                    populateDataTable(response);
+    	                    $("#productivitycount").text(response.productivity_count);
+    	                    $("#availableagentcount").text(response.agent_available_count);
+    	                } if (response.status === 'error') {
+    	                	 $('#pageLoader').hide();
+    	                    Swal.fire({
+    	                        icon: 'error',
+    	                        title: 'Error',
+    	                        text: response.message || "Error fetching Agents.",
+    	                        confirmButtonText: 'OK',
+    	                    }).then((result) => {
+    	                        if (result.isConfirmed) {
+    	                            // Reload the same page
+             		                 window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
+    	                        }
+    	                    });
+    	                }
+    		        },
+    		        error: function(xhr, status, error) {
+    		        	 $('#pageLoader').hide();
+    		            console.error('Error fetching assigned agents:', error);
+    		        }
+    		    });
+            }
+            
+            function populateDataTable(data) {
+                // Clear existing rows
+                var table = $('#AgentDatatable').DataTable();
+                table.clear();
+
+                // Populate table
+                data.available_agents.forEach((agent, index) => {
+
+                    table.row.add([
+                        `<input type="checkbox" class="select-agent" value="${agent.agent_id}" checked />`,
+                        index + 1,
+                        agent.agent_id,
+                        agent.agent_name,
+                        agent.campaignPendingCount,
+                        agent.todayCount1,
+                        agent.calls_per_agent,
+                        agent.totalCallsCount,
+                         `<button class="btn btn-warning btn-sm edit-agent" data-id="${agent.agent_id}"><i class="ik ik-edit"></i></button>`
+                    ]);
+                });
+
+                // Redraw table to reflect new data
+                table.draw();                             
+               
+            }
+
+			let selectedAgentId; // Store the agent being edited
+
+			// Handle "Edit" button click
+			$(document).on('click', '.edit-agent', function () {
+				const row = $(this).closest('tr'); // Get the parent row of the clicked button
+				selectedAgentId = row.find('td:nth-child(3)').text().trim(); // Get the Agent ID
+				const callsAssigned = row.find('td:nth-child(7)').text().trim(); // Get Calls Assigned Count
+
+				// Populate the Calls Assigned input field
+				$('#callsAssignedInput').val(callsAssigned);
+
+				// Populate the Transfer To dropdown
+				const dropdown = $('#transferToDropdown');
+				dropdown.empty(); // Clear previous options
+				$('#AgentDatatable tbody tr').each(function () {
+					const agentId = $(this).find('td:nth-child(3)').text().trim();
+					const agentName = $(this).find('td:nth-child(4)').text().trim();
+
+					// Exclude the currently selected agent from the dropdown
+					if (agentId !== selectedAgentId) {
+						dropdown.append(`<option value="${agentId}">${agentName}</option>`);
+					}
+				});
+
+				// Show the modal
+				$('#transferModal').modal('show');
+			});
+
+			// Handle "Transfer" button click
+			$('#transferButton').click(function () {
+				const transferCount = parseInt($('#callsAssignedInput').val(), 10);
+				const transferToAgentId = $('#transferToDropdown').val();
+
+				if (!transferCount || transferCount <= 0) {
+					alert('Please enter a valid calls count!');
+					return;
+				}
+
+				if (!transferToAgentId) {
+					alert('Please select an agent to transfer the calls!');
+					return;
+				}
+
+				let deductionSuccess = false; // Flag for successful deduction from the current agent
+				let additionSuccess = false; // Flag for successful addition to the receiving agent
+				const productivityCount = parseInt($('#productivitycount').text().trim(), 10); // Fetch dynamic productivity count from the button
+
+				// Validate and update the table
+				$('#AgentDatatable tbody tr').each(function () {
+					const agentId = $(this).find('td:nth-child(3)').text().trim();
+					const callsAssignedCell = $(this).find('td:nth-child(7)'); // Calls Assigned column
+
+					// Validate deduction from the current agent
+					if (agentId === selectedAgentId) {
+						const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
+						if (currentCount >= transferCount) {
+							deductionSuccess = true;
+						} else {
+
+							alert('Transfer not allowed! Transferring more calls than assigned.');
+
+							return false; // Stop the operation
+						}
+					}
+
+					// Validate addition to the receiving agent
+					if (agentId === transferToAgentId) {
+						const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
+						const newCount = currentCount + transferCount;
+						if (newCount <= productivityCount) {
+							additionSuccess = true;
+						} else {
+							alert(`Transfer not allowed! Transferring ${transferCount} calls will exceed the productivity count of ${productivityCount} for agent ID: ${transferToAgentId}.`);
+
+							return false; // Stop the operation
+						}
+					}
+				});
+
+				// If both validations pass, proceed to update the table
+				if (deductionSuccess && additionSuccess) {
+					$('#AgentDatatable tbody tr').each(function () {
+						const agentId = $(this).find('td:nth-child(3)').text().trim();
+						const callsAssignedCell = $(this).find('td:nth-child(7)'); // Calls Assigned column
+						const totalCallsCell = $(this).find('td:nth-child(8)'); // TOTAL CALLS column
+
+						// Deduct calls from the current agent
+						if (agentId === selectedAgentId) {
+							const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
+							callsAssignedCell.text(currentCount - transferCount);
+
+							// Update TOTAL CALLS for the current agent
+							const currentTotalCalls = parseInt(totalCallsCell.text().trim(), 10);
+							totalCallsCell.text(currentTotalCalls - transferCount);
+						}
+
+						// Add calls to the receiving agent
+						if (agentId === transferToAgentId) {
+							const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
+							callsAssignedCell.text(currentCount + transferCount);
+
+							// Update TOTAL CALLS for the receiving agent
+							const currentTotalCalls = parseInt(totalCallsCell.text().trim(), 10);
+							totalCallsCell.text(currentTotalCalls + transferCount);
+						}
+					});
+
+					// Dynamically update the total calls across all agents
+					let totalCalls = 0;
+					$('#AgentDatatable tbody tr').each(function () {
+						const totalCallsCell = $(this).find('td:nth-child(8)'); // TOTAL CALLS column
+						totalCalls += parseInt(totalCallsCell.text().trim(), 10);
+					});
+					$('#totalCallsCount').text(totalCalls); // Update total calls count across all agents
+
+					// Close the modal
+					$('#transferModal').modal('hide');
+				}
+
+			});
+
+
+            
+            // Initialize DataTable
+            var table = $('#AgentDatatable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                ],
+                scrollY: '50vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: [
+                    {
+                        extend: 'pageLength',
+                        className: 'btn btn-warning'
+                    },
+                    {
+                        title: 'Data export',
+                        extend: 'copyHtml5',
+                        text: 'Copy',
+                        className: 'btn btn-secondary',
+                        id: 'copyBtn'
+                    },
+                    {
+                        extend: 'excelHtml5',
+                        text: 'Excel',
+                        className: 'btn btn-secondary',
+                        id: 'excelBtn'
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        text: 'CSV',
+                        className: 'btn btn-secondary',
+                        id: 'csvBtn'
+                    },
+                    {
+                        extend: 'pdfHtml5',
+                        text: 'PDF',
+                        className: 'btn btn-secondary',
+                        id: 'pdfBtn'
+                    }
+                ],
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false
+            });
+        });
+
+        $(document).ready(function () {
+            // "Select All" checkbox functionality
+            $('#selectAll').on('change', function () {
+                const isChecked = $(this).is(':checked');
+                $('.select-agent').prop('checked', isChecked); // Check/uncheck all checkboxes
+            });
+
+            // Ensure "Select All" is checked/unchecked based on individual checkboxes
+            $(document).on('change', '.select-agent', function () {
+                const allChecked = $('.select-agent:checked').length === $('.select-agent').length;
+                $('#selectAll').prop('checked', allChecked); // Check "Select All" only if all checkboxes are selected
+            });
+        });		
+        </script>
+        <script type="text/javascript">
+        $(document).ready(function () {
+        	$('#backBtn').click(function (event) {
+	                 window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
+        	});
+        	
+        });
+        </script>
+        <script>
+     // Global flag to track if Clear logic has been executed
+        let isCleared = false;
+     	
+    document.getElementById('clearButton').addEventListener('click', function () {
+        Swal.fire({
+            title: 'Are you sure to clear calls?',          
+            icon: 'warning',
+            allowOutsideClick: false, // Disable clicking outside the modal to close it
+            allowEscapeKey: false, // Disable escape key to close the modal
+            allowEnterKey: false, // Disable enter key to close the modal
+            showCancelButton: true,
+            confirmButtonColor: '#d33',
+            cancelButtonColor: '#3085d6',
+            confirmButtonText: 'Yes, clear it!',
+            cancelButtonText: 'No, cancel'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // Logic to clear calls can be added here
+                
+                $.ajax({
+	            url: '/gcc/api/callcenterqaqc/agentassign/deleteRecords',
+	            type: 'GET',
+	            contentType: 'application/json',
+	            success: function (response) {
+            		//console.log("response",response);
+            		if (response==="success") {
+            		
+            			Swal.fire(
+                                'Cleared!',
+                                'The calls have been cleared.',
+                                'success'
+                            );
+            			isCleared = true; // Mark as cleared
+	            	}
+	            	else {
+		                Swal.fire("Info", "No Records to clear,You can Assign", "info");
+		                isCleared = true; // Mark as cleared
+	                }
+            	 
+		            },
+		            error: function (xhr, status, error) {
+			            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+		                
+		            }
+		        });
+
+            } else {
+                Swal.fire(
+                    'Cancelled',
+                    'Your data is safe,If you wish you can Assign :)',
+                    'info'
+                );
+                isCleared = true;
+            }
+        });
+    });
+</script>
+        
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/qaqctasklist.html b/src/main/resources/templates/modules/callcenterqaqc/qaqctasklist.html
new file mode 100644
index 0000000..8029b49
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/qaqctasklist.html
@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style> 
+ .required{
+	color: red;
+}
+.card-box {
+       	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+       	
+    }
+    
+@media (max-width: 768px) {
+    .card-box {
+        text-align: center;
+    }
+
+}		
+</style>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <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="fa fa-list-alt bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>QAQC Task List</h5>
+                                        <span>1913 QAQC Task List</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="/gcc/index"><i class="ik ik-home"></i></a>
+                                        </li>
+                                        <li class="breadcrumb-item" aria-current="page">1913 Reports</li>																				
+                                        <li class="breadcrumb-item active" aria-current="page">QAQC Task List</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+					
+	                <div class="row mt-4">
+	                	
+	                	<div class="col-md-12">
+                             <div class="card">
+                             	<div class="card-header">
+                             		<h3>Task Details</h3>
+                             	</div>
+                             	
+                          	<div class="row mt-3 ml-2">
+									    <div class="col-md-3">
+									    	<label for="startDate" class="form-label" style="font-size: medium;">From Date:</label>
+									        <input type="date" id="startDate" class="form-control" placeholder="Start Date">
+									    </div>
+									    <div class="col-md-3">
+									    	<label for="endDate" class="form-label" style="font-size: medium;">To Date:</label>
+									        <input type="date" id="endDate" class="form-control" placeholder="End Date">
+									    </div>
+									    <div class="col-md-3" style="margin-top: 30px;">
+									        <button id="searchBtn" class="btn btn-primary">Search</button>
+									        <button id="resetBtn" class="btn btn-secondary">Reset</button>
+									    </div>
+									</div>
+					   				
+					   				<div class="card-body">
+					   				<div>
+					   					<div class="row mt-2"> 
+					   					
+					   							                  	                  	
+                    						<div class="col-xl-3 col-md-3 col-sm-12">
+												<div class="card card-box p-4">                   			
+					                    				<h6 class="text-facebook mb-20 mt-2 text-center"><b>Total Task</b></h6>
+                    									<h4 class="text-twitter fw-700 text-center" id="totaltask"></h4>                   			
+                    							</div>                   	
+                    						</div>  
+                    						<div class="col-xl-3 col-md-3 col-sm-12">
+												<div class="card card-box p-4">                   			
+					                    				<h6 class="text-facebook mb-20 mt-2 text-center"><b>Assigned Calls</b></h6>
+                    									<h4 class="text-twitter fw-700 text-center" id="totalcalls"></h4>                   			
+                    							</div>                   	
+                    						</div>
+                    						<div class="col-xl-3 col-md-3 col-sm-12">
+												<div class="card card-box p-4">                   			
+					                    				<h6 class="text-facebook mb-20 mt-2 text-center"><b>Finished</b></h6>
+                    									<h4 class="text-twitter fw-700 text-center" id="completedcalls"></h4>                   			
+                    							</div>                   	
+                    						</div>
+                    						<div class="col-xl-3 col-md-3 col-sm-12">
+												<div class="card card-box p-4">                   			
+					                    				<h6 class="text-facebook mb-20 mt-2 text-center"><b>Pending Calls</b></h6>
+                    									<h4 class="text-twitter fw-700 text-center" id="pendingcalls"></h4>                   			
+                    							</div>                   	
+                    						</div>                  						                	                   	                  	
+                 						</div>
+                 						
+                 						<div>               							
+                 							<table id="QaqcDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+							                    <thead class="thead-dark">
+											        <tr role="row">
+							                            <th rowspan="2" class="text-center" width="1%;">S.No</th>
+							                            <th rowspan="2" class="text-center no-sort">Task ID</th>
+							                            <th rowspan="2" class="text-center" width="100px;">Date</th> 
+							                            <th rowspan="2" class="text-center no-sort">Category</th>
+							                            <!-- <th rowspan="2" class="text-center">Description</th> -->
+							                            <th colspan="4" class="text-center">Performance</th>
+							                            <th colspan="4" class="text-center">Call Results</th>
+							                            
+							                        </tr>
+							                        <tr role="row">           
+							                            <!-- <th class="text-center">S.No</th> 
+							                            <th class="text-center">Task ID</th>  -->
+							                            
+							                            <th class="text-center no-sort">Assigned Calls</th>							                            
+							                            <th class="text-center no-sort">Finished</th>
+							                            <th class="text-center no-sort">Pending Calls</th>
+							                            <th class="text-center no-sort">Completion(%)</th>
+							                            <th class="no-sort">Completed</th> 
+							                            <th class="no-sort">Reopen</th>
+							                            <th class="no-sort">Followup</th>
+							                            <th class="no-sort">Others</th>
+							                        </tr>
+							                    </thead>
+							                    <tbody>
+							                        
+							                    </tbody>
+							                </table>
+                 						</div>
+                 						
+					   				</div>
+                             	</div>						 
+							 </div>
+                         </div> 
+					</div>	               	
+             						 					  
+			</div> 
+        </div>
+   
+     <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+      </div>
+</div>
+
+
+<!--agentperformance Modal -->
+		<div class="modal fade" id="agentperformance" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalCenterLabel">Task Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    
+                    <div class="modal-body">
+                    
+                    <div class="modal-info"></div>
+						<div class="table-responsive" >
+						<table id="agentperformanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+                              <thead class="thead-dark">
+                                 	<tr role="row">
+                            <th rowspan="2" class="text-center">S.No</th>
+                            <th rowspan="2" class="text-center">Agent Name</th>                           
+                            <th colspan="4" class="text-center">Performance</th>
+                            <th colspan="4" class="text-center">Call Results</th>
+                        </tr>
+                        <tr role="row">          
+                            <th class="text-center">Assigned Calls</th>
+                            <th class="text-center">Finished</th>
+                            <th class="text-center">Pending Calls</th>
+                            <th class="text-center">Completion (%)</th>
+                            <th class="text-center">Completed</th>
+                            <th class="text-center">Reopen</th>
+                            <th class="text-center">Followup</th>
+                            <th class="text-center">Others</th>
+                            
+                        </tr>
+						 </thead>
+                         <tbody>
+                                    
+                         </tbody>
+                               
+                       </table>
+						</div>
+                     </div>
+  					
+  					<div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                        
+                    </div>                                        
+                </div>
+            </div>
+        </div>
+
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">	
+ 	 $(document).ready(function() {
+ 		 
+ 		 $('#agentperformance').on('shown.bs.modal', function () {
+
+ 	    	 var buttons = [
+ 	             {
+ 	                 extend: 'pageLength',
+ 	                 className: 'btn btn-warning'
+ 	             },
+ 	             {
+ 	                 title: 'Data export',
+ 	                 extend: 'copyHtml5',
+ 	                 text: 'Copy',
+ 	                 className: 'btn btn-secondary'
+ 	             },
+ 	             {
+ 	                 extend: 'excelHtml5',
+ 	                 text: 'Excel',
+ 	                 className: 'btn btn-secondary'
+ 	             },
+ 	             {
+ 	                 extend: 'csvHtml5',
+ 	                 text: 'CSV',
+ 	                 className: 'btn btn-secondary'
+ 	             },
+ 	             {
+ 	                 extend: 'pdfHtml5',
+ 	                 text: 'PDF',
+ 	                 className: 'btn btn-secondary'
+ 	             }
+ 	         ];
+ 	        
+ 	            $('#agentperformanceDatatable').DataTable({
+ 	                dom: 'Bftip',               
+ 	                columnDefs: [
+ 	                    { targets: 'no-sort', orderable: false }
+ 	                ],
+ 	                lengthMenu: [
+ 	                    [50, 100, 200, 500, -1],
+ 	                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+ 	                ],
+ 	                scrollY: '30vh',
+ 	                scrollX: true,  // Enable horizontal scrolling	
+ 	                fixedColumns: {
+ 	                    left: 1,
+ 	                    right: 1
+ 	                },
+ 	                buttons: buttons,
+ 	                fixedHeader: false,
+ 	                autoWidth: false,
+ 	                responsive: true,
+ 	                searching: true,
+ 	                select: false,
+ 	                processing: false,
+ 	            });
+ 	        
+ 	        
+ 	    });
+
+     	var table = $('#QaqcDatatable').DataTable({
+             dom: 'Bftip',
+             columnDefs: [
+                 { targets: 'no-sort', orderable: false }
+             ],
+             lengthMenu: [
+                 [50, 100, 200, 500, -1],
+                 ['50 rows', '100 rows', '200 rows', 'Show all']
+             ],
+             scrollY: '50vh',
+             fixedColumns: {
+                 left: 1,
+                 right: 1
+             },
+             buttons: [
+                 {
+                     extend: 'pageLength',
+                     className: 'btn btn-warning'
+                 },
+                 {
+                     title: 'Data export',
+                     extend: 'copyHtml5',
+                     text: 'Copy',
+                     className: 'btn btn-secondary',
+                     id: 'copyBtn'
+                 },
+                 {
+                     extend: 'excelHtml5',
+                     text: 'Excel',
+                     className: 'btn btn-secondary',
+                     id: 'excelBtn'
+                 },
+                 {
+                     extend: 'csvHtml5',
+                     text: 'CSV',
+                     className: 'btn btn-secondary',
+                     id: 'csvBtn'
+                 },
+                 {
+                     extend: 'pdfHtml5',
+                     text: 'PDF',
+                     className: 'btn btn-secondary',
+                     id: 'pdfBtn'
+                 }
+             ],
+             fixedHeader: true,
+             autoWidth: true,
+             responsive: true,
+             searching:true,
+             select: false,
+             processing: false
+         });
+    	
+     	 // Initialize DataTable with export buttons
+
+            const overallcountapiUrl = "/gcc/api/callcenterqaqc/qaqctasklist/overalltaskcount"; // Replace with your API endpoint
+		    const tableApiUrl = "/gcc/api/callcenterqaqc/qaqctasklist/taskdatacount";
+            const agentApiUrl = "/gcc/api/callcenterqaqc/qaqctasklist/agentdatacount";
+		    const totaltasks = document.getElementById("totaltask");
+		    const totalcallsassigned = document.getElementById("totalcalls");
+		    const completedcallscount = document.getElementById("completedcalls");
+		    const pendingcallscount = document.getElementById("pendingcalls");
+		    const dataTableElement = $("#QaqcDatatable").DataTable(); // Initialize DataTable
+
+		    // Fetch Data Function
+		    const fetchData = async (startDate = "", endDate = "") => {
+		        try {
+		            const params = new URLSearchParams();
+		            if (startDate) params.append("startDate", startDate);
+		            if (endDate) params.append("endDate", endDate);
+
+		            const response = await fetch(`${overallcountapiUrl}?${params.toString()}`);
+		            const data = await response.json();
+					
+		            //console.log(data);
+		            // Update Summary Counts
+		            const firstItem = data[0];  // Get the first object from the array
+		            totaltasks.textContent = firstItem.total_tasks || 0; 
+		            totalcallsassigned.textContent = firstItem.total_calls || 0; 
+		            completedcallscount.textContent = firstItem.completed_calls || 0;  
+		            pendingcallscount.textContent = firstItem.pending_calls || 0; 
+             } catch (error) {
+		            console.error("Error fetching data:", error);
+		        }
+		    };
+		    
+
+    // Fetch and Populate Table Data Function
+    const fetchTableData = async (startDate = "", endDate = "") => {
+        try {
+            const params = new URLSearchParams();
+            if (startDate) params.append("startDate", startDate);
+            if (endDate) params.append("endDate", endDate);
+
+            const response = await fetch(`${tableApiUrl}?${params.toString()}`);
+            const tableData = await response.json();
+
+            // Update DataTable with new data
+            table.clear(); // Clear existing data
+            tableData.forEach((row, index) => {
+                const percentage = row.Assigned
+                    ? Math.round((row.TotalCompleted / row.Assigned) * 100)
+                    : 0;
+
+                table.row.add([
+                	
+                	`<div style="text-align: center;">${index + 1}</div>`,
+                	`<button class="btn btn-success" data-taskid="${row.qaqc_id}" 
+                    onclick="handleTaskButtonClick('${row.qaqc_id}')">${row.taskid}</button>`,
+                    `<div style="text-align: center;">${row.TaskCreatedDate}</div>`,
+                    `<div style="text-align: center;">${row.call_category}</div>`,
+                    /* `<div style="text-align: center;">${row.description}</div>`, */                                      
+                    `<div style="text-align: center;">${row.Assigned}</div>`,
+                    `<div style="text-align: center;">${row.TotalCompleted}</div>`,
+                    `<div style="text-align: center;">${row.Pending}</div>`,
+                    `<div style="text-align: center;">${percentage}%</div>`,
+                    `<div style="text-align: center;">${row.Completed}</div>`,
+                    `<div style="text-align: center;">${row.Reopened}</div>`,
+                    `<div style="text-align: center;">${row.Followup}</div>`,
+                    `<div style="text-align: center;">${row.Others}</div>`,
+                ]);
+                
+            });
+            table.draw(); // Redraw the DataTable with the updated data
+      
+        } catch (error) {
+            console.error("Error fetching table data:", error);
+        }
+    };
+
+    // Example: Fetch Data initially without filters
+    fetchTableData();
+    
+ // Event listener for From Date selection
+	   $("#startDate").on("change", function() {
+	       const startDate = $(this).val();  // Get the selected start date
+	       // Set the min value for To Date to be the selected From Date
+	       $("#endDate").attr("min", startDate);
+	   });
+
+	   // Event listener for To Date selection
+	   $("#endDate").on("change", function() {
+	       const endDate = $(this).val();  // Get the selected end date
+	       // Set the max value for From Date to be the selected To Date
+	       $("#startDate").attr("max", endDate);
+	   });
+
+		    // Search Button Click
+		    document.getElementById("searchBtn").addEventListener("click", () => {
+		        const startDate = document.getElementById("startDate").value;
+		        const endDate = document.getElementById("endDate").value;
+		        fetchData(startDate, endDate);
+		        fetchTableData(startDate,endDate);
+		        
+		        
+		    });
+
+		    // Reset Button Click
+		    document.getElementById("resetBtn").addEventListener("click", () => {
+		        /* document.getElementById("startDate").value = "";
+		        document.getElementById("endDate").value = "";
+		        fetchData(); // Fetch data without date filters
+		        fetchTableData(); */
+ 		        window.location.href = "/gcc/callcenterqaqc/qaqctasklist";		        
+		    });
+
+		    // Initial Load
+		    fetchData(); // Load overall data initially
+            fetchTableData();
+		});
+ 	 
+ 	 function handleTaskButtonClick(TaskId)
+ 	 {
+ 		 //console.log("TaskId",TaskId);
+ 		 		 
+ 		 
+ 		$('#agentperformance').modal({
+            backdrop: 'static',
+            keyboard: false
+        });
+        $('#agentperformance').modal('show');
+        
+     // Clear old data from the table
+ 	    if ($.fn.DataTable.isDataTable('#agentperformanceDatatable')) {
+ 	        $('#agentperformanceDatatable').DataTable().clear().destroy();
+ 	    }
+ 		 
+        $.ajax({
+            url: '/gcc/api/callcenterqaqc/qaqctasklist/agentdatacount?qaqc_id='+TaskId,
+            type: 'GET',
+            contentType: 'application/json',
+            success: function (response) {
+            	//console.log("response",response);
+            	if (response && response.length > 0) {
+            		
+	            	let CtableBody = $('#agentperformanceDatatable tbody');
+	            	CtableBody.empty();
+            	response.forEach((item, index) => {
+            		const modalHeader = `
+                        <h5 class="modal-title" id="exampleModalCenterLabel">
+                            Task Details - <span>Task ID: ${item.taskId}</span> and
+                            <span>Created Date: ${item.TaskCreatedDate}</span>
+                            
+                        </h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    `;
+                    $('.modal-header').html(modalHeader);
+                    
+                 // Updating the modal body with additional details
+                    const modalBodyDetails = `
+                    <div class="mt-1" style="font-size: 14px;">
+                        <div class="row pb-2">
+                            <div class="col-md-6"><strong>From Date:</strong> ${item.fromdate || 'N/A'}</div>
+                            <div class="col-md-6"><strong>To Date:</strong> ${item.todate || 'N/A'}</div>
+                        </div>
+                        <div class="row pb-2">
+                            <div class="col-md-6"><strong>Description:</strong> ${item.description || 'N/A'}</div>
+                            <div class="col-md-6"><strong>Call Category:</strong> ${item.call_category || 'N/A'}</div>
+                        </div>
+                        <div class="row pb-2">
+	                        <div class="col-md-6"><strong>Complaint Group:</strong> ${item.complaint_group || 'N/A'}</div>
+	                        <div class="col-md-6"><strong>Complaint Type:</strong> ${item.complaint_type || 'N/A'}</div>
+                    	</div>
+                    	<div class="row pb-2">
+                        <div class="col-md-6"><strong>Complaint Mode:</strong> ${item.complaint_mode || 'N/A'}</div>
+                        <div class="col-md-6"><strong>Complaint Zone:</strong> ${item.complaint_zone || 'N/A'}</div>
+                	</div>
+                	</div>
+                        <hr>
+                    `;
+                    $('.modal-info').html(modalBodyDetails); // Insert the details before the table
+                    
+            		let row = `
+            			<tr>
+                        <td class="text-center">${index + 1}</td>
+                        <td class="text-center">${item.agentName}</td>
+                        <td class="text-center">${item.assigned || 0}</td>
+                        <td class="text-center">${item.callstaken || 0}</td>
+                        <td class="text-center">${item.pending || 0}</td>
+                        <td class="text-center">${item.percentage || 0}%</td>
+                        <td class="text-center">${item.Completed || 0}</td>
+                        <td class="text-center">${item.Reopened || 0}</td>
+                        <td class="text-center">${item.Followup || 0}</td>
+                        <td class="text-center">${item.Others || 0}</td>
+                    </tr>
+                `;
+            		CtableBody.append(row); 
+            	});
+            	}
+            	else {
+                    $('#agentperformanceDatatable tbody').html(`
+                        <tr>
+                            <td colspan="10" class="text-center">No data available</td>
+                        </tr>
+                    `);
+                }
+            	 
+            },
+            error: function (xhr, status, error) {
+                console.error('Error in Fetching Task:', error);
+                $('#agentperformanceDatatable tbody').html(`
+                        <tr>
+                            <td colspan="10" class="text-center text-danger">Failed to load data</td>
+                        </tr>
+                    `);
+            }
+        });
+ 		 
+ 	 }
+
+    
+	</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/socialmediacomplaints.html b/src/main/resources/templates/modules/callcenterqaqc/socialmediacomplaints.html
new file mode 100644
index 0000000..60cbf30
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/socialmediacomplaints.html
@@ -0,0 +1,1123 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+    .width1{
+    	width: 100px;
+    }
+    .width2{
+    	width: 120px;
+    }
+</style>
+<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fa fa-list-alt bg-blue"></i>
+									<div class="d-inline">
+										<h5>SocialMedia Complaints</h5>
+										<span>View Social Media Complaints</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 Social Media</li>
+										<li class="breadcrumb-item active" aria-current="page">Social Media Complaints</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+					
+					<div class="row mt-4">
+						<div class="col-12">
+							<div class="card">
+								<div class="card-header">
+									<span style="font-size: medium;font-weight: bold;">Select Filters</span>
+								</div>
+								<div class="card-body">
+									<div class="row">
+										<div class="col-sm-2 mb-2">
+											<label for="startDate" style="font-size: medium;">From Date:</label>
+						                    <input type="date" id="startDate" class="form-control">
+										</div>
+										<div class="col-sm-2 mb-2">
+											<label for="endDate" style="font-size: medium;">To Date:</label>
+						                    <input type="date" id="endDate" class="form-control">
+										</div>
+										
+										<div class="col-sm-2 mb-2">
+								            <label for="stsdropdown" style="font-size: medium;">Status:</label>
+								            <select id="stsdropdown" class="form-control">
+								            <option value="total">Select</option>
+								            <option value="processing">Processing</option>
+								            <option value="reopened">Reopened</option>
+								            <option value="redressed">Action Taken 1</option>
+								            <option value="closed" selected>Action Taken 2</option>
+								            <option value="completed">Completed</option>
+											</select>
+										</div>
+										
+										<div class="col-sm-2 mb-2">
+								            <label for="dropdown4" style="font-size: medium;">Group:</label>
+								            <select id="dropdown4" class="form-control">
+								            <option value="">Select</option>
+								               <!--  <option value="">general</option> -->
+								                <!-- Add options here -->
+											</select>
+										</div>
+															
+									
+										<div class="col-sm-2 mb-2">
+											 <label for="dropdown1"  style="font-size: medium;">Type:</label>
+						                     <select id="dropdown1" class="form-control">
+							                 <option value="">Select</option>
+							            	 <!-- <option value="Cleanliness in Parks">Cleanliness in Parks</option> -->
+
+											</select>
+										</div>
+										<div class="col-sm-2 mb-2">
+											<label for="dropdown2" style="font-size: medium;">Zone:</label>
+						                    <select id="dropdown2" class="form-control">
+						                    <option value="">Select</option>
+						                    <!-- <option value="N01">N01</option> -->
+												<!-- <option value="ALL">ALL</option> -->
+
+											</select>
+										</div>
+										
+										</div>
+										
+									
+									
+									<div class="row mt-4">
+										<div class="col-12 d-flex justify-content-center">
+											<button type="submit" id="searchBtn"
+												class="btn btn-primary mx-2">Search</button>
+
+											<button class="btn btn-danger mx-2" id="resetBtn"
+												name="reset" type="reset">Reset</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+			
+					
+						<div class="row mt-4">
+								<div class="col-md-12">
+									<div class="card">
+									<div class="card-header">
+										<h3 style="font-weight: bold;font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span>
+	  										<span th:text="${agent_name}" style="font-weight: bold; font-size: large;"></span>'s Complaints List</h3>
+									</div>
+									<div class="card-body">
+										<div class="table-responsive">
+	
+											<table id="ReportDatatable"
+												class="table table-striped table-bordered table-hover dataTable"
+												role="grid">
+												<thead class="thead-dark">
+													<tr role="row">
+	
+														<th class="text-center no-sort">S.No</th>																														
+														<th class="text-center">Reg Date</th>
+														<th class="text-center no-sort">Complaint No</th>
+														<th class="text-center">ComplaintType</th>
+														<th class="text-center">View</th>																																											
+														<th class="text-center">Officer Name</th>	
+														<th class="text-center">Officer Mobile no</th>	
+														<th class="text-center width1">Status</th>		
+														<th class="text-center width2">Remarks</th>																									
+														<th class="text-center">Action</th>																												
+													</tr>
+												</thead>
+												<tbody>
+	
+												</tbody>
+											</table>
+										</div>
+									</div>
+								 </div>
+								</div>
+							</div>
+					
+				</div>
+
+			</div>
+
+			<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				    <div style="position: relative; top: 50%; transform: translateY(-50%);">
+				        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+				            <span class="sr-only">Loading...</span>
+				        </div>
+				        <!-- Add the 'Please wait' text below the spinner -->
+				        <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
+				    </div>
+				</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+
+	<!-- Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+	<!-- in the code use to show the download different type microsoft -->
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">
+	document.addEventListener("DOMContentLoaded", function () {
+	    const complaintTypeDropdown = document.getElementById('dropdown1');
+	    const complaintGroupDropdown = document.getElementById('dropdown4');
+	    const complaintModeDropdown = document.getElementById('dropdown3');
+	    const complaintZoneDropdown = document.getElementById('dropdown2');
+
+	    // Load Complaint Groups
+	    fetch('/gcc/api/callcenterqaqc/getComplaintGroup') 
+	        .then(response => response.json())
+	        .then(data => {
+	            // Clear existing options
+	            complaintGroupDropdown.innerHTML = `<option value="">Select</option>`;
+
+	            // Add options from the API response
+	            data.forEach(complaintGroupName => {
+	                complaintGroupDropdown.innerHTML += `<option value="${complaintGroupName}">${complaintGroupName}</option>`;
+	            });
+	        })
+	        .catch(error => {
+	            console.error('Error fetching complaint groups:', error);
+	        });
+
+	    // Event Listener for Complaint Group Change
+	    complaintGroupDropdown.addEventListener('change', function () {
+	        const selectedGroup = complaintGroupDropdown.value;
+
+	        if (selectedGroup) {
+	            // Fetch Complaint Types based on selected group
+	            fetch(`/gcc/api/callcenterqaqc/getComplaintTypesByGroup?group=${encodeURIComponent(selectedGroup)}`)
+	                .then(response => response.json())
+	                .then(data => {
+	                    // Clear existing options
+	                    complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+
+	                    // Add options from the API response
+	                    data.forEach(complaintTypeName => {
+	                        complaintTypeDropdown.innerHTML += `<option value="${complaintTypeName}">${complaintTypeName}</option>`;
+	                    });
+	                })
+	                .catch(error => {
+	                    console.error('Error fetching complaint types:', error);
+	                });
+	        } else {
+	            // Clear complaint type dropdown if no group is selected
+	            complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+	        }
+	    });
+	    	    
+	    
+	 // Load all zones 
+	    fetch('/gcc/api/callcenterqaqc/getZones') 
+	    .then(response => response.json())
+	    .then(data => {
+	        // Clear existing options
+	        complaintZoneDropdown.innerHTML = `<option value="">Select</option>`;
+
+	        // Add options from the API response
+	        data.forEach(complaintZone => {
+	        	complaintZoneDropdown.innerHTML += `<option value="${complaintZone}">${complaintZone}</option>`;
+	        });
+	    })
+	    .catch(error => {
+	        console.error('Error fetching complaint groups:', error);
+	    });
+	 
+	    const today = new Date();
+	    const year = today.getFullYear();
+	    const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+	    const day = String(today.getDate()).padStart(2, '0');
+
+	    // Calculate the first day of the current month
+	    const startOfMonth = `${year}-${month}-01`; // yyyy-MM-dd format
+	    const todayFormatted = `${year}-${month}-${day}`; // yyyy-MM-dd format
+
+	    const startDateField = document.getElementById('startDate');
+	    const endDateField = document.getElementById('endDate');
+		
+		// Event listener for To Date
+		   endDateField.addEventListener('change', function () {
+		       if (endDateField.value) {
+		           startDateField.max = endDateField.value; // Set max value for From Date
+		       } else {
+		           startDateField.removeAttribute('max'); // Remove max if To Date is cleared
+		       }
+
+		       // Validate From Date against updated To Date
+		       if (startDateField.value && new Date(startDateField.value) > new Date(endDateField.value)) {
+		           startDateField.value = ''; // Clear invalid From Date
+		           alert("From Date cannot be after To Date.");
+		       }
+		   });
+
+		   // Event listener for From Date
+		   startDateField.addEventListener('change', function () {
+		       if (startDateField.value) {
+		           endDateField.min = startDateField.value; // Set min value for To Date
+		       } else {
+		           endDateField.removeAttribute('min'); // Remove min if From Date is cleared
+		       }
+
+		       // Validate To Date against updated From Date
+		       if (endDateField.value && new Date(endDateField.value) < new Date(startDateField.value)) {
+		           endDateField.value = ''; // Clear invalid To Date
+		           alert("To Date cannot be before From Date.");
+		       }
+		   });
+
+	    // Set the default date values in the input fields
+	    if (startDateField && endDateField) {
+	        startDateField.value = startOfMonth; // yyyy-MM-dd format required for input[type="date"]
+	        endDateField.value = todayFormatted; // yyyy-MM-dd format required for input[type="date"]
+	    } else {
+	        console.error("Start date or end date input field not found!");
+	    }
+
+	    // Call the search logic directly to load default data on page load
+	    //loadDashboardData(formatDateForAPI(startOfMonth), formatDateForAPI(todayFormatted));
+
+	    
+	});
+	
+	 $(document).ready(function() {
+
+     	var table = $('#ReportDatatable').DataTable({
+             dom: 'Bftip',
+             columnDefs: [
+                 { targets: 'no-sort', orderable: false }
+             ],
+             lengthMenu: [
+                 [50, 100, 200, 500, -1],
+                 ['50 rows', '100 rows', '200 rows', 'Show all']
+             ],
+             scrollY: '100vh',
+             fixedColumns: {
+                 left: 1,
+                 right: 1
+             },
+             buttons: [
+                 {
+                     extend: 'pageLength',
+                     className: 'btn btn-warning'
+                 },
+                 {
+                     title: 'Data export',
+                     extend: 'copyHtml5',
+                     text: 'Copy',
+                     className: 'btn btn-secondary',
+                     id: 'copyBtn'
+                 },
+                 {
+                     extend: 'excelHtml5',
+                     text: 'Excel',
+                     className: 'btn btn-secondary',
+                     id: 'excelBtn'
+                 },
+                 {
+                     extend: 'csvHtml5',
+                     text: 'CSV',
+                     className: 'btn btn-secondary',
+                     id: 'csvBtn'
+                 },
+                 {
+                     extend: 'pdfHtml5',
+                     text: 'PDF',
+                     className: 'btn btn-secondary',
+                     id: 'pdfBtn'
+                 }
+             ],
+             fixedHeader: true,
+             autoWidth: true,
+             responsive: true,
+             searching: true,
+             select: false,
+             processing: false
+         });
+     	
+     // Event listener for From Date selection
+  	   $("#startDate").on("change", function() {
+  	       const startDate = $(this).val();  // Get the selected start date
+  	       // Set the min value for To Date to be the selected From Date
+  	       $("#endDate").attr("min", startDate);
+  	   });
+
+  	   // Event listener for To Date selection
+  	   $("#endDate").on("change", function() {
+  	       const endDate = $(this).val();  // Get the selected end date
+  	       // Set the max value for From Date to be the selected To Date
+  	       $("#startDate").attr("max", endDate);
+  	   });
+  	   
+  	 	document.getElementById('resetBtn').addEventListener('click', function () {
+      	event.preventDefault();
+      	
+      	window.location.href="/gcc/callcenterqaqc/socialmediacomplaints";
+      	
+      	});
+  	 	
+  	 	document.getElementById('searchBtn').addEventListener('click', function (e) {
+  	 		
+  	 		
+  	 		let startDate = document.getElementById('startDate').value;
+     	    let endDate = document.getElementById('endDate').value;
+     	    
+     	    let status = document.getElementById('stsdropdown').value;
+     	    let group= document.getElementById('dropdown4').value;
+     	 	let type= document.getElementById('dropdown1').value;    	    
+     	    let zone= document.getElementById('dropdown2').value;
+     	    
+     	   console.log("startdate: ",startDate);
+    	   console.log("enddate: ",endDate);
+    	   console.log("status: ",status);
+    	   console.log("group: ",group);
+    	   console.log("type: ",type);
+    	  
+    	   console.log("zone: ",zone);
+    	   if (!startDate && !endDate) {
+    	        Swal.fire({
+    	            icon: 'warning',
+    	            title: 'Error',
+    	            text: 'Please Select Both From Date and To Date',
+    	            showConfirmButton: true,
+    	            timer: 3000
+    	        });
+    	        e.preventDefault(); // Prevent the default action
+    	        return; // Stop further execution
+    	    }
+    	   const params = new URLSearchParams({
+    	        startDate: startDate,
+    	        endDate: endDate,
+    	        status: status,
+    	        group: group,
+    	        type: type,    	        
+    	        zone: zone
+    	    });
+    	   $('#pageLoader').show();
+    	   $.ajax({
+               type: "GET",
+               url: `/gcc/api/callcenterqaqc/socialmedia/getsocialmediacomps?${params.toString()}`, // Append query string to URL
+               contentType: "application/json",
+               success: function (response) {
+            	    console.log("API Response:", response);
+            	    $('#pageLoader').hide();
+            	    
+            	    if (response.status === "success") {
+            	    	
+            	    	const tableHeader = `
+                            <tr>
+                                <th class="text-center no-sort">S.No</th>
+                                <th class="text-center">Reg Date</th>
+                                <th class="text-center no-sort">Complaint No</th>
+                                <th class="text-center">Complaint Type</th>
+                                <th class="text-center">View</th>
+                                <th class="text-center">Officer Name</th>
+                                <th class="text-center">Officer Mobile no</th>
+                                
+                                ${
+                                    status === "closed" 
+                                    ? `
+                                    	<th class="text-center width1">Status</th>
+                                        <th class="text-center width2">Remarks</th>
+                                        <th class="text-center">Action</th>
+                                      `
+                                    : ''
+                                }
+                            </tr>
+                        `;
+                        
+                        $('#ReportDatatable thead').html(tableHeader); // Dynamically update <thead>
+            	    	
+                        console.log("Details Array:", response.details);
+
+                        // Ensure details is an array and has at least one entry
+                        if (Array.isArray(response.details) && response.details.length > 0) {
+                            // Dynamically configure columns based on the status
+                            let columns = [
+    { 
+        data: null, 
+        render: (data, type, row, meta) => meta.row + 1, 
+        className: 'text-center' 
+    },
+    { data: 'Complaint Opened Date', defaultContent: '-', className: 'text-center' },
+    { data: 'Complaint Number', defaultContent: '-', className: 'text-center' },
+    { data: 'Complaint Type', defaultContent: '-', className: 'text-center' },
+    { 
+        data: 'Complaint Number', 
+        render: function(data) {
+            return `<button type="button" class="btn btn-info" data-complaint-number="${data}">View</button>`;
+        }, 
+        className: 'text-center' 
+    },
+    { data: 'Assign To', defaultContent: '-', className: 'text-center' },
+    { data: 'Official Contact Number', defaultContent: '-', className: 'text-center' },
+    {
+        data: '', 
+        defaultContent: '-', 
+        className: 'text-center', 
+        render: function(data, type, row) {
+            return status === "closed" 
+            ? `<td class="text-center">
+                    <select class="form-control" id="action">
+                        <option value="">Select</option>
+                        <option value="COMPLETED">COMPLETED</option>
+                        <option value="REOPENED">REOPEN</option>
+                    </select>
+                </td>`
+            	: '-';
+        }
+    },
+    {
+        data: null,
+        defaultContent: '-',
+        render: function(data, type, row) {
+            return status === "closed" 
+                ? `<input type="text" class="form-control" id="remarks" placeholder="Enter remarks">` 
+                : '-';
+        },
+        className: 'text-center'
+    },
+    { 
+        data: 'Complaint Number', 
+        render: function(data) {
+            return status === "closed" 
+                ? `<button type="button" class="btn btn-success" data-complaint-number="${data}">Submit</button>` 
+                : '-';
+        }, 
+        className: 'text-center' 
+    }
+];
+
+
+                            // Initialize the DataTable
+                            $('#ReportDatatable').DataTable({
+                                destroy: true,
+                                searching: true,
+                                autoWidth: true,
+                                responsive: true,
+                                paging: true,
+                                info: true,
+                                data: response.details,
+                                columns: columns,
+                                dom: 'Bfrtip',
+                                buttons: [
+                                    {
+                                        extend: 'pageLength',
+                                        className: 'btn btn-warning'
+                                    },
+                                    {
+                                        title: 'Data export',
+                                        extend: 'copyHtml5',
+                                        text: 'Copy',
+                                        className: 'btn btn-secondary',
+                                        id: 'copyBtn'
+                                    },
+                                    {
+                                        extend: 'excelHtml5',
+                                        text: 'Excel',
+                                        className: 'btn btn-secondary',
+                                        id: 'excelBtn'
+                                    },
+                                    {
+                                        extend: 'csvHtml5',
+                                        text: 'CSV',
+                                        className: 'btn btn-secondary',
+                                        id: 'csvBtn'
+                                    },
+                                    {
+                                        extend: 'pdfHtml5',
+                                        text: 'PDF',
+                                        className: 'btn btn-secondary',
+                                        id: 'pdfBtn'
+                                    }
+                                ],
+                                columnDefs: [
+                                    { targets: 'no-sort', orderable: false }
+                                ],
+                                lengthMenu: [
+                                    [50, 100, 200, 500, -1],
+                                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                                ],
+                                scrollY: '100vh',
+                                fixedColumns: {
+                                    left: 1,
+                                    right: 1
+                                }
+                            });
+                        }
+                    }
+            	    else if (response.status === "nodata") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	                icon: 'warning',
+        	                title: 'No Data',
+        	                text: 'No data available for the selected criteria.'
+        	            });
+        	        }
+            	    else if (response.status === "error") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	            	icon: 'error',
+            	            title: 'Error',
+            	            text: response.message
+        	            });
+        	        }
+            	    else {
+            	    	$('#pageLoader').hide();
+            	        Swal.fire({
+            	            icon: 'error',
+            	            title: 'Error',
+            	            text: response.message
+            	        });
+            	    }
+            	},
+
+               error: function (error) {
+               	$('#pageLoader').hide();
+               	Swal.fire({
+    	            icon: 'error',
+    	            title: 'Error',
+    	            text: response.message
+    	        });
+               }
+           });
+    	   
+  	 	});
+  	 	
+  	 	
+  	 	$(document).on('click', '.btn-info', function () {
+  	 	    // Retrieve the complaint number from the data attribute
+  	 	    var complaintNumber = $(this).data('complaint-number');
+  	 	    console.log("complaintNumber===="+complaintNumber);
+  	 	    // Call the viewDetails function with the complaint number
+  	 	    viewDetails(complaintNumber);
+  	 	});
+  	 	
+  	 	$(document).on('click', '.btn.btn-success', function () {
+  	 	    // Retrieve the complaint number from the data attribute
+  	 	    var complaintNumber = $(this).data('complaint-number');
+  	 	    //console.log("complaintNumberP===="+complaintNumber);
+  	 	    // Call the viewDetails function with the complaint number
+  	 	    CloseComplaints(complaintNumber);
+  	 	 
+  	 	});
+     	
+     });
+	 
+	 function viewDetails(complaintNumber) {
+	 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+	 	    $('#detailsModal').modal('show');
+
+	 	    // Fetch the main complaint details
+	 	    $.ajax({
+	 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+	 	        type: 'GET',
+	            data:{complaintNumber:complaintNumber},
+	 	        success: function (data) {
+	 	            //console.log('Complaint Data:', data);
+
+	 	            // Fetch agent response details
+	 	            $.ajax({
+	 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+	 	                type: 'GET',
+	 	                data: { complaintNumber },
+	 	                success: function (agentResponse) {
+	 	                    //console.log('Agent Response:', agentResponse);
+
+	 	                    // Use the logic for building complaint and agent details as HTML
+	 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+	 	                    // Update modal content
+	 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+	 	                },
+	 	                error: function () {
+	 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+	 	                }
+	 	            });
+	 	        },
+	 	        error: function () {
+	 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+	 	        }
+	 	    });
+	 	}
+
+	 	// Function to generate complaint and agent details HTML
+	function generateDetailsHtml(data, agentResponse) {
+	 		
+	 	// Helper function to format date to yyyy-mm-dd
+	         function formatDate(dateStr) {
+	             if (!dateStr) return 'N/A';
+	             const date = new Date(dateStr);
+	             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+	         }
+	// Format complaint messages
+	let messagesHtml = '';
+	if (data.comments && data.comments.length > 0) {
+	    data.comments.forEach((comment) => {
+	        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+	            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+	            : '<p style="color: red;">No image available for this comment.</p>';
+
+	        messagesHtml += `
+	            <div class="comment mb-4">
+	                <div class="row">
+	                    <div class="col-2 text-center">
+	                        <p class="text-muted">${comment.comment_date}</p>
+	                    </div>
+	                    <div class="col-10">
+	                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+	                        <p>${comment.message || 'No message available'}</p>
+	                        <div class="user-image">${commentImageLink}</div>
+	                    </div>
+	                </div>
+	            </div>
+	        `;
+	    });
+	} else {
+	    messagesHtml = '<p>No comments available.</p>';
+	}
+
+	// Format agent responses
+	let agentRepliedHtml = '';
+	if (agentResponse.length > 0) {
+	    agentResponse.forEach((agentItem) => {
+	        agentRepliedHtml += `
+	            <div class="comment mb-4">
+	                <div class="row">
+	                    <div class="col-2 text-center">
+	                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+	                    </div>
+	                    <div class="col-10">
+	                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+	                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+	                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+	                    </div>
+	                </div>
+	            </div>
+	        `;
+	    });
+	} else {
+	    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+	}
+
+	// Check for user images
+	const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+	const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+	    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+	    : '<p style="color: red;">UserImages: No image available.</p>';
+
+	// Combine all sections into the final HTML
+	const detailsHtml = `
+	    <div class="row">
+	        <div class="col-md-12">
+	            <h4>Complaint Person's Details:</h4>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+	                </div>
+	            </div>
+	        </div>
+	    </div>
+	    <hr>
+	    <h4>Complaint Details:</h4>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+	    <div class="col-6">
+	        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+	    </div>
+	    
+	</div>
+	    <hr>
+	    <h4>Complaint Messages:</h4>
+	    ${messagesHtml}
+	    <hr>
+	    <h4>Agent Replied Messages:</h4>
+	    ${agentRepliedHtml}
+	    <hr>
+	    ${imageLink}
+	`;
+
+	return detailsHtml;
+	}
+	 	
+	/* function CloseComplaints(complaintNumber) {
+		var userId = document.getElementById('userIdSpan').textContent;
+		console.log("userId="+userId);
+		$('.btn.btn-success').prop('disabled', true);
+		 $.ajax({
+	        url: '/gcc/api/callcenterqaqc/socialmedia/update',
+	        type: 'POST',
+	        data: {	            
+	            complaintNumber: complaintNumber,	            	        	            
+	            userId:userId
+	        },	        
+	        success: function (response) {
+	            if (response === "Success") {
+	            	//console.log("Success");
+	            	
+            	               	   
+	                Swal.fire({
+	                    icon: 'success',
+	                    title: 'Success',
+	                    text: 'Complaint updated successfully!',
+	                    allowOutsideClick: false, // Disable clicking outside the modal to close it
+	                    allowEscapeKey: false, // Disable escape key to close the modal
+	                    allowEnterKey: false, // Disable enter key to close the modal
+	                    showConfirmButton: true, // Ensure the confirm button is visible
+	                }).then((result) => {
+	                    if (result.isConfirmed) {
+	                    	console.log("ok button");
+	                    	$('.btn.btn-success').prop('disabled', false);
+                    	
+	                    	// Get the DataTable instance
+	                        const table = $('#ReportDatatable').DataTable();
+
+	                        // Find the row with the clicked button
+	                        let row = $(`.btn[data-complaint-number='${complaintNumber}']`).closest('tr');
+	                        
+	                        // Remove the row
+	                        table.row(row).remove();
+
+	                        // Reindex the "S.No" column
+	                        table.rows().every(function (index) {
+	                            const row = this.node();
+	                            $(row).find('td:first-child').text(index + 1); // Update "S.No"
+	                        });
+
+	                        // Redraw the table
+	                        table.draw(false);
+	                	    
+	                    }
+	                });
+	            } 
+	            else if (response === "error") {
+	            	$('.btn.btn-success').prop('disabled', false);
+	            	Swal.fire("Error", "Please try again later.", "error");
+	            }
+	            else {
+	            	$('.btn.btn-success').prop('disabled', false);
+	                Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+	            }
+	        },
+	        error: function (xhr, status, error) {
+	        	$('.btn.btn-success').prop('disabled', false);
+	            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+	        }
+	        
+	    });
+		
+	} */
+	
+	function CloseComplaints(complaintNumber) {
+	    const userId = document.getElementById('userIdSpan').textContent;
+	    console.log("userId=" + userId);
+	    
+	    // Find the closest table row and get the specific action and remarks
+	    const row = $(`button[data-complaint-number="${complaintNumber}"]`).closest('tr');
+	    const actionValue = row.find('select').val(); // Select dropdown within the same row
+	    const remarksValue = row.find('input').val(); // Input field within the same row
+
+	   
+		console.log("complaintNumber:",complaintNumber)	    
+		console.log("Action:", actionValue);
+	    console.log("Remarks:", remarksValue);
+
+	 // Check if action is empty
+	    if (actionValue === "") {
+	        Swal.fire({
+	            icon: 'warning',
+	            title: 'Action Required',
+	            text: 'Please select an action.'
+	           
+	        });
+	        return; // Stop execution if no action is selected
+	    }
+	 
+	    if (actionValue === "REOPENED" && remarksValue.trim() === "") {
+	        Swal.fire({
+	            icon: 'warning',
+	            title: 'Remarks Required',
+	            text: 'Please enter remarks.'
+	            
+	        });
+	        return; // Stop execution if remarks are empty
+	    }
+	    
+	    Swal.fire({
+	        title: 'Are you sure to update?',
+	        text: 'This action will update the complaint.',
+	        icon: 'warning',	
+	        allowOutsideClick: false,
+            allowEscapeKey: false,
+            allowEnterKey: false,
+            confirmButtonColor: 'blue',
+		    cancelButtonColor: 'red',
+	        showCancelButton: true, // Enable cancel button
+	        confirmButtonText: 'Yes', // Text for the confirmation button
+	        cancelButtonText: 'No',  // Text for the cancel button
+	        reverseButtons: false // Optional: makes the "No" button appear first
+	    }).then((result) => {
+	        if (result.isConfirmed) {
+	            // User clicked "Yes"
+	            $('.btn.btn-success').prop('disabled', true);
+	            $.ajax({
+	                url: '/gcc/api/callcenterqaqc/socialmedia/update',
+	                type: 'POST',
+	                data: {
+	                    complaintNumber: complaintNumber,
+	                    userId: userId,
+	                    action: actionValue,      // Add selected action to the request data
+	                    remarks: remarksValue     // Add remarks to the request data
+	                },
+	                success: function (response) {
+	                    if (response === "Success") {
+	                        Swal.fire({
+	                            icon: 'success',
+	                            title: 'Success',
+	                            text: 'Complaint updated successfully!',
+	                            allowOutsideClick: false,
+	                            allowEscapeKey: false,
+	                            allowEnterKey: false,
+	                            showConfirmButton: true,
+	                        }).then(() => {
+	                            $('.btn.btn-success').prop('disabled', false);
+
+	                            // Get the DataTable instance
+	                            const table = $('#ReportDatatable').DataTable();
+
+	                            // Find the row with the clicked button
+	                            let row = $(`.btn[data-complaint-number='${complaintNumber}']`).closest('tr');
+	                            
+	                            // Remove the row
+	                            table.row(row).remove();
+
+	                            // Reindex the "S.No" column
+	                            table.rows().every(function (index) {
+	                                const row = this.node();
+	                                $(row).find('td:first-child').text(index + 1);
+	                            });
+
+	                            // Redraw the table
+	                            table.draw(false);
+	                        });
+	                    } else if (response === "error") {
+	                        $('.btn.btn-success').prop('disabled', false);
+	                        Swal.fire("Error", "Please try again later.", "error");
+	                    }else if (response === "erpname") {
+	                        $('.btn.btn-success').prop('disabled', false);
+	                        Swal.fire("Error", "Issue in ERP_Username", "error");
+	                    }
+	                    else if (response === "save") {
+	                        $('.btn.btn-success').prop('disabled', false);
+	                        Swal.fire("Error", "In Erp updated, but issue in saving", "error");
+	                    }
+	                    else {
+	                        $('.btn.btn-success').prop('disabled', false);
+	                        Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+	                    }
+	                },
+	                error: function (xhr, status, error) {
+	                    $('.btn.btn-success').prop('disabled', false);
+	                    Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+	                }
+	            });
+	        } else if (result.isDismissed) {
+	            // User clicked "No" or dismissed the dialog
+	            console.log("Update action cancelled by the user.");
+	        }
+	    });
+	}
+
+	</script>
+	
+	
+	<!-- 
+	
+	 {
+                                        data: '', 
+                                        defaultContent: '-', 
+                                        className: 'text-center', 
+                                        render: function(data, type, row) {
+                                            return `
+                                                <td class="text-center">
+                                                    <select class="form-control" id="action">
+                                                        <option value="">Select</option>
+                                                        <option value="COMPLETED">COMPLETED</option>
+                                                        <option value="REOPENED">REOPEN</option>
+                                                    </select>
+                                                </td>`;
+                                        }
+                                    },
+	 -->
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/callcenterqaqc/socialmediacompletedlist.html b/src/main/resources/templates/modules/callcenterqaqc/socialmediacompletedlist.html
new file mode 100644
index 0000000..87586ee
--- /dev/null
+++ b/src/main/resources/templates/modules/callcenterqaqc/socialmediacompletedlist.html
@@ -0,0 +1,735 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+</style>
+<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fa fa-list-alt bg-blue"></i>
+									<div class="d-inline">
+										<h5>SocialMedia Complaints</h5>
+										<span>View Social Media Completed Complaints</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 Social Media</li>
+										<li class="breadcrumb-item active" aria-current="page">Completed List</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+					
+					<div class="row mt-4">
+						<div class="col-12">
+							<div class="card">
+								<div class="card-header">
+									<span style="font-size: medium;font-weight: bold;">Select Filters</span>
+								</div>
+								<div class="card-body">
+									<div class="row">
+										<div class="col-sm-3 mb-2">
+											<label for="startDate" style="font-size: medium;">From Date:</label>
+						                    <input type="date" id="startDate" class="form-control">
+										</div>
+										<div class="col-sm-3 mb-2">
+											<label for="endDate" style="font-size: medium;">To Date:</label>
+						                    <input type="date" id="endDate" class="form-control">
+										</div>
+										
+										<div class="col-sm-3 mb-2">
+											<label for="status" style="font-size: medium;">Status:</label>
+						                    <select id="status" class="form-control">
+						                    <option value="ALL">Select</option>
+						                    <option value="COMPLETED">Completed</option>
+						                    <option value="REOPENED">Reopened</option>
+											</select>
+										</div>
+
+										<div class="col-sm-3 mb-2">
+											<label for="dropdown2" style="font-size: medium;">Zone:</label>
+						                    <select id="dropdown2" class="form-control">
+						                    <option value="">Select</option>
+						                    
+											</select>
+										</div>
+										
+										</div>
+									
+									
+									<div class="row mt-4">
+										<div class="col-12 d-flex justify-content-center">
+											<button type="submit" id="searchBtn"
+												class="btn btn-primary mx-2">Search</button>
+
+											<button class="btn btn-danger mx-2" id="resetBtn"
+												name="reset" type="reset">Reset</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+			
+					
+					<div class="row mt-4">
+									<div class="col-md-12">
+										<div class="card">
+										<div class="card-header">
+											<h3 style="font-weight: bold;font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span>
+    <span th:text="${agent_name}" style="font-weight: bold; font-size: large;"></span>'s Completed List</h3>
+										</div>
+										<div class="card-body">
+											<div class="table-responsive">
+
+												<table id="ReportDatatable"
+													class="table table-striped table-bordered table-hover dataTable"
+													role="grid">
+													<thead class="thead-dark">
+														<tr role="row">
+
+															<th class="text-center no-sort">S.No</th>																														
+															<th class="text-center">Reg Date</th>
+															<th class="text-center no-sort">Complaint No</th>
+															<th class="text-center no-sort">zone</th>
+															<th class="text-center">ComplaintType</th>																												
+															<th class="text-center no-sort">Public Name</th>
+															<th class="text-center">Public Mobile no</th>															
+															<th class="text-center">Officer Name</th>																													
+															<th class="text-center">Status</th>		
+															<th class="text-center">View</th>																										
+														</tr>
+													</thead>
+													<tbody>
+
+													</tbody>
+												</table>
+											</div>
+										</div>
+									 </div>
+									</div>
+								</div>
+					
+				</div>
+
+			</div>
+
+			<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				    <div style="position: relative; top: 50%; transform: translateY(-50%);">
+				        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+				            <span class="sr-only">Loading...</span>
+				        </div>
+				        <!-- Add the 'Please wait' text below the spinner -->
+				        <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
+				    </div>
+				</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+
+	<!-- Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+	<!-- in the code use to show the download different type microsoft -->
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">
+	document.addEventListener("DOMContentLoaded", function () {
+	    
+	    const complaintZoneDropdown = document.getElementById('dropdown2');
+    
+	    
+	 // Load all zones 
+	    fetch('/gcc/api/callcenterqaqc/getZones') 
+	    .then(response => response.json())
+	    .then(data => {
+	        // Clear existing options
+	        complaintZoneDropdown.innerHTML = `<option value="">Select</option>`;
+
+	        // Add options from the API response
+	        data.forEach(complaintZone => {
+	        	complaintZoneDropdown.innerHTML += `<option value="${complaintZone}">${complaintZone}</option>`;
+	        });
+	    })
+	    .catch(error => {
+	        console.error('Error fetching complaint groups:', error);
+	    });
+	 
+	    
+
+	    const startDateField = document.getElementById('startDate');
+	    const endDateField = document.getElementById('endDate');
+		
+		// Event listener for To Date
+		   endDateField.addEventListener('change', function () {
+		       if (endDateField.value) {
+		           startDateField.max = endDateField.value; // Set max value for From Date
+		       } else {
+		           startDateField.removeAttribute('max'); // Remove max if To Date is cleared
+		       }
+
+		       // Validate From Date against updated To Date
+		       if (startDateField.value && new Date(startDateField.value) > new Date(endDateField.value)) {
+		           startDateField.value = ''; // Clear invalid From Date
+		           alert("From Date cannot be after To Date.");
+		       }
+		   });
+
+		   // Event listener for From Date
+		   startDateField.addEventListener('change', function () {
+		       if (startDateField.value) {
+		           endDateField.min = startDateField.value; // Set min value for To Date
+		       } else {
+		           endDateField.removeAttribute('min'); // Remove min if From Date is cleared
+		       }
+
+		       // Validate To Date against updated From Date
+		       if (endDateField.value && new Date(endDateField.value) < new Date(startDateField.value)) {
+		           endDateField.value = ''; // Clear invalid To Date
+		           alert("To Date cannot be before From Date.");
+		       }
+		   });
+
+
+	    
+	});
+
+	$(document).ready(function() {
+	
+		var table = $('#ReportDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                { targets: 'no-sort', orderable: false }
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', 'Show all']
+            ],
+            scrollY: '100vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary',
+                    id: 'copyBtn'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary',
+                    id: 'excelBtn'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary',
+                    id: 'csvBtn'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary',
+                    id: 'pdfBtn'
+                }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false
+        });
+		
+		document.getElementById('resetBtn').addEventListener('click', function () {
+	      	event.preventDefault();
+	      	
+	      	window.location.href="/gcc/callcenterqaqc/smfinishedcomplaints";
+	      	
+	      	});
+		
+		document.getElementById('searchBtn').addEventListener('click', function (e) {
+  	 		
+  	 		
+  	 		let startDate = document.getElementById('startDate').value;
+     	    let endDate = document.getElementById('endDate').value;
+    	    
+     	    let zone= document.getElementById('dropdown2').value;
+     	   let status= document.getElementById('status').value;
+     	   
+     	   console.log("startdate: ",startDate);
+    	   console.log("enddate: ",endDate);
+    	   console.log("status: ",status);
+    	   console.log("zone: ",zone);
+    	   
+    	   if (!startDate && !endDate) {
+    	        Swal.fire({
+    	            icon: 'warning',
+    	            title: 'Error',
+    	            text: 'Please Select Both From Date and To Date',
+    	            showConfirmButton: true,
+    	            timer: 3000
+    	        });
+    	        e.preventDefault(); // Prevent the default action
+    	        return; // Stop further execution
+    	    }
+    	   const params = new URLSearchParams({
+    	        startDate: startDate,
+    	        endDate: endDate,  
+    	        status:status,
+    	        zone: zone
+    	    });
+    	   $('#pageLoader').show();
+    	   $.ajax({
+               type: "GET",
+               url: `/gcc/api/callcenterqaqc/socialmedia/socialmediacompletedlist?${params.toString()}`, // Append query string to URL
+               contentType: "application/json",
+               success: function (response) {
+            	    console.log("API Response:", response);
+            	    $('#pageLoader').hide();
+            	    if (response.status === "success") {
+            	        console.log("Details Array:", response.details);
+            	        // Ensure details is an array and has at least one entry
+            	        if (Array.isArray(response.details) && response.details.length > 0) {
+            	            let table = $('#ReportDatatable').DataTable({
+            	                destroy: true,
+            	                searching: true,
+            	                autoWidth: true,
+            	                responsive: true,
+            	                paging: true,
+            	                info: true,
+            	                data: response.details,           	                
+            	                columns: [
+            	                    { 
+            	                        data: null, 
+            	                        render: (data, type, row, meta) => meta.row + 1, 
+            	                        className: 'text-center' 
+            	                    },
+            	                   					
+            	                    { data: 'complaint_date', defaultContent: '-', className: 'text-center' },
+                                    { data: 'complaint_number', defaultContent: '-', className: 'text-center' },
+                                    { data: 'zone', defaultContent: '-', className: 'text-center' },
+                                    { data: 'complaint_type', defaultContent: '-', className: 'text-center' },                                   
+                                    { data: 'complaint_person_name', defaultContent: '-', className: 'text-center' },
+                                    { data: 'complaint_mobilenumber', defaultContent: '-', className: 'text-center' },
+                                    { data: 'official_name', defaultContent: '-', className: 'text-center' },
+                                    { data: 'call_status', defaultContent: '-', className: 'text-center' },
+                                    { 
+                                        data: 'complaint_number', 
+                                        render: function(data, type, row) {
+                                            return `
+                                                <td class="text-center">
+                                                    <button type="button" class="btn btn-info" data-complaint-number="${data}">
+                                                        View
+                                                    </button>
+                                                </td>`;
+                                        }, 
+                                        className: 'text-center' 
+                                    }
+            	                ],
+            	                dom: 'Bfrtip',
+            	                buttons: [
+   	      		                  {
+   	      		                      extend: 'pageLength',
+   	      		                      className: 'btn btn-warning'
+   	      		                  },
+   	      		                  {
+   	      		                      title: 'Data export',
+   	      		                      extend: 'copyHtml5',
+   	      		                      text: 'Copy',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'copyBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'excelHtml5',
+   	      		                      text: 'Excel',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'excelBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'csvHtml5',
+   	      		                      text: 'CSV',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'csvBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'pdfHtml5',
+   	      		                      text: 'PDF',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'pdfBtn'
+   	      		                  }
+   	      		              ],
+   	      		             columnDefs: [
+   	      		                { targets: 'no-sort', orderable: false }
+   	      		            ],
+   	      		            lengthMenu: [
+   	      		                [50, 100, 200, 500, -1],
+   	      		                ['50 rows', '100 rows', '200 rows', 'Show all']
+   	      		            ],
+   	      		            scrollY: '100vh',
+   	      		            fixedColumns: {
+   	      		                left: 1,
+   	      		                right: 1
+   	      		            }
+   	      		            });
+            	        }
+            	        
+            	    }
+            	    else if (response.status === "nodata") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	                icon: 'warning',
+        	                title: 'No Data',
+        	                text: 'No data available for the selected criteria.'
+        	            });
+        	        }
+            	    else if (response.status === "error") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	            	icon: 'error',
+            	            title: 'Error',
+            	            text: response.message
+        	            });
+        	        }
+            	    else {
+            	    	$('#pageLoader').hide();
+            	        Swal.fire({
+            	            icon: 'error',
+            	            title: 'Error',
+            	            text: response.message
+            	        });
+            	    }
+            	},
+
+               error: function (error) {
+               	$('#pageLoader').hide();
+               	Swal.fire({
+    	            icon: 'error',
+    	            title: 'Error',
+    	            text: response.message
+    	        });
+               }
+           });
+    	   
+  	 	});
+		
+		$(document).on('click', '.btn-info', function () {
+  	 	    // Retrieve the complaint number from the data attribute
+  	 	    var complaintNumber = $(this).data('complaint-number');
+  	 	    console.log("complaintNumber===="+complaintNumber);
+  	 	    // Call the viewDetails function with the complaint number
+  	 	    viewDetails(complaintNumber);
+  	 	});
+	
+	});
+	function viewDetails(complaintNumber) {
+ 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+ 	    $('#detailsModal').modal('show');
+
+ 	    // Fetch the main complaint details
+ 	    $.ajax({
+ 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+ 	        type: 'GET',
+            data:{complaintNumber:complaintNumber},
+ 	        success: function (data) {
+ 	            //console.log('Complaint Data:', data);
+
+ 	            // Fetch agent response details
+ 	            $.ajax({
+ 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+ 	                type: 'GET',
+ 	                data: { complaintNumber },
+ 	                success: function (agentResponse) {
+ 	                    //console.log('Agent Response:', agentResponse);
+
+ 	                    // Use the logic for building complaint and agent details as HTML
+ 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+ 	                    // Update modal content
+ 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+ 	                },
+ 	                error: function () {
+ 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+ 	                }
+ 	            });
+ 	        },
+ 	        error: function () {
+ 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+ 	        }
+ 	    });
+ 	}
+
+ 	// Function to generate complaint and agent details HTML
+function generateDetailsHtml(data, agentResponse) {
+ 		
+ 	// Helper function to format date to yyyy-mm-dd
+         function formatDate(dateStr) {
+             if (!dateStr) return 'N/A';
+             const date = new Date(dateStr);
+             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+         }
+// Format complaint messages
+let messagesHtml = '';
+if (data.comments && data.comments.length > 0) {
+    data.comments.forEach((comment) => {
+        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+            : '<p style="color: red;">No image available for this comment.</p>';
+
+        messagesHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted">${comment.comment_date}</p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                        <p>${comment.message || 'No message available'}</p>
+                        <div class="user-image">${commentImageLink}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    messagesHtml = '<p>No comments available.</p>';
+}
+
+// Format agent responses
+let agentRepliedHtml = '';
+if (agentResponse.length > 0) {
+    agentResponse.forEach((agentItem) => {
+        agentRepliedHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+}
+
+// Check for user images
+const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+    : '<p style="color: red;">UserImages: No image available.</p>';
+
+// Combine all sections into the final HTML
+const detailsHtml = `
+    <div class="row">
+        <div class="col-md-12">
+            <h4>Complaint Person's Details:</h4>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <h4>Complaint Details:</h4>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+    <div class="col-6">
+        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+    </div>
+    
+</div>
+    <hr>
+    <h4>Complaint Messages:</h4>
+    ${messagesHtml}
+    <hr>
+    <h4>Agent Replied Messages:</h4>
+    ${agentRepliedHtml}
+    <hr>
+    ${imageLink}
+`;
+
+return detailsHtml;
+}
+	</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/cdwaste/approval.html b/src/main/resources/templates/modules/cdwaste/approval.html
new file mode 100644
index 0000000..1dd91fb
--- /dev/null
+++ b/src/main/resources/templates/modules/cdwaste/approval.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <div class="main-content">
+                <div class="container-fluid">
+                    <div class="page-header">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fas fa-th-large bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>C & D Waste Collectors </h5>
+                                        <span>Approval</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <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">C & D Waste Collectors</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Approval</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr>
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card">
+                             <div class="card-header">
+				                				                
+				          
+				                
+				            </div>
+                                <div class="card-block">
+                                    <div>
+                                        <table id="worksDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+                                           <thead class="thead-dark">
+        <tr role="row">
+            <th>S.No</th> <!-- Auto-increment index -->
+            <th>Name</th>
+            <th>Mobile No</th>
+            <th>Address</th>
+            <th>Vehicle Number</th>
+            <th>Vehicle Type</th>
+            <th>Accepted Date</th>
+            <th>Accepted By</th>
+            <th>Register ID</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr th:each="approval, i : ${approvalDetails}">
+            <td th:text="${i.count}">0</td> <!-- Index counter -->
+            <td th:text="${approval.name}">Name</td>
+            <td th:text="${approval.mobile_no}">Mobile No</td>
+            <td th:text="${approval.address}">Address</td>
+            <td th:text="${approval.vehicle_num}">Vehicle Number</td>
+            <td th:text="${approval.vehicletype}">Vehicle Type</td>
+            <td th:text="${approval.accepteddate}">Accepted Date</td>
+            <td th:text="${approval.acceptedby}">Accepted By</td>
+            <td th:text="${approval.register_id}">Register ID</td>
+        </tr>
+    </tbody>
+    <tfoot class="thead-dark">
+        <tr>
+            <th>S.No</th>
+            <th>Name</th>
+            <th>Mobile No</th>
+            <th>Address</th>
+            <th>Vehicle Number</th>
+            <th>Vehicle Type</th>
+            <th>Accepted Date</th>
+            <th>Accepted By</th>
+            <th>Register ID</th>
+        </tr>
+    </tfoot>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+        </div>
+    </div>
+
+   
+
+    <!-- Include jQuery and Bootstrap JavaScript -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+    <script type="text/javascript">
+    $(document).ready(function() {
+
+    	var table = $('#worksDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                { targets: 'no-sort', orderable: false }
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', 'Show all']
+            ],
+            scrollY: '50vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary',
+                    id: 'copyBtn'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary',
+                    id: 'excelBtn'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary',
+                    id: 'csvBtn'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary',
+                    id: 'pdfBtn'
+                }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false
+        });
+       
+    });
+    	   
+
+
+
+    
+
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/cdwaste/pending.html b/src/main/resources/templates/modules/cdwaste/pending.html
new file mode 100644
index 0000000..74c7203
--- /dev/null
+++ b/src/main/resources/templates/modules/cdwaste/pending.html
@@ -0,0 +1,446 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <div class="main-content">
+                <div class="container-fluid">
+                    <div class="page-header">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fas fa-th-large bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>C & D Waste Collectors </h5>
+                                        <span>Pending</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <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">C & D Waste Collectors</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Pending</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr>
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card">
+                             <div class="card-header">
+				                				                
+				          
+				                
+				            </div>
+				            
+				            
+				            
+							<div class="card-block">
+							    <!-- Show the table structure -->
+							    <table id="worksDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+							        <thead class="thead-dark">
+							            <tr role="row">
+							                <th>S.NO</th> <!-- Auto-incrementing index -->
+							                <th>Name</th>
+							                <th>Mobile No</th>
+							                <th>Address</th>
+							                <th>Actions</th>
+							            </tr>
+							        </thead>
+							        <tbody>
+							            <!-- Check if userDetails is empty or null -->
+							           
+							            <!-- Iterate over userDetails to display pending registrations -->
+							            <tr th:each="pendinglist, status : ${userDetails}">
+							                <td th:text="${status.index + 1}">1</td> <!-- Auto-incrementing index -->
+							                <td th:text="${pendinglist['name']}">Name</td>
+							                <td th:text="${pendinglist['mobile_no']}">Mobile No</td>
+							                <td th:text="${pendinglist['address']}">Address</td>
+							                <td class="text-center">
+							                    <button class="btn btn-info" 
+							                            th:attr="onclick='showModal(' + ${pendinglist['register_id']} + ')'" 
+							                            th:text="'View Details'">
+							                    </button>
+							                </td>
+							            </tr>
+							        </tbody>
+							        <tfoot class="thead-dark">
+							            <tr>
+							                <th>S.NO</th>
+							                <th>Name</th>
+							                <th>Mobile No</th>
+							                <th>Address</th>
+							                <th>Actions</th>
+							            </tr>
+							        </tfoot>
+							    </table>
+							</div>
+
+
+
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Modal -->
+					<!-- Modal -->
+				<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true">
+						    <div class="modal-dialog modal-lg" role="document">
+						        <div class="modal-content">
+						            <div class="modal-header">
+						                <h5 class="modal-title" id="detailModalLabel">Register id: <span id="modal_register_id"></span></h5>
+						                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						                    <span aria-hidden="true">&times;</span>
+						                </button>
+						            </div>
+						            <div class="modal-body">
+						                <div id="cduserinfoHTML">
+						                </div>
+						                
+						                <div class="row">
+						                    <div class="col-md-12">
+						                        <p><strong>Adhaar Photo/Document:</strong></p>
+						                        <div id="modal_adhaar_container"></div>
+						                    </div>
+						                    <div class="col-md-12">
+						                        <p><strong>User Photo:</strong></p>
+						                        <div id="modal_user_photo_container"></div>
+						                    </div>
+						                    <div class="col-md-12">
+						                        <p><strong>RC Book Document:</strong></p>
+						                        <div id="modal_vehicle_doc_container"></div>
+						                    </div>
+						                    <div class="col-md-12">
+						                        <p><strong>Lease Vehicle Document:</strong></p>
+						                        <div id="modal_leasevehicle_doc_container"></div>
+						                    </div>
+						                </div>
+						
+						                <!-- Rejection Section -->
+						                <div id="rejectionSection" style="display: none; margin-top: 20px;">
+						                    <p><strong>Reason for Rejection <span class="text-danger">*</span></strong></p>
+						                    <textarea id="rejectionReason" rows="4" class="form-control"></textarea>
+						                    <button type="button" class="btn btn-danger mt-2" onclick="confirmRejection()">Confirm</button>
+						                </div>
+						            </div>
+						            <div class="modal-footer">
+						                <button type="button" class="btn btn-success" onclick="acceptAction()">Accept</button>
+						                <button type="button" class="btn btn-warning" onclick="showRejectionSection()">Reject</button>
+						                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+						            </div>
+						        </div>
+						    </div>
+						</div>
+
+
+			                
+			                
+			                
+            </div>
+
+            <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+        </div>
+    </div>
+
+   
+
+    <!-- Include jQuery and Bootstrap JavaScript -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+    <script type="text/javascript">
+    $(document).ready(function() {
+        // Initialize the DataTable
+        var table = $('#worksDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                { targets: 'no-sort', orderable: false } // Disable sorting for certain columns
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', 'Show all']
+            ],
+            scrollY: '50vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary',
+                    id: 'copyBtn'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary',
+                    id: 'excelBtn'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary',
+                    id: 'csvBtn'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary',
+                    id: 'pdfBtn'
+                }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false,
+            language: {
+                emptyTable: "No pending registrations available." // Custom message for empty tables
+            }
+        });
+        
+    });
+
+    
+    function showModal(registerId) {
+        $.ajax({
+            url: '/gcc/api/registration/pendingbyid?registerId=' + registerId,
+            method: 'GET',
+            dataType: 'json',
+            success: function(data) {
+                console.log(data);
+                // Check if data is not empty
+                if (data.length > 0) {
+                    // Access the first item in the array
+                    const userData = data[0]; // Get the first object from the array
+	                
+                    let userinfo = ``;
+                    
+                    userinfo = `<p><strong>Name:</strong> <span id="modal_name">${userData.name}</span></p>
+				                <p><strong>Mobile No:</strong> <span id="modal_mobile_no">${userData.mobile_no}</span></p>
+				                <p><strong>Address:</strong> <span id="modal_address">${userData.address}</span></p>
+				                <p><strong>Vehicle No:</strong> <span id="modal_vehicle_num">${userData.vehicle_num}</span></p> <!-- Added Vehicle No -->
+				                <p><strong>Vehicle Type:</strong> <span id="modal_vehicletype">${userData.vehicletype}</span></p>
+				                <p ><strong>Ref Num:</strong> <span id="modal_ref_num">${userData.reference_num}</span></p>`;
+				      
+				                $("#cduserinfoHTML").html(userinfo);
+				                
+				                $("#modal_register_id").html(userData.register_id);
+				    
+				    console.log(userData.adhaarurl);
+				    
+                    // Display the files (Adhaar, User Photo, Vehicle Document)
+                    if (userData.adhaarurl!=null) {
+                    	displayFile('modal_adhaar_container', userData.adhaarurl);
+                    }
+                    if (userData.user_photourl) {
+                    	displayFile('modal_user_photo_container', userData.user_photourl);
+                    }
+                    //if (userData.rcbookurl) {
+                    	displayFile('modal_vehicle_doc_container', userData.rcbookurl);
+                    //}
+                    if (userData.leasedocurl) {
+                    	displayFile('modal_leasevehicle_doc_container', userData.leasedocurl);
+                    }
+                    
+                    // Hide rejection section initially
+                    document.getElementById('rejectionSection').style.display = 'none';
+                    document.getElementById('rejectionReason').value = ''; // Clear previous input
+
+                    // Show the modal
+                    $('#detailModal').modal({
+                        backdrop: 'static',
+                        keyboard: false
+                    });
+                } else {
+                    // Handle case where no data is returned
+                    alert('No data found for this registration ID.');
+                }
+            },
+            error: function(err) {
+                console.error(err);
+                alert('Failed to fetch data');
+            }
+        });
+    }
+
+ // Function to handle Accept action
+    function acceptAction() {
+        const registerId = document.getElementById('modal_register_id').innerText; // Get register_id from the modal
+        const rowElement = document.querySelector(`tr[data-register-id="${registerId}"]`); // Find the row by register_id
+        const mobileNo = document.getElementById('modal_mobile_no').innerText;
+        
+        const refNum = document.getElementById('modal_ref_num').innerText;
+
+        $.ajax({
+            url: '/gcc/api/registration/acceptbyid',
+            method: 'POST',
+            data: {
+                registerId: registerId
+            },
+            success: function(response) {
+                console.log(response);
+
+                // URL for accepted registration message
+                const acceptMessageUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${mobileNo}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Welcome+to+Greater+Chennai+Corporation%2C+%0A%0AYour+Registered+ID+is+%2A${registerId}%2A+.%0AYour+C%26D+waste+registration+has+been+approved+successfully.+%0A%0AFor+downloading+your+ID+card%2C+kindly+click+on+the+button+below+%F0%9F%91%87&media_url=https%3A%2F%2Fres.cloudinary.com%2Fdpub5muar%2Fimage%2Fupload%2Fv1729597847%2Fq2ihjs99puhhwkjzajyo.png&isTemplate=true&buttonUrlParam=userdetail%3Fregister_id%3D${refNum}`; 
+                //https://gccservices.chennaicorporation.gov.in/volunteer/wastecollectors/https://gccservices.chennaicorporation.gov.in/volunteer/wastecollectors/userdetail?register_id=5
+                	
+                // Call the WhatsApp function to send acceptance message
+                sendWhatsAppMessage(mobileNo, acceptMessageUrl);
+                
+                Swal.fire({
+                    title: 'Success!',
+                    text: 'Registration Accepted Successfully',
+                    icon: 'success',
+                    confirmButtonText: 'OK'
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        $('#detailModal').modal('hide'); // Close the modal after success
+                        location.reload(); // Reload page (optional)
+                       
+                    }
+                });
+            },
+            error: function(error) {
+                console.error(error);
+                Swal.fire({
+                    title: 'Error!',
+                    text: 'Failed to Accept Registration',
+                    icon: 'error',
+                    confirmButtonText: 'OK'
+                });
+            }
+        });
+    }
+
+    
+    
+    function showRejectionSection() {
+        // Show the rejection section when Reject button is clicked
+        document.getElementById('rejectionSection').style.display = 'block';
+    }
+
+    function confirmRejection() {
+        const registerId = document.getElementById('modal_register_id').innerText; // Get register_id from the modal
+        const rejectionReason = document.getElementById('rejectionReason').value; // Get the rejection reason
+        const mobileNo = document.getElementById('modal_mobile_no').innerText; // Get mobile number from the modal
+
+        const refNum = document.getElementById('modal_ref_num').innerText;
+
+        if (!rejectionReason) {
+            Swal.fire({
+                title: 'Info',
+                text: 'Please provide a reason for rejection.',
+                icon: 'info',
+                confirmButtonText: 'OK'
+            });
+            return; // Stop if no reason is provided
+        }
+
+        $.ajax({
+            url: '/gcc/api/registration/rejectbyid', // API endpoint for rejection
+            method: 'POST',
+            data: {
+                registerId: registerId, // Pass registerId as request param
+                reason: rejectionReason // Pass the rejection reason
+            },
+            success: function(response) {
+            	 // URL for rejected registration
+                const rejectMessageUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${mobileNo}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Welcome+to+Greater+Chennai+Corporation%2C%0A%0AYour+Registered+ID+is+%2A${registerId}%2A+.%0AYour+C%26D+waste+registration+has+been+Rejected.+%0A%0AKindly+click+on+the+button+below+for+viewing+the+status%F0%9F%91%87&media_url=https%3A%2F%2Fres.cloudinary.com%2Fdpub5muar%2Fimage%2Fupload%2Fv1729598221%2Fci7ybspyanctl9lackby.jpg&isTemplate=true&buttonUrlParam=userdetail%3Fregister_id%3D${refNum}`;
+                
+                //const acceptMessageUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${mobileNo}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Welcome+to+Greater+Chennai+Corporation%2C+%0A%0AYour+Registered+ID+is+%2A${registerId}%2A+.%0AYour+C%26D+waste+registration+has+been+approved+successfully.+%0A%0AFor+downloading+your+ID+card%2C+kindly+click+on+the+button+below+%F0%9F%91%87&media_url=https%3A%2F%2Fgccservices.in%2Fgcc%2Ffiles%2Fc_d%2F1_approved.jpg&isTemplate=true&buttonUrlParam=userdetail%3Fregister_id%3D${registerId}`;
+
+                sendWhatsAppMessage(mobileNo, rejectMessageUrl); // Call the WhatsApp function to send rejection message
+                Swal.fire({
+                    title: 'Success!',
+                    text: 'Registration Rejected!!',
+                    icon: 'success',
+                    confirmButtonText: 'OK'
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        $('#detailModal').modal('hide'); // Close the modal after success
+                        location.reload(); // Reload page (optional)
+                       
+                    }
+                });
+            },
+            error: function(error) {
+                console.error(error);
+                Swal.fire({
+                    title: 'Error!',
+                    text: 'Failed to Reject Registration',
+                    icon: 'error',
+                    confirmButtonText: 'OK'
+                });
+            }
+        });
+    }
+
+    function displayFile(containerId, filePath) {
+        const container = document.getElementById(containerId);
+        
+        // Check if filePath is defined and not null
+        if (filePath) {
+            const fileExtension = filePath.split('.').pop().toLowerCase();
+            const fullPath = filePath; // Construct full URL
+            console.log('Full Path:', fullPath); 
+
+            if (fileExtension === 'pdf') {
+                container.innerHTML = `<embed src="${fullPath}" type="application/pdf" width="100%" height="500px" />`;
+            } else {
+                container.innerHTML = `<img src="${fullPath}" alt="Document" class="img-fluid img-thumbnail" />`;
+            }
+        } else {
+            // If filePath is undefined or null, display a default message
+            container.innerHTML = 'No document available';
+        }
+    }
+    
+    
+    function sendWhatsAppMessage(cellnumber, msgUrl) {
+        // Send the WhatsApp message
+        $.ajax({
+            url: '/gcc/api/cd/whatsapp/send-whatsapp-message', // Replace with your service path
+            type: 'POST',
+            data: { msgUrl: msgUrl },
+           
+            error: function(xhr, status, error) {
+                console.error('Error sending WhatsApp message:', error);
+                Swal.fire({
+                    title: 'Error!',
+                    text: 'Message Not sent!',
+                    icon: 'error',
+                    timer: 2000,
+                    showConfirmButton: false
+                });
+            }
+        });
+    }
+
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/cdwaste/receipt.html b/src/main/resources/templates/modules/cdwaste/receipt.html
new file mode 100644
index 0000000..4a671c3
--- /dev/null
+++ b/src/main/resources/templates/modules/cdwaste/receipt.html
@@ -0,0 +1,139 @@
+<!-- Pre-loader end -->
+<div id="pcoded" class="pcoded">
+	<div class="pcoded-container">
+		<!-- Menu header -->
+		<div class="nav-display">
+			<nav th:replace="~{fragments/nav-user :: nav}"></nav>
+		</div>
+		<!-- Main content -->
+		<div class="container-fluid" style="margin-top: 4%;padding: 15px;">
+			<div class="row">
+				<div class="col-md-12 col-sm-12">
+					<div class="card " style="width:auto">
+
+						<div class="card-body">
+							<table>
+
+								<tr style="height:70px;">
+									<td colspan="4" style="text-align: center;">
+										<span><img src="\assets\media\images\logo.png"
+												style="width:45px;height:45px;text-align: left;"></span>
+										<span>
+											<h6 style="text-align: center;font-weight: bold;">Greater Chennai Corporation</h6>
+											<h6 style="text-align: center;font-weight: bold;">C & D Waste Collectors</h6>
+											<h6 style="text-align: center;font-weight: bold;">Acknowledgement Form</h6>
+										</span>
+									</td>
+								</tr>
+								<tr>
+									<th>User Name:</th>
+									<th>Mobile No:</th>
+									<th>User Type:</th>
+									<th>Email:</th>
+								</tr>
+								<tr>
+									<td id="uName" th:text="${bookingsDetails.users.name}"></td>
+									<td id="mobile" th:text="${bookingsDetails.users.mobileNo}"></td>
+									<td id="uType" th:text="${bookingsDetails.users.usertype}"></td>
+									<td id="eMail" th:text="${bookingsDetails.users.email}"></td>
+								</tr>
+								<tr>
+									<th style="font-weight: bold;">Hall Details:</th>
+								</tr>
+								<tr>
+									<th>Hall Name:</th>
+									<th>Address:</th>
+									<th>Zone:</th>
+									<th>Division:</th>
+								</tr>
+								<tr>
+									<td id="hallname" th:text="${bookingsDetails.hallDetails.hallName}">
+									</td>
+									<td><span id="address">
+											<span th:text="${bookingsDetails.hallDetails.doorNo}"></span>,
+											<span th:text="${bookingsDetails.hallDetails.street}"></span>,
+											<span th:text="${bookingsDetails.hallDetails.area}"></span>,
+											<span th:text="${bookingsDetails.hallDetails.pinCode}"></span>
+										</span></td>
+									<td id="zone" th:text="${bookingsDetails.hallDetails.zone}"></td>
+									<td id="division" th:text="${bookingsDetails.hallDetails.division}">
+									</td>
+								</tr>
+								<tr>
+									<th style="font-weight: bold;">Booking Details:</th>
+								</tr>
+								<tr>
+									<th>Booking Id:</th>
+									<th>Booking Date:</th>
+									<th>Starting Date:</th>
+									<th>Ending Date:</th>
+								</tr>
+								<tr>
+									<td id="bookId" th:text="${bookingsDetails.bookingId}"></td>
+									<td id="bookDate" th:text="${bookingsDetails.bookingDate}"></td>
+									<td id="startDate" th:text="${bookingsDetails.startDate}"></td>
+									<td id="endDate" th:text="${bookingsDetails.endDate}"></td>
+								</tr>
+								<tr>
+									<th>Starting Slot:</th>
+									<th>Ending Slot:</th>
+									<th>Booking Status:</th>
+									<th>Reason For Booking:</th>
+								</tr>
+								<tr>
+									<td id="startingSlot"
+										th:text="${bookingsDetails.startingSlot == 1 ? 'Morning' : 'Evening'}">
+									</td>
+									<td id="endingSlot"
+										th:text="${bookingsDetails.endingSlot == 1 ? 'Morning' : 'Evening'}">
+									</td>
+									<td id="bookStatus" th:text="${bookingsDetails.bookingStatus}"></td>
+									<td id="reason" th:text="${bookingsDetails.reason}"></td>
+								</tr>
+								<tr>
+									<th style="font-weight: bold;">Payment Details:</th>
+								</tr>
+								<tr>
+									<th>Transaction Id:</th>
+									<th>Payment Status:</th>
+									<th>Payment Details:</th>
+									<th>Payment Type:</th>
+								</tr>
+								<tr>
+									<td id="transId" th:text="${bookingsDetails.payments.TransactionId}">
+									</td>
+									<td id="PayStatus" style="text-align: left;font-weight:bold;"
+										th:text="${bookingsDetails.payments.paymentStatus}">
+									</td>
+									<td id="PayDetails"></td>
+									<td id="PayType"></td>
+								</tr>
+								<tr>
+									<td colspan="3" style="text-align: right;font-weight:bold;">Total Amount :</td>
+									<td id="PayDate" style="text-align: left;font-weight:bold;"
+										th:text="${bookingsDetails.payments.amountReceived}">
+									</td>
+								</tr>
+								<tr>
+									<td colspan="4" style="text-align: center;"> <span>
+											<h6 style="text-align: center;font-weight: bold;">*** This is a
+												computer-generated
+												document. No signature is required ***</h6>
+										</span></td>
+								</tr>
+							</table>
+						</div>
+					</div>
+
+					<div class="button-container" style="display: flex;justify-content: flex-end;">
+						<button class="btn btn-success" onclick="printTables()"
+							style="background: #FB6340;">Print</button>
+						<button class="btn btn-success" th:onclick="return redirect([[${bookingsDetails.bookingtype}]])"
+							style="background: rgb(21, 68, 92);">Back to Home</button>
+					</div>
+
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/cdwaste/registration.html b/src/main/resources/templates/modules/cdwaste/registration.html
new file mode 100644
index 0000000..a51fcc4
--- /dev/null
+++ b/src/main/resources/templates/modules/cdwaste/registration.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.required{
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media (max-width: 767px) 
+{
+	#campaignrequestform label{
+		margin-top: 10px;
+	} 
+}
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="far fa-calendar-plus bg-blue"></i>
+									<div class="d-inline">
+										<h5>Registration</h5>
+										<span>C & D Waste Collectors Registrations</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">C & D Waste Collectors Registrations</li>
+										<!-- <li class="breadcrumb-item active" aria-current="page">Create Campaign</li> -->
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					<h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auto refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>
+					
+					<div class="row">
+										
+					<div class="col-md-12">
+					    <div class="card" style="margin-top: 0px;">
+					        <div class="card-header justify-content-between align-items-center">
+					            <h3><b>Registration Form</b></h3>
+					        </div>
+					        <div class="card-body">
+					            <form id="cdwasteRegistrationForm">
+					                <div class="form-group">
+					                    <div class="row">
+					                        <div class="col-sm-12 col-md-6">
+					                            <label for="name">Name<span class="required">*</span></label>
+					                            <input type="text" class="form-control" id="name" placeholder="Enter Name" required>
+					                        </div>
+					                        <div class="col-sm-12 col-md-6">
+					                            <label for="mobileNo">Mobile No<span class="required">*</span></label>
+					                            <input type="number" class="form-control" id="mobileNo" placeholder="Mobile No" required>
+					                        </div>
+					                    </div>
+					                </div>
+					
+					                <div class="form-group">
+					                    <label for="address">Address<span class="required">*</span></label>
+					                    <textarea class="form-control" id="address" rows="2" required></textarea>
+					                </div>
+					
+					                <div class="form-group">
+					                    <label for="adhaarFile">Upload Aadhaar:<span class="required">*</span></label>
+					                    <input type="file" class="form-control" id="adhaar" name="adhaar" required>
+					                </div>
+					
+					                <div class="form-group">
+					                    <label for="vehicleRcBookFile">Upload Vehicle RC Book:<span class="required">*</span></label>
+					                    <input type="file" class="form-control" id="vehicleRcBook" name="vehicleRcBook" required>
+					                </div>
+					
+					                <div class="form-group text-center">
+					                    <button type="submit" class="btn btn-primary" id="registerSubmit">Submit</button>
+					                    <button type="reset" class="btn btn-secondary ml-2" onclick="resetForm()">Reset</button>
+					                </div>
+					            </form>
+					        </div>
+					    </div>
+					</div>
+
+
+						
+						
+						
+						<div class="col-md-12">
+						    <div class="card" style="display:none;">
+						        <div class="card-block">
+						        <div class="page-header-title" >
+								    <h5 style="margin: 0;font-weight: bold;">Registration Details</h5><hr>
+								</div>
+						            <div>
+						                <table id="CDWasteDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+						                    <thead class="thead-dark">
+						                        <tr role="row">
+						                            <th class="text-center">S.No</th>                                                  
+						                            <th class="text-center">Name</th>
+						                            <th class="text-center">Mobile No</th>
+						                            <th class="text-center">Address</th>
+						                            <th class="text-center">Adhaar</th>
+						                            <th class="text-center">Vechicle RC Book</th>                                                                                                    
+						                            <th class="text-center no-sort" width="%2">Action</th> 
+						                        </tr>
+						                    </thead>
+						                    <tbody>
+						                        <tr th:each="campaign, i: ${campaigns}">
+						                            <td th:text="${i.count}">0</td>
+						                            <td th:text="${campaign.campaign_name}"></td>
+						                            <td th:text="${campaign.event_dates}"></td>
+						                            <td th:text="${campaign.description}"></td>
+						                           <td th:text="${campaign.event_dates}"></td>
+						                            <td th:text="${campaign.description}"></td>
+						                            <td class="text-center">
+													    <a href="#" th:onclick="return callEdit([[${campaign.campaign_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit">
+													        <i class="ik ik-edit f-16 mr-15 text-green"></i>
+													    </a>
+													</td>
+ 
+						                        </tr>
+						                    </tbody>
+						                    <tfoot class="thead-dark">
+						                        <tr>
+						                            <th class="text-center">S.No</th>                                                  
+						                            <th class="text-center">Name</th>
+						                            <th class="text-center">Event Date</th>
+						                            <th class="text-center">Description</th>
+						                            <th class="text-center">Adhaar</th>
+						                            <th class="text-center">Vechicle RC Book</th> 
+						                            <th class="text-center no-sort" width="%2">Action</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 src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+        
+        <script type="text/javascript">
+        $(document).ready(function() {
+
+        	var table = $('#CampaignDatatable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                ],
+                scrollY: '50vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: [
+                    {
+                        extend: 'pageLength',
+                        className: 'btn btn-warning'
+                    },
+                    {
+                        title: 'Data export',
+                        extend: 'copyHtml5',
+                        text: 'Copy',
+                        className: 'btn btn-secondary',
+                        id: 'copyBtn'
+                    },
+                    {
+                        extend: 'excelHtml5',
+                        text: 'Excel',
+                        className: 'btn btn-secondary',
+                        id: 'excelBtn'
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        text: 'CSV',
+                        className: 'btn btn-secondary',
+                        id: 'csvBtn'
+                    },
+                    {
+                        extend: 'pdfHtml5',
+                        text: 'PDF',
+                        className: 'btn btn-secondary',
+                        id: 'pdfBtn'
+                    }
+                ],
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false
+            });
+        });
+        
+       
+        $(document).ready(function () {
+            $('#cdwasteRegistrationForm').on('submit', function (event) {
+                event.preventDefault(); // Prevent default form submission
+
+                var name = $('#name').val();
+                var mobileNo = $('#mobileNo').val();
+                var address = $('#address').val();
+                var adhaarFile = $('#adhaar')[0].files[0];
+                var vehicleRcBookFile = $('#vehicleRcBook')[0].files[0];
+
+                if (!name || !mobileNo || !address || !adhaarFile || !vehicleRcBookFile) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'All fields are required!'
+                    });
+                    return;
+                }
+
+                var formData = new FormData(this); // 'this' refers to the form element
+
+                $.ajax({
+                    url: '/gcc/api/registration/register',
+                    type: 'POST',
+                    data: formData,
+                    processData: false, // Required for FormData
+                    contentType: false, // Required for FormData
+                    success: function (response) {
+                        if (response[0].status === 'success') {
+                            Swal.fire({
+                                icon: 'success',
+                                title: 'Success',
+                                text: response[0].message
+                            }).then((result) => {
+                                if (result.isConfirmed) {
+                                    $('#cdwasteRegistrationForm')[0].reset();
+                                    location.reload();
+                                }
+                            });
+                        } else {
+                            Swal.fire({
+                                icon: 'error',
+                                title: 'Error',
+                                text: response[0].message
+                            });
+                        }
+                    },
+                    error: function (xhr, status, error) {
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Error',
+                            text: 'An error occurred: ' + error
+                        });
+                    }
+                });
+            });
+        });
+
+
+
+
+
+		
+	
+
+
+	
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/cdwaste/rejected.html b/src/main/resources/templates/modules/cdwaste/rejected.html
new file mode 100644
index 0000000..b0d160d
--- /dev/null
+++ b/src/main/resources/templates/modules/cdwaste/rejected.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <div class="main-content">
+                <div class="container-fluid">
+                    <div class="page-header">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fas fa-th-large bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>C & D Waste Collectors </h5>
+                                        <span>Rejected</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <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">C & D Waste Collectors</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Rejected</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr>
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card">
+                             <div class="card-header">
+
+				            </div>
+                                <div class="card-block">
+                                    <div>
+                                        <table id="worksDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+                                           <thead class="thead-dark">
+										        <tr role="row">
+										            <th>S.No</th> <!-- Auto-increment index -->
+										            <th>Name</th>
+										            <th>Mobile No</th>
+										            <th>Address</th>
+										            <th>Vehicle Number</th>
+										            <th>Vehicle Type</th>
+										            <th>Rejected Date</th>
+										            <th>Rejected By</th>
+										            <th>Reason</th>
+										            <th>Register ID</th>
+										        </tr>
+										    </thead>
+										    <tbody>
+										        <tr th:each="rejected, i : ${rejectedDetails}">
+										            <td th:text="${i.count}">0</td> <!-- Index counter -->
+										            <td th:text="${rejected.name}">Name</td>
+										            <td th:text="${rejected.mobile_no}">Mobile No</td>
+										            <td th:text="${rejected.address}">Address</td>
+										            <td th:text="${rejected.vehicle_num}">Vehicle Number</td>
+										            <td th:text="${rejected.vehicletype}">Vehicle Type</td>
+										            <td th:text="${rejected.accepteddate}">Rejected Date</td>
+										            <td th:text="${rejected.acceptedby}">Rejected By</td>
+										            <td th:text="${rejected.reason}">Reason</td>
+										            <td th:text="${rejected.register_id}">Register ID</td>
+										        </tr>
+										    </tbody>
+										    <tfoot class="thead-dark">
+										        <tr>
+										            <th>S.No</th>
+										            <th>Name</th>
+										            <th>Mobile No</th>
+										            <th>Address</th>
+										            <th>Vehicle Number</th>
+										            <th>Vehicle Type</th>
+										            <th>Rejected Date</th>
+										            <th>Rejected By</th>
+										            <th>Reason</th>
+										            <th>Register ID</th>
+										        </tr>
+										    </tfoot>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+        </div>
+    </div>
+
+   
+
+    <!-- Include jQuery and Bootstrap JavaScript -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+    <script type="text/javascript">
+    $(document).ready(function() {
+
+    	var table = $('#worksDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                { targets: 'no-sort', orderable: false }
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', 'Show all']
+            ],
+            scrollY: '50vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary',
+                    id: 'copyBtn'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary',
+                    id: 'excelBtn'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary',
+                    id: 'csvBtn'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary',
+                    id: 'pdfBtn'
+                }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false
+        });
+       
+    });
+    	   
+
+
+
+    
+
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/com_petition/complaint_list.html b/src/main/resources/templates/modules/com_petition/complaint_list.html
new file mode 100644
index 0000000..93c4c69
--- /dev/null
+++ b/src/main/resources/templates/modules/com_petition/complaint_list.html
@@ -0,0 +1,803 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Complaint List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Complaint List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <!-- <div class="card">
+                                    
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="complaintDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department Officer</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department Officer</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></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/com_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	var officerMasterList = "";
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_complaint_data(){
+	        	
+	        	var apiUrl = '/gcc/api/com_petition/getComplaintList?loginId='+createdBy;
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+	        
+	        /* Get Complaints List */
+	        function get_complaint_list(){
+	        	get_complaint_data().then(function(complaintList) {
+	    		    // Handle the complaint list
+	    		    generate_table(complaintList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching complaint list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching complaint list:', error);
+			        }
+	    		});
+			}
+	        
+	        function viewPetitionSummary(petitionNo){
+	        	$("#viewpetition").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				var url = '/gcc/com_petition/view-petition-modal?petitionNo='+petitionNo;
+				$.ajax({
+				    url: url,
+				    type: 'GET',
+				    dataType: 'html',
+				    success: function(data) {
+				      $('#viewPetitionBoxBody').html(data); // Inject content into modal body
+				    },
+				    error: function(xhr, status, error) {
+				      console.error("Error loading URL:", error);
+				      // Handle error, display a message, etc.
+				    }
+				  });
+				
+				return false;
+			}
+	        
+	        function updateStatus(mapId){
+	        	$("#ComplaintStatusBox").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				callComplaintDetails(mapId);
+				return false;
+			}
+	        
+	        function callComplaintDetails(mapId){
+	        	loading_text_msg = getLoadingMessage(); // get Loading random text
+	        	var loading=searchinfo("<b>"+loading_text_msg+"</b>");
+	    		var complaintContentHTML=`
+	    							<div class="row">
+	    							    <div class="col-lg-6">
+	    						        <div class="block block-rounded">
+	    						           
+	    						                <div id="leftContainer">${loading}</div>
+	    						            
+	    						        </div>
+	    						    </div>
+	    						    
+	    						    <div class="col-lg-6 printack2">
+	    						        <div class="block block-rounded">
+	    						            
+	    						                <div id="rightContainer">${loading}</div>
+	    						           
+	    						        </div>
+	    						    </div>
+	    						    <!--<div class="col-lg-12 text-center block-options pt-10">
+	    						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+	    						    </div>-->
+	    						</div>`;
+	    		
+	    		$('#ComplaintStatusBoxBody').html(complaintContentHTML); // Box content (Body)
+	    		
+	    		getComplaintData(mapId);
+			}
+	        
+	        function getComplaintData(mapId){
+	        	get_complaint_details_byId(mapId).then(function(complaintDetails) {
+	        		
+	        		var complaintStatus = complaintDetails[0].status;
+					
+	        		var statusBadge = complaintStatus.charAt(0).toUpperCase() + complaintStatus.slice(1);
+	        		var refRibben = `<div class="card-header-right" style="top:auto;">
+	        							Ref ID: ${mapId}
+				              	      </div>`;
+           	        var statusRibben = ""; 
+	        		if(complaintStatus=='pending'){
+	        			statusRibben = `<div class="ribbon">
+		              	      <div class="wrap">
+		              	        <span class="ribbon6 bg-danger"><div styel="color:#fff;">${statusBadge}</div></span>
+		              	      </div>
+		              	    </div>`;
+		              	statusRibben = "";    
+	        			statusBadge = `<span class="badge badge-danger" style="font-size:10px;padding:0.25em 0.4em;">${statusBadge}</span>`;
+	        			
+					}
+	        		else if(complaintStatus=='close'){   
+	        			statusBadge = `<span class="badge badge-success" style="font-size:10px;padding:0.25em 0.4em;">${statusBadge}</span>`;
+					}
+	        		var complaintRightBody = "";
+					var complaintLeftBody = `<div class="card mb-0">
+								             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                	<h3>Complaint Details</h3>
+								                	${statusRibben}
+								                </div>
+								                <div class="card-body">
+									                <table class="table table-borderless table-vcenter mb-0" style="font-size:12px;">
+												      <tbody>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${convertdate(complaintDetails[0].cdate)}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petition_no}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petitioner_name}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petitioner_mobile}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th colspan="2" style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:<br><p class="fw-semibold mb-0" style="font-weight:normal;">${complaintDetails[0].complaint_nature}</p></th>
+												        </tr>
+												        <tr>
+												        	<td colspan="2" style="padding: 0.45rem 0.45rem;">
+													        	<table class="table table-bordered table-vcenter mb-0">
+													                <thead>
+													                  <tr>
+													                    <th>Complaint <i class="fa fa-arrow-right"></i> Status</th>
+													                    <th class="text-right" id="complaint_forward_link"><a href="javascript:void(0);" onclick="return forward_compliant(${complaintDetails[0].mapid}, '${complaintDetails[0].complaint_type}');" class="link" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Click here to forward this complaint to another department officer."><i class="far fa-share-square"></i> Click to forward </a></th>
+													                  </tr>
+													                </thead>
+												                	<tbody>
+												                 		<tr>
+															            	<td colspan="2" class="fw-semibold">
+															            	${complaintDetails[0].complaint_type} <i class="fa fa-arrow-right"></i> ${statusBadge} <i class="fa fa-arrow-right"></i> ${complaintDetails[0].off_nm}
+														                    </td>
+													                  	</tr>
+												                	</tbody>
+												              	</table>
+												        	</td>
+												        </tr>
+												      </tbody>
+												    </table>
+								                </div>
+								            </div>`;
+					
+					$('#leftContainer').html(complaintLeftBody);
+					
+					if(complaintStatus!='close'){
+						complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data">
+												<div class="card mb-0">
+							                    	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+							                    		<h3>Complaint Update Details</h3>
+							                    	    ${refRibben}
+							                		</div>
+							                		<div class="card-body">
+								                		<div class="form-group">
+					                                    	<label for="complaintActionText">நடவடிக்கை / Action:</label>
+									   						<textarea class="form-control" id="complaintActionText" name="complaintActionText" rows="6" maxlength="250" placeholder="புகாரின் தன்மை..." required></textarea>
+									   					</div>
+									   					<div class="form-group">
+									                       <label for="action_san_page1">ஆவணப் பதிவேற்றம் / Document Upload:</label>
+														   <input name="action_san_page1" id="action_san_page1" class="form-control" type="file" capture="camera"  accept="application/pdf, image/*" required>
+														 </div>
+														 <div class="form-group mb-0 text-center">
+														 	<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveandclose(${mapId},${complaintDetails[0].petition_id},'${complaintDetails[0].petition_no}');" id="updatebtn"><i class="ik ik-save"></i> Save and Close </button>
+														 </div>
+							                		</div>
+							            		</div>
+						            		</form>`;
+						$('#rightContainer').html(complaintRightBody);
+					}
+					else{
+						// first remove forward link
+						$("#complaint_forward_link").html("");
+						
+						get_complaint_action_byId(mapId).then(function(complaintAction) {
+							var fileType = complaintAction[0].file_type;
+							fileType = fileType.split("/").pop();
+							var filetypeico = "file-lines";
+							if(fileType=='pdf'){
+								filetypeico = "file-pdf";
+							}
+							else{
+								filetypeico = "file-image";
+							}
+							
+							complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data">
+													<div class="card mb-0">
+								                    	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                    		<h3>Complaint Update Details</h3>
+								                    	    ${refRibben}
+								                		</div>
+								                		<div class="card-body">
+									                		<div>
+									                			<b>நடவடிக்கை தேதி / Action Date:</b> ${convertdate(complaintAction[0].cdate)}
+					                                            <hr>
+					                                            <b>நடவடிக்கை / Action:</b><br>
+					                                            <p class="mt-10">${complaintAction[0].comments}</p>
+					                                        </div>
+					                                        	<hr>
+					                                        <div class="like-comm mt-20 mb-0"> 
+					                                        	<b>ஆவணப் பதிவேற்றம் / Document Upload:</b><br>
+					                                        	
+						                                        	<table class="table table-bordered table-vcenter mb-0">
+														                <thead>
+														                  <tr>
+														                    <th>S.no</th>
+														                    <th>File Name</th>
+														                    <th>Size</th>
+														                    <th>Type</th>
+														                    <th><i class="ik ik-more-horizontal"></i></th>
+														                  </tr>
+														                </thead>
+													                	<tbody>
+													                 		<tr>
+																            	<td class="fw-semibold">1</td>
+																            	<td class="fw-semibold">${complaintAction[0].file_name}</td>
+																            	<td class="fw-semibold">${formatFileSize(complaintAction[0].file_size)}</td>
+																            	<td class="fw-semibold">${fileType}</td>
+																            	<td class="fw-semibold">
+																            		<a href="javascript:void(0)" class="link mr-10" onclick="downloadFile('action','${complaintAction[0].file_name}','${complaintAction[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Download File"><i class="fa fa-fw fa-download" style="font-size: 18px;"></i></a>
+																            		<a href="javascript:void(0)" class="link mr-10" onclick="viewFile('action','${complaintAction[0].file_name}','${complaintAction[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View File"><i class="far fa-3x fa-${filetypeico}" style="font-size: 18px;"></i></a>
+																            	</td>
+														                  	</tr>
+													                	</tbody>
+													              	</table>
+					                                   		</div>
+								                		</div>
+								            		</div>
+							            		</form>`;
+							$('#rightContainer').html(complaintRightBody);
+							// Enable tooltips for all elements with data-toggle="tooltip"
+				            $('[data-toggle="tooltip"]').tooltip();
+						}).catch(function(error) {
+			    		    // Handle errors
+			    		    console.error('Error fetching action details ('+mapId+'):', error);
+			    		});	 
+						
+					}
+					// Enable tooltips for all elements with data-toggle="tooltip"
+		            $('[data-toggle="tooltip"]').tooltip();
+	        	}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching Complaint details ('+mapId+'):', error);
+	    		});	            
+	        	
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#complaintDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        //scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+	            	var complaint_status=row["status"];
+					complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1);
+					
+					actionHTML = `<div class="dropdown d-inline-block show">
+			                        <!--<a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
+			                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end">
+			                        Action for: `+row['petition_no']+` 
+			                        	<a class="dropdown-item" href="" onclick="return viewAck('`+row['petition_no']+`');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View Acknowledgement"><i class="ik ik-eye"></i> Acknowledgement</a>
+			                        	<a class="dropdown-item" href="/gcc/com_petition/petition-ack/`+row['petition_no']+`" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print Acknowledgement"><i class="ik ik-printer"></i> Acknowledgement</a>
+			                        </div>-->
+			                    </div>`
+	                table.row.add([
+	                	rowNum++,
+	                    '<a href="/gcc/com_petition/update-petition?petitionNo='+row['petitionNoEncode']+'" onclick="return viewPetitionSummary(\''+row['petitionNoEncode']+'\');">'+row['petition_no']+'</a>',
+	                    row['petitioner_name'],
+	                    row['petitioner_mobile'],
+	                    row['petitioner_address'],
+	                    row['petitioner_pincode'],
+	                    row['complaint_type'],
+	                    convertdate(row['cdate']),
+	                    '<a href="#" onclick="return updateStatus('+row['mapid']+');" style="text-transform: capitalize;"">'+complaint_status+'</a>',
+	                    row['off_nm'],
+	                    actionHTML
+	                ]).draw(false);
+	            });
+	            
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+	      //Save Forward Details
+			function saveForward(mapid){
+				
+				var offidto = $("#dept2").val();
+				
+				if(offidto=='' || offidto==0){
+					var formError= "Select Department Required!";
+					$('#forwardFormError').html(formError);
+					return false;
+				}
+				
+				var comments = $("#forwardcomp").val();
+				var textLength = comments.length;
+				var formError= "";
+				if(textLength<=10){
+					formError= "Forward Comments Required!";
+					$('#forwardFormError').html(formError);
+					return false;
+				}
+				else{
+					$('#forwardFormError').html(formError);
+				}
+				
+				$.ajax({
+				    type: "POST",
+				    url: '/api/insertForwardLog',
+				    data: {
+				        'mapid': mapid,
+						'comments':comments,
+						'offidto':offidto
+				    },
+				}).done(function(response) {
+				      Swal.fire(
+				        'Complaint Forward Status!',
+				        'Complaint Forwarded Successfully!',
+				        'success'
+				      ).then(() => {
+							    location.reload();
+							 });
+					console.log(response);
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					/*
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+				    console.error("URL: /api/setEventId");
+				    console.error("Query parameters:", {
+				        'upass': upass
+				    });
+					*/
+				});
+				return false;
+			}
+	     	
+	      // Save New Action  
+			function saveandclose(mapId,petitionId,petitionNo){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var comments = $('#complaintActionText');
+				var textLength = comments.val().length;
+				comments.removeClass('is-invalid');
+				
+				var fileInput = $("#action_san_page1");
+				fileInput.removeClass('is-invalid');
+				var selectedFile = fileInput.val();
+				
+				if (textLength>=10 && selectedFile) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#action-form')[0]);
+			        formData.append('createdBy',createdBy);
+			        formData.append('mapId',mapId);
+			        formData.append('petitionId',petitionId);
+			        formData.append('petitionNo',petitionNo);
+			        formData.append('complaintStatus','close');
+			        
+			        saveActionFormData(formData).then(function(response) {
+						if(response!="error"){
+							// Handle the response
+		    		    	Swal.fire({
+		        				title: 'Complaint action saved successfully.',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'success',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					$("#ComplaintStatusBox").modal('hide');
+		        				}
+		        			});
+						}
+						else{
+							// Handle the response
+							// if response == "error"
+		    		    	Swal.fire({
+		        				title: 'Failed to save complaint action. Please try again!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+		    		    
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					if(textLength<10){
+						comments.addClass('is-invalid');
+					}
+					
+					if (!selectedFile) {
+						fileInput.addClass('is-invalid');
+					}
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function saveActionFormData(formData){
+				var apiUrl = '/gcc/api/com_petition/saveComplanitStatus';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function form_btn_enable(){
+				$("#updatebtn").prop("disabled", false);
+				$("#updatebtn").html('<i class="ik ik-save"></i> Save and Close ');
+			}
+			
+			function form_btn_disable(){
+				$("#updatebtn").prop("disabled", true);
+				// Show the loading icon on the button
+				$("#updatebtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+			}
+			
+			// For Complient Map Select HTML 
+			function calloffice(val,id){
+				if(val==1){ // Intenal
+					var officeSelectHTML = `<div class="mb-4">
+	                							<label for="office${id}">Select Office</label>
+	                							<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})">
+									                <option value="0">Select Office</option>
+									                <option value="1">HQ</option>
+									                <option value="2">Zonal Office</option>
+							                	</select>
+						                	</div>`;
+					$("#officedata"+id).html(officeSelectHTML);
+				}
+				else if(val==2){ // External
+					$("#officers"+id).html('');
+					var ExSelectHTML = getselect(id,"ExSelect");
+					var departmentSelectHTML = `<div class="mb-4">
+													<label for="dept3">Select Department</label>
+													${ExSelectHTML}
+											 	</div>`;
+					$("#officedata"+id).html(departmentSelectHTML);
+				}
+				else{
+					$("#officedata"+id).html('');
+					$("#officers"+id).html('');
+				}
+				$("#officers"+id).html('');
+			}
+			
+			function callofficers(val,id){
+				
+				if(val==1){
+					// HQ
+					var HQSelectHTML = getselect(id,"HQSelect");
+				 	$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`);
+				}
+				else if(val==2){
+					// Zone Office
+					var ZoneSelectHTML = getselect(id,"ZoneSelect");
+					$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`);
+				}
+				else{
+					$("#officers"+id).html('');
+				}
+				
+			}
+			
+			function getselect(comid,type){
+		  	  var HQSelect = '';
+		  	  var ZoneSelect = '';
+		  	  var ExSelect = '';
+		  
+		  	  for (var i = 0; i < officerMasterList.length; i++) {
+		  		  if(officerMasterList[i].zone_id=="HQ"){
+		  			  HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else if(officerMasterList[i].zone_id=="99"){
+		  			  ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else{
+		  			  ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  	  }
+		  	  
+		  	// Forward Save Button
+			  var forward_Btn = `<div class="col-12 pt-3 mb-0 pb-0" id="submitdiv">
+									<label class="form-label" for="forwardcomp">Forward Comments</label>
+									<textarea class="js-maxlength form-control" id="forwardcomp" name="forwardcomp" rows="6" maxlength="250" placeholder="கருத்துகள்..." data-always-show="true" data-placement="right" th:utext="" required></textarea>
+			  						<div class="text-center pt-3">
+									<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveForward(${comid});" id="updatebtn"><i class="si si-rocket me-1"></i> Save and Forward</button>
+			  						<div id="forwardFormError" class="text-danger"></div>
+			  						</div>
+								</div>`;
+								
+		  	  if(type=="HQSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ZoneSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ExSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  return '';
+			}
+			$(document).ready(function() {
+				call_loading();
+				get_officer_master_data();
+				get_complaint_list();
+			});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/com_petition/new_petition.html b/src/main/resources/templates/modules/com_petition/new_petition.html
new file mode 100644
index 0000000..2d29f52
--- /dev/null
+++ b/src/main/resources/templates/modules/com_petition/new_petition.html
@@ -0,0 +1,301 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Add New Petition</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Add Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                        	<div class="col-md-2"></div>
+							<div class="col-md-8">
+                                <div class="card">
+									<form class="request-form" id="request-form" onsubmit="return saveRequest();" enctype="multipart/form-data">
+	                                    <div class="card-header"><h3>New Petition Form</h3></div>
+	                               		<div class="card-body">
+											<div class="form-group">
+	                                            <label for="petitionerName">Petition Type / மனுவின் வகை</label>
+	                                            <div class="form-radio" id="petition_type">
+		                                          
+		                                        </div>
+	                                        </div>
+											<div class="form-group">
+	                                            <label for="petitionerName">Petitioner's Name / மனுதாரரின் பெயர்</label>
+	                                            <input type="text" class="form-control" name="petitionerName" id="petitionerName" autocomplete="off" placeholder="மனுதாரரின் பெயர்"  maxlength="250" required>
+	                                        </div>
+	                                        <div class="form-group">
+	                                            <label for="petitionerMobile">Mobile NO / கைபேசி எண்</label>
+			                       				<input type="text" class="js-maxlength form-control" id="petitionerMobile" name="petitionerMobile" autocomplete="off" placeholder="கைபேசி எண்" maxlength="10" data-always-show="true" data-placement="top" required>
+	                                        </div>
+											<div class="form-group">
+                                          		<label for="complaintType">Type of complaint / புகார் வகை (பலவற்றை தேர்ந்தெடு..) </label>
+												<select class="select2" id="complaintType" name="complaintType" style="width: 100%;" data-placeholder="பலவற்றை தேர்ந்தெடு.." multiple required>
+													<option th:each="complaintType : ${complaintTypesList}" th:value="${complaintType.complaintTypeId}" th:text="${complaintType.complaintType}"></option>
+												</select>
+											</div>
+	                                        <div class="row">
+												 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page1">Petition Page 1 / மனு பக்கம் 1</label>
+													   <input name="san_page1" id="san_page1" class="form-control" type="file" capture="camera"  accept="application/pdf, image/*">
+													 </div>
+												 </div>
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page2">Petition Page 2 / மனு பக்கம் 2</label>
+													   <input name="san_page2" id="san_page2" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+												 
+											</div>	 
+											<div class="row">	 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page3">Petition Page 3 / மனு பக்கம் 3</label>
+													   <input name="san_page3" id="san_page3" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+												 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page4">Petition Page 4 / மனு பக்கம் 4</label>
+													   <input name="san_page4" id="san_page4" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+											</div>
+										 	
+	                                  	</div>
+	                                  	<div class="card-footer text-right">
+											<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+	                                	</div>
+                                	</form>
+                                </div>
+                            </div>
+							<div class="col-md-2"></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 th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var complaintTypeList = "";
+			/* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(complaintTypeList, function(index, complaintType) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: complaintType.complaint_typeid, // case-sensitive as per object
+	    	                text: complaintType.complaint_type
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#complaintType').append(option);
+	    	        });
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			
+	        /* Get Petition Type Data */
+	        function get_petition_type_data(){
+	        	var petitionTypeHTML="";
+	    		get_petition_type_list().then(function(petitionTypes) {
+	    		    // Handle the Complaint list
+	    		    petitionTypeList = petitionTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(petitionTypeList, function(index, petitionType) {
+	    	            // Create an option element
+	    	            
+	    	            petitionTypeHTML +=`<div class="radio radiofill ${petitionType.color_class} radio-inline">
+						                            <label class="cursure_poiter">
+						                            <input type="radio" name="petitionType" value="${petitionType.petition_type_id}">
+						                            <i class="helper"></i>${petitionType.name}
+						                        </label>
+						                    </div>`;
+	    	        });
+	    		 // Append the option to the select element
+    	         $('#petition_type').html(petitionTypeHTML);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching petition type list:', error);
+	    		});
+			}
+			 
+			// Save New petition 
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var inputElementMobileNo = $('#petitionerMobile');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementComplaintType = $('#complaintType');
+				var complaintType = inputElementComplaintType.val();
+				
+				if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#request-form')[0]);
+			        formData.append('createdBy',createdBy);
+			        saveFormData(formData).then(function(response) {
+						if(response!="error"){
+							// Handle the response
+		    		    	Swal.fire({
+		        				title: 'Petition data saved successfully.',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'success',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					// Reload the current page
+		        					//location.reload();
+		        					// Navigate to a Ack page
+		        					window.location = "/gcc/com_petition/petition-list";//petition-ack/"+response;
+		        				}
+		        			});
+						}
+						else{
+							// Handle the response
+							// if response == "error"
+		    		    	Swal.fire({
+		        				title: 'Failed to save petition data. Please try again!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+		    		    
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					inputElementMobileNo.addClass('is-invalid');
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function saveFormData(formData){
+				var apiUrl = '/gcc/api/com_petition/savePetition';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function form_btn_enable(){
+				$("#resetFormBtn").prop("disabled", false);
+				$("#requestSubmitBtn").prop("disabled", false);
+				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+			}
+			
+			function form_btn_disable(){
+				$("#resetFormBtn").prop("disabled", true);
+				$("#requestSubmitBtn").prop("disabled", true);
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+			}
+			
+			$(document).ready(function() {
+				get_complaint_type_data();
+				get_petition_type_data();
+				$('#petitionerMobile').mask('0000000000');
+			});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/com_petition/petition_ack.html b/src/main/resources/templates/modules/com_petition/petition_ack.html
new file mode 100644
index 0000000..5d11f60
--- /dev/null
+++ b/src/main/resources/templates/modules/com_petition/petition_ack.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5 th:utext="'Petition Acknowledgement ('+${petitionNo}+')'">Petition Acknowledgement</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Petition Acknowledgement</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr class="print_no">
+                        <!-- 
+                        <div class="row">
+                        	<div class="col-lg-6">
+								<div class="block block-rounded ack ack-container">
+									<div id="ack1table" style="border: 1px solid black;">
+										<div id="ack1"></div>
+									</div>
+								</div>
+							</div>
+						 
+							<div class="col-lg-6">
+								<div class="block block-rounded ack ack-container">
+									<div id="ack2table" style="border: 1px solid black;">
+										<div id="ack2"></div>
+									</div>
+								</div>
+							</div>
+		   	 	            <div class="col-lg-12 text-center block-options pt-10">
+		   	 					<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+		   	 	            </div>
+                        </div>
+                         -->
+                        <div class="row">
+						    <div class="col-lg-6">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack1table" class="ack-content">
+						                <div id="ack1">This is ack1</div>
+						            </div>
+						        </div>
+						    </div>
+						    
+						    <div class="col-lg-6 printack2">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack2table" class="ack-content">
+						                <div id="ack2">This is ack2</div>
+						            </div>
+						        </div>
+						    </div>
+						    <div class="col-lg-12 text-center block-options pt-10">
+						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+						    </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 th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var complaintTypeList = "";
+			
+			 /* Get Complaint Type Data */
+			function get_complaint_type_data(){
+			
+				get_complaint_type_list().then(function(complaintTypes) {
+				    // Handle the Complaint list
+				    complaintTypeList = complaintTypes;
+					
+				    // After Complaint Type list created we call petition details
+				    get_petition_data();
+				    
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching complaint type list:', error);
+				});
+			}
+			
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint_txt;
+					
+					var complaintArray = complaint.split(',');
+					
+					for(j = 0; j < complaintArray.length; j++){
+						if(j>0){
+							complaintHTML+="<br>";
+						}
+						complaintHTML+= (j+1)+') '+complaintArray[j];
+					}
+					var ack =`
+					<table class="table table-borderless table-vcenter p-0 m-0">
+					  <tbody>
+					    <tr>
+					      <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+					      <td class="fw-semibold text-center">
+								<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br>
+								மக்களை தேடி மேயர் திட்டம்<br>
+								ஒப்புகை சீட்டு / Acknowledgement Receipt</b>
+						  </td>
+						  <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+					    </tr>
+					</tbody>
+					</table>
+					<hr style="margin:0px">
+					  <div class="block-content p-0 m-0">
+					    <table class="table table-borderless table-vcenter" style="font-size:12px;">
+					      <tbody>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${convertdate(petitionDetails[0].cdate)}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petition_no}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petitioner_name}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petitioner_mobile}
+					          </td>
+					        </tr>
+					        <tr style="font-size:12px;">
+					          <th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${complaintHTML}
+							</td>
+					        </tr>
+					        <tr>
+					          <td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th>
+					        </tr>
+					        <tr style="text-align: right;">
+					          <th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th>
+					        </tr>
+					      </tbody>
+					    </table>
+					  `;
+				    
+					$("#ack1").html(ack);
+					$("#ack2").html(ack);
+					  
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition details ('+petitionNo+'):', error);
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			
+			function get_petition_details() {
+			    
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/com_petition/getPetitionDetails?petitionNo='+petitionNo;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                resolve(jsonResponse);
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			$(document).ready(function() {
+				get_complaint_type_data();
+			});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/com_petition/petition_list.html b/src/main/resources/templates/modules/com_petition/petition_list.html
new file mode 100644
index 0000000..e00581f
--- /dev/null
+++ b/src/main/resources/templates/modules/com_petition/petition_list.html
@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Petition List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Petition List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                               <!--  <div class="card">
+                                    
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="petitionDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered" style="font-size:10px;">
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Petition Type</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- 
+                                                <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</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/com_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+        <script th:inline="javascript">
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            }
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_petitions_data(){
+	        	var apiUrl = '/gcc/api/com_petition/getPetitionList';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_petitions_list(){
+	        	get_petitions_data().then(function(petitionList) {
+	    		    // Handle the department list
+	    		    generate_table(petitionList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching petition list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching petition list:', error);
+			        }
+	    		});
+			}
+        
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#petitionDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        //scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+
+	            	//View Acknowledgement: View the acknowledgement for petition MP10000001.
+					//Print Acknowledgement: Print the acknowledgement for petition MP10000001.
+					//View Petition Details: View the details of petition MP10000001.
+					//View Uploaded Files: View the files uploaded for petition MP10000001.
+
+					actionHTML = `<div class="dropdown d-inline-block show">
+			                        <a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
+			                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end">
+			                        
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the acknowledgement for petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Acknowledgement</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print the acknowledgement for petition `+row['petition_no']+`."><i class="ik ik-printer"></i> Print Acknowledgement</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the details of petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Petition Details</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the files uploaded for petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Uploaded Files</a>
+			                        </div>
+			                    </div>`
+	                table.row.add([
+	                	rowNum++,
+	                    '<a href="/gcc/com_petition/update-petition?petitionNo='+row['petitionNoEncode']+'" class="link">'+row['petition_no']+'</a>',
+	                    row['petitioner_name'],
+	                    row['petitioner_mobile'],
+	                    row['petitioner_address'],
+	                    row['petitioner_pincode'],
+	                    row['petitioner_complaint_txt'],
+	                    convertdate(row['cdate']),
+	                    row['status'],
+	                    row['petition_type_name'],
+	                    actionHTML
+	                ]).draw(false);
+	            });
+	            
+	           // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+			$(document).ready(function() {
+				call_loading();
+	            get_petitions_list();
+	            
+			});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/com_petition/petition_not_mapped_list.html b/src/main/resources/templates/modules/com_petition/petition_not_mapped_list.html
new file mode 100644
index 0000000..6385044
--- /dev/null
+++ b/src/main/resources/templates/modules/com_petition/petition_not_mapped_list.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Unmapped Petition List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Unmapped Petition List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <!-- <div class="card">
+                                	<div class="card-header">
+                                        <h3>These are the petitions that are currently not assigned to any department officer:</h3>
+                                    </div>
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+                                        <div>
+                                        <p style="font-size:12px">These are the petitions that are currently not assigned to any department officer:</p>
+											<table id="petitionDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Petition Type</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</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/com_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+        <script th:inline="javascript">
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            }
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_petitions_data(){
+	        	var apiUrl = '/gcc/api/com_petition/getUnmapPetitionList';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_petitions_list(){
+	        	get_petitions_data().then(function(petitionList) {
+	    		    // Handle the department list
+	    		    generate_table(petitionList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching petition list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching petition list:', error);
+			        }
+	    		});
+			}
+        
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#petitionDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+				        	{ targets: 'no-sort', "orderable": false },
+							{ targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				       // scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+	                table.row.add([
+	                	rowNum++,
+	                    '<a href="/gcc/com_petition/update-petition?petitionNo='+row['petitionNoEncode']+'">'+row['petition_no']+'</a>',
+	                    row['petitioner_name'],
+	                    row['petitioner_mobile'],
+	                    row['petitioner_address'],
+	                    row['petitioner_pincode'],
+	                    row['petitioner_complaint_txt'],
+	                    convertdate(row['cdate']),
+	                    row['status'],
+	                    row['petition_type_name'],
+	                    '<a href="" onclick="return viewAck(\''+row['petition_no']+'\');"data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View Ack"><i class="far fa-handshake"></i></a>',
+	                ]).draw(false);
+	            });
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            
+	            remove_loading(); // remove Loading 
+			}
+			
+			$(document).ready(function() {
+				call_loading();
+	            get_petitions_list();
+			});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/com_petition/petition_update.html b/src/main/resources/templates/modules/com_petition/petition_update.html
new file mode 100644
index 0000000..255875a
--- /dev/null
+++ b/src/main/resources/templates/modules/com_petition/petition_update.html
@@ -0,0 +1,764 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Edit / Update Petition</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Edit/Update Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card" id="petitionUpdateForm">
+									<form class="update-request-form" id="update-request-form" onsubmit="return updateRequest();">
+										<div class="card-header">
+		                                    <h3>Edit / Update Petition Form</h3>
+		                                    <div class="card-header-right">
+	                                            <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+	                                        </div>
+	                                    </div>
+	                               		<div class="card-body">
+	                               			<div class="row">
+	                               				<div class="col-12">
+	                               					<div class="form-group">
+			                                            <label for="petitionerName">Petition Type / மனுவின் வகை</label>
+			                                            <div class="form-radio" id="petition_type">
+				                                          
+				                                        </div>
+			                                        </div>
+	                               				</div>
+												<div class="col-6">
+													<div class="form-group">
+			                                            <label for="petitionerName">Petitioner's Name / மனுதாரரின் பெயர்</label>
+			                                            <input type="text" class="form-control" name="petitionerName" id="petitionerName" autocomplete="off" placeholder="மனுதாரரின் பெயர்"  maxlength="250" required>
+			                                        </div>
+			                                        <div class="form-group">
+			                                            <label for="petitionerMobile">Mobile NO / கைபேசி எண்</label>
+					                       				<input type="text" class="form-control" id="petitionerMobile" name="petitionerMobile" autocomplete="off" placeholder="கைபேசி எண்" maxlength="10" required>
+			                                        </div>
+			                                        <div class="form-group">
+			                                        	<label for="complaintNature">புகாரின் தன்மை / Nature Of Complaint</label>
+								   						<textarea class="form-control" id="complaintNature" name="complaintNature" rows="6" placeholder="புகாரின் தன்மை..."></textarea>
+								   					</div>
+								   					<div class="form-group">
+			                                        	<label for="remarks">குறிப்பு / Remarks:</label>
+								   						<textarea class="form-control" id="remarks" name="remarks" rows="6" placeholder="குறிப்பு..."></textarea>
+								   					</div>
+												</div>
+												<div class="col-6">
+													<div class="form-group">
+														<label for="petitionerAddress">Address of petitioner / மனுதாரரின் முகவரி</label>
+									   					<textarea class="form-control" id="petitionerAddress" name="petitionerAddress" rows="6" maxlength="250" placeholder="மனுதாரரின் முகவரி..."></textarea>
+													</div>
+													<div class="form-group">
+														<label for="petitionerPincode">Postal code / தபால் குறியீடு</label>
+	   			                       					<input type="text" class="form-control" id="petitionerPincode" name="petitionerPincode" placeholder="தபால் குறியீடு" maxlength="6" required>
+													</div>
+													<div class="form-group">
+		                                          		<label for="complaintType">Type of complaint / புகார் வகை (பலவற்றை தேர்ந்தெடு..) </label>
+														<select class="select2" id="complaintType" name="complaintType" style="width: 100%;" data-placeholder="பலவற்றை தேர்ந்தெடு.." multiple required onchange="javascript:load_mapper();">
+															<option></option>
+														</select>
+													</div>
+												</div>
+												<div class="col-12">
+													<div class="block-content" id="userinfo2">
+														<div id="comp_mapping_to_officers" class="row"></div>
+													</div>
+											 	</div>
+											</div>
+	                                  	</div>
+	                                  	<div class="card-footer text-right">
+											<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+	                                	</div>
+                                	</form>
+                                </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 th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var petitionId = 0;
+			var closedComplaintsList=[];
+			var complaintTypeList = "";
+			var officerMasterList = "";
+			
+			 /* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Iterate through the Master Complanint Type and add options to the select element
+	    		    $.each(complaintTypeList, function(index, complaintType) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: complaintType.complaint_typeid, // case-sensitive as per object
+	    	                text: complaintType.complaint_type
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#complaintType').append(option);
+	    	        });
+	    		    // Call Petition function to fetch the data
+	    		    get_petition_data();
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			 
+	        /* Get Petition Type Data */
+	        function get_petition_type_data(){
+	        	var petitionTypeHTML="";
+	    		get_petition_type_list().then(function(petitionTypes) {
+	    		    // Handle the Complaint list
+	    		    petitionTypeList = petitionTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(petitionTypeList, function(index, petitionType) {
+	    	            // Create an option element
+	    	            
+	    	            petitionTypeHTML +=`<div class="radio radiofill ${petitionType.color_class} radio-inline">
+						                            <label class="cursure_poiter">
+						                            <input type="radio" name="petitionType" id="petition_type_${petitionType.petition_type_id}" value="${petitionType.petition_type_id}" disable>
+						                            <i class="helper"></i>${petitionType.name}
+						                        </label>
+						                    </div>`;
+	    	        });
+	    		 // Append the option to the select element
+    	         $('#petition_type').html(petitionTypeHTML);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching petition type list:', error);
+	    		});
+			}
+	        
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+			 
+	     	// Function to get complaint_type and complaint_typeid by complaint_typeid
+	        function getComplaintTypeById(complaintTypeId) {
+	            for (var i = 0; i < complaintTypeList.length; i++) {
+	                if (complaintTypeList[i].complaint_typeid == complaintTypeId) {
+	                    return {
+	                        complaint_type: complaintTypeList[i].complaint_type,
+	                        complaint_typeid: complaintTypeList[i].complaint_typeid
+	                    };
+	                }
+	            }
+	            return null; // Return null if no matching complaint_typeid is found
+	        }
+	     
+			// Save New petition 
+			function updateRequest(){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var inputElementMobileNo = $('#petitionerMobile');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementComplaintType = $('#complaintType');
+				var complaintType = inputElementComplaintType.val();
+				
+				if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#update-request-form')[0]);
+			        formData.append('petitionNo',petitionNo);
+			        formData.append('createdBy',createdBy);
+			        formData.append('petitionId',petitionId);
+			        updateFormData(formData).then(function(response) {
+		    		    // Handle the response
+		    		    if(response==true){
+							// Delete Old data in Petition Mapping table
+		    		    	savePetitionMapData(formData).then(function(response) {
+		    		    		if(response==true){
+		    		    			Swal.fire({
+				        				title: 'Petition updated successfully!',
+				        				customClass: {
+				        			        title: 'swal-title-custom' // Add a custom class for the title
+				        			    },
+				        				//text: "Error",
+				        				icon: 'success',
+				        				showCancelButton: false,
+				        				confirmButtonColor: '#3085d6',
+				        				cancelButtonColor: '#d33',
+				        				confirmButtonText: 'Ok',
+				        				}).then(function(result) {
+				        				if (result.isConfirmed) {
+				        					form_btn_enable();
+				        				}
+				        			});
+		    		    		}
+		    		    		else{
+		    		    			Swal.fire({
+				        				title: 'Petition details have been updated, but mapping the complaint to the officer has failed.',
+				        				customClass: {
+				        			        title: 'swal-title-custom' // Add a custom class for the title
+				        			    },
+				        				//text: "Error",
+				        				icon: 'warning',
+				        				showCancelButton: false,
+				        				confirmButtonColor: '#3085d6',
+				        				cancelButtonColor: '#d33',
+				        				confirmButtonText: 'Ok',
+				        				}).then(function(result) {
+				        				if (result.isConfirmed) {
+				        					form_btn_enable();
+				        				}
+				        			});
+								}
+		    		    	}).catch(function(error) {
+		    	    		    // Handle errors
+		    	    		    console.error('Error fetching offcier master data:', error);
+		    	    		    form_btn_enable();
+		    	    		});
+		    		    	
+						}
+		    		    else{
+		    		    	Swal.fire({
+		        				title: 'Failed to update petition details!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+	    		    	
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					inputElementMobileNo.addClass('is-invalid');
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function updateFormData(formData){
+				var apiUrl = '/gcc/api/com_petition/updatePetition';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function savePetitionMapData(formData){
+				var apiUrl = '/gcc/api/com_petition/mapComplientToOfficer';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint;
+					petitionId = petitionDetails[0].petition_id;
+					var complaintArray = complaint.split(",");
+					$("#complaintType").val(complaintArray);
+					
+					$('#complaintType').trigger('change');
+					
+					closedComplaintsList = complaintArray;
+					var petition_type = "#petition_type_"+petitionDetails[0].petition_type;
+					// Suppose you want to select the radio button with the value 'option2'
+					$(petition_type).prop('checked', true);
+
+					$("#petitionerName").val(petitionDetails[0].petitioner_name);
+					$("#petitionerMobile").val(petitionDetails[0].petitioner_mobile);
+					$("#petitionerAddress").val(petitionDetails[0].petitioner_address);
+					$("#petitionerPincode").val(petitionDetails[0].petitioner_pincode);
+					
+					$("#complaintNature").val(petitionDetails[0].complaint_nature);
+					
+					$("#remarks").val(petitionDetails[0].remarks);
+					
+					//load_mapper(); // Call for Complaint Mapping Form
+					
+					// IDs of the values you want to prevent from being deselected
+					var valuesToPreventDeselection = closedComplaintsList;//['value1', 'value2', 'value3'];
+
+					$('#complaintType').on('select2:unselect', function (e) {
+					    var deselectedValue = e.params.data.id;
+					    
+					    // Check if the deselected value should be prevented from being deselected
+					    if (valuesToPreventDeselection.includes(deselectedValue)) {
+					        // Prevent the deselection
+					        e.preventDefault();
+					    	// Re-select the deselected value to prevent it from being deselected
+					        $(this).val(valuesToPreventDeselection).trigger('change.select2');
+					        // Optionally, you can display a message or perform any other action
+					        console.log('Deselection of value ' + deselectedValue + ' prevented');
+					        alert('Deselection of value ' + deselectedValue + ' prevented');
+					    }
+					});
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition Data ('+petitionNo+'):', error.message);
+				    call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			function get_petition_details() {
+			    
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/com_petition/getPetitionDetails?petitionNo='+petitionNo;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			function load_mapper(){
+			  	var complaintArray = $("#complaintType").val();
+			  	//var complaintArray = complaint.split(',');
+				var compPetitionNo = petitionNo;
+				var compPetitionId = petitionId;
+				
+				var compmapHTML='';
+				for(j = 0; j < complaintArray.length; j++){
+					var complaintTypeDetails = getComplaintTypeById(complaintArray[j]); // Pass the complaint_typeid
+					var title=(j+1)+') '+ complaintTypeDetails.complaint_type; // Map form title
+					var compID="comp"+j;
+					var complaintTypeId = complaintTypeDetails.complaint_typeid;
+					
+					getMappingByComplaintsID(complaintTypeId);
+					
+					compmapHTML+=`<div class="col-lg-6" id="comp${complaintArray[j]}">
+										
+										<div class="widget">
+					                        <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                            <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+					                        </div>
+					                        <div class="widget-body">
+					                        	<div class="form-group">
+						                        	<label for="dept${complaintArray[j]}">Select Department Type</label>
+													<select name="dept[]" id="dept${complaintArray[j]}" class="form-control" onchange="javascript:calloffice(this.value,${complaintArray[j]})">
+														<option value="0">Select Department</option>
+														<option value="1">GCC Department</option>
+														<option value="2">External Department</option>
+												    </select>
+												</div>
+												<div id="officedata${complaintArray[j]}"></div>
+												<div id="officers${complaintArray[j]}"></div>
+					                        </div>
+					                    </div>
+									
+								  </div>`;
+						
+				}
+				$('#comp_mapping_to_officers').html(compmapHTML);
+				
+			  }
+			
+		</script>
+		
+		<script>
+		// For Complient Map Select HTML 
+		function calloffice(val,id){
+			if(val==1){ // Intenal
+				var officeSelectHTML = `<div class="mb-4">
+                							<label for="office${id}">Select Office</label>
+                							<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})">
+								                <option value="0">Select Office</option>
+								                <option value="1">HQ</option>
+								                <option value="2">Zonal Office</option>
+						                	</select>
+					                	</div>`;
+				$("#officedata"+id).html(officeSelectHTML);
+			}
+			else if(val==2){ // External
+				$("#officers"+id).html('');
+				var ExSelectHTML = getselect(id,"ExSelect");
+				var departmentSelectHTML = `<div class="mb-4">
+												<label for="dept3">Select Department</label>
+												${ExSelectHTML}
+										 	</div>`;
+				$("#officedata"+id).html(departmentSelectHTML);
+			}
+			else{
+				$("#officedata"+id).html('');
+				$("#officers"+id).html('');
+			}
+			$("#officers"+id).html('');
+		}
+		
+		function callofficers(val,id){
+			
+			if(val==1){
+				// HQ
+				var HQSelectHTML = getselect(id,"HQSelect");
+			 	$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`);
+			}
+			else if(val==2){
+				// Zone Office
+				var ZoneSelectHTML = getselect(id,"ZoneSelect");
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`);
+			}
+			else{
+				$("#officers"+id).html('');
+			}
+			
+		}
+		
+		function getselect(comid,type){
+	  	  var HQSelect = '';
+	  	  var ZoneSelect = '';
+	  	  var ExSelect = '';
+	  
+	  	  for (var i = 0; i < officerMasterList.length; i++) {
+	  		  if(officerMasterList[i].zone_id=="HQ"){
+	  			  HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  		  else if(officerMasterList[i].zone_id=="99"){
+	  			  ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  		  else{
+	  			  ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  	  }
+	  	  
+	  	  if(type=="HQSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>`;
+	  	  }
+	  	  if(type=="ZoneSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>`;
+	  	  }
+	  	  if(type=="ExSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>`;
+	  	  }
+	  	  return '';
+		}
+		
+		function form_btn_enable(){
+			$("#resetFormBtn").prop("disabled", false);
+			$("#requestSubmitBtn").prop("disabled", false);
+			$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+		}
+		
+		function form_btn_disable(){
+			$("#resetFormBtn").prop("disabled", true);
+			$("#requestSubmitBtn").prop("disabled", true);
+			// Show the loading icon on the button
+			$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+		}
+		
+		function getMappingByComplaintsID(complaintTypeId){
+				
+				$.ajax({
+				    type: "GET",
+				    url: '/gcc/api/com_petition/getComplaintMappingDetails',
+				    data: {
+				        'petitionId': petitionId,
+						'petitionNo': petitionNo,
+						'complaintTypeId': complaintTypeId
+				    },
+					dataType: 'json',
+				}).done(function(response) {
+					
+					//console.log(response);
+					
+					if(response.length>0){
+						var comid = response[0]["complaint_typeid"];
+						var offid = response[0]["off_id"];
+						var mapid = response[0]["mapid"];
+						loadSelectforUpdate(comid,offid,comid);
+					}
+					
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+						
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+					    
+				});
+		}
+		
+		function loadSelectforUpdate(comid,offid,id){
+			var type ="NULL";
+	  	  	var HQSelect = '';
+	  	  	var ZoneSelect = '';
+	  	  	var ExSelect = '';
+	  
+			for (var i = 0; i < officerMasterList.length; i++) {
+		  		//console.log(officerMasterList[i]);
+				if(officerMasterList[i].zone_id=="HQ"){
+			  
+				  	if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "HQSelect";
+				  		HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+				  	}
+				  	else{
+				  		HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+				  	}
+					  
+				}
+				else if(officerMasterList[i].zone_id=="99"){
+					if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "ExSelect";
+						ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+		  			}
+		  			else{
+		  				ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  			}
+				}
+				else{
+					if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "ZoneSelect";
+						//console.log(type + " === "+ officerMasterList[i].offId +" == "+ offid);
+						ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+				  	}
+				  	else{
+				  		ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+				  	}  
+				}
+			}  
+			
+			//console.log("comid : "+comid +",\noffid : "+offid+",\nid : "+id+",\ntype : "+type);
+			
+			if(type=="HQSelect"){
+				//console.log("I am from HQSelect: \n #officers"+id);
+				$("#officedata"+id).html('<div class="mb-4">' +
+				           '<label for="office$'+id+'">Select Office</label>' +
+				           '<select name="office[]" id="office$'+id+'" class="form-control" onchange="javascript:callofficers(this.value,'+id+')">' +
+				           '<option value="0">Select Office</option>' +
+				           '<option value="1" Selected>HQ</option>' +
+				           '<option value="2">Zonal Office</option>' +
+				           '</select>' +
+				           '</div>');
+			  	 HQSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>`;
+		 		$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${HQSelectHTML}</div>`);
+		 
+			}
+			if(type=="ZoneSelect"){
+				//console.log("I am from ZoneSelect: \n #officers"+id);
+				$("#officedata"+id).html('<div class="mb-4">' +
+				           '<label for="office$'+id+'">Select Office</label>' +
+				           '<select name="office[]" id="office$'+id+'" class="form-control" onchange="javascript:callofficers(this.value,'+id+')">' +
+				           '<option value="0">Select Office</option>' +
+				           '<option value="1">HQ</option>' +
+				           '<option value="2" Selected>Zonal Office</option>' +
+				           '</select>' +
+				           '</div>');
+				  
+				ZoneSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>`;
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${ZoneSelectHTML}</div>`);
+			}
+			if(type=="ExSelect"){
+				//console.log("I am from ExSelect: \n #officers"+id);
+				ExSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>`;
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${ExSelectHTML}</div>`);
+			}
+		 
+		}
+		
+		function call_petition_search_from(errorTXT){
+			var errorHTML = "";
+			if(errorTXT!=""){
+				errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`;
+			}
+			var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();">
+										<div class="card-header">
+						                <h3>Edit / Update Petition Form</h3>
+						                <div class="card-header-right">
+						                    <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+						                </div>
+						            </div>
+						       		<div class="card-body">
+						       			<div class="row">
+											<div class="col-12 text-center">
+												${errorHTML}
+												<div class="form-group">
+						                            <label for="petitionNoSearch">Petition No / மனு எண் </label>
+						                            <input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="COM00000000" maxlength="11" required>
+						                        </div>
+						                        
+											</div>
+											<div class="col-12">
+												<div class="block-content" id="userinfo2">
+													<div id="comp_mapping_to_officers" class="row"></div>
+												</div>
+										 	</div>
+										</div>
+						          	</div>
+						          	<div class="card-footer text-center">
+										<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+						            	<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button>
+						        	</div>
+						    	</form>`;
+			
+			$("#petitionUpdateForm").html(searchFormHTML);
+			$('#petitionNoSearch').mask('COM00000000');
+		}
+		
+		function searchRequest(){
+			var searchValue = $('#petitionNoSearch').val();
+			if (searchValue && searchValue.trim() !== '') {
+				searchValue = encodeBase64(searchValue);
+				window.location.href = "/gcc/com_petition/update-petition?petitionNo="+searchValue;
+			}
+			else{
+				call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+			}
+			return false;
+		}
+		</script>
+		<script>
+		$(document).ready(function() {
+			
+			if(petitionNo!=null && petitionNo!="error"){
+				get_complaint_type_data();
+				get_petition_type_data();
+				get_officer_master_data();
+			}
+			else{
+				if(petitionNo=="error"){
+					call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				}
+				else{
+					call_petition_search_from("");
+				}
+			}
+			
+		});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/com_petition/petition_view.html b/src/main/resources/templates/modules/com_petition/petition_view.html
new file mode 100644
index 0000000..41c32ce
--- /dev/null
+++ b/src/main/resources/templates/modules/com_petition/petition_view.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>View Petition</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">View Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card mb-0" id="petitionViewtable">
+					             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+					                	<h3>Petition Details</h3>
+					                	<div class="card-header-right text-center block-options pt-10" style="padding-right: 20px;">
+									        <a href="javascript:void(0);" onclick="window.print()" class="link"><i class="ik ik-printer"></i> Print</a>
+									    </div>
+					                </div>
+					                <div class="card-body">
+					                	<div class="row">
+											<div class="col-6">
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">நாள் / Date: </th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="cdate_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petition_no_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_name_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_mobile_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Address of petitioner / மனுதாரரின் முகவரி:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_address_value"></td>
+											        </tr>
+											        <tr>
+											          <th colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;">புகாரின் தன்மை / Nature of complaint:<br>
+											          <p class="fw-semibold mb-0" style="font-weight:normal;" id="complaint_nature_value"></p>
+											          </th>
+											        </tr>
+											        <tr>
+											        	<td colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;" id="complaint_with_maping_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+											</div>
+											
+											<div class="col-6">
+												
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											      	<tr>
+											          <th style="padding: 0.45rem 0.45rem;">Petition Status: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_status_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total number of complaints in this petition: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Completed:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_completed_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Pending:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_pending_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+												
+												
+												<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th id="petition_summary_title">Pending Summary</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+									                	<tr style="background-color:#fbffe0;">
+												          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_summary_html"></td>
+												        </tr>
+								                	</tbody>
+								              	</table>
+								              	
+											</div>
+										</div>
+										<div class="row">
+											
+											<div class="col-12">
+												<div class="card-title">List of Complaints in this Petition and Their Status:</div>
+												<div id="listOfComplaintsHTML"></div>
+											</div>
+										</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 th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+        <script th:replace="~{fragments/modules/com_petition/petition_view_script :: script}"></script>
+       	
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/com_petition/petition_view_modal_page.html b/src/main/resources/templates/modules/com_petition/petition_view_modal_page.html
new file mode 100644
index 0000000..ceba147
--- /dev/null
+++ b/src/main/resources/templates/modules/com_petition/petition_view_modal_page.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+        
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card mb-0" id="petitionViewtable">
+					             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+					                	<h3>Petition Details</h3>
+					                	<div class="card-header-right text-center block-options pt-10" style="padding-right: 20px;">
+									        <a href="javascript:void(0);" onclick="window.print()" class="link"><i class="ik ik-printer"></i> Print</a>
+									    </div>
+					                </div>
+					                <div class="card-body">
+					                	<div class="row">
+											<div class="col-6">
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">நாள் / Date: </th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="cdate_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petition_no_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_name_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_mobile_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">மனுதாரரின் முகவரி / Address of petitioner:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_address_value"></td>
+											        </tr>
+											        <tr>
+											          <th colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;">புகாரின் தன்மை / Nature of complaint:<br>
+											          <p class="fw-semibold mb-0" style="font-weight:normal;" id="complaint_nature_value"></p>
+											          </th>
+											        </tr>
+											        <tr>
+											        	<td colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;" id="complaint_with_maping_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+											</div>
+											
+											<div class="col-6">
+												
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											      	<tr>
+											          <th style="padding: 0.45rem 0.45rem;">Petition Status: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_status_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total number of complaints in this petition: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Completed:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_completed_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Pending:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_pending_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+												
+												
+												<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th id="petition_summary_title">Pending Summary</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+									                	<tr style="background-color:#fbffe0;">
+												          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_summary_html"></td>
+												        </tr>
+								                	</tbody>
+								              	</table>
+								              	
+											</div>
+										</div>
+										<div class="row">
+											
+											<div class="col-12">
+												<div class="card-title">List of Complaints in this Petition and Their Status:</div>
+												<div id="listOfComplaintsHTML"></div>
+											</div>
+										</div>
+					                </div>
+					            </div>
+                            </div>
+                            
+                        </div>
+                        
+        <script th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+       	<script th:replace="~{fragments/modules/com_petition/petition_view_script :: script}"></script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/m_petition/complaint_list.html b/src/main/resources/templates/modules/m_petition/complaint_list.html
index d4023cb..0289ffd 100644
--- a/src/main/resources/templates/modules/m_petition/complaint_list.html
+++ b/src/main/resources/templates/modules/m_petition/complaint_list.html
@@ -176,7 +176,7 @@
 	        
 	        /* Get Complaints Data */
 	        function get_complaint_data(){
-	        	var apiUrl = '/gcc/api/m_petition/getComplaintList';
+	        	var apiUrl = '/gcc/api/m_petition/getComplaintList?loginId='+createdBy;
 	    	    // Return a Promise
 	    	    return new Promise(function(resolve, reject) {
 	    	        $.ajax({
@@ -352,7 +352,11 @@
 													                <thead>
 													                  <tr>
 													                    <th>Complaint <i class="fa fa-arrow-right"></i> Status</th>
-													                    <th class="text-right" id="complaint_forward_link"><a href="javascript:void(0);" onclick="return forward_compliant(${complaintDetails[0].mapid}, '${complaintDetails[0].complaint_type}');" class="link" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Click here to forward this complaint to another department officer."><i class="far fa-share-square"></i> Click to forward </a></th>
+													                    <th class="text-right" id="complaint_forward_link">
+													                    <!--
+													                    <a href="javascript:void(0);" onclick="return forward_compliant(${complaintDetails[0].mapid}, '${complaintDetails[0].complaint_type}');" class="link" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Click here to forward this complaint to another department officer."><i class="far fa-share-square"></i> Click to forward </a>
+													                    -->
+													                    </th>
 													                  </tr>
 													                </thead>
 												                	<tbody>
diff --git a/src/main/resources/templates/modules/nulm/appointment.html b/src/main/resources/templates/modules/nulm/appointment.html
new file mode 100644
index 0000000..402290b
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/appointment.html
@@ -0,0 +1,485 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Appointment</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 active" aria-current="page">Appointment</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row align-items-center justify-content-center"
+						style="color: white;background-color:#414f69 ;padding: 10px;">
+						<h3 class="title resizable-content">Appoinment</h3>
+					</div>
+
+
+
+					<!-- Card Section -->
+					<div class="card mt-5 p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
+
+
+						<!-- Add the resizable-content class to the card sections -->
+						<div class="card mb-3 resizable-content">
+
+							<div class="card-body">
+								<div class="row">
+									<div class="col-md-6 d-flex justify-content-between align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69;">Order:</label>
+										<select id="orderNumberDropdown" class="form-control"
+											style="font-size: large; width: 70%;">
+											<option value="">Select Order</option>
+										</select>
+									</div>
+								</div>
+
+								<div class="mt-3" id="orderDetails" style="display: none;">
+									<div class="card-block" style="text-align:center;">
+										<div id="chart" class="row">
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">Total Staff</h5>
+														<p class="card-text" id="total"
+															style="font-size:large; font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">Appointed</h5>
+														<p class="card-text" id="pending"
+															style="font-size: large;font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">Available
+														</h5>
+														<p class="card-text" id="notappointed"
+															style="font-size: large;font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<br>
+								<div class="row" id="groupboxsection" style="display:none">
+									<div class="col-md-6 d-flex justify-content-between align-items-center">
+
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69;">Self Help Group:</label>
+										<select id="grouplist" class="form-control"
+											style="font-size: large; width: 70%;">
+											<option value="">Select Group</option>
+										</select>
+									</div>
+								</div>
+
+								<!-- Appointment Date Section (Initially Hidden) -->
+								<div class="row mt-3" id="appointmentSection" style="display: none;">
+									<div class="col-md-6 d-flex align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Appointment
+											Date:</label>
+										<input type="date" id="appointmentDate" class="form-control"
+											style="font-size: large; width: 70%;">
+									</div>
+								</div>
+
+								<!-- Orders Table Section (Initially Hidden) -->
+								<div class="row mt-3" id="ordersTableSection" style="display: none;">
+									<div class="col-md-12">
+										<table class="table table-bordered">
+											<thead>
+												<tr>
+													<th style="width: 10%;">
+														<input type="checkbox" id="selectAll">
+													</th>
+													<th style="width: 30%;">Name</th>
+													<th style="width: 30%;">Phone Number</th>
+													<th style="width: 30%;">Address</th>
+													<th style="width: 30%;">Education Qualification</th>
+												</tr>
+											</thead>
+											<tbody id="ordersTableBody">
+												<!-- Table rows will be populated here -->
+											</tbody>
+										</table>
+									</div>
+								</div>
+								<div class="row mt-3" id="inchargemobilenosection" style="display: none;">
+									<div class="col-md-6 d-flex align-items-center">
+										<label style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Designation:</label>
+										<select id="designation" class="form-control"
+											style="font-size: large; width: 70%;">
+											<option value="">Select Designation</option>
+											<option>CI</option>
+											<option>Software Developer</option>
+										</select>
+									</div>
+									<div class="col-md-6 d-flex align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Incharge
+											Mobileno:</label>
+										<input type="text" id="inchargemobileno" class="form-control"
+											style="font-size: large; width: 70%;">
+									</div>
+									<div class="col-md-6 d-flex align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Incharge
+											Name:</label>
+										<input type="text" id="inchargeName" class="form-control"
+											style="font-size: large; width: 70%;">
+									</div>
+								</div>
+
+							</div>
+						</div>
+						<div class="d-flex justify-content-center">
+							<button class="btn"
+								style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								id="createorder">
+								Create Appointment
+							</button>
+						</div>
+
+					</div>
+
+
+
+
+				</div>
+
+
+
+			</div>
+
+
+		
+		<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+	</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+	<script th:inline="javascript">
+
+
+
+		$(document).ready(function () {
+			// Function to load scheme group names
+			function loadSchemeGroupNames() {
+				$.ajax({
+					url: '/gcc/api/nulm/getAllSchemeGroupNames', // Endpoint URL
+					method: 'GET',
+					dataType: 'json',
+					success: function (data) {
+						// Get the dropdown element
+						var $dropdown = $('#schemeGroupDropdown');
+						// Clear existing options
+						$dropdown.empty();
+						// Add the default option
+						$dropdown.append('<option value="">Select Scheme Group</option>');
+						// Populate the dropdown with scheme group names
+						$.each(data, function (index, value) {
+							$dropdown.append('<option value="' + value + '">' + value + '</option>');
+						});
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching scheme group names:', error);
+					}
+				});
+			}
+
+			// Load the scheme group names when the document is ready
+			loadSchemeGroupNames();
+		});
+
+$(document).ready(function () {
+    // Function to load scheme group names
+    function loadNotappointed() {
+        $.ajax({
+            url: '/gcc/api/nulm/getAllSchemeGroupNames', // Endpoint URL
+            method: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                var $dropdown = $('#grouplist');
+                $dropdown.empty();
+                $dropdown.append('<option value="">Select Group</option>');
+                $.each(data, function (index, group) {
+                    $dropdown.append('<option value="' + group.group_id + '">' + group.group_name + '</option>');
+                });
+            },
+            error: function (xhr, status, error) {
+                console.error('Error fetching scheme group names:', error);
+            }
+        });
+    }
+
+    // Load the scheme group names when the document is ready
+    loadNotappointed();
+
+    $('#grouplist').change(function () {
+        var groupId = $(this).val();
+
+        if (groupId) {
+            $.ajax({
+                url: '/gcc/api/nulm/enrollmentCountsbygroupId',
+                method: 'GET',
+                data: { groupId: groupId },
+                dataType: 'json',
+                success: function (data) {
+                    console.log("data==", data);
+                    function getTodayDate() {
+				return new Date().toISOString().split('T')[0];
+			}
+
+                    var $ordersTableBody = $('#ordersTableBody');
+                    $ordersTableBody.empty();
+                    $('#appointmentSection').show();
+					$('#inchargemobilenosection').show();
+					$('#appointmentDate').val(getTodayDate());
+
+                    if (data.length > 0) {
+                        $.each(data, function (index, enrollment) {
+                            var row = '<tr>' +
+                                '<td><input type="checkbox" class="form-check-input order-checkbox" name="selectRow" value="' + enrollment.enrollment_id + '" style="margin-left:0px"></td>' +
+                                '<td>' + enrollment.name + '</td>' +
+                                '<td>' + enrollment.phone_number + '</td>' +
+                                '<td>' + enrollment.address + '</td>' +
+                                '<td>' + enrollment.education_qualification + '</td>' +
+                                '</tr>';
+                            $ordersTableBody.append(row);
+                        });
+                        $('#ordersTableSection').show();
+                    } else {
+                        $ordersTableBody.append('<tr><td colspan="5">No enrollments found.</td></tr>');
+                        $('#ordersTableSection').show();
+                    }
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error fetching enrollment counts:', error);
+                }
+            });
+        } else {
+            $('#ordersTableSection').hide(); // Hide the table if no group is selected
+            $('#appointmentSection').hide();
+			$('#inchargemobilenosection').hide();
+        }
+        
+        			$('#selectAll').click(function () {
+				var isChecked = $(this).is(':checked');
+				$('.order-checkbox').prop('checked', isChecked);
+			});
+
+			// Optionally, if you want to uncheck the "Select All" checkbox when any individual checkbox is unchecked
+			$(document).on('click', '.order-checkbox', function () {
+				if (!$(this).is(':checked')) {
+					$('#selectAll').prop('checked', false);
+				} else if ($('.order-checkbox:checked').length === $('.order-checkbox').length) {
+					$('#selectAll').prop('checked', true);
+				}
+			});
+    });
+});
+
+
+
+$(document).ready(function() {
+    // Function to load order details
+    function loadOrderDetails() {
+        $.ajax({
+            url: '/gcc/api/nulm/getAllOrderDetails', // Updated Endpoint URL
+            method: 'GET',
+            dataType: 'json',
+            success: function(data) {
+                var $dropdown = $('#orderNumberDropdown');
+                $dropdown.empty();
+                $dropdown.append('<option value="">Select Order</option>');
+                $.each(data, function(index, order) {
+                    $dropdown.append('<option value="' + order.order_id + '">' + order.order_number + '</option>');
+                });
+            },
+            error: function(xhr, status, error) {
+                console.error('Error fetching order details:', error);
+            }
+        });
+    }
+
+    // Load order details when the document is ready
+    loadOrderDetails();
+
+    // Handle order number selection
+    $('#orderNumberDropdown').change(function() {
+        var orderId = $(this).val();
+        var $orderDetails = $('#orderDetails');
+        var $groupBoxSection = $('#groupboxsection');
+
+        if (orderId) {
+            // Display the order details and group section
+            $orderDetails.show();
+            $groupBoxSection.show();
+
+            // Fetch the enrollment counts based on the selected order ID
+            $.ajax({
+                url: '/gcc/api/nulm/enrollmentCountsbyorderId',
+                method: 'GET',
+                data: { orderId: orderId },
+                dataType: 'json',
+                success: function(counts) {
+                    // Update the values in the cards
+                    $('#total').text(counts.total_count || 0);
+                    $('#pending').text(counts.total_yes || 0);
+                    $('#notappointed').text(counts.output_value || 0);
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error fetching enrollment counts:', error);
+                }
+            });
+        } else {
+            // Hide the order details and group section if no order is selected
+            $orderDetails.hide();
+            $groupBoxSection.hide();
+        }
+    });
+});
+
+		$(document).ready(function () {
+			// Function to load scheme group names
+			function loadStaffName() {
+				$.ajax({
+					url: '/gcc/api/nulm/getAllStaffNames', // Endpoint URL
+					method: 'GET',
+					dataType: 'json',
+					success: function (data) {
+						// Get the dropdown element
+						var $dropdown = $('#staffNameDropdown');
+						// Clear existing options
+						$dropdown.empty();
+						// Add the default option
+						$dropdown.append('<option value="">Select Staff Name</option>');
+						// Populate the dropdown with scheme group names
+						$.each(data, function (index, value) {
+							$dropdown.append('<option value="' + value + '">' + value + '</option>');
+						});
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching scheme group names:', error);
+					}
+				});
+			}
+
+			// Load the scheme group names when the document is ready
+			loadStaffName();
+		});
+$(document).ready(function () {
+    $('#createorder').click(function () {
+        var totalstaff = parseInt($('#total').text(), 10); // Convert total staff to an integer
+        var selectedEnrollments = [];
+        var orderId = parseInt($('#orderNumberDropdown').val(), 10); // Ensure orderId is an integer
+        var inchargePhoneno = $('#inchargemobileno').val(); // Get the in-charge mobile number
+        var designation = $('#designation').val(); // Get the designation
+        
+        $('.order-checkbox:checked').each(function () {
+            selectedEnrollments.push(parseInt($(this).val(), 10)); // Ensure enrollmentIds are integers
+        });
+
+        if (selectedEnrollments.length > totalstaff) {
+            // Show SweetAlert if the number of selected enrollments exceeds the total staff count
+            Swal.fire({
+                icon: 'warning',
+                title: 'Limit Exceeded',
+                text: `For this order, only ${totalstaff} staff members are allowed.`
+            });
+        } else {
+            // Proceed with the order creation logic
+            $.ajax({
+                url: '/gcc/api/nulm/assignAppointment',
+                method: 'POST',
+                contentType: 'application/json', // Set the content type to JSON
+                data: JSON.stringify({
+                    enrollmentIds: selectedEnrollments,
+                    orderId: orderId,
+                    incharge_phoneno: inchargePhoneno, // Include the in-charge mobile number
+                    designation: designation // Include the designation
+                }), // Convert the data to JSON string
+                success: function(response) {
+                    // Show SweetAlert on success
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Order Created',
+                        text: 'The order has been successfully created.',
+                        confirmButtonText: 'OK'
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            // Reload the page after SweetAlert is confirmed
+                            location.reload();
+                        }
+                    });
+                },
+                error: function(xhr, status, error) {
+                    // Show error message using SweetAlert
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'An error occurred while creating the order. Please try again later.'
+                    });
+                    console.error('Error creating order:', error);
+                }
+            });
+        }
+    });
+});
+</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/attendance-report.html b/src/main/resources/templates/modules/nulm/attendance-report.html
new file mode 100644
index 0000000..cf3e56a
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/attendance-report.html
@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+
+<body>
+	<div class="wrapper">
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+			<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Attendance Report</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 active" aria-current="page">Attendance Report</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+
+					<!-- Filters Section -->
+					<div class="row">
+						
+						<div class="col-sm-3">
+							<label for="zone">Zone</label>
+							<select id="zone" class="form-control">
+								<option value="">Select</option>
+								<option value="1">Zone 01</option>
+								<option value="2">Zone 02</option>
+								<option value="3">Zone 03</option>
+								<option value="4">Zone 04</option>
+								<option value="5">Zone 05</option>
+								<option value="6">Zone 06</option>
+								<option value="7">Zone 07</option>
+								<option value="8">Zone 08</option>
+								<option value="9">Zone 09</option>
+								<option value="10">Zone 10</option>
+								<option value="11">Zone 11</option>
+								<option value="12">Zone 12</option>
+								<option value="13">Zone 13</option>
+								<option value="14">Zone 14</option>
+								<option value="15">Zone 15</option>
+							</select>
+						</div>
+						
+						<!-- Division -->
+						<div class="col-md-3 form-group">
+							<label for="division">Division</label>
+							<select class="form-control" id="division" name="division" required>
+								<option value="">Select Division</option>
+								<option th:each="division : ${divisionList}" th:value="${division.division}" th:text="${division.division}"
+									th:selected="${division.division == selectedDivision}">
+								</option>
+							</select>	
+						</div>
+						
+						<!-- Year -->
+						<!--<div class="col-md-3 form-group">
+							<label for="year">Year</label>
+							<select class="form-control" id="year" name="year" required>
+								<option value="">Select Year</option>
+								<option th:each="year : ${yearList}" th:value="${year.year}" th:text="${year.year}"
+									th:selected="${year.year == selectedYear}">
+								</option>
+							</select>
+						</div>
+						
+						 Month 
+						<div class="col-md-3 form-group">
+							<label for="month">Month</label>
+							<select id="month" class="form-control" name="month" required>
+								<option value="">Select Month</option>
+								<option th:each="month : ${monthList}" th:value="${month.month}" th:text="${month.month}"
+									th:selected="${month.month == selectedMonth}">
+								</option>
+							</select>
+						</div>-->
+
+						<div class="col-sm-3">
+							<label for="fromdate">From Date</label>
+							<input type ='date' id = 'fromdate' name= 'fromdate' class="form-control">
+						</div>
+						
+						<div class="col-sm-3">
+							<label for="todate">To Date</label>
+							<input type ='date' id = 'todate' name= 'todate' class="form-control">
+						</div>
+
+						<div class="col-sm-3">
+							<label for="selfhelp">Self Help Group </label>
+							<select id="selfhelp" class="form-control">
+								<option value="">Select</option>
+								<!-- Group names will be populated here -->
+							</select>
+						</div>
+
+
+
+						<div class="col-sm-3">
+
+							<button class="btn btn-primary mt-4" onclick="fetchAttendanceReport()">Get Attendance Details</button>
+						</div>
+					</div>
+
+					<!-- Salary Report Table -->
+					<div class="card-block mt-3">
+						<table id="attendancereporttable" class="table table-striped table-bordered">
+							<thead class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Date</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Attendance Status</th>
+									<th>Incharge Name</th>
+									<th>Incharge Mobile Number</th>
+									<th>Incharge Designation</th>
+									<th>Zone</th>
+									<th>Division</th>
+									<th>Department</th>
+									<th>Self Help Group</th>									
+								</tr>
+							</thead>
+							<tbody>
+								<tr th:each="attendance, i : ${attendanceReport}">
+									<td th:text="${i.count}">1</td>
+									<td th:text="${attendance.attendance_date}"></td>
+									<td th:text="${attendance.emp_id}"></td>
+									<td th:text="${attendance.name}"></td>
+									<td th:text="${attendance.attendance_status}"></td>
+									<td th:text="${attendance.incharge_name}"></td>
+									<td th:text="${attendance.incharge_phoneno}"></td>
+									<td th:text="${attendance.incharge_designation}"></td>
+									<td th:text="${attendance.zone}"></td>
+									<td th:text="${attendance.division}"></td>
+									<td th:text="${attendance.department}"></td>
+									<td th:text="${attendance.group_name}"></td>
+								</tr>
+							</tbody>
+							<tfoot class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Date</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Attendance Status</th>
+									<th>Incharge Name</th>
+									<th>Incharge Mobile Number</th>
+									<th>Incharge Designation</th>
+									<th>Zone</th>
+									<th>Division</th>
+									<th>Department</th>
+									<th>Self Help Group</th>
+								</tr>
+							</tfoot>
+						</table>
+					</div>
+
+				</div>
+			</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<div th:replace="~{fragments/modules/base/script :: script}"></div>
+
+	<script th:inline="javascript">
+		
+		/*function loadYear(selectedYear) {
+				$.ajax({
+					url: '/gcc/api/nulm/getYear',
+					type: 'GET',
+					success: function (response) {
+						const yearDropdown = $('#year');
+						yearDropdown.empty(); // Clear existing options
+						yearDropdown.append('<option value="">Select Year</option>');
+
+						response.forEach(function (year) {
+							const yearName = year.year; // Correct the attribute name if necessary
+							const isSelected = yearName === selectedYear ? 'selected' : '';
+							yearDropdown.append(new Option(yearName, yearName, false, isSelected));
+						});
+
+						// If no department selected, show "Select Zone"
+						if (!selectedYear) {
+							yearDropdown.val('');
+						}
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching departments:', error);
+					}
+				});
+			}*/
+
+
+			//const selectedYear = /*[[${selectedYear}]]*/ ''; // Get this from Thymeleaf or other server-side context
+			//loadYear(selectedYear);
+
+			/*function loadMonth(selectedMonth) {
+				const year = document.getElementById('year').value; // Get the selected year
+				if (!year) {
+					$('#month').empty().append('<option value="">Select Month</option>'); // Clear month dropdown if no year selected
+					return; // Exit if no year is selected
+				}
+
+				$.ajax({
+					url: `/gcc/api/nulm/getMonth?year=${year}`,
+					type: 'GET',
+					success: function (response) {
+						const monthDropdown = $('#month');
+						monthDropdown.empty(); // Clear existing options
+						monthDropdown.append('<option value="">Select Month</option>');
+
+						response.forEach(function (month) {
+							const monthName = month.month;
+							monthDropdown.append(new Option(monthName, monthName));
+						});
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching months:', error);
+					}
+				});
+			}
+
+			// Load months when the year changes
+			document.getElementById('year').addEventListener('change', function () {
+				loadMonth(); // Call loadMonth when the year is selected
+			});*/
+			
+			function loadDivision(selectedDivision) {
+				const zone=document.getElementById('zone').value;
+				console.log(zone);
+					$.ajax({
+						url: '/gcc/api/nulm/getDivisionList',
+						type: 'GET',
+						data: {
+							zone: zone
+						},
+						success: function (response) {
+							const divisionDropdown = $('#division');
+							divisionDropdown.empty(); // Clear existing options
+							divisionDropdown.append('<option value="">Select Division</option>');
+
+							response.forEach(function (division) {
+								const divisionName = division.division; // Correct the attribute name if necessary
+								const isSelected = divisionName === selectedDivision ? 'selected' : '';
+								divisionDropdown.append(new Option(divisionName, divisionName, false, isSelected));
+							});
+
+							// If no department selected, show "Select Zone"
+							if (!selectedDivision) {
+								divisionDropdown.val('');
+							}
+						},
+						error: function (xhr, status, error) {
+							console.error('Error fetching zone:', error);
+						}
+					});
+				}
+				
+				// Load division when zone selected
+			document.getElementById('zone').addEventListener('change', function () {
+			loadDivision(); // Call loadDivision when the zone is selected
+			});
+
+
+
+		function fetchAttendanceReport() {
+			const zone=document.getElementById('zone').value;
+			const division=document.getElementById('division').value;
+			//const month = document.getElementById('month').value;
+			//const year = document.getElementById('year').value;
+			const groupName=document.getElementById('selfhelp').value;
+			const fromdate=document.getElementById('fromdate').value;
+			const todate=document.getElementById('todate').value;
+			console.log(fromdate);
+			console.log(todate);			
+			
+
+			if (fromdate && todate) {
+				//window.location.href = `/gcc/nulm/attendance-report?month=${month}&year=${year}&groupName=${groupName}&zone=${zone}
+				//&division=${division}`;
+				window.location.href = `/gcc/nulm/attendance-report?groupName=${groupName}&zone=${zone}&division=${division}&fromdate=${fromdate}
+				&todate=${todate}`;
+			} else {
+				alert("Please select both From date and To date.");
+			}
+		}
+		$(document).ready(function () {
+
+			function clearUrlParams() {
+				const currentUrl = window.location.href;
+				const urlWithoutParams = currentUrl.split('?')[0]; // Remove the query parameters
+				window.history.replaceState({}, document.title, urlWithoutParams); // Replace the current URL without params
+			}
+
+			// Call this on page load to reset the URL
+			clearUrlParams();
+
+			// Initialize DataTable
+			var table = $('#attendancereporttable').DataTable({
+				dom: 'Bftip',
+				columnDefs: [
+					{targets: 'no-sort', orderable: false}
+				],
+				lengthMenu: [
+					[50, 100, 200, 500, -1],
+					['50 rows', '100 rows', '200 rows', 'Show all']
+				],
+				scrollY: '50vh',
+				fixedColumns: {
+					left: 1,
+					right: 1
+				},
+				buttons: [
+					{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+					{
+						title: 'Data export',
+						extend: 'copyHtml5',
+						text: 'Copy',
+						className: 'btn btn-secondary',
+						id: 'copyBtn'
+					},
+					{
+						extend: 'pdfHtml5',
+						text: 'PDF',
+						className: 'btn btn-secondary',
+						id: 'pdfBtn',
+						exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+                },
+                orientation: 'landscape', // Change to landscape for more horizontal space
+						pageSize: 'A4', // You can change to A4 or A3 depending on your needs
+						customize: function (doc) {
+							// Custom column widths for better fit
+							doc.content[1].table.widths = ['4%', '8%', '6%', '8%', '6%', '8%', '8%', '8%', '4%', '8%', '8%', '8%'];
+							
+							// Optional: Adjust font size if needed
+							doc.styles.tableBodyEven.alignment = 'center';
+							doc.styles.tableBodyOdd.alignment = 'center';
+						}
+					},
+					{
+						extend: 'excelHtml5',
+						text: 'EXCEL',
+						className: 'btn btn-secondary',
+						id: 'excelBtn'
+					},
+					{
+						extend: 'csvHtml5',
+						text: 'CSV',
+						className: 'btn btn-secondary',
+						id: 'csvBtn'
+					}
+				],
+				fixedHeader: true,
+				autoWidth: true,
+				responsive: true,
+				searching: true,
+				select: false,
+				processing: false
+			});
+
+
+		});
+		$(document).ready(function () {
+			$.ajax({
+				url: '/gcc/api/nulm/selfHelpGroups', 
+				type: 'GET',
+				success: function (data) {
+					// Clear existing options (if any)
+					$('#selfhelp').empty().append('<option value="">Select</option>');
+
+					// Check if data is an array and iterate through it
+					if (Array.isArray(data)) {
+						let options = '';
+						data.forEach(function (group) {
+							// Access the correct properties
+							options += `<option value="${group.groupName}">${group.groupName}</option>`;
+						});
+						$('#selfhelp').append(options);
+					} else {
+						console.error("Data is not an array:", data);
+					}
+				},
+				error: function (xhr, status, error) {
+					console.error("Error fetching self-help groups:", error);
+				}
+			});
+		});
+
+
+
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/create-order.html b/src/main/resources/templates/modules/nulm/create-order.html
new file mode 100644
index 0000000..78e068e
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/create-order.html
@@ -0,0 +1,425 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}">
+	<style>
+		label {
+			font-weight: 700;
+			color: #2d5263;
+		}
+
+		
+		.custom-file-upload {
+			position: relative;
+			display: flex;
+			align-items: center;
+			border: 1px solid #d9dde4;
+			border-radius: 5px;
+			padding: 5px;
+			background-color: #f9fafb;
+			cursor: pointer;
+			margin-top: 5px;
+		}
+
+		.custom-file-upload input[type="file"] {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			cursor: pointer;
+		}
+
+		.custom-file-upload label {
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			align-items: center;
+		}
+
+		.upload-text {
+			color: #a6adb5;
+
+			font-weight: 700;
+		}
+
+		.upload-icon i {
+			color: #a6adb5;
+			font-size: 18px;
+		}
+
+		.file-name {
+			margin-left: 10px;
+			color: #414f69;
+			font-size: 14px;
+
+		}
+	</style>
+</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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Create Order</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 active" aria-current="page">Create Order</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row align-items-center justify-content-center"
+						style="color: white;background-color:#414f69 ;padding: 10px;">
+						<h3 class="title resizable-content">Create Order</h3>
+					</div>
+					
+
+						<div class="mt-1">
+
+						</div>
+						<!-- Card Section -->
+						<div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
+
+
+							<!-- Add the resizable-content class to the card sections -->
+							<div class="card mb-3 resizable-content">
+								<!--<div class="card-header text-white" style="background-color: #414f69;font-size: large;font-weight: 700;">Order Details
+								</div>-->
+								<div class="card-body">
+									<div class="row">
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Number:</label>
+											<input type="text" class="form-control" id="orderNumber" value=""
+												placeholder="Enter Order Number" style="font-size: large;">
+										</div>
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Date:</label>
+											<input type="date" class="form-control" id="orderDate" value="" style="font-size: large;">
+										</div>
+										<!--<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Given By:</label>
+											<select type="email" class="form-control" id="orderGeneratedBy" value=""
+												 style="font-size: large;">
+												<option value="select">select</option>
+												<option value="council">Council</option>
+												<option value="commissioner">Commissioner</option>
+												</select>
+										</div>-->
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Given By:</label>
+											<input type="text" class="form-control" id="orderGeneratedBy" value=""
+												placeholder="Enter Order Given By" style="font-size: large;">
+										</div>									
+										
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Description:</label>
+											<textarea class="form-control" id="details" rows="1"
+												placeholder="description..." maxlength="400" style="font-size: large;"></textarea >
+										</div>
+										<div class="col-md-6">
+												<label style="font-size: large;font-weight: 700;">Number Of Staff Required:</label>
+												<input type="number" class="form-control" value=""
+														placeholder="Enter Staff Required..." style="font-size: large;">
+										</div>
+										<div class="col-md-6">
+												<label style="font-size: large;font-weight: 700;">Validity Date:</label>
+												<input type="date" class="form-control" value=""
+														placeholder="Enter Validity date" style="font-size: large;">
+										</div>
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Document:</label>
+											<div class="custom-file-upload">
+												<input type="file" id="file-upload" class="form-control"
+													onchange="displayFileName()" style="font-size: large;">
+												<label for="file-upload" id="file-label">
+													<span class="upload-text" id="upload-text">Upload Order
+														Document</span>
+													<span class="upload-icon">
+														<i class="fas fa-file-upload"></i>
+													</span>
+												</label>
+												<span id="file-name" class="file-name"></span>
+											</div>
+										</div>
+										
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Enter Category:</label>
+											<input type="text" class="form-control" id="category" value=""
+												placeholder="Enter Category Name" style="font-size: large;">
+										</div>
+
+
+									</div>
+								</div>
+								<div class="d-flex justify-content-center">
+								    <button class="btn"
+								        style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								        id="createorder">
+								      Submit
+								    </button>
+								    <button class="btn"
+								        style="background-color: #6c757d; color: white; width: 200px;padding: 10px;margin-bottom: 10px;margin-left: 10px;"
+								        id="viewdetails">
+								        View Details
+								    </button>
+								</div>
+
+								<div id="detailsContainer" style="margin-top: 20px;"></div>
+
+							</div>
+							
+
+
+
+						</div>
+
+
+
+
+					
+
+				</div>
+
+
+			</div>
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+<script th:inline="javascript">
+
+    function displayFileName() {
+        const fileInput = document.getElementById('file-upload');
+        const fileNameSpan = document.getElementById('file-name');
+
+        // Validate file
+        const allowedExtensions = ['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg'];
+        const maxSize = 20 * 1024 * 1024; // 20 MB
+        const file = fileInput.files[0];
+        
+        if (file) {
+            const fileName = file.name;
+            const fileSize = file.size;
+            const fileExtension = fileName.split('.').pop().toLowerCase();
+
+            // Check file type
+            if (!allowedExtensions.includes(fileExtension)) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Error',
+                    text: 'Unsupported file type! Please upload a PDF, Word, or image file.'
+                });
+                fileInput.value = ''; // Reset the file input
+                fileNameSpan.textContent = '';
+                return;
+            }
+
+            // Check file size
+            if (fileSize > maxSize) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Error',
+                    text: 'File size exceeds 20MB! Please upload a smaller file.'
+                });
+                fileInput.value = ''; // Reset the file input
+                fileNameSpan.textContent = '';
+                return;
+            }
+
+            fileNameSpan.textContent = fileName; // Show the file name if valid
+        } else {
+            fileNameSpan.textContent = ''; // Reset if no file
+        }
+    }
+
+    $(document).ready(function() {
+        $('#createorder').click(function(e) {
+            e.preventDefault();
+
+            // Get the file input
+            const fileInput = document.getElementById('file-upload');
+            const file = fileInput.files[0];
+
+            // Validate file before proceeding
+            if (file) {
+                const allowedExtensions = ['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg'];
+                const maxSize = 20 * 1024 * 1024; // 20 MB
+                const fileName = file.name;
+                const fileSize = file.size;
+                const fileExtension = fileName.split('.').pop().toLowerCase();
+
+                // Check file type
+                if (!allowedExtensions.includes(fileExtension)) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'Unsupported file type! Please upload a PDF, Word, or image file.'
+                    });
+                    return;
+                }
+
+                // Check file size
+                if (fileSize > maxSize) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'File size exceeds 20MB! Please upload a smaller file.'
+                    });
+                    return;
+                }
+            }
+
+            // Create FormData object
+            const formData = new FormData();
+
+            // Append form data
+            formData.append('order_number', document.getElementById('orderNumber').value);
+            formData.append('order_date', document.getElementById('orderDate').value);
+            formData.append('order_generated_by', document.getElementById('orderGeneratedBy').value);
+            formData.append('order_description', document.getElementById('details').value);
+            formData.append('no_of_staffs', document.querySelector('input[placeholder="Enter Staff Required..."]').value);
+            formData.append('validity_date', document.querySelector('input[placeholder="Enter Validity date"]').value);
+            formData.append('category', document.getElementById('category').value);
+
+            // Append file if selected and valid
+            if (file) {
+                formData.append('ordercopyurl', file);
+            }
+
+            // Send AJAX request
+            $.ajax({
+                url: '/gcc/api/nulm/saveOrder',
+                type: 'POST',
+                processData: false,  // Required for FormData
+                contentType: false,  // Required for FormData
+                data: formData,
+                success: function(response) {
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Success',
+                        text: response,
+                    }).then(function() {
+                        location.reload(); // Reload the page after the user clicks 'OK'
+                    });
+                },
+                error: function(xhr, status, error) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: xhr.responseText || 'An error occurred while saving the order.'
+                    });
+                }
+            });
+        });
+    });
+
+
+    $('#viewdetails').click(function(e) {
+        e.preventDefault();
+
+        $.ajax({
+            url: '/gcc/api/nulm/getAllOrders', // Assuming this is your endpoint for fetching all orders
+            type: 'GET',
+            success: function(data) {
+                displayTable(data);
+            },
+            error: function(xhr, status, error) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Error',
+                    text: 'Could not retrieve order details'
+                });
+            }
+        });
+    });
+
+	function displayTable(data) {
+	    console.log(data);  // Inspect the structure of the API response
+
+	    let tableHtml = `
+	         <table class="table table-bordered">
+            <thead>
+                <tr>
+                    <th>Order Number</th>
+                    <th>Order Date</th>
+                    <th>Order Given By</th>
+                    <th>Order Description</th>
+                    <th>Number Of Staffs</th>
+                    <th>Validity Date</th>
+                    <th>Appointed</th>
+                    <th>Available</th>
+                    <th>Category</th>
+                </tr>
+            </thead>
+            <tbody>
+	    `;
+
+	    data.forEach(item => {
+			
+			 const imageUrl = `/gcc/api/nulm/getOrderDocument/${item.order_copy_url}`;
+	        tableHtml += `
+	            <tr>
+	                <td>${item.order_number || ''}</td>
+	                <td>${item.order_date || ''}</td>
+	                <td>${item.order_generated_by || ''}</td>
+	                <td>${item.order_description || ''}</td>
+	                <td>${item.no_of_staffs || ''}</td>
+	                <td>${item.validity_date || ''}</td>
+	                <td>${item.appointed_yes_count || 0}</td>
+	                <td>${item.output_value || 0}</td>
+	                <td>${item.category || 0}</td>
+	              
+	            </tr>
+	        `;
+	    });
+
+	    tableHtml += `
+	            </tbody>
+	        </table>
+	    `;
+
+	    document.getElementById('detailsContainer').innerHTML = tableHtml;
+	}
+
+
+</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/dropout.html b/src/main/resources/templates/modules/nulm/dropout.html
new file mode 100644
index 0000000..24cd571
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/dropout.html
@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>DropOut</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 active" aria-current="page">DropOut</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row align-items-center justify-content-center"
+						style="color: white;background-color:#414f69 ;padding: 10px;">
+						<h3 class="title resizable-content">DropOut</h3>
+					</div>
+
+
+
+					<!-- Card Section -->
+					<div class="card mt-5 p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
+
+
+						<!-- Add the resizable-content class to the card sections -->
+						<div class="card mb-3 resizable-content">
+
+							<div class="card-body">
+								<div class="row">
+									<div class="col-md-6 d-flex justify-content-between align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69;">Order:</label>
+										<select id="orderNumberDropdown" class="form-control"
+											style="font-size: large; width: 70%;">
+											<option value="">Select Order</option>
+										</select>
+									</div>
+								</div>
+
+								<div class="mt-3" id="orderDetails" style="display: none;">
+									<div class="card-block" style="text-align:center;">
+										<div id="chart" class="row">
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">Total Staff</h5>
+														<p class="card-text" id="total"
+															style="font-size:large; font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">Appointed</h5>
+														<p class="card-text" id="pending"
+															style="font-size: large;font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">DropOut
+														</h5>
+														<p class="card-text" id="notappointed"
+															style="font-size: large;font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<br>
+								<div class="row" id="groupboxsection" style="display:none">
+									<div class="col-md-6 d-flex justify-content-between align-items-center">
+
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69;">Self Help Group:</label>
+										<select id="grouplist" class="form-control"
+											style="font-size: large; width: 70%;">
+											<option value="">Select Group</option>
+										</select>
+									</div>
+								</div>
+
+								<!-- Appointment Date Section (Initially Hidden) -->
+								<div class="row mt-3" id="appointmentSection" style="display: none;">
+									<div class="col-md-6 d-flex align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">DropOut
+											Date:</label>
+										<input type="date" id="appointmentDate" class="form-control"
+											style="font-size: large; width: 70%;">
+									</div>
+								</div>
+
+								<!-- Orders Table Section (Initially Hidden) -->
+								<div class="row mt-3" id="ordersTableSection" style="display: none;">
+									<div class="col-md-12">
+										<table class="table table-bordered">
+											<thead>
+												<tr>
+													<th style="width: 10%;">
+														<input type="checkbox" id="selectAll">
+													</th>
+													<th style="width: 30%;">Name</th>
+													<th style="width: 30%;">Phone Number</th>
+													<th style="width: 30%;">Address</th>
+													<th style="width: 30%;">Education Qualification</th>
+												</tr>
+											</thead>
+											<tbody id="ordersTableBody">
+												<!-- Table rows will be populated here -->
+											</tbody>
+										</table>
+									</div>
+								</div>
+								
+
+							</div>
+						</div>
+						<div class="d-flex justify-content-center">
+							<button class="btn"
+								style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								id="createorder">
+								Create DropOut
+							</button>
+						</div>
+
+					</div>
+
+
+
+
+				</div>
+
+
+
+			</div>
+
+
+	
+		<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+	</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+	<script th:inline="javascript">
+$(document).ready(function() {
+    // Function to load order details
+    function loadOrderDetails() {
+        $.ajax({
+            url: '/gcc/api/nulm/getAllOrderDetails', // Updated Endpoint URL
+            method: 'GET',
+            dataType: 'json',
+            success: function(data) {
+                var $dropdown = $('#orderNumberDropdown');
+                $dropdown.empty();
+                $dropdown.append('<option value="">Select Order</option>');
+                $.each(data, function(index, order) {
+                    $dropdown.append('<option value="' + order.order_id + '">' + order.order_number + '</option>');
+                });
+            },
+            error: function(xhr, status, error) {
+                console.error('Error fetching order details:', error);
+            }
+        });
+    }
+
+    // Load order details when the document is ready
+    loadOrderDetails();
+
+    // Handle order number selection
+   $('#orderNumberDropdown').change(function() {
+        var orderId = $(this).val();
+        var $orderDetails = $('#orderDetails');
+        var $groupBoxSection = $('#groupboxsection');
+
+        if (orderId) {
+            // Display the order details and group section
+            $orderDetails.show();
+            $groupBoxSection.show();
+
+            // Fetch group names based on selected order ID
+            $.ajax({
+                url: '/gcc/api/nulm/getSchemeGroupNamesByOrderId',
+                method: 'GET',
+                data: { orderId: orderId },
+                dataType: 'json',
+                success: function(data) {
+                    console.log('Group names data:', data); // Log the response to check if it’s correct
+
+                    var $groupDropdown = $('#grouplist');  // Ensure you are updating the correct dropdown
+                    $groupDropdown.empty(); // Clear the dropdown before appending new options
+                    $groupDropdown.append('<option value="">Select Scheme Group</option>');
+
+                    // Check if data is an array and has the expected structure
+                    if (Array.isArray(data) && data.length > 0) {
+                        $.each(data, function(index, group) {
+                            $groupDropdown.append('<option value="' + group.group_id + '">' + group.group_name + '</option>');
+                        });
+                    } else {
+                        console.error('No group names available');
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error fetching group names:', error);
+                }
+            });
+
+            // Fetch the enrollment counts based on the selected order ID
+            $.ajax({
+                url: '/gcc/api/nulm/dropOutCounts',
+                method: 'GET',
+                data: { orderId: orderId },
+                dataType: 'json',
+                success: function(counts) {
+                    // Update the values in the cards
+                    $('#total').text(counts.total_count || 0);
+                    $('#pending').text(counts.total_yes || 0);
+                    $('#notappointed').text(counts.total_drop || 0);
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error fetching enrollment counts:', error);
+                }
+            });
+        } else {
+            // Hide the order details and group section if no order is selected
+            $orderDetails.hide();
+            $groupBoxSection.hide();
+        }
+    });
+});
+$(document).ready(function() {
+    $('#createorder').click(function() {
+        var totalstaff = parseInt($('#total').text(), 10); // Convert total staff to an integer
+        var selectedEnrollments = [];
+        var orderId = parseInt($('#orderNumberDropdown').val(), 10); // Ensure orderId is an integer
+
+        $('.order-checkbox:checked').each(function() {
+            selectedEnrollments.push(parseInt($(this).val(), 10)); // Ensure enrollmentIds are integers
+        });
+
+        if (selectedEnrollments.length > totalstaff) {
+            // Show SweetAlert if the number of selected enrollments exceeds the total staff count
+            Swal.fire({
+                icon: 'warning',
+                title: 'Limit Exceeded',
+                text: `For this order, only ${totalstaff} staff members are allowed.`
+            });
+        } else {
+            // Proceed with the order creation logic
+            $.ajax({
+                url: '/gcc/api/nulm/assignDropout',
+                method: 'POST',
+                contentType: 'application/json', // Set the content type to JSON
+                data: JSON.stringify({
+                    enrollmentIds: selectedEnrollments,
+                    orderId: orderId
+                }), // Convert the data to JSON string
+                success: function(response) {
+                    // Show SweetAlert on success
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Order Dropped',
+                        text: 'The order has been dropped out.',
+                        confirmButtonText: 'OK'
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            // Reload the page after SweetAlert is confirmed
+                            location.reload();
+                        }
+                    });
+                },
+                error: function(xhr, status, error) {
+                    // Show error message using SweetAlert
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'An error occurred while creating the order. Please try again later.'
+                    });
+                    console.error('Error creating order:', error);
+                }
+            });
+        }
+    });
+});
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/nulm-payment.html b/src/main/resources/templates/modules/nulm/nulm-payment.html
new file mode 100644
index 0000000..1521b02
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/nulm-payment.html
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}">
+	<style>
+		label {
+			font-weight: 700;
+			color: #2d5263;
+		}
+
+
+
+		.checkbox-label {
+			display: block;
+			margin-bottom: 10px;
+			font-size: 16px;
+		}
+
+		
+		.custom-file-upload {
+			position: relative;
+			display: flex;
+			align-items: center;
+			border: 1px solid #d9dde4;
+			border-radius: 5px;
+			padding: 5px;
+			background-color: #f9fafb;
+			cursor: pointer;
+			margin-top: 5px;
+		}
+
+		.custom-file-upload input[type="file"] {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			cursor: pointer;
+		}
+
+		.custom-file-upload label {
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			align-items: center;
+		}
+
+		.upload-icon i {
+			color: #a6adb5;
+			font-size: 18px;
+		}
+
+		.file-name {
+			margin-left: 10px;
+			color: #414f69;
+			font-size: 14px;
+		}
+
+		#upload-text {
+			color: #a7adb5;
+
+		}
+	</style>
+</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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>NULM Payment</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 active" aria-current="page">NULM Payment</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row align-items-center justify-content-center"
+						style="color: white;background-color:#414f69 ;padding: 10px;">
+						<h3 class="title resizable-content">NULM Payment</h3>
+					</div>
+					<!-- Add the resizable-content class to the card sections -->
+					<div class="card mb-3 mt-4 resizable-content">
+						<!--<div class="card-header text-white" style="background-color: #414f69;">Personal Information's
+                                </div>-->
+                                
+						<div class="card-body">								
+							
+							<div class="row">						
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Name:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="staff-name-input" class="form-control" placeholder="Enter Name..." style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+						</div>						
+						
+							
+							<div class="row">		
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Mobile Number:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="mobile-number" class="form-control" placeholder="Enter Mobile Number..." style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+							</div>
+							<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Type of Fine Category:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="category" class="form-control" placeholder="Enter Fine Category..." style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+							</div>
+							<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Category Fine Amount:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="amount" class="form-control" placeholder="Enter the Category Fine Amount..." style="font-size: large;margin-bottom: 15px;" pattern="\d{10}" maxlength="10" minlength="10">
+								</div>	
+								</div>							
+							</div>
+
+								<!-- Update other input fields similarly -->
+				
+							</div>							
+	
+								
+								<div class="d-flex justify-content-center">
+							<button class="btn"
+								style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								id="staffenroll">
+								Payment
+							</button>
+						</div>						
+							
+
+						</div>
+						
+
+					</div>
+
+
+				</div>
+
+
+			
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+<script th:inline="javascript">
+	
+	$(document).ready(function() {
+			$("#staffenroll").click(function() {
+				// Get input values
+				let name = $("#staff-name-input").val().trim();
+				let mobileNumber = $("#mobile-number").val().trim();
+				let category = $("#category").val().trim();
+				let amount = $("#amount").val().trim();
+
+				// Check if any of the required fields are empty
+				if (name === "" || mobileNumber === "" || category === "") {
+					Swal.fire({
+						icon: 'warning',
+						title: 'Warning',
+						text: 'Category fine amount is not entered!'
+					});
+				} else if (amount === "") {
+					Swal.fire({
+						icon: 'warning',
+						title: 'Warning',
+						text: 'Please enter the Category Fine Amount.'
+					});
+				} else {
+					// Simulate AJAX success response
+					$.ajax({
+						type: "POST",
+						url: "#", // No actual API endpoint
+						data: {
+							name: name,
+							mobileNumber: mobileNumber,
+							category: category,
+							amount: amount
+						},
+						success: function() {
+							Swal.fire({
+								icon: 'success',
+								title: 'Success',
+								text: 'Category fine amount updated successfully!'
+							});
+						}
+					});
+				}
+			});
+		});
+  
+
+
+</script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/salary-approve.html b/src/main/resources/templates/modules/nulm/salary-approve.html
new file mode 100644
index 0000000..0aa4732
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/salary-approve.html
@@ -0,0 +1,389 @@
+<!DOCTYPE html>
+<html>
+<head th:replace="~{fragments/modules/base/head :: head}">
+    <!-- Include Bootstrap CSS for styling the modal -->
+    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+        <div class="page-wrap">
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+            <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="ik ik-thumbs-up bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>NULM STAFF</h5>
+                                        <span>Salary Approval</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 active" aria-current="page">Salary Approval</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr>
+                    
+                    <div class="row">
+                        <div class="col-sm-3">
+                            <label for="month">Month:</label>
+                            <select id="month" class="form-control" required>
+                                <option value="">Select</option>
+                                <option value="January">January</option>
+                                <option value="February">February</option>
+                                <option value="March">March</option>
+                                <option value="April">April</option>
+                                <option value="May">May</option>
+                                <option value="June">June</option>
+                                <option value="July">July</option>
+                                <option value="August">August</option>
+                                <option value="September">September</option>
+                                <option value="October">October</option>
+                                <option value="November">November</option>
+                                <option value="December">December</option>
+                            </select>
+                        </div>
+
+                        <div class="col-sm-3">
+                            <label for="year">Year:</label>
+                            <input type="number" id="year" class="form-control" min="2000" max="2100" required>
+                        </div>
+
+                        <div class="col-sm-3">
+                            <label for="salaryStatus">Salary Status:</label>
+                            <select id="salaryStatus" class="form-control">
+                                <option value="">Select</option>
+                                <option value="Initiated">Initiated</option>
+                                <option value="Approved">Approved</option>
+                            </select>
+                        </div>
+
+                        <div class="col-sm-3">
+                            <button class="btn btn-primary mt-4" onclick="fetchSalaryReport()">Get Salary Info</button>
+                        </div>
+                    </div>
+                    
+					<div class="card-block mt-4">
+    <div>
+        <table id="salaryDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+            <thead class="thead-dark">
+                <tr role="row">
+                    <th>S.No</th>
+                    <th>Incharge Name</th>
+                    <th>Total Staff Count</th>
+                    <th>Salary Processed</th>
+                    <th>Total Salary Amount</th>
+                    <th>Salary Status</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr th:each="salaryInitiatedCounts, i : ${salaryInitiatedCounts}">
+                    <td th:text="${i.count}">0</td>
+                    <td th:text="${salaryInitiatedCounts.incharge_name}"></td>
+                    
+                    <!-- Make the Total Staff Count clickable -->
+                    <td>
+                        <a href="#" class="total-staff-count" 
+                           th:data-incharge-id="${salaryInitiatedCounts.incharge_id}" 
+                           th:data-month="${salaryInitiatedCounts.month}" 
+                           th:data-incharge-name="${salaryInitiatedCounts.incharge_name}"
+                           th:data-zone="${salaryInitiatedCounts.zone}"
+                           th:data-enrollment-ids="${salaryInitiatedCounts.enrollment_ids}"
+                           th:text="${salaryInitiatedCounts.total_staff_count}" 
+                           data-toggle="modal" data-target="#shgModal">
+                        </a>
+                    </td>
+                    
+                    <td th:text="${salaryInitiatedCounts.total_approved_count}"></td>
+                    <td th:text="${salaryInitiatedCounts.total_salary_amount}"></td>
+                    <td th:text="${salaryInitiatedCounts.salary_status}"></td>                   
+                        <td>
+							 <span th:if="${salaryInitiatedCounts.salary_status == 'Approved'}" class="badge badge-success">Approved</span>
+						    <button th:if="${salaryInitiatedCounts.salary_status == 'Initiated'}"
+						            class="btn btn-primary approve-btn"
+						            th:data-enrollment-ids="${salaryInitiatedCounts.enrollment_ids}"
+						            th:data-month="${salaryInitiatedCounts.month}"
+						            th:data-year="${salaryInitiatedCounts.year}">
+						        Approve
+						    </button>
+						</td>
+                </tr>
+            </tbody>
+            <tfoot class="thead-dark">
+                <tr>
+                    <th>S.No</th>
+                    <th>Incharge Name</th>
+                    <th>Total Staff Count</th>
+                    <th>Salary Processed</th>
+                    <th>Total Salary Amount</th>
+                    <th>Salary Status</th>
+                    <th>Action</th>
+                </tr>
+            </tfoot>
+        </table>
+    </div>
+</div>
+
+<!-- Modal for displaying staff details -->
+<div class="modal fade" id="shgModal" tabindex="-1" role="dialog" aria-labelledby="shgModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="shgModalLabel">Staff Details</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <!-- Table for displaying attendance details -->
+                <div id="attendanceDetailsContainer">
+                    <h5>Attendance Details</h5>
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th>S.No</th>
+                                <th>Employee ID</th>
+                                <th>Name</th>
+                                <th>Year</th>
+                                <th>Month</th>
+                                <th>Total Days Present</th>
+                                <th>Total Days Absent</th>
+                                <th>Total Days OD</th>
+                                <th>Total Days Salary</th>
+                                <th>Total Salary</th>
+                                <th>Salary Status</th>
+                            </tr>
+                        </thead>
+                        <tbody id="attendanceDetailsTableBody">
+                            <!-- Dynamic content will be loaded here -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+                    <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+                </div>
+            </div>
+            <div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+		
+
+            <script th:replace="~{fragments/modules/base/script :: script}"></script>
+            <script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+            <script th:inline="javascript">
+				
+	function fetchSalaryReport() {
+        const month = document.getElementById('month').value;
+        const year = document.getElementById('year').value;
+        const salaryStatus = document.getElementById('salaryStatus').value;
+
+        if (month && year) {
+            window.location.href = `/gcc/nulm/salary-approve?month=${month}&year=${year}&salaryStatus=${salaryStatus}`;
+        } else {
+            alert("Please select both month and year.");
+        }
+    }
+				$(document).ready(function () {
+					
+	function clearUrlParams() {
+        const currentUrl = window.location.href;
+        const urlWithoutParams = currentUrl.split('?')[0]; // Remove the query parameters
+        window.history.replaceState({}, document.title, urlWithoutParams); // Replace the current URL without params
+    }
+
+    // Call this on page load to reset the URL
+    clearUrlParams();
+    
+    // Initialize DataTable
+    var table = $('#salaryDatatable').DataTable({
+        dom: 'Bftip',
+        columnDefs: [
+            { targets: 'no-sort', orderable: false }
+        ],
+        lengthMenu: [
+            [50, 100, 200, 500, -1],
+            ['50 rows', '100 rows', '200 rows', 'Show all']
+        ],
+        scrollY: '50vh',
+        fixedColumns: {
+            left: 1,
+            right: 1
+        },
+        buttons: [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary',
+                id: 'copyBtn',
+                columns: [0,1,2,3,4,5]
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary',
+                id: 'pdfBtn',
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5]
+                }
+            },
+            /*
+            {
+                extend: 'excelHtml5',
+                text: 'EXCEL',
+                className: 'btn btn-secondary',
+                id: 'excelBtn'
+            },
+            {
+                extend: 'csvHtml5',
+                text: 'CSV',
+                className: 'btn btn-secondary',
+                id: 'csvBtn'
+            }*/
+        ],
+        fixedHeader: true,
+        autoWidth: true,
+        responsive: true,
+        searching: true,
+        select: false,
+        processing: false
+    });
+
+    // Handle total-staff-count click event
+    $('.total-staff-count').on('click', function (event) {
+        event.preventDefault(); // Prevent default anchor click behavior
+
+        // Get inchargeName and month from the clicked element's data attributes
+       // var inchargeName = $(this).data('incharge-name');
+        var inchargeId = $(this).data('incharge-id')
+        var month = $(this).data('month')
+        var inchargeName = $(this).data('incharge-name')
+        var zone = $(this).data('zone');
+        var enrollmentIds = $(this).data('enrollment-ids');
+        console.log(zone);
+        console.log(inchargeName);
+        // Make the AJAX call to fetch attendance details
+        $.ajax({
+            url: '/gcc/api/nulm/staffInititeadList',
+            method: 'GET',
+            data: {
+                //inchargeName: inchargeName,
+                inchargeId: inchargeId,
+                month: month,
+                inchargeName: inchargeName,
+                enrollmentIds: enrollmentIds.join(',')
+            },
+            success: function (data) {
+                // Populate the modal's table with the fetched data
+                var tbody = $('#attendanceDetailsTableBody');
+                tbody.empty(); // Clear any previous data
+
+                // Loop through the data and append rows to the table
+                $.each(data, function (index, item) {
+                    var row = `<tr>
+                                    <td>${index + 1}</td>
+                                    <td>${item.emp_id}</td>
+                                    <td>${item.name}</td>
+                                    <td>${item.year}</td>
+                                    <td>${item.month}</td>
+                                    <td>${item.total_days_present}</td>
+                                    <td>${item.total_days_absent}</td>
+                                    <td>${item.total_days_od}</td>
+                                    <td>${item.total_days_salary}</td>
+                                    <td>${item.total_salary}</td>
+                                    <td>${item.salary_status}</td>
+                                </tr>`;
+                    tbody.append(row);
+                });
+
+                // Show the modal after data is populated
+                $('#shgModal').modal('show');
+            },
+            error: function (xhr, status, error) {
+                console.error('Failed to fetch data:', error);
+                alert('Failed to load staff details. Please try again.');
+            }
+        });
+    });
+    
+   $(document).on('click', '.approve-btn', function () {
+    var enrollmentIds = $(this).data('enrollment-ids'); // Get the data attribute
+    var month = $(this).data('month');
+    var year = $(this).data('year');
+
+    // Confirm the action with SweetAlert
+    Swal.fire({
+        title: 'Are you sure?',
+        text: 'Do you want to approve the selected enrollments?',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Yes, approve it!'
+    }).then((result) => {
+        if (result.isConfirmed) {
+            // Make the AJAX call
+            $.ajax({
+                url: '/gcc/api/nulm/update-salary-status',
+                method: 'POST',
+                contentType: 'application/x-www-form-urlencoded',
+                data: {
+                    // Pass the enrollment IDs as a comma-separated string
+                    enrollmentIds: enrollmentIds.join(','), // Convert array to a comma-separated string
+                    month: month,
+                    year: year
+                },
+                success: function (response) {
+                    Swal.fire(
+                        'Approved!',
+                        response,
+                        'success'
+                    );
+                    // Optionally refresh the table or update the UI
+                    location.reload();
+                },
+                error: function (xhr, status, error) {
+                    console.error('Failed to approve:', error);
+                    Swal.fire(
+                        'Error!',
+                        'Failed to approve the selected enrollments. Please try again.',
+                        'error'
+                    );
+                }
+            });
+        }
+    });
+});
+
+});
+
+            </script>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/salary-details.html b/src/main/resources/templates/modules/nulm/salary-details.html
new file mode 100644
index 0000000..0f04944
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/salary-details.html
@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Salary Details</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 active" aria-current="page">Salary Details</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row">
+                        <div class="col-sm-3">
+                            <label for="month">Month:</label>
+                            <select id="month" class="form-control" required>
+                                <option value="">Select</option>
+                                <option value="January">January</option>
+                                <option value="February">February</option>
+                                <option value="March">March</option>
+                                <option value="April">April</option>
+                                <option value="May">May</option>
+                                <option value="June">June</option>
+                                <option value="July">July</option>
+                                <option value="August">August</option>
+                                <option value="September">September</option>
+                                <option value="October">October</option>
+                                <option value="November">November</option>
+                                <option value="December">December</option>
+                            </select>
+                        </div>
+
+                        <div class="col-sm-3">
+                            <label for="year">Year:</label>
+                            <input type="number" id="year" class="form-control" min="2000" max="2100" required>
+                        </div>
+
+                        <div class="col-sm-3">
+                            <button class="btn btn-primary mt-4" onclick="fetchSalaryDetails()">Get Salary Info</button>
+                        </div>
+                    </div>
+                    <div class="card-block mt-3">
+                        <div>
+                            <table id="salaryDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+                                <thead class="thead-dark">
+                                    <tr role="row">
+                                        <th>S.No</th>
+							            <th>Employee Name</th>
+							            <th>Total Number of days</th>
+							            <th>Number of days present</th>
+							            <th>Number of days Absent</th>
+							            <th>OD</th>
+							            <th>Total Days for the Salary</th>
+							            <th>Month</th>
+							            <th>Year</th>
+							            <th>Salary Amount</th>
+							            <th><input type="checkbox" id="selectAll"> Action</th>
+                                    </tr>
+                                    
+                                </thead>
+                                 <tbody>
+                                     <tr th:each="salaryCounts, i : ${salaryCounts}">
+                                      <td th:text="${i.count}">0</td>
+                                        <td th:text="${salaryCounts.name}"></td>
+                                        <td th:text="${salaryCounts.total_days}"></td>
+                                        <td th:text="${salaryCounts.total_days_present}"></td>
+                                        <td th:text="${salaryCounts.total_days_absent}"></td>
+                                        <td th:text="${salaryCounts.total_days_od}"></td>
+                                        <td th:text="${salaryCounts.total_days_salary}"></td>
+                                        <td th:text="${salaryCounts.month}"></td>
+                                        <td th:text="${salaryCounts.year}"></td>
+                                        <td th:text="${salaryCounts.total_salary}"></td>
+                                        <td>
+										    <!-- Show "Approved" badge if salary_status is 'Approved' -->
+										    <span th:if="${salaryCounts.salary_status == 'Approved'}" class="badge badge-primary">Approved</span>
+										
+										    <!-- Show "Initiated" badge if salary_status is 'Initiated' -->
+										    <span th:if="${salaryCounts.salary_status == 'Initiated'}" class="badge badge-success">Initiated</span>
+										
+										    <!-- Show checkbox if salary_status is neither 'Approved' nor 'Initiated' -->
+										    <input type="checkbox" th:unless="${salaryCounts.salary_status == 'Approved' || salaryCounts.salary_status == 'Initiated'}"
+										           class="initiate-checkbox"
+										           th:data-enrollment-id="${salaryCounts.enrollment_id}"
+										           th:data-total-days-present="${salaryCounts.total_days_present}"
+										           th:data-total-days-od="${salaryCounts.total_days_od}"
+										           th:data-total-days="${salaryCounts.total_days}"
+										           th:data-total-days-absent="${salaryCounts.total_days_absent}"
+										           th:data-month="${salaryCounts.month}"
+										           th:data-year="${salaryCounts.year}"
+										           th:data-salary-amount="${salaryCounts.total_salary}"
+										           th:data-salary-status="${salaryCounts.salary_status}"
+										           th:data-group-id="${salaryCounts.group_id}"
+										           th:data-wage-id="${salaryCounts.wage_id}">
+										</td>
+                                    </tr>
+                                </tbody>
+                                <tfoot class="thead-dark">
+                                    <tr role="row">
+                                        <th>S.No</th>
+							            <th>Employee Name</th>
+							            <th>Total Number of days</th>
+							            <th>Number of days present</th>
+							            <th>Number of days Absent</th>
+							            <th>OD</th>
+							            <th>Total Days for the Salary</th>
+							            <th>Month</th>
+							            <th>Year</th>
+							            <th>Salary Amount</th>
+							            <th>Action</th>
+                                    </tr>                                   
+                                </tfoot>
+                            </table>
+                            <button id="initiateButton" class="btn btn-success">Initiate</button>
+                        </div>
+                    </div>
+						
+
+					</div>
+
+
+				</div>
+
+
+			
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+<script th:inline="javascript">
+	
+	function fetchSalaryDetails() {
+        const month = document.getElementById('month').value;
+        const year = document.getElementById('year').value;
+
+        if (month && year) {
+            window.location.href = `/gcc/nulm/salaryDetails?month=${month}&year=${year}`;
+        } else {
+            alert("Please select both month and year.");
+        }
+    }
+
+
+$(document).ready(function () {
+    // Initialize DataTable
+    var table = $('#salaryDatatable').DataTable({
+        dom: 'Bftip',
+        columnDefs: [
+            { targets: 'no-sort', orderable: false }
+        ],
+        lengthMenu: [
+            [50, 100, 200, 500, -1],
+            ['50 rows', '100 rows', '200 rows', 'Show all']
+        ],
+        scrollY: '50vh',
+        fixedColumns: {
+            left: 1,
+            right: 1
+        },
+        buttons: [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary',
+                id: 'copyBtn'
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary',
+                id: 'pdfBtn'
+            }
+        ],
+        fixedHeader: true,
+        autoWidth: true,
+        responsive: true,
+        searching: true,
+        select: false,
+        processing: false
+    });
+
+    // Handle "Select All" checkbox change event
+    $("#selectAll").on('change', function () {
+        $(".initiate-checkbox").prop('checked', this.checked);
+    });
+
+    // Handle individual checkboxes change event to update the "Select All" checkbox
+    $(".initiate-checkbox").on('change', function () {
+        if ($('.initiate-checkbox:checked').length === $('.initiate-checkbox').length) {
+            $('#selectAll').prop('checked', true);
+        } else {
+            $('#selectAll').prop('checked', false);
+        }
+    });
+
+    // Approve button click event
+    $("#initiateButton").click(function (event){
+		event.preventDefault();
+        // Collect selected row data
+        let selectedRows = [];
+		$(".initiate-checkbox:checked").each(function () {
+		    const enrollmentId = $(this).data("enrollment-id");
+		    const totalDaysPresent = $(this).data("total-days-present");
+		    const totalDaysOd = $(this).data("total-days-od");
+		    const totalDays = $(this).data("total-days");
+		    const totalDaysAbsent = $(this).data("total-days-absent");
+		    const month = $(this).data("month");
+		    const year = $(this).data("year");
+		    const salaryAmount = $(this).data("salary-amount");
+		    const salaryStatus = $(this).data("salary-status");
+		    const groupId = $(this).data("group-id");
+		    const wageId = $(this).data("wage-id");
+		
+		    selectedRows.push({
+		        enrollment_id: parseInt(enrollmentId),
+		        total_days_present: parseInt(totalDaysPresent),
+		        total_days_od: parseInt(totalDaysOd),
+		        total_days: parseInt(totalDays),
+		        total_days_absent: parseInt(totalDaysAbsent),
+		        month: month,
+		        year: parseInt(year),
+		        salary_amount: parseInt(salaryAmount),
+		        salary_status: salaryStatus,
+		        group_id: parseInt(groupId),
+		        wage_id: parseInt(wageId)
+		    });
+		});
+
+        // If no rows are selected, show an alert
+        if (selectedRows.length === 0) {
+            alert("Please select at least one row to approve.");
+            return;
+        }
+
+        // Send AJAX POST request using jQuery
+       $.ajax({
+    url: "/gcc/api/nulm/salaryDetailUpdate",
+    type: "POST",
+    contentType: "application/json",
+    data: JSON.stringify(selectedRows), // Send array of objects
+    success: function (response) {
+        Swal.fire({
+            title: 'Success!',
+            text: 'Selected Staffs for Salary has been Initited successfully!',
+            icon: 'success',
+            confirmButtonText: 'OK'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // Optionally, you could refresh the page or update the UI to reflect the changes
+                location.reload(); // This will reload the page to fetch the latest data
+            }
+        });
+    },
+    error: function (xhr, status, error) {
+        console.error("Error:", error);
+        alert("An error occurred while approving salary details.");
+    }
+});
+    });
+})
+
+</script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/salary-report.html b/src/main/resources/templates/modules/nulm/salary-report.html
new file mode 100644
index 0000000..8ad7385
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/salary-report.html
@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+
+<body>
+	<div class="wrapper">
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+			<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Salary Report</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 active" aria-current="page">Salary Report</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+
+					<!-- Filters Section -->
+					<div class="row">
+						<div class="col-sm-3">
+							<label for="month">Month:</label>
+							<select id="month" class="form-control" required>
+								<option value="">Select</option>
+								<option value="January">January</option>
+								<option value="February">February</option>
+								<option value="March">March</option>
+								<option value="April">April</option>
+								<option value="May">May</option>
+								<option value="June">June</option>
+								<option value="July">July</option>
+								<option value="August">August</option>
+								<option value="September">September</option>
+								<option value="October">October</option>
+								<option value="November">November</option>
+								<option value="December">December</option>
+							</select>
+						</div>
+
+						<div class="col-sm-3">
+							<label for="year">Year:</label>
+							<input type="number" id="year" class="form-control" min="2000" max="2100" required>
+						</div>
+
+						<div class="col-sm-3">
+							<label for="salaryStatus">Salary Status:</label>
+							<select id="salaryStatus" class="form-control">
+								<option value="">Select</option>
+								<option value="Initiated">Initiated</option>
+								<option value="Approved">Approved</option>
+							</select>
+						</div>
+
+						<div class="col-sm-3">
+							<label for="selfhelp">Self Help Group:</label>
+							<select id="selfhelp" class="form-control">
+								<option value="">Select</option>
+								<!-- Group names will be populated here -->
+							</select>
+						</div>
+
+
+
+						<div class="col-sm-3">
+
+							<button class="btn btn-primary mt-4" onclick="fetchSalaryReport()">Get Salary Info</button>
+						</div>
+					</div>
+
+					<!-- Salary Report Table -->
+					<div class="card-block mt-3">
+						<table id="salaryreporttable" class="table table-striped table-bordered">
+							<thead class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Incharge Name</th>
+									<th>Incharge Designation</th>
+									<th>Self Help Group</th>
+									<th>Days Present</th>
+									<th>OD</th>
+									<th>Total Days for Salary</th>
+									<th>Total Days</th>
+									<th>Total Days Absent</th>
+									<th>Month</th>
+									<th>Year</th>
+									<th>Salary Amount</th>
+									<th>Salary Status</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr th:each="salary, i : ${salaryReport}">
+									<td th:text="${i.count}">1</td>
+									<td th:text="${salary.emp_id}"></td>
+									<td th:text="${salary.name}"></td>
+									<td th:text="${salary.incharge_name}"></td>
+									<td th:text="${salary.incharge_designation}"></td>
+									<td th:text="${salary.group_name}"></td>
+									<td th:text="${salary.total_days_present}"></td>
+									<td th:text="${salary.total_days_od}"></td>
+									<td th:text="${salary.total_days_salary}"></td>
+									<td th:text="${salary.total_days}"></td>
+									<td th:text="${salary.total_days_absent}"></td>
+									<td th:text="${salary.imonth}"></td>
+									<td th:text="${salary.iyear}"></td>
+									<td th:text="${salary.total_salary}"></td>
+									<td th:text="${salary.salary_status}"></td>
+								</tr>
+							</tbody>
+							<tfoot class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Incharge Name</th>
+									<th>Incharge Designation</th>
+									<th>Self Help Group</th>
+									<th>Days Present</th>
+									<th>OD</th>
+									<th>Total Days for Salary</th>
+									<th>Total Days</th>
+									<th>Total Days Absent</th>
+									<th>Month</th>
+									<th>Year</th>
+									<th>Salary Amount</th>
+									<th>Salary Status</th>
+								</tr>
+							</tfoot>
+						</table>
+					</div>
+
+				</div>
+			</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<div th:replace="~{fragments/modules/base/script :: script}"></div>
+
+	<script th:inline="javascript">
+
+		function fetchSalaryReport() {
+			const month = document.getElementById('month').value;
+			const year = document.getElementById('year').value;
+			const salaryStatus = document.getElementById('salaryStatus').value;
+			const groupName=document.getElementById('selfhelp').value;
+
+			if (month && year) {
+				window.location.href = `/gcc/nulm/salary-report?month=${month}&year=${year}&salaryStatus=${salaryStatus}&groupName=${groupName}`;
+			} else {
+				alert("Please select both month and year.");
+			}
+		}
+		$(document).ready(function () {
+
+			function clearUrlParams() {
+				const currentUrl = window.location.href;
+				const urlWithoutParams = currentUrl.split('?')[0]; // Remove the query parameters
+				window.history.replaceState({}, document.title, urlWithoutParams); // Replace the current URL without params
+			}
+
+			// Call this on page load to reset the URL
+			clearUrlParams();
+
+			// Initialize DataTable
+			var table = $('#salaryreporttable').DataTable({
+				dom: 'Bftip',
+				columnDefs: [
+					{targets: 'no-sort', orderable: false}
+				],
+				lengthMenu: [
+					[50, 100, 200, 500, -1],
+					['50 rows', '100 rows', '200 rows', 'Show all']
+				],
+				scrollY: '50vh',
+				fixedColumns: {
+					left: 1,
+					right: 1
+				},
+				buttons: [
+					{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+					{
+						extend: 'pdfHtml5',
+						text: 'PDF',
+						className: 'btn btn-secondary',
+						id: 'pdfBtn',
+						exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
+                },
+                orientation: 'landscape', // Change to landscape for more horizontal space
+    pageSize: 'A4', // You can change to A4 or A3 depending on your needs
+    customize: function (doc) {
+        // Custom column widths for better fit
+        doc.content[1].table.widths = ['4%', '8%', '8%', '8%', '8%', '8%', '6%', '5%', '6%', '6%', '6%', '6%', '6%', '9%', '9%'];
+        
+        // Optional: Adjust font size if needed
+        doc.styles.tableBodyEven.alignment = 'center';
+        doc.styles.tableBodyOdd.alignment = 'center';
+    }
+					}
+				],
+				fixedHeader: true,
+				autoWidth: true,
+				responsive: true,
+				searching: true,
+				select: false,
+				processing: false
+			});
+
+
+		});
+		$(document).ready(function () {
+			$.ajax({
+				url: '/gcc/api/nulm/selfHelpGroups', // Your API endpoint
+				type: 'GET',
+				success: function (data) {
+					// Clear existing options (if any)
+					$('#selfhelp').empty().append('<option value="">Select</option>');
+
+					// Check if data is an array and iterate through it
+					if (Array.isArray(data)) {
+						let options = '';
+						data.forEach(function (group) {
+							// Access the correct properties
+							options += `<option value="${group.groupName}">${group.groupName}</option>`;
+						});
+						$('#selfhelp').append(options);
+					} else {
+						console.error("Data is not an array:", data);
+					}
+				},
+				error: function (xhr, status, error) {
+					console.error("Error fetching self-help groups:", error);
+				}
+			});
+		});
+
+
+
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/scheme-group.html b/src/main/resources/templates/modules/nulm/scheme-group.html
new file mode 100644
index 0000000..2e6ff83
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/scheme-group.html
@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="ik ik-thumbs-up bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>NULM STAFF</h5>
+                                            <span>Self Help Group</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 active" aria-current="page">Self Help Group</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row align-items-center justify-content-center"
+                        style="color: white;background-color:#414f69 ;padding: 10px;">
+                        <h3 class="title resizable-content">Self Help Group</h3>
+                    </div>
+                    
+                
+                        <div class="mt-1">
+                
+                        </div>
+                        <!-- Card Section -->
+                        <div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
+                
+                
+                            <!-- Add the resizable-content class to the card sections -->
+                            <div class="card mb-3 resizable-content">
+                
+                                <div class="card-body">
+                                    <div class="row">
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Self Help Group:</label>
+                                            <input type="text" class="form-control" id="groupName" placeholder="Enter Scheme Group Name" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                        </div>
+                                     </div>
+								
+									<div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Incharge Name:</label>
+                                            <input type="text" class="form-control" id="inchargeName" placeholder="Enter Incharge Name" style="font-size: large;  width: 70%;margin-bottom: 15px;">
+                                        </div>
+									</div>
+								
+									<div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Incharge Phone Number:</label>
+                                            <input type="text" class="form-control" id="inchargePhoneNo" placeholder="Enter Incharge Phone Number" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                         </div>
+                                    </div>    
+                                    <div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Bank Name:</label>
+                                            <input type="text" class="form-control" id="bankName" placeholder="Enter Incharge Phone Number" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                         </div>
+                                    </div>  
+                                    <div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Bank Branch:</label>
+                                            <input type="text" class="form-control" id="bankBranch" placeholder="Enter Incharge Phone Number" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                         </div>
+                                    </div>  
+                                    <div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">IFSC Code:</label>
+                                            <input type="text" class="form-control" id="ifscCode" placeholder="Enter Incharge Phone Number" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                         </div>
+                                    </div>  
+                                    <div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Bank Account Number:</label>
+                                            <input type="text" class="form-control" id="bankAccountno" placeholder="Enter Incharge Phone Number" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                         </div>
+                                    </div>                                  
+                                    
+                                </div>
+								<div class="d-flex justify-content-center">
+								    <button class="btn"
+								        style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								        onclick="saveSchemeGroup()">
+								        Submit
+								    </button>
+								    <button class="btn"
+								        style="background-color: #6c757d; color: white; width: 200px;padding: 10px;margin-bottom: 10px;margin-left: 10px;"
+								        onclick="viewDetails()">
+								        View Details
+								    </button>
+								</div>
+
+							</div>
+							<div id="detailsContainer" style="margin-top: 20px;"></div>
+
+                            </div>
+                           
+                
+                
+                
+                        </div>
+                
+                
+                
+                
+                    
+                
+                </div>
+
+                
+
+			
+
+        <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+        </div>
+		</div>
+	    <div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+        <script th:inline="javascript">
+			
+		function saveSchemeGroup() {
+        const schemeData = {
+            groupName: document.getElementById('groupName').value,
+            inchargeName: document.getElementById('inchargeName').value,
+            inchargePhoneNo: document.getElementById('inchargePhoneNo').value,
+            bankName: document.getElementById('bankName').value,
+            bankBranch: document.getElementById('bankBranch').value,
+            ifscCode: document.getElementById('ifscCode').value,
+            bankAccountno: document.getElementById('bankAccountno').value
+        };
+
+		$.ajax({
+		    type: "POST",
+		    url: "/gcc/api/nulm/saveGroup", // Ensure this matches the controller's mapping
+		    contentType: "application/json",
+		    data: JSON.stringify(schemeData),
+		    success: function(response) {
+		        Swal.fire({
+		            icon: 'success',
+		            title: 'Scheme Group Saved Successfully',
+		            text: response
+		        }).then((result) => {
+		            if (result.isConfirmed) {
+		                location.reload(); // Reload the page after the user confirms the alert
+		            }
+		        });
+		    },
+		    error: function(xhr) {
+		        Swal.fire({
+		            icon: 'error',
+		            title: 'Error',
+		            text: xhr.responseText
+		        });
+		    }
+		});
+
+    }
+
+	function viewDetails() {
+	    $.ajax({
+	        type: "GET",
+	        url: "/gcc/api/nulm/getAllSchemeGroups",
+	        success: function(data) {
+	            displayTable(data);
+	        },
+	        error: function(xhr) {
+	            Swal.fire({
+	                icon: 'error',
+	                title: 'Error',
+	                text: 'Could not retrieve details'
+	            });
+	        }
+	    });
+	}
+
+	function displayTable(data) {
+	    let tableHtml = `
+	        <table class="table table-bordered">
+	            <thead>
+	                <tr>
+	                    <th>Group Name</th>
+	                    <th>Incharge Name</th>
+	                    <th>Incharge Phone Number</th>
+	                    <th>Appointed</th>
+	                    <th>Available</th>
+	                    <th>Dropout</th>
+	                    <th>Created Date</th>
+	                </tr>
+	            </thead>
+	            <tbody>
+	    `;
+
+	    data.forEach(item => {
+	        tableHtml += `
+	            <tr>
+	                <td>${item.group_name}</td>
+	                <td>${item.incharge_name}</td>
+	                <td>${item.incharge_phoneno}</td>
+	                <td>${item.appointed_count}</td>
+	                <td>${item.available_count}</td>
+	                <td>${item.dropout_count}</td>
+	                <td>${item.created_date}</td>
+	            </tr>
+	        `;
+	    });
+
+	    tableHtml += `
+	            </tbody>
+	        </table>
+	    `;
+
+	    document.getElementById('detailsContainer').innerHTML = tableHtml;
+	}
+
+
+        		</script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/staff-enrollment.html b/src/main/resources/templates/modules/nulm/staff-enrollment.html
new file mode 100644
index 0000000..dcc1672
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/staff-enrollment.html
@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}">
+	<style>
+		label {
+			font-weight: 700;
+			color: #2d5263;
+		}
+
+
+
+		.checkbox-label {
+			display: block;
+			margin-bottom: 10px;
+			font-size: 16px;
+		}
+
+		
+		.custom-file-upload {
+			position: relative;
+			display: flex;
+			align-items: center;
+			border: 1px solid #d9dde4;
+			border-radius: 5px;
+			padding: 5px;
+			background-color: #f9fafb;
+			cursor: pointer;
+			margin-top: 5px;
+		}
+
+		.custom-file-upload input[type="file"] {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			cursor: pointer;
+		}
+
+		.custom-file-upload label {
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			align-items: center;
+		}
+
+		.upload-icon i {
+			color: #a6adb5;
+			font-size: 18px;
+		}
+
+		.file-name {
+			margin-left: 10px;
+			color: #414f69;
+			font-size: 14px;
+		}
+
+		#upload-text {
+			color: #a7adb5;
+
+		}
+	</style>
+</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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Staff Enrollment</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 active" aria-current="page">Staff Enrollment</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row align-items-center justify-content-center"
+						style="color: white;background-color:#414f69 ;padding: 10px;">
+						<h3 class="title resizable-content">Staff Enrollment</h3>
+					</div>
+					<!-- Add the resizable-content class to the card sections -->
+					<div class="card mb-3 mt-4 resizable-content">
+						<!--<div class="card-header text-white" style="background-color: #414f69;">Personal Information's
+                                </div>-->
+                                
+						<div class="card-body">								
+							<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+									<label style="font-size: large; font-weight: 700; color: #414f69;">Self Help Group:</label>
+									<div class="col-md-6" style="margin-right: 32%;">
+										<select id="selfHelpGroupDropdown" class="form-control" style="font-size: large; margin-bottom: 15px;">
+											<option value="">Select Group</option>
+										</select>
+									</div>
+								</div>
+							</div>
+							<div class="row">						
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Name:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="staff-name-input" class="form-control" placeholder="Enter Name..." style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+						</div>						
+						
+						<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Gender:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <select id="gender-select" class="form-control" style="font-size: large;margin-bottom: 15px;">
+								        <option value="">Select Gender</option>
+								        <option value="1">Male</option>
+								        <option value="2">Female</option>
+								        <option value="3">Transgender</option>
+								    </select>
+								    </div>
+								</div>								
+							</div>
+							
+							<div class="row">		
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Date Of Birth:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="date" id="dob-input" class="form-control" style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+							</div>
+							<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Address:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="address-input" class="form-control" placeholder="Enter Name..." style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+							</div>
+							<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Phone number:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="phone-number-input" class="form-control" placeholder="Enter the Phone Number..." style="font-size: large;margin-bottom: 15px;" pattern="\d{10}" maxlength="10" minlength="10">
+								</div>	
+								</div>							
+							</div>
+
+								<!-- Update other input fields similarly -->
+							<div class="row">
+
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+									<label style="font-size: large; font-weight: 700; color: #414f69;">Education
+										Qualification:</label>
+										<div class="col-md-6" style="margin-right: 32%;">
+									<select id="educationQualification" class="form-control" style="font-size: large;margin-bottom: 15px;">
+										<option value="">Select Qualification</option>
+										<option value="8th">8th</option>
+										<option value="9th">9th</option>
+										<option value="10th">10th</option>
+										<option value="11th">11th</option>
+										<option value="12th">12th</option>
+										<option value="UG">UG</option>
+										<option value="PG">PG</option>
+									</select>
+									</div>
+								</div>	
+							</div>
+							
+							<div class="row">
+    <div class="col-md-12 d-flex justify-content-between align-items-center">
+        <label style="font-size: large;font-weight: 700;color: #414f69;">Additional Skills:</label>
+        <div class="col-md-6" style="margin-right: 32%;">
+        <select id="skills-select" class="form-control" style="font-size: large;margin-bottom: 15px;">
+            <option value="">Select Additional Skills</option>
+            <option value="typing">Typing</option>
+            <option value="shorthand">ShortHand</option>
+            <option value="dataentry">DataEntry</option>
+            <option value="others">Others</option>
+        </select>
+        </div>
+    </div>
+</div>
+		
+							</div>							
+								<div class="col-md-12">
+									<label style="font-size: large;font-weight: 700;color: #414f69;">Proof
+										Documents:</label>
+									<div class="row">
+
+
+										<!-- First File Upload -->
+										<div class="col-md-4">
+											<div class="custom-file-upload">
+												<input type="file" id="file-upload-1" class="form-control"
+													onchange="displayFileName('file-upload-1', 'file-name-1')">
+												<label for="file-upload-1" id="file-label-1">
+													<span class="upload-text" id="upload-text">Upload Aadhar Card</span>
+													<span class="upload-icon">
+														<i class="fas fa-file-upload"></i>
+													</span>
+												</label>
+												<span id="file-name-1" class="file-name"></span>
+											</div>
+										</div>
+
+										<!-- Second File Upload -->
+										<div class="col-md-4">
+											<div class="custom-file-upload">
+												<input type="file" id="file-upload-2" class="form-control"
+													onchange="displayFileName('file-upload-2', 'file-name-2')">
+												<label for="file-upload-2" id="file-label-2">
+													<span class="upload-text" id="upload-text">Upload Bank
+														Passbook</span>
+													<span class="upload-icon">
+														<i class="fas fa-file-upload"></i>
+													</span>
+												</label>
+												<span id="file-name-2" class="file-name"></span>
+											</div>
+										</div>
+
+										<!-- Third File Upload -->
+										<div class="col-md-4">
+											<div class="custom-file-upload">
+												<input type="file" id="file-upload-3" class="form-control"
+													onchange="displayFileName('file-upload-3', 'file-name-3')">
+												<label for="file-upload-3" id="file-label-3">
+													<span class="upload-text" id="upload-text">Upload Ration Card</span>
+													<span class="upload-icon">
+														<i class="fas fa-file-upload"></i>
+													</span>
+												</label>
+												<span id="file-name-3" class="file-name"></span>
+											</div>
+										</div>
+										
+										<!-- Fourth File Upload -->
+										<div class="col-md-4">
+											<div class="custom-file-upload">
+												<input type="file" id="file-upload-4" class="form-control"
+													onchange="displayFileName('file-upload-4', 'file-name-4')">
+												<label for="file-upload-4" id="file-label-4">
+													<span class="upload-text" id="upload-text">Upload Staff Photo</span>
+													<span class="upload-icon">
+														<i class="fas fa-file-upload"></i>
+													</span>
+												</label>
+												<span id="file-name-4" class="file-name"></span>
+											</div>
+										</div>
+									</div>
+								</div>	
+								
+								<div class="d-flex justify-content-center">
+							<button class="btn"
+								style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								id="staffenroll">
+								Enroll Staff
+							</button>
+						</div>						
+							
+
+						</div>
+						
+
+					</div>
+
+
+				</div>
+
+
+			
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+<script th:inline="javascript">
+    function displayFileName(inputId, outputId) {
+        const fileInput = document.getElementById(inputId);
+        const fileNameSpan = document.getElementById(outputId);
+        const fileName = fileInput.files[0]?.name || 'No file chosen';
+        fileNameSpan.textContent = fileName;
+    }
+
+    function isValidAge(dob) {
+        const today = new Date();
+        const birthDate = new Date(dob);
+        let age = today.getFullYear() - birthDate.getFullYear();
+        const monthDifference = today.getMonth() - birthDate.getMonth();
+
+        // Adjust age if the birth date hasn't occurred yet this year
+        if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
+            age--;
+        }
+
+        // Age should be at least 18
+        return age >= 18;
+    }
+
+$(document).ready(function () {
+    $('#staffenroll').click(function () {
+        const dob = document.getElementById('dob-input').value;
+        
+        if (!isValidAge(dob)) {
+            Swal.fire({
+                title: 'Invalid Date of Birth',
+                text: 'Age must be at least 18 years old.',
+                icon: 'error',
+                confirmButtonText: 'OK',
+                background: '#f5f5f5',
+                confirmButtonColor: '#414f69'
+            });
+            return false;
+        }
+
+        const staffData = {
+            name: document.getElementById('staff-name-input').value,
+            phoneNumber: document.getElementById('phone-number-input').value,
+            gender: document.getElementById('gender-select').value,
+            dateOfBirth: dob,
+            educationQualification: document.getElementById('educationQualification').value,
+            additionalSkills: document.getElementById('skills-select').value,
+            aadharCardUrl: document.getElementById('file-name-1').textContent,
+            rationCardUrl: document.getElementById('file-name-3').textContent,
+            bankPassbookUrl: document.getElementById('file-name-2').textContent,
+            staffPhotoUrl: document.getElementById('file-name-4').textContent,
+            address: document.getElementById('address-input').value, // Ensure this is included
+            groupId: document.getElementById('selfHelpGroupDropdown').value,
+        };
+
+        console.log(staffData); // Debug log
+
+        $.ajax({
+            url: '/gcc/api/nulm/saveStaff',
+            method: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify(staffData),
+            success: function (response) {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: response,
+                }).then(function () {
+                    location.reload();
+                });
+            },
+            error: function (xhr, status, error) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Error',
+                    text: 'Error saving staff details: ' + xhr.responseText,
+                });
+            }
+        });
+    });
+
+
+	    document.getElementById('educationQualification').addEventListener('change', function () {
+	        var selectedValue = this.value;
+	        var courseNameField = document.getElementById('courseNameField');
+
+	        if (selectedValue === 'UG' || selectedValue === 'PG') {
+	            courseNameField.style.display = 'block';
+	        } else {
+	            courseNameField.style.display = 'none';
+	        }
+	    });
+
+	    function loadSchemeGroupNames() {
+	        $.ajax({
+	            url: '/gcc/api/nulm/getAllSchemeGroupNames',
+	            method: 'GET',
+	            dataType: 'json',
+	            success: function (data) {
+	                var $dropdown = $('#selfHelpGroupDropdown');
+	                $dropdown.empty();
+	                $dropdown.append('<option value="">Select Scheme Group</option>');
+	               $.each(data, function (index, group) {
+                    $dropdown.append('<option value="' + group.group_id + '">' + group.group_name + '</option>');
+                });
+	            },
+	            error: function (xhr, status, error) {
+	                console.error('Error fetching scheme group names:', error);
+	            }
+	        });
+	    }
+
+	    loadSchemeGroupNames();
+	});
+
+</script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/update.html b/src/main/resources/templates/modules/nulm/update.html
new file mode 100644
index 0000000..589f79e
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/update.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="ISO-8859-1">
+<title>Insert title here</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/updated-staff.html b/src/main/resources/templates/modules/nulm/updated-staff.html
new file mode 100644
index 0000000..6cb2e5d
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/updated-staff.html
@@ -0,0 +1,380 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Staff Details Updation</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 active" aria-current="page">Staff Details Updation</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+                    <div class="card-block">
+						
+                        <div>
+							
+							<form id="departmentFilterForm" method="GET" action="/gcc/nulm/updateStaff">
+							    <div class="form-group">
+							        <label for="zone">Zone (Department)</label>
+							        <select class="form-control" id="zone" name="department" style="width: 300px;" onchange="this.form.submit()">
+							            <option value="">Select Zone</option>
+							            <option th:each="department : ${departments}"
+							                    th:value="${department.department}"
+							                    th:text="${department.department}"
+							                    th:selected="${department.department == selectedDepartment}">
+							            </option>
+							        </select>
+							    </div>
+							</form>
+                            <table id="salaryDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+                                <thead class="thead-dark">
+                                    <tr role="row">
+                                        <th>S.No</th>
+                                        <th>Employee ID</th>
+							            <th>Employee Name</th>
+							            <th>Designation</th>
+							            <th>Gender</th>
+							            <th>Date Of Birth</th>
+                                        <th>Action</th>
+                                    </tr>
+                                </thead>
+                                 <tbody>
+                                     <tr th:each="enrollments, i : ${enrollments}">
+                                      <td th:text="${i.count}">0</td>
+                                      <td th:text="${enrollments.emp_id}"></td>
+                                        <td th:text="${enrollments.name}"></td>
+                                        <td th:text="${enrollments.designation}"></td>
+                                        <td th:text="${enrollments.gender}"></td>
+                                        <td th:text="${enrollments.date_of_birth}"></td>
+                                        <td class="text-center">
+                                            <a href="#" th:onclick="return callEdit([[${enrollments.enrollment_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit"><i class="ik ik-edit f-16 mr-15 text-green"></i></a>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                                <tfoot class="thead-dark">
+                                    <tr role="row">
+                                        <th>S.No</th>
+                                        <th>Employee ID</th>
+							            <th>Employee Name</th>
+							            <th>Designation</th>
+							            <th>Gender</th>
+							            <th>Date Of Birth</th>
+                                        <th>Action</th>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </div>
+                    </div>
+						
+
+					
+	
+	
+	<!-- Enrollment Edit Modal -->
+<div class="modal fade" id="editEnrollmentModal" tabindex="-1" role="dialog" aria-labelledby="editEnrollmentModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="editEnrollmentModalLabel">Edit Enrollment Details</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <!-- Form for Editing Enrollment -->
+                <form id="editEnrollmentForm">
+                    <input type="hidden" id="enrollmentId" name="enrollmentId">
+                    <div class="form-group">
+                        <label for="name">Name</label>
+                        <input type="text" class="form-control" id="name" name="name" disabled style="color: black;">
+                    </div>
+                    <div class="form-group">
+                        <label for="dateOfBirth">Date of Birth</label>
+                        <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="gender">Gender</label>
+                        <input type="text" class="form-control" id="gender" name="gender" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="gender">Designation</label>
+                        <input type="text" class="form-control" id="designation" name="designation" disabled style="color: black;">
+                    </div>
+                    <div class="form-group">
+					      <label for="inchargeName">Incharge Name</label>
+					      <input type="text" class="form-control" id="inchargename" name="inchargename" disabled style="color: black;">
+					 </div>
+					 <div class="form-group">
+						 <label for="phoneNumber">Incharge Number</label>
+						 <input type="number" class="form-control" id="inchargeno" name="inchargeno" disabled style="color: black;">
+					 </div>
+					 <div class="form-group">
+					    <label for="shg">Self Help Group</label>
+					    <select class="form-control" id="shg" name="shg" required>
+					        <!-- Dropdown options will be populated dynamically via JavaScript -->
+					    </select>
+					</div>
+					
+					<div class="form-group">
+					    <label for="orderNumber">Order Number</label>
+					    <select class="form-control" id="orderNumber" name="orderNumber" required>
+					        <!-- Dropdown options will be populated dynamically via JavaScript -->
+					    </select>
+					</div>
+                    <!-- Add more fields as needed -->
+                    <button type="button" class="btn btn-primary" id="updateEnrollmentButton">Save Changes</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+	
+	</div>
+
+
+				</div>
+
+
+			
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+<script th:inline="javascript">
+
+ $(document).ready(function () {
+        // Initialize DataTable
+        const table = $('#salaryDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                { targets: 'no-sort', orderable: false }
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', 'Show all']
+            ],
+            scrollY: '50vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: [
+                { extend: 'pageLength', className: 'btn btn-warning' },
+                { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary', id: 'copyBtn' },
+                { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary', id: 'excelBtn' },
+                { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary', id: 'csvBtn' },
+                { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary', id: 'pdfBtn' }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false       
+        });
+
+        // Function to open the edit modal and populate data
+        window.callEdit = function (enrollmentId) {
+            fetchEnrollmentDetails(enrollmentId);
+            return false; // Prevent default anchor click behavior
+        };
+        
+               function loadDepartments(selectedDepartment) {
+			    $.ajax({
+			        url: '/gcc/api/nulm/getDepartment',
+			        type: 'GET',
+			        success: function (response) {
+			            const departmentDropdown = $('#zone');
+			            departmentDropdown.empty(); // Clear existing options
+			            departmentDropdown.append('<option value="">Select Zone</option>');
+			
+			            response.forEach(function (department) {
+			                const departmentName = department.department; // Correct the attribute name if necessary
+			                const isSelected = departmentName === selectedDepartment ? 'selected' : '';
+			                departmentDropdown.append(new Option(departmentName, departmentName, false, isSelected));
+			            });
+			
+			            // If no department selected, show "Select Zone"
+			            if (!selectedDepartment) {
+			                departmentDropdown.val('');
+			            }
+			        },
+			        error: function (xhr, status, error) {
+			            console.error('Error fetching departments:', error);
+			        }
+			    });
+			}
+
+        // Load departments on page load
+        const selectedDepartment = /*[[${selectedDepartment}]]*/ ''; // Get this from Thymeleaf or other server-side context
+        loadDepartments(selectedDepartment);
+
+        function fetchEnrollmentDetails(enrollmentId) {
+            $.ajax({
+                url: `/gcc/api/nulm/getEnrollmentdeatilsByID/${enrollmentId}`,
+                type: 'GET',
+                success: function (response) {
+                    if (response && response.length > 0) {
+                        const enrollment = response[0];
+                        // Populate modal fields with data
+                        $('#enrollmentId').val(enrollment.enrollment_id);
+                        $('#name').val(enrollment.name);
+                        $('#dateOfBirth').val(enrollment.date_of_birth);
+                        $('#gender').val(enrollment.gender);
+                        $('#designation').val(enrollment.designation);
+                        $('#inchargename').val(enrollment.incharge_name);
+                        $('#inchargeno').val(enrollment.incharge_phoneno);
+                        
+                        // Call fetchDropdownData and pass the existing group and order values
+                        fetchDropdownData(enrollment.group_id, enrollment.order_id);
+                        
+                        // Open the modal
+                        $('#editEnrollmentModal').modal('show');
+                    } else {
+                        alert('Enrollment details not found.');
+                    }
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error fetching enrollment details:', error);
+                    alert('An error occurred while fetching enrollment details.');
+                }
+            });
+        }
+
+        function fetchDropdownData(selectedGroupId, selectedOrderId) {
+            // Fetch Self Help Group dropdown
+            $.ajax({
+                url: '/gcc/api/nulm/selfHelpGroups',
+                type: 'GET',
+                success: function (response) {
+                    const selfHelpGroupDropdown = $('#shg');
+                    selfHelpGroupDropdown.empty(); // Clear existing options
+                    selfHelpGroupDropdown.append('<option value="">Select Self Help Group</option>');
+
+                    response.forEach(function (item) {
+                        const isSelected = item.groupId == selectedGroupId ? 'selected' : ''; // Check if this option should be selected
+                        selfHelpGroupDropdown.append(new Option(item.groupName, item.groupId, false, isSelected));
+                    });
+
+                    // If no group selected, show "Select Self Help Group"
+                    if (!selectedGroupId) {
+                        selfHelpGroupDropdown.val('');
+                    }
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error fetching self-help groups:', error);
+                }
+            });
+
+            // Fetch Order Number dropdown
+            $.ajax({
+                url: '/gcc/api/nulm/orderNumbers',
+                type: 'GET',
+                success: function (response) {
+                    const orderNumberDropdown = $('#orderNumber');
+                    orderNumberDropdown.empty(); // Clear existing options
+                    orderNumberDropdown.append('<option value="">Select Order Number</option>');
+
+                    response.forEach(function (item) {
+                        const isSelected = item.orderId == selectedOrderId ? 'selected' : ''; // Check if this option should be selected
+                        orderNumberDropdown.append(new Option(item.orderNumber, item.orderId, false, isSelected));
+                    });
+
+                    // If no order selected, show "Select Order Number"
+                    if (!selectedOrderId) {
+                        orderNumberDropdown.val('');
+                    }
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error fetching order numbers:', error);
+                }
+            });
+        }
+
+        $('#updateEnrollmentButton').on('click', function () {
+            const enrollmentId = $('#enrollmentId').val();
+            const updatedData = {
+                name: $('#name').val(),
+                dateOfBirth: $('#dateOfBirth').val(),
+                gender: $('#gender').val(),
+                groupId: $('#shg').val(),  // Get the selected group_id from dropdown
+                orderId: $('#orderNumber').val()  // Get the selected order_id from dropdown
+            };
+
+            $.ajax({
+                url: `/gcc/api/nulm/updateEnrollment/${enrollmentId}`,
+                type: 'POST',
+                data: updatedData,
+                success: function (response) {
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'Enrollment updated successfully!',
+                        icon: 'success',
+                        confirmButtonText: 'OK'
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            $('#editEnrollmentModal').modal('hide'); // Hide the modal
+                            location.reload(); // Optionally reload the page to refresh the data
+                        }
+                    });
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error updating enrollment details:', error);
+                    alert('An error occurred while updating enrollment details.');
+                }
+            });
+        });       
+
+
+    });
+
+</script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/nulm/zone-wise-report.html b/src/main/resources/templates/modules/nulm/zone-wise-report.html
new file mode 100644
index 0000000..8cef154
--- /dev/null
+++ b/src/main/resources/templates/modules/nulm/zone-wise-report.html
@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+
+<body>
+	<div class="wrapper">
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+			<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Zone wise Report</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 active" aria-current="page">Zone wise Report</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+
+					<!-- Filters Section -->
+					<div class="row">
+						
+						<div class="col-sm-3">
+							<label for="zone">Zone</label>
+							<select id="zone" class="form-control">
+								<option value="">Select</option>
+								<option value="1">Zone 01</option>
+								<option value="2">Zone 02</option>
+								<option value="3">Zone 03</option>
+								<option value="4">Zone 04</option>
+								<option value="5">Zone 05</option>
+								<option value="6">Zone 06</option>
+								<option value="7">Zone 07</option>
+								<option value="8">Zone 08</option>
+								<option value="9">Zone 09</option>
+								<option value="10">Zone 10</option>
+								<option value="11">Zone 11</option>
+								<option value="12">Zone 12</option>
+								<option value="13">Zone 13</option>
+								<option value="14">Zone 14</option>
+								<option value="15">Zone 15</option>
+							</select>
+						</div>
+						
+						<!-- Division -->
+						<div class="col-md-3 form-group">
+							<label for="division">Division</label>
+							<select class="form-control" id="division" name="division" required>
+								<option value="">Select Division</option>
+								<option th:each="division : ${divisionList}" th:value="${division.division}" th:text="${division.division}"
+									th:selected="${division.division == selectedDivision}">
+								</option>
+							</select>
+						</div>
+						
+						<!-- Year -->
+						<div class="col-md-3 form-group">
+							<label for="year">Year</label>
+							<select class="form-control" id="year" name="year" required>
+								<option value="">Select Year</option>
+								<option th:each="year : ${yearList}" th:value="${year.year}" th:text="${year.year}"
+									th:selected="${year.year == selectedYear}">
+								</option>
+							</select>
+						</div>
+						
+						<!-- Month -->
+						<div class="col-md-3 form-group">
+							<label for="month">Month</label>
+							<select id="month" class="form-control" name="month" required>
+								<option value="">Select Month</option>
+								<option th:each="month : ${monthList}" th:value="${month.month}" th:text="${month.month}"
+									th:selected="${month.month == selectedMonth}">
+								</option>
+							</select>
+						</div>
+
+						<div class="col-sm-3">
+							<label for="salaryStatus">Salary Status:</label>
+							<select id="salaryStatus" class="form-control">
+								<option value="">Select</option>
+								<option value="Initiated">Initiated</option>
+								<option value="Approved">Approved</option>
+							</select>
+						</div>
+
+						<div class="col-sm-3">
+							<label for="selfhelp">Self Help Group:</label>
+							<select id="selfhelp" class="form-control">
+								<option value="">Select</option>
+								<!-- Group names will be populated here -->
+							</select>
+						</div>
+
+
+
+						<div class="col-sm-3">
+
+							<button class="btn btn-primary mt-4" onclick="fetchZoneReport()">Get Salary Info</button>
+						</div>
+					</div>
+
+					<!-- Salary Report Table -->
+					<div class="card-block mt-3">
+						<table id="salaryreporttable" class="table table-striped table-bordered">
+							<thead class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Incharge Name</th>
+									<th>Incharge Designation</th>
+									<th>Zone</th>
+									<th>Division</th>
+									<th>Self Help Group</th>
+									<th>Days Present</th>
+									<th>OD</th>
+									<th>Total Days for Salary</th>
+									<th>Total Days</th>
+									<th>Total Days Absent</th>
+									<th>Month</th>
+									<th>Year</th>
+									<th>Salary Amount</th>
+									<th>Salary Status</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr th:each="zone, i : ${zonewiseReport}">
+									<td th:text="${i.count}">1</td>
+									<td th:text="${zone.emp_id}"></td>
+									<td th:text="${zone.name}"></td>
+									<td th:text="${zone.incharge_name}"></td>
+									<td th:text="${zone.incharge_designation}"></td>
+									<td th:text="${zone.zone}"></td>
+									<td th:text="${zone.division}"></td>
+									<td th:text="${zone.group_name}"></td>
+									<td th:text="${zone.total_days_present}"></td>
+									<td th:text="${zone.total_days_od}"></td>
+									<td th:text="${zone.total_days_salary}"></td>
+									<td th:text="${zone.total_days}"></td>
+									<td th:text="${zone.total_days_absent}"></td>
+									<td th:text="${zone.imonth}"></td>
+									<td th:text="${zone.iyear}"></td>
+									<td th:text="${zone.total_salary}"></td>
+									<td th:text="${zone.salary_status}"></td>
+								</tr>
+							</tbody>
+							<tfoot class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Incharge Name</th>
+									<th>Incharge Designation</th>
+									<th>Zone</th>
+									<th>Division</th>
+									<th>Self Help Group</th>
+									<th>Days Present</th>
+									<th>OD</th>
+									<th>Total Days for Salary</th>
+									<th>Total Days</th>
+									<th>Total Days Absent</th>
+									<th>Month</th>
+									<th>Year</th>
+									<th>Salary Amount</th>
+									<th>Salary Status</th>
+								</tr>
+							</tfoot>
+						</table>
+					</div>
+
+				</div>
+			</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<div th:replace="~{fragments/modules/base/script :: script}"></div>
+
+	<script th:inline="javascript">
+		
+		function loadYear(selectedYear) {
+				$.ajax({
+					url: '/gcc/api/nulm/getYear',
+					type: 'GET',
+					success: function (response) {
+						const yearDropdown = $('#year');
+						yearDropdown.empty(); // Clear existing options
+						yearDropdown.append('<option value="">Select Year</option>');
+
+						response.forEach(function (year) {
+							const yearName = year.year; // Correct the attribute name if necessary
+							const isSelected = yearName === selectedYear ? 'selected' : '';
+							yearDropdown.append(new Option(yearName, yearName, false, isSelected));
+						});
+
+						// If no department selected, show "Select Zone"
+						if (!selectedYear) {
+							yearDropdown.val('');
+						}
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching departments:', error);
+					}
+				});
+			}
+
+
+			const selectedYear = /*[[${selectedYear}]]*/ ''; // Get this from Thymeleaf or other server-side context
+			loadYear(selectedYear);
+
+			function loadMonth(selectedMonth) {
+				const year = document.getElementById('year').value; // Get the selected year
+				if (!year) {
+					$('#month').empty().append('<option value="">Select Month</option>'); // Clear month dropdown if no year selected
+					return; // Exit if no year is selected
+				}
+
+				$.ajax({
+					url: `/gcc/api/nulm/getMonth?year=${year}`,
+					type: 'GET',
+					success: function (response) {
+						const monthDropdown = $('#month');
+						monthDropdown.empty(); // Clear existing options
+						monthDropdown.append('<option value="">Select Month</option>');
+
+						response.forEach(function (month) {
+							const monthName = month.month;
+							monthDropdown.append(new Option(monthName, monthName));
+						});
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching months:', error);
+					}
+				});
+			}
+
+			// Load months when the year changes
+			document.getElementById('year').addEventListener('change', function () {
+				loadMonth(); // Call loadMonth when the year is selected
+			});
+			
+			function loadDivision(selectedDivision) {
+				const zone=document.getElementById('zone').value;
+				console.log(zone);
+					$.ajax({
+						url: '/gcc/api/nulm/getDivisionList',
+						type: 'GET',
+						data: {
+							zone: zone
+						},
+						success: function (response) {
+							const divisionDropdown = $('#division');
+							divisionDropdown.empty(); // Clear existing options
+							divisionDropdown.append('<option value="">Select Division</option>');
+
+							response.forEach(function (division) {
+								const divisionName = division.division; // Correct the attribute name if necessary
+								const isSelected = divisionName === selectedDivision ? 'selected' : '';
+								divisionDropdown.append(new Option(divisionName, divisionName, false, isSelected));
+							});
+
+							// If no department selected, show "Select Zone"
+							if (!selectedDivision) {
+								divisionDropdown.val('');
+							}
+						},
+						error: function (xhr, status, error) {
+							console.error('Error fetching zone:', error);
+						}
+					});
+				}
+				
+				// Load division when zone selected
+			document.getElementById('zone').addEventListener('change', function () {
+			loadDivision(); // Call loadDivision when the zone is selected
+			});
+
+
+
+		function fetchZoneReport() {
+			const month = document.getElementById('month').value;
+			const year = document.getElementById('year').value;
+			const salaryStatus = document.getElementById('salaryStatus').value;
+			const groupName=document.getElementById('selfhelp').value;
+			const zone=document.getElementById('zone').value;
+			const division=document.getElementById('division').value;
+
+			if (month && year) {
+				window.location.href = `/gcc/nulm/salary-zonereport?month=${month}&year=${year}&salaryStatus=${salaryStatus}
+				&groupName=${groupName}&zone=${zone}&division=${division}`;
+			} else {
+				alert("Please select both month and year.");
+			}
+		}
+		$(document).ready(function () {
+
+			function clearUrlParams() {
+				const currentUrl = window.location.href;
+				const urlWithoutParams = currentUrl.split('?')[0]; // Remove the query parameters
+				window.history.replaceState({}, document.title, urlWithoutParams); // Replace the current URL without params
+			}
+
+			// Call this on page load to reset the URL
+			clearUrlParams();
+
+			// Initialize DataTable
+			var table = $('#salaryreporttable').DataTable({
+				dom: 'Bftip',
+				columnDefs: [
+					{targets: 'no-sort', orderable: false}
+				],
+				lengthMenu: [
+					[50, 100, 200, 500, -1],
+					['50 rows', '100 rows', '200 rows', 'Show all']
+				],
+				scrollY: '50vh',
+				fixedColumns: {
+					left: 1,
+					right: 1
+				},
+				buttons: [
+					{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+					{
+						title: 'Data export',
+						extend: 'copyHtml5',
+						text: 'Copy',
+						className: 'btn btn-secondary',
+						id: 'copyBtn'
+					},
+					{
+						extend: 'pdfHtml5',
+						text: 'PDF',
+						className: 'btn btn-secondary',
+						id: 'pdfBtn',
+						exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
+                },
+                orientation: 'landscape', // Change to landscape for more horizontal space
+						pageSize: 'A3', // You can change to A4 or A3 depending on your needs
+						customize: function (doc) {
+							// Custom column widths for better fit
+							doc.content[1].table.widths = ['4%', '8%', '8%', '8%', '9%', '4%', '6%', '8%', '7%', '6%', '6%', '6%', '6%', '9%', '9%', '7%','6%'];
+
+							// Optional: Adjust font size if needed
+							doc.styles.tableBodyEven.alignment = 'center';
+							doc.styles.tableBodyOdd.alignment = 'center';
+						}
+					},
+					{
+						extend: 'excelHtml5',
+						text: 'EXCEL',
+						className: 'btn btn-secondary',
+						id: 'excelBtn'
+					},
+					{
+						extend: 'csvHtml5',
+						text: 'CSV',
+						className: 'btn btn-secondary',
+						id: 'csvBtn'
+					}
+				],
+				fixedHeader: true,
+				autoWidth: true,
+				responsive: true,
+				searching: true,
+				select: false,
+				processing: false
+			});
+
+
+		});
+		$(document).ready(function () {
+			$.ajax({
+				url: '/gcc/api/nulm/selfHelpGroups', 
+				type: 'GET',
+				success: function (data) {
+					// Clear existing options (if any)
+					$('#selfhelp').empty().append('<option value="">Select</option>');
+
+					// Check if data is an array and iterate through it
+					if (Array.isArray(data)) {
+						let options = '';
+						data.forEach(function (group) {
+							// Access the correct properties
+							options += `<option value="${group.groupName}">${group.groupName}</option>`;
+						});
+						$('#selfhelp').append(options);
+					} else {
+						console.error("Data is not an array:", data);
+					}
+				},
+				error: function (xhr, status, error) {
+					console.error("Error fetching self-help groups:", error);
+				}
+			});
+		});
+
+
+
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/modules/sos/closed_inbox.html b/src/main/resources/templates/modules/sos/closed_inbox.html
new file mode 100644
index 0000000..db5e9f3
--- /dev/null
+++ b/src/main/resources/templates/modules/sos/closed_inbox.html
@@ -0,0 +1,427 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>SOS</h5>
+                                            <span>Closed Request List</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" aria-current="page">SOS</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Closed Request List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="circularDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort" width="2%">S.No</th>
+														<th class="text-center" width="10%">Type</th>
+														<th class="text-center no-sort" width="2%">Mode</th>
+						 								<th class="text-center" width="10%">Name</th>
+						 								<th class="text-center" width="10%">Mobile</th>
+						 								<th class="text-center" width="10%">Zone</th>
+														<th class="text-center" width="10%">ward</th>
+														<th class="text-center" width="10%">Street Name</th>
+														<th class="text-center" width="10%">Comments</th>
+														<th class="text-center" width="10%">Status</th>
+						                                <th class="text-center no-sort no-exportable no-print" width="5%"><i class="ik ik-more-horizontal"></i></th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- 
+                                                <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Category</th>
+						 								<th class="text-center">Type</th>
+						 								<th class="text-center">Department</th>
+						 								<th class="text-center">Date</th>
+														<th class="text-center">Subject</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></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/circular/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/circular/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+       		var uploadDirectory = /*[[${uploadDirectory}]]*/'';
+       		
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Circular List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_rescue_data(){
+	        	var apiUrl = '/gcc/api/sos/getRescueList?status=1';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_rescue_list(){
+	        	get_rescue_data().then(function(rescueList) {
+	    		    // Handle the complaint list
+	    		    generate_table(rescueList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching resuce list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching rescue list:', error);
+			        }
+	    		});
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#circularDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false },
+						  { targets: 5, orderSequence: ['desc'] }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        /*scrollY: '50vh',*/
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: true,
+				        searching: false,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	//var rowNum = data.length;
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+					var file_text="";
+					var filetype="";
+					var rescueid=row['id'];
+					var action =`<center><a href="#" onclick="return viewFile(${rescueid});" class="text-blue" data-animation="true" data-toggle="tooltip" data-placement="top" title="View Circular Details" data-original-title="View Circular Details"><i class="ik ik-eye f-16 text-blue"></i></a></center>`;
+			                    
+	                table.row.add([
+	                	rowNum++,
+	                	row['request_type'],
+	                	row['modeofcomplient'],
+	                    row['contact_name'],
+	                    row['contact_number'],
+	                    row['zone'],
+	                    row['ward'],
+	                    row['streetname'],
+	                    row['remarks'],
+	                    row['statusText'],
+	                    action
+	                ]).draw(false);
+	            });
+	            
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+	        
+	        /* Get Complaints Data */
+	        function viewData(rescueid){
+	        	var apiUrl = '/gcc/api/sos/getRescueUpdateData?rescueid='+rescueid;
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        function viewFile(rescueid) {
+	            viewData(rescueid).then(function(rescuedata) {
+	                $.each(rescuedata, function(index, row) {
+	                    // Show Modal Box
+	                    $("#viewFileBox").modal({
+	                        backdrop: 'static',
+	                        keyboard: false
+	                    });
+	                    var fileHTML='';
+	                    var fileHTMLleft = '';
+	                    var fileHTMLright = '';
+	                    $("#viewFileTitle").html("Rescue Information");
+	                    
+	                    $.each(row['Data'], function(index2, rowData) {
+
+		                    fileHTMLleft = `<div class="card mb-0">
+									             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+									                	<h3>Complaint Details</h3>
+									                </div>
+									                <div class="card-body">
+										                <table class="table table-borderless table-vcenter mb-0" style="font-size:12px;">
+													      <tbody>
+													        <tr>
+													          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+													          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+													           ${convertdate(rowData['cdate'])}
+													          </td>
+													        </tr>
+													        
+													        <tr>
+													          <th style="padding: 0.45rem 0.45rem;">Contact Name</th>
+													          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+													           ${rowData['contact_name']}
+													          </td>
+													        </tr>
+													        <tr>
+													          <th style="padding: 0.45rem 0.45rem;">Contact Number :</th>
+													          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+													           ${rowData['contact_number']}
+													          </td>
+													        </tr>
+													        <tr>
+												        	<td colspan="2" style="padding: 0.45rem 0.45rem;">
+													        	<table class="table table-bordered table-vcenter mb-0">
+													                <thead>
+													                  <tr>
+													                    <th>Zone</th>
+													                    <th>Ward</th>
+													                    <th>Street Name</th>
+													                  </tr>
+													                </thead>
+												                	<tbody>
+												                 		<tr>
+															            	<td class="fw-semibold">${rowData['zone']}</td>
+															            	<td class="fw-semibold">${rowData['ward']}</td>
+															            	<td class="fw-semibold">${rowData['streetname']}</td>
+													                  	</tr>
+												                	</tbody>
+												              	</table>
+												        	</td>
+												        </tr>
+													        <tr>
+													          <th colspan="2" style="padding: 0.45rem 0.45rem;"><b>Request Type: </b>${rowData['request_type']}  |  <b>Status: </b>${rowData['status_name']}</p></th>
+													        </tr>
+													        <tr>
+													        	<td colspan="2" style="padding: 0.45rem 0.45rem;">
+														        	<table class="table table-bordered table-vcenter mb-0">
+														                <thead>
+														                  <tr>
+														                    <th>Complaint <i class="fa fa-arrow-right"></i> Status</th>
+														                    <th class="text-right" id="complaint_forward_link"></th>
+														                  </tr>
+														                </thead>
+													                	<tbody>
+													                 		<tr>
+																            	<td colspan="2" class="fw-semibold">
+																            	
+															                    </td>
+														                  	</tr>
+													                	</tbody>
+													              	</table>
+													        	</td>
+													        </tr>
+													      </tbody>
+													    </table>
+									                </div>
+									            </div>`;
+	                    	
+		                    if (rowData['officer_activity_data'] && rowData['officer_activity_data'].length > 0) {
+		                        $.each(rowData['officer_activity_data'], function(activityIndex, activity) {
+		                            var filepath = activity['imageUrl'];
+		                            var filetype = activity['filetype'];
+		                            
+		                            fileHTMLright += `<b>Officer Remarks:</b><br>${activity['remarks']}<hr style="padding:1px;">`;
+		                            
+		                            if (filetype === 'application/pdf') {
+		                            	fileHTMLright += `<iframe src="${filepath}" type="application/pdf" width="100%" height="600px"></iframe>`;
+		                            } else if (filetype === 'image/jpeg' || filetype === 'image/png') {
+		                            	fileHTMLright += `<b>Activity Image:</b><br><img src="${filepath}" alt="${filetype}" style="max-width:100%; height:auto;">`;
+		                            } else {
+		                            	fileHTMLright += ``;
+		                            }
+		                            
+		                       });
+		                    } else {
+		                    	fileHTMLright = '<p>No activity data available for this rescue.</p>';
+		                    }
+	                    });
+	                    
+	                    fileHTML=`<div class="row">
+	                    				<div class="col-lg-6"><div class="block block-rounded">${fileHTMLleft}</div></div>
+	                    				<div class="col-lg-6"><div class="block block-rounded">${fileHTMLright}</div></div>
+	                    		  </div>`;
+	                    		  
+	                    $('#viewFileBoxBody').html(fileHTML); // Inject content into modal body
+	                });
+	            }).catch(function(error) {
+	                // Handle errors
+	                if (error && error.message) {
+	                    console.error('Error fetching rescue details:', error.message);
+	                } else {
+	                    console.error('An error occurred while fetching rescue details:', error);
+	                }
+	            });
+	            return false;
+	        }
+	        
+			
+			$(document).ready(function() {
+				call_loading();
+				get_rescue_list();
+			});
+			
+			
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/sos/inbox.html b/src/main/resources/templates/modules/sos/inbox.html
new file mode 100644
index 0000000..244efef
--- /dev/null
+++ b/src/main/resources/templates/modules/sos/inbox.html
@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Circular List</h5>
+                                            <span>Circular / Minutes</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" aria-current="page">SOS</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Request List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="circularDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort" width="2%">S.No</th>
+														<th class="text-center" width="10%">Type</th>
+														<th class="text-center no-sort" width="2%">Mode</th>
+						 								<th class="text-center" width="10%">Name</th>
+						 								<th class="text-center" width="10%">Mobile</th>
+						 								<th class="text-center" width="10%">Zone</th>
+														<th class="text-center" width="10%">ward</th>
+														<th class="text-center" width="10%">Street Name</th>
+														<th class="text-center" width="10%">Comments</th>
+														<th class="text-center" width="10%">Status</th>
+						                                <th class="text-center no-sort no-exportable no-print" width="5%"><i class="ik ik-more-horizontal"></i></th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- 
+                                                <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Category</th>
+						 								<th class="text-center">Type</th>
+						 								<th class="text-center">Department</th>
+						 								<th class="text-center">Date</th>
+														<th class="text-center">Subject</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></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/circular/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/circular/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+       		var uploadDirectory = /*[[${uploadDirectory}]]*/'';
+       		
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Circular List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_rescue_data(){
+	        	var apiUrl = '/gcc/api/sos/getRescueList';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_rescue_list(){
+	        	get_rescue_data().then(function(rescueList) {
+	    		    // Handle the complaint list
+	    		    generate_table(rescueList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching resuce list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching rescue list:', error);
+			        }
+	    		});
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#circularDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false },
+						  { targets: 5, orderSequence: ['desc'] }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        /*scrollY: '50vh',*/
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: true,
+				        searching: false,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	//var rowNum = data.length;
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+
+					var action ="1";//`<center><a href="#" onclick="return viewFile('${file_text}','${filetype}');" class="text-blue" data-animation="true" data-toggle="tooltip" data-placement="top" title="View Circular Details" data-original-title="View Circular Details"><i class="ik ik-eye f-16 text-blue"></i></a></center>`;
+			                    
+	                table.row.add([
+	                	rowNum++,
+	                	row['request_type'],
+	                	row['modeofcomplient'],
+	                    row['contact_name'],
+	                    row['contact_number'],
+	                    row['zone'],
+	                    row['ward'],
+	                    row['streetname'],
+	                    row['remarks'],
+	                    row['statusText'],
+	                    action
+	                ]).draw(false);
+	            });
+	            
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+			$(document).ready(function() {
+				call_loading();
+				get_rescue_list();
+			});
+			
+			function viewFile(filename,filetype){
+	        	$("#viewFileBox").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				var filepath= '/gcc/files/circular/'+filename;
+				var fileHTML = '';
+				
+	        	if(filetype=='application/pdf'){
+	        		fileHTML = `<iframe src="${filepath}" type="application/pdf" width="100%" height="600px"></iframe>`;
+					
+				}
+				else{
+					fileHTML =nodata;
+				}
+				
+	        	console.error(fileHTML);
+	        	
+	        	$('#viewFileBoxBody').html(fileHTML); // Inject content into modal body
+				
+				return false;
+			}
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/sos/new_sos.html b/src/main/resources/templates/modules/sos/new_sos.html
new file mode 100644
index 0000000..db4b42c
--- /dev/null
+++ b/src/main/resources/templates/modules/sos/new_sos.html
@@ -0,0 +1,667 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+    <style>
+        html,
+        body,
+        #viewDiv {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
+        }
+
+        
+        label {
+            display: block;
+            margin: 5px 0 2px;
+            font-weight: bold;
+        }
+
+        select,
+        input {
+            width: 100%;
+            padding: 5px;
+        }
+
+        #resetButton {
+            margin-top: 10px;
+            padding: 10px;
+            background-color: #ff5733;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+
+        #resetButton:hover {
+            background-color: #e04e1d;
+        }
+    </style>
+    <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css">
+        <!--[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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>SOS</h5>
+                                            <span>Add SOS Request</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">SOS</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Add SOS Request</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        
+                        <div class="row">
+                        	<div class="col-md-2"></div>
+							<div class="col-md-12">
+                                <div class="card">
+									<form class="request-form" id="request-form" onsubmit="return saveRequest();">
+	                                    <div class="card-header"><h3>New SOS Request Form</h3></div>
+	                               		<div class="card-body">
+											<div class="row">	 
+							                     <div class="col-lg-6">
+													<div class="form-group">
+														<label for="contact_names">Requester Name :</label> 
+														<input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name" required>
+													</div>
+												</div>
+												<div class="col-lg-6">
+													<div class="form-group">
+														<label for="contact_number">Requester Contact Number :</label> 
+														<input type="text" id="contact_number" name="contact_number" class="form-control" placeholder="Contact Number" required>
+													</div>
+												</div>
+												<div class="col-12">
+											    	<div id="viewDiv" style="width: 100%; height: 600px;"> &nbsp;</div>
+												</div>
+												<div id="infoContainer">
+												        <div id="infoDiv">
+												            <label for="zoneInput">Zone:</label>
+												            <input type="text" id="zoneInput" placeholder="Zone" readonly>
+												
+												            <label for="wardInput">Ward:</label>
+												            <input type="text" id="wardInput" placeholder="Ward" readonly>
+												
+												            <label for="roadInput">Road Name:</label>
+												            <input type="text" id="roadInput" placeholder="Road Name" readonly>
+												
+												            <label for="addressInput">Address:</label>
+												            <input type="text" id="addressInput" placeholder="Address" readonly>
+												
+												            <label for="latInput">Latitude:</label>
+												            <input type="text" id="latInput" placeholder="Latitude" readonly>
+												
+												            <label for="longInput">Longitude:</label>
+												            <input type="text" id="longInput" placeholder="Longitude" readonly>
+												
+												            <label for="roadBufferSelect">Roads within Area:</label>
+												            <select id="roadBufferSelect">
+												                <option value="">Select Road</option>
+												            </select>
+												
+												            <button id="resetButton">Reset Map</button>
+												        </div>
+												    </div>
+												<div class="col-lg-6">
+													<div class="form-group">
+			                                            <label for="zone">Select Zone</label>
+			                                            <select class="form-control" id="zone" name="zone" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." onchange="get_ward_list(this.value);" required>
+															<option value=""></option>
+														</select>
+			                                        </div>
+		                                      	</div>
+	                                        	<div class="col-lg-6">
+			                                        <div class="form-group">
+			                                            <label for="ward">Select Ward</label>
+			                                            <select class="form-control" id="ward" name="ward" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required  onchange="get_councillor_details(this.value);">
+															<option value=""></option>
+														</select>
+			                                        </div>
+	                                        	</div>
+	                                        	
+	                                        	<div class="col-lg-6">
+													<div class="form-group">
+			                                            <label for="request_type">Select Request Type</label>
+			                                            <select class="form-control" id="request_type" name="request_type" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required>
+															<option value=""></option>
+															<option value="Rescue">Rescue</option>
+															<option value="Medical">Medical</option>
+															<option value="Food">Food</option>
+														</select>
+			                                        </div>
+		                                      	</div>
+	                                        	<div class="col-lg-6">
+			                                        <div class="form-group">
+			                                            <label for="no_of_count">No Of People Count</label>
+			                                            <input type="text" class="form-control" id="no_of_count" name="no_of_count" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required>
+			                                        </div>
+	                                        	</div>
+											</div>
+	                                        
+											<div class="form-group">
+												<label for="subject">Remarks :</label>
+												<textarea class="form-control" name="remarks" id="remarks" rows="5" placeholder="Remarks if any" data-autosize-input='{ "space": 40 }'></textarea>
+											</div>
+	                                        
+										</div>	 
+	                                  	<div class="card-footer text-right">
+	                                  		<input type="hidden" id="mode" name="mode" value="1913">
+											<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+	                                	</div>
+                                	</form>
+                                </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 th:replace="~{fragments/modules/circular/script :: script}"></script>
+        
+   		<script src="https://js.arcgis.com/4.30/"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			
+	        /* Get Zone and Ward Data */
+	        function get_zone_ward_data(){
+	        	get_zone_ward_list().then(function(zoneWard) {
+	    		    // Handle the zoneward list
+	    		    zoneWardList = zoneWard;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(zoneWardList, function(index, zoneWards) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: zoneWards.zone, // case-sensitive as per object
+	    	                text: "Zone "+ zoneWards.zone
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#zone').append(option);
+	    	        });
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			
+	        /* Get Ward List */
+	        function get_ward_list(zone) {
+
+	            // Assuming get_zone_ward_list() returns a promise that resolves to the zoneWardList
+	            get_zone_ward_list().then(function(zoneWard) {
+	                // Handle the zoneWard list
+	                zoneWardList = zoneWard;
+	                
+	                // Clear any existing options in the ward dropdown
+	                $('#ward').empty();
+	                
+	                var option = $('<option>', {
+                        value:"" ,  // Set ward number as the value
+                        text:""  // Display as "Ward 1", "Ward 2", etc.
+                    });
+	                
+	                $('#ward').append(option);
+	                
+	                $('#councillorName').val('');
+					$('#councillorMobile').val('');
+					
+	            	 // Find the correct zone in the zoneWardList
+	                var selectedZone = zoneWardList.find(function(zoneWards) {	                    
+						return zoneWards.zone == zone;  // Compare the zone value
+	                });
+	                // If the zone is found, iterate over its wards and add options
+	                if (selectedZone) {
+	                    var wardsArray = selectedZone.wards.split(',');  // Split wards string into array
+	                    $.each(wardsArray, function(index, ward) {
+	                        // Create an option element
+	                        option = $('<option>', {
+	                            value: ward.trim(),  // Set ward number as the value
+	                            text: 'Ward ' + ward.trim()  // Display as "Ward 1", "Ward 2", etc.
+	                        });
+	                        // Append the option to the select element
+	                        $('#ward').append(option);
+	                    });
+	                } else {
+	                    console.error('Zone not found');
+	                }
+
+	            }).catch(function(error) {
+	                // Handle errors
+	                console.error('Error fetching ward list:', error);
+	            });
+	        }
+	        
+	        /* Zone and Ward List */
+	    	function get_zone_ward_list() {
+	    	    
+	    		var apiUrl = '/gcc/api/sos/getZoneAndWard';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	    	}
+	        
+			// Save New petition 
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var inputElementComplaintType = $('#request_type');
+				var request_type = inputElementComplaintType.val();
+				var loginId = $('#contact_number').val();
+				if (request_type && loginId) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#request-form')[0]);
+			        formData.append('createdBy',createdBy);
+			        formData.append('loginId',loginId);
+			        saveFormData(formData).then(function(response) {
+			        	const status = response[0].status;
+						if(status!="error"){
+							// Handle the response
+		    		    	Swal.fire({
+		        				title: 'Rescue data saved successfully.',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'success',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					// Reload the current page
+		        					//location.reload();
+		        					// Navigate to a Ack page
+		        					window.location = "/gcc/sos/new";
+		        				}
+		        			});
+						}
+						else{
+							// Handle the response
+							// if response == "error"
+		    		    	Swal.fire({
+		        				title: 'Failed to save rescue data. Please try again!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+		    		    
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save circular:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					//inputElementMobileNo.addClass('is-invalid');
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function saveFormData(formData){
+				var apiUrl = '/gcc/api/sos/saveRequest';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function form_btn_enable(){
+				$("#resetFormBtn").prop("disabled", false);
+				$("#requestSubmitBtn").prop("disabled", false);
+				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+			}
+			
+			function form_btn_disable(){
+				$("#resetFormBtn").prop("disabled", true);
+				$("#requestSubmitBtn").prop("disabled", true);
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+			}
+			
+			$(document).ready(function() {
+				//get_circular_type_data();
+				get_zone_ward_data();
+				//get_department_data();
+				//$('#petitionerMobile').mask('0000000000');
+			});
+		</script>
+		
+		<script>
+        require([
+            "esri/Map",
+            "esri/views/MapView",
+            "esri/layers/FeatureLayer",
+            "esri/widgets/Search",
+            "esri/geometry/geometryEngine",
+            "esri/Graphic",
+            "esri/widgets/LayerList",
+            "esri/widgets/Legend",
+            "esri/geometry/projection"
+        ], function (Map, MapView, FeatureLayer, Search, geometryEngine, Graphic, LayerList, Legend, projection) {
+
+            // Create the map and view
+            const map = new Map({
+                basemap: "streets"
+            });
+
+            const view = new MapView({
+                container: "viewDiv",
+                map: map,
+                center: [80.237617, 13.067439],
+                zoom: 12
+            });
+
+            // Define the road layer (FeatureLayer) to query
+            const roadLayer = new FeatureLayer({
+                url: "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/APIRoadsMap/FeatureServer/0",
+                outFields: ["zone", "ward", "road_name", "address"],
+                renderer: {
+                    type: "simple",
+                    symbol: {
+                        type: "simple-line",
+                        color: "red",
+                        width: 0.5
+                    }
+                },
+                popupTemplate: {
+                    title: "{road_name}",
+                    content: "Zone: {zone}<br>Ward: {ward}<br>Address: {address}"
+                }
+            });
+
+            map.add(roadLayer);
+
+            const searchWidget = new Search({
+                view: view
+            });
+
+            const layerList = new LayerList({
+                view: view
+            });
+
+            // Add widgets to view
+            view.ui.add(layerList, {
+                position: "top-right"
+            });
+
+            const legend = new Legend({
+                view: view
+            });
+            view.ui.add(legend, {
+                position: "bottom-right"
+            });
+            view.ui.add(searchWidget, "top-right");
+
+            // Create a point graphic and store the reference to it for later use
+            let pointGraphic = null;
+            let highlightGraphic = null;  // To store the highlighted road graphic
+
+            // Event listener for map click on the basemap
+            view.on("click", function (event) {
+				reset();
+                const clickedPoint = event.mapPoint; // Capture the clicked point
+
+                // Update latitude and longitude fields
+                document.getElementById("latInput").value = clickedPoint.latitude.toFixed(6);
+                document.getElementById("longInput").value = clickedPoint.longitude.toFixed(6);
+
+                // Create a buffer around the clicked point (500 meters)
+                const buffer = geometryEngine.buffer(clickedPoint, 50, "meters");
+
+                // Query the road layer for roads within the buffer
+                const query = roadLayer.createQuery();
+                query.geometry = buffer;  // Use the buffer geometry to filter results
+                query.spatialRelationship = "intersects";
+                query.outFields = ["road_name"];  // Only fetch road names
+                query.returnGeometry = false;
+
+                roadLayer.queryFeatures(query).then(function (result) {
+                    const roadNames = result.features.map(function (feature) {
+                        return feature.attributes.road_name;
+                    });
+
+                    // Populate the dropdown with road names
+                    populateDropdown(roadNames);
+                }).catch(function (error) {
+                    console.error("Query failed: ", error);
+                });
+
+                // Create a new point graphic to show the clicked location
+                if (pointGraphic) {
+                    view.graphics.remove(pointGraphic); // Remove the old graphic if it exists
+                }
+
+                pointGraphic = new Graphic({
+                    geometry: clickedPoint,
+                    symbol: {
+                        type: "simple-marker",
+                        color: "blue",
+                        size: "14px"
+                    }
+                });
+
+                view.graphics.add(pointGraphic); // Add the point graphic to the map
+            });
+
+            // Function to populate the dropdown with road names
+            function populateDropdown(roadNames) {
+				
+                const dropdown = document.getElementById("roadBufferSelect");
+                dropdown.innerHTML = ''; // Clear existing dropdown items
+                
+                const defaultOption = document.createElement("option");
+                defaultOption.text = "Select a road";
+                dropdown.appendChild(defaultOption);
+                roadNames.sort();
+				
+                // Populate the dropdown with the queried road names
+                if (roadNames.length > 0) {
+                    roadNames.forEach(function (roadName) {
+                        const option = document.createElement("option");
+                        option.value = roadName;
+                        option.text = roadName;
+                        dropdown.appendChild(option);
+                    });
+                } else {
+                    const noRoadsOption = document.createElement("option");
+                    noRoadsOption.text = "No roads found within 500m";
+                    dropdown.appendChild(noRoadsOption);
+                }
+            }
+
+            // When a user selects a road from the dropdown, fetch additional details (zone, ward, address) and zoom to the road
+            document.getElementById("roadBufferSelect").addEventListener("change", function (event) {
+                const selectedRoadName = event.target.value;
+                if (selectedRoadName) {
+                    // Query the road layer to get the details and geometry of the selected road
+                    const query = roadLayer.createQuery();
+                    query.where = `road_name = '${selectedRoadName}'`;  // Query for the selected road name
+                    query.outFields = ["zone", "ward", "address"];  // Get zone, ward, and address
+                    query.returnGeometry = true;  // We need the geometry to zoom to the road
+
+                    roadLayer.queryFeatures(query).then(function (result) {
+                        if (result.features.length > 0) {
+                            const roadDetails = result.features[0].attributes;
+                            const roadGeometry = result.features[0].geometry;
+
+                            // Populate the fields with the road details
+                            document.getElementById("zoneInput").value = roadDetails.zone || "";
+                            document.getElementById("wardInput").value = roadDetails.ward || "";
+                            document.getElementById("addressInput").value = roadDetails.address || "";
+                            document.getElementById("roadInput").value = selectedRoadName;  // Populate the road name field
+							
+							/*
+			                alert(document.getElementById("zoneInput").value);
+			                alert(document.getElementById("wardInput").value);
+			                alert(document.getElementById("addressInput").value);
+			                alert(document.getElementById("roadInput").value);
+			                alert(document.getElementById("latInput").value);
+			                alert(document.getElementById("longInput").value);
+			                alert(document.getElementById("roadBufferSelect").value);
+							*/
+                            // Zoom to the selected road with level 15
+                            view.goTo({
+                                target: roadGeometry,
+                                zoom: 15
+                            });
+
+                            // Highlight the road
+                            if (highlightGraphic) {
+                                view.graphics.remove(highlightGraphic);  // Remove the previous highlight if any
+                            }
+
+                            highlightGraphic = new Graphic({
+                                geometry: roadGeometry,
+                                symbol: {
+                                    type: "simple-line",
+                                    color: "green",
+                                    width: 4
+                                }
+                            });
+
+                            view.graphics.add(highlightGraphic); // Add the highlight graphic to the map
+                        }
+                    }).catch(function (error) {
+                        console.error("Error fetching road details: ", error);
+                    });
+                } else {
+                    // Clear the input fields if no road is selected
+                    document.getElementById("zoneInput").value = "";
+                    document.getElementById("wardInput").value = "";
+                    document.getElementById("addressInput").value = "";
+                    document.getElementById("roadInput").value = "";
+                }
+            });
+
+            // Reset map (clear the point graphic and highlighted road)
+            document.getElementById("resetButton").addEventListener("click", function () {
+                if (pointGraphic) {
+                    view.graphics.remove(pointGraphic); // Remove the point graphic
+                    pointGraphic = null; // Reset the point graphic variable
+                }
+                if (highlightGraphic) {
+                    view.graphics.remove(highlightGraphic); // Remove the highlight graphic
+                    highlightGraphic = null; // Reset the highlight graphic variable
+                }
+                // Clear input fields
+                document.getElementById("zoneInput").value = "";
+                document.getElementById("wardInput").value = "";
+                document.getElementById("addressInput").value = "";
+                document.getElementById("roadInput").value = "";
+                document.getElementById("latInput").value = "";
+                document.getElementById("longInput").value = "";
+                document.getElementById("roadBufferSelect").value = "";
+            });
+			
+			function reset(){
+                
+                // Clear input fields
+                document.getElementById("zoneInput").value = "";
+                document.getElementById("wardInput").value = "";
+                document.getElementById("addressInput").value = "";
+                document.getElementById("roadInput").value = "";
+                //document.getElementById("latInput").value = "";
+                //document.getElementById("longInput").value = "";
+                document.getElementById("roadBufferSelect").value = "";
+			}
+			
+			
+			
+        });
+		/*
+		function test(){
+            alert(document.getElementById("zoneInput").value);
+            alert(document.getElementById("wardInput").value);
+            alert(document.getElementById("addressInput").value);
+            alert(document.getElementById("roadInput").value);
+            alert(document.getElementById("latInput").value);
+            alert(document.getElementById("longInput").value);
+            alert(document.getElementById("roadBufferSelect").value);
+		}*/
+    </script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/sos/pending_inbox.html b/src/main/resources/templates/modules/sos/pending_inbox.html
new file mode 100644
index 0000000..db91a0a
--- /dev/null
+++ b/src/main/resources/templates/modules/sos/pending_inbox.html
@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>SOS</h5>
+                                            <span>Pending Request List</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" aria-current="page">SOS</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Pending Request List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="circularDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort" width="2%">S.No</th>
+														<th class="text-center" width="10%">Type</th>
+						                                <th class="text-center no-sort" width="2%">Mode</th>
+						 								<th class="text-center" width="10%">Name</th>
+						 								<th class="text-center" width="10%">Mobile</th>
+						 								<th class="text-center" width="10%">Zone</th>
+														<th class="text-center" width="10%">ward</th>
+														<th class="text-center" width="10%">Street Name</th>
+														<th class="text-center" width="10%">Comments</th>
+														<th class="text-center" width="10%">Status</th>
+						                                <th class="text-center no-sort no-exportable no-print" width="5%"><i class="ik ik-more-horizontal"></i></th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- 
+                                                <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Category</th>
+						 								<th class="text-center">Type</th>
+						 								<th class="text-center">Department</th>
+						 								<th class="text-center">Date</th>
+														<th class="text-center">Subject</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></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/circular/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/circular/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+       		var uploadDirectory = /*[[${uploadDirectory}]]*/'';
+       		
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Circular List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_rescue_data(){
+	        	var apiUrl = '/gcc/api/sos/getRescueList?status=0';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_rescue_list(){
+	        	get_rescue_data().then(function(rescueList) {
+	    		    // Handle the complaint list
+	    		    generate_table(rescueList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching resuce list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching rescue list:', error);
+			        }
+	    		});
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#circularDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false },
+						  { targets: 5, orderSequence: ['desc'] }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        /*scrollY: '50vh',*/
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: true,
+				        searching: false,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	//var rowNum = data.length;
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+
+					var action =`<center><a href="#" onclick="return viewSOS('${row['id']}');" class="text-blue" data-animation="true" data-toggle="tooltip" data-placement="top" title="View SOS Details" data-original-title="View SOS Details"><i class="ik ik-eye f-16 text-blue"></i></a></center>`;
+			                    
+	                table.row.add([
+	                	rowNum++,
+	                	row['request_type'],
+	                	row['modeofcomplient'],
+	                    row['contact_name'],
+	                    row['contact_number'],
+	                    row['zone'],
+	                    row['ward'],
+	                    row['streetname'],
+	                    row['remarks'],
+	                    row['statusText'],
+	                    action
+	                ]).draw(false);
+	            });
+	            
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+			$(document).ready(function() {
+				call_loading();
+				get_rescue_list();
+			});
+			
+			function viewFile(filename,filetype){
+	        	$("#viewFileBox").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				var filepath= '/gcc/files/circular/'+filename;
+				var fileHTML = '';
+				
+	        	if(filetype=='application/pdf'){
+	        		fileHTML = `<iframe src="${filepath}" type="application/pdf" width="100%" height="600px"></iframe>`;
+					
+				}
+				else{
+					fileHTML =nodata;
+				}
+				
+	        	console.error(fileHTML);
+	        	
+	        	$('#viewFileBoxBody').html(fileHTML); // Inject content into modal body
+				
+				return false;
+			}
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/sos/report.html b/src/main/resources/templates/modules/sos/report.html
new file mode 100644
index 0000000..abeda82
--- /dev/null
+++ b/src/main/resources/templates/modules/sos/report.html
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Complaint List</h5>
+                                            <span>Councillor Petition</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" aria-current="page">Councillor Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Complaint List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="circularDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort" width="2%">S.No</th>
+														<th class="text-center">Department</th>
+														<th class="text-center">Count</th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+		
+	    <div th:replace="~{fragments/modules/circular/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/circular/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Circular Report'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Circular Report'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Circular Report'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Circular Report',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_circular_data(){
+	        	var apiUrl = '/gcc/api/circular/getReport';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_circular_list(){
+	        	get_circular_data().then(function(circularList) {
+
+        			// Iterate over the data array
+        			var rowNum = 1;
+		            $.each(circularList, function(index, row) {
+		                var department_name = row["name"];
+		                department_name = department_name.charAt(0).toUpperCase() + department_name.slice(1);
+
+		                // Create an array to store the dynamic values for this row
+		                var dynamicValues = [];
+
+		                // Iterate over the keys in the row object
+		                for (var key in row) {
+		                    // Check if the key starts with "dynamic_"
+		                    if (key.startsWith('dynamic_')) {
+		                        // Extract the field name without the "dynamic_" prefix
+		                        var fieldName = key.substring('dynamic_'.length);
+		                        // If it's the first row, add the dynamic column to the DataTable header
+		                        if (rowNum === 1) {
+		                            $('#circularDatatable thead tr').append(`<th class="text-center dynamic-column">${fieldName}</th>`);
+		                        }
+		                    }
+		                }
+		                rowNum++;
+		            });
+		                
+	    		    // Handle the complaint list
+	    		    generate_table(circularList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching circular list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching circular list:', error);
+			        }
+	    		});
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data) {
+	            var table = $('#circularDatatable').DataTable({
+	                dom: 'Bftip',
+	                columnDefs: [
+	                    { targets: 'no-sort', "orderable": false },
+	                    { targets: 'no-exportable', "exportable": false }
+	                ],
+	                lengthMenu: [
+	                    [25, 50, 100, 200, 500, -1],
+	                    ['25 rows', '50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+	                ],
+	                /*scrollY: '50vh',*/
+	                fixedColumns: {
+	                    left: 0,
+	                    right: 0
+	                },
+	                buttons: [buttons],
+	                responsive: true,
+	                searching: false,
+	                select: false,
+	                processing: false,
+	            });
+
+	            // Clear Table data
+	            table.clear().draw();
+
+	            // Initialize row number
+	            var rowNum = 1;
+
+	            // Iterate over the data array
+	            $.each(data, function(index, row) {
+	                var department_name = row["name"];
+	                department_name = department_name.charAt(0).toUpperCase() + department_name.slice(1);
+
+	                // Create an array to store the dynamic values for this row
+	                var dynamicValues = [];
+
+	                // Iterate over the keys in the row object
+	                for (var key in row) {
+	                    // Check if the key starts with "dynamic_"
+	                    if (key.startsWith('dynamic_')) {
+	                        // Add the dynamic value to the array
+	                        dynamicValues.push(row[key]);
+	                    }
+	                }
+
+					// Create the row array
+				    var rowData = [
+				        rowNum++,
+				        department_name,
+				        row["total"]
+				    ];
+
+				    // Add each dynamic value to the row array
+				    rowData = rowData.concat(dynamicValues);
+
+				    // Add the row to the DataTable
+				    table.row.add(rowData).draw(false);
+	            });
+
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+	        }
+
+			
+			$(document).ready(function() {
+				call_loading();
+				get_circular_list();
+			});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/works/erp-works-update.html b/src/main/resources/templates/modules/works/erp-works-update.html
new file mode 100644
index 0000000..082a6b8
--- /dev/null
+++ b/src/main/resources/templates/modules/works/erp-works-update.html
@@ -0,0 +1,1022 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+		<link rel="stylesheet" type="text/css" href="node_modules/jquery.datetimepicker/jquery.datetimepicker.css"/ >
+        <!--[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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>ERP Update Form</h5>
+                                            <span>Works Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Works Module</li>
+                                            <li class="breadcrumb-item active" aria-current="page">ERP - Works Update Form</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							<div class="col-md-12">
+                                <div class="card">
+									<form class="request-form" id="request-form" onsubmit="return saveRequest();">
+	                                    <div class="card-header"><h3>Search By Estimate Number</h3></div>
+	                               		<div class="card-body">
+											<div class="form-group">
+	                                           
+	                                            <div class="row">
+		                                            <div class="col-md-3">
+			                                            <select class="form-control" name="estcode" id="estcode" required>
+		                                                    <option>NK</option>
+		                                                    <option>NE</option>
+		                                                    <option>NA</option>
+		                                                    <option>NL</option>
+		                                                    <option>B</option>
+		                                                    <option>Q</option>
+		                                                </select>
+	                                                </div>
+	                                                <div class="col-md-1 text-center" style="padding-top:10px;width:10px;margin:0px;">&sol;</div>
+	                                                <div class="col-md-3"> 
+	                                                	<select class="form-control" name="estyear" id="estyear" required>
+		                                                    <option>20022-2023</option>
+		                                                    <option>20023-2024</option>
+		                                                    <option>20024-2025</option>
+		                                                </select>
+	                                                </div>
+	                                                <div class="col-md-1 text-center" style="padding-top:10px; width:10px;margin:0px;">&sol;</div>
+	                                                <div class="col-md-4">
+		                                            	<input type="text" class="form-control" name="estnumber" id="estnumber" placeholder="Estimate Number" autocomplete="off" required>
+		                                            </div>
+		                                        </div>
+	                                        </div>
+											
+	                                  	</div>
+	                                  	<div class="card-footer text-right">
+											<button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-search"></i>Search</button>
+	                                	</div>
+                                	</form>
+                                </div>
+                            </div>
+							<div class="col-md-12">
+								<div class="card">
+									<form>
+                                    <div class="card-header">
+                                    	<h3>EST - Update Form</h3>
+                                    </div>
+                               		<div class="card-body" id="ptaxPersonalInfo">
+										<div class="form-group">
+											<div class="title text-warning">
+												<h5>1. Basic Details</h5>
+												<hr>
+											</div>
+											
+											<div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="estno">Estimate No <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estno" id="estno" placeholder="Estimate No" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="estdate">Estimate Date <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estdat" id="estdate" placeholder="Estimate Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-2">
+	                                            	<label for="zone">Zone <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="zone" id="zone" placeholder="zone" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-2">
+	                                            	<label for="zone">Ward <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="ward" id="ward" placeholder="Ward" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="projectname">Project Name <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="projectname" id="projectname" placeholder="Project Name" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="location">Location <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="location" id="location" placeholder="Location" autocomplete="off" required>
+                                                </div>
+                                                
+	                                        </div>
+	                                        <br>
+	                                        <div class="title text-warning">
+												<h5>2. Department and Contractor Details</h5>
+												<hr>
+											</div>
+											
+											<div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="department">Department <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="department" id="department" placeholder="Department" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="contractorname">Contractor Name <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="contractorname" id="contractorname" placeholder="Contractor Name" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="contractorperiod">Contractor Period <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="contractorperiod" id="contractorperiod" placeholder="Contractor Period" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        
+	                                        <br>
+	                                        <div class="title text-warning">
+												<h5>3. Funding and Scheme Details</h5>
+												<hr>
+											</div>
+	                                        
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="fundsource">Details Source of Fund <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="fundsource" id="fundsource" placeholder="Details Source of Fund" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="scheme">Scheme<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="scheme" id="scheme" placeholder="Scheme" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="category">Category<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="category" id="category" placeholder="Category" autocomplete="off" required>
+                                                </div>
+                                            </div>
+                                            <br>
+                                            <div class="row">
+                                                <div class="col-md-4">
+	                                            	<label for="subcategory">Sub-Category<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="subcategory" id="subcategory" placeholder="Sub-Category" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="estamount">Estimation Amount<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estamount" id="estamount" placeholder="Estimation Amount" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="title text-warning">
+												<h5>4. Sanctions and Tender Process</h5>
+												<hr>
+											</div>
+	                                        
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="techsanctiondate">Tech Sanction Date <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="techsanctiondate" id="techsanctiondate" placeholder="Tech Sanction Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-8">
+	                                            	
+                                                </div>
+                                            </div>
+                                            <br>
+                                            <div class="row">   
+                                                <div class="col-md-4">
+	                                            	<label for="adminsanctiondate">Admin Sanction Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="adminsanctiondate" id="adminsanctiondate" placeholder="Admin Sanction Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-8">
+	                                            	<label for="adminsanctionfile">Admin Sanction File<font style="color:red">*</font></label>
+		                                            <input name="adminsanctionfile" id="adminsanctionfile" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+                                            </div>
+                                            <br>
+                                            <div class="row">   
+                                                <div class="col-md-4">
+	                                            	<label for="tendercalldate">Tender Called Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="tendercalldate" id="tendercalldate" placeholder="Tender Called Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="tenderfinalizeddate">Tender Finalized Date <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="tenderfinalizeddate" id="tenderfinalizeddate" placeholder="Tender Finalized Date" autocomplete="off" required>
+                                                </div>
+                                            </div>
+                                            
+                                            <br>
+	                                        <div class="title text-warning">
+												<h5>5. Contract and Execution Details</h5>
+												<hr>
+											</div>
+											
+                                            <div class="row">
+                                                <div class="col-md-4">
+	                                            	<label for="loadate">LOA Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="loadate" id="loadate" placeholder="LOA Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-8">
+	                                            	<label for="loafile">LOA File<font style="color:red">*</font></label>
+		                                            <input name="loafile" id="loafile" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+	                                        </div>
+	                                        
+	                                        <br>
+	                                        <div class="row">
+                                                <div class="col-md-4">
+	                                            	<label for="agreementdate">Agreement Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="agreementdate" id="agreementdate" placeholder="Agreement Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-8">
+	                                            	<label for="agreementfile">Agreement File<font style="color:red">*</font></label>
+		                                            <input name="agreementfile" id="agreementfile" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+                                                <div class="col-md-4">
+	                                            	<label for="workorderdate">Work Order Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="workorderdate" id="workorderdate" placeholder="Sub-Category" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-8">
+	                                            	<label for="workorderfile">Work Order File<font style="color:red">*</font></label>
+		                                            <input name="workorderfile" id="workorderfile" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="workcommenceddate">Work Commenced Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="workcommenceddate" id="workcommenceddate" placeholder="Work Commenced Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	
+                                                </div>
+	                                        </div>
+		                                </div>
+									</div>
+									<div class="card-footer text-right">
+										<button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                       	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+                                	</div>
+                                	</form>
+								</div>
+							</div>
+                        </div>
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+        
+		<div class="modal fade" id="taxCollectionRequestView" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    <div class="modal-body">
+						<div class="row">
+							      
+                            <div class="col-xl-6 col-md-6" id="requestDetails">
+								
+                            </div>
+                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="pTaxdetails">
+                                &nbsp;
+                            </div>
+						</div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="modal fade" id="taxCollectionRequestUpdate" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+					
+	                    <div class="modal-header">
+	                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Status Update Form</h5>
+	                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div>
+	                    <div class="modal-body">
+							<div class="row">
+								      
+	                            <div class="col-xl-6 col-md-6" id="requestDetailsUpdate">
+									
+	                            </div>
+	                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="statusUpdateForm">
+	                                &nbsp;
+	                            </div>
+	                            
+	                            <div class="card table-card mb-0">
+                                    
+                                   <h5 class="text-warning pl-10 text-center">Status History</h5>
+                                    
+                                    <div class="card-block pb-0">
+                                        <div class="table-responsive">
+                                            <table class="table table-hover mb-0">
+                                                <thead>
+                                                    <tr>
+                                                        <th>Company</th>
+                                                        <th>Start Date</th>
+                                                        <th>End Date</th>
+                                                        <th>Status</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr>
+                                                        <td>Apple Company</td>
+                                                        <td>23/05/2017</td>
+                                                        <td>04/08/2018</td>
+                                                        <td><label class="badge badge-success">Paid</label></td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+							</div>
+	                    </div>
+	                    <div class="modal-footer">
+	                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+	                    </div>
+                    
+                </div>
+            </div>
+        </div>
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       	
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
+        <script src="node_modules/amcharts3/amcharts/amcharts.js"></script>
+        <script src="node_modules/amcharts3/amcharts/serial.js"></script>
+        <script src="node_modules/amcharts3/amcharts/themes/light.js"></script>
+        <script src="node_modules/jquery.datetimepicker/jquery.datetimepicker.full.min.js"></script>
+       	<script th:inline="javascript">
+			var loginUserID = /*[[${LoginUserId}]]*/'';
+			$(document).ready(function() {
+			  // Input masking for the desired format
+			  $('#ptax').mask('00-000-00000-000');
+			  $('#mobileno').mask('0000000000');
+			  
+			  // For datetime picker
+			  jQuery('#techsandate').datetimepicker({
+				  //minTime:'10:00',
+				  //maxTime:'18:01',
+				  //minDate: 0, // Today
+				  //minDate:'-1970/01/2',
+				  //maxDate:'+1970/01/2',
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  //disabledDates:['2023/08/31','2023/08/11','2023/08/12'], // Disable date on holidays
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  jQuery('#adminsandate').datetimepicker({
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  jQuery('#packagedate').datetimepicker({
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  jQuery('#tenderdate').datetimepicker({
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  jQuery('#tenderfinaldate').datetimepicker({
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  jQuery('#commenceddate').datetimepicker({
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			});
+			
+			function displayPtaxInfo(ptax){
+				var inputElement = $('#ptax');
+				
+				inputElement.removeClass('is-invalid');
+				
+				// Disable the button to prevent multiple clicks
+				$("#ptaxsearchbtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#ptaxsearchbtn").html('<i class="fas fa-spinner fa-spin"></i>');
+				  
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax)) {
+				  console.log('ptax value is valid:', ptax);
+				  // Check if the tax value has the correct length as per the format (15 characters)
+				  if (ptax.length === 16) {
+				    console.log('ptax value length is correct.');
+				    getPtaxInfo(ptax);
+				  } else {
+				    console.log('ptax value length is incorrect.');
+				    
+				    inputElement.addClass('is-invalid');
+				    
+				    $("#ptaxsearchbtn").prop("disabled", false);
+    				$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				  }
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#ptaxsearchbtn").prop("disabled", false); 
+    			  $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				}
+			}
+			
+			function getPtaxInfo(ptax){
+				call_loading('ptaxPersonalInfo','start');
+				//var ptax = '04-042-03251-000';
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if(data.ResultStatus=="False")
+						{
+							$("#ptaxPersonalInfo").html("<center>"+nodata(data.Message)+"</center>");
+							$("#ptaxsearchbtn").prop("disabled", false);
+						    $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+						else{
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							//var famCardNo = data.PROPTAX[0].Fam_Card_No;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#ptaxPersonalInfo").html(ptaxPersonalinfoHtml);
+							// Enable the button
+							$("#ptaxsearchbtn").prop("disabled", false);
+	    					$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching data:', status, error);
+				      // Enable the button
+				      $("#ptaxsearchbtn").prop("disabled", false);
+				      $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				    }
+				});
+			}
+			
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				$("#requestSubmitBtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+				var name = $('#name').val();
+				
+				var inputElement = $('#ptax');
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				inputElement.removeClass('is-invalid');
+				
+				var inputElementMobileNo = $('#mobileno');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementUsertype = $('#usertype');
+				var usertype = inputElementUsertype.val();
+				//inputElementUsertype.removeClass('is-invalid');
+				
+				var inputElementAvailabilityDate = $('#availabilitydate');
+				var availabilitydate = inputElementAvailabilityDate.val();
+				
+				var selectedDateTime = new Date(availabilitydate);
+			    var currentDateTime = new Date();
+			
+			    if (selectedDateTime < currentDateTime) {
+					alert('Selected date and time must be greater than or equal to the current date and time.');
+		        	inputElementAvailabilityDate.addClass('is-invalid');
+					$("#requestSubmitBtn").prop("disabled", false);
+    				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+		        	return false; // Prevent form submission
+		      	}
+			    
+				var formData = new FormData();
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax) && ptax.length == 16) {
+					
+					// Mobile number Check
+					if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
+						$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Submitting your request, please wait...');
+						
+						formData.append('name',name);
+						formData.append('ptax', ptax );
+						formData.append('mobile', mobileNo );
+						formData.append('usertype', usertype );
+						formData.append('availabilitydate', availabilitydate);
+						formData.append('created_by', loginUserID);
+						
+						submitSaveRequest(formData);
+
+						$("#requestSubmitBtn").html('Your request has been successfully submitted!');
+					} else {
+						inputElementMobileNo.addClass('is-invalid');
+						$("#requestSubmitBtn").prop("disabled", false);
+    					$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+					}
+				 
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#requestSubmitBtn").prop("disabled", false); 
+    			  $("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+				}
+				return false;
+			}
+			
+			function submitSaveRequest(formData){
+				$.ajax({
+				    type: "POST",
+				    url: '/gcc/api/taxcollection/saveTaxCollectionRequest',
+		                data: formData,
+		                contentType: false,
+		                processData: false,
+				}).done(function(response) {
+	  			      Swal.fire(
+	  			        'Complaint Status Update!',
+	  			        'Complaint closed Successfully!',
+	  			        'success'
+	  			      ).then(() => {
+	  						    location.reload();
+	  						 });
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					$("#requestSubmitBtn").prop("disabled", false);
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+			    
+				});
+			}
+		</script>
+		<script>
+			$(document).ready(function() {
+				
+				// DataTables buttons configuration
+	            var buttons = [
+	            	{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+	                {
+						title: 'Data export',
+	                    extend: 'copyHtml5',
+	                    text: 'Copy',
+	                    className: 'btn btn-secondary',
+	                    id: 'copyBtn'
+	                },
+	                {
+	                    extend: 'excelHtml5',
+	                    text: 'Excel',
+	                    className: 'btn btn-secondary',
+	                    id: 'excelBtn'
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn'
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn'
+	                },
+	                
+	            ];
+				
+			    $('#requestDatatable').DataTable( {
+			        dom: 'Bftip',
+			        columnDefs: [
+					  { targets: 'no-sort', orderable: false }
+					],
+			        lengthMenu: [
+			            [ 50, 100, 200, 500, -1 ],
+			            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+			        ],
+    				scrollY: '50vh',
+			        fixedColumns: {
+				        left: 1,
+				        right: 1
+				    },
+			        buttons: [buttons],
+			        fixedHeader: true,
+			        autoWidth: true,
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+			
+			function callView(request_id){
+				$('#taxCollectionRequestView').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestView').modal('show');
+				
+				call_loading('requestDetails','start');
+				getTaxCollectionRequestDetails(request_id);
+				call_loading('pTaxdetails','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestDetails(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetails").html(ptaxPersonalinfoHtml);
+						getpTaxDetails(ptax);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function getpTaxDetails(ptax){
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#pTaxdetails").html(ptaxPersonalinfoHtml);
+							
+							// if Ptax data fetched then load valid message
+							var validPtax = ptax+'&nbsp;<font class="custom-tooltip-success"><a href="#" class="text-success" onclick="return false;" data-container=".custom-tooltip-success" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify success" data-original-title="Property tax number cross-verify success"><i class="ik ik-check-circle"></i></font>';
+							$("#pTaxVerification").html(validPtax);
+						}
+						else {
+						    // No data found
+						    console.log("Message: " + data.Message);
+						    var inValidPtax = ptax+'&nbsp;<font class="custom-tooltip-warning"><a href="#" class="text-warning" onclick="return false;" data-container=".custom-tooltip-warning" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify failed" data-original-title="Property tax number cross-verify failed"><i class="ik ik-alert-triangle"></i></font>';
+							$("#pTaxVerification").html(inValidPtax);
+							
+						    $("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching pTax data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function callStatusUpdate(request_id){
+				$('#taxCollectionRequestUpdate').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestUpdate').modal('show');
+				
+				call_loading('requestDetailsUpdate','start');
+				getTaxCollectionRequestUpdate(request_id);
+				call_loading('statusUpdateForm','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestUpdate(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetailsUpdate").html(ptaxPersonalinfoHtml);
+						showStatusUpdateForm(request_id, status);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function showStatusUpdateForm(request_id, status){
+				
+				var selectInput = `<select class="form-control" name="requestStatus" id="requestStatus" required>
+								        <option value="open">Open</option>
+								        <option value="close">Close</option>
+								    </select>`;
+								    
+				var textareaInput=`<textarea class="form-control" name="statusComments" id="statusComments" rows="4"></textarea>`;
+				
+				var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card mb-0"><div class="card-header" style="background-color: #ffe1003b !important;"><h3>Update Form</h3></div>' +
+									   '<div class="card-block p-0">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td width="30%">Current Status</td>' +
+							           '      <td class="font-medium">'+selectInput+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td colspan="2">Status Comments' + textareaInput+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							           
+				$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+				
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card"><div class="card-header"><h3>Update Form</h3></div>' +
+									   '<div class="card-block">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Current Status</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Status Comments</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+
+									   
+									   '      </td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer  text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+						}
+						else {
+						    // No data found
+						    console.log("Status history: " + data.Message);
+						    //$("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching Status history:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function saveStatus(){
+				return false;
+			}
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/works/index.html b/src/main/resources/templates/modules/works/index.html
new file mode 100644
index 0000000..420f5f6
--- /dev/null
+++ b/src/main/resources/templates/modules/works/index.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="ik ik-bar-chart-2 bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>1913 Tax Collection Module</h5>
+                                            <span>Tax collection appication for senior citizen and disability users</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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">1913 Tax Collection</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							
+							<!-- analytic card start - First Tile Start -->
+                            <div class="col-xl-3 col-md-6">
+								<a href="javascript:void(0)">
+                                <div class="card social-card">
+                                    <div class="card-body text-center">
+                                        <h2 class="text-facebook mb-20"><i class="ik ik-layers"></i></h2>
+                                        <h3 class="text-facebook fw-700">6,750</h3>
+                                        <p>Assets</p>
+                                        <p class="mb-0 mt-15">View Assets List<i class="fas fa-arrow-right ml-5 f-10 text-facebook"></i></p>
+                                    </div>
+                                </div>
+                                </a>
+                            </div>
+                            <div class="col-xl-3 col-md-6">
+								<a href="javascript:void(0)">
+                                <div class="card social-card">
+                                    <div class="card-body text-center">
+                                        <h2 class="text-twitter mb-20"><i class="fas fa-comments"></i></h2>
+                                        <h3 class="text-twitter fw-700">9,752</h3>
+                                        <p>Feedbacks</p>
+                                        <p class="mb-0 mt-15">View Feedbacks List<i class="fas fa-arrow-right ml-5 f-10 text-twitter"></i></p>
+                                    </div>
+                                </div>
+                                </a>
+                            </div>
+                            <div class="col-xl-3 col-md-6">
+								<a href="javascript:void(0)">
+                                <div class="card social-card">
+                                    <div class="card-body text-center">
+                                        <h2 class="text-green mb-20"><i class="far fa-smile-beam"></i></h2>
+                                        <h3 class="text-green fw-700">8,752</h3>
+                                        <p>Positive Feedbacks</p>
+                                        <p class="mb-0 mt-15">View Positive Feedbacks<i class="fas fa-arrow-right ml-5 f-10 text-green"></i></p>
+                                    </div>
+                                </div>
+                                </a>
+                            </div>
+                            <div class="col-xl-3 col-md-6">
+								<a href="javascript:void(0)">
+                                <div class="card social-card">
+                                    <div class="card-body text-center">
+                                        <h2 class="text-red mb-20"><i class="far fa-frown"></i></h2>
+                                        <h3 class="text-red fw-700">952</h3>
+                                        <p>Negative Feedbacks</p>
+                                        <p class="mb-0 mt-15">View Negative Feedbacks<i class="fas fa-arrow-right ml-5 f-10 text-red"></i></p>
+                                    </div>
+                                </div>
+								</a>
+                            </div>
+                            <!-- First Tile End -->
+			                
+			                <div class="col-md-12">
+				                <div class="card sale-card">
+		                            <div class="card-header">
+		                                <h3>Deals Analytics</h3>
+		                            </div>
+		                            <div class="card-block">
+		                                <div id="deal-analytic-chart" class="chart-shadow" style="height:300px"></div>
+		                            </div>
+		                        </div>    
+	                        </div>    
+	                          
+                            <div class="col-md-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3>Page Title</h3>
+                                    </div>
+                                    <div class="card-block">
+                                        
+                                    </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 src="node_modules/amcharts3/amcharts/amcharts.js"></script>
+        <script src="node_modules/amcharts3/amcharts/serial.js"></script>
+        <script src="node_modules/amcharts3/amcharts/themes/light.js"></script>
+        <script>
+			
+			var chartData = [];
+		    var currentDate = new Date();
+		    var currentMonth = currentDate.getMonth() + 1;
+		    var currentYear = currentDate.getFullYear();
+		    var daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
+		
+		    // Generate random data for each date in the current month
+		    for (var i = 1; i <= daysInMonth; i++) {
+		        var randomValue1 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
+		        var randomValue2 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
+		
+		        var dateString = currentYear + '-' + (currentMonth < 10 ? '0' : '') + currentMonth + '-' + (i < 10 ? '0' : '') + i;
+		        var dataPoint = {
+		            "date": dateString,
+		            "market1": randomValue1,
+		            "market2": randomValue2
+		        };
+		        chartData.push(dataPoint);
+		    }
+			// deal-analytic-chart
+    var chart = AmCharts.makeChart("deal-analytic-chart", {
+        "type": "serial",
+        "theme": "light",
+        "dataDateFormat": "YYYY-MM-DD",
+        "precision": 2,
+        "valueAxes": [{
+            "id": "v1",
+            "position": "left",
+            "autoGridCount": false,
+            "labelFunction": function(value) {
+                return "$" + Math.round(value) + "M";
+            }
+        }, {
+            "id": "v2",
+            "gridAlpha": 0,
+            "autoGridCount": false
+        }],
+        "graphs": [{
+            "id": "g1",
+            "valueAxis": "v2",
+            /*"bullet": "round",
+            "bulletBorderAlpha": 1,
+            "bulletColor": "#FFFFFF",
+            "bulletSize": 8,
+            "hideBulletsCount": 50,
+            "lineThickness": 3,
+            "lineColor": "#2ed8b6",*/
+            "lineColor": "#2ed8b6",
+            "fillColors": "#2ed8b6",
+            "type": "column",
+            "fillAlphas": 0.3,
+            "columnWidth": 0.5,
+            "title": "Positive Feedback",
+            "useLineColorForBulletBorder": true,
+            "valueField": "market1",
+            "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
+        }, {
+            "id": "g2",
+            "valueAxis": "v2",
+            //"bullet": "round",
+            //"bulletBorderAlpha": 1,
+            //"bulletColor": "#FFFFFF",
+            //"bulletSize": 8,
+            //"hideBulletsCount": 50,
+            //"lineThickness": 3,
+            //"lineColor": "#e95753",
+            "lineColor": "#F22613",
+            "fillColors": "#F22613",
+            "type": "column",
+            "fillAlphas": 0.3,
+            "columnWidth": 0.5,
+            "title": "Negative Feedback",
+            "useLineColorForBulletBorder": true,
+            "valueField": "market2",
+            "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
+        }],
+        "chartCursor": {
+            "pan": true,
+            "valueLineEnabled": true,
+            "valueLineBalloonEnabled": true,
+            "cursorAlpha": 0,
+            "valueLineAlpha": 0.2
+        },
+        "categoryField": "date",
+        "categoryAxis": {
+            "parseDates": true,
+            "dashLength": 1,
+            "minorGridEnabled": true
+        },
+        "legend": {
+            "useGraphSettings": true,
+            "position": "top"
+        },
+        "balloon": {
+            "borderThickness": 1,
+            "shadowAlpha": 0
+        },
+        "dataProvider": chartData,
+    });
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/works/non-erp-works-add.html b/src/main/resources/templates/modules/works/non-erp-works-add.html
new file mode 100644
index 0000000..3d606f8
--- /dev/null
+++ b/src/main/resources/templates/modules/works/non-erp-works-add.html
@@ -0,0 +1,867 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+		<link rel="stylesheet" type="text/css" href="node_modules/jquery.datetimepicker/jquery.datetimepicker.css"/ >
+        <!--[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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Non ERP New Entry Form</h5>
+                                            <span>Works Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Works Module</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Non ERP - New Entry Form</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							
+
+							<div class="col-md-12">
+								<div class="card">
+									<form>
+                                    <div class="card-header"><h3>Non ERP  - Add Form</h3></div>
+                               		<div class="card-body" id="ptaxPersonalInfo">
+										<div class="form-group">
+											<div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="zone">Zone <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="zone" id="zone" placeholder="zone" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="ward">ward <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="ward" id="ward" placeholder="ward" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="projectname">Project Name <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="projectname" id="projectname" placeholder="Project name" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="estimatenumber">Estimate Number <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estimatenumber" id="estimatenumber" placeholder="Estimate Nnumber" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="estimatedate">Estimate Date <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estimatedate" id="estimatedate" placeholder="Estimate date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="location">Location<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="location" id="location" placeholder="location" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="sourceoffund">Source Of Fund <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="sourceoffund" id="sourceoffund" placeholder="Source of fund" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="schemename">Scheme Name<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="schemename" id="schemename" placeholder="Scheme Name" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="category">Category<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="category" id="category" placeholder="Category" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="subcategory">Sub-Category <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="subcategory" id="subcategory" placeholder="Sub-Category" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="estnumber">Estimate Amount<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estnumber" id="estnumber" placeholder="Estimate number" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="department">Department<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="department" id="department" placeholder="Department" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="loacopy">LOA Copy <font style="color:red">*</font></label>
+		                                            <input name="loacopy" id="loacopy" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="agreementcopy">Agreement Copy<font style="color:red">*</font></label>
+		                                            <input name="agreementcopy" id="agreementcopy" class="form-control" type="file" capture="camera" accept="application/pdf, image/*" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="workordercopy">Work Order Copy<font style="color:red">*</font></label>
+		                                            <input name="workordercopy" id="workordercopy" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="sanctioncopy">Admin Sanction Copy<font style="color:red">*</font></label>
+		                                            <input name="sanctioncopy" id="sanctioncopy" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+                                                 <div class="col-md-4">
+	                                            	<label for="adminsandate">Admin Sanction Date <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="adminsandate" id="adminsandate" placeholder="Admin Sanction Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-12">
+	                                            	<label for="worksdesc">Works description<font style="color:red">*</font></label>
+		                                            <textarea class="form-control" name="worksdesc"></textarea>
+                                                </div>
+	                                        </div>
+		                                </div>
+		                                
+									</div>
+									<div class="card-footer text-right">
+										<button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                       	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+                                	</div>
+                                	</form>
+								</div>
+							</div>
+                        </div>
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+        
+		<div class="modal fade" id="taxCollectionRequestView" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    <div class="modal-body">
+						<div class="row">
+							      
+                            <div class="col-xl-6 col-md-6" id="requestDetails">
+								
+                            </div>
+                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="pTaxdetails">
+                                &nbsp;
+                            </div>
+						</div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="modal fade" id="taxCollectionRequestUpdate" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+					
+	                    <div class="modal-header">
+	                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Status Update Form</h5>
+	                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div>
+	                    <div class="modal-body">
+							<div class="row">
+								      
+	                            <div class="col-xl-6 col-md-6" id="requestDetailsUpdate">
+									
+	                            </div>
+	                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="statusUpdateForm">
+	                                &nbsp;
+	                            </div>
+	                            
+	                            <div class="card table-card mb-0">
+                                    
+                                   <h5 class="text-warning pl-10 text-center">Status History</h5>
+                                    
+                                    <div class="card-block pb-0">
+                                        <div class="table-responsive">
+                                            <table class="table table-hover mb-0">
+                                                <thead>
+                                                    <tr>
+                                                        <th>Company</th>
+                                                        <th>Start Date</th>
+                                                        <th>End Date</th>
+                                                        <th>Status</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr>
+                                                        <td>Apple Company</td>
+                                                        <td>23/05/2017</td>
+                                                        <td>04/08/2018</td>
+                                                        <td><label class="badge badge-success">Paid</label></td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+							</div>
+	                    </div>
+	                    <div class="modal-footer">
+	                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+	                    </div>
+                    
+                </div>
+            </div>
+        </div>
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       	
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
+        <script src="node_modules/amcharts3/amcharts/amcharts.js"></script>
+        <script src="node_modules/amcharts3/amcharts/serial.js"></script>
+        <script src="node_modules/amcharts3/amcharts/themes/light.js"></script>
+        <script src="node_modules/jquery.datetimepicker/jquery.datetimepicker.full.min.js"></script>
+       	<script th:inline="javascript">
+			var loginUserID = /*[[${LoginUserId}]]*/'';
+			$(document).ready(function() {
+			  // Input masking for the desired format
+			  $('#ptax').mask('00-000-00000-000');
+			  $('#mobileno').mask('0000000000');
+			  
+			  // For datetime picker
+			  jQuery('#estimatedate').datetimepicker({
+				  //minTime:'10:00',
+				  //maxTime:'18:01',
+				  //minDate: 0, // Today
+				  //minDate:'-1970/01/2',
+				  //maxDate:'+1970/01/2',
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  //disabledDates:['2023/08/31','2023/08/11','2023/08/12'], // Disable date on holidays
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  
+			});
+			
+			function displayPtaxInfo(ptax){
+				var inputElement = $('#ptax');
+				
+				inputElement.removeClass('is-invalid');
+				
+				// Disable the button to prevent multiple clicks
+				$("#ptaxsearchbtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#ptaxsearchbtn").html('<i class="fas fa-spinner fa-spin"></i>');
+				  
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax)) {
+				  console.log('ptax value is valid:', ptax);
+				  // Check if the tax value has the correct length as per the format (15 characters)
+				  if (ptax.length === 16) {
+				    console.log('ptax value length is correct.');
+				    getPtaxInfo(ptax);
+				  } else {
+				    console.log('ptax value length is incorrect.');
+				    
+				    inputElement.addClass('is-invalid');
+				    
+				    $("#ptaxsearchbtn").prop("disabled", false);
+    				$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				  }
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#ptaxsearchbtn").prop("disabled", false); 
+    			  $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				}
+			}
+			
+			function getPtaxInfo(ptax){
+				call_loading('ptaxPersonalInfo','start');
+				//var ptax = '04-042-03251-000';
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if(data.ResultStatus=="False")
+						{
+							$("#ptaxPersonalInfo").html("<center>"+nodata(data.Message)+"</center>");
+							$("#ptaxsearchbtn").prop("disabled", false);
+						    $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+						else{
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							//var famCardNo = data.PROPTAX[0].Fam_Card_No;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#ptaxPersonalInfo").html(ptaxPersonalinfoHtml);
+							// Enable the button
+							$("#ptaxsearchbtn").prop("disabled", false);
+	    					$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching data:', status, error);
+				      // Enable the button
+				      $("#ptaxsearchbtn").prop("disabled", false);
+				      $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				    }
+				});
+			}
+			
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				$("#requestSubmitBtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+				var name = $('#name').val();
+				
+				var inputElement = $('#ptax');
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				inputElement.removeClass('is-invalid');
+				
+				var inputElementMobileNo = $('#mobileno');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementUsertype = $('#usertype');
+				var usertype = inputElementUsertype.val();
+				//inputElementUsertype.removeClass('is-invalid');
+				
+				var inputElementAvailabilityDate = $('#availabilitydate');
+				var availabilitydate = inputElementAvailabilityDate.val();
+				
+				var selectedDateTime = new Date(availabilitydate);
+			    var currentDateTime = new Date();
+			
+			    if (selectedDateTime < currentDateTime) {
+					alert('Selected date and time must be greater than or equal to the current date and time.');
+		        	inputElementAvailabilityDate.addClass('is-invalid');
+					$("#requestSubmitBtn").prop("disabled", false);
+    				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+		        	return false; // Prevent form submission
+		      	}
+			    
+				var formData = new FormData();
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax) && ptax.length == 16) {
+					
+					// Mobile number Check
+					if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
+						$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Submitting your request, please wait...');
+						
+						formData.append('name',name);
+						formData.append('ptax', ptax );
+						formData.append('mobile', mobileNo );
+						formData.append('usertype', usertype );
+						formData.append('availabilitydate', availabilitydate);
+						formData.append('created_by', loginUserID);
+						
+						submitSaveRequest(formData);
+
+						$("#requestSubmitBtn").html('Your request has been successfully submitted!');
+					} else {
+						inputElementMobileNo.addClass('is-invalid');
+						$("#requestSubmitBtn").prop("disabled", false);
+    					$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+					}
+				 
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#requestSubmitBtn").prop("disabled", false); 
+    			  $("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+				}
+				return false;
+			}
+			
+			function submitSaveRequest(formData){
+				$.ajax({
+				    type: "POST",
+				    url: '/gcc/api/taxcollection/saveTaxCollectionRequest',
+		                data: formData,
+		                contentType: false,
+		                processData: false,
+				}).done(function(response) {
+	  			      Swal.fire(
+	  			        'Complaint Status Update!',
+	  			        'Complaint closed Successfully!',
+	  			        'success'
+	  			      ).then(() => {
+	  						    location.reload();
+	  						 });
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					$("#requestSubmitBtn").prop("disabled", false);
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+			    
+				});
+			}
+		</script>
+		<script>
+			$(document).ready(function() {
+				
+				// DataTables buttons configuration
+	            var buttons = [
+	            	{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+	                {
+						title: 'Data export',
+	                    extend: 'copyHtml5',
+	                    text: 'Copy',
+	                    className: 'btn btn-secondary',
+	                    id: 'copyBtn'
+	                },
+	                {
+	                    extend: 'excelHtml5',
+	                    text: 'Excel',
+	                    className: 'btn btn-secondary',
+	                    id: 'excelBtn'
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn'
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn'
+	                },
+	                
+	            ];
+				
+			    $('#requestDatatable').DataTable( {
+			        dom: 'Bftip',
+			        columnDefs: [
+					  { targets: 'no-sort', orderable: false }
+					],
+			        lengthMenu: [
+			            [ 50, 100, 200, 500, -1 ],
+			            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+			        ],
+    				scrollY: '50vh',
+			        fixedColumns: {
+				        left: 1,
+				        right: 1
+				    },
+			        buttons: [buttons],
+			        fixedHeader: true,
+			        autoWidth: true,
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+			
+			function callView(request_id){
+				$('#taxCollectionRequestView').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestView').modal('show');
+				
+				call_loading('requestDetails','start');
+				getTaxCollectionRequestDetails(request_id);
+				call_loading('pTaxdetails','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestDetails(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetails").html(ptaxPersonalinfoHtml);
+						getpTaxDetails(ptax);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function getpTaxDetails(ptax){
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#pTaxdetails").html(ptaxPersonalinfoHtml);
+							
+							// if Ptax data fetched then load valid message
+							var validPtax = ptax+'&nbsp;<font class="custom-tooltip-success"><a href="#" class="text-success" onclick="return false;" data-container=".custom-tooltip-success" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify success" data-original-title="Property tax number cross-verify success"><i class="ik ik-check-circle"></i></font>';
+							$("#pTaxVerification").html(validPtax);
+						}
+						else {
+						    // No data found
+						    console.log("Message: " + data.Message);
+						    var inValidPtax = ptax+'&nbsp;<font class="custom-tooltip-warning"><a href="#" class="text-warning" onclick="return false;" data-container=".custom-tooltip-warning" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify failed" data-original-title="Property tax number cross-verify failed"><i class="ik ik-alert-triangle"></i></font>';
+							$("#pTaxVerification").html(inValidPtax);
+							
+						    $("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching pTax data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function callStatusUpdate(request_id){
+				$('#taxCollectionRequestUpdate').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestUpdate').modal('show');
+				
+				call_loading('requestDetailsUpdate','start');
+				getTaxCollectionRequestUpdate(request_id);
+				call_loading('statusUpdateForm','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestUpdate(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetailsUpdate").html(ptaxPersonalinfoHtml);
+						showStatusUpdateForm(request_id, status);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function showStatusUpdateForm(request_id, status){
+				
+				var selectInput = `<select class="form-control" name="requestStatus" id="requestStatus" required>
+								        <option value="open">Open</option>
+								        <option value="close">Close</option>
+								    </select>`;
+								    
+				var textareaInput=`<textarea class="form-control" name="statusComments" id="statusComments" rows="4"></textarea>`;
+				
+				var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card mb-0"><div class="card-header" style="background-color: #ffe1003b !important;"><h3>Update Form</h3></div>' +
+									   '<div class="card-block p-0">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td width="30%">Current Status</td>' +
+							           '      <td class="font-medium">'+selectInput+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td colspan="2">Status Comments' + textareaInput+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							           
+				$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+				
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card"><div class="card-header"><h3>Update Form</h3></div>' +
+									   '<div class="card-block">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Current Status</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Status Comments</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+
+									   
+									   '      </td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer  text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+						}
+						else {
+						    // No data found
+						    console.log("Status history: " + data.Message);
+						    //$("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching Status history:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function saveStatus(){
+				return false;
+			}
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/works/request-list.html b/src/main/resources/templates/modules/works/request-list.html
new file mode 100644
index 0000000..d117479
--- /dev/null
+++ b/src/main/resources/templates/modules/works/request-list.html
@@ -0,0 +1,813 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+		<link rel="stylesheet" type="text/css" href="node_modules/jquery.datetimepicker/jquery.datetimepicker.css"/ >
+        <!--[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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="fas fa-headset bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Request List</h5>
+                                            <span>1913 Tax Collection Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">1913 Tax Collection</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Request List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							
+							<div class="card">
+                                <div class="card-block">
+									<div class="d-flex">
+                                        <h4 class="card-title">Tax collection request list</h4>
+                                        
+                                    </div>
+                                
+									<div>
+										<table id="requestDatatable" 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="20%">Name</th>
+													<th class="text-center" width="20%">Property tax number</th>
+													<th class="text-center" width="20%">Mobile Number</th>
+													<th class="text-center" width="20%">Availability Date</th>
+													<th class="text-center" width="20%">User Type</th>
+													<th class="text-center" width="20%">Status</th>
+					                                <th class="text-center no-sort" style="width:50px;">Action</th>
+												</tr>
+                                            </theadclass="thead-dark">
+                                            <tbody>
+                                                <tr th:each="taxCollectionRequestList, i : ${taxCollectionRequestEntities}" class="taxCollectionRequestList text-capitalize">
+					                                <td th:text="${i.count}">0</td>
+													<td th:text="${taxCollectionRequestList.name}"></td>
+													<td th:text="${taxCollectionRequestList.ptax}"></td>
+					                                <td th:text="${taxCollectionRequestList.mobile}"></td>
+					                                <td th:text="${taxCollectionRequestList.availabilitydate}"></td>
+					                                <td th:text="${taxCollectionRequestList.usertype}"></td>
+					                                <td>
+														<a th:href="@{#}" th:text="${taxCollectionRequestList.status}" th:classappend="${taxCollectionRequestList.status == 'open'} ? 'badge badge-success mb-1' : 'badge badge-secondary mb-1'" th:onclick="return callStatusUpdate([[${taxCollectionRequestList.request_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Update Current Status" data-original-title="Update Current Status"></a>
+													</td>
+					                                <td class="text-center">
+					                                    <a th:href="@{#}" th:onclick="return callView([[${taxCollectionRequestList.request_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="View Request Details" data-original-title="View Request Details"><i class="ik ik-eye f-16 text-blue"></i></a>&nbsp;&nbsp;
+					                                </td>
+					                            </tr>
+                                             </tbody>
+                                            <tfoot class="thead-dark">
+                                                <tr>
+													<th class="text-center">S.No</th>
+					                                <th class="text-center">Name</th>
+													<th class="text-center">Property tax number</th>
+													<th class="text-center">Mobile Number</th>
+													<th class="text-center">Availability Date</th>
+													<th class="text-center">User Type</th>
+													<th class="text-center">Status</th>
+					                                <th class="text-center">Action</th>
+												</tr>
+                                            </tfoot>
+                                        </table>
+                                    </div>
+								</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+        
+		<div class="modal fade" id="taxCollectionRequestView" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    <div class="modal-body">
+						<div class="row">
+							      
+                            <div class="col-xl-6 col-md-6" id="requestDetails">
+								
+                            </div>
+                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="pTaxdetails">
+                                &nbsp;
+                            </div>
+						</div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="modal fade" id="taxCollectionRequestUpdate" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+					
+	                    <div class="modal-header">
+	                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Status Update Form</h5>
+	                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div>
+	                    <div class="modal-body">
+							<div class="row">
+								      
+	                            <div class="col-xl-6 col-md-6" id="requestDetailsUpdate">
+									
+	                            </div>
+	                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="statusUpdateForm">
+	                                &nbsp;
+	                            </div>
+	                            
+	                            <div class="card table-card mb-0">
+                                    
+                                   <h5 class="text-warning pl-10 text-center">Status History</h5>
+                                    
+                                    <div class="card-block pb-0">
+                                        <div class="table-responsive">
+                                            <table class="table table-hover mb-0">
+                                                <thead>
+                                                    <tr>
+                                                        <th>Company</th>
+                                                        <th>Start Date</th>
+                                                        <th>End Date</th>
+                                                        <th>Status</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr>
+                                                        <td>Apple Company</td>
+                                                        <td>23/05/2017</td>
+                                                        <td>04/08/2018</td>
+                                                        <td><label class="badge badge-success">Paid</label></td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+							</div>
+	                    </div>
+	                    <div class="modal-footer">
+	                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+	                    </div>
+                    
+                </div>
+            </div>
+        </div>
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       	
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
+        <script src="node_modules/amcharts3/amcharts/amcharts.js"></script>
+        <script src="node_modules/amcharts3/amcharts/serial.js"></script>
+        <script src="node_modules/amcharts3/amcharts/themes/light.js"></script>
+        <script src="node_modules/jquery.datetimepicker/jquery.datetimepicker.full.min.js"></script>
+       	<script th:inline="javascript">
+			var loginUserID = /*[[${LoginUserId}]]*/'';
+			$(document).ready(function() {
+			  // Input masking for the desired format
+			  $('#ptax').mask('00-000-00000-000');
+			  $('#mobileno').mask('0000000000');
+			  
+			  // For datetime picker
+			  jQuery('#availabilitydate').datetimepicker({
+				  minTime:'10:00',
+				  maxTime:'18:01',
+				  minDate: 0, // Today
+				  //minDate:'-1970/01/2',
+				  //maxDate:'+1970/01/2',
+				  //timepicker:false, // Disable time picker
+				  mask:false,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  disabledDates:['2023/08/31','2023/08/11','2023/08/12'], // Disable date on holidays
+				  /*
+				  // Disable all weekends
+				  onGenerate:function( ct ){
+				    jQuery(this).find('.xdsoft_date.xdsoft_weekend')
+				      .addClass('xdsoft_disabled');
+				  }
+				  */
+			  });
+			  
+			});
+			
+			function displayPtaxInfo(ptax){
+				var inputElement = $('#ptax');
+				
+				inputElement.removeClass('is-invalid');
+				
+				// Disable the button to prevent multiple clicks
+				$("#ptaxsearchbtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#ptaxsearchbtn").html('<i class="fas fa-spinner fa-spin"></i>');
+				  
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax)) {
+				  console.log('ptax value is valid:', ptax);
+				  // Check if the tax value has the correct length as per the format (15 characters)
+				  if (ptax.length === 16) {
+				    console.log('ptax value length is correct.');
+				    getPtaxInfo(ptax);
+				  } else {
+				    console.log('ptax value length is incorrect.');
+				    
+				    inputElement.addClass('is-invalid');
+				    
+				    $("#ptaxsearchbtn").prop("disabled", false);
+    				$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				  }
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#ptaxsearchbtn").prop("disabled", false); 
+    			  $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				}
+			}
+			
+			function getPtaxInfo(ptax){
+				call_loading('ptaxPersonalInfo','start');
+				//var ptax = '04-042-03251-000';
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if(data.ResultStatus=="False")
+						{
+							$("#ptaxPersonalInfo").html("<center>"+nodata(data.Message)+"</center>");
+							$("#ptaxsearchbtn").prop("disabled", false);
+						    $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+						else{
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							//var famCardNo = data.PROPTAX[0].Fam_Card_No;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#ptaxPersonalInfo").html(ptaxPersonalinfoHtml);
+							// Enable the button
+							$("#ptaxsearchbtn").prop("disabled", false);
+	    					$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching data:', status, error);
+				      // Enable the button
+				      $("#ptaxsearchbtn").prop("disabled", false);
+				      $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				    }
+				});
+			}
+			
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				$("#requestSubmitBtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+				var name = $('#name').val();
+				
+				var inputElement = $('#ptax');
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				inputElement.removeClass('is-invalid');
+				
+				var inputElementMobileNo = $('#mobileno');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementUsertype = $('#usertype');
+				var usertype = inputElementUsertype.val();
+				//inputElementUsertype.removeClass('is-invalid');
+				
+				var inputElementAvailabilityDate = $('#availabilitydate');
+				var availabilitydate = inputElementAvailabilityDate.val();
+				
+				var selectedDateTime = new Date(availabilitydate);
+			    var currentDateTime = new Date();
+			
+			    if (selectedDateTime < currentDateTime) {
+					alert('Selected date and time must be greater than or equal to the current date and time.');
+		        	inputElementAvailabilityDate.addClass('is-invalid');
+					$("#requestSubmitBtn").prop("disabled", false);
+    				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+		        	return false; // Prevent form submission
+		      	}
+			    
+				var formData = new FormData();
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax) && ptax.length == 16) {
+					
+					// Mobile number Check
+					if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
+						$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Submitting your request, please wait...');
+						
+						formData.append('name',name);
+						formData.append('ptax', ptax );
+						formData.append('mobile', mobileNo );
+						formData.append('usertype', usertype );
+						formData.append('availabilitydate', availabilitydate);
+						formData.append('created_by', loginUserID);
+						
+						submitSaveRequest(formData);
+
+						$("#requestSubmitBtn").html('Your request has been successfully submitted!');
+					} else {
+						inputElementMobileNo.addClass('is-invalid');
+						$("#requestSubmitBtn").prop("disabled", false);
+    					$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+					}
+				 
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#requestSubmitBtn").prop("disabled", false); 
+    			  $("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+				}
+				return false;
+			}
+			
+			function submitSaveRequest(formData){
+				$.ajax({
+				    type: "POST",
+				    url: '/gcc/api/taxcollection/saveTaxCollectionRequest',
+		                data: formData,
+		                contentType: false,
+		                processData: false,
+				}).done(function(response) {
+	  			      Swal.fire(
+	  			        'Complaint Status Update!',
+	  			        'Complaint closed Successfully!',
+	  			        'success'
+	  			      ).then(() => {
+	  						    location.reload();
+	  						 });
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					$("#requestSubmitBtn").prop("disabled", false);
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+			    
+				});
+			}
+		</script>
+		<script>
+			$(document).ready(function() {
+				
+				// DataTables buttons configuration
+	            var buttons = [
+	            	{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+	                {
+						title: 'Data export',
+	                    extend: 'copyHtml5',
+	                    text: 'Copy',
+	                    className: 'btn btn-secondary',
+	                    id: 'copyBtn'
+	                },
+	                {
+	                    extend: 'excelHtml5',
+	                    text: 'Excel',
+	                    className: 'btn btn-secondary',
+	                    id: 'excelBtn'
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn'
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn'
+	                },
+	                
+	            ];
+				
+			    $('#requestDatatable').DataTable( {
+			        dom: 'Bftip',
+			        columnDefs: [
+					  { targets: 'no-sort', orderable: false }
+					],
+			        lengthMenu: [
+			            [ 50, 100, 200, 500, -1 ],
+			            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+			        ],
+    				scrollY: '50vh',
+			        fixedColumns: {
+				        left: 1,
+				        right: 1
+				    },
+			        buttons: [buttons],
+			        fixedHeader: true,
+			        autoWidth: true,
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+			
+			function callView(request_id){
+				$('#taxCollectionRequestView').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestView').modal('show');
+				
+				call_loading('requestDetails','start');
+				getTaxCollectionRequestDetails(request_id);
+				call_loading('pTaxdetails','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestDetails(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetails").html(ptaxPersonalinfoHtml);
+						getpTaxDetails(ptax);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function getpTaxDetails(ptax){
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#pTaxdetails").html(ptaxPersonalinfoHtml);
+							
+							// if Ptax data fetched then load valid message
+							var validPtax = ptax+'&nbsp;<font class="custom-tooltip-success"><a href="#" class="text-success" onclick="return false;" data-container=".custom-tooltip-success" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify success" data-original-title="Property tax number cross-verify success"><i class="ik ik-check-circle"></i></font>';
+							$("#pTaxVerification").html(validPtax);
+						}
+						else {
+						    // No data found
+						    console.log("Message: " + data.Message);
+						    var inValidPtax = ptax+'&nbsp;<font class="custom-tooltip-warning"><a href="#" class="text-warning" onclick="return false;" data-container=".custom-tooltip-warning" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify failed" data-original-title="Property tax number cross-verify failed"><i class="ik ik-alert-triangle"></i></font>';
+							$("#pTaxVerification").html(inValidPtax);
+							
+						    $("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching pTax data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function callStatusUpdate(request_id){
+				$('#taxCollectionRequestUpdate').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestUpdate').modal('show');
+				
+				call_loading('requestDetailsUpdate','start');
+				getTaxCollectionRequestUpdate(request_id);
+				call_loading('statusUpdateForm','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestUpdate(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetailsUpdate").html(ptaxPersonalinfoHtml);
+						showStatusUpdateForm(request_id, status);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function showStatusUpdateForm(request_id, status){
+				
+				var selectInput = `<select class="form-control" name="requestStatus" id="requestStatus" required>
+								        <option value="open">Open</option>
+								        <option value="close">Close</option>
+								    </select>`;
+								    
+				var textareaInput=`<textarea class="form-control" name="statusComments" id="statusComments" rows="4"></textarea>`;
+				
+				var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card mb-0"><div class="card-header" style="background-color: #ffe1003b !important;"><h3>Update Form</h3></div>' +
+									   '<div class="card-block p-0">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td width="30%">Current Status</td>' +
+							           '      <td class="font-medium">'+selectInput+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td colspan="2">Status Comments' + textareaInput+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							           
+				$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+				
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card"><div class="card-header"><h3>Update Form</h3></div>' +
+									   '<div class="card-block">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Current Status</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Status Comments</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+
+									   
+									   '      </td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer  text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+						}
+						else {
+						    // No data found
+						    console.log("Status history: " + data.Message);
+						    //$("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching Status history:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function saveStatus(){
+				return false;
+			}
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/zerohours_petition/complaint_list.html b/src/main/resources/templates/modules/zerohours_petition/complaint_list.html
new file mode 100644
index 0000000..29b4942
--- /dev/null
+++ b/src/main/resources/templates/modules/zerohours_petition/complaint_list.html
@@ -0,0 +1,882 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Complaint List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Complaint List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <!-- <div class="card">
+                                    
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+										
+										<div class="form-group">
+                                            <label for="eventid">Select Event / நிகழ்வை தேர்ந்தெடுக்கவும்</label>
+                                            <select class="form-control" id="eventid" name="eventid" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required onchange="get_complaint_list(this.value);">
+												<option value=""></option>
+											</select>
+                                        </div>
+                                        
+                                        <div>
+											<table id="complaintDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<!-- <th class="text-center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th> -->
+														<!-- <th class="text-center">Postal Code</th> -->
+						                                <!-- <th class="text-center">Type of Complaint</th> -->
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department Officer</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department Officer</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></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/zerohours_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	var officerMasterList = "";
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_complaint_data(id){
+	        	
+	        	var apiUrl = '/gcc/api/zerohours_petition/getComplaintList?eventId='+id+'&loginId='+createdBy;
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+	        
+	        
+	        /* Get Complaints List */
+	        function get_complaint_list(id){
+	        	call_loading();
+	        	get_complaint_data(id).then(function(complaintList) {
+	    		    // Handle the complaint list
+	    		    generate_table(complaintList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching complaint list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching complaint list:', error);
+			        }
+	    		});
+			}
+	        
+	        function viewPetitionSummary(petitionNo){
+alert(petitionNo);
+	        	$("#viewpetition").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				var url = '/gcc/zerohours_petition/view-petition-modal?petitionNo='+petitionNo;
+				$.ajax({
+				    url: url,
+				    type: 'GET',
+				    dataType: 'html',
+				    success: function(data) {
+				      $('#viewPetitionBoxBody').html(data); // Inject content into modal body
+				    },
+				    error: function(xhr, status, error) {
+				      console.error("Error loading URL:", error);
+				      // Handle error, display a message, etc.
+				    }
+				  });
+				
+				return false;
+			}
+	        
+	        function updateStatus(mapId){
+	        	$("#ComplaintStatusBox").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				callComplaintDetails(mapId);
+				return false;
+			}
+	        
+	        function callComplaintDetails(mapId){
+	        	loading_text_msg = getLoadingMessage(); // get Loading random text
+	        	var loading=searchinfo("<b>"+loading_text_msg+"</b>");
+	    		var complaintContentHTML=`
+	    							<div class="row">
+	    							    <div class="col-lg-6">
+	    						        <div class="block block-rounded">
+	    						           
+	    						                <div id="leftContainer">${loading}</div>
+	    						            
+	    						        </div>
+	    						    </div>
+	    						    
+	    						    <div class="col-lg-6 printack2">
+	    						        <div class="block block-rounded">
+	    						            
+	    						                <div id="rightContainer">${loading}</div>
+	    						           
+	    						        </div>
+	    						    </div>
+	    						    <!--<div class="col-lg-12 text-center block-options pt-10">
+	    						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+	    						    </div>-->
+	    						</div>`;
+	    		
+	    		$('#ComplaintStatusBoxBody').html(complaintContentHTML); // Box content (Body)
+	    		
+	    		getComplaintData(mapId,false);
+			}
+	        
+	        function getComplaintData(mapId,edit=false){
+				//alert(mapId);
+	        	get_complaint_details_byId(mapId).then(function(complaintDetails) {
+	        		
+	        		var complaintStatus = complaintDetails[0].status;
+					
+	        		var statusBadge = complaintStatus.charAt(0).toUpperCase() + complaintStatus.slice(1);
+	        		var refRibben = `<div class="card-header-right" style="top:auto;">
+	        							Ref ID: ${mapId}
+				              	      </div>`;
+           	        var statusRibben = ""; 
+	        		if(complaintStatus=='pending'){
+	        			statusRibben = `<div class="ribbon">
+		              	      <div class="wrap">
+		              	        <span class="ribbon6 bg-danger"><div styel="color:#fff;">${statusBadge}</div></span>
+		              	      </div>
+		              	    </div>`;
+		              	statusRibben = "";    
+	        			statusBadge = `<span class="badge badge-danger" style="font-size:10px;padding:0.25em 0.4em;">${statusBadge}</span>`;
+	        			
+					}
+	        		else if(complaintStatus=='close'){   
+	        			statusBadge = `<span class="badge badge-success" style="font-size:10px;padding:0.25em 0.4em;">${statusBadge}</span>`;
+					}
+	        		var complaintRightBody = "";
+					var complaintLeftBody = `<div class="card mb-0">
+								             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                	<h3>Complaint Details</h3>
+								                	${statusRibben}
+								                </div>
+								                <div class="card-body">
+									                <table class="table table-borderless table-vcenter mb-0" style="font-size:12px;">
+												      <tbody>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${convertdate(complaintDetails[0].cdate)}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petition_no}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petitioner_name}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petitioner_mobile}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th colspan="2" style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:<br><p class="fw-semibold mb-0" style="font-weight:normal;">${complaintDetails[0].complaint_nature}</p></th>
+												        </tr>
+												        <tr>
+												        	<td colspan="2" style="padding: 0.45rem 0.45rem;">
+													        	<table class="table table-bordered table-vcenter mb-0">
+													                <thead>
+													                  <tr>
+													                    <th>Complaint <i class="fa fa-arrow-right"></i> Status</th>
+													                    <th class="text-right" id="complaint_forward_link"><!--<a href="javascript:void(0);" onclick="return forward_compliant(${complaintDetails[0].mapid}, '${complaintDetails[0].complaint_type}');" class="link" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Click here to forward this complaint to another department officer."><i class="far fa-share-square"></i> Click to forward </a>--></th>
+													                  </tr>
+													                </thead>
+												                	<tbody>
+												                 		<tr>
+															            	<td colspan="2" class="fw-semibold">
+															            	${complaintDetails[0].petition_no} <i class="fa fa-arrow-right"></i> ${statusBadge} <i class="fa fa-arrow-right"></i> ${complaintDetails[0].off_nm}
+														                    </td>
+													                  	</tr>
+												                	</tbody>
+												              	</table>
+												        	</td>
+												        </tr>
+												      </tbody>
+												    </table>
+								                </div>
+								            </div>`;
+					
+					$('#leftContainer').html(complaintLeftBody);
+					
+					if(complaintStatus!='close'|| edit){
+						if(edit){
+							get_complaint_action_byId(mapId).then(function(complaintAction) {
+							complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data">
+													<div class="card mb-0">
+								                    	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                    		<h3>Complaint Update Details</h3>
+								                    	    ${refRibben}
+								                		</div>
+								                		<div class="card-body">
+									                		<div class="form-group">
+						                                    	<label for="complaintActionText">நடவடிக்கை / Action:</label>
+										   						<textarea class="form-control" id="complaintActionText" name="complaintActionText" rows="6" maxlength="250" placeholder="புகாரின் தன்மை..." required>${complaintAction[0].comments}</textarea>
+										   					</div>
+										   					
+										   					<div class="form-group">
+										                       <label for="action_san_page1">ஆவணப் பதிவேற்றம் / Document Upload:</label>
+															   <input name="action_san_page1" id="action_san_page1" class="form-control" type="file" capture="camera"  accept="application/pdf, image/*" required>
+															 </div>
+															 <div class="form-group mb-0 text-center">
+															 	<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveandclose(${mapId},${complaintDetails[0].petition_id},'${complaintDetails[0].petition_no}');" id="updatebtn"><i class="ik ik-save"></i> Save and Close </button>
+															 </div>
+								                		</div>
+								            		</div>
+							            		</form>`;
+							$('#rightContainer').html(complaintRightBody);
+							}).catch(function(error) {
+				    		    // Handle errors
+				    		    console.error('Error fetching action details ('+mapId+'):', error);
+				    		});	
+							//alert(complaintRightBody);
+							
+						}
+						else{
+							complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data">
+													<div class="card mb-0">
+								                    	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                    		<h3>Complaint Update Details</h3>
+								                    	    ${refRibben}
+								                		</div>
+								                		<div class="card-body">
+									                		<div class="form-group">
+						                                    	<label for="complaintActionText">நடவடிக்கை / Action:</label>
+										   						<textarea class="form-control" id="complaintActionText" name="complaintActionText" rows="6" maxlength="250" placeholder="புகாரின் தன்மை..." required></textarea>
+										   					</div>
+										   					
+										   					<div class="form-group">
+										                       <label for="action_san_page1">ஆவணப் பதிவேற்றம் / Document Upload:</label>
+															   <input name="action_san_page1" id="action_san_page1" class="form-control" type="file" capture="camera"  accept="application/pdf, image/*" required>
+															 </div>
+															 <div class="form-group mb-0 text-center">
+															 	<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveandclose(${mapId},${complaintDetails[0].petition_id},'${complaintDetails[0].petition_no}');" id="updatebtn"><i class="ik ik-save"></i> Save and Close </button>
+															 </div>
+								                		</div>
+								            		</div>
+							            		</form>`;
+						}
+						$('#rightContainer').html(complaintRightBody);
+					}
+					else{
+						// first remove forward link
+						$("#complaint_forward_link").html("");
+						
+						get_complaint_action_byId(mapId).then(function(complaintAction) {
+							var fileType = complaintAction[0].file_type;
+							fileType = fileType.split("/").pop();
+							var filetypeico = "file-lines";
+							if(fileType=='pdf'){
+								filetypeico = "file-pdf";
+							}
+							else{
+								filetypeico = "file-image";
+							}
+							
+							complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data">
+													<div class="card mb-0">
+								                    	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                    		<h3>Complaint Update Details</h3>
+								                    	    ${refRibben} 
+								                		</div>
+								                		<div class="card-body">
+									                		<div>
+									                			<b>நடவடிக்கை தேதி / Action Date:</b> ${convertdate(complaintAction[0].cdate)}
+					                                            <hr>
+					                                            <b>நடவடிக்கை / Action:</b><br>
+					                                            <p class="mt-10">${complaintAction[0].comments}</p>
+					                                        </div>
+					                                        	<hr>
+					                                        <div class="like-comm mt-20 mb-0"> 
+					                                        	<b>ஆவணப் பதிவேற்றம் / Document Upload:</b><br>
+					                                        	
+						                                        	<table class="table table-bordered table-vcenter mb-0">
+														                <thead>
+														                  <tr>
+														                    <th>S.no</th>
+														                    <th>File Name</th>
+														                    <th>Size</th>
+														                    <th>Type</th>
+														                    <th><i class="ik ik-more-horizontal"></i></th>
+														                  </tr>
+														                </thead>
+													                	<tbody>
+													                 		<tr>
+																            	<td class="fw-semibold">1</td>
+																            	<td class="fw-semibold">${complaintAction[0].file_name}</td>
+																            	<td class="fw-semibold">${formatFileSize(complaintAction[0].file_size)}</td>
+																            	<td class="fw-semibold">${fileType}</td>
+																            	<td class="fw-semibold">
+																            		<a href="javascript:void(0)" class="link mr-10" onclick="downloadFile('action','${complaintAction[0].file_name}','${complaintAction[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Download File"><i class="fa fa-fw fa-download" style="font-size: 18px;"></i></a>
+																            		<a href="javascript:void(0)" class="link mr-10" onclick="viewFile('action','${complaintAction[0].file_name}','${complaintAction[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View File"><i class="far fa-3x fa-${filetypeico}" style="font-size: 18px;"></i></a>
+																            	</td>
+														                  	</tr>
+													                	</tbody>
+													              	</table>
+					                                   		</div>
+								                		</div>
+								                		<!--<a href="javascript:void(0)" onclick="getComplaintData(${mapId}, true);">Edit</a>-->
+								                		<button type="button" class="btn btn-success" id="edit" onclick="getComplaintData(${mapId}, true);"><i class="ik ik-edit"></i>Edit</button>
+								            		</div>
+							            		</form>`;
+							$('#rightContainer').html(complaintRightBody);
+							// Enable tooltips for all elements with data-toggle="tooltip"
+				            $('[data-toggle="tooltip"]').tooltip();
+						}).catch(function(error) {
+			    		    // Handle errors
+			    		    console.error('Error fetching action details ('+mapId+'):', error);
+			    		});	 
+						
+					}
+					// Enable tooltips for all elements with data-toggle="tooltip"
+		            $('[data-toggle="tooltip"]').tooltip();
+	        	}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching Complaint details ('+mapId+'):', error);
+	    		});	            
+	        	
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	$('#complaintDatatable').DataTable().destroy();
+	        	
+	            var table = $('#complaintDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        //scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+	            	var complaint_status=row["status"];
+					complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1);
+					
+					actionHTML = `<div class="dropdown d-inline-block show">
+			                        <a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
+			                        <!--<div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end">
+			                        Action for: `+row['petition_no']+` 
+			                        	<a class="dropdown-item" href="" onclick="return viewAck('`+row['petition_no']+`');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View Acknowledgement"><i class="ik ik-eye"></i> Acknowledgement</a>
+			                        	<a class="dropdown-item" href="/gcc/zerohours_petition/petition-ack/`+row['petition_no']+`" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print Acknowledgement"><i class="ik ik-printer"></i> Acknowledgement</a>
+			                        </div>-->
+			                    </div>`
+	                table.row.add([
+	                	rowNum++,
+	                    //'<a href="/gcc/zerohours_petition/update-petition?petitionNo='+row['petitionNoEncode']+'" onclick="return viewPetitionSummary(\''+row['petitionNoEncode']+'\');">'+row['petition_no']+'</a>',
+	                    row['petition_no'],
+	                    row['petitioner_name'],
+	                    row['petitioner_mobile'],
+	                    //row['petitioner_address'],
+	                    //row['petitioner_pincode'],
+	                    //row['complaint_type'],
+	                    convertdate(row['cdate']),
+	                    '<a href="#" class="link" onclick="return updateStatus('+row['mapid']+');" style="text-transform: capitalize;"">'+complaint_status+'</a>',
+	                    row['off_nm'],
+	                    actionHTML
+	                ]).draw(false);
+	            });
+	            
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+	        /* Get Event Data */
+	        function get_event_data(){
+	        	get_event_list().then(function(eventList) {
+	        		$('#ward').empty();
+					if(eventList.length>0){
+						// Iterate through the department list and add options to the select element
+		    		    $.each(eventList, function(index, events) {
+		    	            // Create an option element
+		    	            //alert(events.name);
+		    	            var option = $('<option>', {
+		    	            	value: events.id, // case-sensitive as per object
+		    	                text: events.name
+		    	            });
+		    	            // Append the option to the select element
+		    	            $('#eventid').append(option);
+		    	        });
+					}
+					else{
+						$("#card-body").html("<center>No Active Event Found!</center>");
+					}
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching event list:', error);
+	    		    
+	    		});
+	        	remove_loading();
+			}
+	        
+	      //Save Forward Details
+			function saveForward(mapid){
+				
+				var offidto = $("#dept2").val();
+				
+				if(offidto=='' || offidto==0){
+					var formError= "Select Department Required!";
+					$('#forwardFormError').html(formError);
+					return false;
+				}
+				
+				var comments = $("#forwardcomp").val();
+				var textLength = comments.length;
+				var formError= "";
+				if(textLength<=10){
+					formError= "Forward Comments Required!";
+					$('#forwardFormError').html(formError);
+					return false;
+				}
+				else{
+					$('#forwardFormError').html(formError);
+				}
+				
+				$.ajax({
+				    type: "POST",
+				    url: '/api/insertForwardLog',
+				    data: {
+				        'mapid': mapid,
+						'comments':comments,
+						'offidto':offidto
+				    },
+				}).done(function(response) {
+				      Swal.fire(
+				        'Complaint Forward Status!',
+				        'Complaint Forwarded Successfully!',
+				        'success'
+				      ).then(() => {
+							    location.reload();
+							 });
+					console.log(response);
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					/*
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+				    console.error("URL: /api/setEventId");
+				    console.error("Query parameters:", {
+				        'upass': upass
+				    });
+					*/
+				});
+				return false;
+			}
+	     	
+	      // Save New Action  
+			function saveandclose(mapId,petitionId,petitionNo){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var comments = $('#complaintActionText');
+				var textLength = comments.val().length;
+				comments.removeClass('is-invalid');
+				
+				var fileInput = $("#action_san_page1");
+				fileInput.removeClass('is-invalid');
+				var selectedFile = fileInput.val();
+				
+				if (textLength>=10 && selectedFile) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#action-form')[0]);
+			        formData.append('createdBy',createdBy);
+			        formData.append('mapId',mapId);
+			        formData.append('petitionId',petitionId);
+			        formData.append('petitionNo',petitionNo);
+			        formData.append('complaintStatus','close');
+			        
+			        saveActionFormData(formData).then(function(response) {
+						if(response!="error"){
+							// Handle the response
+		    		    	Swal.fire({
+		        				title: 'Complaint action saved successfully.',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'success',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					$("#ComplaintStatusBox").modal('hide');
+		        				}
+		        			});
+						}
+						else{
+							// Handle the response
+							// if response == "error"
+		    		    	Swal.fire({
+		        				title: 'Failed to save complaint action. Please try again!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+		    		    
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					if(textLength<10){
+						comments.addClass('is-invalid');
+					}
+					
+					if (!selectedFile) {
+						fileInput.addClass('is-invalid');
+					}
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function saveActionFormData(formData){
+				var apiUrl = '/gcc/api/zerohours_petition/saveComplanitStatus';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function form_btn_enable(){
+				$("#updatebtn").prop("disabled", false);
+				$("#updatebtn").html('<i class="ik ik-save"></i> Save and Close ');
+			}
+			
+			function form_btn_disable(){
+				$("#updatebtn").prop("disabled", true);
+				// Show the loading icon on the button
+				$("#updatebtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+			}
+			
+			// For Complient Map Select HTML 
+			function calloffice(val,id){
+				if(val==1){ // Intenal
+					var officeSelectHTML = `<div class="mb-4">
+	                							<label for="office${id}">Select Office</label>
+	                							<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})">
+									                <option value="0">Select Office</option>
+									                <option value="1">HQ</option>
+									                <option value="2">Zonal Office</option>
+							                	</select>
+						                	</div>`;
+					$("#officedata"+id).html(officeSelectHTML);
+				}
+				else if(val==2){ // External
+					$("#officers"+id).html('');
+					var ExSelectHTML = getselect(id,"ExSelect");
+					var departmentSelectHTML = `<div class="mb-4">
+													<label for="dept3">Select Department</label>
+													${ExSelectHTML}
+											 	</div>`;
+					$("#officedata"+id).html(departmentSelectHTML);
+				}
+				else{
+					$("#officedata"+id).html('');
+					$("#officers"+id).html('');
+				}
+				$("#officers"+id).html('');
+			}
+			
+			function callofficers(val,id){
+				
+				if(val==1){
+					// HQ
+					var HQSelectHTML = getselect(id,"HQSelect");
+				 	$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`);
+				}
+				else if(val==2){
+					// Zone Office
+					var ZoneSelectHTML = getselect(id,"ZoneSelect");
+					$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`);
+				}
+				else{
+					$("#officers"+id).html('');
+				}
+				
+			}
+			
+			function getselect(comid,type){
+		  	  var HQSelect = '';
+		  	  var ZoneSelect = '';
+		  	  var ExSelect = '';
+		  
+		  	  for (var i = 0; i < officerMasterList.length; i++) {
+		  		  if(officerMasterList[i].zone_id=="HQ"){
+		  			  HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else if(officerMasterList[i].zone_id=="99"){
+		  			  ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else{
+		  			  ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  	  }
+		  	  
+		  	// Forward Save Button
+			  var forward_Btn = `<div class="col-12 pt-3 mb-0 pb-0" id="submitdiv">
+									<label class="form-label" for="forwardcomp">Forward Comments</label>
+									<textarea class="js-maxlength form-control" id="forwardcomp" name="forwardcomp" rows="6" maxlength="250" placeholder="கருத்துகள்..." data-always-show="true" data-placement="right" th:utext="" required></textarea>
+			  						<div class="text-center pt-3">
+									<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveForward(${comid});" id="updatebtn"><i class="si si-rocket me-1"></i> Save and Forward</button>
+			  						<div id="forwardFormError" class="text-danger"></div>
+			  						</div>
+								</div>`;
+								
+		  	  if(type=="HQSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ZoneSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ExSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  return '';
+			}
+			$(document).ready(function() {
+				call_loading();
+				get_officer_master_data();
+				get_event_data();
+			});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/zerohours_petition/new_petition.html b/src/main/resources/templates/modules/zerohours_petition/new_petition.html
new file mode 100644
index 0000000..22cd4e6
--- /dev/null
+++ b/src/main/resources/templates/modules/zerohours_petition/new_petition.html
@@ -0,0 +1,456 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Add New Petition</h5>
+                                            <span>Zero Hours Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Zero Hours Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Add Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                        	<div class="col-md-2"></div>
+							<div class="col-md-8">
+                                <div class="card">
+									<form class="request-form" id="request-form" onsubmit="return saveRequest();" enctype="multipart/form-data">
+	                                    <div class="card-header"><h3>New Petition Form</h3></div>
+	                               		<div class="card-body" id="card-body">
+	                               			<div class="row">
+	                               				<div class="col-lg-12">
+													<div class="form-group">
+			                                            <label for="eventid">Select Current Event / ததற்போதைய நிகழ்வை தேர்ந்தெடுக்கவும்</label>
+			                                            <select class="form-control" id="eventid" name="eventid" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required>
+															<option value=""></option>
+														</select>
+			                                           <!-- <div class="form-radio" id="petition_type"></div> -->
+			                                        </div>
+		                                      	</div>
+	                               				<div class="col-lg-6">
+													<div class="form-group">
+			                                            <label for="zone">Select Zone / தேர்வு செய்யும் மண்டலம்</label>
+			                                            <select class="form-control" id="zone" name="zone" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." onchange="get_ward_list(this.value);" required>
+															<option value=""></option>
+														</select>
+			                                           <!-- <div class="form-radio" id="petition_type"></div> -->
+			                                        </div>
+		                                      	</div>
+	                                        	<div class="col-lg-6">
+			                                        <div class="form-group">
+			                                            <label for="ward">Select Ward / தேர்வு செய்யும் வார்டு</label>
+			                                            <select class="form-control" id="ward" name="ward" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required  onchange="get_councillor_details(this.value);">
+															<option value=""></option>
+														</select>
+			                                           <!-- <div class="form-radio" id="petition_type"></div> -->
+			                                        </div>
+	                                        	</div>
+	                                        </div>
+	                                        <div class="row">
+	                               				<div class="col-lg-6">
+													<div class="form-group">
+			                                            <label for="councillorName">Councillor Name / கௌன்சிலர் பெயர்</label>
+			                                            <input type="text" readonly class="form-control" name="councillorName" id="councillorName" autocomplete="off" placeholder="கௌன்சிலர் பெயர்"  maxlength="250" required>
+			                                        </div>
+			                                    </div>
+	                                        	<div class="col-lg-6">
+			                                        <div class="form-group">
+			                                            <label for="councillorMobile">Mobile NO / கைபேசி எண்</label>
+					                       				<input type="text" readonly class="js-maxlength form-control" id="councillorMobile" name="councillorMobile" autocomplete="off" placeholder="கைபேசி எண்" maxlength="10" data-always-show="true" data-placement="top" required>
+			                                        </div>
+			                                     </div>
+			                                </div>
+			                                <div class="form-group">
+	                                        	<label for="complaintNature">புகாரின் தன்மை / Nature Of Complaint</label>
+						   						<textarea class="form-control" id="complaintNature" name="complaintNature" rows="6" placeholder="புகாரின் தன்மை..."></textarea>
+						   					</div>
+											<!-- 
+	                                        <div class="row">
+												 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page1">Petition Page 1 / மனு பக்கம் 1</label>
+													   <input name="san_page1" id="san_page1" class="form-control" type="file" capture="camera"  accept="application/pdf, image/*">
+													 </div>
+												 </div>
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page2">Petition Page 2 / மனு பக்கம் 2</label>
+													   <input name="san_page2" id="san_page2" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+												 
+											</div>	 
+											<div class="row">	 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page3">Petition Page 3 / மனு பக்கம் 3</label>
+													   <input name="san_page3" id="san_page3" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+												 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page4">Petition Page 4 / மனு பக்கம் 4</label>
+													   <input name="san_page4" id="san_page4" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+											</div>
+										 	
+	                                  	</div>
+	                                  	 -->
+	                                  	<div class="card-footer text-right">
+											<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+	                                	</div>
+                                	</form>
+                                </div>
+                            </div>
+							<div class="col-md-2"></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 th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var complaintTypeList = "";
+			var zoneList="";
+			var wardList="";
+			
+			/* Get Event Data */
+	        function get_event_data(){
+	        	get_current_event_list().then(function(eventList) {
+	        		$('#ward').empty();
+					if(eventList.length>0){
+						// Iterate through the department list and add options to the select element
+		    		    $.each(eventList, function(index, events) {
+		    	            // Create an option element
+		    	            //alert(events.name);
+		    	            var option = $('<option>', {
+		    	            	value: events.id, // case-sensitive as per object
+		    	                text: events.name
+		    	            });
+		    	            // Append the option to the select element
+		    	            $('#eventid').append(option);
+		    	        });
+					}
+					else{
+						$("#card-body").html("<center>No Active Event Found!</center>");
+					}
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching event list:', error);
+	    		    
+	    		});
+			}
+			
+			/* Get Zone and Ward Data */
+	        function get_zone_ward_data(){
+	        	get_zone_ward_list().then(function(zoneWard) {
+	    		    // Handle the zoneward list
+	    		    zoneWardList = zoneWard;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(zoneWardList, function(index, zoneWards) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: zoneWards.zone, // case-sensitive as per object
+	    	                text: "Zone "+ zoneWards.zone
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#zone').append(option);
+	    	        });
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			
+	        /* Get Ward List */
+	        function get_ward_list(zone) {
+
+	            // Assuming get_zone_ward_list() returns a promise that resolves to the zoneWardList
+	            get_zone_ward_list().then(function(zoneWard) {
+	                // Handle the zoneWard list
+	                zoneWardList = zoneWard;
+	                
+	                // Clear any existing options in the ward dropdown
+	                $('#ward').empty();
+	                
+	                var option = $('<option>', {
+                        value:"" ,  // Set ward number as the value
+                        text:""  // Display as "Ward 1", "Ward 2", etc.
+                    });
+	                
+	                $('#ward').append(option);
+	                
+	                $('#councillorName').val('');
+					$('#councillorMobile').val('');
+					
+	            	 // Find the correct zone in the zoneWardList
+	                var selectedZone = zoneWardList.find(function(zoneWards) {	                    
+						return zoneWards.zone == zone;  // Compare the zone value
+	                });
+	                // If the zone is found, iterate over its wards and add options
+	                if (selectedZone) {
+	                    var wardsArray = selectedZone.wards.split(',');  // Split wards string into array
+	                    $.each(wardsArray, function(index, ward) {
+	                        // Create an option element
+	                        option = $('<option>', {
+	                            value: ward.trim(),  // Set ward number as the value
+	                            text: 'Ward ' + ward.trim()  // Display as "Ward 1", "Ward 2", etc.
+	                        });
+	                        // Append the option to the select element
+	                        $('#ward').append(option);
+	                    });
+	                } else {
+	                    console.error('Zone not found');
+	                }
+
+	            }).catch(function(error) {
+	                // Handle errors
+	                console.error('Error fetching ward list:', error);
+	            });
+	        }
+	        
+	        /* Get Ward List */
+	        function get_councillor_details(ward) {
+
+	            // Assuming get_zone_ward_list() returns a promise that resolves to the zoneWardList
+	            get_councillor_list(ward).then(function(councillors) {
+	                // Handle the zoneWard list
+	                councillorList = councillors;
+	                
+	                // Clear any existing options in the ward dropdown
+	                $('#councillorName').val('');
+					$('#councillorMobile').val('');
+	                
+				   	// Iterate through the department list and add options to the select element
+				   	$.each(councillorList, function(index, councillor) {
+				   		$('#councillorName').val(councillor.name)
+		                $('#councillorMobile').val(councillor.mobile1);
+				   	});   
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+	        }
+	        
+	       
+			/* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(complaintTypeList, function(index, complaintType) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: complaintType.complaint_typeid, // case-sensitive as per object
+	    	                text: complaintType.complaint_type
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#complaintType').append(option);
+	    	        });
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			
+	        /* Get Petition Type Data */
+	        function get_petition_type_data(){
+	        	var petitionTypeHTML="";
+	    		get_petition_type_list().then(function(petitionTypes) {
+	    		    // Handle the Complaint list
+	    		    petitionTypeList = petitionTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(petitionTypeList, function(index, petitionType) {
+	    	            // Create an option element
+	    	            
+	    	            petitionTypeHTML +=`<div class="radio radiofill ${petitionType.color_class} radio-inline">
+						                            <label class="cursure_poiter">
+						                            <input type="radio" name="petitionType" value="${petitionType.petition_type_id}">
+						                            <i class="helper"></i>${petitionType.name}
+						                        </label>
+						                    </div>`;
+	    	        });
+	    		 // Append the option to the select element
+    	         $('#petition_type').html(petitionTypeHTML);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching petition type list:', error);
+	    		});
+			}
+			 
+			// Save New petition 
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var inputElementMobileNo = $('#petitionerMobile');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementComplaintType = $('#complaintType');
+				var complaintType = inputElementComplaintType.val();
+				
+				if (mobileNo !== null) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#request-form')[0]);
+			        formData.append('createdBy',createdBy);
+			        saveFormData(formData).then(function(response) {
+						if(response!="error"){
+							// Handle the response
+		    		    	Swal.fire({
+		        				title: 'Petition data saved successfully.',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'success',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					// Reload the current page
+		        					//location.reload();
+		        					// Navigate to a Ack page
+		        					//window.location = "/gcc/zerohours_petition/petition-ack/"+response;
+		        					window.location = "/gcc/zerohours_petition/new_petition";
+		        				}
+		        			});
+						}
+						else{
+							// Handle the response
+							// if response == "error"
+		    		    	Swal.fire({
+		        				title: 'Failed to save petition data. Please try again!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+		    		    
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					inputElementMobileNo.addClass('is-invalid');
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function saveFormData(formData){
+				var apiUrl = '/gcc/api/zerohours_petition/savePetition';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function form_btn_enable(){
+				$("#resetFormBtn").prop("disabled", false);
+				$("#requestSubmitBtn").prop("disabled", false);
+				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+			}
+			
+			function form_btn_disable(){
+				$("#resetFormBtn").prop("disabled", true);
+				$("#requestSubmitBtn").prop("disabled", true);
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+			}
+			
+			$(document).ready(function() {
+				get_event_data();
+				get_zone_ward_data();
+				get_complaint_type_data();
+				$('#petitionerMobile').mask('0000000000');
+			});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/zerohours_petition/petition_ack.html b/src/main/resources/templates/modules/zerohours_petition/petition_ack.html
new file mode 100644
index 0000000..5dcb1cc
--- /dev/null
+++ b/src/main/resources/templates/modules/zerohours_petition/petition_ack.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5 th:utext="'Petition Acknowledgement ('+${petitionNo}+')'">Petition Acknowledgement</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Petition Acknowledgement</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr class="print_no">
+                        <!-- 
+                        <div class="row">
+                        	<div class="col-lg-6">
+								<div class="block block-rounded ack ack-container">
+									<div id="ack1table" style="border: 1px solid black;">
+										<div id="ack1"></div>
+									</div>
+								</div>
+							</div>
+						 
+							<div class="col-lg-6">
+								<div class="block block-rounded ack ack-container">
+									<div id="ack2table" style="border: 1px solid black;">
+										<div id="ack2"></div>
+									</div>
+								</div>
+							</div>
+		   	 	            <div class="col-lg-12 text-center block-options pt-10">
+		   	 					<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+		   	 	            </div>
+                        </div>
+                         -->
+                        <div class="row">
+						    <div class="col-lg-6">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack1table" class="ack-content">
+						                <div id="ack1">This is ack1</div>
+						            </div>
+						        </div>
+						    </div>
+						    
+						    <div class="col-lg-6 printack2">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack2table" class="ack-content">
+						                <div id="ack2">This is ack2</div>
+						            </div>
+						        </div>
+						    </div>
+						    <div class="col-lg-12 text-center block-options pt-10">
+						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+						    </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 th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var complaintTypeList = "";
+			
+			 /* Get Complaint Type Data */
+			function get_complaint_type_data(){
+			
+				get_complaint_type_list().then(function(complaintTypes) {
+				    // Handle the Complaint list
+				    complaintTypeList = complaintTypes;
+					
+				    // After Complaint Type list created we call petition details
+				    get_petition_data();
+				    
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching complaint type list:', error);
+				});
+			}
+			
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint_txt;
+					
+					var complaintArray = complaint.split(',');
+					
+					for(j = 0; j < complaintArray.length; j++){
+						if(j>0){
+							complaintHTML+="<br>";
+						}
+						complaintHTML+= (j+1)+') '+complaintArray[j];
+					}
+					var ack =`
+					<table class="table table-borderless table-vcenter p-0 m-0">
+					  <tbody>
+					    <tr>
+					      <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+					      <td class="fw-semibold text-center">
+								<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br>
+								மக்களை தேடி மேயர் திட்டம்<br>
+								ஒப்புகை சீட்டு / Acknowledgement Receipt</b>
+						  </td>
+						  <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+					    </tr>
+					</tbody>
+					</table>
+					<hr style="margin:0px">
+					  <div class="block-content p-0 m-0">
+					    <table class="table table-borderless table-vcenter" style="font-size:12px;">
+					      <tbody>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${convertdate(petitionDetails[0].cdate)}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petition_no}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petitioner_name}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petitioner_mobile}
+					          </td>
+					        </tr>
+					        <tr style="font-size:12px;">
+					          <th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${complaintHTML}
+							</td>
+					        </tr>
+					        <tr>
+					          <td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th>
+					        </tr>
+					        <tr style="text-align: right;">
+					          <th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th>
+					        </tr>
+					      </tbody>
+					    </table>
+					  `;
+				    
+					$("#ack1").html(ack);
+					$("#ack2").html(ack);
+					  
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition details ('+petitionNo+'):', error);
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			
+			function get_petition_details() {
+			    
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/zerohours_petition/getPetitionDetails?petitionNo='+petitionNo;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                resolve(jsonResponse);
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			$(document).ready(function() {
+				get_complaint_type_data();
+			});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/zerohours_petition/petition_list.html b/src/main/resources/templates/modules/zerohours_petition/petition_list.html
new file mode 100644
index 0000000..d1996b1
--- /dev/null
+++ b/src/main/resources/templates/modules/zerohours_petition/petition_list.html
@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Petition List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Petition List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                               <!--  <div class="card">
+                                    
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+										
+										<div class="form-group">
+                                            <label for="eventid">Select Event / நிகழ்வை தேர்ந்தெடுக்கவும்</label>
+                                            <select class="form-control" id="eventid" name="eventid" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required onchange="get_petitions_list(this.value);">
+												<option value=""></option>
+											</select>
+                                        </div>
+			                                        
+                                        <div>
+                                        	
+											<table id="petitionDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered" style="font-size:10px;">
+						                                <th class="text-center no-sort" width="3%">S.No</th>
+														<th class="text-center" width="10%">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<!-- <th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>-->
+						                                <th class="text-center">Content</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center" width="7%">Status</th>
+						                                <!--<th class="text-center">Petition Type</th>-->
+						                                <th class="text-center no-sort no-exportable no-print" width="5%">Action</th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- 
+                                                <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</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/zerohours_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+        <script th:inline="javascript">
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            }
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+			/* Get Event Data */
+	        function get_event_data(){
+	        	get_event_list().then(function(eventList) {
+	        		$('#ward').empty();
+					if(eventList.length>0){
+						// Iterate through the department list and add options to the select element
+		    		    $.each(eventList, function(index, events) {
+		    	            // Create an option element
+		    	            //alert(events.name);
+		    	            var option = $('<option>', {
+		    	            	value: events.id, // case-sensitive as per object
+		    	                text: events.name
+		    	            });
+		    	            // Append the option to the select element
+		    	            $('#eventid').append(option);
+		    	        });
+					}
+					else{
+						$("#card-body").html("<center>No Active Event Found!</center>");
+					}
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching event list:', error);
+	    		    
+	    		});
+	        	remove_loading();
+			}
+			
+	        /* Get Complaints Data */
+	        function get_petitions_data(id){
+	        	var apiUrl = '/gcc/api/zerohours_petition/getPetitionList?eventId='+id;
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_petitions_list(id){
+	        	call_loading();
+	        	get_petitions_data(id).then(function(petitionList) {
+	    		    // Handle the department list
+	    		    generate_table(petitionList);
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching petition list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching petition list:', error);
+			        }
+	    		});
+			}
+        
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+
+	        	if ( $.fn.dataTable.isDataTable('#petitionDatatable') ) {
+	        	    $('#petitionDatatable').DataTable().destroy();  // Destroy the existing instance
+	        	}
+	        	
+	            var table = $('#petitionDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        //scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+
+	            	//View Acknowledgement: View the acknowledgement for petition MP10000001.
+					//Print Acknowledgement: Print the acknowledgement for petition MP10000001.
+					//View Petition Details: View the details of petition MP10000001.
+					//View Uploaded Files: View the files uploaded for petition MP10000001.
+
+					actionHTML = `<div class="dropdown d-inline-block show">
+			                        <a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
+			                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end">
+			                        
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the acknowledgement for petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Acknowledgement</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print the acknowledgement for petition `+row['petition_no']+`."><i class="ik ik-printer"></i> Print Acknowledgement</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the details of petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Petition Details</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the files uploaded for petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Uploaded Files</a>
+			                        </div>
+			                    </div>`
+			                    
+			        actionHTML =`<i class="ik ik-more-horizontal"></i>`
+			        
+	                table.row.add([
+	                	rowNum++,
+	                    '<a href="/gcc/zerohours_petition/update-petition?petitionNo='+row['petitionNoEncode']+'" class="link">'+row['petition_no']+'</a>',
+	                    row['petitioner_name'],
+	                    row['petitioner_mobile'],
+	                    //row['petitioner_address'],
+	                    //row['petitioner_pincode'],
+	                    row['complaint_nature'],
+	                    convertdate(row['cdate']),
+	                    row['status'],
+	                    //row['petition_type_name'],
+	                    actionHTML
+	                ]).draw(false);
+	            });
+	            
+	           // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+			$(document).ready(function() {
+				call_loading();
+				get_event_data();
+			});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/zerohours_petition/petition_not_mapped_list.html b/src/main/resources/templates/modules/zerohours_petition/petition_not_mapped_list.html
new file mode 100644
index 0000000..affc7db
--- /dev/null
+++ b/src/main/resources/templates/modules/zerohours_petition/petition_not_mapped_list.html
@@ -0,0 +1,463 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Unmapped Petition List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Unmapped Petition List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <!-- <div class="card">
+                                	<div class="card-header">
+                                        <h3>These are the petitions that are currently not assigned to any department officer:</h3>
+                                    </div>
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+										
+										<div class="form-group">
+                                            <label for="eventid">Select Event / நிகழ்வை தேர்ந்தெடுக்கவும்</label>
+                                            <select class="form-control" id="eventid" name="eventid" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required onchange="get_petitions_list(this.value);">
+												<option value=""></option>
+											</select>
+                                        </div>
+                                        
+                                        <div>
+                                        <p style="font-size:12px">These are the petitions that are currently not assigned to any department officer:</p>
+											<table id="petitionDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Zone</th>
+														<th class="text-center">Ward</th>
+						                                <th class="text-center">Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</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/zerohours_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+        <script th:inline="javascript">
+        	var createdBy = /*[[${LoginUserId}]]*/'';
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	var officerMasterList = "";
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            }
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_petitions_data(id){
+	        	var apiUrl = '/gcc/api/zerohours_petition/getUnmapPetitionList?eventId='+id;
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_petitions_list(id){
+	        	call_loading();
+	        	get_petitions_data(id).then(function(petitionList) {
+	    		    // Handle the department list
+	    		    generate_table(petitionList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching petition list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching petition list:', error);
+			        }
+	    		});
+			}
+        
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+
+	        	$('#petitionDatatable').DataTable().destroy();
+	        	
+	            var table = $('#petitionDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+				        	{ targets: 'no-sort', "orderable": false },
+							{ targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				       // scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+	                table.row.add([
+	                	rowNum++,
+	                    '<a href="/gcc/zerohours_petition/update-petition?petitionNo='+row['petitionNoEncode']+'">'+row['petition_no']+'</a>',
+	                    row['petitioner_name'],
+	                    row['zone'],
+	                    row['ward'],
+	                    row['complaint_nature'],
+	                    convertdate(row['cdate']),
+	                    row['status'],
+	                    '<a href="#" onclick="return compliant_mapping(\''+row['petition_id']+'\',\'Assign to the Department Officer\',\''+row['petition_no']+'\');"data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Assign to the Department Officer."><i class="far fa-handshake"></i></a>',
+	                ]).draw(false);
+	            });
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            
+	            remove_loading(); // remove Loading 
+			}
+	        
+	        /* Get Event Data */
+	        function get_event_data(){
+	        	get_event_list().then(function(eventList) {
+	        		$('#ward').empty();
+					if(eventList.length>0){
+						// Iterate through the department list and add options to the select element
+		    		    $.each(eventList, function(index, events) {
+		    	            // Create an option element
+		    	            //alert(events.name);
+		    	            var option = $('<option>', {
+		    	            	value: events.id, // case-sensitive as per object
+		    	                text: events.name
+		    	            });
+		    	            // Append the option to the select element
+		    	            $('#eventid').append(option);
+		    	        });
+					}
+					else{
+						$("#card-body").html("<center>No Active Event Found!</center>");
+					}
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching event list:', error);
+	    		    
+	    		});
+	        	remove_loading();
+			}
+			
+	        function get_mapped_list(petitionId){
+	        	var apiUrl = '/gcc/api/zerohours_petition/getPetitionMappingDetails2?petitionId='+petitionId
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            //data: formData,
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                console.error('Error fetching petition maping details ('+petitionNo+'):', error);
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+			}
+	        
+	     	// For Complient Map Select HTML 
+			function calloffice(val,id){
+				if(val==1){ // Intenal
+					var officeSelectHTML = `<div class="mb-4">
+	                							<label for="office${id}">Select Office</label>
+	                							<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})">
+									                <option value="0">Select Office</option>
+									                <option value="1">HQ</option>
+									                <option value="2">Zonal Office</option>
+							                	</select>
+						                	</div>`;
+					$("#officedata"+id).html(officeSelectHTML);
+				}
+				else if(val==2){ // External
+					$("#officers"+id).html('');
+					var ExSelectHTML = getselect(id,"ExSelect");
+					var departmentSelectHTML = `<div class="mb-4">
+													<label for="dept3">Select Department</label>
+													${ExSelectHTML}
+											 	</div>`;
+					$("#officedata"+id).html(departmentSelectHTML);
+				}
+				else{
+					$("#officedata"+id).html('');
+					$("#officers"+id).html('');
+				}
+				$("#officers"+id).html('');
+			}
+			
+			function callofficers(val,id){
+				
+				if(val==1){
+					// HQ
+					var HQSelectHTML = getselect(id,"HQSelect");
+				 	$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`);
+				}
+				else if(val==2){
+					// Zone Office
+					var ZoneSelectHTML = getselect(id,"ZoneSelect");
+					$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`);
+				}
+				else{
+					$("#officers"+id).html('');
+				}
+				
+			}
+			
+			function getselect(comid,type){
+		  	  var HQSelect = '';
+		  	  var ZoneSelect = '';
+		  	  var ExSelect = '';
+		  
+		  	  for (var i = 0; i < officerMasterList.length; i++) {
+		  		  if(officerMasterList[i].zone_id=="HQ"){
+		  			  HQSelect+=`<option value="${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else if(officerMasterList[i].zone_id=="99"){
+		  			  ExSelect+=`<option value="${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else{
+		  			  ZoneSelect+=`<option value="${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  	  }
+		  	  
+		  	  // Forward Save Button
+			  var forward_Btn = `<div class="col-12 pt-3 mb-0 pb-0 text-center" id="submitdiv">
+									<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveMappingDepatment();" id="updatebtn"><i class="si si-rocket me-1"></i>Save</button>
+			  						<div id="forwardFormError" class="text-danger"></div>
+			  						</div>
+								</div>`;
+								
+		  	  if(type=="HQSelect"){
+		  	  	 return `<select name="mapOfficerid" id="mapOfficerid" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ZoneSelect"){
+		  	  	 return `<select name="mapOfficerid" id="mapOfficerid" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ExSelect"){
+		  	  	 return `<select name="mapOfficerid" id="mapOfficerid" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  return '';
+			}
+			
+			/* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+		
+	     	//Save Forward Details
+			function saveMappingDepatment(){
+				
+				var offidto = $("#mapOfficerid").val();
+				var petitionId = $("#petitionid").val();
+				var petitionNo = $("#petitionno").val();
+				var formError= "";
+				if(offidto=='' || offidto==0){
+					formError= "Select Department Required!";
+					$('#forwardFormError').html(formError);
+					return false;
+				}
+				
+				$.ajax({
+				    type: "POST",
+				    url: '/gcc/api/zerohours_petition/mapPetitionToOfficer',
+				    data: {
+				        'petitionId': petitionId,
+				        'petitionNo': petitionNo,
+				        'createdBy':createdBy,
+						'offidto':offidto
+				    },
+				}).done(function(response) {
+				      Swal.fire(
+				        'Petition Mappiing Status!',
+				        'Petition Mapped Successfully!',
+				        'success'
+				      ).then(() => {
+							    //location.reload();
+				    	  	updateModelBox(petitionId,'Assign to the Department Officer',petitionNo)
+							 });
+					console.log(response);
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					
+				});
+				return false;
+			}
+		     	
+			$(document).ready(function() {
+				call_loading();
+				get_officer_master_data();
+				get_event_data();
+				//get_petitions_list();
+			});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/zerohours_petition/petition_update.html b/src/main/resources/templates/modules/zerohours_petition/petition_update.html
new file mode 100644
index 0000000..31d8c8a
--- /dev/null
+++ b/src/main/resources/templates/modules/zerohours_petition/petition_update.html
@@ -0,0 +1,775 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Edit / Update Petition</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Edit/Update Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card" id="petitionUpdateForm">
+									<form class="update-request-form" id="update-request-form" onsubmit="return updateRequest();">
+										<div class="card-header">
+		                                    <h3>Edit / Update Petition Form</h3>
+		                                    <div class="card-header-right">
+	                                            <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+	                                        </div>
+	                                    </div>
+	                               		<div class="card-body">
+	                               			<div class="row">
+	                               				<!-- <div class="col-12">
+	                               					<div class="form-group">
+			                                            <label for="petitionerName">Petition Type / மனுவின் வகை</label>
+			                                            <div class="form-radio" id="petition_type">
+				                                          
+				                                        </div>
+			                                        </div>
+	                               				</div> -->
+												<div class="col-6">
+													<div class="form-group">
+			                                            <label for="petitionerName">Petitioner's Name / மனுதாரரின் பெயர்</label>
+			                                            <input type="text" readonly class="form-control" name="petitionerName" id="petitionerName" autocomplete="off" placeholder="மனுதாரரின் பெயர்">
+			                                        </div>
+			                                    </div>
+												<div class="col-6">
+			                                        <div class="form-group">
+			                                            <label for="petitionerMobile">Mobile NO / கைபேசி எண்</label>
+					                       				<input type="text" readonly class="form-control" id="petitionerMobile" name="petitionerMobile" autocomplete="off" placeholder="கைபேசி எண்">
+			                                        </div>
+			                                   	</div>
+												<div class="col-6">
+			                                      	<div class="form-group">
+			                                        	<label for="complaintNature">புகாரின் தன்மை / Nature Of Complaint</label>
+								   						<textarea class="form-control" id="complaintNature" name="complaintNature" rows="6" placeholder="புகாரின் தன்மை..."></textarea>
+								   					</div>
+								   				</div>
+												<div class="col-6">
+													<!-- 
+													<div class="form-group">
+														<label for="petitionerAddress">Address of petitioner / மனுதாரரின் முகவரி</label>
+									   					<textarea class="form-control" id="petitionerAddress" name="petitionerAddress" rows="6" maxlength="250" placeholder="மனுதாரரின் முகவரி..."></textarea>
+													</div>
+													
+													<div class="form-group">
+														<label for="petitionerPincode">Postal code / தபால் குறியீடு</label>
+	   			                       					<input type="text" class="form-control" id="petitionerPincode" name="petitionerPincode" placeholder="தபால் குறியீடு" maxlength="6" required>
+													</div>
+													-->
+													<div class="form-group">
+		                                          		<label for="complaintType">Type of complaint / புகார் வகை (பலவற்றை தேர்ந்தெடு..) </label>
+														<select class="select2" id="complaintType" name="complaintType" style="width: 100%;" data-placeholder="பலவற்றை தேர்ந்தெடு.." multiple required onchange="javascript:load_mapper();">
+															<option></option>
+														</select>
+													</div>
+												</div>
+												<div class="col-12">
+													<div class="block-content" id="userinfo2">
+														<div id="comp_mapping_to_officers" class="row"></div>
+													</div>
+											 	</div>
+											</div>
+	                                  	</div>
+	                                  	<div class="card-footer text-right">
+											<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+	                                	</div>
+                                	</form>
+                                </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 th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var petitionId = 0;
+			var closedComplaintsList=[];
+			var complaintTypeList = "";
+			var officerMasterList = "";
+			
+			 /* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Iterate through the Master Complanint Type and add options to the select element
+	    		    $.each(complaintTypeList, function(index, complaintType) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: complaintType.complaint_typeid, // case-sensitive as per object
+	    	                text: complaintType.complaint_type
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#complaintType').append(option);
+	    	        });
+	    		    // Call Petition function to fetch the data
+	    		    get_petition_data();
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			 
+	        /* Get Petition Type Data */
+	        function get_petition_type_data(){
+	        	var petitionTypeHTML="";
+	    		get_petition_type_list().then(function(petitionTypes) {
+	    		    // Handle the Complaint list
+	    		    petitionTypeList = petitionTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(petitionTypeList, function(index, petitionType) {
+	    	            // Create an option element
+	    	            
+	    	            petitionTypeHTML +=`<div class="radio radiofill ${petitionType.color_class} radio-inline">
+						                            <label class="cursure_poiter">
+						                            <input type="radio" name="petitionType" id="petition_type_${petitionType.petition_type_id}" value="${petitionType.petition_type_id}" disable>
+						                            <i class="helper"></i>${petitionType.name}
+						                        </label>
+						                    </div>`;
+	    	        });
+	    		 // Append the option to the select element
+    	         $('#petition_type').html(petitionTypeHTML);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching petition type list:', error);
+	    		});
+			}
+	        
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+			 
+	     	// Function to get complaint_type and complaint_typeid by complaint_typeid
+	        function getComplaintTypeById(complaintTypeId) {
+	            for (var i = 0; i < complaintTypeList.length; i++) {
+	                if (complaintTypeList[i].complaint_typeid == complaintTypeId) {
+	                    return {
+	                        complaint_type: complaintTypeList[i].complaint_type,
+	                        complaint_typeid: complaintTypeList[i].complaint_typeid
+	                    };
+	                }
+	            }
+	            return null; // Return null if no matching complaint_typeid is found
+	        }
+	     
+			// Save New petition 
+			function updateRequest(){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var inputElementMobileNo = $('#petitionerMobile');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementComplaintType = $('#complaintType');
+				var complaintType = inputElementComplaintType.val();
+				
+				if (mobileNo !== null) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#update-request-form')[0]);
+			        formData.append('petitionNo',petitionNo);
+			        formData.append('createdBy',createdBy);
+			        formData.append('petitionId',petitionId);
+			        updateFormData(formData).then(function(response) {
+		    		    // Handle the response
+		    		    if(response==true){
+							// Delete Old data in Petition Mapping table
+		    		    	savePetitionMapData(formData).then(function(response) {
+		    		    		if(response==true){
+		    		    			Swal.fire({
+				        				title: 'Petition updated successfully!',
+				        				customClass: {
+				        			        title: 'swal-title-custom' // Add a custom class for the title
+				        			    },
+				        				//text: "Error",
+				        				icon: 'success',
+				        				showCancelButton: false,
+				        				confirmButtonColor: '#3085d6',
+				        				cancelButtonColor: '#d33',
+				        				confirmButtonText: 'Ok',
+				        				}).then(function(result) {
+				        				if (result.isConfirmed) {
+				        					form_btn_enable();
+				        				}
+				        			});
+		    		    		}
+		    		    		else{
+		    		    			Swal.fire({
+				        				title: 'Petition details have been updated, but mapping the complaint to the officer has failed.',
+				        				customClass: {
+				        			        title: 'swal-title-custom' // Add a custom class for the title
+				        			    },
+				        				//text: "Error",
+				        				icon: 'warning',
+				        				showCancelButton: false,
+				        				confirmButtonColor: '#3085d6',
+				        				cancelButtonColor: '#d33',
+				        				confirmButtonText: 'Ok',
+				        				}).then(function(result) {
+				        				if (result.isConfirmed) {
+				        					form_btn_enable();
+				        				}
+				        			});
+								}
+		    		    	}).catch(function(error) {
+		    	    		    // Handle errors
+		    	    		    console.error('Error fetching offcier master data:', error);
+		    	    		    form_btn_enable();
+		    	    		});
+		    		    	
+						}
+		    		    else{
+		    		    	Swal.fire({
+		        				title: 'Failed to update petition details!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+	    		    	
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					//inputElementMobileNo.addClass('is-invalid');
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function updateFormData(formData){
+				var apiUrl = '/gcc/api/zerohours_petition/updatePetition';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function savePetitionMapData(formData){
+				var apiUrl = '/gcc/api/zerohours_petition/mapComplientToOfficer';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint;
+					
+					var complaintArray;
+					
+					petitionId = petitionDetails[0].petition_id;
+					if (complaint != null && complaint !== '') {
+					    complaintArray = complaint.split(",");
+					} else {
+					    complaintArray = [];  // Initialize to an empty array
+					}
+					//complaintArray = complaint.split(",");
+					
+					$("#complaintType").val(complaintArray);
+					
+					$('#complaintType').trigger('change');
+					
+					closedComplaintsList = complaintArray;
+					//var petition_type = "#petition_type_"+petitionDetails[0].petition_type;
+					// Suppose you want to select the radio button with the value 'option2'
+					//$(petition_type).prop('checked', true);
+
+					$("#petitionerName").val(petitionDetails[0].petitioner_name);
+					$("#petitionerMobile").val(petitionDetails[0].petitioner_mobile);
+					$("#petitionerAddress").val(petitionDetails[0].petitioner_address);
+					$("#petitionerPincode").val(petitionDetails[0].petitioner_pincode);
+					
+					$("#complaintNature").val(petitionDetails[0].complaint_nature);
+					
+					//load_mapper(); // Call for Complaint Mapping Form
+					
+					// IDs of the values you want to prevent from being deselected
+					var valuesToPreventDeselection = closedComplaintsList;//['value1', 'value2', 'value3'];
+
+					$('#complaintType').on('select2:unselect', function (e) {
+					    var deselectedValue = e.params.data.id;
+					    
+					    // Check if the deselected value should be prevented from being deselected
+					    if (valuesToPreventDeselection.includes(deselectedValue)) {
+					        // Prevent the deselection
+					        e.preventDefault();
+					    	// Re-select the deselected value to prevent it from being deselected
+					        $(this).val(valuesToPreventDeselection).trigger('change.select2');
+					        // Optionally, you can display a message or perform any other action
+					        console.log('Deselection of value ' + deselectedValue + ' prevented');
+					        alert('Deselection of value ' + deselectedValue + ' prevented');
+					    }
+					});
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition Data ('+petitionNo+'):', error.message);
+				    call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			function get_petition_details() {
+			    
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/zerohours_petition/getPetitionDetails?petitionNo='+petitionNo;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                //alert(jsonResponse.length);
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			function load_mapper(){
+			  	var complaintArray = $("#complaintType").val();
+			  	//var complaintArray = complaint.split(',');
+				var compPetitionNo = petitionNo;
+				var compPetitionId = petitionId;
+				
+				var compmapHTML='';
+				for(j = 0; j < complaintArray.length; j++){
+					var complaintTypeDetails = getComplaintTypeById(complaintArray[j]); // Pass the complaint_typeid
+					var title=(j+1)+') '+ complaintTypeDetails.complaint_type; // Map form title
+					var compID="comp"+j;
+					var complaintTypeId = complaintTypeDetails.complaint_typeid;
+					
+					getMappingByComplaintsID(complaintTypeId);
+					
+					compmapHTML+=`<div class="col-lg-6" id="comp${complaintArray[j]}">
+										
+										<div class="widget">
+					                        <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                            <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+					                        </div>
+					                        <div class="widget-body">
+					                        	<div class="form-group">
+						                        	<label for="dept${complaintArray[j]}">Select Department Type</label>
+													<select name="dept[]" id="dept${complaintArray[j]}" class="form-control" onchange="javascript:calloffice(this.value,${complaintArray[j]})">
+														<option value="0">Select Department</option>
+														<option value="1">GCC Department</option>
+														<option value="2">External Department</option>
+												    </select>
+												</div>
+												<div id="officedata${complaintArray[j]}"></div>
+												<div id="officers${complaintArray[j]}"></div>
+					                        </div>
+					                    </div>
+									
+								  </div>`;
+						
+				}
+				$('#comp_mapping_to_officers').html(compmapHTML);
+				
+			  }
+			
+		</script>
+		
+		<script>
+		// For Complient Map Select HTML 
+		function calloffice(val,id){
+			if(val==1){ // Intenal
+				var officeSelectHTML = `<div class="mb-4">
+                							<label for="office${id}">Select Office</label>
+                							<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})">
+								                <option value="0">Select Office</option>
+								                <option value="1">HQ</option>
+								                <option value="2">Zonal Office</option>
+						                	</select>
+					                	</div>`;
+				$("#officedata"+id).html(officeSelectHTML);
+			}
+			else if(val==2){ // External
+				$("#officers"+id).html('');
+				var ExSelectHTML = getselect(id,"ExSelect");
+				var departmentSelectHTML = `<div class="mb-4">
+												<label for="dept3">Select Department</label>
+												${ExSelectHTML}
+										 	</div>`;
+				$("#officedata"+id).html(departmentSelectHTML);
+			}
+			else{
+				$("#officedata"+id).html('');
+				$("#officers"+id).html('');
+			}
+			$("#officers"+id).html('');
+		}
+		
+		function callofficers(val,id){
+			
+			if(val==1){
+				// HQ
+				var HQSelectHTML = getselect(id,"HQSelect");
+			 	$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`);
+			}
+			else if(val==2){
+				// Zone Office
+				var ZoneSelectHTML = getselect(id,"ZoneSelect");
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`);
+			}
+			else{
+				$("#officers"+id).html('');
+			}
+			
+		}
+		
+		function getselect(comid,type){
+	  	  var HQSelect = '';
+	  	  var ZoneSelect = '';
+	  	  var ExSelect = '';
+	  
+	  	  for (var i = 0; i < officerMasterList.length; i++) {
+	  		  if(officerMasterList[i].zone_id=="HQ"){
+	  			  HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  		  else if(officerMasterList[i].zone_id=="99"){
+	  			  ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  		  else{
+	  			  ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  	  }
+	  	  
+	  	  if(type=="HQSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>`;
+	  	  }
+	  	  if(type=="ZoneSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>`;
+	  	  }
+	  	  if(type=="ExSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>`;
+	  	  }
+	  	  return '';
+		}
+		
+		function form_btn_enable(){
+			$("#resetFormBtn").prop("disabled", false);
+			$("#requestSubmitBtn").prop("disabled", false);
+			$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+		}
+		
+		function form_btn_disable(){
+			$("#resetFormBtn").prop("disabled", true);
+			$("#requestSubmitBtn").prop("disabled", true);
+			// Show the loading icon on the button
+			$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+		}
+		
+		function getMappingByComplaintsID(complaintTypeId){
+				
+				$.ajax({
+				    type: "GET",
+				    url: '/gcc/api/zerohours_petition/getComplaintMappingDetails',
+				    data: {
+				        'petitionId': petitionId,
+						'petitionNo': petitionNo,
+						'complaintTypeId': complaintTypeId
+				    },
+					dataType: 'json',
+				}).done(function(response) {
+					
+					//console.log(response);
+					
+					if(response.length>0){
+						var comid = response[0]["complaint_typeid"];
+						var offid = response[0]["off_id"];
+						var mapid = response[0]["mapid"];
+						loadSelectforUpdate(comid,offid,comid);
+					}
+					
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+						
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+					    
+				});
+		}
+		
+		function loadSelectforUpdate(comid,offid,id){
+			var type ="NULL";
+	  	  	var HQSelect = '';
+	  	  	var ZoneSelect = '';
+	  	  	var ExSelect = '';
+	  
+			for (var i = 0; i < officerMasterList.length; i++) {
+		  		//console.log(officerMasterList[i]);
+				if(officerMasterList[i].zone_id=="HQ"){
+			  
+				  	if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "HQSelect";
+				  		HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+				  	}
+				  	else{
+				  		HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+				  	}
+					  
+				}
+				else if(officerMasterList[i].zone_id=="99"){
+					if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "ExSelect";
+						ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+		  			}
+		  			else{
+		  				ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  			}
+				}
+				else{
+					if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "ZoneSelect";
+						//console.log(type + " === "+ officerMasterList[i].offId +" == "+ offid);
+						ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+				  	}
+				  	else{
+				  		ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+				  	}  
+				}
+			}  
+			
+			//console.log("comid : "+comid +",\noffid : "+offid+",\nid : "+id+",\ntype : "+type);
+			
+			if(type=="HQSelect"){
+				//console.log("I am from HQSelect: \n #officers"+id);
+				$("#officedata"+id).html('<div class="mb-4">' +
+				           '<label for="office$'+id+'">Select Office</label>' +
+				           '<select name="office[]" id="office$'+id+'" class="form-control" onchange="javascript:callofficers(this.value,'+id+')">' +
+				           '<option value="0">Select Office</option>' +
+				           '<option value="1" Selected>HQ</option>' +
+				           '<option value="2">Zonal Office</option>' +
+				           '</select>' +
+				           '</div>');
+			  	 HQSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>`;
+		 		$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${HQSelectHTML}</div>`);
+		 
+			}
+			if(type=="ZoneSelect"){
+				//console.log("I am from ZoneSelect: \n #officers"+id);
+				$("#officedata"+id).html('<div class="mb-4">' +
+				           '<label for="office$'+id+'">Select Office</label>' +
+				           '<select name="office[]" id="office$'+id+'" class="form-control" onchange="javascript:callofficers(this.value,'+id+')">' +
+				           '<option value="0">Select Office</option>' +
+				           '<option value="1">HQ</option>' +
+				           '<option value="2" Selected>Zonal Office</option>' +
+				           '</select>' +
+				           '</div>');
+				  
+				ZoneSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>`;
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${ZoneSelectHTML}</div>`);
+			}
+			if(type=="ExSelect"){
+				//console.log("I am from ExSelect: \n #officers"+id);
+				ExSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>`;
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${ExSelectHTML}</div>`);
+			}
+		 
+		}
+		
+		function call_petition_search_from(errorTXT){
+			var errorHTML = "";
+			if(errorTXT!=""){
+				errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`;
+			}
+			var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();">
+										<div class="card-header">
+						                <h3>Edit / Update Petition Form</h3>
+						                <div class="card-header-right">
+						                    <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+						                </div>
+						            </div>
+						       		<div class="card-body">
+						       			<div class="row">
+											<div class="col-12 text-center">
+												${errorHTML}
+												<div class="form-group">
+						                            <label for="petitionNoSearch">Petition No / மனு எண் </label>
+						                            <input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="ZH00000000" maxlength="11" required>
+						                        </div>
+						                        
+											</div>
+											<div class="col-12">
+												<div class="block-content" id="userinfo2">
+													<div id="comp_mapping_to_officers" class="row"></div>
+												</div>
+										 	</div>
+										</div>
+						          	</div>
+						          	<div class="card-footer text-center">
+										<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+						            	<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button>
+						        	</div>
+						    	</form>`;
+			
+			$("#petitionUpdateForm").html(searchFormHTML);
+			$('#petitionNoSearch').mask('ZH00000000');
+		}
+		
+		function searchRequest(){
+			var searchValue = $('#petitionNoSearch').val();
+			if (searchValue && searchValue.trim() !== '') {
+				searchValue = encodeBase64(searchValue);
+				window.location.href = "/gcc/zerohours_petition/update-petition?petitionNo="+searchValue;
+			}
+			else{
+				call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+			}
+			return false;
+		}
+		</script>
+		<script>
+		$(document).ready(function() {
+			
+			if(petitionNo!=null && petitionNo!="error"){
+				get_complaint_type_data();
+				//get_petition_type_data();
+				get_officer_master_data();
+			}
+			else{
+				if(petitionNo=="error"){
+					call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				}
+				else{
+					call_petition_search_from("");
+				}
+			}
+			
+		});
+		</script>
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/zerohours_petition/petition_view.html b/src/main/resources/templates/modules/zerohours_petition/petition_view.html
new file mode 100644
index 0000000..e2ac7da
--- /dev/null
+++ b/src/main/resources/templates/modules/zerohours_petition/petition_view.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>View Petition</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">View Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card mb-0" id="petitionViewtable">
+					             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+					                	<h3>Petition Details</h3>
+					                	<div class="card-header-right text-center block-options pt-10" style="padding-right: 20px;">
+									        <a href="javascript:void(0);" onclick="window.print()" class="link"><i class="ik ik-printer"></i> Print</a>
+									    </div>
+					                </div>
+					                <div class="card-body">
+					                	<div class="row">
+											<div class="col-6">
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">நாள் / Date: </th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="cdate_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petition_no_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_name_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_mobile_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Address of petitioner / மனுதாரரின் முகவரி:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_address_value"></td>
+											        </tr>
+											        <tr>
+											          <th colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;">புகாரின் தன்மை / Nature of complaint:<br>
+											          <p class="fw-semibold mb-0" style="font-weight:normal;" id="complaint_nature_value"></p>
+											          </th>
+											        </tr>
+											        <tr>
+											        	<td colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;" id="complaint_with_maping_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+											</div>
+											
+											<div class="col-6">
+												
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											      	<tr>
+											          <th style="padding: 0.45rem 0.45rem;">Petition Status: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_status_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total number of complaints in this petition: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Completed:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_completed_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Pending:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_pending_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+												
+												
+												<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th id="petition_summary_title">Pending Summary</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+									                	<tr style="background-color:#fbffe0;">
+												          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_summary_html"></td>
+												        </tr>
+								                	</tbody>
+								              	</table>
+								              	
+											</div>
+										</div>
+										<div class="row">
+											
+											<div class="col-12">
+												<div class="card-title">List of Complaints in this Petition and Their Status:</div>
+												<div id="listOfComplaintsHTML"></div>
+											</div>
+										</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 th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+        <script th:replace="~{fragments/modules/zerohours_petition/petition_view_script :: script}"></script>
+       	
+    </body>
+</html>
diff --git a/src/main/resources/templates/modules/zerohours_petition/petition_view_modal_page.html b/src/main/resources/templates/modules/zerohours_petition/petition_view_modal_page.html
new file mode 100644
index 0000000..f2f4fd3
--- /dev/null
+++ b/src/main/resources/templates/modules/zerohours_petition/petition_view_modal_page.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+        
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card mb-0" id="petitionViewtable">
+					             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+					                	<h3>Petition Details</h3>
+					                	<div class="card-header-right text-center block-options pt-10" style="padding-right: 20px;">
+									        <a href="javascript:void(0);" onclick="window.print()" class="link"><i class="ik ik-printer"></i> Print</a>
+									    </div>
+					                </div>
+					                <div class="card-body">
+					                	<div class="row">
+											<div class="col-6">
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">நாள் / Date: </th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="cdate_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petition_no_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_name_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_mobile_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">மனுதாரரின் முகவரி / Address of petitioner:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_address_value"></td>
+											        </tr>
+											        <tr>
+											          <th colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;">புகாரின் தன்மை / Nature of complaint:<br>
+											          <p class="fw-semibold mb-0" style="font-weight:normal;" id="complaint_nature_value"></p>
+											          </th>
+											        </tr>
+											        <tr>
+											        	<td colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;" id="complaint_with_maping_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+											</div>
+											
+											<div class="col-6">
+												
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											      	<tr>
+											          <th style="padding: 0.45rem 0.45rem;">Petition Status: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_status_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total number of complaints in this petition: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Completed:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_completed_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Pending:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_pending_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+												
+												
+												<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th id="petition_summary_title">Pending Summary</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+									                	<tr style="background-color:#fbffe0;">
+												          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_summary_html"></td>
+												        </tr>
+								                	</tbody>
+								              	</table>
+								              	
+											</div>
+										</div>
+										<div class="row">
+											
+											<div class="col-12">
+												<div class="card-title">List of Complaints in this Petition and Their Status:</div>
+												<div id="listOfComplaintsHTML"></div>
+											</div>
+										</div>
+					                </div>
+					            </div>
+                            </div>
+                            
+                        </div>
+                        
+        <script th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+       	<script th:replace="~{fragments/modules/zerohours_petition/petition_view_script :: script}"></script>
+    </body>
+</html>
diff --git a/target/classes/.DS_Store b/target/classes/.DS_Store
new file mode 100644
index 0000000..911bbd9
Binary files /dev/null and b/target/classes/.DS_Store differ
diff --git a/target/classes/META-INF/maven/in.gov.chennaicorporation/gccoffice/pom.properties b/target/classes/META-INF/maven/in.gov.chennaicorporation/gccoffice/pom.properties
index 266fd4f..8cbad67 100644
--- a/target/classes/META-INF/maven/in.gov.chennaicorporation/gccoffice/pom.properties
+++ b/target/classes/META-INF/maven/in.gov.chennaicorporation/gccoffice/pom.properties
@@ -1,5 +1,5 @@
 #Generated by Maven Integration for Eclipse
-#Wed May 08 12:01:05 IST 2024
+#Tue Feb 04 08:14:28 IST 2025
 artifactId=gccoffice
 groupId=in.gov.chennaicorporation
 m2e.projectLocation=/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal
diff --git a/target/classes/META-INF/maven/in.gov.chennaicorporation/gccoffice/pom.xml b/target/classes/META-INF/maven/in.gov.chennaicorporation/gccoffice/pom.xml
index 5071695..56e4b6a 100644
--- a/target/classes/META-INF/maven/in.gov.chennaicorporation/gccoffice/pom.xml
+++ b/target/classes/META-INF/maven/in.gov.chennaicorporation/gccoffice/pom.xml
@@ -5,7 +5,8 @@
 	<parent>
 		<groupId>org.springframework.boot</groupId>
 		<artifactId>spring-boot-starter-parent</artifactId>
-		<version>2.5.4</version>
+		<!--<version>2.5.4</version>-->
+		<version>2.5.4</version> <!-- or the latest 3.x version -->
 		<relativePath/> <!-- lookup parent from repository -->
 	</parent>
 	<!--<packaging>war</packaging>-->
@@ -19,6 +20,8 @@
         <bootstrap.version>4.0.0-2</bootstrap.version>
         <webjars-locator.version>0.30</webjars-locator.version>
         <lombok.version>1.18.2</lombok.version>
+        <maven.compiler.source>19</maven.compiler.source>
+    	<maven.compiler.target>19</maven.compiler.target>
 	</properties>
 	<dependencies>
 		
@@ -99,13 +102,33 @@
 			<scope>test</scope>
 		</dependency>
 		-->
+	
+		<dependency>
+	        <groupId>org.apache.poi</groupId>
+	        <artifactId>poi-ooxml</artifactId>
+	        <version>5.2.2</version> 
+	    </dependency>
+	  <!--
+	    <dependency>
+	        <groupId>org.apache.poi</groupId>
+	        <artifactId>poi</artifactId>
+	        <version>5.2.2</version>
+	    </dependency>
+-->
 		<dependency>
 			<groupId>in.gov.chennaicorporation</groupId>
 			<artifactId>Community-Hall-Booking</artifactId>
 			<version>0.0.1-SNAPSHOT</version>
 		</dependency>
+		<!--
+		<dependency>
+		    <groupId>org.jsoup</groupId>
+		    <artifactId>jsoup</artifactId>
+		    <version>1.14.3</version>
+		</dependency>
+		-->
 	</dependencies>
-
+	
 <!-- Spring Cloud dependencies -->
 <!--
     <dependencyManagement>
diff --git a/target/classes/application.properties b/target/classes/application.properties
index df82279..7a8e703 100644
--- a/target/classes/application.properties
+++ b/target/classes/application.properties
@@ -1,6 +1,6 @@
-#spring.profiles.active=local
-spring.profiles.active=production
-#For Server production 
+spring.profiles.active=local
+#spring.profiles.active=production
+#For Server production
 #assets.base-url=/gcc/assets/
 #For local test
 #assets.base-url=/assets/
@@ -13,13 +13,21 @@ spring.application.name=gcc-portal
 
 spring.datasource.hikari.connection-timeout=30000
 
+spring.jackson.time-zone=Asia/Kolkata
+
+# Maximum file size
+spring.servlet.multipart.max-file-size=20MB
+
+# Maximum request size (including all files)
+spring.servlet.multipart.max-request-size=20MB
+
 # HTTP Server
 server.port = 8064
 #server.servlet.context-path=/gccoffice
 server.error.include-stacktrace= on_param
 # Hibernate logging
-logging.level.org.hibernate.SQL=DEBUG
-logging.level.org.hibernate.type.descriptor.sql.BasicBinder=TRACE
+#logging.level.org.hibernate.SQL=DEBUG
+#logging.level.org.hibernate.type.descriptor.sql.BasicBinder=TRACE
 
 # Enable CORS globally for all endpoints
 spring.webmvc.cors.enabled=true
@@ -68,7 +76,29 @@ cp_ackno = 10000000
 cp_foldername = c_petition
 cp_action_Foldername = c_action_file
 
+#///////// For Councillor Petition //////////
+com_ackno_prefix=COM
+com_ackno = 10000000
+com_foldername = com_petition
+com_action_Foldername = com_action_file
+
 #///////// For Circular Petition //////////
 cir_ackno_prefix=CP
 cir_ackno = 10000000
 cir_foldername = circular
+
+#///////// For Zero Hours Petition //////////
+zh_ackno_prefix=ZH
+zh_ackno = 10000000
+zh_foldername = zh_petition
+zh_action_Foldername = zh_action_file
+
+#//////// NULM Staff /////////////
+nulm_foldername = nulm_ordercopy
+
+#/////////// For 1913 campaign ////////////
+campaign.foldername = campaign_uploads
+
+#/////////// For SOS ////////////
+sos_activity_foldername= sos_rescue_activity_images
+
diff --git a/target/classes/in/.DS_Store b/target/classes/in/.DS_Store
new file mode 100644
index 0000000..8c05ec3
Binary files /dev/null and b/target/classes/in/.DS_Store differ
diff --git a/target/classes/in/gov/.DS_Store b/target/classes/in/gov/.DS_Store
new file mode 100644
index 0000000..f837ca3
Binary files /dev/null and b/target/classes/in/gov/.DS_Store differ
diff --git a/target/classes/in/gov/chennaicorporation/.DS_Store b/target/classes/in/gov/chennaicorporation/.DS_Store
new file mode 100644
index 0000000..5bc553a
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/.DS_Store differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/.DS_Store b/target/classes/in/gov/chennaicorporation/gccoffice/.DS_Store
new file mode 100644
index 0000000..4fb5bef
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/.DS_Store differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/GccOfficeApplication.class b/target/classes/in/gov/chennaicorporation/gccoffice/GccOfficeApplication.class
index 6340440..5aece7e 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/GccOfficeApplication.class and b/target/classes/in/gov/chennaicorporation/gccoffice/GccOfficeApplication.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/controller/APIController.class
index 970d7db..22ce12e 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/controller/APIController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/controller/MainController.class
index 64f9532..fd5a5fb 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/controller/MainController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/controller/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/controller/package-info.class
new file mode 100644
index 0000000..6bb0065
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/controller/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/data/ComplaintType.class b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/data/ComplaintType.class
index 4e28cd2..4600710 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/data/ComplaintType.class and b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/data/ComplaintType.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/data/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/data/package-info.class
new file mode 100644
index 0000000..0922609
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/data/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/entity/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/entity/package-info.class
new file mode 100644
index 0000000..ada0da2
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/entity/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/package-info.class
new file mode 100644
index 0000000..5615b3f
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/service/Petition.class b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/service/Petition.class
index 7809125..dd4b603 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/service/Petition.class and b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/service/Petition.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/service/PetitionMaster.class b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/service/PetitionMaster.class
index d8137c0..803506f 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/service/PetitionMaster.class and b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/service/PetitionMaster.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/service/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/service/package-info.class
new file mode 100644
index 0000000..743a59f
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/c_petition/service/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentAssignAPIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentAssignAPIController.class
new file mode 100644
index 0000000..72098bf
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentAssignAPIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController$1.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController$1.class
new file mode 100644
index 0000000..a93ee5c
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController$1.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController$2.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController$2.class
new file mode 100644
index 0000000..2a0301b
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController$2.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController.class
new file mode 100644
index 0000000..50a0642
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AttendanceAPIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AttendanceAPIController.class
new file mode 100644
index 0000000..a1f4c2c
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/AttendanceAPIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/CampaignAPIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/CampaignAPIController.class
new file mode 100644
index 0000000..42cbfc6
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/CampaignAPIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/CategoryAPIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/CategoryAPIController.class
new file mode 100644
index 0000000..996b267
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/CategoryAPIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController$1.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController$1.class
new file mode 100644
index 0000000..f3fe91c
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController$1.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController$2.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController$2.class
new file mode 100644
index 0000000..320b3a6
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController$2.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController.class
new file mode 100644
index 0000000..210bd40
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/WhatsappController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/WhatsappController.class
new file mode 100644
index 0000000..39e8c2d
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/controller/WhatsappController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AddcategoryServices.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AddcategoryServices.class
new file mode 100644
index 0000000..ebfc1ee
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AddcategoryServices.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentAssignService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentAssignService.class
new file mode 100644
index 0000000..6fc0161
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentAssignService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentsService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentsService.class
new file mode 100644
index 0000000..3872b15
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentsService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AttendanceService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AttendanceService.class
new file mode 100644
index 0000000..3ca5e76
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/AttendanceService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/CampaignService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/CampaignService.class
new file mode 100644
index 0000000..41b5480
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/CampaignService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/WhatsappMsgService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/WhatsappMsgService.class
new file mode 100644
index 0000000..57496a5
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenter/service/WhatsappMsgService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/.DS_Store b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/.DS_Store
new file mode 100644
index 0000000..8c23e3d
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/.DS_Store differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/ComplaintController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/ComplaintController.class
new file mode 100644
index 0000000..7703393
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/ComplaintController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/FollowUpController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/FollowUpController.class
new file mode 100644
index 0000000..516707e
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/FollowUpController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/InprogresscallController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/InprogresscallController.class
new file mode 100644
index 0000000..98d16e4
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/InprogresscallController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/MainController.class
new file mode 100644
index 0000000..e8f45af
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/PublicFollowUpController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/PublicFollowUpController.class
new file mode 100644
index 0000000..16cdc44
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/PublicFollowUpController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAPIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAPIController.class
new file mode 100644
index 0000000..3a46c0d
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAPIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAdminSettingsController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAdminSettingsController.class
new file mode 100644
index 0000000..4158e1d
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAdminSettingsController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentAssignAPIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentAssignAPIController.class
new file mode 100644
index 0000000..6e2b76c
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentAssignAPIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentsAPIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentsAPIController.class
new file mode 100644
index 0000000..bb58f94
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentsAPIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcCallsController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcCallsController.class
new file mode 100644
index 0000000..d5abd84
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcCallsController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcTaskListAPIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcTaskListAPIController.class
new file mode 100644
index 0000000..c2645ad
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcTaskListAPIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/SocialMediaController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/SocialMediaController.class
new file mode 100644
index 0000000..76655a4
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/SocialMediaController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/StatusCountController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/StatusCountController.class
new file mode 100644
index 0000000..11bce3c
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/StatusCountController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/WhatsappController.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/WhatsappController.class
new file mode 100644
index 0000000..d9a731f
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/WhatsappController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService$1.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService$1.class
new file mode 100644
index 0000000..20f5acd
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService$1.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService$2.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService$2.class
new file mode 100644
index 0000000..0e55407
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService$2.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService.class
new file mode 100644
index 0000000..dec4f72
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/FollowUpService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/FollowUpService.class
new file mode 100644
index 0000000..232ac17
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/FollowUpService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/InprogresscallService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/InprogresscallService.class
new file mode 100644
index 0000000..158da88
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/InprogresscallService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/PublicFollowUpService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/PublicFollowUpService.class
new file mode 100644
index 0000000..75593e1
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/PublicFollowUpService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAdminSettingService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAdminSettingService.class
new file mode 100644
index 0000000..03155cb
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAdminSettingService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentAssignService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentAssignService.class
new file mode 100644
index 0000000..6cc5355
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentAssignService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentsService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentsService.class
new file mode 100644
index 0000000..5210f3d
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentsService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcCallsService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcCallsService.class
new file mode 100644
index 0000000..d0ffcfd
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcCallsService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcService.class
new file mode 100644
index 0000000..68008b8
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcTaskListService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcTaskListService.class
new file mode 100644
index 0000000..da49a26
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcTaskListService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/SocialMediaService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/SocialMediaService.class
new file mode 100644
index 0000000..388fd29
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/SocialMediaService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/StatusCountService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/StatusCountService.class
new file mode 100644
index 0000000..4fd3944
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/StatusCountService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/WhatsappqaqcMsgService.class b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/WhatsappqaqcMsgService.class
new file mode 100644
index 0000000..8562388
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/WhatsappqaqcMsgService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/.DS_Store b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/.DS_Store
new file mode 100644
index 0000000..09aadd7
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/.DS_Store differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/ApiController.class b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/ApiController.class
new file mode 100644
index 0000000..b202fdf
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/ApiController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$1.class b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$1.class
new file mode 100644
index 0000000..a9d28c5
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$1.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$2.class b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$2.class
new file mode 100644
index 0000000..4751d34
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$2.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$3.class b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$3.class
new file mode 100644
index 0000000..52372fd
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$3.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$4.class b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$4.class
new file mode 100644
index 0000000..0d4ea46
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$4.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$5.class b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$5.class
new file mode 100644
index 0000000..b025377
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$5.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$6.class b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$6.class
new file mode 100644
index 0000000..c4ac13d
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController$6.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController.class
new file mode 100644
index 0000000..b100f3c
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/WhatsappControllerCD.class b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/WhatsappControllerCD.class
new file mode 100644
index 0000000..99dd818
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/WhatsappControllerCD.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/RegistrationService.class b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/RegistrationService.class
new file mode 100644
index 0000000..44c0135
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/RegistrationService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/WhatsappMsgService.class b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/WhatsappMsgService.class
new file mode 100644
index 0000000..97d9c30
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/WhatsappMsgService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/circular/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/circular/controller/APIController.class
index 0961c05..1886c96 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/circular/controller/APIController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/circular/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/circular/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/circular/controller/MainController.class
index 7e5c328..5fb8590 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/circular/controller/MainController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/circular/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/circular/controller/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/circular/controller/package-info.class
new file mode 100644
index 0000000..e28ca31
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/circular/controller/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/circular/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/circular/package-info.class
new file mode 100644
index 0000000..e8ae87f
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/circular/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/circular/service/CircularMaster.class b/target/classes/in/gov/chennaicorporation/gccoffice/circular/service/CircularMaster.class
index 45ede86..e36f8db 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/circular/service/CircularMaster.class and b/target/classes/in/gov/chennaicorporation/gccoffice/circular/service/CircularMaster.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/circular/service/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/circular/service/package-info.class
new file mode 100644
index 0000000..898f4cc
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/circular/service/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/.DS_Store b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/.DS_Store
new file mode 100644
index 0000000..e75b544
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/.DS_Store differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/controller/APIController.class
new file mode 100644
index 0000000..ae17938
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/controller/MainController.class
new file mode 100644
index 0000000..ad0a6f6
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/controller/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/controller/package-info.class
new file mode 100644
index 0000000..376e3cd
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/controller/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/data/ComplaintType.class b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/data/ComplaintType.class
new file mode 100644
index 0000000..cb810fc
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/data/ComplaintType.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/data/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/data/package-info.class
new file mode 100644
index 0000000..b539b42
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/data/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/package-info.class
new file mode 100644
index 0000000..3efab40
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/service/Petition.class b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/service/Petition.class
new file mode 100644
index 0000000..6e39499
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/service/Petition.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/service/PetitionMaster.class b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/service/PetitionMaster.class
new file mode 100644
index 0000000..3a30ec4
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/service/PetitionMaster.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/service/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/service/package-info.class
new file mode 100644
index 0000000..fc59374
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/com_petition/service/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/AppConfig.class b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/AppConfig.class
index dc2d9d0..6740c4f 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/AppConfig.class and b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/AppConfig.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig$MysqlAppDataSourceConfig.class b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig$MysqlAppDataSourceConfig.class
index aad237e..e81e7d5 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig$MysqlAppDataSourceConfig.class and b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig$MysqlAppDataSourceConfig.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig$MysqlTaxCollectionDataSourceConfig.class b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig$MysqlTaxCollectionDataSourceConfig.class
index 843885d..d1710cf 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig$MysqlTaxCollectionDataSourceConfig.class and b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig$MysqlTaxCollectionDataSourceConfig.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.class b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.class
index dfb863f..687a16f 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.class and b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/JacksonConfiguration.class b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/JacksonConfiguration.class
index 738e77c..ff4d184 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/JacksonConfiguration.class and b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/JacksonConfiguration.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/SecurityConfig.class b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/SecurityConfig.class
index 3e672ae..746d169 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/SecurityConfig.class and b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/SecurityConfig.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/ThymeleafConfig.class b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/ThymeleafConfig.class
index 4f00664..303a0c2 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/ThymeleafConfig.class and b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/ThymeleafConfig.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/WebMvcConfig.class b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/WebMvcConfig.class
index 751b05e..dcf08ee 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/configuration/WebMvcConfig.class and b/target/classes/in/gov/chennaicorporation/gccoffice/configuration/WebMvcConfig.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/controller/APIController.class
index 6c329f8..60f4d9d 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/controller/APIController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/controller/APIMobileCotroller.class b/target/classes/in/gov/chennaicorporation/gccoffice/controller/APIMobileCotroller.class
index 0568f77..4a5cb9d 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/controller/APIMobileCotroller.class and b/target/classes/in/gov/chennaicorporation/gccoffice/controller/APIMobileCotroller.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/controller/AdminController.class b/target/classes/in/gov/chennaicorporation/gccoffice/controller/AdminController.class
index 610a053..f730d34 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/controller/AdminController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/controller/AdminController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/controller/CustomErrorController.class b/target/classes/in/gov/chennaicorporation/gccoffice/controller/CustomErrorController.class
index 27a1b71..bacaf59 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/controller/CustomErrorController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/controller/CustomErrorController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/controller/DateTimeUtil.class b/target/classes/in/gov/chennaicorporation/gccoffice/controller/DateTimeUtil.class
new file mode 100644
index 0000000..dcf460a
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/controller/DateTimeUtil.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/controller/FileController.class b/target/classes/in/gov/chennaicorporation/gccoffice/controller/FileController.class
index 7e8674b..288829e 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/controller/FileController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/controller/FileController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/controller/MainController.class
index db40c93..053374e 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/controller/MainController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/controller/MenuController.class b/target/classes/in/gov/chennaicorporation/gccoffice/controller/MenuController.class
index 683ecb7..59b8bc7 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/controller/MenuController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/controller/MenuController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/controller/login.class b/target/classes/in/gov/chennaicorporation/gccoffice/controller/login.class
index 3c91bf7..a87de0f 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/controller/login.class and b/target/classes/in/gov/chennaicorporation/gccoffice/controller/login.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/entity/.DS_Store b/target/classes/in/gov/chennaicorporation/gccoffice/entity/.DS_Store
new file mode 100644
index 0000000..2d00e2b
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/entity/.DS_Store differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppModuleAccessEntity.class b/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppModuleAccessEntity.class
index 4c28c11..71dd446 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppModuleAccessEntity.class and b/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppModuleAccessEntity.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppModuleEntity.class b/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppModuleEntity.class
index 49fa9a3..f9c8b90 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppModuleEntity.class and b/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppModuleEntity.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppUserEntity.class b/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppUserEntity.class
index 6a723dd..59edbb9 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppUserEntity.class and b/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppUserEntity.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppUserGroupEntity.class b/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppUserGroupEntity.class
index 3839c66..622a578 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppUserGroupEntity.class and b/target/classes/in/gov/chennaicorporation/gccoffice/entity/AppUserGroupEntity.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/entity/MenuItemAccessEntity.class b/target/classes/in/gov/chennaicorporation/gccoffice/entity/MenuItemAccessEntity.class
index 8f81b29..8cc4dcc 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/entity/MenuItemAccessEntity.class and b/target/classes/in/gov/chennaicorporation/gccoffice/entity/MenuItemAccessEntity.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/entity/MenuItemEntity.class b/target/classes/in/gov/chennaicorporation/gccoffice/entity/MenuItemEntity.class
index 6b15efe..5c322af 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/entity/MenuItemEntity.class and b/target/classes/in/gov/chennaicorporation/gccoffice/entity/MenuItemEntity.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/entity/SubMenuItemAccessEntity.class b/target/classes/in/gov/chennaicorporation/gccoffice/entity/SubMenuItemAccessEntity.class
index 0dc649e..46c3fc2 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/entity/SubMenuItemAccessEntity.class and b/target/classes/in/gov/chennaicorporation/gccoffice/entity/SubMenuItemAccessEntity.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/entity/SubMenuItemEntity.class b/target/classes/in/gov/chennaicorporation/gccoffice/entity/SubMenuItemEntity.class
index ae01c2f..6c82565 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/entity/SubMenuItemEntity.class and b/target/classes/in/gov/chennaicorporation/gccoffice/entity/SubMenuItemEntity.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/entity/UserActivityLog.class b/target/classes/in/gov/chennaicorporation/gccoffice/entity/UserActivityLog.class
index 6d86879..3cf6a4e 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/entity/UserActivityLog.class and b/target/classes/in/gov/chennaicorporation/gccoffice/entity/UserActivityLog.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/entity/UserInfoEntity.class b/target/classes/in/gov/chennaicorporation/gccoffice/entity/UserInfoEntity.class
index db9a2b4..ac95177 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/entity/UserInfoEntity.class and b/target/classes/in/gov/chennaicorporation/gccoffice/entity/UserInfoEntity.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/.DS_Store b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/.DS_Store
new file mode 100644
index 0000000..c682588
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/.DS_Store differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/controller/APIController.class
index cb53245..2f99bc8 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/controller/APIController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/controller/MainController.class
index 683d6db..37d4da4 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/controller/MainController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/.DS_Store b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/.DS_Store
new file mode 100644
index 0000000..72aa13e
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/.DS_Store differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/Request.class b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/Request.class
index afdceea..8c45d05 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/Request.class and b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/Request.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/RequestStatus.class b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/RequestStatus.class
index f2aaaaf..df60720 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/RequestStatus.class and b/target/classes/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/RequestStatus.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/interceptor/AppInterceptor.class b/target/classes/in/gov/chennaicorporation/gccoffice/interceptor/AppInterceptor.class
index 2de673c..3e8b442 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/interceptor/AppInterceptor.class and b/target/classes/in/gov/chennaicorporation/gccoffice/interceptor/AppInterceptor.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/controller/APIController.class
index dd296f6..59c9ec3 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/controller/APIController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/controller/MainController.class
index 929a1a8..70c999c 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/controller/MainController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/controller/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/controller/package-info.class
new file mode 100644
index 0000000..1f0523a
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/controller/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/data/ComplaintType.class b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/data/ComplaintType.class
index 2ae708c..7f6e612 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/data/ComplaintType.class and b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/data/ComplaintType.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/data/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/data/package-info.class
new file mode 100644
index 0000000..e42ad98
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/data/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/entity/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/entity/package-info.class
new file mode 100644
index 0000000..ec2d1ff
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/entity/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/package-info.class
new file mode 100644
index 0000000..90e1dd2
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/repository/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/repository/package-info.class
new file mode 100644
index 0000000..2b4b188
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/repository/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/service/Petition.class b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/service/Petition.class
index 52f3b01..645514d 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/service/Petition.class and b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/service/Petition.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/service/PetitionMaster.class b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/service/PetitionMaster.class
index 07c5aa6..a54408b 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/service/PetitionMaster.class and b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/service/PetitionMaster.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/service/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/service/package-info.class
new file mode 100644
index 0000000..3705eb6
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/m_petition/service/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/modeldata/Employee.class b/target/classes/in/gov/chennaicorporation/gccoffice/modeldata/Employee.class
index c5fa9d4..42038fa 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/modeldata/Employee.class and b/target/classes/in/gov/chennaicorporation/gccoffice/modeldata/Employee.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/modeldata/ErrorResponse.class b/target/classes/in/gov/chennaicorporation/gccoffice/modeldata/ErrorResponse.class
index 351f036..c1f094a 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/modeldata/ErrorResponse.class and b/target/classes/in/gov/chennaicorporation/gccoffice/modeldata/ErrorResponse.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/APIController.class
index e026050..36f998a 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/APIController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/MainController.class
index bc50f02..61c32b9 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/MainController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/MayorController.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/MayorController.class
index bb95702..dfdc8b9 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/MayorController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/MayorController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/OfficerController.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/OfficerController.class
index 61128f3..971fab4 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/OfficerController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/OfficerController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/package-info.class
new file mode 100644
index 0000000..8263a91
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/controller/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MTMOfficer.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MTMOfficer.class
index 1a46542..652a0ac 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MTMOfficer.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MTMOfficer.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MtmComplaintTypes.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MtmComplaintTypes.class
index 0c9d108..1c5bb35 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MtmComplaintTypes.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MtmComplaintTypes.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MtmEvent.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MtmEvent.class
index c7e4d8b..3b38c3b 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MtmEvent.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/MtmEvent.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/Petition$MtmEvents.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/Petition$MtmEvents.class
index 1e6103a..f3895ba 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/Petition$MtmEvents.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/Petition$MtmEvents.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/Petition.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/Petition.class
index 89c3a21..0c45ba3 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/Petition.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/Petition.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmComplaintTypes.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmComplaintTypes.class
index 3666ace..465c4b9 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmComplaintTypes.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmComplaintTypes.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmEvents.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmEvents.class
index 1b2bb34..0367613 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmEvents.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmEvents.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmEventsPetitionId.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmEventsPetitionId.class
index 4c12033..7b1b255 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmEventsPetitionId.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmEventsPetitionId.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint.class
index 498a1a4..fd1892a 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint.class and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/package-info.class
new file mode 100644
index 0000000..fa7ba68
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/data/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/mtm/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/package-info.class
new file mode 100644
index 0000000..24ff60a
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/mtm/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/nulm/.DS_Store b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/.DS_Store
new file mode 100644
index 0000000..09c4e42
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/.DS_Store differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmAPIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmAPIController.class
new file mode 100644
index 0000000..60c5770
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmAPIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmController.class b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmController.class
new file mode 100644
index 0000000..b7d0cba
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/nulm/controller/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/controller/package-info.class
new file mode 100644
index 0000000..6466543
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/controller/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository$1.class b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository$1.class
new file mode 100644
index 0000000..0f8341d
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository$1.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository$2.class b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository$2.class
new file mode 100644
index 0000000..466c1ac
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository$2.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository$3.class b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository$3.class
new file mode 100644
index 0000000..acbab73
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository$3.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository.class
new file mode 100644
index 0000000..8592d5f
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/package-info.class
new file mode 100644
index 0000000..b5911ab
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/repository/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/nulm/service/NulmService.class b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/service/NulmService.class
new file mode 100644
index 0000000..3c6eefa
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/service/NulmService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/nulm/service/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/service/package-info.class
new file mode 100644
index 0000000..80c72be
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/nulm/service/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/controller/APIController.class
index 93968f7..774b27d 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/controller/APIController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/controller/MainController.class
index 1bf1c3d..88e60b3 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/controller/MainController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/PetCountInfo.class b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/PetCountInfo.class
index a076a7e..1538090 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/PetCountInfo.class and b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/PetCountInfo.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/RequestList.class b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/RequestList.class
index 5fb2cdf..22c1177 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/RequestList.class and b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/RequestList.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/ResponseWrapper.class b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/ResponseWrapper.class
index 534f0f1..c1898f2 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/ResponseWrapper.class and b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/ResponseWrapper.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/package-info.class
new file mode 100644
index 0000000..345c050
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/data/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/package-info.class
new file mode 100644
index 0000000..0cd0f77
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/service/API.class b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/service/API.class
index 61bcb90..4410d29 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/service/API.class and b/target/classes/in/gov/chennaicorporation/gccoffice/petregistration/service/API.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/controller/APIController.class
index 30513be..3a0004a 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/controller/APIController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/controller/MainController.class
index 9a4ab81..33787cd 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/controller/MainController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/controller/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/controller/package-info.class
new file mode 100644
index 0000000..19828bf
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/controller/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/data/Departments.class b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/data/Departments.class
index ee916bf..68d59d2 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/data/Departments.class and b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/data/Departments.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/data/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/data/package-info.class
new file mode 100644
index 0000000..6db4721
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/data/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/package-info.class
new file mode 100644
index 0000000..c90ca04
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/service/DataSyncService.class b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/service/DataSyncService.class
index 0a42475..aee09ea 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/service/DataSyncService.class and b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/service/DataSyncService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/service/PGRCommon.class b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/service/PGRCommon.class
index 02c5624..b277de6 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/service/PGRCommon.class and b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/service/PGRCommon.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/pgr/service/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/service/package-info.class
new file mode 100644
index 0000000..f4d64b4
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/pgr/service/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/APIController.class
index 6cfb448..36e505b 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/APIController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/MainController.class
index 2acad1b..97e9cb6 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/MainController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset$AssetCategory.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset$AssetCategory.class
index 280eba7..4827c40 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset$AssetCategory.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset$AssetCategory.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset.class
index c119b89..1a2c97a 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategory.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategory.class
index f6a312b..4347fcc 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategory.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategory.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategoryQuestion$AssetCategoryInfo.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategoryQuestion$AssetCategoryInfo.class
index 5cd8127..35624ba 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategoryQuestion$AssetCategoryInfo.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategoryQuestion$AssetCategoryInfo.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategoryQuestion.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategoryQuestion.class
index 278058d..c7036e4 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategoryQuestion.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategoryQuestion.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameter$AssetCategoryInfo.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameter$AssetCategoryInfo.class
index ef29509..d2c1ed9 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameter$AssetCategoryInfo.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameter$AssetCategoryInfo.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameter.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameter.class
index 7e5e0f9..e0c804c 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameter.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameter.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions$AssetCategory.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions$AssetCategory.class
index a504904..1378f39 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions$AssetCategory.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions$AssetCategory.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions$AssetParameter.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions$AssetParameter.class
index 7173905..5679323 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions$AssetParameter.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions$AssetParameter.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions.class
index 598a6f2..826849e 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion$AssetDetails$AssetCategory.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion$AssetDetails$AssetCategory.class
index 9812590..fc5fa74 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion$AssetDetails$AssetCategory.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion$AssetDetails$AssetCategory.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion$AssetDetails.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion$AssetDetails.class
index 7f4b17d..7bd0ef4 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion$AssetDetails.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion$AssetDetails.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion.class
index 81e4494..64b75c6 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback$AssetDetails$AssetCategory.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback$AssetDetails$AssetCategory.class
index 628e8f4..1461d7a 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback$AssetDetails$AssetCategory.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback$AssetDetails$AssetCategory.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback$AssetDetails.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback$AssetDetails.class
index 87ec084..2ace478 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback$AssetDetails.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback$AssetDetails.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback.class
index 2dc7e2e..6a9cf2f 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback.class and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/package-info.class
new file mode 100644
index 0000000..1e7acb2
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/qrassetfeedback/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppModuleAccessRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppModuleAccessRepository.class
index 0e5f7ac..819edfd 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppModuleAccessRepository.class and b/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppModuleAccessRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppModuleRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppModuleRepository.class
index c7c2843..e32f528 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppModuleRepository.class and b/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppModuleRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppUserGroupRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppUserGroupRepository.class
index 2c0835a..51fe4f0 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppUserGroupRepository.class and b/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppUserGroupRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppUserRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppUserRepository.class
index f0cd831..e0aecff 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppUserRepository.class and b/target/classes/in/gov/chennaicorporation/gccoffice/repository/AppUserRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/repository/MenuItemAccessRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/repository/MenuItemAccessRepository.class
index cdb043b..25f95ad 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/repository/MenuItemAccessRepository.class and b/target/classes/in/gov/chennaicorporation/gccoffice/repository/MenuItemAccessRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/repository/MenuItemRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/repository/MenuItemRepository.class
index 3d7b3c9..34c1a45 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/repository/MenuItemRepository.class and b/target/classes/in/gov/chennaicorporation/gccoffice/repository/MenuItemRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/repository/SubMenuItemAccessRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/repository/SubMenuItemAccessRepository.class
index 8508e11..0caeb70 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/repository/SubMenuItemAccessRepository.class and b/target/classes/in/gov/chennaicorporation/gccoffice/repository/SubMenuItemAccessRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/repository/SubMenuItemRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/repository/SubMenuItemRepository.class
index 56b9c54..ae3a525 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/repository/SubMenuItemRepository.class and b/target/classes/in/gov/chennaicorporation/gccoffice/repository/SubMenuItemRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/repository/UserActivityLogRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/repository/UserActivityLogRepository.class
index 2f15513..32a09c0 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/repository/UserActivityLogRepository.class and b/target/classes/in/gov/chennaicorporation/gccoffice/repository/UserActivityLogRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/repository/UserInfoRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/repository/UserInfoRepository.class
index e376928..9b9052a 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/repository/UserInfoRepository.class and b/target/classes/in/gov/chennaicorporation/gccoffice/repository/UserInfoRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/service/Base64Util.class b/target/classes/in/gov/chennaicorporation/gccoffice/service/Base64Util.class
index 4966b12..db8aeee 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/service/Base64Util.class and b/target/classes/in/gov/chennaicorporation/gccoffice/service/Base64Util.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/service/CustomUserDetails.class b/target/classes/in/gov/chennaicorporation/gccoffice/service/CustomUserDetails.class
index 0b731c4..1cf42f9 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/service/CustomUserDetails.class and b/target/classes/in/gov/chennaicorporation/gccoffice/service/CustomUserDetails.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/service/CustomUserDetailsService.class b/target/classes/in/gov/chennaicorporation/gccoffice/service/CustomUserDetailsService.class
index 4d92854..cbaf822 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/service/CustomUserDetailsService.class and b/target/classes/in/gov/chennaicorporation/gccoffice/service/CustomUserDetailsService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/service/GetMappingUserDetails.class b/target/classes/in/gov/chennaicorporation/gccoffice/service/GetMappingUserDetails.class
new file mode 100644
index 0000000..5a0f996
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/service/GetMappingUserDetails.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/service/LoginUserInfo.class b/target/classes/in/gov/chennaicorporation/gccoffice/service/LoginUserInfo.class
index 4ee77ca..2a9c5a0 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/service/LoginUserInfo.class and b/target/classes/in/gov/chennaicorporation/gccoffice/service/LoginUserInfo.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/service/UserActivityService.class b/target/classes/in/gov/chennaicorporation/gccoffice/service/UserActivityService.class
index 1aa93c9..7672d2e 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/service/UserActivityService.class and b/target/classes/in/gov/chennaicorporation/gccoffice/service/UserActivityService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/service/UserActivityTimelineService.class b/target/classes/in/gov/chennaicorporation/gccoffice/service/UserActivityTimelineService.class
index d343887..a55b614 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/service/UserActivityTimelineService.class and b/target/classes/in/gov/chennaicorporation/gccoffice/service/UserActivityTimelineService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/sos/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/sos/controller/APIController.class
new file mode 100644
index 0000000..d145859
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/sos/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/sos/controller/SOSController.class b/target/classes/in/gov/chennaicorporation/gccoffice/sos/controller/SOSController.class
new file mode 100644
index 0000000..f269ef5
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/sos/controller/SOSController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/sos/controller/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/sos/controller/package-info.class
new file mode 100644
index 0000000..07b1fbb
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/sos/controller/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/sos/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/sos/package-info.class
new file mode 100644
index 0000000..d361155
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/sos/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/sos/service/SOSService$1.class b/target/classes/in/gov/chennaicorporation/gccoffice/sos/service/SOSService$1.class
new file mode 100644
index 0000000..b3beef7
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/sos/service/SOSService$1.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/sos/service/SOSService.class b/target/classes/in/gov/chennaicorporation/gccoffice/sos/service/SOSService.class
new file mode 100644
index 0000000..feab0f0
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/sos/service/SOSService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/sos/service/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/sos/service/package-info.class
new file mode 100644
index 0000000..7a613c5
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/sos/service/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/configuration/TaxCollectionRepositoryConfig.class b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/configuration/TaxCollectionRepositoryConfig.class
index 559e3d4..a923204 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/configuration/TaxCollectionRepositoryConfig.class and b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/configuration/TaxCollectionRepositoryConfig.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/controller/MainController.class
index a21b245..b52a73e 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/controller/MainController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/controller/TaxCollectionRestController.class b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/controller/TaxCollectionRestController.class
index 6d72513..68ddb69 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/controller/TaxCollectionRestController.class and b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/controller/TaxCollectionRestController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestEntity.class b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestEntity.class
index 59e73f5..a41ce7e 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestEntity.class and b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestEntity.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestStatusEntity.class b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestStatusEntity.class
index e922d39..f054a67 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestStatusEntity.class and b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestStatusEntity.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/repository/TaxCollectionRequestRepository.class b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/repository/TaxCollectionRequestRepository.class
index 507b94e..0f5de1f 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/repository/TaxCollectionRequestRepository.class and b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/repository/TaxCollectionRequestRepository.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/service/TaxCollectionService.class b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/service/TaxCollectionService.class
index 9bb5798..f06bc0c 100644
Binary files a/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/service/TaxCollectionService.class and b/target/classes/in/gov/chennaicorporation/gccoffice/taxcollection/service/TaxCollectionService.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/works/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/works/controller/MainController.class
new file mode 100644
index 0000000..300a754
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/works/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/works/controller/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/works/controller/package-info.class
new file mode 100644
index 0000000..b690dff
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/works/controller/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/works/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/works/package-info.class
new file mode 100644
index 0000000..76d52fb
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/works/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/works/service/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/works/service/package-info.class
new file mode 100644
index 0000000..719ff76
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/works/service/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/.DS_Store b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/.DS_Store
new file mode 100644
index 0000000..e75b544
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/.DS_Store differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/APIController.class b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/APIController.class
new file mode 100644
index 0000000..81bf43a
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/APIController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/MainController.class b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/MainController.class
new file mode 100644
index 0000000..526b11c
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/MainController.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/package-info.class
new file mode 100644
index 0000000..97866b7
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/ComplaintType.class b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/ComplaintType.class
new file mode 100644
index 0000000..4d9fa7a
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/ComplaintType.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/package-info.class
new file mode 100644
index 0000000..0f922f1
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/package-info.class
new file mode 100644
index 0000000..db1bdb1
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/package-info.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/Petition.class b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/Petition.class
new file mode 100644
index 0000000..bb14e8f
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/Petition.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/PetitionMaster.class b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/PetitionMaster.class
new file mode 100644
index 0000000..5cfa237
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/PetitionMaster.class differ
diff --git a/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/package-info.class b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/package-info.class
new file mode 100644
index 0000000..89e18cc
Binary files /dev/null and b/target/classes/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/package-info.class differ
diff --git a/target/classes/static/assets/images/dog.png b/target/classes/static/assets/images/dog.png
new file mode 100644
index 0000000..5ed51c2
Binary files /dev/null and b/target/classes/static/assets/images/dog.png differ
diff --git a/target/classes/static/assets/images/donut-chart.png b/target/classes/static/assets/images/donut-chart.png
new file mode 100644
index 0000000..e91603b
Binary files /dev/null and b/target/classes/static/assets/images/donut-chart.png differ
diff --git a/target/classes/static/assets/images/menu.png b/target/classes/static/assets/images/menu.png
new file mode 100644
index 0000000..001ecde
Binary files /dev/null and b/target/classes/static/assets/images/menu.png differ
diff --git a/target/classes/static/assets/images/mosquito.png b/target/classes/static/assets/images/mosquito.png
new file mode 100644
index 0000000..6c222e5
Binary files /dev/null and b/target/classes/static/assets/images/mosquito.png differ
diff --git a/target/classes/static/assets/images/portable-bathroom.png b/target/classes/static/assets/images/portable-bathroom.png
new file mode 100644
index 0000000..b1afab1
Binary files /dev/null and b/target/classes/static/assets/images/portable-bathroom.png differ
diff --git a/target/classes/static/assets/images/recycle.png b/target/classes/static/assets/images/recycle.png
new file mode 100644
index 0000000..6a16856
Binary files /dev/null and b/target/classes/static/assets/images/recycle.png differ
diff --git a/target/classes/static/assets/images/road.png b/target/classes/static/assets/images/road.png
new file mode 100644
index 0000000..e249745
Binary files /dev/null and b/target/classes/static/assets/images/road.png differ
diff --git a/target/classes/static/assets/images/sewage.png b/target/classes/static/assets/images/sewage.png
new file mode 100644
index 0000000..8dddbf7
Binary files /dev/null and b/target/classes/static/assets/images/sewage.png differ
diff --git a/target/classes/static/assets/images/street-lamp.png b/target/classes/static/assets/images/street-lamp.png
new file mode 100644
index 0000000..64a8e65
Binary files /dev/null and b/target/classes/static/assets/images/street-lamp.png differ
diff --git a/target/classes/static/assets/images/tsunami.png b/target/classes/static/assets/images/tsunami.png
new file mode 100644
index 0000000..8cf6b35
Binary files /dev/null and b/target/classes/static/assets/images/tsunami.png differ
diff --git a/target/classes/static/assets/images/waste-bin.png b/target/classes/static/assets/images/waste-bin.png
new file mode 100644
index 0000000..243dc4c
Binary files /dev/null and b/target/classes/static/assets/images/waste-bin.png differ
diff --git a/target/classes/templates/fragments/modules/base/app_module_menu_box.html b/target/classes/templates/fragments/modules/base/app_module_menu_box.html
index db89087..15b13ac 100644
--- a/target/classes/templates/fragments/modules/base/app_module_menu_box.html
+++ b/target/classes/templates/fragments/modules/base/app_module_menu_box.html
@@ -1,3 +1,4 @@
+
 		<div class="modal fade apps-modal" id="appsModal" tabindex="-1" role="dialog" aria-labelledby="appsModalLabel" aria-hidden="true" data-backdrop="false">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="ik ik-x-circle"></i></button>
             <div class="modal-dialog modal-dialog-centered" role="document">
@@ -17,60 +18,77 @@
                     <div class="modal-body d-flex align-items-center">
                         <div class="container">
                             <div class="apps-wrap">
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-bar-chart-2"></i><span>Dashboard</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-mail"></i><span>Message</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-users"></i><span>Accounts</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-shopping-cart"></i><span>Sales</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-briefcase"></i><span>Purchase</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-server"></i><span>Menus</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-clipboard"></i><span>Pages</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-message-square"></i><span>Chats</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-map-pin"></i><span>Contacts</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-box"></i><span>Blocks</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-calendar"></i><span>Events</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-bell"></i><span>Notifications</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-pie-chart"></i><span>Reports</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-layers"></i><span>Tasks</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-edit"></i><span>Blogs</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-settings"></i><span>Settings</span></a>
-                                </div>
-                                <div class="app-item">
-                                    <a href="#"><i class="ik ik-more-horizontal"></i><span>More</span></a>
-                                </div>
+                                
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
\ No newline at end of file
+        </div>
+        
+        
+        <!--  Box 1 -->
+			<div class="modal fade" id="passwordreset" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-l" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="ackModalTitle">Password Reset Form</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    
+	                    <div class="modal-body">
+                        	<div id="passwordModalBody">
+                        		<input type="hidden" value="" name="resetuserid" id="resetuserid">
+                        		<div class="form-group">
+                                  <label for="councillorName">Old Password / பழைய கடவுச்சொல்</label>
+                                  <input type="password" class="form-control" name="oldpassword" id="oldpassword" required>
+                              	</div>
+                              	<div class="form-group">
+                                  <label for="councillorName">New Password / புதிய கடவுச்சொல்</label>
+                                  <input type="password" class="form-control" name="password" id="password" required>
+                              	</div>
+                              	<div class="form-group">
+                                  <label for="councillorName">Confirm Password / கடவுச்சொல்லை உறுதிப்படுத்தவும்</label>
+                                  <input type="password" class="form-control" name="newpassword" id="newpassword" required>
+                              	</div>
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                          <button type="button" class="btn btn-secondary" onclick="savePassword();">Save</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Kural Modal Page -->
+			<div class="modal fade" id="kuralModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="kuralTitle">Kural</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    
+	                    <div class="modal-body">
+                        	<div id="kuralBody">
+                        		
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			
+       
\ No newline at end of file
diff --git a/target/classes/templates/fragments/modules/base/header.html b/target/classes/templates/fragments/modules/base/header.html
index b0b97bb..872f939 100644
--- a/target/classes/templates/fragments/modules/base/header.html
+++ b/target/classes/templates/fragments/modules/base/header.html
@@ -14,6 +14,7 @@
                             <button type="button" id="navbar-fullscreen" class="nav-link"><i class="ik ik-maximize"></i></button>
                         </div>
                         <div class="top-menu d-flex align-items-center">
+                        <!-- 
                             <div class="dropdown">
                                 <a class="nav-link dropdown-toggle" href="#" id="notiDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 <i class="ik ik-bell bell"></i><span class="badge bg-danger">3</span>
@@ -52,17 +53,18 @@
                                     <div class="footer"><a href="javascript:void(0);">See all activity</a></div>
                                 </div>
                             </div>
-                            
+                            -->
                             <div class="dropdown">
                                 <a class="dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 									<img class="avatar" src="images/users/user.jpg" alt="">
                                 </a>
                                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
-                                    <a class="dropdown-item" href="profile.html"><i class="ik ik-user dropdown-icon"></i> Profile</a>
+                                  <!--   <a class="dropdown-item" href="profile.html"><i class="ik ik-user dropdown-icon"></i> Profile</a>
                                     <a class="dropdown-item" href="#"><i class="ik ik-settings dropdown-icon"></i> Settings</a>
                                     <a class="dropdown-item" href="#"><span class="float-right"><span class="badge badge-primary">6</span></span><i class="ik ik-mail dropdown-icon"></i> Inbox</a>
-                                    <a class="dropdown-item" href="#"><i class="ik ik-navigation dropdown-icon"></i> Message</a>
+                                    <a class="dropdown-item" href="#"><i class="ik ik-navigation dropdown-icon"></i> Message</a> -->
                                     <a class="dropdown-item" th:href="@{/gcc/logout}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"><i class="ik ik-power dropdown-icon"></i> Logout</a>
+                                    <a class="dropdown-item" th:href="@{#}" onclick="event.preventDefault();passwordReset();"><i class="ik ik-settings dropdown-icon"></i> Password Reset</a>
                                 </div>
                             </div>
 
diff --git a/target/classes/templates/fragments/modules/base/script.html b/target/classes/templates/fragments/modules/base/script.html
index c0f1655..6fcc0f4 100644
--- a/target/classes/templates/fragments/modules/base/script.html
+++ b/target/classes/templates/fragments/modules/base/script.html
@@ -288,6 +288,72 @@ function callDownload(fileUrl,fileName){
 	        return '';
 	    }
 	}
+ 
+ 
+ function passwordReset(){
+	var loginid = /*[[${LoginUserId}]]*/'';
+	if(loginid!="" && loginid>0){
+		$("#passwordreset").modal({
+		    backdrop: 'static',
+		    keyboard: false
+		}); // Show Modal Box
+		
+		$("#resetuserid").val(loginid);
+		$("#oldpassword").val('');
+	    $("#password").val('');
+	    $("#newpassword").val('');
+	}
+ }
+
+ function savePassword() {
+	    var userid = $("#resetuserid").val();
+	    var oldpassword = $("#oldpassword").val();
+	    var password = $("#password").val();
+	    var confirmpassword = $("#newpassword").val();
+
+	    // Input validation
+	    if (!userid || !oldpassword || !password || !confirmpassword) {
+	        alert("All fields are required.");
+	        return;
+	    }
+
+	    if (password !== confirmpassword) {
+	        alert("New password and confirmation password do not match.");
+	        return;
+	    }
+
+	    var formData = new FormData();
+	    formData.append('userid', userid);
+	    formData.append('oldpassword', oldpassword);
+	    formData.append('newpassword', password);
+
+	    // Send AJAX request to reset password
+	    $.ajax({
+	        url: '/gcc/api/resetPassword', // Update with the actual endpoint URL
+	        type: 'POST',
+	        data: formData,
+	        contentType: false, // Required for FormData
+	        processData: false, // Required for FormData
+	        success: function(response) {
+	            // Handle success response
+	            if (response === 'success') {
+	                alert("Password reset successfully.");
+	                // Optionally, redirect the user or reset the form
+	                document.getElementById('logout-form').submit();
+	            } else {
+	                alert(response.message || "Failed to reset password.");
+	            }
+	        },
+	        error: function(xhr, status, error) {
+	            // Handle error response
+	            var errorMessage = "An error occurred. Please try again later.";
+	            if (xhr.responseJSON && xhr.responseJSON.message) {
+	                errorMessage = xhr.responseJSON.message;
+	            }
+	            alert(errorMessage);
+	        }
+	    });
+	}
 </script>
 <!--
 <script th:inline="javascript">
diff --git a/target/classes/templates/fragments/modules/com_petition/modal-box.html b/target/classes/templates/fragments/modules/com_petition/modal-box.html
new file mode 100644
index 0000000..ae2f994
--- /dev/null
+++ b/target/classes/templates/fragments/modules/com_petition/modal-box.html
@@ -0,0 +1,116 @@
+			
+			<!--  Box 1 -->
+			<div class="modal fade" id="ackModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="ackModalTitle">Modal Title</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="ackModalBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 2 -->
+			<div class="modal fade" id="ComplaintStatusBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="complaint-title">புகார் நிலை / Complaint Status:</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="ComplaintStatusBoxBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 3 -->
+			<div class="modal fade" id="viewFileBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="viewFileTitle">View File</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="viewFileBoxBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 4 -->
+			<div class="modal fade" id="viewpetition" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="viewPetitionTitle">View Petition</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="viewPetitionBoxBody">
+                        		<iframe id="iframe" width="100%" height="400px" src=""></iframe>
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 0 common -->
+			<div class="modal fade" id="forwardModalBox" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-lg" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="forwardModalTitle">Modal Title</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="forwardModalBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
\ No newline at end of file
diff --git a/target/classes/templates/fragments/modules/com_petition/petition_view_script.html b/target/classes/templates/fragments/modules/com_petition/petition_view_script.html
new file mode 100644
index 0000000..89c4507
--- /dev/null
+++ b/target/classes/templates/fragments/modules/com_petition/petition_view_script.html
@@ -0,0 +1,292 @@
+<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var petitionId = 0;
+			var closedComplaintsList=[];
+			var complaintTypeList = "";
+			var officerMasterList = "";
+			
+			 /* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Call Petition function to fetch the data
+	    		    get_petition_data();
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			 
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+			 
+	     	// Function to get complaint_type and complaint_typeid by complaint_typeid
+	        function getComplaintTypeById(complaintTypeId) {
+	            for (var i = 0; i < complaintTypeList.length; i++) {
+	                if (complaintTypeList[i].complaint_typeid == complaintTypeId) {
+	                    return {
+	                        complaint_type: complaintTypeList[i].complaint_type,
+	                        complaint_typeid: complaintTypeList[i].complaint_typeid
+	                    };
+	                }
+	            }
+	            return null; // Return null if no matching complaint_typeid is found
+	        }
+	     
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint;
+					petitionId = petitionDetails[0].petition_id;
+					var complaintArray = complaint.split(",");
+					$("#complaintType").val(complaintArray);
+					
+					$('#complaintType').trigger('change');
+					
+					closedComplaintsList = complaintArray;
+					$("#cdate_value").html(convertdate(petitionDetails[0].cdate));
+					$("#petition_no_value").html(petitionDetails[0].petition_no);
+					$("#petitioner_name_value").html(petitionDetails[0].petitioner_name);
+					$("#petitioner_mobile_value").html(petitionDetails[0].petitioner_mobile);
+					$("#petitioner_address_value").html(petitionDetails[0].petitioner_address);
+					$("#petitioner_pincode_value").html(petitionDetails[0].petitioner_pincode);
+					
+					$("#complaint_with_maping_value").html(petitionDetails[0].complaint_nature);
+					
+					var petition_status = petitionDetails[0].status
+					
+					if(petition_status=='pending' || petition_status=='partial'){
+						$("#petition_summary_title").html("Pending Summary");
+						var currentDate = new Date();
+						var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),'');
+						$("#petition_summary_html").html(`This petition has been pending for more than ${totaldayspending}`);
+					}
+					if(petition_status=='close'){
+						$("#petition_summary_title").html("Close Summary");
+						var currentDate = new Date();
+						var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),'');
+						$("#petition_summary_html").html(`The time taken to close this petition is ${totaldayspending}`);
+					}
+						
+					petition_status=petition_status.charAt(0).toUpperCase() + petition_status.slice(1);
+					
+					$("#petition_status_value").html(`<b style="color:red">${petition_status}</b>`);
+					
+					// Call Complaint list based on Petition No and Id
+					get_petition_mapping_data();
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition Data ('+petitionNo+'):', error.message);
+				    call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			function get_petition_details() {
+			    
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/com_petition/getPetitionDetails?petitionNo='+petitionNo;
+				//alert(petitionNo);
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			function get_petition_mapping_data(){
+				get_petition_mapping_list().then(function(mappingDetails) {
+					
+					// Initialize count
+					let totalCount = mappingDetails.length;
+					let completedCount = 0;
+					let pendingCount = 0;
+
+					var tableListHTML = "";
+					
+					for(j = 0; j < mappingDetails.length; j++){
+						var complaint_status=mappingDetails[j].complaint_status;
+						complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1);
+						
+						tableListHTML += `<tr>
+						                    <td>${j+1}</td>
+						                    <td>${mappingDetails[j].complaint_type}</td>
+						                    <td>${mappingDetails[j].off_nm} (${mappingDetails[j].off_id})</td>
+						                    <td>${convertdate(mappingDetails[j].mappedOn)}</td>
+						                    <td>${complaint_status}</td>
+						                  </tr>`;
+						                  
+		               	// Check if the status is "pending"
+					    if (mappingDetails[j].complaint_status === "pending") {
+					        // Increment the count
+					        pendingCount++;
+					    }
+					    else if(mappingDetails[j].complaint_status === "close"){
+					    	completedCount++;
+						}
+					}
+					
+					var listOfComplaintsHTML = `<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th>S.no</th>
+									                    <th>Complaint</th>
+									                    <th>Assigned To</th>
+									                    <th>Assigned On</th>
+									                    <th>Status</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+								                 		${tableListHTML}
+								                	</tbody>
+								              	</table>`;
+					$("#listOfComplaintsHTML").html(listOfComplaintsHTML);
+					
+					$("#total_complaints_value").html(`<b>${totalCount}</b>`);
+					$("#total_complaints_completed_value").html(`<b style="color:green">${completedCount}</b>`);
+					$("#total_complaints_pending_value").html(`<b style="color:red">${pendingCount}</b>`);
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching Mapping Data ('+petitionId+'):', error.message);
+				});
+			}
+			
+			/* Get Petition details by petition number */
+			function get_petition_mapping_list() {
+			    
+				var formData = new FormData();
+				var apiUrl = '/gcc/api/com_petition/getComplaintListByPetitionId?petitionId='+petitionId;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+		
+		function call_petition_search_from(errorTXT){
+			var errorHTML = "";
+			if(errorTXT!=""){
+				errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`;
+			}
+			var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();">
+										<div class="card-header">
+						                <h3>View Petition Form</h3>
+						                <div class="card-header-right">
+						                    <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+						                </div>
+						            </div>
+						       		<div class="card-body">
+						       			<div class="row">
+											<div class="col-12 text-center">
+												${errorHTML}
+												<div class="form-group">
+						                            <label for="petitionNoSearch">Petition No / மனு எண் </label>
+						                            <input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="COM00000000" maxlength="11" required>
+						                        </div>
+						                        
+											</div>
+											<div class="col-12">
+												<div class="block-content" id="userinfo2">
+													<div id="comp_mapping_to_officers" class="row"></div>
+												</div>
+										 	</div>
+										</div>
+						          	</div>
+						          	<div class="card-footer text-center">
+										<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+						            	<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button>
+						        	</div>
+						    	</form>`;
+			
+			$("#petitionViewtable").html(searchFormHTML);
+			$("#petitionNoSearch").mask('COM00000000');
+		}
+		
+		function searchRequest(){
+			var searchValue = $('#petitionNoSearch').val();
+			if (searchValue && searchValue.trim() !== '') {
+				searchValue = encodeBase64(searchValue);
+				window.location.href = "/gcc/com_petition/view-petition?petitionNo="+searchValue;
+			}
+			else{
+				call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+			}
+			return false;
+		}
+		</script>
+		<script>
+		$(document).ready(function() {
+			if(petitionNo!=null && petitionNo!="error"){
+				get_complaint_type_data();
+				get_officer_master_data();
+			}
+			else{
+				if(petitionNo=="error"){
+					call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				}
+				else{
+					call_petition_search_from("");
+				}
+			}
+			
+		});
+		</script>
\ No newline at end of file
diff --git a/target/classes/templates/fragments/modules/com_petition/script.html b/target/classes/templates/fragments/modules/com_petition/script.html
new file mode 100644
index 0000000..9fe9674
--- /dev/null
+++ b/target/classes/templates/fragments/modules/com_petition/script.html
@@ -0,0 +1,360 @@
+<script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
+<script th:inline="javascript">
+	var nodata = nodata();
+	
+	var baseURL = "/gcc/com_petition/";
+	
+	/* Complaint Type List */
+	function get_complaint_type_list() {
+	    
+		var apiUrl = '/gcc/api/com_petition/getComplaintTypes';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Officer Master List */
+	function get_officer_list() {
+	    
+		var apiUrl = '/gcc/api/com_petition/getOfficerList';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Petition Type List */
+	function get_petition_type_list() {
+	    
+		var apiUrl = '/gcc/api/com_petition/getPetitionTypes';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	function viewAck(petitionNo){
+
+		loading_text_msg = getLoadingMessage(); // get Loading random text
+		$('#ackModalTitle').html("Loading Petition Acknowledgement ("+petitionNo+")");
+		var loading=searchinfo("<b>"+loading_text_msg+"</b>");
+		var ackContentHTML=`
+							<div class="row">
+							    <div class="col-lg-6">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack1table" class="ack-content">
+						                <div id="ack1">${loading}</div>
+						            </div>
+						        </div>
+						    </div>
+						    
+						    <div class="col-lg-6 printack2">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack2table" class="ack-content">
+						                <div id="ack2">${loading}</div>
+						            </div>
+						        </div>
+						    </div>
+						    <!--<div class="col-lg-12 text-center block-options pt-10">
+						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+						    </div>-->
+						</div>`;
+		
+		$('#ackModalBody').html(ackContentHTML); // Box content (Body)
+		
+		$("#ackModalBox").modal({
+			    backdrop: 'static',
+			    keyboard: false
+		}); // Show Modal Box
+			
+		get_petition_ack_data(petitionNo);
+		
+		return false;
+	}
+	
+	
+	 /* Get Petition data */
+	function get_petition_ack_data(petitionNo){
+		get_petition_details_byNo(petitionNo).then(function(petitionDetails) {
+		    // Handle the Complaint list
+		    var complaintHTML = "";
+			var complaint = petitionDetails[0].petitioner_complaint_txt;
+			
+			var complaintArray = complaint.split(',');
+			
+			for(j = 0; j < complaintArray.length; j++){
+				if(j>0){
+					complaintHTML+="<br>";
+				}
+				complaintHTML+= (j+1)+') '+complaintArray[j];
+			}
+			var ack =`
+			<table class="table table-borderless table-vcenter p-0 m-0">
+			  <tbody>
+			    <tr>
+			      <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+			      <td class="fw-semibold text-center">
+						<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br>
+						மக்களை தேடி மேயர் திட்டம்<br>
+						ஒப்புகை சீட்டு / Acknowledgement Receipt</b>
+				  </td>
+				  <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+			    </tr>
+			</tbody>
+			</table>
+			<hr style="margin:0px">
+			  <div class="block-content p-0 m-0">
+			    <table class="table table-borderless table-vcenter" style="font-size:12px;">
+			      <tbody>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${convertdate(petitionDetails[0].cdate)}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petition_no}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petitioner_name}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petitioner_mobile}
+			          </td>
+			        </tr>
+			        <tr style="font-size:12px;">
+			          <th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${complaintHTML}
+					</td>
+			        </tr>
+			        <tr>
+			          <td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th>
+			        </tr>
+			        <tr style="text-align: right;">
+			          <th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th>
+			        </tr>
+			      </tbody>
+			    </table>
+			  </div>`;
+		    $('#ackModalTitle').html("Acknowledgement Of Petition ("+petitionNo+")");
+			$("#ack1").html(ack);
+			$("#ack2").html(ack);
+			  
+		}).catch(function(error) {
+		    // Handle errors
+		    console.error('Error fetching petition details ('+petitionNo+'):', error);
+		});
+	}
+	 
+	/* Get Petition details by petition number */
+	function get_petition_details_byNo(petitionNo) {
+		
+		var apiUrl = '/gcc/api/com_petition/getPetitionDetails?petitionNo='+petitionNo
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Get Petition details by petition number */
+	function get_complaint_details_byId(mapId) {
+		
+		var apiUrl = '/gcc/api/com_petition/getComplaintDetails?mapId='+mapId
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Get Petition details by petition number */
+	function get_complaint_action_byId(mapId) {
+		
+		var apiUrl = '/gcc/api/com_petition/getComplaintActionDetails?mapId='+mapId
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	
+	/* File View */
+	function viewFile(fileOf,fileName,fileType){
+		$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box
+		
+		var fileUrl = "/gcc/files/com_petition/";
+		
+		if(fileOf=="petition")
+		{
+			fileUrl=fileUrl+fileName;
+		}
+		else if(fileOf="action"){
+			fileUrl=fileUrl+"com_action_file/"+fileName;
+		}
+		else{
+			fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name
+		}
+		
+		checkFileExists(fileUrl).then(exists => {
+			if (exists) {
+				if(fileType=='application/pdf'){
+					var fileHTML = `<iframe src="${fileUrl}" type="application/pdf" width="100%" height="600px"></iframe>`;
+					
+				}
+				else if(fileType=='application/octet-stream'){
+					fileHTML =`<p class='text-danger m-0 p-0'>File Preview not avaiable.<br>Try to download and view.</p>`;
+				}
+				else{
+					fileHTML =`<img src="${fileUrl}" alt="${fileType}" width="100%">`;
+				}
+		    } else {
+		        console.log('File does not exist');
+		        fileHTML = `<p class='text-danger m-0 p-0'>File does not exist</p>`;
+		    }
+			
+			$("#viewFileBoxBody").html(fileHTML); // Modal Box Body
+			$("#viewFileBox").modal({
+			    backdrop: 'static',
+			    keyboard: false
+			}); // Show Modal Box
+		});
+	}
+	
+	/* Downlaod file */
+	function downloadFile(fileOf,fileName,fileType){
+		$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box
+		
+		var fileUrl = "/gcc/files/com_petition/";
+		
+		if(fileOf=="petition")
+		{
+			fileUrl=fileUrl+fileName;
+			callDownload(fileUrl,fileName);
+		}
+		else if(fileOf="action"){
+			fileUrl=fileUrl+"com_action_file/"+fileName;
+			callDownload(fileUrl,fileName);
+		}
+		else{
+			fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name
+		}
+	}
+	
+	/* Show Complaint forward Modal */
+	function forward_compliant(mapId,title){
+		var compmapHTML =`<div class="col-12" id="comp${mapId}">
+			
+								<div class="widget mb-0">
+					                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                    <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+					                </div>
+					                <div class="widget-body">
+					                	<div class="form-group">
+					                    	<label for="dept${mapId}">Select Department Type</label>
+											<select name="dept[]" id="dept${mapId}" class="form-control" onchange="javascript:calloffice(this.value,${mapId})">
+												<option value="0">Select Department</option>
+												<option value="1">GCC Department</option>
+												<option value="2">External Department</option>
+										    </select>
+										</div>
+										<div id="officedata${mapId}"></div>
+										<div id="officers${mapId}"></div>
+					                </div>
+					            </div>
+							
+						  </div>`;
+	  
+		$("#forwardModalBody").html(compmapHTML); // Modal Box Body
+		$("#forwardModalBox").modal({
+		    backdrop: 'static',
+		    keyboard: false
+		}); // Show Modal Box
+	}
+</script>
\ No newline at end of file
diff --git a/target/classes/templates/fragments/modules/com_petition/search_form.html b/target/classes/templates/fragments/modules/com_petition/search_form.html
new file mode 100644
index 0000000..e0f28b3
--- /dev/null
+++ b/target/classes/templates/fragments/modules/com_petition/search_form.html
@@ -0,0 +1,19 @@
+				<div class="row">
+					<div class="col-12 mb-2">
+						<div class="input-group mb-0">
+							<span class="input-group-prepend">
+                        	<button type="button" id="filter_reset_btn" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset">
+                          	  <i class="ik ik-refresh-ccw"></i>
+                        	</button>
+                        	</span>
+						 <select class="form-control" id="search_department_id" name="search_department_id">
+	                        <option value="0">All Department`s</option>
+	                      </select>
+	                      <span class="input-group-append">
+                         <button type="button" id="filter_search_btn" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search">
+                           <i class="ik ik-search me-1"></i> Search
+                         </button>
+                         </span>
+						</div>
+					</div>
+				</div>
\ No newline at end of file
diff --git a/target/classes/templates/fragments/modules/zerohours_petition/modal-box.html b/target/classes/templates/fragments/modules/zerohours_petition/modal-box.html
new file mode 100644
index 0000000..38e0c8c
--- /dev/null
+++ b/target/classes/templates/fragments/modules/zerohours_petition/modal-box.html
@@ -0,0 +1,139 @@
+			
+			<!--  Box 1 -->
+			<div class="modal fade" id="ackModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="ackModalTitle">Modal Title</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="ackModalBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 1 -->
+			<div class="modal fade" id="mappingModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="mappingModalTitle">Modal Title</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="mappingModalBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 2 -->
+			<div class="modal fade" id="ComplaintStatusBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="complaint-title">புகார் நிலை / Complaint Status:</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="ComplaintStatusBoxBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 3 -->
+			<div class="modal fade" id="viewFileBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="viewFileTitle">View File</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="viewFileBoxBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 4 -->
+			<div class="modal fade" id="viewpetition" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-xl" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="viewPetitionTitle">View Petition</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="viewPetitionBoxBody">
+                        		<iframe id="iframe" width="100%" height="400px" src=""></iframe>
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
+			
+			<!--  Box 0 common -->
+			<div class="modal fade" id="forwardModalBox" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog modal-lg" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header" style="background-color: #28a745 !important;">
+	                          <h6 class="modal-title m-0" id="forwardModalTitle">Modal Title</h6>
+		                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div><!--end modal-header-->
+	                    <div class="modal-body">
+                        	<div id="forwardModalBody">
+							</div>
+                    	</div><!--end modal-body-->
+						
+	                    <div class="modal-footer bg-body">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        </div><!--end modal-footer-->
+	               
+	                </div><!--end modal-content-->
+	            </div><!--end modal-dialog-->
+	        </div><!--end modal-->
+			<!-- END Page Content -->
\ No newline at end of file
diff --git a/target/classes/templates/fragments/modules/zerohours_petition/petition_view_script.html b/target/classes/templates/fragments/modules/zerohours_petition/petition_view_script.html
new file mode 100644
index 0000000..5689940
--- /dev/null
+++ b/target/classes/templates/fragments/modules/zerohours_petition/petition_view_script.html
@@ -0,0 +1,293 @@
+<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var petitionId = 0;
+			var closedComplaintsList=[];
+			var complaintTypeList = "";
+			var officerMasterList = "";
+			
+			 /* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Call Petition function to fetch the data
+	    		    get_petition_data();
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			 
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+			 
+	     	// Function to get complaint_type and complaint_typeid by complaint_typeid
+	        function getComplaintTypeById(complaintTypeId) {
+	            for (var i = 0; i < complaintTypeList.length; i++) {
+	                if (complaintTypeList[i].complaint_typeid == complaintTypeId) {
+	                    return {
+	                        complaint_type: complaintTypeList[i].complaint_type,
+	                        complaint_typeid: complaintTypeList[i].complaint_typeid
+	                    };
+	                }
+	            }
+	            return null; // Return null if no matching complaint_typeid is found
+	        }
+	     
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint;
+					petitionId = petitionDetails[0].petition_id;
+					var complaintArray = complaint.split(",");
+					$("#complaintType").val(complaintArray);
+					
+					$('#complaintType').trigger('change');
+					
+					closedComplaintsList = complaintArray;
+					$("#cdate_value").html(convertdate(petitionDetails[0].cdate));
+					$("#petition_no_value").html(petitionDetails[0].petition_no);
+					$("#petitioner_name_value").html(petitionDetails[0].petitioner_name);
+					$("#petitioner_mobile_value").html(petitionDetails[0].petitioner_mobile);
+					$("#petitioner_address_value").html(petitionDetails[0].petitioner_address);
+					$("#petitioner_pincode_value").html(petitionDetails[0].petitioner_pincode);
+					
+					$("#complaint_with_maping_value").html(petitionDetails[0].complaint_nature);
+					
+					var petition_status = petitionDetails[0].status
+					
+					if(petition_status=='pending' || petition_status=='partial'){
+						$("#petition_summary_title").html("Pending Summary");
+						var currentDate = new Date();
+						var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),'');
+						$("#petition_summary_html").html(`This petition has been pending for more than ${totaldayspending}`);
+					}
+					if(petition_status=='close'){
+						$("#petition_summary_title").html("Close Summary");
+						var currentDate = new Date();
+						var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),'');
+						$("#petition_summary_html").html(`The time taken to close this petition is ${totaldayspending}`);
+					}
+						
+					petition_status=petition_status.charAt(0).toUpperCase() + petition_status.slice(1);
+					
+					$("#petition_status_value").html(`<b style="color:red">${petition_status}</b>`);
+					
+					// Call Complaint list based on Petition No and Id
+					get_petition_mapping_data();
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition Data ('+petitionNo+'):', error.message);
+				    call_petition_search_from("** Invalid Petition Number: Please provide a valid petition number.");
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			function get_petition_details() {
+			    //alert();
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/zerohours_petition/getPetitionDetails?petitionNo='+petitionNo;
+				//alert(petitionNo);
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                //alert(jsonResponse[0].petitioner_name);
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("* Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			function get_petition_mapping_data(){
+				get_petition_mapping_list().then(function(mappingDetails) {
+					
+					// Initialize count
+					let totalCount = mappingDetails.length;
+					let completedCount = 0;
+					let pendingCount = 0;
+
+					var tableListHTML = "";
+					
+					for(j = 0; j < mappingDetails.length; j++){
+						var complaint_status=mappingDetails[j].complaint_status;
+						complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1);
+						
+						tableListHTML += `<tr>
+						                    <td>${j+1}</td>
+						                    <td>${mappingDetails[j].complaint_type}</td>
+						                    <td>${mappingDetails[j].off_nm} (${mappingDetails[j].off_id})</td>
+						                    <td>${convertdate(mappingDetails[j].mappedOn)}</td>
+						                    <td>${complaint_status}</td>
+						                  </tr>`;
+						                  
+		               	// Check if the status is "pending"
+					    if (mappingDetails[j].complaint_status === "pending") {
+					        // Increment the count
+					        pendingCount++;
+					    }
+					    else if(mappingDetails[j].complaint_status === "close"){
+					    	completedCount++;
+						}
+					}
+					
+					var listOfComplaintsHTML = `<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th>S.no</th>
+									                    <th>Complaint</th>
+									                    <th>Assigned To</th>
+									                    <th>Assigned On</th>
+									                    <th>Status</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+								                 		${tableListHTML}
+								                	</tbody>
+								              	</table>`;
+					$("#listOfComplaintsHTML").html(listOfComplaintsHTML);
+					
+					$("#total_complaints_value").html(`<b>${totalCount}</b>`);
+					$("#total_complaints_completed_value").html(`<b style="color:green">${completedCount}</b>`);
+					$("#total_complaints_pending_value").html(`<b style="color:red">${pendingCount}</b>`);
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching Mapping Data ('+petitionId+'):', error.message);
+				});
+			}
+			
+			/* Get Petition details by petition number */
+			function get_petition_mapping_list() {
+			    alert(petitionId);
+				var formData = new FormData();
+				var apiUrl = '/gcc/api/zerohours_petition/getComplaintListByPetitionId?petitionId='+petitionId;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("***Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+		
+		function call_petition_search_from(errorTXT){
+			var errorHTML = "";
+			if(errorTXT!=""){
+				errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`;
+			}
+			var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();">
+										<div class="card-header">
+						                <h3>View Petition Form</h3>
+						                <div class="card-header-right">
+						                    <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+						                </div>
+						            </div>
+						       		<div class="card-body">
+						       			<div class="row">
+											<div class="col-12 text-center">
+												${errorHTML}
+												<div class="form-group">
+						                            <label for="petitionNoSearch">Petition No / மனு எண் </label>
+						                            <input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="ZH00000000" maxlength="11" required>
+						                        </div>
+						                        
+											</div>
+											<div class="col-12">
+												<div class="block-content" id="userinfo2">
+													<div id="comp_mapping_to_officers" class="row"></div>
+												</div>
+										 	</div>
+										</div>
+						          	</div>
+						          	<div class="card-footer text-center">
+										<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+						            	<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button>
+						        	</div>
+						    	</form>`;
+			
+			$("#petitionViewtable").html(searchFormHTML);
+			$("#petitionNoSearch").mask('ZH00000000');
+		}
+		
+		function searchRequest(){
+			var searchValue = $('#petitionNoSearch').val();
+			if (searchValue && searchValue.trim() !== '') {
+				searchValue = encodeBase64(searchValue);
+				window.location.href = "/gcc/zerohours_petition/view-petition?petitionNo="+searchValue;
+			}
+			else{
+				call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+			}
+			return false;
+		}
+		</script>
+		<script>
+		$(document).ready(function() {
+			if(petitionNo!=null && petitionNo!="error"){
+				get_complaint_type_data();
+				get_officer_master_data();
+			}
+			else{
+				if(petitionNo=="error"){
+					call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				}
+				else{
+					call_petition_search_from("");
+				}
+			}
+			
+		});
+		</script>
\ No newline at end of file
diff --git a/target/classes/templates/fragments/modules/zerohours_petition/script.html b/target/classes/templates/fragments/modules/zerohours_petition/script.html
new file mode 100644
index 0000000..43fa529
--- /dev/null
+++ b/target/classes/templates/fragments/modules/zerohours_petition/script.html
@@ -0,0 +1,660 @@
+<script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
+<script th:inline="javascript">
+	var nodata = nodata();
+	
+	var baseURL = "/gcc/zerohours_petition/";
+	
+	
+	/* Zero Hours Event List */
+	function get_event_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getEventList';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Zero Hours Event List */
+	function get_current_event_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getCurrentEventList';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	
+	/* Zone and Ward List */
+	function get_zone_ward_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getZoneAndWard';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Councillor List */
+	function get_councillor_list(ward) {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getCouncillor?ward='+ward;
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Complaint Type List */
+	function get_complaint_type_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getComplaintTypes';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Officer Master List */
+	function get_officer_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getOfficerList';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Petition Type List */
+	function get_petition_type_list() {
+	    
+		var apiUrl = '/gcc/api/zerohours_petition/getPetitionTypes';
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	function viewAck(petitionNo){
+
+		loading_text_msg = getLoadingMessage(); // get Loading random text
+		$('#ackModalTitle').html("Loading Petition Acknowledgement ("+petitionNo+")");
+		var loading=searchinfo("<b>"+loading_text_msg+"</b>");
+		var ackContentHTML=`
+							<div class="row">
+							    <div class="col-lg-6">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack1table" class="ack-content">
+						                <div id="ack1">${loading}</div>
+						            </div>
+						        </div>
+						    </div>
+						    
+						    <div class="col-lg-6 printack2">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack2table" class="ack-content">
+						                <div id="ack2">${loading}</div>
+						            </div>
+						        </div>
+						    </div>
+						    <!--<div class="col-lg-12 text-center block-options pt-10">
+						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+						    </div>-->
+						</div>`;
+		
+		$('#ackModalBody').html(ackContentHTML); // Box content (Body)
+		
+		$("#ackModalBox").modal({
+			    backdrop: 'static',
+			    keyboard: false
+		}); // Show Modal Box
+			
+		get_petition_ack_data(petitionNo);
+		
+		return false;
+	}
+	
+	
+	 /* Get Petition data */
+	function get_petition_ack_data(petitionNo){
+		get_petition_details_byNo(petitionNo).then(function(petitionDetails) {
+		    // Handle the Complaint list
+		    var complaintHTML = "";
+			var complaint = petitionDetails[0].petitioner_complaint_txt;
+			
+			var complaintArray = complaint.split(',');
+			
+			for(j = 0; j < complaintArray.length; j++){
+				if(j>0){
+					complaintHTML+="<br>";
+				}
+				complaintHTML+= (j+1)+') '+complaintArray[j];
+			}
+			var ack =`
+			<table class="table table-borderless table-vcenter p-0 m-0">
+			  <tbody>
+			    <tr>
+			      <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+			      <td class="fw-semibold text-center">
+						<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br>
+						மக்களை தேடி மேயர் திட்டம்<br>
+						ஒப்புகை சீட்டு / Acknowledgement Receipt</b>
+				  </td>
+				  <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+			    </tr>
+			</tbody>
+			</table>
+			<hr style="margin:0px">
+			  <div class="block-content p-0 m-0">
+			    <table class="table table-borderless table-vcenter" style="font-size:12px;">
+			      <tbody>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${convertdate(petitionDetails[0].cdate)}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petition_no}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petitioner_name}
+			          </td>
+			        </tr>
+			        <tr>
+			          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${petitionDetails[0].petitioner_mobile}
+			          </td>
+			        </tr>
+			        <tr style="font-size:12px;">
+			          <th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th>
+			          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+			           ${complaintHTML}
+					</td>
+			        </tr>
+			        <tr>
+			          <td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th>
+			        </tr>
+			        <tr style="text-align: right;">
+			          <th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th>
+			        </tr>
+			      </tbody>
+			    </table>
+			  </div>`;
+		    $('#ackModalTitle').html("Acknowledgement Of Petition ("+petitionNo+")");
+			$("#ack1").html(ack);
+			$("#ack2").html(ack);
+			  
+		}).catch(function(error) {
+		    // Handle errors
+		    console.error('Error fetching petition details ('+petitionNo+'):', error);
+		});
+	}
+	 
+	/* Get Petition details by petition number */
+	function get_petition_details_byNo(petitionNo) {
+		
+		var apiUrl = '/gcc/api/zerohours_petition/getPetitionDetails?petitionNo='+petitionNo
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Get Petition details by petition number */
+	function get_complaint_details_byId(mapId) {
+		
+		var apiUrl = '/gcc/api/zerohours_petition/getComplaintDetails?mapId='+mapId
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	/* Get Petition details by petition number */
+	function get_complaint_action_byId(mapId) {
+		
+		var apiUrl = '/gcc/api/zerohours_petition/getComplaintActionDetails?mapId='+mapId
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition details ('+petitionNo+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+	
+	
+	/* File View */
+	function viewFile(fileOf,fileName,fileType){
+		$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box
+		
+		var fileUrl = "/gcc/files/zh_petition/";
+		
+		if(fileOf=="petition")
+		{
+			fileUrl=fileUrl+fileName;
+		}
+		else if(fileOf="action"){
+			fileUrl=fileUrl+"zh_action_file/"+fileName;
+		}
+		else{
+			fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name
+		}
+		
+		checkFileExists(fileUrl).then(exists => {
+			if (exists) {
+				if(fileType=='application/pdf'){
+					var fileHTML = `<iframe src="${fileUrl}" type="application/pdf" width="100%" height="600px"></iframe>`;
+					
+				}
+				else if(fileType=='application/octet-stream'){
+					fileHTML =`<p class='text-danger m-0 p-0'>File Preview not avaiable.<br>Try to download and view.</p>`;
+				}
+				else{
+					fileHTML =`<img src="${fileUrl}" alt="${fileType}" width="100%">`;
+				}
+		    } else {
+		        console.log('File does not exist');
+		        fileHTML = `<p class='text-danger m-0 p-0'>File does not exist</p>`;
+		    }
+			
+			$("#viewFileBoxBody").html(fileHTML); // Modal Box Body
+			$("#viewFileBox").modal({
+			    backdrop: 'static',
+			    keyboard: false
+			}); // Show Modal Box
+		});
+	}
+	
+	/* Downlaod file */
+	function downloadFile(fileOf,fileName,fileType){
+		$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box
+		
+		var fileUrl = "/gcc/files/zh_petition/";
+		
+		if(fileOf=="petition")
+		{
+			fileUrl=fileUrl+fileName;
+			callDownload(fileUrl,fileName);
+		}
+		else if(fileOf="action"){
+			fileUrl=fileUrl+"zh_action_file/"+fileName;
+			callDownload(fileUrl,fileName);
+		}
+		else{
+			fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name
+		}
+	}
+	
+	/* Show Complaint forward Modal */
+	function forward_compliant(mapId,title){
+		var compmapHTML =`<div class="col-12" id="comp${mapId}">
+			
+								<div class="widget mb-0">
+					                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                    <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+					                </div>
+					                <div class="widget-body">
+					                	<div class="form-group">
+					                    	<label for="dept${mapId}">Select Department Type</label>
+											<select name="dept[]" id="dept${mapId}" class="form-control" onchange="javascript:calloffice(this.value,${mapId})">
+												<option value="0">Select Department</option>
+												<option value="1">GCC Department</option>
+												<option value="2">External Department</option>
+										    </select>
+										</div>
+										<div id="officedata${mapId}"></div>
+										<div id="officers${mapId}"></div>
+					                </div>
+					            </div>
+							
+						  </div>`;
+	  
+		$("#forwardModalBody").html(compmapHTML); // Modal Box Body
+		$("#forwardModalBox").modal({
+		    backdrop: 'static',
+		    keyboard: false
+		}); // Show Modal Box
+	}
+	
+	/* Show Complaint forward Modal */
+	function compliant_mapping(petitionId,title,petitionNo){
+		get_mapped_list(petitionId).then(function(listHTML) {
+			var compmapHTML =`<div class="row"><div class="col-6" id="comp${petitionId}">
+									<input type="hidden" name="petitionid" id="petitionid" value="${petitionId}">
+									<input type="hidden" name="petitionno" id="petitionno" value="${petitionNo}">
+									<div class="widget mb-0">
+						                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+						                    <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+						                </div>
+						                <div class="widget-body">
+						                	<div class="form-group">
+						                    	<label for="dept${petitionId}">Select Department Type</label>
+												<select name="dept[]" id="dept${petitionId}" class="form-control" onchange="javascript:calloffice(this.value,${petitionId})">
+													<option value="0">Select Department</option>
+													<option value="1">GCC Department</option>
+													<option value="2">External Department</option>
+											    </select>
+											</div>
+											<div id="officedata${petitionId}"></div>
+											<div id="officers${petitionId}"></div>
+						                </div>
+						            </div>
+								
+							  </div>`;
+				
+				var strListHTML = "";
+			  	for (const key in listHTML) {
+				    if (listHTML.hasOwnProperty(key)) {
+				        //console.log(`${key}: ${listHTML[key]}`);
+				    	strListHTML += `<tr>
+							            	<td class="fw-semibold">${key+1}</td>
+							            	<td class="fw-semibold">${listHTML[key]['petition_no']}</td>
+							            	<td class="fw-semibold">${listHTML[key]['off_nm']}</td>
+							            	<td class="fw-semibold">
+							            		<a href="javascript:void(0)" class="link mr-10"  onclick="unmapOfficer(${listHTML[key]['mapid']},${listHTML[key]['petition_id']},'${listHTML[key]['off_nm']}','${listHTML[key]['petition_no']}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Un-Map" data-original-title="Un-Map"><i class="fas fa-unlink"></i></a>
+							            	</td>
+						              	</tr>`;
+				    }
+				}
+			  	strListHTML = `<table class="table table-bordered table-vcenter mb-0">
+							              <thead>
+							              <tr>
+							                <th>S.no</th>
+							                <th>Petition No</th>
+							                <th>Department</th>
+							                <th><i class="fas fa-unlink"></i></th>
+							              </tr>
+							            </thead>
+							        	<tbody>
+							         		${strListHTML}
+							        	</tbody>
+							      	</table>`;
+	      	
+			compmapHTML = compmapHTML + `<div class="col-6" id="mappeddata">
+								
+								<div class="widget mb-0">
+					                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                    <h3 class="widget-title" style="font-size:13px;">Mapped List</h3>
+					                </div>
+					                <div class="widget-body">
+					                	<div id="mappedTableHTML">
+					                    	${strListHTML}
+										</div>
+					                </div>
+					            </div>
+							
+						  </div></div>`;
+		  
+			$("#mappingModalTitle").html("Mapping Form"); 
+			$("#mappingModalBody").html(compmapHTML); // Modal Box Body
+			$("#mappingModalBox").modal({
+			    backdrop: 'static',
+			    keyboard: false
+			}); // Show Modal Box
+		}).catch(function(error) {
+		    // Handle errors
+		    console.error('Error fetching Mapped data:', error);
+		});
+		return false;
+	}
+	
+	function updateModelBox(petitionId,title,petitionNo){
+		get_mapped_list(petitionId).then(function(listHTML) {
+			var compmapHTML =`<div class="row"><div class="col-6" id="comp${petitionId}">
+									<input type="hidden" name="petitionid" id="petitionid" value="${petitionId}">
+									<input type="hidden" name="petitionno" id="petitionno" value="${petitionNo}">
+									<div class="widget mb-0">
+						                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+						                    <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+						                </div>
+						                <div class="widget-body">
+						                	<div class="form-group">
+						                    	<label for="dept${petitionId}">Select Department Type</label>
+												<select name="dept[]" id="dept${petitionId}" class="form-control" onchange="javascript:calloffice(this.value,${petitionId})">
+													<option value="0">Select Department</option>
+													<option value="1">GCC Department</option>
+													<option value="2">External Department</option>
+											    </select>
+											</div>
+											<div id="officedata${petitionId}"></div>
+											<div id="officers${petitionId}"></div>
+						                </div>
+						            </div>
+								
+							  </div>`;
+							  
+				var strListHTML = "";
+							  
+			  	for (const key in listHTML) {
+				    if (listHTML.hasOwnProperty(key)) {
+				        //console.log(`${key}: ${listHTML[key]}`);
+				    	strListHTML += `<tr>
+							            	<td class="fw-semibold">${key+1}</td>
+							            	<td class="fw-semibold">${listHTML[key]['petition_no']}</td>
+							            	<td class="fw-semibold">${listHTML[key]['off_nm']}</td>
+							            	<td class="fw-semibold">
+							            		<a href="javascript:void(0)" class="link mr-10" onclick="unmapOfficer(${listHTML[key]['mapid']},${listHTML[key]['petition_id']},'${listHTML[key]['off_nm']}','${listHTML[key]['petition_no']}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="un-Map" data-original-title="Un-Map"><i class="fas fa-unlink"></i></a>
+							            	</td>
+						              	</tr>`;
+				    }
+				}
+			  	strListHTML = `<table class="table table-bordered table-vcenter mb-0">
+							              <thead>
+							              <tr>
+							                <th>S.no</th>
+							                <th>Petition No</th>
+							                <th>Department</th>
+							                <th><i class="fas fa-unlink"></i></th>
+							              </tr>
+							            </thead>
+							        	<tbody>
+							         		${strListHTML}
+							        	</tbody>
+							      	</table>`;
+	      	
+			compmapHTML = compmapHTML + `<div class="col-6" id="mappeddata">
+								
+								<div class="widget mb-0">
+					                <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                    <h3 class="widget-title" style="font-size:13px;">Mapped List</h3>
+					                </div>
+					                <div class="widget-body">
+					                	<div id="mappedTableHTML">
+					                    	${strListHTML}
+										</div>
+					                </div>
+					            </div>
+							
+						  </div></div>`;
+		  
+			
+			$("#mappingModalBody").html(compmapHTML); // Modal Box Body
+			
+		}).catch(function(error) {
+		    // Handle errors
+		    console.error('Error fetching Mapped data:', error);
+		});
+		return false;
+	}
+	function unmapOfficer(mapid,petitionId,department,petitionNo){
+		// Handle the response
+    	Swal.fire({
+			title: 'Are you sure to unmap this department?<br>'+department,
+			customClass: {
+		        title: 'swal-title-custom' // Add a custom class for the title
+		    },
+			//text: "Error",
+			icon: 'warning',
+			showCancelButton: true,
+			confirmButtonColor: '#3085d6',
+			cancelButtonColor: '#d33',
+			confirmButtonText: 'Yes',
+			}).then(function(result) {
+			if (result.isConfirmed) {
+				unmapPetition(mapid).then(function(status) {
+					if(status=="success"){
+						updateModelBox(petitionId,"Assign to the Department Officer",petitionNo);
+					}
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error unmapping mapid:'+mapid, error);
+				});
+			}
+		});
+		
+		return false;
+	}
+	function unmapPetition(mapid){
+		var apiUrl = '/gcc/api/zerohours_petition/unmapPetition?mapid='+mapid
+	    // Return a Promise
+	    return new Promise(function(resolve, reject) {
+	        $.ajax({
+	            url: apiUrl,
+	            type: 'GET',
+	            //data: formData,
+	            //dataType: 'json',
+	            success: function(jsonResponse) {
+	                // Resolve the Promise with the department list
+	                resolve(jsonResponse);
+	            },
+	            error: function(xhr, status, error) {
+	                // Reject the Promise with the error message
+	                console.error('Error fetching petition maping details ('+mapid+'):', error);
+	                reject(error);
+	            }
+	        });
+	    });
+	}
+</script>
\ No newline at end of file
diff --git a/target/classes/templates/fragments/modules/zerohours_petition/search_form.html b/target/classes/templates/fragments/modules/zerohours_petition/search_form.html
new file mode 100644
index 0000000..e0f28b3
--- /dev/null
+++ b/target/classes/templates/fragments/modules/zerohours_petition/search_form.html
@@ -0,0 +1,19 @@
+				<div class="row">
+					<div class="col-12 mb-2">
+						<div class="input-group mb-0">
+							<span class="input-group-prepend">
+                        	<button type="button" id="filter_reset_btn" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset">
+                          	  <i class="ik ik-refresh-ccw"></i>
+                        	</button>
+                        	</span>
+						 <select class="form-control" id="search_department_id" name="search_department_id">
+	                        <option value="0">All Department`s</option>
+	                      </select>
+	                      <span class="input-group-append">
+                         <button type="button" id="filter_search_btn" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search">
+                           <i class="ik ik-search me-1"></i> Search
+                         </button>
+                         </span>
+						</div>
+					</div>
+				</div>
\ No newline at end of file
diff --git a/target/classes/templates/index.html b/target/classes/templates/index.html
index 662b7cb..44a4c0c 100644
--- a/target/classes/templates/index.html
+++ b/target/classes/templates/index.html
@@ -63,7 +63,7 @@
                                         </div>
                                     </div>
                                    
-                                    <div class="widget-body">
+                                    <div class="widget-body" id="kural_dashboard">
                                     	<table>
 	                                    	<tr>
 	                                    		<td class="text-center" width="20%"><img src="/gcc/files/app_uploads/icons/thiruvalluvar.jpeg" width="90%" class="rounded"></td>
@@ -207,10 +207,152 @@
 	  		});
 	   }
        
+       function getDailyContent_kural(){
+			get_kural_data().then(function(data) {
+				var kural_html =``;
+				$.each(data, function(index, row) {
+				kural_html =`<table>
+					               	<tr>
+					           		<td class="text-center" width="20%"><img src="/gcc/files/app_uploads/icons/thiruvalluvar.jpeg" width="90%" class="rounded"></td>
+					           		<td>
+					           			<div class="mb-0" style="font-size:20px;">${row['Line1']}</div>
+					           			<div class="mb-0" style="font-size:20px;">${row['Line2']}</div>
+					           			<div class="mb-0 text-right">( குறள் எண் : ${row['Number']} ) | <a href="#" onclick="return openKural(${row['Number']});" class="link"> விளக்கம் </a></div>
+					           		</td>
+					           	</tr>
+					       	</table>`;
+				});
+				$("#kural_dashboard").html(kural_html);
+			}).catch(function(error) {
+	  		    // Handle errors
+		        if (error && error.message) {
+		            console.error('Error fetching Kural:', error.message);
+		        } else {
+		            console.error('An error occurred while fetching Kural:', error);
+		        }
+	  		});
+       }
+       
+       function get_kural_data(){
+    	   var apiUrl = '/gcc/api/getDailyKural';
+	  	    // Return a Promise
+	  	    return new Promise(function(resolve, reject) {
+	  	        $.ajax({
+	  	            url: apiUrl,
+	  	            type: 'GET',
+	  	            success: function(jsonResponse) {
+	  	                // Resolve the Promise with the department list
+	  	                resolve(jsonResponse);
+	  	            },
+	  	            error: function(xhr, status, error) {
+	  	                // Reject the Promise with the error message
+	  	                reject(error);
+	  	            }
+	  	        });
+	  	    });
+       }
+      
+       function openKural(number){
+			//alert(number);
+			get_kural_data().then(function(data) {
+				var kural_html =``;
+				$.each(data, function(index, row) {
+				kural_html =`<table class="table bg-warning" style="color:#fff">
+						            <tr>
+						           		<td>
+						           			<div class="mb-0" style="font-size:18px;">குறள் எண் : ${row['Number']}</div>
+						           		</td>
+						           		<td>
+						           			<div class="mb-0" style="font-size:18px;">${row['Line1']}</div>
+						           			<div class="mb-0" style="font-size:18px;">${row['Line2']}</div>
+						           		</td>
+						           		<td>
+					           				<div class="mb-0" style="font-size:18px;">${row['transliteration1']}</div>
+					           				<div class="mb-0" style="font-size:18px;">${row['transliteration2']}</div>
+					           			</td>
+					           		</tr>
+					       	</table>
+					       	
+							<div class="row pt-10">
+			                    <div class="col-md-6">
+			                        <div class="card" style="min-height: 100px;margin-bottom: 10px;">
+			                            <div class="card-header" style="background:#cdd6a0;padding:5px;">
+			                                <h3>மு.வ விளக்கம்:</h3>
+			                                <div class="card-header-right">
+			                                    
+			                                </div>
+			                            </div>
+			                            <div class="card-body timeline" style="font-size:15px;">
+			                           		${row['mv']}
+			                            </div>
+			                        </div>
+			                    </div>
+			                    
+			                    <div class="col-md-6">
+			                        <div class="card" style="min-height: 100px;margin-bottom: 10px;">
+			                            <div class="card-header" style="background:#cdd6a0;padding:5px;">
+			                                <h3>சாலமன் பாப்பையா விளக்கம்:</h3>
+			                                <div class="card-header-right">
+			                                    
+			                                </div>
+			                            </div>
+			                            <div class="card-body timeline" style="font-size:15px;">
+			                            	${row['sp']}
+			                            </div>
+			                        </div>
+		                    	</div>
+		                    <div class="col-md-6">
+			                    <div class="card" style="min-height: 100px;margin-bottom: 10px;">
+			                        <div class="card-header" style="background:#cdd6a0;padding:5px;">
+			                            <h3>கலைஞர் விளக்கம்:</h3>
+			                            <div class="card-header-right">
+			                            	
+			                            </div>
+			                        </div>
+			                        <div class="card-body timeline" style="font-size:15px;">
+			                        	${row['mk']}
+			                        </div>
+			                    </div>
+		                	</div>
+		                	
+		                	<div class="col-md-6">
+		                    <div class="card" style="min-height: 100px;">
+		                        <div class="card-header" style="background:#cdd6a0;padding:5px;">
+		                            <h3>Explanation:</h3>
+		                            <div class="card-header-right">
+		                            	
+		                            </div>
+		                        </div>
+		                        <div class="card-body timeline" style="font-size:15px;">
+		                        	${row['explanation']}
+		                        </div>
+		                    </div>
+	                	</div>
+	                	</div>
+							`;
+				});
+				$("#kuralBody").html(kural_html);
+				$("#kuralModal").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+			}).catch(function(error) {
+	  		    // Handle errors
+		        if (error && error.message) {
+		            console.error('Error fetching Kural:', error.message);
+		        } else {
+		            console.error('An error occurred while fetching Kural:', error);
+		        }
+	  		});
+			
+			return false;
+       }
+       
        $(document).ready(function() {
 			call_loading();
 			//get_user_info();
 			get_user_basic_info();
+			getDailyContent_kural();
 		});
        </script>
     </body>
diff --git a/target/classes/templates/login.html b/target/classes/templates/login.html
index a1d55c1..8c56c11 100644
--- a/target/classes/templates/login.html
+++ b/target/classes/templates/login.html
@@ -27,11 +27,11 @@
 						    </div>
 						    <form th:action="@{/gcc/login}" method="post">
                                 <div class="form-group">
-                                    <input type="text" class="form-control" id="username" name="username" placeholder="Username" required="" value="balaji">
+                                    <input type="text" class="form-control" id="username" name="username" placeholder="Username" required="" value="">
                                     <i class="ik ik-user"></i>
                                 </div>
                                 <div class="form-group">
-                                    <input type="password" class="form-control" id="password" name="password" placeholder="Password" required="" value="test">
+                                    <input type="password" class="form-control" id="password" name="password" placeholder="Password" required="" value="">
                                     <i class="ik ik-lock"></i>
                                 </div>
                                 <div class="row">
@@ -42,7 +42,7 @@
                                         </label>
                                     </div>
                                     <div class="col text-right">
-                                        <a href="forgot-password.html">Forgot Password ?</a>
+                                        <a href="#">Forgot Password ?</a>
                                     </div>
                                 </div>
                                 <div class="sign-btn text-center">
@@ -50,7 +50,7 @@
                                 </div>
                             </form>
                             <div class="register">
-                                <p>Don't have an account? <a href="register.html">Create an account</a></p>
+                                <p>Don't have an account? <a href="#">Create an account</a></p>
                             </div>
                         </div>
                     </div>
diff --git a/target/classes/templates/modules/c_petition/complaint_list.html b/target/classes/templates/modules/c_petition/complaint_list.html
index 40b8f02..da824cc 100644
--- a/target/classes/templates/modules/c_petition/complaint_list.html
+++ b/target/classes/templates/modules/c_petition/complaint_list.html
@@ -508,12 +508,12 @@
 					complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1);
 					
 					actionHTML = `<div class="dropdown d-inline-block show">
-			                        <a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
+			                        <!--<a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
 			                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end">
 			                        Action for: `+row['petition_no']+` 
 			                        	<a class="dropdown-item" href="" onclick="return viewAck('`+row['petition_no']+`');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View Acknowledgement"><i class="ik ik-eye"></i> Acknowledgement</a>
 			                        	<a class="dropdown-item" href="/gcc/c_petition/petition-ack/`+row['petition_no']+`" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print Acknowledgement"><i class="ik ik-printer"></i> Acknowledgement</a>
-			                        </div>
+			                        </div>-->
 			                    </div>`
 	                table.row.add([
 	                	rowNum++,
diff --git a/target/classes/templates/modules/callcenter/addcategory.html b/target/classes/templates/modules/callcenter/addcategory.html
new file mode 100644
index 0000000..43c398c
--- /dev/null
+++ b/target/classes/templates/modules/callcenter/addcategory.html
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.required{
+	color: red;
+}
+
+/* Custom CSS for SweetAlert2 */
+.swal-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.swal-popup {
+    width: 80% !important; /* Adjust width as needed */
+    max-width: 600px; /* Max width for larger screens */
+    border-radius: 8px; /* Optional: round the corners */
+    padding: 2rem; /* Optional: adjust padding */
+}
+
+.swal-confirm-button {
+    background-color: #dc3545; /* Example: red background for delete button */
+    border: none;
+    color: #fff;
+}
+
+.swal-cancel-button {
+    background-color: #6c757d; /* Example: gray background for cancel button */
+    border: none;
+    color: #fff;
+}
+
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-th-large bg-blue"></i>
+									<div class="d-inline">	
+										<h5>Add Category</h5>
+										<span>1913 Add Category</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">1913 Campaign</li>
+										<li class="breadcrumb-item active" aria-current="page">Add Category</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                    <h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auot refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>    
+                      
+                      <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+                                    <div class="page-header-title" >
+										<h5 style="margin: 0;font-weight: bold;">Category List</h5><hr>
+								   </div> 
+                                        <div>
+											<table id="categoryDatatable" 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">S.No</th>
+													        <th class="text-center">Category</th>
+													        <th class="text-center no-sort">Action</th>
+													    </tr>
+													</thead>
+													<tbody>
+													    <tr th:each="category, iterStat : ${categories}">
+													        <td class="text-center" th:text="${iterStat.index + 1}"></td>
+													        <td class="text-center" th:text="${category.category_name}"></td>
+													        <td class="text-center">
+													            <a href="#" th:onclick="return callEdit([[${category.category_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit">
+													                <i class="ik ik-edit f-16 mr-15 text-green"></i>
+													            </a>
+													                       <!-- Delete button -->
+													            <a href="javascript:void(0);" th:onclick="return openDeleteModal([[${category.category_id}]])" title="Delete">
+													                <i class="ik ik-trash-2 f-16 text-red ml-4"></i>
+													            </a>
+													        </td>
+													    </tr>
+													</tbody>
+
+
+													<tfoot class="thead-dark">
+													    <tr>
+													        <th class="text-center no-sort">S.No</th>
+													        <th class="text-center">Category</th>
+													        <th class="text-center no-sort">Action</th>
+													    </tr>
+													</tfoot>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+		
+
+        <!-- Category Modal Form -->
+		<div class="modal fade" id="addcategoryform" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
+		    <div class="modal-dialog modal-lg" role="document">
+		        <div class="modal-content">
+		            <div class="modal-header">
+		                <h5 class="modal-title" id="exampleModalCenterLabel">Category Form</h5>
+		                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		                    <span aria-hidden="true">&times;</span>
+		                </button>
+		            </div>
+		
+		            <div class="modal-body">
+		                <form id="addCategoryForm">
+		                    <div class="form-group row">
+		                        <label for="categoryname" class="col-sm-12 col-form-label">Category Name <span class="required">*</span></label>
+		                        <div class="col-sm-12">
+		                            <input type="text" class="form-control" name="categoryname" id="categoryname" placeholder="Category Name" required>
+		                        </div>
+		                    </div>
+		                </form>
+		            </div>
+		
+		            <div class="modal-footer">
+		                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+		                <button type="button" class="btn btn-primary" id="createCategoryBtn">Create</button>
+		            </div>
+		        </div>
+		    </div>
+		</div>
+		
+		<!-- Edit Category Modal -->
+		<div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
+		    <div class="modal-dialog" role="document">
+		        <div class="modal-content">
+		            <div class="modal-header">
+		                <h5 class="modal-title" id="editCategoryModalLabel">Edit Category</h5>
+		                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		                    <span aria-hidden="true">&times;</span>
+		                </button>
+		            </div>
+		            <div class="modal-body">
+		                <form id="editCategoryForm">
+		                    <input type="hidden" id="categoryId" name="categoryId">
+		                    <div class="form-group">
+		                        <label for="categoryName">Category Name</label>
+		                        <input type="text" class="form-control" id="categoryName" name="categoryName" required>
+		                    </div>
+		                    <button type="button" class="btn btn-primary" id="updateCategoryButton">Save Changes</button>
+		                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+		                </form>
+		            </div>
+		        </div>
+		    </div>
+		</div>
+		
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteCategoryModal" tabindex="-1" role="dialog" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document"> <!-- Add modal-lg here -->
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="deleteCategoryModalLabel">Confirm Deletion</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete this category?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger" id="confirmDeleteButton">Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+        
+             
+             
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>     
+        <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        
+        <script>
+        $(document).ready(function () {
+            // Initialize DataTables with export buttons
+            var buttons = [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    text: '<i class="far fa-plus-square"></i> Add New Category',
+                    className: 'btn btn-warning',
+                    action: function () {
+                        callAdd();
+                    }
+                }
+            ];
+
+            $('#categoryDatatable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+                ],
+                scrollY: '30vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: buttons,
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false,
+            });
+
+            // Function to show the modal and reset the form
+            function callAdd() {
+                // Reset the form inside the modal when opened
+                var form = $('#addCategoryForm');
+                if (form.length) {
+                    form[0].reset(); // Reset all form fields
+                }
+
+                // Show the modal with static backdrop and disabled keyboard close
+                $('#addcategoryform').modal({
+                    backdrop: 'static',
+                    keyboard: false
+                });
+                $('#addcategoryform').modal('show');
+            }
+
+            // Handle the Create button click event
+          $('#createCategoryBtn').click(function () {
+		    var categoryName = $('#categoryname').val().trim();
+		
+		    // Basic validation to ensure the category name is not empty
+		    if (categoryName === '') {
+		        Swal.fire({
+		            title: 'Validation Error',
+		            text: 'Please enter a category name.',
+		            icon: 'warning',
+		            confirmButtonText: 'OK',
+		        });
+		        return;
+		    }
+		
+		    // AJAX request to save the category
+		    $.ajax({
+		        url: '/gcc/api/category/save', // Ensure the URL points to the correct endpoint
+		        type: 'POST',
+		        contentType: 'application/json',
+		        data: JSON.stringify({ categoryname: categoryName }), // Ensure the key matches what backend expects
+		        success: function (response) {
+		            Swal.fire({
+		                title: 'Success',
+		                text: 'Category saved successfully!',
+		                icon: 'success',
+		                confirmButtonText: 'OK',
+		            }).then(function () {
+		                $('#addcategoryform').modal('hide'); // Close the modal after successful save
+		                location.reload(); // Reload the page to update the category list
+		            });
+		        },
+		        error: function (error) {
+		            Swal.fire({
+		                title: 'Error',
+		                text: 'Error saving category: ' + error.responseText,
+		                icon: 'error',
+		                confirmButtonText: 'OK',
+		            });
+		        }
+		    });
+		});
+            
+          window.callEdit = function (categoryId) {
+		        fetchCategoryDetails(categoryId);
+		        return false; // Prevent default anchor click behavior
+
+		    };
+            
+       // Function to open the Edit Category Modal and populate it with current data
+          function fetchCategoryDetails(categoryId) {
+              // AJAX request to fetch category details by ID
+              $.ajax({
+                  url: '/gcc/api/category/showcategoryId', // Ensure this URL matches your API endpoint
+                  type: 'GET',
+                  data: { category_id: categoryId }, // Send the category ID as a request parameter
+                  success: function (response) {
+                      // Check if the response contains the category data
+                      if (response) {
+                          // Populate the form fields with the retrieved data
+                          $('#categoryId').val(response.category_id);
+                          $('#categoryName').val(response.category_name);
+
+                          // Show the edit modal
+                          $('#editCategoryModal').modal({
+                              backdrop: 'static',
+                              keyboard: false
+                          });
+                      } else {
+                          Swal.fire({
+                              title: 'Error',
+                              text: 'Category not found.',
+                              icon: 'error',
+                              confirmButtonText: 'OK'
+                          });
+                      }
+                  },
+                  error: function (xhr, status, error) {
+                      // Handle error if the API call fails
+                      Swal.fire({
+                          title: 'Error',
+                          text: 'Error fetching category details: ' + xhr.responseText,
+                          icon: 'error',
+                          confirmButtonText: 'OK'
+                      });
+                  }
+              });
+
+              // Prevent the default action (if any) when the link is clicked
+              return false;
+          }
+
+
+            
+       // Event handler for the Save Changes button click in the edit modal
+          $('#updateCategoryButton').click(function () {
+              var categoryId = $('#categoryId').val();
+              var categoryName = $('#categoryName').val().trim();
+
+              // Validate the input
+              if (categoryName === '') {
+                  Swal.fire({
+                      title: 'Validation Error',
+                      text: 'Please enter a category name.',
+                      icon: 'warning',
+                      confirmButtonText: 'OK'
+                  });
+                  return;
+              }
+
+              // AJAX request to update the category
+              $.ajax({
+                  url: '/gcc/api/category/update/' + categoryId, // Ensure this URL is correct and matches your API endpoint
+                  type: 'PUT',
+                  contentType: 'application/x-www-form-urlencoded', // Content type for form data
+                  data: $.param({ categoryName: categoryName }), // Send category name as URL-encoded parameter
+                  success: function (response) {
+                      Swal.fire({
+                          title: 'Success',
+                          text: 'Category updated successfully!',
+                          icon: 'success',
+                          confirmButtonText: 'OK'
+                      }).then(function () {
+                          $('#editCategoryModal').modal('hide'); // Hide the modal
+                          location.reload(); // Reload the page to refresh the category list
+                      });
+                  },
+                  error: function (xhr, status, error) {
+                      Swal.fire({
+                          title: 'Error',
+                          text: 'Error updating category: ' + xhr.responseText,
+                          icon: 'error',
+                          confirmButtonText: 'OK'
+                      });
+                  }
+              });
+          });
+
+     
+          window.openDeleteModal = function (categoryId) {
+        	    $('#categoryId').val(categoryId); // Set the categoryId before showing the modal
+        	    fetchDeleteCategoryDetails();
+        	    return false; // Prevent default anchor click behavior
+        	};
+
+       
+		    function fetchDeleteCategoryDetails() {
+		        Swal.fire({
+		            title: 'Confirm Deletion',
+		            text: 'Are you sure you want to delete this category?',
+		            icon: 'warning',
+		            showCancelButton: true,
+		            confirmButtonText: 'Delete',
+		            cancelButtonText: 'Cancel',
+		            customClass: {
+		                container: 'swal-container',
+		                popup: 'swal-popup',
+		                confirmButton: 'swal-confirm-button',
+		                cancelButton: 'swal-cancel-button'
+		            },
+		            width: '80%',
+		            padding: '3rem',
+		            heightAuto: false
+		        }).then((result) => {
+		            if (result.isConfirmed) {
+		                // Call the function to delete the category
+		                deleteCategory();
+		            }
+		        });
+		    }
+
+		    function deleteCategory() {
+		        var categoryId = $('#categoryId').val(); // Ensure this is correctly set
+		        console.log("Deleting category with ID: " + categoryId); // Debugging line
+		        $.ajax({
+		            url: '/gcc/api/category/delete/' + categoryId,
+		            type: 'DELETE',
+		            success: function (response) {
+		                Swal.fire({
+		                    title: 'Deleted!',
+		                    text: 'Category has been deleted.',
+		                    icon: 'success'
+		                }).then(() => {
+		                    location.reload(); // Refresh the page or update the UI as needed
+		                });
+		            },
+		            error: function (xhr, status, error) {
+		                Swal.fire({
+		                    title: 'Error',
+		                    text: 'Error deleting category: ' + xhr.responseText,
+		                    icon: 'error'
+		                });
+		            }
+		        });
+		    }
+
+
+
+        });
+
+            
+				
+		</script>
+        
+    </body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenter/agentscampaign.html b/target/classes/templates/modules/callcenter/agentscampaign.html
new file mode 100644
index 0000000..25159c5
--- /dev/null
+++ b/target/classes/templates/modules/callcenter/agentscampaign.html
@@ -0,0 +1,888 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+
+.custom-width1 {
+    width: 140px; /* Adjust the width as needed */
+}
+.custom-width2 {
+    width: 200px; /* Adjust the width as needed */
+}
+.custom-width3{
+	width: 100px;
+}
+table td {
+    text-align: center;
+}
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-headset bg-blue"></i>
+									<div class="d-inline">
+										<h5>Agent's Campaign</h5>
+										<span>1913 Agent's Campaign</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">1913 Campaign</li>
+										<li class="breadcrumb-item active" aria-current="page">Agents Campaign</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                    <h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auot refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>    
+                      
+                      <div class="row">
+                      <div class="col-md-12 mt-2">
+                      <div class="card">
+                         <div class="card-block">  
+                         <div class="page-header-title" >
+                         		<h4 style="margin: 0;font-weight: bold;" class="text-center"><span th:text="${agent_name}"></span>' s Campaign</h4>
+								<div class="mt-2 d-flex justify-content-between align-items-center">
+								    <h5 style="margin: 0; font-weight: bold; font-style: italic;">Campaign List</h5>
+								    <button type="button" class="btn btn-primary" id="refresh"><i class="ik ik-refresh-ccw"></i>Refresh</button>
+								</div>
+							<hr>
+						   </div>              	
+                      		<div>
+                      		<table id="Agenttask" class="table table-striped table-bordered table-hover dataTable" role="grid" style="width:99%;">
+                                                <thead class="thead-dark">
+	                                                <tr role="row">
+														<th class="text-center no-sort">S.No</th>
+														<th class="text-center" >Category</th>
+														<th class="text-center" >CampaignName</th>
+														<th class="text-center">Calls Assigned</th>
+														<th class="text-center">Calls Pending</th>
+														<th class="text-center">Calls Completed</th>
+														<th class="text-center">Follow ups</th>
+														<th class="text-center " >Start Calls</th>
+														<th class="text-center " >Further Calls</th>
+													</tr>
+                                                </thead>
+                                               <tbody>
+												    
+												    <tr th:each="agentsCampaign, iterStat : ${agentsCampaigns}">
+											            <td th:text="${iterStat.index + 1}" class="text-center"></td> <!-- Serial number -->
+											            <td th:text="${agentsCampaign['category_name']}" class="text-center"></td> <!-- Category name -->
+											            <td th:text="${agentsCampaign['campaign_name']}" class="text-center"></td> <!-- Campaign name -->
+											            <td th:text="${agentsCampaign['calls_assigned']}" class="text-center"></td>
+											            <td th:text="${agentsCampaign['pending_count']}" class="text-center"></td>
+											            <td th:text="${agentsCampaign['complete_count']}" class="text-center"></td>
+											            <td th:text="${agentsCampaign['followup_count']}" class="text-center"></td>											            
+											            <td class="text-center">
+											                <!-- Add your action button -->
+											                <button type="button" class="btn btn-primary" 
+											               	th:onclick="'viewCampaignDetails(' + ${agentsCampaign['campaign_id']} + ',' + ${agentsCampaign['calls_per_agent']} + ',' + ${agentsCampaign['agent_id']} + ')'">
+											                    view
+											                </button>
+											            </td>
+											            <td class="text-center">
+											            	<button type="button" class="btn btn-info" 
+												               th:onclick="'PendingCampaignDetails(' + ${agentsCampaign['campaign_id']} + ',' + ${agentsCampaign['calls_per_agent']} + ',' + ${agentsCampaign['agent_id']} + ')'">
+												                view
+												             </button>
+											            </td>
+											        </tr>
+												    
+												</tbody>
+
+                                                <tfoot class="thead-dark">
+	                                               <tr role="row">
+														<th class="text-center no-sort">S.No</th>
+														<th class="text-center" >Category</th>
+														<th class="text-center" >CampaignName</th>
+														<th class="text-center">Calls Assigned</th>
+														<th class="text-center">Calls Pending</th>
+														<th class="text-center">Calls Completed</th>
+														<th class="text-center">Follow ups</th>
+														<th class="text-center " >Start Calls</th>
+														<th class="text-center " >Further Calls</th>
+													</tr> 
+                                                </tfoot>
+                                            </table> 
+                                            </div>
+                      		</div>
+                      	</div>
+                      </div>
+                    	
+                    	<div class="col-md-12" id="tablesforcalls" style="display: none;">
+							<div class="card">							
+									<div class="card-block">
+									<div class="page-header-title" >
+									       <h5 style="margin: 0;font-weight: bold;"><span id="campaign-name-display" style="font-weight: bold;color:blue; margin-right: 5px;"></span>- Calls List</h5><hr>
+						  			 </div>
+                                    <div>
+                                        <table id="AgentDatatable" class="table  table-bordered table-hover  dataTable" role="grid">
+                                            <thead class="thead-dark">
+                                                <tr role="row">
+                                                    <th >S.No</th>                                                  
+                                                    <th class="custom-width3">ID</th>
+                                                    <th class="text-center">Name</th>
+                                                    <th class="text-center">Address</th>
+                                                    <th class="text-center">Balance Amount</th>
+                                                    <th class="text-center">Mobile number</th>
+                                                    <th class="text-center">ViewDetails</th>
+                                                    <th class="text-center custom-width1">Action</th>
+                                                    <th class="text-center custom-width2">Remarks</th>
+                                                    <th class="text-center">Send Message</th>                                                    
+                                                    <th class="text-center">Status</th>                                                                                                                                                    
+                                                </tr>                                             
+                                            </thead>
+                                             <tbody>
+                                             
+										    </tbody>
+                                            <tfoot class="thead-dark">
+                                                <tr role="row">
+                                                    <th >S.No</th>                                                  
+                                                    <th class="custom-width3">ID</th>
+                                                    <th class="text-center">Name</th>
+                                                    <th class="text-center">Address</th>
+                                                    <th class="text-center">Balance Amount</th>
+                                                    <th class="text-center">Mobile number</th>
+                                                    <th class="text-center">ViewDetails</th>
+                                                     <th class="text-center custom-width1">Action</th>
+                                                    <th class="text-center custom-width2">Remarks</th>
+                                                    <th class="text-center">Send Message</th>                                                    
+                                                    <th class="text-center"> Status</th>                                              
+                                                </tr>                                               
+                                            </tfoot>
+                                        </table>
+                                    </div>
+                                    
+                                    
+                                </div>
+                                
+							</div>
+						</div>
+						
+						
+						<div class="col-md-12" id="tablesforpendingcalls" style="display: none;">
+							<div class="card">							
+									<div class="card-block">
+									<div class="page-header-title" >
+									       <h5 style="margin: 0;font-weight: bold;"><span id="campaign-names-display" style="font-weight: bold;color:blue; margin-right: 5px;"></span>- Further Calls List</h5><hr>
+						   			</div>
+                                    <div>
+                                        <table id="Pendingtasktable" class="table table-bordered table-hover dataTable" role="grid">
+                                            <thead class="thead-dark">
+                                                <tr role="row">
+                                                    <th>S.No</th>                                                  
+                                                    <th class="custom-width3">ID</th>
+                                                    <th class="text-center">Name</th>
+                                                    <th class="text-center">Address</th>
+                                                    <th class="text-center">Balance Amount</th>
+                                                    <th class="text-center">Mobile number</th>
+                                                    <th class="text-center">ViewDetails</th>
+                                                    <th class="text-center custom-width1">Action</th>
+                                                    <th class="text-center custom-width2">Remarks</th> 
+                                                    <th class="text-center">Send Message</th>
+                                                    <th class="text-center">Status</th>                                                                                                                                                    
+                                                </tr>                                             
+                                            </thead>
+                                             <tbody>
+                                             
+										    </tbody>
+                                            <tfoot class="thead-dark">
+                                                <tr role="row">
+                                                    <th>S.No</th>                                                  
+                                                    <th class="custom-width3">ID</th>
+                                                    <th class="text-center">Name</th>
+                                                    <th class="text-center">Address</th>
+                                                    <th class="text-center">Balance Amount</th>
+                                                    <th class="text-center">Mobile number</th>
+                                                    <th class="text-center">ViewDetails</th>
+                                                     <th class="text-center custom-width1">Action</th>
+                                                    <th class="text-center custom-width2">Remarks</th> 
+                                                    <th class="text-center">Send Message</th> 
+                                                    <th class="text-center"> Status</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 src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        
+        <script>
+        $(document).ready(function() {
+
+        	var buttons = [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary'
+                }
+                
+            ];
+            
+            
+            $('#Agenttask').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    {targets: 'no-sort', orderable: false}
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+                ],
+                scrollY: '30vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: buttons,
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: true,
+                select: false,
+                processing: false,
+            });
+            
+            
+        }); 
+        
+        document.getElementById("refresh").addEventListener("click", function() {
+            location.reload(); // Reloads the current page
+        });
+        
+        
+        function viewCampaignDetails(campaignId, callsPerAgent, agentId) {
+            console.log('Calling viewCampaignDetails with:', {
+                callsPerAgent: callsPerAgent,
+                campaignId: campaignId, // this is 24, constant
+                agentId: agentId // this will change
+            });
+            
+            $.ajax({
+	            url: `/gcc/api/campaign/getCampaignDetailsbyId?campaign_id=${campaignId}`,
+	            type: 'GET',
+	            success: function (response) {
+					console.log(response);
+	                if (response) {
+	                    // Populate modal fields with data
+	                    //$('#campaign_id').val(response.campaign_id);
+	                    $('#campaign_names').val(response.campaign_name); // Assuming the key in the response is 'campaign_name'
+	                 // Display the campaign name near the h5 element
+	                    $('#campaign-name-display').text(response.campaign_name); // Add text dynamically to the element
+
+	                } else {
+	                	console.error('Error fetching campaign details:', error);
+	                }
+	            },
+	            error: function (xhr, status, error) {
+	                console.error('Error fetching campaign details:', error);
+	                alert('An error occurred while fetching campaign details.');
+	            }
+	        });
+            
+         // Get the card element by its ID (e.g., 'tablesforcalls')
+            var cardElement = document.getElementById('tablesforcalls');
+
+            // Toggle the display property based on current state
+            if (cardElement.style.display === 'block') {
+                cardElement.style.display = 'none'; // Hide the card if it's currently displayed
+            } else {
+                cardElement.style.display = 'block'; // Show the card if it's hidden
+            }
+            
+            $.ajax({					
+                url: '/gcc/api/campaign/startcampaign?campaign_id=' + campaignId + '&calls_per_agent=' + callsPerAgent, // URL to your Spring Boot controller
+                type: 'GET', // GET request
+                contentType: 'application/json',
+                success: function(response) {
+                    console.log('Campaign started successfully:', response); 
+                    
+                    // We are focusing on matching the agent_id since campaign_id is constant (24)
+                    let dataIds = [];
+                    response.forEach(function(item) {
+                        console.log('Checking agent_id:', item.agent_id, 'against passed agent_id:', agentId);
+                        
+                        if (item.agent_id === agentId) {
+                            dataIds = item.data_ids; // Get the corresponding data_ids
+                            console.log('Match found. Data IDs:', dataIds);
+                        }
+                    });
+
+                    if (dataIds.length > 0) {
+                        console.log('Data IDs for Agent ID ' + agentId + ':', dataIds);
+                        
+                        // Fetch the data for the matched data IDs
+                        $.ajax({
+                            url: '/gcc/api/agents/getdataByIds?ids=' + dataIds.join(','), // dataIds is the array [6, 7]
+                            type: 'GET',
+                            contentType: 'application/json',
+                            success: function(response) {
+                                console.log('Data retrieved successfully:', response);
+                                
+                                // Initialize DataTable if not already done
+                                let table = $('#AgentDatatable').DataTable();
+                                
+                                // Clear existing rows in the table
+                                table.clear();
+                                
+                                // Process and append the new data to the DataTable
+                                let rows = [];
+                                response.forEach(function(item, index) {
+                                    let row = [
+                                        index + 1,  // S.No
+                                        item.id,    // ID
+                                        item.name,  // Name
+                                        item.address,  // Address
+                                        item.dues,     // Dues
+                                        item.cellnumber,  // Mobile Number
+                                                        
+                                        
+                                        `<div class="text-center">
+                                        <button class="btn btn-primary" onclick="ViewDetails('${item.viewdetails}')">View</button>
+                                    	</div>`,
+                                        
+                                        // Dropdown for Action
+                                         `<div class="text-center">
+                                        <select class="form-control action-dropdown" name="action" data-index="${index}" ${item.call_status && item.call_status !== 'NONE' ? 'disabled' : ''}>
+								                <option value="NONE" ${item.call_status === "NONE" ? "selected" : ""}>Call Status</option>
+								                <option value="INFORMATION_GIVEN" ${item.call_status === "INFORMATION_GIVEN" ? "selected" : ""}>INFORMATION GIVEN</option>
+								                <option value="UNATTENDED" ${item.call_status === "UNATTENDED" ? "selected" : ""}>UNATTENDED</option>
+								                <option value="CALL_BACK_LATER" ${item.call_status === "CALL_BACK_LATER" ? "selected" : ""}>CALL BACK LATER</option>
+								                <option value="SWITCH_OFF" ${item.call_status === "SWITCH_OFF" ? "selected" : ""}>SWITCH OFF</option>
+								                <option value="WRONG_NUMBER" ${item.call_status === "WRONG_NUMBER" ? "selected" : ""}>WRONG NUMBER</option>
+								            </select>
+								        </div>`,
+                                        
+									     // Textarea for Remarks (populate saved remarks)
+									        `<div class="text-center">
+									        <textarea class="form-control" name="remarks" ${item.call_status && item.call_status !== 'NONE' ? 'disabled' : ''}>${item.remarks ? item.remarks : ""}</textarea>
+									        </div>`,
+									        								        
+									     // WhatsApp Message Button
+						                    `<div class="text-center">
+						                        <button class="btn btn-success" onclick="sendWhatsAppMessage('${item.cellnumber}', '${item.id}', '${item.viewdetails}')">Send</button>
+						                    </div>`,
+                                        
+                                        // Centered Button for Submit Action (Initially disabled)
+                                        `<div class="text-center">
+                                            <button class="btn btn-primary submit-button" id="submit-btn-${index}" disabled onclick="submitAction(${item.data_id}, ${index}, ${agentId},${campaignId})">${item.call_status && item.call_status !== 'NONE' ? 'Submit' : 'Submit'}</button>
+                                        </div>`
+                                    ];
+                                    
+                                    rows.push(row);
+                                });
+                                
+                                // Append the rows to your table
+                                $('#AgentDatatable').DataTable().rows.add(rows).draw();
+                             
+                                $('.action-dropdown').on('change', function () {
+                                    let selectedValue = $(this).val(); // Dropdown value
+                                    let index = $(this).data('index'); // Index of the row
+                                    let button = $('#submit-btn-' + index); // The submit button
+                                    let remarksField = $('textarea[name="remarks"]').eq(index); // The remarks textarea
+
+                                    // Function to check if the button should be enabled
+                                    function toggleButtonState() {
+                                        let remarksValue = remarksField.val().trim(); // Trimmed value of remarks
+                                        if (selectedValue !== 'NONE' && remarksValue !== '') {
+                                            button.prop('disabled', false);
+                                            button.text('Submit');
+                                            button.removeClass('btn-primary').addClass('btn-primary');
+                                        } else {
+                                            button.prop('disabled', true);
+                                            button.text('Submit');
+                                            button.removeClass('btn-primary').addClass('btn-primary');
+                                        }
+                                    }
+
+                                    // Toggle button state based on the current conditions
+                                    toggleButtonState();
+
+                                    // Add an event listener to the remarks field to recheck conditions
+                                    remarksField.on('input', function () {
+                                        toggleButtonState();
+                                    });
+                                });
+
+                                
+                               
+                                
+                            },
+                            error: function(xhr, status, error) {
+                                console.error('Error retrieving data:', error);
+                            }
+                        });
+                    } 
+                    else {
+                        console.log('No matching data found for Agent ID ' + agentId);
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error starting campaign:', error);
+                }
+            });
+            
+            initializeAgentsDataTable();
+            // Show the #tablesforcalls div
+            //document.getElementById('tablesforcalls').style.display = 'block';
+        }
+        
+       
+
+        function submitAction(dataId, index,agentId,campaignId) {
+            // Get selected dropdown value and textarea value
+            let action = $('.action-dropdown[data-index="' + index + '"]').val(); // Ensure you're getting the correct value
+            let remarks = $(`#AgentDatatable tbody textarea[name="remarks"]`).eq(index).val() || "N/A";
+
+            
+            // Make an AJAX POST request to submit the data
+            $.ajax({
+                url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
+                type: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify({
+                    data_id: dataId,
+                    agent_id: agentId,
+                    campaign_id:campaignId,
+                    call_status: action,  // Use "call_status" as the key to match the controller parameter name
+                    remarks: remarks
+                }),
+                success: function(response) {
+                    console.log('Data Updated successfully:', response);                   
+                    // Update the button and form fields after successful submission                    
+                    Swal.fire({
+                                title: 'Success!',
+                                text: 'Data Updated successfully!',
+                                icon: 'success',
+                                timer: 2000,
+                                showConfirmButton: false
+                            })
+                    
+                    let button = $(`#submit-btn-${index}`);
+                    button.text('Submitted').removeClass('btn-primary').addClass('btn-primary').prop('disabled', true);
+                    $(`#AgentDatatable tbody .action-dropdown[data-index="${index}"]`).prop('disabled', true);
+                    $(`#AgentDatatable tbody textarea[name="remarks"]`).eq(index).prop('disabled', true);
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error submitting data:', error);
+                }
+            });
+        }
+        
+        function PendingCampaignDetails(campaignId, callsPerAgent, agentId) {
+            console.log('Calling PendingCampaignDetails with:', {
+                callsPerAgent: callsPerAgent,
+                campaignId: campaignId, 
+                agentId: agentId
+            });
+            
+            $.ajax({
+	            url: `/gcc/api/campaign/getCampaignDetailsbyId?campaign_id=${campaignId}`,
+	            type: 'GET',
+	            success: function (response) {
+					console.log(response);
+	                if (response) {
+	                    // Populate modal fields with data
+	                    //$('#campaign_id').val(response.campaign_id);
+	                    $('#campaign_names').val(response.campaign_name); // Assuming the key in the response is 'campaign_name'
+	                 // Display the campaign name near the h5 element
+	                    $('#campaign-names-display').text(response.campaign_name); // Add text dynamically to the element
+
+	                } else {
+	                	console.error('Error fetching campaign details:', error);
+	                }
+	            },
+	            error: function (xhr, status, error) {
+	                console.error('Error fetching campaign details:', error);
+	                alert('An error occurred while fetching campaign details.');
+	            }
+	        });
+            
+         // Get the card element by its ID (e.g., 'tablesforcalls')
+            var cardElement = document.getElementById('tablesforpendingcalls');
+
+            // Toggle the display property based on current state
+            if (cardElement.style.display === 'block') {
+                cardElement.style.display = 'none'; // Hide the card if it's currently displayed
+            } else {
+                cardElement.style.display = 'block'; // Show the card if it's hidden
+            }
+            
+            $.ajax({					
+                url: '/gcc/api/campaign/startcampaign?campaign_id=' + campaignId + '&calls_per_agent=' + callsPerAgent, // URL to your Spring Boot controller
+                type: 'GET', // GET request
+                contentType: 'application/json',
+                success: function(response) {
+                    console.log('Campaign started successfully:', response); 
+                    
+                    // We are focusing on matching the agent_id since campaign_id is constant (24)
+                    let dataIds = [];
+                    response.forEach(function(item) {
+                        console.log('Checking agent_id:', item.agent_id, 'against passed agent_id:', agentId);
+                        
+                        if (item.agent_id === agentId) {
+                            dataIds = item.data_ids; // Get the corresponding data_ids
+                            console.log('Match found. Data IDs:', dataIds);
+                        }
+                    });
+
+                    if (dataIds.length > 0) {
+                        console.log('Data IDs for Agent ID ' + agentId + ':', dataIds);
+                        
+                        // Fetch the data for the matched data IDs
+                        $.ajax({
+                            url: '/gcc/api/agents/getPendingDataByIds?ids=' + dataIds.join(','), // dataIds is the array [6, 7]
+                            type: 'GET',
+                            contentType: 'application/json',
+                            success: function(response) {
+                                console.log('Data retrieved successfully:', response);
+                                
+                                // Initialize DataTable if not already done
+                                let table = $('#Pendingtasktable').DataTable();
+                                
+                                // Clear existing rows in the table
+                                table.clear();
+                                
+                                // Process and append the new data to the DataTable
+                                let rows = [];
+                                response.forEach(function(item, index) {
+                                    let row = [
+                                        index + 1,  // S.No
+                                        item.id,    // ID
+                                        item.name,  // Name
+                                        item.address,  // Address
+                                        item.dues,     // Dues
+                                        item.cellnumber,  // Mobile Number
+                                        
+                                        `<div class="text-center">
+                                        <button class="btn btn-primary" onclick="ViewDetails('${item.viewdetails}')">View</button>
+                                    	</div>`,
+                                        
+                                        // Dropdown for Action
+                                        `<div class="text-center">
+					                        <select class="form-control action-dropdown2" name="action" data-index="${index}">
+					                            <option value="NONE" ${item.call_status === "NONE" ? "selected" : ""}>Call Status</option>
+					                            <option value="INFORMATION_GIVEN" ${item.call_status === "INFORMATION_GIVEN" ? "selected" : ""}>INFORMATION GIVEN</option>
+					                            <option value="UNATTENDED" ${item.call_status === "UNATTENDED" ? "selected" : ""}>UNATTENDED</option>
+					                            <option value="CALL_BACK_LATER" ${item.call_status === "CALL_BACK_LATER" ? "selected" : ""}>CALL BACK LATER</option>
+					                            <option value="SWITCH_OFF" ${item.call_status === "SWITCH_OFF" ? "selected" : ""}>SWITCH OFF</option>
+					                            <option value="WRONG_NUMBER" ${item.call_status === "WRONG_NUMBER" ? "selected" : ""}>WRONG NUMBER</option>
+					                        </select>
+					                    </div>`,
+                                        
+									     // Textarea for Remarks (populate saved remarks)
+									        `<div class="text-center">
+					                        <textarea class="form-control" name="remarks">${item.remarks ? item.remarks : ""}</textarea>
+					                    </div>`,
+					                    
+					                    
+					                 // WhatsApp Message Button
+					                    `<div class="text-center">
+					                        <button class="btn btn-success" onclick="sendWhatsAppMessage('${item.cellnumber}', '${item.id}', '${item.viewdetails}')">Send</button>
+					                    </div>`,
+					                                        
+					                  // Centered Button for Submit Action (Initially disabled)
+					                    `<div class="text-center">
+					                    <button class="btn btn-primary submit-button" id="submitt-btn-${index}" disabled onclick="editAction(${item.data_id}, ${index}, ${agentId},${campaignId})">${item.call_status && item.call_status !== 'NONE' ? 'Update' : 'Update'}</button>
+					                    
+					                </div>`
+                                    ];
+                                    
+                                    rows.push(row);
+                                });
+                                
+                                // Append the rows to your table
+                                $('#Pendingtasktable').DataTable().rows.add(rows).draw();
+                             
+                                
+                             // Add event listener to each dropdown to enable/disable the button
+                                 $('.action-dropdown2').on('change', function() {
+                                    let selectedValue = $(this).val();
+                                    let index = $(this).data('index');
+                                    let button = $('#submitt-btn-' + index);
+                                    
+                                    
+                                    // Enable the button if a valid option is selected, otherwise keep it disabled
+                                    if (selectedValue === 'NONE') {
+                                        button.prop('disabled', true);
+                                        button.text('Update');
+                                        button.removeClass('btn-primary').addClass('btn-primary');
+                                    } else {
+                                        button.prop('disabled', false);
+                                        button.text('Update');
+                                        button.removeClass('btn-primary').addClass('btn-primary');
+                                    }
+                                }); 
+                             
+                                /* $('.action-dropdown2').on('change', function () {
+                                    let selectedValue = $(this).val(); // Dropdown value
+                                    let index = $(this).data('index'); // Index of the row
+                                    let button = $('#submit-btn-' + index); // The submit button
+                                    let remarksField = $('textarea[name="remarks"]').eq(index); // The remarks textarea
+
+                                    // Function to check if the button should be enabled
+                                    function toggleButtonState() {
+                                        let remarksValue = remarksField.val().trim(); // Trimmed value of remarks
+                                        if (selectedValue !== 'NONE' && remarksValue !== '') {
+                                            button.prop('disabled', false);
+                                            button.text('Update');
+                                            button.removeClass('btn-primary').addClass('btn-primary');
+                                        } else {
+                                            button.prop('disabled', true);
+                                            button.text('Update');
+                                            button.removeClass('btn-primary').addClass('btn-primary');
+                                        }
+                                    }
+
+                                    // Toggle button state based on the current conditions
+                                    toggleButtonState();
+
+                                    // Add an event listener to the remarks field to recheck conditions
+                                    remarksField.on('input', function () {
+                                        toggleButtonState();
+                                    });
+                                }); */
+
+                                
+                            },
+                            error: function(xhr, status, error) {
+                                console.error('Error retrieving data:', error);
+                            }
+                        });
+                    }
+                    else {
+                        console.log('No matching data found for Agent ID ' + agentId);
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error starting campaign:', error);
+                }
+            });
+            
+            initializeAgentsDataTable();
+            // Show the #tablesforcalls div
+            //document.getElementById('tablesforpendingcalls').style.display = 'block';
+        }
+        
+        function editAction(dataId, index,agentId,campaignId) {
+            // Get selected dropdown value and textarea value
+            let action = $('.action-dropdown2[data-index="' + index + '"]').val(); // Ensure you're getting the correct value
+            let remarks = $(`#Pendingtasktable tbody textarea[name="remarks"]`).eq(index).val();
+            
+            // Make an AJAX POST request to submit the data
+            $.ajax({
+                url: '/gcc/api/agents/savecall', // URL to your Spring Boot controller for handling POST
+                type: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify({
+                    data_id: dataId,
+                    agent_id: agentId,
+                    campaign_id:campaignId,
+                    call_status: action,  // Use "call_status" as the key to match the controller parameter name
+                    remarks: remarks
+                }),
+                success: function(response) {
+                    console.log('Data Updated successfully:', response);
+                    
+                    // Update the button and form fields after successful submission
+                    
+                    Swal.fire({
+                                title: 'Success!',
+                                text: 'Data Updated successfully!',
+                                icon: 'success',
+                                timer: 2000,
+                                showConfirmButton: false
+                            })
+                    
+                    
+                    
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error submitting data:', error);
+                }
+            });
+        }
+        
+        
+        function initializeAgentsDataTable() {
+            if (!$.fn.DataTable.isDataTable('#AgentDatatable')) {
+                $('#AgentDatatable').DataTable({
+                    dom: 'Bftip',
+                    columnDefs: [{ targets: 'no-sort', orderable: false }],
+                    lengthMenu: [
+                        [50, 100, 200, 500, -1],
+                        ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+                    ],
+                    scrollY: '60vh',
+                    fixedColumns: { left: 1, right: 1 },
+                    buttons: [
+                        { extend: 'pageLength', className: 'btn btn-warning' },
+                        { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+                        { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+                        { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+                        { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
+                    ],
+                    fixedHeader: true,
+                    autoWidth: true,
+                    responsive: true,
+                    searching: true,
+                    select: false,
+                    processing: false
+                });
+            }
+            
+         // Initialize the Pendingtasktable if it is not already initialized
+            if (!$.fn.DataTable.isDataTable('#Pendingtasktable')) {
+                $('#Pendingtasktable').DataTable({
+                    dom: 'Bftip',
+                    columnDefs: [{ targets: 'no-sort', orderable: false }],
+                    lengthMenu: [
+                        [50, 100, 200, 500, -1],
+                        ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+                    ],
+                    scrollY: '60vh',
+                    fixedColumns: { left: 1, right: 1 },
+                    buttons: [
+                        { extend: 'pageLength', className: 'btn btn-warning' },
+                        { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+                        { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+                        { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+                        { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
+                    ],
+                    fixedHeader: true,
+                    autoWidth: true,
+                    responsive: true,
+                    searching: true,
+                    select: false,
+                    processing: false
+                });
+            }
+        }
+        //view url for specific id details
+        function ViewDetails(url) {
+    		if(url)
+                {
+    				window.open( url,'_blank');
+    			}
+    		else
+    		{	 Swal.fire({
+           		 title: 'Error!',
+            	 text: 'NO Data Available!',
+             	 icon: 'error',
+            	 timer: 2000,
+            	 showConfirmButton: false
+      			  })
+    			}
+            }
+        
+        
+      	//whatsapp message function
+        function sendWhatsAppMessage(cellnumber, billNo, viewdetailsUrl) {
+            // Build the dynamic WhatsApp message URL
+        let msgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${cellnumber}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Greetings+from+Greater+Chennai+Corporation%2C%0A%0AProperty+Bill+No+${billNo}%0A%0ASkip+the+hassle+and+pay+your+property+tax+easily+on+WhatsApp.+It%E2%80%99s+quick%2C+stress-free%2C+and+just+a+few+taps+away%21+%F0%9F%93%B2%0A%0ASimply+click+the+button+below+to+view+your+payment+details+and+complete+your+payment+today%21+%F0%9F%92%B8&media_url=https%3A%2F%2Fres.cloudinary.com%2Fdpub5muar%2Fimage%2Fupload%2Fv1727080053%2Fang8tqjqdcxuqoeiuvjl.jpg&isTemplate=true&cta_button_url=${encodeURIComponent(viewdetailsUrl)}`;
+
+            // Send the WhatsApp message
+            $.ajax({
+                url: '/gcc/api/whatsapp/send-whatsapp-message', // Replace with your service path
+                type: 'POST',
+                data: { msgUrl: msgUrl },
+                success: function(response) {
+                    console.log('WhatsApp message sent successfully', response);
+                    //alert('WhatsApp message sent!');
+                    Swal.fire({
+                                title: 'Success!',
+                                text: 'Message sent successfully!',
+                                icon: 'success',
+                                timer: 2000,
+                                showConfirmButton: false
+                            })
+                    
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error sending WhatsApp message:', error);
+                    //alert('Failed to send WhatsApp message.');
+                    
+                    Swal.fire({
+                                title: 'Error!',
+                                text: 'Message Not sent!',
+                                icon: 'error',
+                                timer: 2000,
+                                showConfirmButton: false
+                            })
+                }
+            });
+        }
+        
+        
+        </script>
+        
+        
+    </body>
+</html>
diff --git a/target/classes/templates/modules/callcenter/assignagents.html b/target/classes/templates/modules/callcenter/assignagents.html
new file mode 100644
index 0000000..720fce7
--- /dev/null
+++ b/target/classes/templates/modules/callcenter/assignagents.html
@@ -0,0 +1,692 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+ <style>
+         
+    </style>
+</head>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <div class="main-content">
+                <div class="container-fluid">
+                    <div class="page-header">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fas fa-user-graduate bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>Assign Agents</h5>
+                                        <span>1913 Assign agents for Campaign</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <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">1913 Campaign</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Assign Agents</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                 <hr>
+                 
+
+                  
+					  <!-- Card for Agent Assignment -->
+					  <div class="card">
+					    <div class="card-header">
+					      <h3>Agent Assign</h3>
+					    </div>
+					    <div class="card-body">
+					    
+					      <!-- Dropdown for Category -->
+					      <div class="row">
+						      <div class="form-group col-md-6 col-sm-12">
+						        <label for="category">Category</label>
+						        <select id="category" class="form-control">
+						          
+						        </select>
+						      </div>
+					
+						      <!-- Dropdown for Campaigns -->
+						      <div class="form-group col-md-6 col-sm-12">
+						        <label for="campaign">Campaign</label>
+						        <select id="campaign" class="form-control" disabled>						          
+						        </select>
+						      </div>
+						      
+						      
+						      <div class="form-group col-12 d-flex justify-content-center align-items-center">
+							        <!-- Centered button between the dropdowns -->
+							        <button id="searchBtn" class="btn btn-primary">Search</button>
+							        <button id="resetBtn" class="btn btn-secondary ml-3">Reset</button>
+							   </div>
+					     </div>
+					     
+					    </div>
+					  </div>
+					
+					  <!-- Card for Campaign Details -->
+					  <div class="card mt-3" id="campaignDetailsCard" style="display:none;">
+						    <div class="card-header">
+						      <h3>Campaign Details</h3>
+						    </div>
+						    
+						  				    
+					    <div class="card-body">
+					    
+						    <table class="table table-bordered">
+							  <tbody>
+							    <tr>
+							      <th >Name</th>
+							      <td class="fw-semibold" id="campaignName" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							    <tr>
+							      <th>From Date</th>
+							      <td class="fw-semibold" id="campaignStartdate" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							    <tr>
+							      <th>To Date</th>
+							      <td class="fw-semibold" id="campaignEnddate" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							    <tr>
+							      <th>Agents Assigned</th>
+							      <td class="fw-semibold" id="campaignAgents" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							    <tr>
+							      <th>Calls Assigned (per person)</th>
+							      <td class="fw-semibold" id="campaignCalls" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							    <tr>
+							      <th>Description</th>
+							      <td class="fw-semibold" id="campaignDesc" style="padding: 0.45rem 0.45rem;"></td>
+							    </tr>
+							  </tbody>
+							</table>
+					    
+					    </div>
+					 </div>
+					  
+					  
+					  <div class="row" id="editagentCard" style="display:none;">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+                                    <div class="page-header-title" >
+										<h5 style="margin: 0;font-weight: bold;">Selected Agent List</h5><hr>
+								   </div> 
+										<table id="editagentsDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+											    <thead class="thead-dark">
+											        <tr role="row">
+											            <th class="text-center no-sort" width="1%">S.No</th>
+											            <th class="text-center">Agent Id</th>
+											            <th class="text-center">Name of Agents</th>
+											            <th class="text-center">Select/Not Selected</th>
+											        </tr>
+											    </thead>
+											    <tbody id="editagentList" style="text-align:center;">
+											        <!-- Rows will be dynamically inserted here -->
+											    </tbody>
+											</table>
+                                            
+                                        </div>
+                                      
+                                    </div>
+                                     
+                                </div>
+                            </div>
+					  
+					  
+					  
+					  <div class="row" id="agentCard" style="display:none;">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+                                    <div class="page-header-title" >
+										<h5 style="margin: 0;font-weight: bold;">Overall Agent List</h5><hr>
+								   </div> 
+	                                          <div class=" d-flex justify-content-end mb-2">
+	                                          
+	                                          		<button class="btn btn-primary" id="selectedCount"><i class="ik ik-user-plus f-16 mr-2"></i>0</button>
+												    <!-- <button class="btn btn-warning ml-2" id="editAgentsBtn"><i class="ik ik-edit f-16 mr-2"></i>Edit</button> -->
+												    
+												  </div>
+												  												  
+											<table id="agentsDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+											    <thead class="thead-dark">
+											        <tr role="row">
+											            <th class="text-center no-sort" width="1%">S.No</th>
+											            <th class="text-center">Agent Id</th>
+											            <th class="text-center">Name of Agents</th>
+											            <th class="text-center"><input type="checkbox" id="selectAllAgents"> Select All</th>
+											        </tr>
+											    </thead>
+											    <tbody id="agentList" style="text-align:center;">
+											        <!-- Rows will be dynamically inserted here -->
+											    </tbody>
+											</table>
+                                              <!-- Center the Submit button -->
+												    <div class="text-center">
+												      <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
+												    </div>
+                                            
+                                        </div>
+                                      
+                                    </div>
+                                     
+                                </div>
+                            </div>
+                            
+                            
+                            
+                        
+					
+					  
+				
+					  
+					</div>
+
+
+
+             
+        </div>
+   
+     <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+      </div>
+</div>
+
+   
+    <!-- Include jQuery and Bootstrap JavaScript -->
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <!--  sweet alert -->
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+   <script type="text/javascript">
+
+    // Fetch category dropdown on page load
+    fetchCategoryDropdown();
+
+	    // Handle category change event to fetch campaigns
+	    $(document).on('change', '#category', function() {
+	    let selectedCategoryId = $(this).val();
+	    if (selectedCategoryId != '0') {
+	        fetchCampaignDropdown(selectedCategoryId);
+	    } else {
+	        $('#campaign').empty().prop('disabled', true);
+	    }
+	});
+   
+
+
+$("#searchBtn").click(function () {
+	let selectedCampaignId = $('#campaign').val();
+	
+	
+    if(selectedCampaignId == null || selectedCampaignId=='0'){
+    	 Swal.fire({
+             title: 'Info!',
+             text: 'Please Select Category and Campaign!',
+             icon: 'info',
+             timer: 2000,
+             //timerProgressBar: true,
+             showConfirmButton: false
+         })
+         hideCampaignAndAgentDetails();
+    }
+    else if (selectedCampaignId != '0') {
+        fetchCampaignDetails(selectedCampaignId);
+        checkCampaignInAssigned(selectedCampaignId);
+        
+     // Disable the category and campaign dropdowns after search
+        $('#category').prop('disabled', true);
+        $('#campaign').prop('disabled', true);
+    } 
+    else {
+    	
+        hideCampaignAndAgentDetails();
+        
+    }
+});
+
+
+
+//Approve button click event
+$("#submitBtn").click(function () {
+    handleSubmit();
+});
+
+$("#resetBtn").click(function () {
+    location.reload(); // Reloads the current page
+});
+
+
+// Initial binding for checkbox events
+bindCheckboxEvents();
+
+// Function to fetch category dropdown
+function fetchCategoryDropdown() {
+    $.ajax({
+        url: '/gcc/api/callcenter/admin/getcategory',
+        type: 'GET',
+        dataType: 'json'
+    })
+    .done(function (data) {
+        let categoryDropdown = $('#category');
+        categoryDropdown.empty();
+        categoryDropdown.append($('<option selected value="0"></option>').text('Select a category'));
+        $.each(data, function (index, category) {
+            categoryDropdown.append($('<option></option>').attr('value', category.category_id).text(category.category_name));
+        });
+    })
+    .fail(function (xhr, status, error) {
+        console.error('Error fetching category:', error);
+    });
+}
+
+// Function to fetch campaigns based on selected category
+function fetchCampaignDropdown(categoryId) {
+    $('#campaign').prop('disabled', false);
+    $.ajax({
+        url: '/gcc/api/callcenter/admin/getcampaignbycategory?id=' + categoryId,
+        type: 'GET',
+        dataType: 'json'
+    })
+    .done(function (data) {
+        let campaignDropdown = $('#campaign');
+        campaignDropdown.empty();
+        campaignDropdown.append($('<option selected value="0"></option>').text('Select a campaign'));
+        $.each(data, function (index, campaign) {
+            campaignDropdown.append($('<option></option>').attr('value', campaign.campaign_id).text(campaign.campaign_name));
+        });
+    })
+    .fail(function (xhr, status, error) {
+        console.error('Error fetching campaign:', error);
+    });
+}
+
+// Function to fetch campaign details
+function fetchCampaignDetails(campaignId) {
+    $.ajax({
+        url: '/gcc/api/callcenter/admin/getcampaignbyid?id=' + campaignId,
+        method: 'GET',
+        dataType: 'json',
+        success: function (response) {
+            if (response.length === 0) {
+                console.error("No campaign details found.");
+                return;
+            }
+
+            document.getElementById("campaignName").innerHTML = response[0].campaign_name;
+            document.getElementById("campaignStartdate").innerHTML = response[0].start_date;
+            document.getElementById("campaignEnddate").innerHTML = response[0].end_date;
+            document.getElementById("campaignAgents").innerHTML = response[0].no_of_agents;
+            document.getElementById("campaignCalls").innerHTML = response[0].calls_per_agent;
+            document.getElementById("campaignDesc").innerHTML = response[0].description;
+
+            // Show the campaign details card
+            document.getElementById('campaignDetailsCard').style.display = 'block';
+        },
+        error: function () {
+            console.error("An error occurred while fetching campaign details.");
+        }
+    });
+}
+
+// Function to check if campaign is already assigned and fetch agents
+function checkCampaignInAssigned(selectedCampaignId) {
+		
+    $.ajax({
+        url: '/gcc/api/callcenter/admin/getassignedcampaign?id=' + selectedCampaignId,
+        type: 'GET',
+        dataType: 'json',
+        success: function(response) {
+        	//console.log('checkCampaignInAssigned response:', response);
+            fetchAgentsForCampaign(selectedCampaignId); // Always fetch agents
+
+            if (response.length > 0) {
+                populateEditAgentList(response);
+                document.getElementById('editagentCard').style.display = 'block';
+                initializeEditAgentsDataTable();
+            }
+            else{
+            	document.getElementById('editagentCard').style.display = 'none';
+            }
+        },
+        error: function(xhr, status, error) {
+            console.error('Error fetching assigned agents:', error);
+        }
+    });
+}
+
+
+// Function to populate the edit agent list
+function populateEditAgentList(agents) {
+    let editagentList = $('#editagentList');
+    editagentList.empty();
+    
+    $.each(agents, function(index, agent) {
+    	 
+         
+    	let row = `
+    	    <tr data-assigned-id="${agent.assigned_id}">
+    	        <td>${index + 1}</td>
+    	        <td>${agent.agent_id}</td>
+    	        <td>${agent.agent_name}</td>
+    	        <td>
+    	            <button class="btn btn-warning" onclick="editagent(${agent.assigned_id})">Remove</button>
+    	        </td>            
+    	    </tr>
+    	`;
+        // Log the row HTML to debug
+       // console.log('Appending row:', row);
+        
+        editagentList.append(row);
+    });
+}
+
+function editagent(assignedId) {
+    
+        $.ajax({
+            url: '/gcc/api/callcenter/admin/deleteassignedbyid?id=' + assignedId,
+            type: 'GET',
+            dataType: 'json',
+            success: function(response) {
+            	$('tr[data-assigned-id="' + assignedId + '"]').remove();
+                Swal.fire({
+                    title: 'Success!',
+                    text: 'Agents have been removed!',
+                    icon: 'success',
+                    timer: 2000,
+                    //timerProgressBar: true,
+                    showConfirmButton: false
+                })
+            },
+            error: function(xhr, status, error) {
+                console.error('Error removing agents:', error);
+                reject(error); // Reject the promise in case of an error
+            }
+        });
+   
+}
+
+
+
+// Function to fetch agents for the selected campaign
+function fetchAgentsForCampaign(campaignId) {
+    $.ajax({
+        url: '/gcc/api/callcenter/admin/getagentsfortask?id=' +campaignId,
+        type: 'GET',
+        dataType: 'json',
+        success: function(response) {
+            let agentList = $('#agentList');
+            agentList.empty();
+
+            if (response.length > 0) {
+                $.each(response, function(index, agent) {
+                    let row = `
+                        <tr>
+                            <td>${index + 1}</td>
+                            <td>${agent.agent_id}</td>
+                            <td>${agent.agent_name}</td>
+                            <td><input type="checkbox" class="agentCheckbox" value="${agent.agent_id}"></td>
+                        </tr>
+                    `;
+                    agentList.append(row);
+                });
+
+                document.getElementById('agentCard').style.display = 'block';
+                initializeAgentsDataTable();
+            } else {
+                agentList.append('<tr><td colspan="4">No agents available</td></tr>');
+            }
+
+            bindCheckboxEvents(); // Rebind checkbox events after adding new checkboxes
+        },
+        error: function(xhr, status, error) {
+            console.error('Error fetching agents:', error);
+        }
+    });
+}
+
+// Function to hide campaign and agent details
+function hideCampaignAndAgentDetails() {
+    document.getElementById('campaignDetailsCard').style.display = 'none';
+    document.getElementById('agentCard').style.display = 'none';
+    document.getElementById('editagentCard').style.display = 'none';
+}
+
+// Function to bind checkbox events and handle "Select All" functionality
+function bindCheckboxEvents() {
+    $('#selectAllAgents').on('click', function() {
+        let campaignAgentsCount = parseInt($('#campaignAgents').text(), 10);
+        let totalCheckboxes = $('.agentCheckbox').length;
+
+        if ($(this).is(':checked')) {
+            if (campaignAgentsCount > totalCheckboxes) {
+                Swal.fire({
+                    title: 'Sorry!',
+                    text: 'You cannot select more checkboxes than available.',
+                    icon: 'error',
+                    timer: 2000
+                }).then(() => {
+                    $('#selectAllAgents').prop('checked', false);
+                });
+            } else {
+                let checkboxes = $('.agentCheckbox');
+                checkboxes.prop('checked', false);
+                for (let i = 0; i < campaignAgentsCount; i++) {
+                    if (checkboxes[i]) {
+                        $(checkboxes[i]).prop('checked', true);
+                    }
+                }
+            }
+        } else {
+            $('.agentCheckbox').prop('checked', false);
+        }
+
+        updateSelectedCount();
+    });
+
+    $(document).on('change', '.agentCheckbox', function () {
+        if ($('.agentCheckbox:checked').length === $('.agentCheckbox').length) {
+            $('#selectAllAgents').prop('checked', true);
+        } else {
+            $('#selectAllAgents').prop('checked', false);
+        }
+
+        updateSelectedCount();
+    });
+}
+
+// Function to update the selected count
+function updateSelectedCount() {
+    let selectedCount = $('.agentCheckbox:checked').length;
+    $('#selectedCount').html('<i class="ik ik-user-plus f-16 mr-2"></i>' + selectedCount);
+}
+
+// Function to handle form submission and assign agents
+function handleSubmit() {
+
+    let selectedCategoryId = $('#category').val();
+    let selectedCampaignId = $('#campaign').val();
+    let campaignAgentsCount = parseInt($('#campaignAgents').text(), 10); // Get the required agent count
+    let assignedAgentCount = $('#editagentList tr').length; // Count already assigned agents
+
+    // Ensure category and campaign are selected
+    if (selectedCategoryId == 0 || selectedCampaignId == 0) {
+        Swal.fire({
+            title: 'Info!',
+            text: 'Please select a category and campaign before proceeding.',
+            icon: 'info',
+            timer: 2000,
+            timerProgressBar: true
+        });
+        return;
+    }
+
+    let selectedAgentsCount = $(".agentCheckbox:checked").length; // Count of selected checkboxes
+
+    // Total agent count (new selections + already assigned)
+    let totalSelectedCount = selectedAgentsCount + assignedAgentCount;
+
+    // Validation: Check if total selected count matches the campaignAgentsCount
+    if (totalSelectedCount < campaignAgentsCount) {
+        Swal.fire({
+            title: 'Error!',
+            text: `You need to select ${campaignAgentsCount - totalSelectedCount} more agents to meet the required count.`,
+            icon: 'error',
+            timer: 3000,
+            timerProgressBar: true
+        });
+        return;
+    } else if (totalSelectedCount > campaignAgentsCount) {
+        Swal.fire({
+            title: 'Error!',
+            text: `You have selected more agents than allowed. Please reduce the number of selected agents.`,
+            icon: 'error',
+            timer: 3000,
+            timerProgressBar: true
+        });
+        return;
+    }
+
+    let requestData = [];
+    $(".agentCheckbox:checked").each(function () {
+        requestData.push({
+            categoryId: parseInt(selectedCategoryId),
+            campaignId: parseInt(selectedCampaignId),
+            agentId: parseInt($(this).val())
+        });
+    });
+
+    if (requestData.length === 0) {
+        Swal.fire({
+            title: 'Info!',
+            text: 'Please select at least one agent to assign.',
+            icon: 'info',
+            timer: 3000,
+            timerProgressBar: true
+        });
+        return;
+    }
+
+    // AJAX request to submit the data
+    $.ajax({
+        url: "/gcc/api/callcenter/admin/addagentsfortask",
+        type: "POST",
+        contentType: "application/json",
+        data: JSON.stringify(requestData),
+        success: function (response) {
+            Swal.fire({
+                title: 'Success!',
+                text: 'Agents have been successfully assigned!',
+                icon: 'success',
+                timer: 2000,
+                timerProgressBar: true,
+                showConfirmButton: false
+            }).then(() => {
+                location.reload(); // Reload after success
+            });
+        },
+        error: function (xhr, status, error) {
+            Swal.fire({
+                title: 'Error!',
+                text: 'There was an error while assigning agents.',
+                icon: 'error',
+                timer: 3000,
+                timerProgressBar: true
+            });
+        }
+    });
+}
+
+
+
+
+//Initialize the first table: agentsDatatable
+function initializeAgentsDataTable() {
+    if (!$.fn.DataTable.isDataTable('#agentsDatatable')) {
+        $('#agentsDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [{ targets: 'no-sort', orderable: false }],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+            ],
+            scrollY: '30vh',
+            fixedColumns: { left: 1, right: 1 },
+            buttons: [
+                { extend: 'pageLength', className: 'btn btn-warning' },
+                { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+                { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+                { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+                { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false
+        });
+    } else {
+        $('#agentsDatatable').DataTable().clear().draw();
+    }
+}
+
+// Initialize the second table: editagentsDatatable
+function initializeEditAgentsDataTable() {
+    if (!$.fn.DataTable.isDataTable('#editagentsDatatable')) {
+        $('#editagentsDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [{ targets: 'no-sort', orderable: false }],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+            ],
+            scrollY: '30vh',
+            fixedColumns: { left: 1, right: 1 },
+            buttons: [
+                { extend: 'pageLength', className: 'btn btn-warning' },
+                { extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+                { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+                { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+                { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false
+        });
+    } else {
+        $('#editagentsDatatable').DataTable().clear().draw();
+    }
+}
+
+</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenter/attendancereport.html b/target/classes/templates/modules/callcenter/attendancereport.html
new file mode 100644
index 0000000..cc58f84
--- /dev/null
+++ b/target/classes/templates/modules/callcenter/attendancereport.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+ <style>
+        
+</style>
+</head>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <div class="main-content">
+                <div class="container-fluid">
+                    <div class="page-header">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fa fa-list-alt bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>1913 Attendance Reports</h5>
+                                        <span>List of 1913 Agents Attendance</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <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" aria-current="page">1913 Attendance</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Attendance Report</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                 <hr>
+                 
+                 <div id="pageLoader"
+				    style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				    <div style="position: relative; top: 50%; transform: translateY(-50%);">
+				        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+				            <span class="sr-only">Loading...</span>
+				        </div>
+				        <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
+				    </div>
+				</div>
+                 
+				<div class ="card-body">
+					<form th:action="@{/gcc/callcenter/attendancereport}" method="get" onsubmit="showLoader()">
+						<div class="row">
+						
+							<div class="col-sm-6 mb-3">
+								<label for="fromDate"
+									style="font-size: medium;; margin-bottom: 0px;">From
+									Date:</label> <input type="date" id="fromDate" name="fromDate"
+									th:value="${fromDate}" class="form-control" required>
+							</div>
+							<div class="col-sm-6  mb-3">
+								<label for="toDate"
+									style="font-size: medium; margin-bottom: 0px;">To
+									Date:</label> <input type="date" id="toDate" name="toDate"
+									th:value="${toDate}" class="form-control" required>
+							</div>
+							</div>
+
+						<div class="row">
+							<div class="col-12 d-flex justify-content-center">
+								<button type="submit" id="filterButton"
+									class="btn btn-primary mx-2">Filter</button>
+
+								<button class="btn btn-danger mx-2" onclick="resetDate()"
+									name="reset">Reset</button>
+							</div>
+						</div>
+						</form>
+					  
+					</div>
+
+                  
+					  <!--  Agents Attendance report -->
+					 <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+                                    <div class="page-header-title" >
+										<h5 style="margin: 0;font-weight: bold;">Attendance Reports</h5><hr>
+								   </div> 
+                                        <div>
+											<table id="AttendanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%" height="100%">
+                                                <thead class="thead-dark">
+													    <tr role="row">
+													        <th class="text-center">S.No</th>
+													        <!-- <th class="text-center">Zone</th>
+													        <th class="text-center">Division</th> -->
+													        <th class="text-center">Employee Id</th>
+													        <th class="text-center">Employee Name</th>
+													        <!-- <th class="text-center">Department Name</th> -->
+													        <th class="text-center">Designation</th>
+													        <th class="text-center">Device Location</th> 
+													        <th class="text-center">Punch Date</th>
+													        <th class="text-center">Punch In</th>
+													        <th class="text-center">Punch Out</th>
+													        <th class="text-center">Total Working hours</th>
+													        
+													    </tr>
+													</thead>
+													<tbody>
+															<tr th:each="row,sno : ${attendanceData}">
+															<td th:text="${sno.index + 1}" class="text-center"></td>
+											                <!-- <td th:text="${row.zone}" class="text-center"></td>
+											                <td th:text="${row.division}" class="text-center"></td> -->
+											                <td th:text="${row.user_id}" class="text-center"></td>
+											                <td th:text="${row.user_name}" class="text-center"></td>
+											                <!-- <td th:text="${row.departmentname}" class="text-center"></td> -->
+											                <td th:text="${row.designation}" class="text-center"></td>
+											                <td th:text="${row.device_name}" class="text-center"></td>
+											                <td th:text="${row.punch_date}" class="text-center"></td>
+											                <td th:text="${row.PUNCHIN}" class="text-center"></td>
+											                <td th:text="${row.PUNCHOUT}" class="text-center"></td>
+											                <td th:text="${row.total_working_hours}" class="text-center"></td>
+											            </tr>
+													
+													</tbody>
+
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>                            
+					  
+					</div>
+
+        </div>
+   
+     <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+      </div>
+</div>
+
+   
+    <!-- Include jQuery and Bootstrap JavaScript -->
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <!--  sweet alert -->
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+   <script type="text/javascript">
+
+// Initialize DataTables with export buttons
+$(document).ready(function () {
+    var buttons = [
+        { extend: 'pageLength', className: 'btn btn-warning' },
+        { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+        { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+        { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+        { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' },
+    ];
+
+    $('#AttendanceDatatable').DataTable({
+        dom: 'Bftip',
+        columnDefs: [
+            { targets: 'no-sort', orderable: false }
+        ],
+        lengthMenu: [
+            [50, 100, 200, 500, -1],
+            ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+        ],
+        scrollY: '50vh',
+        fixedColumns: { left: 1, right: 1 },
+        buttons: buttons,
+        fixedHeader: true,
+        autoWidth: true,
+        responsive: true,
+        searching: true,
+        select: false,
+        processing: false,
+    });
+});
+
+$("#fromDate").on("change", function() {
+    const startDate = $(this).val();  // Get the selected start date
+    // Set the min value for To Date to be the selected From Date
+    $("#toDate").attr("min", startDate);
+});
+
+// Event listener for To Date selection
+$("#toDate").on("change", function() {
+    const endDate = $(this).val();  // Get the selected end date
+    // Set the max value for From Date to be the selected To Date
+    $("#fromDate").attr("max", endDate);
+});
+
+//Function to reset the date fields and reload the page with cleared data
+function resetDate() {
+    // Clear the date inputs
+    document.getElementById("fromDate").value = "";
+    document.getElementById("toDate").value = "";
+
+    // Redirect to the endpoint without parameters to reset the page
+    window.location.href = "/gcc/callcenter/attendancereport";
+}
+
+//Function to show the loader when the form is submitted
+function showLoader() {
+	document.getElementById('pageLoader').style.display = 'block';
+}
+
+// Function to hide the loader after the page has loaded
+window.onload = function () {
+	document.getElementById('pageLoader').style.display = 'none';
+};
+   
+</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenter/campaignlist.html b/target/classes/templates/modules/callcenter/campaignlist.html
new file mode 100644
index 0000000..7f6ca42
--- /dev/null
+++ b/target/classes/templates/modules/callcenter/campaignlist.html
@@ -0,0 +1,676 @@
+<!DOCTYPE html>
+<html lang="en"  xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fa fa-list-alt bg-blue"></i>
+									<div class="d-inline">
+										<h5>Campaign List</h5>
+										<span>1913 Campaign List</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">1913 Campaign</li>
+										<li class="breadcrumb-item active" aria-current="page">Campaign List</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                    <h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auot refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>
+                        
+                    <div class="row">
+                    	
+                    	<div class="col-md-12">
+							<div class="card">
+							
+								<div class="card-body">
+								<div class="page-header-title" >
+									<h5 style="margin: 0;font-weight: bold;">Campaigns List</h5><hr>
+							   </div> 
+									<table id="StartCampaigntable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+                                            <thead class="thead-dark">
+                                                <tr role="row">
+                                                    <th>S.No</th>                                                  
+                                                    <th class="text-center">Category</th>
+                                                    <th class="text-center">Campaign</th>
+                                                    <th class="text-center">Agents Assigned</th>
+                                                    <th class="text-center">Calls per Agents</th>
+                                                    <th class="text-center">Total Calls</th>                                                                                                                                                                                                        
+                                                    <th class="text-center">Action</th>                                                                                                                                                     
+                                                </tr>                                               
+                                            </thead>
+                                             <tbody>
+										          <tr th:each="campaign, iterStat : ${campaigns}">
+											            <td th:text="${iterStat.index + 1}" class="text-center"></td> <!-- Serial number -->
+											            <td th:text="${campaign['category_name']}" class="text-center"></td> <!-- Category name -->
+											            <td th:text="${campaign['campaign_name']}" class="text-center"></td> <!-- Campaign name -->
+											            <td th:text="${campaign['no_of_agents']}" class="text-center"></td> <!-- Number of agents assigned -->
+											            <td th:text="${campaign['calls_per_agent']}" class="text-center"></td> <!-- Calls per agent -->
+											            <td th:text="${campaign['total_calls']}" class="text-center"></td> <!-- Total calls -->
+											            <td class="text-center">
+											                <!-- Add your action button -->
+											                <button type="button" class="btn btn-primary" 
+											                      th:onclick="'startCampaign(' + ${campaign.calls_per_agent} + ',' + ${campaign.campaign_id} + ')'">
+											                    Start
+											                </button>
+											            </td>
+											        </tr>
+											    
+										    </tbody>
+                                            <tfoot class="thead-dark">
+                                                <tr role="row">
+                                                    <th>S.No</th>                                                  
+                                                    <th class="text-center">Category</th>
+                                                    <th class="text-center">Campaign</th>
+                                                    <th class="text-center">Agents Assigned</th>
+                                                    <th class="text-center">Calls per Agents</th>
+                                                    <th class="text-center">Total Calls</th>                                                                                                                                                                                                        
+                                                    <th class="text-center">Action</th>                                                                                                  
+                                                </tr>                                              
+                                            </tfoot>
+                                        </table>
+								</div>
+							</div>
+						</div>
+                    	
+                    	<div class="col-md-12">
+							<div class="card">
+							
+									<div class="card-block">
+									<div class="page-header-title" >
+								<h5 style="margin: 0;font-weight: bold;">Campaign Status List</h5><hr>
+						   </div> 
+                                    <div>
+                                        <table id="CampaignDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+                                            <thead class="thead-dark">
+                                                <tr role="row">
+                                                    <th>S.No</th>                                                  
+                                                    <th class="text-center">Name</th>
+                                                    <th  class="text-center">Category</th>                                                
+                                                    <th  class="text-center">Event Date</th>
+                                                    <th  class="text-center">Description</th>
+                                                    <th  class="text-center">Agents Performance</th>                                                                                                                                                      
+                                                    <th  class="text-center">Status</th>                                                  
+                                                                                                    
+                                                </tr>
+                                                
+                                            </thead>
+                                             <tbody>
+										         <tr th:each="activeCampaign, iterStat : ${activeCampaigns}">
+											            <td th:text="${iterStat.index + 1}" class="text-center"></td> <!-- Serial number -->
+											            <td th:text="${activeCampaign['campaign_name']}" class="text-center"></td> 
+											            <td th:text="${activeCampaign['category_name']}" class="text-center"></td> 
+											            <td th:text="${activeCampaign['start_date']} + ' - ' + ${activeCampaign['end_date']}" class="text-center"></td>
+											            <td th:text="${activeCampaign['description']}" class="text-center"></td> <!-- Calls per agent -->
+											            <td class="text-center">
+											                <!-- Add your action button -->
+											                <button type="button" class="btn btn-success" 
+											                     th:onclick="'viewdetailsModal(' + ${activeCampaign['campaign_id']} + ', ' + ${activeCampaign['calls_per_agent']} + ')'">
+											                    View
+											                </button>
+											            </td>
+											            <td class="text-center">
+											                <!-- Add your action button -->
+											                <button type="button" class="status-button btn">
+											                    Ongoing
+											                </button>
+											            </td>
+											        </tr>											    
+										    </tbody>
+                                            <tfoot class="thead-dark">
+                                                <tr role="row">
+                                                      <th>S.No</th>                                                  
+                                                    <th class="text-center">Name</th>
+                                                    <th  class="text-center">Category</th>
+                                                    <th  class="text-center">Event Date</th>
+                                                    <th  class="text-center">Description</th>
+                                                    <th  class="text-center">Agents Performance</th>                                                                                                                                                      
+                                                    <th  class="text-center">Status</th>                                                
+                                                                                                    
+                                                </tr>
+                                                
+                                            </tfoot>
+                                        </table>
+                                    </div>
+                                </div>
+							</div>
+						</div>
+                    	
+                    </div>  
+                        
+                     </div>
+                </div>
+               
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+				</div>
+				
+               
+            
+		</div>
+		
+		<!--agentperformance Modal -->
+		<div class="modal fade" id="agentperformance" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalCenterLabel">Agents Performance</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    
+                    <div class="modal-body">
+						<div class="table-responsive" >
+						<table id="agentperformanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+                              <thead class="thead-dark">
+                                 	<tr role="row">
+                            <th rowspan="2" class="text-center">S.No</th>
+                            <th rowspan="2" class="text-center">Agent Name</th>
+                            <th colspan="4" class="text-center">Performance</th>
+                            <th colspan="5" class="text-center">Call Results</th>
+                            
+                        </tr>
+                        <tr role="row">
+                            
+                            <th class="text-center">Assigned</th>
+                            <th class="text-center">Completed</th>
+                            <th class="text-center">Pending</th>
+                            <th class="text-center">Completion (%)</th>
+                            <th class="text-center">Information Given</th>
+                            <th class="text-center">Not Attended</th>
+                            <th class="text-center">Call back later</th>
+                            <th class="text-center">Switch Off</th>
+                            <th class="text-center">Wrong Number</th>
+                        </tr>
+						 </thead>
+                         <tbody>
+                                    
+                         </tbody>
+                               
+                       </table>
+						</div>
+                     </div>
+  					
+  					<div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                        
+                    </div>                                        
+                </div>
+            </div>
+        </div>
+		
+		
+		
+		
+		<!--viewCompletedModal Modal -->
+		<div class="modal fade" id="viewCompletedModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalCenterLabel">Calls Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    
+                    <div class="modal-body">
+						<div class="table-responsive" >
+						<table id="CompletedDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+                              <thead class="thead-dark">
+                                 	<tr role="row">
+                            			<th class="text-center">S.No</th>
+                            			<th class="text-center">ID</th>
+                            			<th class="text-center">Name</th>
+                            			<th class="text-center">Address</th>
+                            			<th class="text-center">Mobile no</th>
+                            			<th class="text-center">Call Status</th>
+                            			<th class="text-center">Remarks</th>
+                            			<th class="text-center">No of times called</th>
+                            			<th class="text-center">Updated Date</th>
+                        			</tr>
+						 	  </thead>
+	                          <tbody>
+	                                    
+	                          </tbody>
+                               <tfoot class="thead-dark">
+                                 	<tr role="row">
+                            			<th class="text-center">S.No</th>
+                            			<th class="text-center">ID</th>
+                            			<th class="text-center">Name</th>
+                            			<th class="text-center">Address</th>
+                            			<th class="text-center">Mobile no</th>
+                            			<th class="text-center">Call Status</th>
+                            			<th class="text-center">Remarks</th>
+                            			<th class="text-center">No of times called</th>
+                            			<th class="text-center">Updated Date</th>
+                        			</tr>
+						 	  </tfoot>
+                        </table>
+						</div>
+                     </div>
+  					
+  					<div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                        
+                    </div>                                        
+                </div>
+            </div>
+        </div>		
+		
+                      
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>     
+        <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        
+        <script type="text/javascript">
+    $(document).ready(function () {
+
+    	
+    	
+        // Define buttons for DataTables
+        var buttons = [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'excelHtml5',
+                text: 'Excel',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'csvHtml5',
+                text: 'CSV',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary'
+            }
+        ];
+
+        // DataTables initialization for #StartCampaigntable
+        $('#StartCampaigntable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                {targets: 'no-sort', orderable: false}
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+            ],
+            scrollY: '30vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: buttons,
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false,
+        });
+
+        // DataTables initialization for #CampaignDatatable
+        $('#CampaignDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                {targets: 'no-sort', orderable: false}
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+            ],
+            scrollY: '50vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: buttons,
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false,
+        });
+
+        const rows = document.querySelectorAll("#CampaignDatatable tbody tr");
+        rows.forEach(row => {
+            const eventDateText = row.querySelector('td:nth-child(4)').innerText; // Get the event date text
+            const statusButton = row.querySelector('.status-button'); // Select the status button
+            // Parse start and end dates
+            const dates = eventDateText.split(' - ');
+            const endDate = new Date(dates[1].trim()); // Extract the end date          
+            // Get the current date
+            const currentDate = new Date();
+            currentDate.setHours(0, 0, 0, 0); // Reset time to compare dates only
+            // Compare dates and update button text and class
+            if (endDate >= currentDate) {
+
+                statusButton.classList.remove('btn-success');
+
+                statusButton.classList.add('btn-danger');
+
+                statusButton.innerText = 'Ongoing';
+
+            } else {
+
+                statusButton.classList.remove('btn-danger');
+
+                statusButton.classList.add('btn-success');
+
+                statusButton.innerText = 'Completed';
+
+            }
+
+        });
+     
+    });
+    
+ // Initialize DataTable when modal is shown for agent performance
+    $('#agentperformance').on('shown.bs.modal', function () {
+
+    	 var buttons = [
+             {
+                 extend: 'pageLength',
+                 className: 'btn btn-warning'
+             },
+             {
+                 title: 'Data export',
+                 extend: 'copyHtml5',
+                 text: 'Copy',
+                 className: 'btn btn-secondary'
+             },
+             {
+                 extend: 'excelHtml5',
+                 text: 'Excel',
+                 className: 'btn btn-secondary'
+             },
+             {
+                 extend: 'csvHtml5',
+                 text: 'CSV',
+                 className: 'btn btn-secondary'
+             },
+             {
+                 extend: 'pdfHtml5',
+                 text: 'PDF',
+                 className: 'btn btn-secondary'
+             }
+         ];
+        if (!$.fn.DataTable.isDataTable('#agentperformanceDatatable')) {
+            $('#agentperformanceDatatable').DataTable({
+                dom: 'Bftip',               
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+                ],
+                scrollY: '30vh',
+                scrollX: true,  // Enable horizontal scrolling	
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: buttons,
+                fixedHeader: false,
+                autoWidth: false,
+                responsive: true,
+                searching: true,
+                select: false,
+                processing: false,
+            });
+        }
+        
+    });
+ 
+    
+    $('#viewCompletedModal').on('shown.bs.modal', function () {
+
+   	 var buttons = [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'excelHtml5',
+                text: 'Excel',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'csvHtml5',
+                text: 'CSV',
+                className: 'btn btn-secondary'
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary'
+            }
+        ];
+       if (!$.fn.DataTable.isDataTable('#CompletedDatatable')) {
+           $('#CompletedDatatable').DataTable({
+               dom: 'Bftip',               
+               columnDefs: [
+                   { targets: 'no-sort', orderable: false }
+               ],
+               lengthMenu: [
+                   [50, 100, 200, 500, -1],
+                   ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+               ],
+               scrollY: '50vh',
+               scrollX: true,  // Enable horizontal scrolling	
+               fixedColumns: {
+                   left: 1,
+                   right: 1
+               },
+               buttons: buttons,
+               fixedHeader: false,
+               autoWidth: false,
+               responsive: true,
+               searching: true,
+               select: false,
+               processing: false,
+           });
+       }
+       
+   });
+    
+ // Open modal for agent performance
+    function viewdetailsModal(campaignId, callsPerAgent) {
+        
+
+        $('#agentperformance').modal({
+            backdrop: 'static',
+            keyboard: false
+        });
+        $('#agentperformance').modal('show');
+
+        
+        $.ajax({
+            url: '/gcc/api/campaign/viewcampaignstatus?campaign_id=' + campaignId ,
+            type: 'GET',  
+            contentType: 'application/json',			                               
+            success: function (response) {
+                console.log("Response", response);
+                let tableBody = $('#agentperformanceDatatable tbody');
+                tableBody.empty();
+                
+                response.forEach((data, index) => {
+                	
+                	let row = `
+                        <tr>
+                            <td class="text-center">${index + 1}</td>
+                            <td class="text-center">${data.agent_name}</td>
+                            <td class="text-center">${data.Assigned_count || 0}</td>
+                            <td class="text-center">
+                            ${data.Complete_count > 0 ? 
+                                `<button class="btn btn-success" onclick="viewCompletedDetails(${data.campaign_id}, ${data.agent_id})">
+                                    ${data.Complete_count}
+                                </button>` 
+                                : data.Complete_count || 0}
+                       		 </td>                   
+                        	<td class="text-center">${data.Pending_count || 0}</td>
+                            <td class="text-center">${data.Percentage || 0}%</td>
+                            <td class="text-center">${data.Information_Given_count || 0}</td>
+                            <td class="text-center">${data.Unattended_count || 0}</td>
+                            <td class="text-center">${data.Call_back_later_count || 0}</td>
+                            <td class="text-center">${data.Switch_off_count || 0}</td>
+                            <td class="text-center">${data.Wrong_number_count || 0}</td>
+                            
+                        </tr>
+                    `;
+                    tableBody.append(row);
+                }); 
+            },
+            error: function (xhr, status, error) {
+                console.error('Error in Fetching Campaign:', error);
+            }
+        });
+        
+    }
+
+    //function for CompletedDetails
+    function viewCompletedDetails(campaignId,agentID)
+    {
+    	console.log('Comp-Campaign ID:', campaignId);
+        console.log('Comp-CompletedAgent:', agentID);
+        
+        $('#viewCompletedModal').modal({
+            backdrop: 'static',
+            keyboard: false
+        });
+        $('#viewCompletedModal').modal('show');
+        
+        $.ajax({
+            url: '/gcc/api/campaign/viewcompletedby?campaign_id=' + campaignId+"&agent_id="+agentID ,
+            type: 'GET',  
+            contentType: 'application/json',			                               
+            success: function (response) {
+                console.log("Response", response);
+                let CtableBody = $('#CompletedDatatable tbody');
+                CtableBody.empty();
+                
+                response.forEach((data, index) => {
+                	
+                	let row = `
+                		<tr>
+	                        <td class="text-center">${index + 1}</td>
+	                        <td class="text-center">${data.id}</td>
+	                        <td class="text-center">${data.name}</td>
+	                        <td class="text-center">${data.address}</td>
+	                        <td class="text-center">${data.cellnumber}</td>
+	                        <td class="text-center">${data.call_status}</td>
+	                        <td class="text-center">${data.remarks}</td>
+	                        <td class="text-center">${data.call_count}</td>
+	                        <td class="text-center">${data.updated_date}</td>
+                    	</tr>
+                    `;
+                	CtableBody.append(row);
+                }); 
+            },
+            error: function (xhr, status, error) {
+                console.error('Error in Fetching Completed Details:', error);
+            }
+        });
+    }
+
+ 
+ // Start campaign function
+    function startCampaign(callsPerAgent, campaignId) {
+        $.ajax({
+            url: '/gcc/api/campaign/startcampaign?campaign_id=' + campaignId + '&calls_per_agent=' + callsPerAgent, // URL to your Spring Boot controller
+            type: 'GET', // GET request
+            contentType: 'application/json',
+            success: function (response) {
+            	if (response && response.length > 0 && response != 0) {
+                    // If the response contains values
+                    console.log('Campaign started successfully:', response);
+					
+                    
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'Data transferred successfully!',
+                        icon: 'success',
+                        timer: 2000,
+                        showConfirmButton: false
+                    }).then(() => {
+                        location.reload(); // Reload after success
+                    });
+
+                } else {
+                    // If the response is empty, null, or 0
+                    Swal.fire({
+                        title: 'Error!',
+                        text: 'No data was transferred ,Please check Agents are assigned!.',
+                        icon: 'error',
+                        timer: 3000,
+                        showConfirmButton: true
+                    });
+                }
+            },
+            error: function (xhr, status, error) {
+                // Handle error scenario here
+                console.error('Error starting campaign:', error);
+                // You can show an error message to the user
+                Swal.fire({
+                    title: 'Error!',
+                    text: 'An error occurred while transferring data.',
+                    icon: 'error',
+                    timer: 3000,
+                    showConfirmButton: true
+                });
+            }
+        });
+    }
+ 
+ 
+</script>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenter/createcampaign.html b/target/classes/templates/modules/callcenter/createcampaign.html
new file mode 100644
index 0000000..1b18e5c
--- /dev/null
+++ b/target/classes/templates/modules/callcenter/createcampaign.html
@@ -0,0 +1,705 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.required{
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media (max-width: 767px) 
+{
+	#campaignrequestform label{
+		margin-top: 10px;
+	} 
+}
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="far fa-calendar-plus bg-blue"></i>
+									<div class="d-inline">
+										<h5>Create Campaign</h5>
+										<span>1913 Campaign creation</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">1913 Campaign</li>
+										<li class="breadcrumb-item active" aria-current="page">Create Campaign</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					<h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auot refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>
+					
+					<div class="row">
+					
+						<div class="col-md-12">
+							<div class="card" style="margin-top: 0px;">
+								<div class="card-header justify-content-between align-items-center">
+									<h3><b>Campaign Request Form</b></h3>
+									<button type="button" class="btn btn-warning btn-sm" id="downloadExcel"><i class="ik ik-download f-16 mr-2"></i>Template Download</button>
+								</div>
+								<div class="card-body">
+								
+									 <form id="campaignrequestform">
+					                    <div class="form-group">
+					                    	<div class="row">
+					                            <div class="col-sm-12 col-md-6">
+							                        <label for="name">Name<span class="required">*</span></label>
+							                        <input type="text" class="form-control" id="name" placeholder="Enter Name">
+					                    		</div>
+					                    
+					                     	 	<div class="col-sm-12 col-md-6">
+											    <label for="category">Category<span class="required">*</span></label>
+											    <select class="form-control" id="category">
+											        <option selected value="0">Select category</option>
+											    </select>
+											</div>
+
+					                    	</div>
+					                    </div>
+					                    <div class="form-group">
+					                    	<label><b><u>Event Date:</u></b></label>
+					                        <div class="row">
+					                            <div class="col-sm-12 col-md-6">
+					                                <label for="eventstartdate">From Date<span class="required">*</span></label>
+					                                <input type="date" class="form-control" id="eventstartdate">
+					                            </div>
+					                            <div class="col-sm-12 col-md-6">
+					                                <label for="eventenddate">To Date<span class="required">*</span></label>
+					                                <input type="date" class="form-control" id="eventenddate">
+					                            </div>
+					                        </div>
+					                    </div>
+					                   
+					                    
+					                    <div class="form-group">					                    	
+					                        <div class="row">
+					                            <div class="col-sm-12 col-md-6">
+					                                <label for="no_of_agent">No of Agents to be Assigned<span class="required">*</span></label>
+					                                <input type="number" class="form-control" id="no_of_agent">
+					                            </div>
+					                            <div class="col-sm-12 col-md-6">
+					                                <label for="no_of_calls">No of Calls to be Assigned (per Person)<span class="required">*</span></label>
+					                                <input type="number" class="form-control" id="no_of_calls">
+					                            </div>
+					                        </div>
+					                    </div>
+					                    
+					                    <div class="form-group">
+					                        <label for="description">Description<span class="required">*</span></label>
+					                        <textarea class="form-control" id="description" rows="2"></textarea>
+					                    </div>
+					                    
+					                     <div class="form-group">
+					                     	<label for="upload">Upload Excelsheet:<span class="required">*</span></label>
+					                     	<input type="file" class="form-control" id="fileInput">
+					                     	<small id="fileError" class="text-danger" style="display:none;">Only Excel files (.xlsx, .xls) are allowed.</small>
+					                     </div>
+					                    
+					                    <div class="form-group text-center">
+					                        <button type="submit" class="btn btn-primary " id="requestsubmit">Submit</button>
+					                        <button type="reset" class="btn btn-secondary ml-2" onclick="resetForm()">Reset</button>
+					                    </div>
+					                </form>
+								
+								</div>
+							</div>
+						</div>
+						
+						
+						
+						<div class="col-md-12">
+						    <div class="card">
+						        <div class="card-block">
+						        <div class="page-header-title" >
+									<h5 style="margin: 0;font-weight: bold;">Campaign Details</h5><hr>
+							   </div> 
+						        
+						            <div>
+						                <table id="CampaignDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+						                    <thead class="thead-dark">
+						                        <tr role="row">
+						                            <th class="text-center">S.No</th>                                                  
+						                            <th class="text-center">Name</th>
+						                            <th class="text-center">Event Date</th>
+						                            <th class="text-center">Description</th>
+						                            <th class="text-center">Agents Assigned</th>
+						                            <th class="text-center">Calls per Person</th>
+						                            <th class="text-center">Total Calls</th>                                                                                                       
+						                            <th class="text-center no-sort" width="%2">Action</th> 
+						                        </tr>
+						                    </thead>
+						                    <tbody>
+						                        <tr th:each="campaign, i: ${campaigns}">
+						                            <td th:text="${i.count}">0</td>
+						                            <td th:text="${campaign.campaign_name}"></td>
+						                            <td th:text="${campaign.event_dates}"></td>
+						                            <td th:text="${campaign.description}"></td>
+						                            <td th:text="${campaign.no_of_agents}" class="text-center"></td>
+						                            <td th:text="${campaign.calls_per_agent}" class="text-center"></td> 
+						                            <td th:text="${campaign.total_calls}" class="text-center"></td> 
+						                            <td class="text-center">
+													    <a href="#" th:onclick="return callEdit([[${campaign.campaign_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit">
+													        <i class="ik ik-edit f-16 mr-15 text-green"></i>
+													    </a>
+													</td>
+ 
+						                        </tr>
+						                    </tbody>
+						                    <tfoot class="thead-dark">
+						                        <tr>
+						                            <th class="text-center">S.No</th>                                                  
+						                            <th class="text-center">Name</th>
+						                            <th class="text-center">Event Date</th>
+						                            <th class="text-center">Description</th>
+						                            <th class="text-center">Agents Assigned</th>
+						                            <th class="text-center">Calls per Person</th> 
+						                            <th class="text-center">Total Calls</th>
+						                            <th class="text-center no-sort" width="%2">Action</th>                            
+						                        </tr>
+						                    </tfoot>
+						                </table>
+						            </div>
+						        </div>
+						    </div>
+						</div>
+
+						
+                      </div>
+                        
+                        
+                     </div>
+                </div>
+               
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+				</div>
+				
+               
+            
+		</div>
+		
+		<!-- The Modal -->
+		<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		    <div class="modal-dialog modal-lg" role="document">
+		        <div class="modal-content">
+		            <div class="modal-header">
+		                <h5 class="modal-title" id="editModalLabel">Edit Campaign</h5>
+		                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		                    <span aria-hidden="true">&times;</span>
+		                </button>
+		            </div>
+		            <div class="modal-body">
+		                <!-- Your form or content for editing can go here -->
+		                <form id="editForm" onsubmit="submitForm(event)" >
+		                   <input type="hidden"  name="campaign_id" id="campaign_id" />
+		                    <div class="form-group">
+					                        <label for="campaign_name">Name<span class="required">*</span></label>
+					                        <input type="text" class="form-control" id="campaign_name" placeholder="Enter Name" readonly="readonly">
+					                    </div>
+					                    <div class="form-group">
+					                    	<label><b><u>Event Date:</u></b></label>
+					                        <div class="row">
+					                            <div class="col">
+					                                <label for="start_date">From Date<span class="required">*</span></label>
+					                                <input type="date" class="form-control" id="start_date" onchange="setEndDateMin()" readonly="readonly" >
+					                            </div>
+					                            <div class="col">
+					                                <label for="end_date">To Date<span class="required">*</span></label>
+					                                <input type="date" class="form-control" id="end_date" required>
+					                            </div>
+					                        </div>
+					                    </div>
+					                   
+					                    
+					                    <div class="form-group">
+					                    	
+					                        <div class="row">
+					                            <div class="col">
+					                                <label for="no_of_agents">No of Agents to be Assigned<span class="required">*</span></label>
+					                                <input type="number" class="form-control" id="no_of_agents" required>
+					                            </div>
+					                            <div class="col">
+					                                <label for="calls_per_agent">No of Calls to be Assigned (per Person)<span class="required">*</span></label>
+					                                <input type="number" class="form-control" id="calls_per_agent" required>
+					                            </div>
+					                        </div>
+					                    </div>
+					                    
+					                    <div class="form-group">
+					                        <label for="description_modal">Description<span class="required">*</span></label>
+					                        <textarea class="form-control" id="description_modal" rows="2" readonly="readonly"></textarea>
+					                    </div>
+					                    
+					                    <div class="form-group text-center">				                       
+		                					<button type="submit" class="btn btn-primary"   id="editsubmit">Save changes</button>
+					                    </div>
+		                    
+		                </form>
+		            </div>
+		          
+		        </div>
+		    </div>
+		</div>
+				
+		
+                      
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>     
+        <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+        
+        <script type="text/javascript">
+        $(document).ready(function() {
+
+        	var table = $('#CampaignDatatable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                ],
+                scrollY: '50vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: [
+                    {
+                        extend: 'pageLength',
+                        className: 'btn btn-warning'
+                    },
+                    {
+                        title: 'Data export',
+                        extend: 'copyHtml5',
+                        text: 'Copy',
+                        className: 'btn btn-secondary',
+                        id: 'copyBtn'
+                    },
+                    {
+                        extend: 'excelHtml5',
+                        text: 'Excel',
+                        className: 'btn btn-secondary',
+                        id: 'excelBtn'
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        text: 'CSV',
+                        className: 'btn btn-secondary',
+                        id: 'csvBtn'
+                    },
+                    {
+                        extend: 'pdfHtml5',
+                        text: 'PDF',
+                        className: 'btn btn-secondary',
+                        id: 'pdfBtn'
+                    }
+                ],
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false
+            });
+        });
+        
+        document.addEventListener('DOMContentLoaded', function() {
+            const fromDate = document.getElementById('eventstartdate');
+            const toDate = document.getElementById('eventenddate');
+
+            // Initially disable the "To Date" field
+            toDate.disabled = true;
+
+            fromDate.addEventListener('change', function() {
+                if (fromDate.value) {
+                    // Enable the "To Date" field when "From Date" is selected
+                    toDate.disabled = false;
+
+                    // Get the selected "From Date"
+                    const selectedFromDate = new Date(fromDate.value);
+
+                 // Set the "To Date" minimum to the same day as the "From Date"
+                    const sameDayString = selectedFromDate.toISOString().split('T')[0];
+                    toDate.setAttribute('min', sameDayString);
+
+                    // Set the "To Date" value to the next day by default
+                    toDate.value = sameDayString;
+
+                } else {
+                    // Disable the "To Date" field if "From Date" is cleared
+                    toDate.disabled = true;
+                    toDate.value = ''; // Clear the "To Date" input
+                }
+            });
+        });
+        
+        function resetForm() {
+            document.getElementById('campaignrequestform').reset(); // Built-in reset functionality
+        }
+        
+        function setEndDateMin() {
+
+            var fromDate = document.getElementById('start_date').value;
+
+            document.getElementById('end_date').min = fromDate;
+
+        }
+
+ 	 	
+    	// excel format to download
+
+		document.getElementById('downloadExcel').addEventListener('click', function() {
+		    // Create a new workbook
+		    var wb = XLSX.utils.book_new();
+
+		    // Define the data for the worksheet
+
+		    var ws_data = [
+		        
+		        // Headers
+
+		        ["ID","NAME","ADDRESS","BALANCE AMOUNT","MOBILE NUMBER","TINY_URL"],
+
+		        // Add more data rows here as needed
+
+		    ];
+
+		    // Create the worksheet from the data
+
+		    var ws = XLSX.utils.aoa_to_sheet(ws_data);
+
+		    
+		
+		    // Optional: Set column widths for better readability
+
+		    ws['!cols'] = [
+
+		        { wch: 10 }, // ID
+
+		        { wch: 10 }, // NAME
+
+		        { wch: 20 }, // ADDRESS
+
+		        { wch: 15 }, // MOBILE NUMBER
+
+		        { wch: 20 }, // BALANCE AMOUNT
+
+		        { wch: 25 }, // TINY URL
+
+		    ];
+
+		    // Append the worksheet to the workbook
+
+		    XLSX.utils.book_append_sheet(wb, ws, 'Property Tax');
+
+		    // Export the workbook to an Excel file
+
+		    XLSX.writeFile(wb, 'PropertyTaxTemp.xlsx');
+
+		});
+    	
+    	
+    	
+		$(document).ready(function() {
+		    $('#requestsubmit').on('click', function(event) {
+		        event.preventDefault(); // Prevent form from submitting the traditional way
+
+		      $('#requestsubmit').attr('disabled', true).text('Submitting...');
+		        
+		     // Get form values
+		        var name = $('#name').val();
+		        var category = $('#category').val();
+		        var eventStartDate = $('#eventstartdate').val();
+		        var eventEndDate = $('#eventenddate').val();
+		        var noOfAgent = $('#no_of_agent').val();
+		        var noOfCalls = $('#no_of_calls').val();
+		        var description = $('#description').val();
+		        var fileInput = $('#fileInput')[0].files[0]; // Get the file from the input
+
+		        // Check for empty values and trigger Swal error
+		        if (!name || !category || !eventStartDate || !eventEndDate || !noOfAgent || !noOfCalls || !description || !fileInput) {
+		            Swal.fire({
+		                icon: 'info',
+		                title: 'Info',
+		                text: 'Please fill in all fields and upload a file before submitting.',
+		            });
+		            $('#requestsubmit').attr('disabled', false).text('Submit');
+		            return; // Stop form submission if any field is empty
+		        }
+
+		        // Create a FormData object to hold all form data, including the file
+		        var formData = new FormData();
+		        formData.append('name', name);
+		        formData.append('category', category);
+		        formData.append('eventstartdate', eventStartDate);
+		        formData.append('eventenddate', eventEndDate);
+		        formData.append('no_of_agent', noOfAgent);
+		        formData.append('no_of_calls', noOfCalls);
+		        formData.append('description', description);
+		        formData.append('file', fileInput); // Append the file to formData
+
+		        // Make an AJAX request to submit the form data
+		        $.ajax({
+		            url: '/gcc/api/campaign/save', // API endpoint to save form data
+		            type: 'POST',
+		            data: formData,
+		            processData: false, // Don't process the data (needed for FormData)
+		            contentType: false, // Don't set content type (needed for FormData)
+		            success: function(response) {
+		            								
+		                if (response.status === 'success') {
+		                    Swal.fire({
+		                        icon: 'success',
+		                        title: 'Success',
+		                        text: response.message
+		                    }).then((result) => {
+		                    	$('#requestsubmit').attr('disabled', false).text('Submit');
+	                            // Reload the page after the SweetAlert is closed
+		                    	if (result.isConfirmed) {
+		                            // Optional: Reset the form
+		                            $('#campaignrequestform')[0].reset();
+
+		                            // Send the categoryId to another AJAX call
+		                            let categoryId = parseInt(response.category_id, 10); // Extract the category_id from the response
+
+		                            // Make the second AJAX call with the categoryId
+		                            $.ajax({
+		                                url: `/gcc/api/campaign/getlastCampaignid`, // Replace with your actual endpoint
+		                                type: 'GET', // Or POST depending on your use case		                                
+		                                success: function(response) {
+		                                    console.log("Second AJAX call successful. Data: ", response);
+		                                    // Handle the success of the second AJAX call here
+		                                   
+		                                    $('#requestsubmit').attr('disabled', false).text('Submit');
+		                                   
+		                                    let campaignId = response[0].campaign_id;
+		                                    console.log('categoryId:', categoryId, 'campaignId:', campaignId); // Log values before AJAX call
+		                                 
+		                                    // Make the third AJAX call with both categoryId and campaignId
+		                                    $.ajax({
+		                                        url: '/gcc/api/agents/excel?categoryId='+categoryId+'&campaignId='+campaignId,
+		                                      
+		                                        type: 'GET',// Or POST depending on your use case		                                         
+		                                        success: function(response) {
+														//alert("third_ajax");
+		                                            console.log("Third AJAX call successful. Data: ", response);
+		                                            $('#requestsubmit').attr('disabled', false).text('Submit');
+		                                            
+		                                            // Handle the success of the third AJAX call here
+		                                        },
+		                                        error: function(xhr, status, error) {
+		                                            console.error('Error in third AJAX call:', error);
+		                                            $('#requestsubmit').attr('disabled', false).text('Submit');
+		                                        }
+		                                    });
+		                                    	                                    
+		                                    
+		                                },
+		                                error: function(xhr, status, error) {
+		                                    console.error('Error in second AJAX call:', error);
+		                                    $('#requestsubmit').attr('disabled', false).text('Submit');
+		                                }
+		                            });
+
+		                            // Reload the page after SweetAlert is closed
+		                            location.reload();
+		                        }
+		                    });
+
+		                    $('#requestsubmit').attr('disabled', false).text('Submit');
+		                    // Optionally reset the form
+		                    $('#campaignrequestform')[0].reset();
+		                } else {
+		                    Swal.fire({
+		                        icon: 'error',
+		                        title: 'Error',
+		                        text: 'Something went wrong. Please try again.'
+		                    });
+		                    $('#requestsubmit').attr('disabled', false).text('Submit');
+		                }
+		            },
+		            error: function(xhr, status, error) {
+		                Swal.fire({
+		                    icon: 'error',
+		                    title: 'Error',
+		                    text: 'An error occurred: ' + error
+		                });
+		                $('#requestsubmit').attr('disabled', false).text('Submit');
+		            }
+		        });
+		        
+		        
+		        //upload file data
+		        
+		    });
+		});
+		
+		//Update request form details 
+		$(document).ready(function () {
+			    // Function to open the edit modal and populate data
+			    window.callEdit = function (campaignId) {
+			        fetchCampaignDetails(campaignId);
+			      
+			        return false; // Prevent default anchor click behavior
+			    };
+			
+			    function fetchCampaignDetails(campaignId) {
+			        $.ajax({
+			            url: `/gcc/api/campaign/getCampaignDetailsbyId?campaign_id=${campaignId}`,
+			            type: 'GET',
+			            success: function (response) {
+							console.log(response);
+			                if (response) {
+			                    // Populate modal fields with data
+			                    $('#campaign_id').val(response.campaign_id);
+			                    $('#campaign_name').val(response.campaign_name); // Assuming the key in the response is 'campaign_name'
+			                    $('#start_date').val(response.start_date);
+			                    $('#end_date').val(response.end_date);
+			                    $('#no_of_agents').val(response.no_of_agents);
+			                    $('#calls_per_agent').val(response.calls_per_agent);
+			                    $('#description_modal').val(response.description);
+			                    
+			                    setEndDateMin();
+			                    // Open the modal
+			                    $('#editModal').modal('show');
+			                } else {
+			                    alert('Campaign details not found.');
+			                }
+			            },
+			            error: function (xhr, status, error) {
+			                console.error('Error fetching campaign details:', error);
+			                alert('An error occurred while fetching campaign details.');
+			            }
+			        });
+			    }
+			     window.submitForm = function (event) {
+			         event.preventDefault(); // Prevent the default form submission
+			        
+			       
+
+			        var campaignId = $('#campaign_id').val();
+			        var campaignName = $('#campaign_name').val();
+			        var startDate = $('#start_date').val();
+			        var endDate = $('#end_date').val();
+			        var noOfAgents = $('#no_of_agents').val();
+			        var callsPerAgent = $('#calls_per_agent').val();
+			        var description = $('#description_modal').val();
+
+
+
+			        $.ajax({
+			            url: '/gcc/api/campaign/updateCampaign',  // Endpoint without query parameters
+			            type: 'POST',
+			            data:  {
+			                campaign_id: campaignId,
+			                campaign_name: campaignName,
+			                start_date: startDate,
+			                end_date: endDate,
+			                no_of_agents: noOfAgents,
+			                calls_per_agent: callsPerAgent,
+			                description: description
+			            },  // Send all data as JSON
+			            success: function (response) {
+			                console.log('Campaign ID:',campaign_id);
+			                Swal.fire({
+			                    title: 'Success!',
+			                    text: response,  // Show the success message from the API response
+			                    icon: 'success',
+			                    confirmButtonText: 'OK'
+			                }).then((result) => {
+			                    if (result.isConfirmed) {
+			                        $('#editModal').modal('hide'); // Hide the modal
+			                        location.reload(); // Optionally reload the page to refresh the data
+			                    }
+			                });
+			            },
+			            error: function (xhr, status, error) {
+			                console.error('Error updating campaign details:', error);
+			                Swal.fire({
+			                    title: 'Error!',
+			                    text: 'An error occurred while updating campaign details.',
+			                    icon: 'error',
+			                    confirmButtonText: 'OK'
+			                });
+			            }
+			        });
+			    }
+ 
+		});
+
+
+	//hari category populate api
+	    // Fetch category dropdown from the server
+    $(document).ready(function() {
+        // Make an AJAX request to the API
+        $.ajax({
+            url: '/gcc/api/category/getcategory',
+            method: 'GET',
+            success: function(response) {
+                // Check if the response has data
+                if (response && response.length > 0) {
+                    // Populate the select dropdown with options
+                    var $categorySelect = $('#category');
+                    $.each(response, function(index, category) {
+                        $categorySelect.append(
+                            $('<option>', {
+                                value: category.category_id,
+                                text: category.category_name
+                            })
+                        );
+                    });
+                }
+            },
+            error: function(xhr, status, error) {
+                console.error('Error fetching categories:', error);
+            }
+        });
+    });
+	
+    document.getElementById('fileInput').addEventListener('change', function (event) {
+        var fileInput = event.target;
+        var filePath = fileInput.value;
+        var allowedExtensions = /(\.xlsx|\.xls)$/i;
+
+        if (!allowedExtensions.exec(filePath)) {
+            document.getElementById('fileError').style.display = 'block'; // Show error message
+            fileInput.value = ''; // Clear the input
+        } else {
+            document.getElementById('fileError').style.display = 'none'; // Hide error message
+        }
+    });
+		
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/agentgrievancedashboard.html b/target/classes/templates/modules/callcenterqaqc/agentgrievancedashboard.html
new file mode 100644
index 0000000..9bc101e
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/agentgrievancedashboard.html
@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+}
+</style>
+<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="far fa-calendar-plus bg-blue"></i>
+									<div class="d-inline">
+										<h5>Dashboard QAQC</h5>
+										<span>1913 QAQC Dashboard</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Agents
+											QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+
+
+					<div class="row mt-4">
+						<div class="col-12">
+							<div class="card">
+								<div
+									class="card-header d-flex justify-content-between align-items-center">
+									<h3 class="mb-0" style="font-weight: bold;font-size: large;"><span th:text="${agent[0]['agent_name']}" style="font-weight: bold;font-size: large;"></span>'s Task Dashboard</h3>
+									
+									
+
+									<form id="dateForm" method="POST"
+										action="/gcc/callcenterqaqc/agent/agentgrievancedashboard">
+										<div class="d-flex">
+											<!-- Date input fields for start and end dates -->
+
+											<input type="date" class="form-control mr-2" id="startDate"
+												name="startDate" placeholder="Start Date"> <input
+												type="date" class="form-control mr-2" id="endDate"
+												name="endDate" placeholder="Start Date">
+
+											<!-- Hidden form to submit the selected dates -->
+
+											<!-- 								        <input type="hidden" id="hiddenStartDate" name="startDate">
+								        <input type="hidden" id="hiddenEndDate" name="endDate"> -->
+											<button type="submit" class="btn btn-primary" id="searchBtn">Search</button>
+											<button type="button" class="btn btn-secondary ml-2"
+												id="resetBtn">Reset</button>
+										</div>
+									</form>
+
+
+
+								</div>
+								<div class="card-body">
+									<div class="row mt-2">
+										<!-- Total Calls Assigned -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center h-100">
+												<h6 class="text-facebook mb-2">
+													<b>Total Calls Assigned</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Total_Calls_assigned}">
+													<!-- Display Total Calls Assigned -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- QA&QC Calls -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center h-100">
+												<h6 class="text-facebook mb-2">
+													<b>QA&QC Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text=" ${details[0]?.Closed_Call_count}">
+													<!-- Display Closed Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- In-progress Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center h-100">
+												<h6 class="text-facebook mb-2">
+													<b>In-progress Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Inprogress_Call_count}">
+													<!-- Display In-progress Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- Follow-up Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center h-100">
+												<h6 class="text-facebook mb-2">
+													<b>Official Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Followup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center h-100">
+												<h6 class="text-facebook mb-2">
+													<b>Public Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.PublicFollowup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+									</div>
+								</div>
+
+
+								<div class="card-block">
+									<div class="card-header">
+										<h3 style="font-weight: bold;">Your Performance Overview</h3>
+									</div>
+									<div class="card-body">
+										<div class="row mt-2">
+											<div class="col-xl-3 col-md-6 col-sm-12">
+												<div class="card card-box p-3 text-center h-100">
+													<h6 class="text-facebook mb-2">
+														<b>Total Assigned</b>
+													</h6>
+													<h4 class="text-twitter fw-700 mt-3"
+														th:text="${details2[0]?.total_data_count}"></h4>
+												</div>
+											</div>
+											<!-- QA&QC Calls -->
+											<div class="col-xl-3 col-md-6 col-sm-12">
+												<div class="card card-box p-3 text-center h-100">
+													<h6 class="text-facebook mb-2">
+														<b>Finished</b>
+													</h6>
+													<h4 class="text-twitter fw-700 mt-3"
+														th:text="${details2[0]?.completed_count}"></h4>
+												</div>
+											</div>
+											<!-- In-progress Calls -->
+											<div class="col-xl-3 col-md-6 col-sm-12">
+												<div class="card card-box p-3 text-center h-100">
+													<h6 class="text-facebook mb-2">
+														<b>Pending</b>
+													</h6>
+													<h4 class="text-twitter fw-700 mt-3"
+														th:text="${details2[0]?.pending_count}"></h4>
+												</div>
+											</div>
+											<!-- Follow-up Calls -->
+											<div class="col-xl-3 col-md-6 col-sm-12">
+												<div class="card card-box p-3 text-center h-100">
+													<h6 class="text-facebook mb-2">
+														<b>Completion (%)</b>
+													</h6>
+													<h4 class="text-twitter fw-700 mt-3"
+														th:text="${details2[0]?.completed_percentage}+ '%'"></h4>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="row mt-4">
+						<div class="col-md-12">
+							<div class="card">
+							<div class="card-header"><h3><b>Your Task lists</b></h3></div>
+								<div class="card-body">
+									<div class="table-responsive">
+
+										<table id="AgentQaqcDatatable"
+											class="table table-striped table-bordered table-hover dataTable"
+											role="grid">
+											<thead class="thead-dark">
+												<tr>
+
+													<th rowspan="2" class="text-center">S.No</th>
+													<th rowspan="2" class="text-center">Task ID</th>
+													<th rowspan="2" class="text-center">Date</th>
+													<th rowspan="2" class="text-center">Type</th>
+													<th class="text-center" colspan="4">Performance</th>
+
+												</tr>
+												<tr>
+													<th class="text-center">Assigned</th>
+													<th class="text-center">Completed</th>
+													<th class="text-center">Pending</th>
+													<th class="text-center">Completion Percentage(%)</th>
+												</tr>
+											</thead>
+											<tbody>
+												<tr th:each="task, iterStat : ${tasks}">
+													<td class="text-center" th:text="${iterStat.count}"></td>
+													<td class="text-center" th:text="${task['taskid']}"></td>
+													<td class="text-center" th:text="${task['cdate']}"></td>
+													<td class="text-center" th:text="${task['call_category']}"></td>
+													<td class="text-center" th:text="${task['assigned']}"></td>
+													<td class="text-center" th:text="${task['callstaken']}"></td>
+													<td class="text-center" th:text="${task['pending']}"></td>
+													<td class="text-center"
+														th:text="${task['percentage'] + '%'}"></td>
+												</tr>
+											</tbody>
+										</table>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+				</div>
+			</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<!-- in the code use to show the download different type microsoft -->
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">	
+	 $(document).ready(function() {
+
+     	var table = $('#AgentQaqcDatatable').DataTable({
+             dom: 'Bftip',
+             columnDefs: [
+                 { targets: 'no-sort', orderable: false }
+             ],
+             lengthMenu: [
+                 [50, 100, 200, 500, -1],
+                 ['50 rows', '100 rows', '200 rows', 'Show all']
+             ],
+             scrollY: '50vh',
+             fixedColumns: {
+                 left: 1,
+                 right: 1
+             },
+             buttons: [
+                 {
+                     extend: 'pageLength',
+                     className: 'btn btn-warning'
+                 },
+                 {
+                     title: 'Data export',
+                     extend: 'copyHtml5',
+                     text: 'Copy',
+                     className: 'btn btn-secondary',
+                     id: 'copyBtn'
+                 },
+                 {
+                     extend: 'excelHtml5',
+                     text: 'Excel',
+                     className: 'btn btn-secondary',
+                     id: 'excelBtn'
+                 },
+                 {
+                     extend: 'csvHtml5',
+                     text: 'CSV',
+                     className: 'btn btn-secondary',
+                     id: 'csvBtn'
+                 },
+                 {
+                     extend: 'pdfHtml5',
+                     text: 'PDF',
+                     className: 'btn btn-secondary',
+                     id: 'pdfBtn'
+                 }
+             ],
+             fixedHeader: true,
+             autoWidth: true,
+             responsive: true,
+             searching: true,
+             select: false,
+             processing: false
+         });
+     	
+     	/* let startDate = new Date().toISOString().split('T')[0]; // Current date in 'yyyy-mm-dd' format
+     	let endDate = new Date().toISOString().split('T')[0];   // Current date in 'yyyy-mm-dd' format
+
+     	console.log("Start Date:", startDate);  // Logs the current date
+     	console.log("End Date:", endDate); */    // Logs the current date
+
+     	/* $.ajax({
+     	    url: '/gcc/api/callcenterqaqc/agent/getAgentDashboardData',
+     	    method: 'GET',
+     	    success: function(response) {
+     	        console.log("Response:", response);
+     	    },
+     	    error: function(xhr, status, error) {
+     	        console.error("Error occurred: ", error);
+     	    }
+     	}); */
+     	
+     	/* window.onload = function () {
+     	    // Get the current date in YYYY-MM-DD format
+     	    const today = new Date().toISOString().split('T')[0];
+     	    
+     	   //Set the hidden inputs with the current date
+     	    document.getElementById('hiddenStartDate').value = today;
+     	    document.getElementById('hiddenEndDate').value = today;
+     	    
+     	    // Set the date input fields to empty
+     	    document.getElementById('startDate').value = '';
+     	    document.getElementById('endDate').value = '';
+     	    
+     	    
+     	   // Retrieve stored start and end date from sessionStorage (only for the current session)
+     	    const storedStartDate = sessionStorage.getItem('startDate');
+     	    const storedEndDate = sessionStorage.getItem('endDate');
+
+     	    if (storedStartDate && storedEndDate) {
+     	        document.getElementById('startDate').value = storedStartDate;
+     	        document.getElementById('endDate').value = storedEndDate;
+     	    }
+     	}; */
+
+     	document.getElementById('resetBtn').addEventListener('click', function () {
+     	event.preventDefault();
+     	
+     	window.location.href="/gcc/callcenterqaqc/agent/agentgrievancedashboard";
+     	
+     	});
+     	
+     	
+     	document.getElementById('searchBtn').addEventListener('click', function (e) {
+     	    const startDate = document.getElementById('startDate').value;
+     	    const endDate = document.getElementById('endDate').value;
+
+     	    //console.log("startdate: ", startDate);
+     	    //console.log("enddate: ", endDate);
+
+     	    if (!startDate || !endDate) {
+     	        // Show SweetAlert if dates are missing
+     	        Swal.fire({
+     	            icon: 'warning', // Warning icon
+     	            title: 'Please select both start and end dates.',
+     	            showConfirmButton: true, // Show a confirmation button
+     	            timer: 3000 // Optional: Auto-close after 3 seconds
+     	        });
+
+     	        e.preventDefault(); // Prevent form submission if validation fails
+     	        return;
+     	    }
+     	   
+
+     	    // Submit the form to fetch the data based on the selected date range
+     	    document.getElementById('dateForm').submit(); // This will submit the form
+     	});
+
+     	
+     	
+     });
+	 
+	 
+
+	</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/agentqaqccalls.html b/target/classes/templates/modules/callcenterqaqc/agentqaqccalls.html
new file mode 100644
index 0000000..5f636ba
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/agentqaqccalls.html
@@ -0,0 +1,1024 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+	height: 140px;
+}
+
+@media ( max-width : 768px) {
+	.card-box {
+		text-align: center;
+	}
+}
+
+.custom-width1 {
+	width: 120px; /* Adjust the width as needed */
+}
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+    
+</style>
+<body>
+	<div class="wrapper">
+		<!-- Header -->
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<!-- Left Menu -->
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+			<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="ik ik-layers bg-blue"></i>
+									<div class="d-inline">
+										<h5>Agent's QAQC Calls</h5>
+										<span>1913 QAQC Call List</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="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Agents
+											QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">QAQC
+											Calls</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+				
+
+
+				<div class="row mt-4">
+
+					<div class="col-md-12">
+						<div class="card">
+
+							<div class="card-body">
+								<div class="page-header-title">
+									<h5 style="margin: 0; font-weight: bold;">Today Assigned
+										Calls</h5>
+								</div>
+								<div>
+									<div class="row mt-2">
+										<!-- Total Calls Assigned -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>Total Calls Assigned</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Total_Calls_assigned}">
+													<!-- Display Total Calls Assigned -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- QA&QC Calls -->
+										<div class="col-xl-3 col-md-6 col-sm-12"
+											style="background-color: aqua;">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>QA&QC Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text=" ${details[0]?.Closed_Call_count}">
+													<!-- Display Closed Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- In-progress Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4 ">
+												<h6 class="text-facebook mb-4">
+													<b>In-progress Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Inprogress_Call_count}">
+													<!-- Display In-progress Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- Follow-up Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Official Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Followup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Public Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.PublicFollowup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+									</div>
+
+
+
+									<div class="row mt-2">
+										<div class="col-md-12">
+											
+											<div class="card-header">
+												<h3 style="font-weight: bold;font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span><span th:text="${agent[0]['agent_name']}" style="font-weight: bold;font-size: large;"></span>'s QAQC Calls List</h3>
+
+											</div>
+
+											<div class="card-block">
+
+												<div class="col-md-12">
+													<div class="row">
+														<button id="primaryButton" class="btn btn-success">Non-Processed
+															Calls</button>
+														<button id="secondaryButton"
+															class="btn btn-secondary btn-custom ml-3">Processed
+															Calls</button>
+													</div>
+												</div>
+											</div>
+											<div class="card-body">
+
+												<div class="table-responsive" id="primaryTable"
+													style="display: block;">
+													<table id="QaqcDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Public Name</th>
+																<th class="text-center">Public PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+																<th class="text-center">Submit</th>
+															</tr>
+														</thead>
+														<tbody>
+
+															<!-- Thymeleaf loop for populating data -->
+															<tr th:each="call, iterStat : ${qaqcCallsLists}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_person_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_mobilenumber']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																
+																<td class="text-center">
+
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">
+																		View</button>
+																</td>
+																<td class="text-center"><select
+																	class="form-control form-control-sm action-select action-dropdown">
+																		<option value="" selected>Select</option>
+																		<option th:each="status : ${qaqcCallsActioin}"
+																			th:value="${status.call_status}"
+																			th:text="${status.call_status}"></option>
+																</select>
+																	<div class="schedule-call d-none mt-2">
+																		<input type="date" class="date-picker form-control"
+																			name="remainderDate">
+																	</div>            </td>
+
+																<td class="text-center"><input type="text"
+																	class="form-control form-control-sm "
+																	placeholder="Remarks"></td>
+
+																<td class="text-center">
+																	<button class="btn btn-primary btn-sm submit-btn submitid"
+																		th:data-id="${call['data_id']}"
+																		th:complaint-select="${call['complaint_number']}"
+																		th:data-name="${call['complaint_person_name']}"
+																		th:data-number="${call['complaint_mobilenumber']}"
+																		th:data-complaint-type="${call['complaint_type']}"
+																		onclick="submitComplaint(this)" disabled="disabled">
+																		Submit</button>
+																</td>
+															</tr>
+														</tbody>
+													</table>
+												</div>
+
+												<div class="table-responsive" id="secondaryTable"
+													style="display: none;">
+													<table id="SecondaryDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Public Name</th>
+																<th class="text-center">Public PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+															</tr>
+														</thead>
+														<tbody>
+															<tr th:each="call, iterStat : ${qaqcSubmitDetails}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_person_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_mobilenumber']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																<td class="text-center">
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">View</button>
+																</td>
+																<td th:text="${call['call_status']}" class="text-center"></td>
+																<td th:text="${call['remarks']}" class="text-center"></td>
+															</tr>
+														</tbody>
+													</table>
+												</div>
+
+
+											</div>
+											 </div>
+										</div>
+									</div>
+								</div>
+
+
+							</div>
+						</div>
+					</div>
+
+				</div>
+			</div>
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+
+	<!-- Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+
+	<script type="text/javascript">
+	
+	
+	$(document).ready(function () {
+				
+		$(document).on('click', '.btn-info', function () {
+	        // Retrieve the complaint number from the data attribute
+	        var complaintNumber = $(this).data('complaint-number');
+	        
+	        // Call the viewDetails function with the complaint number
+	        viewDetails(complaintNumber);
+	    });
+		
+		$('#primaryButton').addClass('btn-success').removeClass('btn-secondary');
+        $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+		
+		// Toggle functionality for Primary and Secondary buttons
+	    $('#primaryButton').click(function () {
+	        $('#primaryTable').show();
+	        $('#secondaryTable').hide();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+            $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#QaqcDatatable').DataTable().columns.adjust().draw();
+	    });
+
+	    $('#secondaryButton').click(function () {
+	        $('#primaryTable').hide();
+	        $('#secondaryTable').show();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+            $('#primaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#SecondaryDatatable').DataTable().columns.adjust().draw();
+
+	    });
+		
+	    var table = $('#QaqcDatatable').DataTable({
+	        dom: 'Bftip',
+	        columnDefs: [
+	            { targets: 'no-sort', orderable: false }
+	        ],
+	        lengthMenu: [
+	            [50, 100, 200, 500, -1],
+	            ['50 rows', '100 rows', '200 rows', 'Show all']
+	        ],
+	        scrollY: '50vh',
+	        fixedColumns: {
+	            left: 1,
+	            right: 1
+	        },
+	        buttons: [
+	            {
+	                extend: 'pageLength',
+	                className: 'btn btn-warning'
+	            },
+	            {
+	                title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn'
+	            }
+	        ],
+	        fixedHeader: true,
+	        autoWidth: true,
+	        responsive: true,
+	        searching: true,
+	        select: false,
+	        processing: false
+	    });
+	    
+	    var table1 = $('#SecondaryDatatable').DataTable({
+	        dom: 'Bftip',
+	        columnDefs: [
+	            { targets: 'no-sort', orderable: false }
+	        ],
+	        lengthMenu: [
+	            [50, 100, 200, 500, -1],
+	            ['50 rows', '100 rows', '200 rows', 'Show all']
+	        ],
+	        scrollY: '50vh',
+	        fixedColumns: {
+	            left: 1,
+	            right: 1
+	        },
+	        buttons: [
+	            {
+	                extend: 'pageLength',
+	                className: 'btn btn-warning'
+	            },
+	            {
+	                title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn'
+	            }
+	        ],
+	        fixedHeader: true,
+	        autoWidth: true,
+	        responsive: true,
+	        searching: true,
+	        select: false,
+	        processing: false
+	    });
+
+	    // Event listeners for changes in dropdown, remarks, and date picker
+	    $(document).on('change', '.action-dropdown', function () {
+	        const parentRow = $(this).closest('tr');
+	        const schedulerDiv = parentRow.find('.schedule-call');
+	        schedulerDiv.toggleClass('d-none', $(this).val() !== 'FOLLOWUP');
+	        validateFields(parentRow);
+	    });
+
+	    $(document).on('input', 'input[type="text"]', function () {
+	        const parentRow = $(this).closest('tr');
+	        validateFields(parentRow);
+	    });
+
+	    $(document).on('change', '.date-picker', function () {
+	        const parentRow = $(this).closest('tr');
+	        validateFields(parentRow);
+	    });
+
+	    // Validate function to check conditions for enabling/disabling submit button
+	    function validateFields(row) {
+	        const actionSelect = row.find('.action-select');
+	        const remarksInput = row.find('input[type="text"]');
+	        const submitButton = row.find('.submit-btn');
+	        const actionValue = actionSelect.val().trim();
+	        const remarksFilled = remarksInput.val().trim() !== "";
+
+	        const followUpSelected = actionValue === "FOLLOWUP";
+	        
+	        const remainderDateFilled = row.find('.date-picker').val()?.trim() !== ""; // Check if date is selected
+	        
+
+	     // Enable submit button based on conditions
+	        if (
+	            (followUpSelected && remainderDateFilled && remarksFilled) || (actionValue !== "FOLLOWUP" && actionValue !=="Select")|| (actionValue === "MOBILE_NUM"  && remarksFilled) // FOLLOWUP requires remainder date and remarks
+	        ) {
+	            submitButton.prop('disabled', false); // Enable submit button
+	        } else {
+	            submitButton.prop('disabled', true); // Disable submit button
+	        }
+	    }
+
+	 // Initial validation for all rows on page load
+		$("#QaqcDatatable tbody tr").each(function () {
+		    const row = $(this);
+		    const submitButton = row.find('.submit-btn');
+		    submitButton.prop('disabled', true); // Ensure submit button is initially disabled
+		    validateFields(row); // Validate fields for further interaction
+		});
+		
+		// Re-validate fields on input changes
+		$("#QaqcDatatable").on('input change', '.action-select, input[type="text"], .date-picker', function () {
+		    const row = $(this).closest('tr');
+		    validateFields(row);
+		});
+	});
+
+	
+	function submitComplaint(button) {
+		
+		// Access the userId from the hidden span
+	    var userId = document.getElementById('userIdSpan').textContent;
+
+	    // Log userId to the console
+	    //console.log('Inside submit button UserId=====:', userId);
+	    	    
+	    const row = button.parentNode.parentNode;
+
+	    // Fetch the values from the corresponding cells in the row
+	    const dataId = row.querySelector('.submit-btn').getAttribute('data-id'); // Fetch the data_id
+	    const action = row.querySelector('.action-select').value.trim(); // Fetch the action value
+	    const complaintNumber = row.querySelector('.complaint-select').innerText.trim(); // Fetch complaint number
+	    const remarks = row.querySelector('input[type="text"]').value.trim(); // Fetch the remarks value
+	    const remainderDate = row.querySelector('.date-picker')?.value.trim(); // Fetch the remainder date (if any) 
+	    
+	    
+ 		//console.log(row);
+		//console.log(dataId);
+		//console.log(action);
+		//console.log(complaintNumber);
+		//console.log(remarks);
+		//console.log(remainderDate);
+		$('.submitid').prop('disabled', true).text('Submitting...');
+		const name = button.getAttribute('data-name')?.trim() || "N/A";
+	    const cellnumber = button.getAttribute('data-number');
+	    const complaintTypeName = button.getAttribute('data-complaint-type');
+	    
+	  	    
+	    // Validation
+	    if (!dataId || !action || action === "Select") {
+	        Swal.fire("Error", "Action is required!", "error");
+	        $('.submitid').prop('disabled', false).text('Submit');
+	        return;
+	    }
+	    
+	    if (action !== 'COMPLETED' && remarks === "") {
+	        Swal.fire("Error", "Fill Remarks", "error");
+	        $('.submitid').prop('disabled', false).text('Submit');
+	        return;
+	    }
+
+	    if (action === 'FOLLOWUP' && remarks === "" && (!remainderDate || remainderDate === "")) {
+	        Swal.fire("Error", "Schedule Date is required for Follow-Up!", "error");
+	        $('.submitid').prop('disabled', false).text('Submit');
+	        return;
+	    }
+	    
+	    
+	    //console.log("outside ajax");
+	    // AJAX Request
+	     $.ajax({
+	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/update',
+	        type: 'POST',
+	        data: {
+	            dataId: dataId,
+	            complaintNumber: complaintNumber,
+	            action: action,
+	            remarks: remarks,
+	            remainderDate: remainderDate,
+	            userId:userId
+	        },	        
+	        success: function (response) {
+	            if (response === "Success") {
+	            	//console.log("Success");
+	            	
+            	    //console.log("name:",name);
+            	    //console.log("cellnumber:",cellnumber);
+            	    //console.log("complaintTypeName:",complaintTypeName);
+            	    //console.log("complaintNumber:",complaintNumber);
+					
+            	 //Validate cellnumber
+            	    if (!isNaN(cellnumber) || !cellnumber.trim() === "") {
+            	    	//console.log("valid phone number");
+            	    	$('.submitid').prop('disabled', false).text('Submit');
+            	    	// Trigger WhatsApp message functions based on action
+                	    if (action === "UNATTENDED") {
+                	    	//sendWhatsAppMessageUnattended(name, complaintNumber, cellnumber, complaintTypeName);
+                	    } else if (action === "REOPEN") {
+                	        sendWhatsAppMessageReopened(name, complaintNumber, cellnumber, complaintTypeName);
+                	   }
+            	    }            	   
+            	    else{
+            	    	console.log("not valid phone number,So message not sent");
+            	    }            	   
+	                Swal.fire({
+	                    icon: 'success',
+	                    title: 'Success',
+	                    text: 'Complaint updated successfully!',
+	                    allowOutsideClick: false, // Disable clicking outside the modal to close it
+	                    allowEscapeKey: false, // Disable escape key to close the modal
+	                    allowEnterKey: false, // Disable enter key to close the modal
+	                    showConfirmButton: true, // Ensure the confirm button is visible
+	                }).then((result) => {
+	                    if (result.isConfirmed) {
+	                    	console.log("ok button");
+	                    	$('.submitid').prop('disabled', false).text('Submit');
+                    	
+	                    	const table = $('#QaqcDatatable').DataTable();
+	                        
+	                        // Remove the row
+	                        table.row($(row)).remove();
+
+	                        // Reorder S.No column
+	                        table.rows().every(function (index) {
+	                            const row = this.node();
+	                            $(row).find('td:first-child').text(index + 1); // Update S.No
+	                        });
+
+	                        // Redraw the table
+	                        table.draw(false);
+	                	    
+	                    }
+	                });
+	            } 
+	            else if (response === "error") {
+	            	$('.submitid').prop('disabled', false).text('Submit');
+	            	Swal.fire("Error", "Failed to update complaint. Please try again later.", "error");
+	            }
+	            else {
+	            	$('.submitid').prop('disabled', false).text('Submit');
+	                Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+	            }
+	        },
+	        error: function (xhr, status, error) {
+	        	$('.submitid').prop('disabled', false).text('Submit');
+	            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+	        }
+	        
+	    });
+	    	    
+	    //$('.submitid').prop('disabled', false).text('Submit');
+	}
+	
+	function viewDetails(complaintNumber) {
+ 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+ 	    $('#detailsModal').modal('show');
+
+ 	    // Fetch the main complaint details
+ 	    $.ajax({
+ 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+ 	        type: 'GET',
+            data:{complaintNumber:complaintNumber},
+ 	        success: function (data) {
+ 	            //console.log('Complaint Data:', data);
+
+ 	            // Fetch agent response details
+ 	            $.ajax({
+ 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+ 	                type: 'GET',
+ 	                data: { complaintNumber },
+ 	                success: function (agentResponse) {
+ 	                    //console.log('Agent Response:', agentResponse);
+
+ 	                    // Use the logic for building complaint and agent details as HTML
+ 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+ 	                    // Update modal content
+ 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+ 	                },
+ 	                error: function () {
+ 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+ 	                }
+ 	            });
+ 	        },
+ 	        error: function () {
+ 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+ 	        }
+ 	    });
+ 	}
+
+ 	// Function to generate complaint and agent details HTML
+function generateDetailsHtml(data, agentResponse) {
+ 		
+ 	// Helper function to format date to yyyy-mm-dd
+         function formatDate(dateStr) {
+             if (!dateStr) return 'N/A';
+             const date = new Date(dateStr);
+             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+         }
+// Format complaint messages
+let messagesHtml = '';
+if (data.comments && data.comments.length > 0) {
+    data.comments.forEach((comment) => {
+        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+            : '<p style="color: red;">No image available for this comment.</p>';
+
+        messagesHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted">${comment.comment_date}</p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                        <p>${comment.message || 'No message available'}</p>
+                        <div class="user-image">${commentImageLink}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    messagesHtml = '<p>No comments available.</p>';
+}
+
+// Format agent responses
+let agentRepliedHtml = '';
+if (agentResponse.length > 0) {
+    agentResponse.forEach((agentItem) => {
+        agentRepliedHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+}
+
+// Check for user images
+const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+    : '<p style="color: red;">UserImages: No image available.</p>';
+
+// Combine all sections into the final HTML
+const detailsHtml = `
+    <div class="row">
+        <div class="col-md-12">
+            <h4>Complaint Person's Details:</h4>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <h4>Complaint Details:</h4>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+    <div class="col-6">
+        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+    </div>
+    
+</div>
+    <hr>
+    <h4>Complaint Messages:</h4>
+    ${messagesHtml}
+    <hr>
+    <h4>Agent Replied Messages:</h4>
+    ${agentRepliedHtml}
+    <hr>
+    ${imageLink}
+`;
+
+return detailsHtml;
+}
+
+
+	
+	//whatsapp message function for REOPENED
+    function sendWhatsAppMessageReopened(name,complaintNumber,cellnumber,complaintTypeName) {
+
+        //console.log('whatsapp CustomerMobile:', cellnumber);
+        
+        //console.log('name:',name);
+        //console.log('id:',complaintNumber);
+        //console.log('complainttype',complaintTypeName)
+        let viewstatus = "pgr" ;
+           // Send the WhatsApp message pending
+
+			    let msgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Dear+Mr%2FMs+${encodeURIComponent(name)}%2C%0A%0AYour+complaint+regarding+${encodeURIComponent(complaintTypeName)}+with+complaint+number+%2A${encodeURIComponent(complaintNumber)}%2A+has+been+reopened+based+on+your+feedback.%0AThe+relevant+department+is+working+to+resolve+the+issue%2C+and+updates+will+be+provided+on+the+progress.%0A%0AClick+the+button+below+to+view+your+complaint+status%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-Greater+Chennai+Corporation&buttonUrlParam=${encodeURIComponent(viewstatus)}`         		 
+			
+
+
+                 let tamilmsgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=%E0%AE%85%E0%AE%A9%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%2F%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%E0%AE%AE%E0%AE%A4%E0%AE%BF+${encodeURIComponent(name)}%2C%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%2A${encodeURIComponent(complaintNumber)}%2A%2C+${encodeURIComponent(complaintTypeName)}+%E0%AE%A4%E0%AF%8A%E0%AE%9F%E0%AE%B0%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%A9+%E0%AE%95%E0%AE%B0%E0%AF%81%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AF%81%E0%AE%95%E0%AE%B3%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%85%E0%AE%9F%E0%AE%BF%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%88%E0%AE%AF%E0%AE%BF%E0%AE%B2%E0%AF%8D%2C+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AF%8D+%E0%AE%AE%E0%AF%80%E0%AE%A3%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%A4%E0%AE%BF%E0%AE%B1%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%B3%E0%AF%8D%E0%AE%B3%E0%AE%A4%E0%AF%81.%0A%E0%AE%9A%E0%AE%AE%E0%AF%8D%E0%AE%AA%E0%AE%A8%E0%AF%8D%E0%AE%A4%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F+%E0%AE%A4%E0%AF%81%E0%AE%B1%E0%AF%88+%E0%AE%85%E0%AE%A4%E0%AE%BF%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%87%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%AA%E0%AE%BF%E0%AE%B0%E0%AE%9A%E0%AF%8D%E0%AE%9A%E0%AE%BF%E0%AE%A9%E0%AF%88%E0%AE%AF%E0%AF%88+%E0%AE%A4%E0%AF%80%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%AA%E0%AE%A3%E0%AE%BF%E0%AE%AF%E0%AE%BE%E0%AE%B1%E0%AF%8D%E0%AE%B1%E0%AE%BF+%E0%AE%B5%E0%AE%B0%E0%AF%81%E0%AE%95%E0%AE%BF%E0%AE%A9%E0%AF%8D%E0%AE%B1%E0%AE%A9%E0%AE%B0%E0%AF%8D.%0A%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A4%E0%AE%B1%E0%AF%8D%E0%AE%AA%E0%AF%8B%E0%AE%A4%E0%AF%88%E0%AE%AF+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88+%E0%AE%95%E0%AF%81%E0%AE%B1%E0%AE%BF%E0%AE%A4%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%95%E0%AE%B5%E0%AE%B2%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%B5%E0%AE%BF%E0%AE%B0%E0%AF%88%E0%AE%B5%E0%AE%BF%E0%AE%B2%E0%AF%8D+%E0%AE%AE%E0%AF%87%E0%AE%B2%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%B5%E0%AE%B4%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D.%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88%E0%AE%AF%E0%AF%88%E0%AE%AA%E0%AF%8D+%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%95%E0%AF%80%E0%AE%B4%E0%AF%87+%E0%AE%89%E0%AE%B3%E0%AF%8D%E0%AE%B3+%E0%AE%AA%E0%AF%8A%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AE%BE%E0%AE%A9%E0%AF%88%E0%AE%95%E0%AF%8D+%E0%AE%95%E0%AE%BF%E0%AE%B3%E0%AE%BF%E0%AE%95%E0%AF%8D+%E0%AE%9A%E0%AF%86%E0%AE%AF%E0%AF%8D%E0%AE%AF%E0%AE%B5%E0%AF%81%E0%AE%AE%E0%AF%8D%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-%E0%AE%AA%E0%AF%86%E0%AE%B0%E0%AF%81%E0%AE%A8%E0%AE%95%E0%AE%B0+%E0%AE%9A%E0%AF%86%E0%AE%A9%E0%AF%8D%E0%AE%A9%E0%AF%88+%E0%AE%AE%E0%AE%BE%E0%AE%A8%E0%AE%95%E0%AE%B0%E0%AE%BE%E0%AE%9F%E0%AF%8D%E0%AE%9A%E0%AE%BF.&buttonUrlParam=${encodeURIComponent(viewstatus)}`
+         		    		
+         		    		
+         		  
+           $.ajax({
+               url: '/gcc/qaqc/api/whatsapp/send-whatsapp-message', // Replace with your service path
+               type: 'POST',
+               data: { msgUrl: msgUrl,
+             	  tamilmsgUrl: tamilmsgUrl},
+               success: function(response) {
+                   //console.log('WhatsApp message sent successfully', response);
+                   console.log('success');
+                   //alert('WhatsApp message sent!');
+                  
+               },
+               error: function(xhr, status, error) {
+                   console.error('Error sending WhatsApp message:', error);
+                   //alert('Failed to send WhatsApp message.');
+                   
+                   Swal.fire({
+                               title: 'Error!',
+                               text: 'Message Not sent!',
+                               icon: 'error',
+                               timer: 2000,
+                               showConfirmButton: false
+                           })
+               }
+           });
+       }
+	
+
+    
+  //whatsapp message function for unattended
+    function sendWhatsAppMessageUnattended(name,complaintNumber,cellnumber,complaintTypeName) {
+
+        console.log('whatsapp CustomerMobile:', cellnumber);
+        
+        console.log('name:',name);
+        console.log('complaintNumber:',complaintNumber);
+        console.log('complainttype',complaintTypeName)
+        let viewstatus = "pgr" ;
+           // Send the WhatsApp message pending
+                    
+       		   
+              let msgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Dear+Mr%2FMs+${encodeURIComponent(name)}%2C%0A%0AAttempts+were+made+to+reach+you+by+phone+regarding+your+complaint+on+${encodeURIComponent(complaintTypeName)}+%28Complaint+ID%3A+%2A${encodeURIComponent(complaintNumber)}%2A%29+from+GCC%E2%80%99s+1913+helpline.+The+issue+has+been+addressed.+%0A%0AIf+you+are+satisfied+with+the+resolution%2C+please+reply+%2A%E2%80%98YES.%E2%80%99%2A+Otherwise%2C+reply+%2A%E2%80%98NO%2C%E2%80%99%2A+and+the+complaint+will+be+reopened.%0A%0AClick+the+button+below+to+view+your+complaint+status%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-Greater+Chennai+Corporation&buttonUrlParam=${encodeURIComponent(viewstatus)}`   		 
+             
+
+         		   
+              let tamilmsgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=%E0%AE%85%E0%AE%A9%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%2F%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%E0%AE%AE%E0%AE%A4%E0%AE%BF+${encodeURIComponent(name)}%2C%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AF%8D+%2A${encodeURIComponent(complaintNumber)}%2A+%E0%AE%A4%E0%AF%8A%E0%AE%9F%E0%AE%B0%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%95+1913+%E0%AE%AE%E0%AE%BE%E0%AE%A8%E0%AE%95%E0%AE%B0%E0%AE%BE%E0%AE%9F%E0%AF%8D%E0%AE%9A%E0%AE%BF+%E0%AE%89%E0%AE%A4%E0%AE%B5%E0%AE%BF+%E0%AE%8E%E0%AE%A3%E0%AF%8D%E0%AE%A3%E0%AE%BF%E0%AE%B2%E0%AE%BF%E0%AE%B0%E0%AF%81%E0%AE%A8%E0%AF%8D%E0%AE%A4%E0%AF%81+%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%88+%E0%AE%A4%E0%AF%8A%E0%AE%9F%E0%AE%B0%E0%AF%8D%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AF%8A%E0%AE%B3%E0%AF%8D%E0%AE%B3+%E0%AE%AE%E0%AF%81%E0%AE%AF%E0%AE%B1%E0%AF%8D%E0%AE%9A%E0%AE%BF%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AF%8B%E0%AE%AE%E0%AF%8D.%0A%E0%AE%A8%E0%AF%80%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%85%E0%AE%B3%E0%AE%BF%E0%AE%A4%E0%AF%8D%E0%AE%A4+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AF%81%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%BE%E0%AE%A9+%E0%AE%A4%E0%AF%80%E0%AE%B0%E0%AF%8D%E0%AE%B5%E0%AF%81+%E0%AE%A8%E0%AE%BF%E0%AE%B1%E0%AF%88%E0%AE%B5%E0%AF%87%E0%AE%B1%E0%AF%8D%E0%AE%B1%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%B3%E0%AF%8D%E0%AE%B3%E0%AE%A4%E0%AF%81.%0A%E0%AE%87%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AF%80%E0%AE%B0%E0%AF%8D%E0%AE%B5%E0%AF%81+%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%81%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AF%81+%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%E0%AE%AA%E0%AF%8D%E0%AE%A4%E0%AE%BF%E0%AE%95%E0%AE%B0%E0%AE%AE%E0%AE%BE%E0%AE%95+%E0%AE%87%E0%AE%B0%E0%AF%81%E0%AE%A8%E0%AF%8D%E0%AE%A4%E0%AE%BE%E0%AE%B2%E0%AF%8D%2C+%2A%E2%80%98%E0%AE%86%E0%AE%AE%E0%AF%8D%E2%80%99%2A+%E0%AE%8E%E0%AE%A9+%E0%AE%AA%E0%AE%A4%E0%AE%BF%E0%AE%B2%E0%AE%B3%E0%AE%BF%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%B5%E0%AF%81%E0%AE%AE%E0%AF%8D%3B+%E0%AE%87%E0%AE%B2%E0%AF%8D%E0%AE%B2%E0%AF%88%E0%AE%AF%E0%AF%86%E0%AE%A9%E0%AE%BF%E0%AE%B2%E0%AF%8D%2C+%2A%E2%80%98%E0%AE%87%E0%AE%B2%E0%AF%8D%E0%AE%B2%E0%AF%88%E2%80%99%2A+%E0%AE%8E%E0%AE%A9+%E0%AE%AA%E0%AE%A4%E0%AE%BF%E0%AE%B2%E0%AE%B3%E0%AE%BF%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%B5%E0%AF%81%E0%AE%AE%E0%AF%8D.%0A%E0%AE%A8%E0%AF%80%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E2%80%98%E0%AE%87%E0%AE%B2%E0%AF%8D%E0%AE%B2%E0%AF%88%E2%80%99+%E0%AE%8E%E0%AE%A9+%E0%AE%AA%E0%AE%A4%E0%AE%BF%E0%AE%B2%E0%AE%B3%E0%AE%BF%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AE%BE%E0%AE%B2%E0%AF%8D%2C+%E0%AE%87%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AF%8D+%E0%AE%AE%E0%AF%80%E0%AE%A3%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%A4%E0%AE%BF%E0%AE%B1%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D.%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88%E0%AE%AF%E0%AF%88%E0%AE%AA%E0%AF%8D+%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%95%E0%AF%80%E0%AE%B4%E0%AF%87+%E0%AE%89%E0%AE%B3%E0%AF%8D%E0%AE%B3+%E0%AE%AA%E0%AF%8A%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AE%BE%E0%AE%A9%E0%AF%88%E0%AE%95%E0%AF%8D+%E0%AE%95%E0%AE%BF%E0%AE%B3%E0%AE%BF%E0%AE%95%E0%AF%8D+%E0%AE%9A%E0%AF%86%E0%AE%AF%E0%AF%8D%E0%AE%AF%E0%AE%B5%E0%AF%81%E0%AE%AE%E0%AF%8D%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-%E0%AE%AA%E0%AF%86%E0%AE%B0%E0%AF%81%E0%AE%A8%E0%AE%95%E0%AE%B0+%E0%AE%9A%E0%AF%86%E0%AE%A9%E0%AF%8D%E0%AE%A9%E0%AF%88+%E0%AE%AE%E0%AE%BE%E0%AE%A8%E0%AE%95%E0%AE%B0%E0%AE%BE%E0%AE%9F%E0%AF%8D%E0%AE%9A%E0%AE%BF.&buttonUrlParam=${encodeURIComponent(viewstatus)}`
+         		    		 
+         		    		
+           $.ajax({
+               url: '/gcc/qaqc/api/whatsapp/send-whatsapp-message', // Replace with your service path
+               type: 'POST',
+               data: { msgUrl: msgUrl,
+             	  tamilmsgUrl: tamilmsgUrl},
+               success: function(response) {
+                   console.log('WhatsApp message sent successfully', response);
+                   console.log('success');
+                   //alert('WhatsApp message sent!');
+                  
+               },
+               error: function(xhr, status, error) {
+                   console.error('Error sending WhatsApp message:', error);
+                   //alert('Failed to send WhatsApp message.');
+                   
+                   Swal.fire({
+                               title: 'Error!',
+                               text: 'Message Not sent!',
+                               icon: 'error',
+                               timer: 2000,
+                               showConfirmButton: false
+                           })
+               }
+           });
+       }
+	
+	</script>
+
+	<script>
+	//Swal.fire("Success", "Complaint updated successfully!", "success");
+
+    // Remove the row from the table dynamically
+    /* const table = $('#QaqcDatatable').DataTable();
+    table.row($(row)).remove().draw(false);
+    location.reload(); */
+	</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/agentqaqcfollowupcalls.html b/target/classes/templates/modules/callcenterqaqc/agentqaqcfollowupcalls.html
new file mode 100644
index 0000000..7d58354
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/agentqaqcfollowupcalls.html
@@ -0,0 +1,899 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+	height: 140px;
+}
+
+@media ( max-width : 768px) {
+	.card-box {
+		text-align: center;
+	}
+}
+
+.custom-width1 {
+	width: 120px; /* Adjust the width as needed */
+}
+
+.custom-width2 {
+	width: 100px; /* Adjust the width as needed */
+}
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+    
+</style>
+<body>
+	<div class="wrapper">
+		<!-- Header -->
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<!-- Left Menu -->
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+			<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="ik ik-layers bg-blue"></i>
+									<div class="d-inline">
+										<h5>Agent's Followup Calls</h5>
+										<span>1913 Followup Call List</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="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Agents
+											QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Official FollowUp Calls</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+				
+
+
+				<div class="row mt-4">
+
+					<div class="col-md-12">
+						<div class="card">
+
+							<div class="card-body">
+								<div class="page-header-title">
+									<h5 style="margin: 0; font-weight: bold;">Today Assigned
+										Calls</h5>
+								</div>
+								<div>
+									<div class="row mt-2">
+										<!-- Total Calls Assigned -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>Total Calls Assigned</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Total_Calls_assigned}">
+													<!-- Display Total Calls Assigned -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- QA&QC Calls -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>QA&QC Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text=" ${details[0]?.Closed_Call_count}">
+													<!-- Display Closed Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- In-progress Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4 ">
+												<h6 class="text-facebook mb-4">
+													<b>In-progress Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Inprogress_Call_count}">
+													<!-- Display In-progress Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- Follow-up Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12" style="background-color: aqua;">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Official Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Followup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Public Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.PublicFollowup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+									</div>
+
+
+									<div class="row mt-2">
+										<div class="col-md-12">
+
+											<div class="card-header">
+												<h3 style="font-weight: bold; font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span>
+													<span th:text="${agent[0]['agent_name']}"
+														style="font-weight: bold; font-size: large;"></span>'s
+													Followup Calls List
+												</h3>
+											</div>
+
+											<div class="card-block">
+												<div class="col-md-12 ">
+													<div class="row">
+														<button id="primaryButton" class="btn btn-success">Non-Processed
+															Calls</button>
+														<button id="secondaryButton"
+															class="btn btn-secondary btn-custom ml-3">Processed
+															Calls</button>
+													</div>
+												</div>
+											</div>
+
+											<div class="card-body">
+
+												<div class="table-responsive" id="primaryTable"
+													style="display: block;">
+													<table id="QaqcDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<!-- <th class="text-center">Name</th>
+														<th class="text-center">Phone No</th> -->
+																<th class="text-center">Officer Name</th>
+																<th class="text-center">Officer PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center custom-width2">View</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+																<th class="text-center">Submit</th>
+															</tr>
+
+														</thead>
+														<tbody>
+
+															<!-- Thymeleaf loop for populating data -->
+
+
+															<tr th:each="call, iterStat : ${qaqcfollowuplists}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<!-- <td th:text="${call['complaint_person_name']}"
+															class="text-center"></td>
+														<td th:text="${call['complaint_mobilenumber']}"
+															class="text-center"></td> -->
+																<td th:text="${call['official_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_mobilenum']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+
+																<!-- view function -->
+
+																<td class="text-center">
+																	<button type="button" class="btn btn-info details-btn"
+																		style="margin-bottom: 3px"
+																		th:data-complaint-number="${call['complaint_number']}">
+																		View</button>
+																</td>
+
+
+																<td class="text-center"><select
+																	class="form-control form-control-sm action-select action-dropdown">
+																		<option value="" selected>Select</option>
+																		<option th:each="status : ${qaqccategorylists}"
+																			th:value="${status.call_status}"
+																			th:text="${status.call_status}"></option>
+																</select>
+																	<div class="schedule-call d-none mt-2">
+																		<!-- <span class="schedule-text">Schedule Call</span> -->
+																		<input type="date" class="date-picker form-control"
+																			name="remainderDate">
+																	</div></td>
+																<td class="text-center"><input type="text"
+																	class="form-control form-control-sm"
+																	placeholder="Remarks"></td>
+																<td class="text-center">
+																	<button class="btn btn-primary btn-sm submit-btn submitid"
+																		th:data-id="${call['data_id']}"
+																		onclick="submitComplaint(this)" disabled="disabled">
+																		Submit</button>
+																</td>
+															</tr>
+
+														</tbody>
+													</table>
+
+												</div>
+
+												<div class="table-responsive" id="secondaryTable"
+													style="display: none;">
+													<table id="SecondaryDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Officer Name</th>
+																<th class="text-center">Officer PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+															</tr>
+														</thead>
+														<tbody>
+															<tr th:each="call, iterStat : ${fcSubmitDetails}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_mobilenum']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																<td class="text-center">
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">View</button>
+																</td>
+																<td th:text="${call['call_status']}" class="text-center"></td>
+																<td th:text="${call['remarks']}" class="text-center"></td>
+															</tr>
+														</tbody>
+													</table>
+												</div>
+
+
+											</div>
+										 </div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+					</div>
+				</div>
+			</div>
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<!--Details button Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+	<script type="text/javascript">
+ 
+ 
+ 
+$(document).ready(function() {
+	
+	
+	 $(document).on('click', '.btn-info', function () {
+	        // Retrieve the complaint number from the data attribute
+	        var complaintNumber = $(this).data('complaint-number');
+	        
+	        // Call the viewDetails function with the complaint number
+	        viewDetails(complaintNumber);
+	    });
+	 
+	 $('#primaryButton').addClass('btn-success').removeClass('btn-secondary');
+     $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+		
+		// Toggle functionality for Primary and Secondary buttons
+	    $('#primaryButton').click(function () {
+	        $('#primaryTable').show();
+	        $('#secondaryTable').hide();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+         $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#QaqcDatatable').DataTable().columns.adjust().draw();
+	    });
+
+	    $('#secondaryButton').click(function () {
+	        $('#primaryTable').hide();
+	        $('#secondaryTable').show();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+         $('#primaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#SecondaryDatatable').DataTable().columns.adjust().draw();
+
+	    });
+				
+
+    	     	var table = $('#QaqcDatatable').DataTable({
+    	             dom: 'Bftip',
+    	             columnDefs: [
+    	                 { targets: 'no-sort', orderable: false }
+    	             ],
+    	             lengthMenu: [
+    	                 [50, 100, 200, 500, -1],
+    	                 ['50 rows', '100 rows', '200 rows', 'Show all']
+    	             ],
+    	             scrollY: '50vh',
+    	             fixedColumns: {
+    	                 left: 1,
+    	                 right: 1
+    	             },
+    	             buttons: [
+    	                 {
+    	                     extend: 'pageLength',
+    	                     className: 'btn btn-warning'
+    	                 },
+    	                 {
+    	                     title: 'Data export',
+    	                     extend: 'copyHtml5',
+    	                     text: 'Copy',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'copyBtn'
+    	                 },
+    	                 {
+    	                     extend: 'excelHtml5',
+    	                     text: 'Excel',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'excelBtn'
+    	                 },
+    	                 {
+    	                     extend: 'csvHtml5',
+    	                     text: 'CSV',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'csvBtn'
+    	                 },
+    	                 {
+    	                     extend: 'pdfHtml5',
+    	                     text: 'PDF',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'pdfBtn'
+    	                 }
+    	             ],
+    	             fixedHeader: true,
+    	             autoWidth: true,
+    	             responsive: true,
+    	             searching: true, // Enable default search functionality
+    	             select: false,
+    	             processing: false
+    	             
+    	         });
+    	     	
+    	     	var table1 = $('#SecondaryDatatable').DataTable({
+    		        dom: 'Bftip',
+    		        columnDefs: [
+    		            { targets: 'no-sort', orderable: false }
+    		        ],
+    		        lengthMenu: [
+    		            [50, 100, 200, 500, -1],
+    		            ['50 rows', '100 rows', '200 rows', 'Show all']
+    		        ],
+    		        scrollY: '50vh',
+    		        fixedColumns: {
+    		            left: 1,
+    		            right: 1
+    		        },
+    		        buttons: [
+    		            {
+    		                extend: 'pageLength',
+    		                className: 'btn btn-warning'
+    		            },
+    		            {
+    		                title: 'Data export',
+    		                extend: 'copyHtml5',
+    		                text: 'Copy',
+    		                className: 'btn btn-secondary',
+    		                id: 'copyBtn'
+    		            },
+    		            {
+    		                extend: 'excelHtml5',
+    		                text: 'Excel',
+    		                className: 'btn btn-secondary',
+    		                id: 'excelBtn'
+    		            },
+    		            {
+    		                extend: 'csvHtml5',
+    		                text: 'CSV',
+    		                className: 'btn btn-secondary',
+    		                id: 'csvBtn'
+    		            },
+    		            {
+    		                extend: 'pdfHtml5',
+    		                text: 'PDF',
+    		                className: 'btn btn-secondary',
+    		                id: 'pdfBtn'
+    		            }
+    		        ],
+    		        fixedHeader: true,
+    		        autoWidth: true,
+    		        responsive: true,
+    		        searching: true,
+    		        select: false,
+    		        processing: false
+    		    });
+    	     	
+    	     	 // // Event listeners for changes in dropdown, remarks, and date picker
+    	        $(document).on('change', '.action-dropdown', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            const schedulerDiv = parentRow.find('.schedule-call');
+    	            schedulerDiv.toggleClass('d-none', $(this).val() !== 'FOLLOWUP');
+    	            validateFields(parentRow);
+    	        });
+
+    	        $(document).on('input', 'input[type="text"]', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            validateFields(parentRow);
+    	        });
+
+    	        $(document).on('change', '.date-picker', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            validateFields(parentRow);
+    	        });
+
+    	        // Validate function to check conditions for enabling/disabling submit button
+    	        function validateFields(row) {
+    	            const actionSelect = row.find('.action-select');
+    	            const remarksInput = row.find('input[type="text"]');
+    	            const submitButton = row.find('.submit-btn');
+    	            const actionValue = actionSelect.val().trim();
+    	            const remarksFilled = remarksInput.val().trim() !== "";
+
+    	            const followUpSelected = actionValue === "FOLLOWUP";
+    	            const remainderDateFilled = row.find('.date-picker').val()?.trim() !== ""; // Check if date is selected
+
+    	           // Enable submit button based on conditions
+			        if (
+			            (followUpSelected && remainderDateFilled && remarksFilled) || (actionValue !== "FOLLOWUP" && actionValue !=="Select") // FOLLOWUP requires remainder date and remarks
+			        ) {
+			            submitButton.prop('disabled', false); // Enable submit button
+			        } else {
+			            submitButton.prop('disabled', true); // Disable submit button
+			        }
+    	        }
+
+    	     // Initial validation for all rows on page load
+    	    	$("#QaqcDatatable tbody tr").each(function () {
+    	    	    const row = $(this);
+    	    	    const submitButton = row.find('.submit-btn');
+    	    	    submitButton.prop('disabled', true); // Ensure submit button is initially disabled
+    	    	    validateFields(row); // Validate fields for further interaction
+    	    	});
+    	    	
+    	    	// Re-validate fields on input changes
+    	    	$("#QaqcDatatable").on('input change', '.action-select, input[type="text"], .date-picker', function () {
+    	    	    const row = $(this).closest('tr');
+    	    	    validateFields(row);
+    	    	});
+    	        
+    	
+    	     });
+    	     
+  
+function submitComplaint(button) {
+	var userId = document.getElementById('userIdSpan').textContent;
+	const row = button.parentNode.parentNode;
+
+    // Fetch the values from the corresponding cells in the row
+    const dataId = row.querySelector('.submit-btn').getAttribute('data-id'); // Fetch the data_id
+    const action = row.querySelector('.action-select').value.trim(); // Fetch the action value
+    const complaintNumber = row.querySelector('.complaint-select').innerText.trim(); // Fetch complaint number
+    const remarks = row.querySelector('input[type="text"]').value.trim(); // Fetch the remarks value
+    const remainderDate = row.querySelector('.date-picker')?.value.trim(); // Fetch the remainder date (if any)
+	/* console.log(row);
+	console.log(dataId);
+	console.log(action);
+	console.log(complaintNumber);
+	console.log(remarks);
+	console.log(remainderDate); */
+	
+    $('.submitid').prop('disabled', true).text('Submitting...');
+    
+    // Validation
+    if (!dataId || !action || action === "Select") {
+        Swal.fire("Error", "Action is required!", "error");
+        $('.submitid').prop('disabled', false).text('Submit');
+        return;
+    }
+
+    if (action === 'FOLLOWUP' && remarks === "" && (!remainderDate || remainderDate === "")) {
+        Swal.fire("Error", "Schedule Date is required for Follow-Up!", "error");
+        $('.submitid').prop('disabled', false).text('Submit');
+        return;
+    }
+
+    // AJAX Request
+    $.ajax({
+        url: '/gcc/api/callcenterqaqc/agent/followupcalls/update',
+        type: 'POST',
+        data: {
+            dataId: dataId,
+            complaintNumber: complaintNumber,
+            action: action,
+            remarks: remarks,
+            remainderDate: remainderDate,
+            userId:userId
+        },       
+        success: function (response) {
+            if (response === "Success") {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Complaint updated successfully!',
+                    allowOutsideClick: false, // Disable clicking outside the modal to close it
+                    allowEscapeKey: false, // Disable escape key to close the modal
+                    allowEnterKey: false, // Disable enter key to close the modal
+                    showConfirmButton: true, // Ensure the confirm button is visible
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                    	$('.submitid').prop('disabled', false).text('Submit');
+                   	
+                    	const table = $('#QaqcDatatable').DataTable();
+                        
+                        // Remove the row
+                        table.row($(row)).remove();
+
+                        // Reorder S.No column
+                        table.rows().every(function (index) {
+                            const row = this.node();
+                            $(row).find('td:first-child').text(index + 1); // Update S.No
+                        });
+
+                        // Redraw the table
+                        table.draw(false);
+                    }
+                });
+            } 
+            else if (response === "error") {
+            	$('.submitid').prop('disabled', false).text('Submit');
+            	Swal.fire("Error", "Failed to update complaint. Please try again later.", "error");
+            }
+            else {
+            	$('.submitid').prop('disabled', false).text('Submit');            	
+                Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+            }
+        },
+        error: function (xhr, status, error) {
+        	$('.submitid').prop('disabled', false).text('Submit');        	
+            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+        }
+        
+    });
+}
+	     
+    //view button script
+          
+	function viewDetails(complaintNumber) {
+ 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+ 	    $('#detailsModal').modal('show');
+
+ 	    // Fetch the main complaint details
+ 	    $.ajax({
+ 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+ 	        type: 'GET',
+            data:{complaintNumber:complaintNumber},
+ 	        success: function (data) {
+ 	            //console.log('Complaint Data:', data);
+
+ 	            // Fetch agent response details
+ 	            $.ajax({
+ 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+ 	                type: 'GET',
+ 	                data: { complaintNumber },
+ 	                success: function (agentResponse) {
+ 	                    //console.log('Agent Response:', agentResponse);
+
+ 	                    // Use the logic for building complaint and agent details as HTML
+ 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+ 	                    // Update modal content
+ 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+ 	                },
+ 	                error: function () {
+ 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+ 	                }
+ 	            });
+ 	        },
+ 	        error: function () {
+ 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+ 	        }
+ 	    });
+ 	}
+
+ 	// Function to generate complaint and agent details HTML
+function generateDetailsHtml(data, agentResponse) {
+ 		
+ 	// Helper function to format date to yyyy-mm-dd
+         function formatDate(dateStr) {
+             if (!dateStr) return 'N/A';
+             const date = new Date(dateStr);
+             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+         }
+// Format complaint messages
+let messagesHtml = '';
+if (data.comments && data.comments.length > 0) {
+    data.comments.forEach((comment) => {
+        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+            : '<p style="color: red;">No image available for this comment.</p>';
+
+        messagesHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted">${comment.comment_date}</p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                        <p>${comment.message || 'No message available'}</p>
+                        <div class="user-image">${commentImageLink}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    messagesHtml = '<p>No comments available.</p>';
+}
+
+// Format agent responses
+let agentRepliedHtml = '';
+if (agentResponse.length > 0) {
+    agentResponse.forEach((agentItem) => {
+        agentRepliedHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+}
+
+// Check for user images
+const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+    : '<p style="color: red;">UserImages: No image available.</p>';
+
+// Combine all sections into the final HTML
+const detailsHtml = `
+    <div class="row">
+        <div class="col-md-12">
+            <h4>Complaint Person's Details:</h4>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <h4>Complaint Details:</h4>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+    <div class="col-6">
+        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+    </div>
+    
+</div>
+    <hr>
+    <h4>Complaint Messages:</h4>
+    ${messagesHtml}
+    <hr>
+    <h4>Agent Replied Messages:</h4>
+    ${agentRepliedHtml}
+    <hr>
+    ${imageLink}
+`;
+
+return detailsHtml;
+}
+            
+
+
+
+  
+</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/agentqaqcinprogresscalls.html b/target/classes/templates/modules/callcenterqaqc/agentqaqcinprogresscalls.html
new file mode 100644
index 0000000..74bdc4a
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/agentqaqcinprogresscalls.html
@@ -0,0 +1,903 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+	height: 140px;
+}
+
+@media ( max-width : 768px) {
+	.card-box {
+		text-align: center;
+	}
+}
+
+/* .d-none {
+		display: none;
+	} */
+.custom-width1 {
+	width: 120px; /* Adjust the width as needed */
+}
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+    
+</style>
+<body>
+	<div class="wrapper">
+		<!-- Header -->
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<!-- Left Menu -->
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+			<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="ik ik-layers bg-blue"></i>
+									<div class="d-inline">
+										<h5>Agent's Inprogress Calls</h5>
+										<span>1913 Inprogress Call List</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="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Agents
+											QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Inprogress
+											Calls</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+				
+
+				
+
+				<div class="row mt-4">
+
+					<div class="col-md-12">
+						<div class="card">
+
+							<div class="card-body">
+								<div class="page-header-title">
+									<h5 style="margin: 0; font-weight: bold;">Today Assigned
+										Calls</h5>
+								</div>
+								<div>
+									<div class="row mt-2">
+										<!-- Total Calls Assigned -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>Total Calls Assigned</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Total_Calls_assigned}">
+													<!-- Display Total Calls Assigned -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- QA&QC Calls -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>QA&QC Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text=" ${details[0]?.Closed_Call_count}">
+													<!-- Display Closed Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- In-progress Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12" style="background-color: aqua;">
+											<div class="card card-box p-3 text-center mt-4 ">
+												<h6 class="text-facebook mb-4">
+													<b>In-progress Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Inprogress_Call_count}">
+													<!-- Display In-progress Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- Follow-up Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Official Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Followup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Public Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.PublicFollowup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+									</div>
+
+
+									<div class="row mt-2">
+										<div class="col-md-12">
+
+											<div class="card-header">
+												<h3 style="font-weight: bold; font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span>
+													<span th:text="${agent[0]['agent_name']}"
+														style="font-weight: bold; font-size: large;"></span>'s
+													Inprogress Calls List
+												</h3>
+											</div>
+
+											<div class="card-block">
+												<div class="col-md-12">
+													<div class="row">
+														<button id="primaryButton" class="btn btn-success">Non-Processed
+															Calls</button>
+														<button id="secondaryButton"
+															class="btn btn-secondary btn-custom ml-3">Processed
+															Calls</button>
+													</div>
+												</div>
+											</div>
+
+											<div class="card-body">
+
+												<div class="table-responsive" id="primaryTable"
+													style="display: block;">
+													<table id="QaqcDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr>
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Officer Name</th>
+																<th class="text-center">Phone No</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">Type</th>
+																<!-- Added Date Column -->
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+																<th class="text-center">Submit</th>
+															</tr>
+														</thead>
+														<tbody>
+															<!-- Rows will be dynamically populated using AJAX -->
+
+															<!-- Thymeleaf loop for populating data -->
+															<tr th:each="call, iterStat : ${inprogresslists}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_mobilenum']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																<td th:text="${call['call_category']}"
+																	class="text-center"></td>
+																<td class="text-center">
+
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">
+																		View</button>
+																</td>
+
+
+																<td class="text-center"><select
+																	class="form-control form-control-sm action-select action-dropdown">
+																		<option value="" selected>Select</option>
+																		<option th:each="status : ${qaqcactionlists}"
+																			th:value="${status.call_status}"
+																			th:text="${status.call_status}"></option>
+																</select>
+																	<div class="schedule-call d-none mt-2">
+																		<!-- <span class="schedule-text">Schedule Call</span> -->
+																		<input type="date" class="date-picker form-control"
+																			name="remainderDate">
+																	</div>             </td>
+
+																<td class="text-center"><input type="text"
+																	class="form-control form-control-sm"
+																	placeholder="Remarks"></td>
+
+
+																<td class="text-center">
+																	<button class="btn btn-primary btn-sm submit-btn submitid"
+																		th:data-id="${call['data_id']}"
+																		onclick="submitComplaint(this)" disabled="disabled">
+																		Submit</button>
+																</td>
+
+															</tr>
+															<!-- End loop -->
+
+														</tbody>
+													</table>
+												</div>
+
+												<div class="table-responsive" id="secondaryTable"
+													style="display: none;">
+													<table id="SecondaryDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Officer Name</th>
+																<th class="text-center">Officer PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+															</tr>
+														</thead>
+														<tbody>
+															<tr th:each="call, iterStat : ${inSubmitDetails}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_mobilenum']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																<td class="text-center">
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">View</button>
+																</td>
+																<td th:text="${call['call_status']}" class="text-center"></td>
+																<td th:text="${call['remarks']}" class="text-center"></td>
+															</tr>
+														</tbody>
+													</table>
+												</div>
+
+
+											</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+							</div>
+
+						</div>
+					</div>
+
+				</div>
+			</div>
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	<!-- Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">
+	
+	$(document).ready(function () {
+		
+		$(document).on('click', '.btn-info', function () {
+	        // Retrieve the complaint number from the data attribute
+	        var complaintNumber = $(this).data('complaint-number');
+	        var complaintDept = $(this).data('complaint-department');
+	        var complaintMode = $(this).data('complaint-mode');
+	        // Call the viewDetails function with the complaint number
+	        viewDetails(complaintNumber);
+	    });
+		
+		$('#primaryButton').addClass('btn-success').removeClass('btn-secondary');
+        $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+		
+		// Toggle functionality for Primary and Secondary buttons
+	    $('#primaryButton').click(function () {
+	        $('#primaryTable').show();
+	        $('#secondaryTable').hide();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+            $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#QaqcDatatable').DataTable().columns.adjust().draw();
+	    });
+
+	    $('#secondaryButton').click(function () {
+	        $('#primaryTable').hide();
+	        $('#secondaryTable').show();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+            $('#primaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#SecondaryDatatable').DataTable().columns.adjust().draw();
+
+	    });
+		
+    var table = $('#QaqcDatatable').DataTable({
+        dom: 'Bftip',
+        columnDefs: [
+            { targets: 'no-sort', orderable: false }
+        ],
+        lengthMenu: [
+            [50, 100, 200, 500, -1],
+            ['50 rows', '100 rows', '200 rows', 'Show all']
+        ],
+        scrollY: '50vh',
+        fixedColumns: {
+            left: 1,
+            right: 1
+        },
+        buttons: [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary',
+                id: 'copyBtn'
+            },
+            {
+                extend: 'excelHtml5',
+                text: 'Excel',
+                className: 'btn btn-secondary',
+                id: 'excelBtn'
+            },
+            {
+                extend: 'csvHtml5',
+                text: 'CSV',
+                className: 'btn btn-secondary',
+                id: 'csvBtn'
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary',
+                id: 'pdfBtn'
+            }
+        ],
+        fixedHeader: true,
+        autoWidth: true,
+        responsive: true,
+        searching: true,
+        select: false,
+        processing: true
+    });
+    
+    var table1 = $('#SecondaryDatatable').DataTable({
+        dom: 'Bftip',
+        columnDefs: [
+            { targets: 'no-sort', orderable: false }
+        ],
+        lengthMenu: [
+            [50, 100, 200, 500, -1],
+            ['50 rows', '100 rows', '200 rows', 'Show all']
+        ],
+        scrollY: '50vh',
+        fixedColumns: {
+            left: 1,
+            right: 1
+        },
+        buttons: [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary',
+                id: 'copyBtn'
+            },
+            {
+                extend: 'excelHtml5',
+                text: 'Excel',
+                className: 'btn btn-secondary',
+                id: 'excelBtn'
+            },
+            {
+                extend: 'csvHtml5',
+                text: 'CSV',
+                className: 'btn btn-secondary',
+                id: 'csvBtn'
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary',
+                id: 'pdfBtn'
+            }
+        ],
+        fixedHeader: true,
+        autoWidth: true,
+        responsive: true,
+        searching: true,
+        select: false,
+        processing: false
+    });
+    
+    
+ // // Event listeners for changes in dropdown, remarks, and date picker
+    $(document).on('change', '.action-dropdown', function () {
+        const parentRow = $(this).closest('tr');
+        const schedulerDiv = parentRow.find('.schedule-call');
+        schedulerDiv.toggleClass('d-none', $(this).val() !== 'FOLLOWUP');
+        validateFields(parentRow);
+    });
+
+    $(document).on('input', 'input[type="text"]', function () {
+        const parentRow = $(this).closest('tr');
+        validateFields(parentRow);
+    });
+
+    $(document).on('change', '.date-picker', function () {
+        const parentRow = $(this).closest('tr');
+        validateFields(parentRow);
+    });
+
+    // Validate function to check conditions for enabling/disabling submit button
+    function validateFields(row) {
+        const actionSelect = row.find('.action-select');
+        const remarksInput = row.find('input[type="text"]');
+        const submitButton = row.find('.submit-btn');
+        const actionValue = actionSelect.val().trim();
+        const remarksFilled = remarksInput.val().trim() !== "";
+
+        const followUpSelected = actionValue === "FOLLOWUP";
+        const remainderDateFilled = row.find('.date-picker').val()?.trim() !== ""; // Check if date is selected
+
+        
+        // Enable submit button based on conditions
+	        if (
+	            (followUpSelected && remainderDateFilled && remarksFilled) || (actionValue !== "FOLLOWUP" && actionValue !=="Select") // FOLLOWUP requires remainder date and remarks
+	        ) {
+	            submitButton.prop('disabled', false); // Enable submit button
+	        } else {
+	            submitButton.prop('disabled', true); // Disable submit button
+	        }
+    }
+
+    // Initial validation for all rows on page load
+	$("#QaqcDatatable tbody tr").each(function () {
+	    const row = $(this);
+	    const submitButton = row.find('.submit-btn');
+	    submitButton.prop('disabled', true); // Ensure submit button is initially disabled
+	    validateFields(row); // Validate fields for further interaction
+	});
+	
+	// Re-validate fields on input changes
+	$("#QaqcDatatable").on('input change', '.action-select, input[type="text"], .date-picker', function () {
+	    const row = $(this).closest('tr');
+	    validateFields(row);
+	});
+
+    
+});
+	
+	
+	function submitComplaint(button) {
+		
+		var userId = document.getElementById('userIdSpan').textContent;
+		const row = button.parentNode.parentNode;
+		
+		 const dataId = row.querySelector('.submit-btn').getAttribute('data-id'); // Fetch the data_id
+		    const action = row.querySelector('.action-select').value.trim(); // Fetch the action value
+		    const complaintNumber = row.querySelector('.complaint-select').innerText.trim(); // Fetch complaint number
+		    const remarks = row.querySelector('input[type="text"]').value.trim(); // Fetch the remarks value
+		    const remainderDate = row.querySelector('.date-picker')?.value.trim(); // Fetch the remainder date (if any)
+		    /* console.log(row);
+			console.log(dataId);
+			console.log(action);
+			console.log(complaintNumber);
+			console.log(remarks);
+			console.log(remainderDate); */
+			
+		
+			//console.log("outside ajax");
+			
+	    $('.submitid').prop('disabled', true).text('Submitting...');
+	    // Validation
+	    if (!dataId || !action || action === "Select") {
+	        Swal.fire("Error", "Action is required!", "error");
+	        $('.submitid').prop('disabled', false).text('Submit');
+	        return;
+	    }
+
+	    if (action === 'FOLLOWUP' && remarks === "" && (!remainderDate || remainderDate === "")) {
+	        Swal.fire("Error", "Schedule Date is required for Follow-Up!", "error");
+	        $('.submitid').prop('disabled', false).text('Submit');
+	        return;
+	    }
+	    
+		if(action === 'MOBILE_NUM' && remarks === "")
+			    	
+	    {
+	    	Swal.fire("Error", "remarks  is required for Mobile_Num!", "error");
+	    	$('.submitid').prop('disabled', false).text('Submit');
+	    	return;
+	    }
+
+	    // AJAX Request
+	    $.ajax({
+	        url: '/gcc/api/callcenterqaqc/agent/inprogresscalls/update',
+	        type: 'POST',
+	        data: {
+	            dataId: dataId,
+	            complaintNumber: complaintNumber,
+	            action: action,
+	            remarks: remarks,
+	            remainderDate: remainderDate,
+	            userId:userId
+	        },	        
+	        success: function (response) {
+	            if (response === "Success") {
+	            	//console.log("inside ajax success");
+	                Swal.fire({
+	                    icon: 'success',
+	                    title: 'Success',
+	                    text: 'Complaint updated successfully!',
+	                    allowOutsideClick: false, // Disable clicking outside the modal to close it
+	                    allowEscapeKey: false, // Disable escape key to close the modal
+	                    allowEnterKey: false, // Disable enter key to close the modal
+	                    showConfirmButton: true, // Ensure the confirm button is visible
+	                }).then((result) => {
+	                    if (result.isConfirmed) {
+	                    	//console.log("ok button");
+	                    	$('.submitid').prop('disabled', false).text('Submit');
+							const table = $('#QaqcDatatable').DataTable();
+	                        
+	                        // Remove the row
+	                        table.row($(row)).remove();
+
+	                        // Reorder S.No column
+	                        table.rows().every(function (index) {
+	                            const row = this.node();
+	                            $(row).find('td:first-child').text(index + 1); // Update S.No
+	                        });
+
+	                        // Redraw the table
+	                        table.draw(false);
+	                    }
+	                });
+	            } 
+	            else if (response === "error") {
+	            	$('.submitid').prop('disabled', false).text('Submit');
+	            	Swal.fire("Error", "Failed to update complaint. Please try again later.", "error");
+	            }
+	            else {
+	            	$('.submitid').prop('disabled', false).text('Submit');
+	                Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+	            }
+	        },
+	        error: function (xhr, status, error) {
+	        	$('.submitid').prop('disabled', false).text('Submit');
+	            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+	        }
+	        	        
+	    });
+	    
+	   // $('.submitid').prop('disabled', false).text('Submit');
+	    
+	}
+	
+	
+	function viewDetails(complaintNumber) {
+ 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+ 	    $('#detailsModal').modal('show');
+
+ 	    // Fetch the main complaint details
+ 	    $.ajax({
+ 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+ 	        type: 'GET',
+            data:{complaintNumber:complaintNumber},
+ 	        success: function (data) {
+ 	            //console.log('Complaint Data:', data);
+
+ 	            // Fetch agent response details
+ 	            $.ajax({
+ 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+ 	                type: 'GET',
+ 	                data: { complaintNumber },
+ 	                success: function (agentResponse) {
+ 	                    //console.log('Agent Response:', agentResponse);
+
+ 	                    // Use the logic for building complaint and agent details as HTML
+ 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+ 	                    // Update modal content
+ 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+ 	                },
+ 	                error: function () {
+ 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+ 	                }
+ 	            });
+ 	        },
+ 	        error: function () {
+ 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+ 	        }
+ 	    });
+ 	}
+
+ 	// Function to generate complaint and agent details HTML
+function generateDetailsHtml(data, agentResponse) {
+ 		
+ 	// Helper function to format date to yyyy-mm-dd
+         function formatDate(dateStr) {
+             if (!dateStr) return 'N/A';
+             const date = new Date(dateStr);
+             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+         }
+// Format complaint messages
+let messagesHtml = '';
+if (data.comments && data.comments.length > 0) {
+    data.comments.forEach((comment) => {
+        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+            : '<p style="color: red;">No image available for this comment.</p>';
+
+        messagesHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted">${comment.comment_date}</p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                        <p>${comment.message || 'No message available'}</p>
+                        <div class="user-image">${commentImageLink}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    messagesHtml = '<p>No comments available.</p>';
+}
+
+// Format agent responses
+let agentRepliedHtml = '';
+if (agentResponse.length > 0) {
+    agentResponse.forEach((agentItem) => {
+        agentRepliedHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+}
+
+// Check for user images
+const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+    : '<p style="color: red;">UserImages: No image available.</p>';
+
+// Combine all sections into the final HTML
+const detailsHtml = `
+    <div class="row">
+        <div class="col-md-12">
+            <h4>Complaint Person's Details:</h4>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <h4>Complaint Details:</h4>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+    <div class="col-6">
+        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+    </div>
+    
+</div>
+    <hr>
+    <h4>Complaint Messages:</h4>
+    ${messagesHtml}
+    <hr>
+    <h4>Agent Replied Messages:</h4>
+    ${agentRepliedHtml}
+    <hr>
+    ${imageLink}
+`;
+
+return detailsHtml;
+}
+
+
+
+</script>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/agentqaqcpublicfollowupcalls.html b/target/classes/templates/modules/callcenterqaqc/agentqaqcpublicfollowupcalls.html
new file mode 100644
index 0000000..96ceb30
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/agentqaqcpublicfollowupcalls.html
@@ -0,0 +1,969 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+	height: 140px;
+}
+
+@media ( max-width : 768px) {
+	.card-box {
+		text-align: center;
+	}
+}
+
+.custom-width1 {
+	width: 120px; /* Adjust the width as needed */
+}
+
+.custom-width2 {
+	width: 100px; /* Adjust the width as needed */
+}
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+    
+</style>
+<body>
+	<div class="wrapper">
+		<!-- Header -->
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<!-- Left Menu -->
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+			<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="ik ik-layers bg-blue"></i>
+									<div class="d-inline">
+										<h5>Agent's Followup Calls</h5>
+										<span>1913 Followup Call List</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="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Agents
+											QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Public FollowUp Calls</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+				
+
+
+				<div class="row mt-4">
+
+					<div class="col-md-12">
+						<div class="card">
+
+							<div class="card-body">
+								<div class="page-header-title">
+									<h5 style="margin: 0; font-weight: bold;">Today Assigned
+										Calls</h5>
+								</div>
+								<div>
+									<div class="row mt-2">
+										<!-- Total Calls Assigned -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>Total Calls Assigned</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Total_Calls_assigned}">
+													<!-- Display Total Calls Assigned -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- QA&QC Calls -->
+										<div class="col-xl-3 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-4">
+													<b>QA&QC Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text=" ${details[0]?.Closed_Call_count}">
+													<!-- Display Closed Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- In-progress Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12">
+											<div class="card card-box p-3 text-center mt-4 ">
+												<h6 class="text-facebook mb-4">
+													<b>In-progress Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-4"
+													th:text="${details[0]?.Inprogress_Call_count}">
+													<!-- Display In-progress Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<!-- Follow-up Calls -->
+										<div class="col-xl-2 col-md-6 col-sm-12" >
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Official Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.Followup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+										<div class="col-xl-2 col-md-6 col-sm-12" style="background-color: aqua;">
+											<div class="card card-box p-3 text-center mt-4">
+												<h6 class="text-facebook mb-2">
+													<b>Public Follow-up Calls</b>
+												</h6>
+												<h4 class="text-twitter fw-700 mt-3"
+													th:text="${details[0]?.PublicFollowup_Call_count}">
+													<!-- Display Follow-up Calls Count -->
+
+												</h4>
+											</div>
+										</div>
+									</div>
+
+
+									<div class="row mt-2">
+										<div class="col-md-12">
+
+											<div class="card-header">
+												<h3 style="font-weight: bold; font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span>
+													<span th:text="${agent[0]['agent_name']}"
+														style="font-weight: bold; font-size: large;"></span>'s
+													Followup Calls List
+												</h3>
+											</div>
+
+											<div class="card-block">
+												<div class="col-md-12 ">
+													<div class="row">
+														<button id="primaryButton" class="btn btn-success">Non-Processed
+															Calls</button>
+														<button id="secondaryButton"
+															class="btn btn-secondary btn-custom ml-3">Processed
+															Calls</button>
+													</div>
+												</div>
+											</div>
+
+											<div class="card-body">
+
+												<div class="table-responsive" id="primaryTable"
+													style="display: block;">
+													<table id="QaqcDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>																
+																<th class="text-center">Public Name</th>
+																<th class="text-center">Public PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center custom-width2">View</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+																<th class="text-center">Submit</th>
+															</tr>
+
+														</thead>
+														<tbody>
+
+															<!-- Thymeleaf loop for populating data -->
+
+
+															<tr th:each="call, iterStat : ${qaqcfollowuplists}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_person_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_mobilenumber']}"
+																	class="text-center"></td>
+																<!-- <td th:text="${call['official_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['official_mobilenum']}"
+																	class="text-center"></td> -->
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+
+																<!-- view function -->
+
+																<td class="text-center">
+																	<button type="button" class="btn btn-info details-btn"
+																		style="margin-bottom: 3px"
+																		th:data-complaint-number="${call['complaint_number']}">
+																		View</button>
+																</td>
+
+
+																<td class="text-center"><select
+																	class="form-control form-control-sm action-select action-dropdown">
+																		<option value="" selected>Select</option>
+																		<option th:each="status : ${qaqccategorylists}"
+																			th:value="${status.call_status}"
+																			th:text="${status.call_status}"></option>
+																</select>
+																	<div class="schedule-call d-none mt-2">
+																		<!-- <span class="schedule-text">Schedule Call</span> -->
+																		<input type="date" class="date-picker form-control"
+																			name="remainderDate">
+																	</div></td>
+																<td class="text-center"><input type="text"
+																	class="form-control form-control-sm"
+																	placeholder="Remarks"></td>
+																<td class="text-center">
+																	<button class="btn btn-primary btn-sm submit-btn submitid"
+																		th:data-id="${call['data_id']}"
+																		th:complaint-select="${call['complaint_number']}"
+																		th:data-name="${call['complaint_person_name']}"
+																		th:data-number="${call['complaint_mobilenumber']}"
+																		th:data-complaint-type="${call['complaint_type']}"
+																		onclick="submitComplaint(this)" disabled="disabled">
+																		Submit</button>
+																</td>
+															</tr>
+
+														</tbody>
+													</table>
+
+												</div>
+
+												<div class="table-responsive" id="secondaryTable"
+													style="display: none;">
+													<table id="SecondaryDatatable"
+														class="table table-striped table-bordered table-hover dataTable"
+														role="grid">
+														<thead class="thead-dark">
+															<tr role="row">
+																<th class="text-center">S.No</th>
+																<th class="text-center">ID</th>
+																<th class="text-center">Complaint Date</th>
+																<th class="text-center">Public Name</th>
+																<th class="text-center">Public PhoneNo</th>
+																<th class="text-center">Complaint Type</th>
+																<th class="text-center">View Details</th>
+																<th class="text-center custom-width1">Actions</th>
+																<th class="text-center">Remarks</th>
+															</tr>
+														</thead>
+														<tbody>
+															<tr th:each="call, iterStat : ${fcSubmitDetails}">
+																<td th:text="${iterStat.index + 1}" class="text-center"></td>
+																<td th:text="${call['complaint_number']}"
+																	class="text-center complaint-select"></td>
+																<td th:text="${call['complaint_date']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_person_name']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_mobilenumber']}"
+																	class="text-center"></td>
+																<td th:text="${call['complaint_type']}"
+																	class="text-center"></td>
+																<td class="text-center">
+																	<button type="button" class="btn btn-info"
+																		th:data-complaint-number="${call['complaint_number']}">View</button>
+																</td>
+																<td th:text="${call['call_status']}" class="text-center"></td>
+																<td th:text="${call['remarks']}" class="text-center"></td>
+															</tr>
+														</tbody>
+													</table>
+												</div>
+
+
+											</div>
+										 </div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+
+					</div>
+				</div>
+			</div>
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<!--Details button Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+	<script type="text/javascript">
+ 
+ 
+ 
+$(document).ready(function() {
+	
+	
+	 $(document).on('click', '.btn-info', function () {
+	        // Retrieve the complaint number from the data attribute
+	        var complaintNumber = $(this).data('complaint-number');
+	        
+	        // Call the viewDetails function with the complaint number
+	        viewDetails(complaintNumber);
+	    });
+	 
+	 $('#primaryButton').addClass('btn-success').removeClass('btn-secondary');
+     $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+		
+		// Toggle functionality for Primary and Secondary buttons
+	    $('#primaryButton').click(function () {
+	        $('#primaryTable').show();
+	        $('#secondaryTable').hide();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+         $('#secondaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#QaqcDatatable').DataTable().columns.adjust().draw();
+	    });
+
+	    $('#secondaryButton').click(function () {
+	        $('#primaryTable').hide();
+	        $('#secondaryTable').show();
+	        
+	        $(this).addClass('btn-success').removeClass('btn-secondary');
+         $('#primaryButton').addClass('btn-secondary').removeClass('btn-success');
+	        $('#SecondaryDatatable').DataTable().columns.adjust().draw();
+
+	    });
+				
+
+    	     	var table = $('#QaqcDatatable').DataTable({
+    	             dom: 'Bftip',
+    	             columnDefs: [
+    	                 { targets: 'no-sort', orderable: false }
+    	             ],
+    	             lengthMenu: [
+    	                 [50, 100, 200, 500, -1],
+    	                 ['50 rows', '100 rows', '200 rows', 'Show all']
+    	             ],
+    	             scrollY: '50vh',
+    	             fixedColumns: {
+    	                 left: 1,
+    	                 right: 1
+    	             },
+    	             buttons: [
+    	                 {
+    	                     extend: 'pageLength',
+    	                     className: 'btn btn-warning'
+    	                 },
+    	                 {
+    	                     title: 'Data export',
+    	                     extend: 'copyHtml5',
+    	                     text: 'Copy',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'copyBtn'
+    	                 },
+    	                 {
+    	                     extend: 'excelHtml5',
+    	                     text: 'Excel',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'excelBtn'
+    	                 },
+    	                 {
+    	                     extend: 'csvHtml5',
+    	                     text: 'CSV',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'csvBtn'
+    	                 },
+    	                 {
+    	                     extend: 'pdfHtml5',
+    	                     text: 'PDF',
+    	                     className: 'btn btn-secondary',
+    	                     id: 'pdfBtn'
+    	                 }
+    	             ],
+    	             fixedHeader: true,
+    	             autoWidth: true,
+    	             responsive: true,
+    	             searching: true, // Enable default search functionality
+    	             select: false,
+    	             processing: false
+    	             
+    	         });
+    	     	
+    	     	var table1 = $('#SecondaryDatatable').DataTable({
+    		        dom: 'Bftip',
+    		        columnDefs: [
+    		            { targets: 'no-sort', orderable: false }
+    		        ],
+    		        lengthMenu: [
+    		            [50, 100, 200, 500, -1],
+    		            ['50 rows', '100 rows', '200 rows', 'Show all']
+    		        ],
+    		        scrollY: '50vh',
+    		        fixedColumns: {
+    		            left: 1,
+    		            right: 1
+    		        },
+    		        buttons: [
+    		            {
+    		                extend: 'pageLength',
+    		                className: 'btn btn-warning'
+    		            },
+    		            {
+    		                title: 'Data export',
+    		                extend: 'copyHtml5',
+    		                text: 'Copy',
+    		                className: 'btn btn-secondary',
+    		                id: 'copyBtn'
+    		            },
+    		            {
+    		                extend: 'excelHtml5',
+    		                text: 'Excel',
+    		                className: 'btn btn-secondary',
+    		                id: 'excelBtn'
+    		            },
+    		            {
+    		                extend: 'csvHtml5',
+    		                text: 'CSV',
+    		                className: 'btn btn-secondary',
+    		                id: 'csvBtn'
+    		            },
+    		            {
+    		                extend: 'pdfHtml5',
+    		                text: 'PDF',
+    		                className: 'btn btn-secondary',
+    		                id: 'pdfBtn'
+    		            }
+    		        ],
+    		        fixedHeader: true,
+    		        autoWidth: true,
+    		        responsive: true,
+    		        searching: true,
+    		        select: false,
+    		        processing: false
+    		    });
+    	     	
+    	     	 // // Event listeners for changes in dropdown, remarks, and date picker
+    	        $(document).on('change', '.action-dropdown', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            const schedulerDiv = parentRow.find('.schedule-call');
+    	            schedulerDiv.toggleClass('d-none', $(this).val() !== 'FOLLOWUP');
+    	            validateFields(parentRow);
+    	        });
+
+    	        $(document).on('input', 'input[type="text"]', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            validateFields(parentRow);
+    	        });
+
+    	        $(document).on('change', '.date-picker', function () {
+    	            const parentRow = $(this).closest('tr');
+    	            validateFields(parentRow);
+    	        });
+
+    	        // Validate function to check conditions for enabling/disabling submit button
+    	        function validateFields(row) {
+    	            const actionSelect = row.find('.action-select');
+    	            const remarksInput = row.find('input[type="text"]');
+    	            const submitButton = row.find('.submit-btn');
+    	            const actionValue = actionSelect.val().trim();
+    	            const remarksFilled = remarksInput.val().trim() !== "";
+
+    	            const followUpSelected = actionValue === "FOLLOWUP";
+    	            const remainderDateFilled = row.find('.date-picker').val()?.trim() !== ""; // Check if date is selected
+
+    	           // Enable submit button based on conditions
+			        if (
+			            (followUpSelected && remainderDateFilled && remarksFilled) || (actionValue !== "FOLLOWUP" && actionValue !=="Select") // FOLLOWUP requires remainder date and remarks
+			        ) {
+			            submitButton.prop('disabled', false); // Enable submit button
+			        } else {
+			            submitButton.prop('disabled', true); // Disable submit button
+			        }
+    	        }
+
+    	     // Initial validation for all rows on page load
+    	    	$("#QaqcDatatable tbody tr").each(function () {
+    	    	    const row = $(this);
+    	    	    const submitButton = row.find('.submit-btn');
+    	    	    submitButton.prop('disabled', true); // Ensure submit button is initially disabled
+    	    	    validateFields(row); // Validate fields for further interaction
+    	    	});
+    	    	
+    	    	// Re-validate fields on input changes
+    	    	$("#QaqcDatatable").on('input change', '.action-select, input[type="text"], .date-picker', function () {
+    	    	    const row = $(this).closest('tr');
+    	    	    validateFields(row);
+    	    	});
+    	        
+    	
+    	     });
+    	     
+  
+function submitComplaint(button) {
+	var userId = document.getElementById('userIdSpan').textContent;
+	const row = button.parentNode.parentNode;
+
+    // Fetch the values from the corresponding cells in the row
+    const dataId = row.querySelector('.submit-btn').getAttribute('data-id'); // Fetch the data_id
+    const action = row.querySelector('.action-select').value.trim(); // Fetch the action value
+    const complaintNumber = row.querySelector('.complaint-select').innerText.trim(); // Fetch complaint number
+    const remarks = row.querySelector('input[type="text"]').value.trim(); // Fetch the remarks value
+    const remainderDate = row.querySelector('.date-picker')?.value.trim(); // Fetch the remainder date (if any)
+	/* console.log(row);
+	console.log(dataId);
+	console.log(action);
+	console.log(complaintNumber);
+	console.log(remarks);
+	console.log(remainderDate); */
+	
+    $('.submitid').prop('disabled', true).text('Submitting...');
+	const name = button.getAttribute('data-name')?.trim() || "N/A";
+    const cellnumber = button.getAttribute('data-number');
+    const complaintTypeName = button.getAttribute('data-complaint-type');
+    
+    // Validation
+    if (!dataId || !action || action === "Select") {
+        Swal.fire("Error", "Action is required!", "error");
+        $('.submitid').prop('disabled', false).text('Submit');
+        return;
+    }
+    
+    if (action !== 'COMPLETED' && remarks === "") {
+        Swal.fire("Error", "Fill Remarks", "error");
+        $('.submitid').prop('disabled', false).text('Submit');
+        return;
+    }
+
+    if (action === 'FOLLOWUP' && remarks === "" && (!remainderDate || remainderDate === "")) {
+        Swal.fire("Error", "Schedule Date is required for Follow-Up!", "error");
+        $('.submitid').prop('disabled', false).text('Submit');
+        return;
+    }
+
+    // AJAX Request
+    $.ajax({
+        url: '/gcc/api/callcenterqaqc/agent/publicfollowupcalls/update',
+        type: 'POST',
+        data: {
+            dataId: dataId,
+            complaintNumber: complaintNumber,
+            action: action,
+            remarks: remarks,
+            remainderDate: remainderDate,
+            userId:userId
+        },       
+        success: function (response) {
+            if (response === "Success") {
+            	
+            	//Validate cellnumber
+        	    if (!isNaN(cellnumber) || !cellnumber.trim() === "") {
+        	    	//console.log("valid phone number");
+        	    	$('.submitid').prop('disabled', false).text('Submit');
+        	    	// Trigger WhatsApp message functions based on action
+            	    if (action === "UNATTENDED") {
+            	    	//sendWhatsAppMessageUnattended(name, complaintNumber, cellnumber, complaintTypeName);
+            	    } else if (action === "REOPEN") {
+            	        sendWhatsAppMessageReopened(name, complaintNumber, cellnumber, complaintTypeName);
+            	   }
+        	    }            	   
+        	    else{
+        	    	console.log("not valid phone number,So message not sent");
+        	    }
+            	
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: 'Complaint updated successfully!',
+                    allowOutsideClick: false, // Disable clicking outside the modal to close it
+                    allowEscapeKey: false, // Disable escape key to close the modal
+                    allowEnterKey: false, // Disable enter key to close the modal
+                    showConfirmButton: true, // Ensure the confirm button is visible
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                    	$('.submitid').prop('disabled', false).text('Submit');
+                   	
+                    	const table = $('#QaqcDatatable').DataTable();
+                        
+                        // Remove the row
+                        table.row($(row)).remove();
+
+                        // Reorder S.No column
+                        table.rows().every(function (index) {
+                            const row = this.node();
+                            $(row).find('td:first-child').text(index + 1); // Update S.No
+                        });
+
+                        // Redraw the table
+                        table.draw(false);
+                    }
+                });
+            } 
+            else if (response === "error") {
+            	$('.submitid').prop('disabled', false).text('Submit');
+            	Swal.fire("Error", "Failed to update complaint. Please try again later.", "error");
+            }
+            else {
+            	$('.submitid').prop('disabled', false).text('Submit');            	
+                Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+            }
+        },
+        error: function (xhr, status, error) {
+        	$('.submitid').prop('disabled', false).text('Submit');        	
+            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+        }
+        
+    });
+}
+	     
+    //view button script
+          
+	function viewDetails(complaintNumber) {
+ 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+ 	    $('#detailsModal').modal('show');
+
+ 	    // Fetch the main complaint details
+ 	    $.ajax({
+ 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+ 	        type: 'GET',
+            data:{complaintNumber:complaintNumber},
+ 	        success: function (data) {
+ 	            //console.log('Complaint Data:', data);
+
+ 	            // Fetch agent response details
+ 	            $.ajax({
+ 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+ 	                type: 'GET',
+ 	                data: { complaintNumber },
+ 	                success: function (agentResponse) {
+ 	                    //console.log('Agent Response:', agentResponse);
+
+ 	                    // Use the logic for building complaint and agent details as HTML
+ 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+ 	                    // Update modal content
+ 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+ 	                },
+ 	                error: function () {
+ 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+ 	                }
+ 	            });
+ 	        },
+ 	        error: function () {
+ 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+ 	        }
+ 	    });
+ 	}
+
+ 	// Function to generate complaint and agent details HTML
+function generateDetailsHtml(data, agentResponse) {
+ 		
+ 	// Helper function to format date to yyyy-mm-dd
+         function formatDate(dateStr) {
+             if (!dateStr) return 'N/A';
+             const date = new Date(dateStr);
+             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+         }
+// Format complaint messages
+let messagesHtml = '';
+if (data.comments && data.comments.length > 0) {
+    data.comments.forEach((comment) => {
+        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+            : '<p style="color: red;">No image available for this comment.</p>';
+
+        messagesHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted">${comment.comment_date}</p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                        <p>${comment.message || 'No message available'}</p>
+                        <div class="user-image">${commentImageLink}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    messagesHtml = '<p>No comments available.</p>';
+}
+
+// Format agent responses
+let agentRepliedHtml = '';
+if (agentResponse.length > 0) {
+    agentResponse.forEach((agentItem) => {
+        agentRepliedHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+}
+
+// Check for user images
+const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+    : '<p style="color: red;">UserImages: No image available.</p>';
+
+// Combine all sections into the final HTML
+const detailsHtml = `
+    <div class="row">
+        <div class="col-md-12">
+            <h4>Complaint Person's Details:</h4>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <h4>Complaint Details:</h4>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+    <div class="col-6">
+        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+    </div>
+    
+</div>
+    <hr>
+    <h4>Complaint Messages:</h4>
+    ${messagesHtml}
+    <hr>
+    <h4>Agent Replied Messages:</h4>
+    ${agentRepliedHtml}
+    <hr>
+    ${imageLink}
+`;
+
+return detailsHtml;
+}
+            
+//whatsapp message function for REOPENED
+function sendWhatsAppMessageReopened(name,complaintNumber,cellnumber,complaintTypeName) {
+
+    //console.log('whatsapp CustomerMobile:', cellnumber);
+    
+    //console.log('name:',name);
+    //console.log('id:',complaintNumber);
+    //console.log('complainttype',complaintTypeName)
+    let viewstatus = "pgr" ;
+       // Send the WhatsApp message pending
+
+		    let msgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Dear+Mr%2FMs+${encodeURIComponent(name)}%2C%0A%0AYour+complaint+regarding+${encodeURIComponent(complaintTypeName)}+with+complaint+number+%2A${encodeURIComponent(complaintNumber)}%2A+has+been+reopened+based+on+your+feedback.%0AThe+relevant+department+is+working+to+resolve+the+issue%2C+and+updates+will+be+provided+on+the+progress.%0A%0AClick+the+button+below+to+view+your+complaint+status%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-Greater+Chennai+Corporation&buttonUrlParam=${encodeURIComponent(viewstatus)}`         		 
+		
+
+
+             let tamilmsgUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${encodeURIComponent(cellnumber)}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=%E0%AE%85%E0%AE%A9%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%2F%E0%AE%A4%E0%AE%BF%E0%AE%B0%E0%AF%81%E0%AE%AE%E0%AE%A4%E0%AE%BF+${encodeURIComponent(name)}%2C%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%2A${encodeURIComponent(complaintNumber)}%2A%2C+${encodeURIComponent(complaintTypeName)}+%E0%AE%A4%E0%AF%8A%E0%AE%9F%E0%AE%B0%E0%AF%8D%E0%AE%AA%E0%AE%BE%E0%AE%A9+%E0%AE%95%E0%AE%B0%E0%AF%81%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AF%81%E0%AE%95%E0%AE%B3%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%85%E0%AE%9F%E0%AE%BF%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%88%E0%AE%AF%E0%AE%BF%E0%AE%B2%E0%AF%8D%2C+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AF%8D+%E0%AE%AE%E0%AF%80%E0%AE%A3%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%A4%E0%AE%BF%E0%AE%B1%E0%AE%95%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F%E0%AF%81%E0%AE%B3%E0%AF%8D%E0%AE%B3%E0%AE%A4%E0%AF%81.%0A%E0%AE%9A%E0%AE%AE%E0%AF%8D%E0%AE%AA%E0%AE%A8%E0%AF%8D%E0%AE%A4%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%8D%E0%AE%9F+%E0%AE%A4%E0%AF%81%E0%AE%B1%E0%AF%88+%E0%AE%85%E0%AE%A4%E0%AE%BF%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%87%E0%AE%A8%E0%AF%8D%E0%AE%A4+%E0%AE%AA%E0%AE%BF%E0%AE%B0%E0%AE%9A%E0%AF%8D%E0%AE%9A%E0%AE%BF%E0%AE%A9%E0%AF%88%E0%AE%AF%E0%AF%88+%E0%AE%A4%E0%AF%80%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%AA%E0%AE%A3%E0%AE%BF%E0%AE%AF%E0%AE%BE%E0%AE%B1%E0%AF%8D%E0%AE%B1%E0%AE%BF+%E0%AE%B5%E0%AE%B0%E0%AF%81%E0%AE%95%E0%AE%BF%E0%AE%A9%E0%AF%8D%E0%AE%B1%E0%AE%A9%E0%AE%B0%E0%AF%8D.%0A%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A4%E0%AE%B1%E0%AF%8D%E0%AE%AA%E0%AF%8B%E0%AE%A4%E0%AF%88%E0%AE%AF+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88+%E0%AE%95%E0%AF%81%E0%AE%B1%E0%AE%BF%E0%AE%A4%E0%AF%8D%E0%AE%A4+%E0%AE%A4%E0%AE%95%E0%AE%B5%E0%AE%B2%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%B5%E0%AE%BF%E0%AE%B0%E0%AF%88%E0%AE%B5%E0%AE%BF%E0%AE%B2%E0%AF%8D+%E0%AE%AE%E0%AF%87%E0%AE%B2%E0%AF%81%E0%AE%AE%E0%AF%8D+%E0%AE%B5%E0%AE%B4%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AE%9F%E0%AF%81%E0%AE%AE%E0%AF%8D.%0A%0A%E0%AE%89%E0%AE%99%E0%AF%8D%E0%AE%95%E0%AE%B3%E0%AF%8D+%E0%AE%AA%E0%AF%81%E0%AE%95%E0%AE%BE%E0%AE%B0%E0%AE%BF%E0%AE%A9%E0%AF%8D+%E0%AE%A8%E0%AE%BF%E0%AE%B2%E0%AF%88%E0%AE%AF%E0%AF%88%E0%AE%AA%E0%AF%8D+%E0%AE%AA%E0%AE%BE%E0%AE%B0%E0%AF%8D%E0%AE%95%E0%AF%8D%E0%AE%95+%E0%AE%95%E0%AF%80%E0%AE%B4%E0%AF%87+%E0%AE%89%E0%AE%B3%E0%AF%8D%E0%AE%B3+%E0%AE%AA%E0%AF%8A%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AE%BE%E0%AE%A9%E0%AF%88%E0%AE%95%E0%AF%8D+%E0%AE%95%E0%AE%BF%E0%AE%B3%E0%AE%BF%E0%AE%95%E0%AF%8D+%E0%AE%9A%E0%AF%86%E0%AE%AF%E0%AF%8D%E0%AE%AF%E0%AE%B5%E0%AF%81%E0%AE%AE%E0%AF%8D%F0%9F%91%87&media_url=https%3A%2F%2Ferp.chennaicorporation.gov.in%2Fpgr%2Fimages%2Fpgr_whatsapp_banner.jpg&isTemplate=true&footer=-%E0%AE%AA%E0%AF%86%E0%AE%B0%E0%AF%81%E0%AE%A8%E0%AE%95%E0%AE%B0+%E0%AE%9A%E0%AF%86%E0%AE%A9%E0%AF%8D%E0%AE%A9%E0%AF%88+%E0%AE%AE%E0%AE%BE%E0%AE%A8%E0%AE%95%E0%AE%B0%E0%AE%BE%E0%AE%9F%E0%AF%8D%E0%AE%9A%E0%AE%BF.&buttonUrlParam=${encodeURIComponent(viewstatus)}`
+     		    		
+     		    		
+     		  
+       $.ajax({
+           url: '/gcc/qaqc/api/whatsapp/send-whatsapp-message', // Replace with your service path
+           type: 'POST',
+           data: { msgUrl: msgUrl,
+         	  tamilmsgUrl: tamilmsgUrl},
+           success: function(response) {
+               //console.log('WhatsApp message sent successfully', response);
+               console.log('success');
+               //alert('WhatsApp message sent!');
+              
+           },
+           error: function(xhr, status, error) {
+               console.error('Error sending WhatsApp message:', error);
+               //alert('Failed to send WhatsApp message.');
+               
+               Swal.fire({
+                           title: 'Error!',
+                           text: 'Message Not sent!',
+                           icon: 'error',
+                           timer: 2000,
+                           showConfirmButton: false
+                       })
+           }
+       });
+   }
+
+
+  
+</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/complaintstatus.html b/target/classes/templates/modules/callcenterqaqc/complaintstatus.html
new file mode 100644
index 0000000..bebd501
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/complaintstatus.html
@@ -0,0 +1,980 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+.required {
+	color: red;
+}
+
+.card-box {
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+}
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+</style>
+<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-question-circle bg-blue"></i>
+									<div class="d-inline">
+										<h5>PGR Complaint Status</h5>
+										<span>1913 Check PGR Complaint Status</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">PGR
+											Complaint Status</li>
+										<li class="breadcrumb-item active" aria-current="page">Check
+											Status</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+
+
+					<div class="row mt-4">
+						<div class="col-12">
+							<div class="card">
+								<div
+									class="card-header d-flex justify-content-between align-items-center">
+									<h3 class="mb-0" style="font-weight: bold">Check Complaint
+										Status</h3>
+
+									<!-- div class="d-flex">
+								       
+								        <button type="button" class="btn btn-primary" id="searchBtn">Search</button>
+								    </div> 	 -->
+
+									<div class="d-flex">
+
+										<input type="date" class="form-control mr-2" id="startDate"
+											placeholder="Start Date"> <input type="date"
+											class="form-control mr-2" id="endDate" placeholder="End Date">
+										<input class="form-control mr-2" placeholder="complaintnumber"
+											id="complaintNumber"> <input
+											class="form-control mr-2" placeholder="mobilenumber"
+											id="complaintMobileNumber"> <select id="year"
+											class="year-dropdown"></select>
+										<button type="submit" class="btn btn-primary ml-2"
+											id="searchBtn">Search</button>
+										<button type="button" class="btn btn-secondary ml-2"
+											id="resetBtn">Reset</button>
+									</div>
+								</div>
+
+
+
+								<div class="row mt-4">
+									<div class="col-md-12">
+										<!-- <div class="card"> -->
+										<div class="card-body">
+											<div class="table-responsive">
+
+												<table id="AgentQaqcDatatable"
+													class="table table-striped table-bordered table-hover dataTable"
+													role="grid">
+													<thead class="thead-dark">
+														<tr role="row">
+
+															<th class="text-center no-sort">S.No</th>
+															<th class="text-center no-sort">Complaint Number</th>
+															<th class="text-center">Complaint Date</th>
+															<th class="text-center no-sort">Name</th>
+															<th class="text-center no-sort">Mobile Number</th>
+															<th class="text-center">ComplaintType</th>
+															<th class="text-center no-sort ">View</th>
+															<th class="text-center">Call Status</th>
+															<th class="text-center">Updated Date</th>
+														</tr>
+													</thead>
+													<tbody>
+
+													</tbody>
+												</table>
+											</div>
+										</div>
+										<!-- </div> -->
+									</div>
+								</div>
+
+							</div>
+						</div>
+
+
+					</div>
+				</div>
+
+			</div>
+
+			<div id="pageLoader"
+				style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				<div
+					style="position: relative; top: 50%; transform: translateY(-50%);">
+					<div class="spinner-border text-primary" role="status"
+						style="width: 3rem; height: 3rem;">
+						<span class="sr-only">Loading...</span>
+					</div>
+					<!-- Add the 'Please wait' text below the spinner -->
+					<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please
+						wait...</p>
+				</div>
+			</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+
+
+
+	<!--Details button Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+
+	<!-- in the code use to show the download different type microsoft -->
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">	
+	 $(document).ready(function() {
+		 $('#AgentQaqcDatatable').DataTable({
+             dom: 'Bftip',
+             columnDefs: [
+                 { targets: 'no-sort', orderable: false }
+             ],
+             lengthMenu: [
+                 [50, 100, 200, 500, -1],
+                 ['50 rows', '100 rows', '200 rows', 'Show all']
+             ],
+             scrollY: '50vh',
+             fixedColumns: {
+                 left: 1,
+                 right: 1
+             },
+             buttons: [
+                 {
+                     extend: 'pageLength',
+                     className: 'btn btn-warning'
+                 },
+                 {
+                     title: 'Data export',
+                     extend: 'copyHtml5',
+                     text: 'Copy',
+                     className: 'btn btn-secondary',
+                     id: 'copyBtn'
+                 },
+                 {
+                     extend: 'excelHtml5',
+                     text: 'Excel',
+                     className: 'btn btn-secondary',
+                     id: 'excelBtn'
+                 },
+                 {
+                     extend: 'csvHtml5',
+                     text: 'CSV',
+                     className: 'btn btn-secondary',
+                     id: 'csvBtn'
+                 },
+                 {
+                     extend: 'pdfHtml5',
+                     text: 'PDF',
+                     className: 'btn btn-secondary',
+                     id: 'pdfBtn'
+                 }
+             ],
+             fixedHeader: true,
+             autoWidth: true,
+             responsive: true,
+             searching: true,
+             select: false,
+             processing: false
+         });  
+		// Get current year
+	        const currentYear = new Date().getFullYear();
+
+	        // Get reference to the year dropdown
+	        const yearDropdown = document.getElementById('year');
+
+	        // Populate the dropdown with years
+	        for (let year = currentYear; year >= 2010; year--) {
+	            const option = document.createElement('option');
+	            option.value = year;
+	            option.textContent = year;
+	            yearDropdown.appendChild(option);
+	        }
+
+	        
+     	
+
+     	document.getElementById('resetBtn').addEventListener('click', function () {
+     	event.preventDefault();
+     	
+     	window.location.href="/gcc/callcenterqaqc/complaintstatus";
+     	
+     	});
+
+     // Event listener for From Date selection
+ 	   $("#startDate").on("change", function() {
+ 	       const startDate = $(this).val();  // Get the selected start date
+ 	       // Set the min value for To Date to be the selected From Date
+ 	       $("#endDate").attr("min", startDate);
+ 	   });
+
+ 	   // Event listener for To Date selection
+ 	   $("#endDate").on("change", function() {
+ 	       const endDate = $(this).val();  // Get the selected end date
+ 	       // Set the max value for From Date to be the selected To Date
+ 	       $("#startDate").attr("max", endDate);
+ 	   }); 
+     	
+     	document.getElementById('searchBtn').addEventListener('click', function (e) {
+     	    let startDate = document.getElementById('startDate').value;
+     	    let endDate = document.getElementById('endDate').value;
+     	    const complaintNumber = $('#complaintNumber').val().toUpperCase();; // Fetch complaint number from input
+     	    const complaintMobileNumber = $('#complaintMobileNumber').val(); // Fetch mobile number (if exists)
+			const complaintYear=$('#year').val();
+     	    
+			//console.log("startdate: ", startDate);
+     	    //console.log("enddate: ", endDate);
+     	    //console.log("complaintNumber:",complaintNumber);
+     	    //console.log("complaintMobileNumber",complaintMobileNumber);
+     	    //console.log("complaintYear",complaintYear);
+     	    // Check if all required fields are empty
+     	    if (!startDate && !endDate && !complaintNumber && !complaintMobileNumber) {
+     	        Swal.fire({
+     	            icon: 'warning',
+     	            title: 'Error',
+     	            text: 'Please fill in at least one field to proceed.',
+     	            showConfirmButton: true,
+     	            timer: 3000
+     	        });
+     	        e.preventDefault(); // Prevent the default action
+     	        return; // Stop further execution
+     	    }
+
+     	    // Specific validation for startDate and endDate
+     	    if ((startDate && !endDate) || (!startDate && endDate)) {
+     	        Swal.fire({
+     	            icon: 'warning',
+     	            title: 'Error',
+     	            text: 'Please select both start and end dates.',
+     	            showConfirmButton: true,
+     	            timer: 3000
+     	        });
+     	        e.preventDefault();
+     	        return;
+     	    }
+     	    
+     	    if(complaintNumber !== '' && complaintMobileNumber !==''){
+     	    	Swal.fire({
+     	    		icon: 'info',
+     	            title: 'Info',
+     	            text: 'Please Enter any one either ComplaintNumber or MobileNumber',
+     	            showConfirmButton: true,
+     	            
+     	        });
+     	        e.preventDefault();
+     	        return;
+     	    }
+     	    
+     	 //complaintdetails datatable function script
+     	   if (complaintMobileNumber === '' && complaintNumber !== '') {
+     	      		    $('#pageLoader').show();
+
+     	      		    $.ajax({
+     	      		        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+     	      		        type: 'GET',
+     	      		        dataType: 'json',
+     	      		        data: { complaintNumber },
+     	      		        success: function (response) {
+     	      		            $('#pageLoader').hide();
+
+     	      		            // Initialize or update the DataTable
+     	      		            let table = $('#AgentQaqcDatatable').DataTable({
+     	      		                destroy: true, // Reinitialize the DataTable
+     	      		                searching: true, // Enable search
+     	      		               autoWidth: true,
+     	      		              responsive: true,
+     	      		                paging: true,    // Enable pagination
+     	      		                info: true,      // Show table info
+     	      		                data: response ? [response] : [],
+     	      		                columns: [
+     	      		                    { data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' },
+     	      		                    { data: 'complaintid', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complaintdate', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complainantName', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'mobileNumber', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complaintType', defaultContent: '-', className: 'text-center' },
+     	      		                    {
+     	      		                        data: 'complaintid',
+     	      		                        render: function (data) {
+     	      		                            return `
+     	      		                                <button type="button" class="btn btn-info details-btn" 
+     	      		                                    data-complaint-number="${data}">
+     	      		                                    View
+     	      		                                </button>`;
+     	      		                        },
+     	      		                        className: 'text-center'
+     	      		                    },
+     	      		                    { data: 'currentStatus', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'greatestDate', defaultContent: '-', className: 'text-center' }
+     	      		                ],
+     	      		               dom: 'Bfrtip', // Include buttons in the DOM layout
+     	      		              buttons: [
+     	      		                  {
+     	      		                      extend: 'pageLength',
+     	      		                      className: 'btn btn-warning'
+     	      		                  },
+     	      		                  {
+     	      		                      title: 'Data export',
+     	      		                      extend: 'copyHtml5',
+     	      		                      text: 'Copy',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'copyBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'excelHtml5',
+     	      		                      text: 'Excel',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'excelBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'csvHtml5',
+     	      		                      text: 'CSV',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'csvBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'pdfHtml5',
+     	      		                      text: 'PDF',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'pdfBtn'
+     	      		                  }
+     	      		              ],
+     	      		             columnDefs: [
+     	      		                { targets: 'no-sort', orderable: false }
+     	      		            ],
+     	      		            lengthMenu: [
+     	      		                [50, 100, 200, 500, -1],
+     	      		                ['50 rows', '100 rows', '200 rows', 'Show all']
+     	      		            ],
+     	      		            scrollY: '50vh',
+     	      		            fixedColumns: {
+     	      		                left: 1,
+     	      		                right: 1
+     	      		            }
+     	      		            });
+     	      		        },
+     	      		        error: function () {
+     	      		            $('#pageLoader').hide();
+     	      		            $('#AgentQaqcDatatable').DataTable().clear().destroy();
+     	      		            $('#AgentQaqcDatatable tbody').html(`
+     	      		                <tr>
+     	      		                    <td colspan="8" class="text-center text-danger">Failed to load data</td>
+     	      		                </tr>
+     	      		            `);
+     	      		        }
+     	      		    });
+     	      		}
+
+     	      		if (complaintMobileNumber !== '' && complaintNumber === '' && complaintYear !== '') {
+     	      		    $('#pageLoader').show();
+
+     	      		    $.ajax({
+     	      		        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetailsByMobileNumber',
+     	      		        type: 'GET',
+     	      		        dataType: 'json',
+     	      		        data: { complaintMobileNumber, startDate, endDate, complaintYear },
+     	      		        success: function (response) {
+     	      		            $('#pageLoader').hide();
+
+     	      		            // Initialize or update the DataTable
+     	      		            let table = $('#AgentQaqcDatatable').DataTable({
+     	      		                destroy: true, // Reinitialize the DataTable
+     	      		                searching: true, // Enable search
+     	      		               autoWidth: true,
+     	      		              responsive: true,
+     	      		                paging: true,    // Enable pagination
+     	      		                info: true,      // Show table info
+     	      		                order: [],       // Disable initial ordering
+     	      		                data: response && response.status === "success" ? response.complaints : [],
+     	      		                columns: [
+     	      		                    { data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' },
+     	      		                    { data: 'complaintid', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complaintdate', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complainantName', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'mobileNumber', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complaintType', defaultContent: '-', className: 'text-center' },
+     	      		                    {
+     	      		                        data: 'complaintid',
+     	      		                        render: function (data) {
+     	      		                            return `
+     	      		                                <button type="button" class="btn btn-info details-btn" 
+     	      		                                    data-complaint-number="${data}">
+     	      		                                    View
+     	      		                                </button>`;
+     	      		                        },
+     	      		                        className: 'text-center'
+     	      		                    },
+     	      		                    { data: 'currentStatus', defaultContent: '-', className: 'text-center' },
+     	      		                    { data: 'complaintcloseddate', defaultContent: '-', className: 'text-center' }
+     	      		                ],
+     	      		               dom: 'Bfrtip', // Include buttons in the DOM layout
+     	      		              buttons: [
+     	      		                  {
+     	      		                      extend: 'pageLength',
+     	      		                      className: 'btn btn-warning'
+     	      		                  },
+     	      		                  {
+     	      		                      title: 'Data export',
+     	      		                      extend: 'copyHtml5',
+     	      		                      text: 'Copy',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'copyBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'excelHtml5',
+     	      		                      text: 'Excel',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'excelBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'csvHtml5',
+     	      		                      text: 'CSV',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'csvBtn'
+     	      		                  },
+     	      		                  {
+     	      		                      extend: 'pdfHtml5',
+     	      		                      text: 'PDF',
+     	      		                      className: 'btn btn-secondary',
+     	      		                      id: 'pdfBtn'
+     	      		                  }
+     	      		              ],
+     	      		             columnDefs: [
+     	      		                { targets: 'no-sort', orderable: false }
+     	      		            ],
+     	      		            lengthMenu: [
+     	      		                [50, 100, 200, 500, -1],
+     	      		                ['50 rows', '100 rows', '200 rows', 'Show all']
+     	      		            ],
+     	      		            scrollY: '50vh',
+     	      		            fixedColumns: {
+     	      		                left: 1,
+     	      		                right: 1
+     	      		            }
+     	      		            });
+     	      		        },
+     	      		        error: function () {
+     	      		            $('#pageLoader').hide();
+     	      		            $('#AgentQaqcDatatable').DataTable().clear().destroy();
+     	      		            $('#AgentQaqcDatatable tbody').html(`
+     	      		                <tr>
+     	      		                    <td colspan="8" class="text-center text-danger">Failed to load data</td>
+     	      		                </tr>
+     	      		            `);
+     	      		        }
+     	      		    });
+     	      		}
+     	});
+
+     	
+     	
+     	
+     	
+     // Handle the "View" button click
+     	$('#AgentQaqcDatatable').on('click', '.details-btn', function () {
+     	    const complaintNumber = $(this).data('complaint-number');
+     	    
+     	    // Call the `viewDetails` function
+     	    viewDetails(complaintNumber);
+     	});
+
+     	// Display detailed modal
+     	function viewDetails(complaintNumber) {
+     	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+     	    $('#detailsModal').modal('show');
+
+     	    // Fetch the main complaint details
+     	    $.ajax({
+     	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+     	        type: 'GET',
+                data:{complaintNumber:complaintNumber},
+     	        success: function (data) {
+     	           // console.log('Complaint Data:', data);
+
+     	            // Fetch agent response details
+     	            $.ajax({
+     	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+     	                type: 'GET',
+     	                data: { complaintNumber },
+     	                success: function (agentResponse) {
+     	                    //console.log('Agent Response:', agentResponse);
+
+     	                    // Use the logic for building complaint and agent details as HTML
+     	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+     	                    // Update modal content
+     	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+     	                },
+     	                error: function () {
+     	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+     	                }
+     	            });
+     	        },
+     	        error: function () {
+     	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+     	        }
+     	    });
+     	}
+
+     	// Function to generate complaint and agent details HTML
+   function generateDetailsHtml(data, agentResponse) {
+     		
+     	// Helper function to format date to yyyy-mm-dd
+             function formatDate(dateStr) {
+                 if (!dateStr) return 'N/A';
+                 const date = new Date(dateStr);
+                 return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+             }
+    // Format complaint messages
+    let messagesHtml = '';
+    if (data.comments && data.comments.length > 0) {
+        data.comments.forEach((comment) => {
+            const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+                ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+                : '<p style="color: red;">No image available for this comment.</p>';
+
+            messagesHtml += `
+                <div class="comment mb-4">
+                    <div class="row">
+                        <div class="col-2 text-center">
+                            <p class="text-muted">${comment.comment_date}</p>
+                        </div>
+                        <div class="col-10">
+                            <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                            <p>${comment.message || 'No message available'}</p>
+                            <div class="user-image">${commentImageLink}</div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+    } else {
+        messagesHtml = '<p>No comments available.</p>';
+    }
+
+    // Format agent responses
+    let agentRepliedHtml = '';
+    if (agentResponse.length > 0) {
+        agentResponse.forEach((agentItem) => {
+            agentRepliedHtml += `
+                <div class="comment mb-4">
+                    <div class="row">
+                        <div class="col-2 text-center">
+                            <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                        </div>
+                        <div class="col-10">
+                            <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                            <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                            <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+    } else {
+        agentRepliedHtml = '<p>No agent replied messages available.</p>';
+    }
+
+    // Check for user images
+    const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+    const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+        ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+        : '<p style="color: red;">UserImages: No image available.</p>';
+
+    // Combine all sections into the final HTML
+    const detailsHtml = `
+        <div class="row">
+            <div class="col-md-12">
+                <h4>Complaint Person's Details:</h4>
+                <div class="row">
+                    <div class="col-6">
+                        <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                    </div>
+                    <div class="col-6">
+                        <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6">
+                        <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                    </div>
+                    <div class="col-6">
+                        <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6">
+                        <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                    </div>
+                    <div class="col-6">
+                        <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6">
+                        <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                    </div>
+                    <div class="col-6">
+                        <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr>
+        <h4>Complaint Details:</h4>
+        <div class="row">
+            <div class="col-6">
+                <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+            </div>
+            <div class="col-6">
+                <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-6">
+                <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+            </div>
+            <div class="col-6">
+                <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-6">
+                <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+            </div>
+            <div class="col-6">
+                <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+            </div>
+        </div>
+        <div class="row">
+        <div class="col-6">
+            <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+        </div>
+        
+    </div>
+        <hr>
+        <h4>Complaint Messages:</h4>
+        ${messagesHtml}
+        <hr>
+        <h4>Agent Replied Messages:</h4>
+        ${agentRepliedHtml}
+        <hr>
+        ${imageLink}
+    `;
+
+    return detailsHtml;
+}
+
+     	
+     	//function for viewing complaintdetails
+     	
+     	/* function viewDetails(complaintNumber, complaintMode, complaintDept) {
+     	    // Display a loading message while data is being fetched
+     	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+     	    $('#detailsModal').modal('show');
+
+     	    // Fetch the main complaint details
+     	    $.ajax({
+     	        url: `/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails`,
+     	        type: 'GET',
+     	        dataType: 'json',
+     	        data: { complaintNumber: complaintNumber, complaintMode: complaintMode, complaintDept: complaintDept },
+     	        success: function (data) {
+     	            console.log(data);
+
+     	            // Fetch agent response details
+     	            $.ajax({
+     	                url: `/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory`,
+     	                type: 'GET',
+     	                data: { complaintNumber: complaintNumber },
+     	                success: function (agentResponse) {
+     	                    console.log('Agent Response:', agentResponse);
+
+     	                    const agentItem = agentResponse.find(
+     	                        (item) => item.complaint_number === complaintNumber
+     	                    );
+
+     	                    // Helper function to format date to yyyy-mm-dd
+     	                    function formatDate(dateStr) {
+     	                        if (!dateStr) return 'N/A';
+     	                        const date = new Date(dateStr);
+     	                        return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+     	                    }
+
+     	                    // Prepare complaint messages
+     	                    let messagesHtml = '';
+     	                    if (data.comments && data.comments.length > 0) {
+     	                        data.comments.forEach((comment) => {
+     	                            const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+     	                                ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+     	                                : '<p style="color: red;">No image available for this comment.</p>';
+
+     	                            messagesHtml += `
+     	                                <div class="comment mb-4">
+     	                                    <div class="row">
+     	                                        <div class="col-2 text-center">
+     	                                            <p class="text-muted">${comment.comment_date}</p>
+     	                                        </div>
+     	                                        <div class="col-10">
+     	                                            <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+     	                                            <p>${comment.message || 'No message available'}</p>
+     	                                            <div class="user-image">${commentImageLink}</div>
+     	                                        </div>
+     	                                    </div>
+     	                                </div>
+     	                            `;
+     	                        });
+     	                    } else {
+     	                        messagesHtml = '<p>No comments available.</p>';
+     	                    }
+     	                    
+     	                   let agentRepliedHtml = '';
+
+     	                // Iterate through all responses matching the complaint number
+     	                    const matchingResponses = agentResponse.filter(item => item.complaint_number === complaintNumber);
+     	                    if (matchingResponses.length > 0) {
+     	                        matchingResponses.forEach(agentItem => {
+     	                            agentRepliedHtml += `
+     	                                <div class="comment mb-4">
+     	                                    <div class="row">
+     	                                        <div class="col-2 text-center">
+     	                                            <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+     	                                        </div>
+     	                                        <div class="col-10">
+     	                                            <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+     	                                           <p><strong>Remarks: </strong>${agentItem.remarks || 'No remarks provided'}</p>
+     	                                            <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+     	                                            
+     	                                        </div>
+     	                                    </div>
+     	                                </div>
+     	                            `;
+     	                        });
+     	                    } else {
+     	                        agentRepliedHtml = '<p>No agent replied messages available.</p>';
+     	                    }
+
+
+     	                    // Check for user images
+     	                    const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+     	                    const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+     	                        ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+     	                        : '<p style="color: red;">UserImages: No image available.</p>';
+
+     	                    // Combine all details into the modal content
+     	                    const detailsHtml = `
+     	                        <div class="row">
+     	                            <div class="col-md-12">
+     	                                <h4>Complaint Person's Details:</h4>
+     	                                <div class="row">
+     	                                    <div class="col-6">
+     	                                        <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+     	                                    </div>
+     	                                    <div class="col-6">
+     	                                        <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+     	                                    </div>
+     	                                </div>
+     	                                <div class="row">
+     	                                    <div class="col-6">
+     	                                        <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+     	                                    </div>
+     	                                    <div class="col-6">
+     	                                        <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+     	                                    </div>
+     	                                </div>
+     	                                <div class="row">
+     	                                    <div class="col-6">
+     	                                        <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+     	                                    </div>
+     	                                    <div class="col-6">
+     	                                        <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+     	                                    </div>
+     	                                </div>
+     	                                <div class="row">
+     	                                    <div class="col-6">
+     	                                        <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+     	                                    </div>
+     	                                    <div class="col-6">
+     	                                        <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+     	                                    </div>
+     	                                </div>
+     	                            </div>
+     	                        </div>
+     	                        <hr>
+     	                        <h4>Complaint Details:</h4>
+     	                        <div class="row">
+     	                            <div class="col-6">
+     	                                <p><strong>Complaint Dept:</strong> ${complaintDept || 'N/A'}</p>
+     	                            </div>
+     	                            <div class="col-6">
+     	                                <p><strong>Complaint Mode:</strong> ${complaintMode || 'N/A'}</p>
+     	                            </div>
+     	                        </div>
+     	                        <div class="row">
+     	                            <div class="col-6">
+     	                                <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+     	                            </div>
+     	                            <div class="col-6">
+     	                                <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+     	                            </div>
+     	                        </div>
+     	                        <div class="row">
+     	                            <div class="col-6">
+     	                                <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+     	                            </div>
+     	                            <div class="col-6">
+     	                                <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+     	                            </div>
+     	                        </div>
+     	                        <hr>
+     	                        <h4>Complaint Messages:</h4>
+     	                        ${messagesHtml}
+     	                        <hr>
+     	                        <h4>Agent Replied Messages:</h4>
+     	                        ${agentRepliedHtml}
+     	                        <hr>
+     	                        ${imageLink}
+     	                    `;
+
+     	                    // Update the modal content
+     	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+     	                },
+     	                error: function () {
+     	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+     	                }
+     	            });
+     	        },
+     	        error: function () {
+     	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+     	        }
+     	    });
+     	} */
+
+    	
+});
+	 
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/overallreport.html b/target/classes/templates/modules/callcenterqaqc/overallreport.html
new file mode 100644
index 0000000..c0232eb
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/overallreport.html
@@ -0,0 +1,537 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+
+</style>
+<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fa fa-list-alt bg-blue"></i>
+									<div class="d-inline">
+										<h5>PGR Reports</h5>
+										<span>1913 PGR Reports</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">Reports</li>
+										<li class="breadcrumb-item active" aria-current="page">Overall Reports</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+					
+					<div class="row mt-4">
+						<div class="col-12">
+							<div class="card">
+								<div class="card-header">
+									<span style="font-size: medium;font-weight: bold;">Reports Filters</span>
+								</div>
+								<div class="card-body">
+									<div class="row">
+										<div class="col-sm-2 mb-2">
+											<label for="startDate" style="font-size: medium;">From Date:</label>
+						                    <input type="date" id="startDate" class="form-control">
+										</div>
+										<div class="col-sm-2 mb-2">
+											<label for="endDate" style="font-size: medium;">To Date:</label>
+						                    <input type="date" id="endDate" class="form-control">
+										</div>
+										
+										<div class="col-sm-2 mb-2">
+								            <label for="stsdropdown" style="font-size: medium;">Status:</label>
+								            <select id="stsdropdown" class="form-control">
+								            <option value="total">Select</option>
+								            <option value="processing">Processing</option>
+								            <option value="reopened">Reopened</option>
+								            <option value="redressed">Action Taken 1</option>
+								            <option value="closed">Action Taken 2</option>
+								            <option value="completed">Final Closure</option>
+											</select>
+										</div>
+										
+										<div class="col-sm-2 mb-2">
+								            <label for="dropdown4" style="font-size: medium;">Group:</label>
+								            <select id="dropdown4" class="form-control">
+								            <option value="">Select</option>
+								               <!--  <option value="">general</option> -->
+								                <!-- Add options here -->
+											</select>
+										</div>
+															
+									
+										<div class="col-sm-2 mb-2">
+											 <label for="dropdown1"  style="font-size: medium;">Type:</label>
+						                     <select id="dropdown1" class="form-control">
+							                 <option value="">Select</option>
+							            	 <!-- <option value="Cleanliness in Parks">Cleanliness in Parks</option> -->
+
+											</select>
+										</div>
+
+										<div class="col-sm-2 mb-2">
+								            <label for="dropdown3" style="font-size: medium;">Mode:</label>
+								            <select id="dropdown3" class="form-control">
+								                <option value="">Select</option>
+								                <!-- <option value="">INTERNET</option> -->
+
+											</select>
+										</div>
+										</div>
+										<div class="row mt-2">
+										<div class="col-sm-2 mb-2">
+											<label for="dropdown2" style="font-size: medium;">Zone:</label>
+						                    <select id="dropdown2" class="form-control">
+						                    <option value="">Select</option>
+						                    <!-- <option value="N01">N01</option> -->
+												<!-- <option value="ALL">ALL</option> -->
+
+											</select>
+										</div>
+										</div>
+									
+									
+									<div class="row mt-4">
+										<div class="col-12 d-flex justify-content-center">
+											<button type="submit" id="searchBtn"
+												class="btn btn-primary mx-2">Search</button>
+
+											<button class="btn btn-danger mx-2" id="resetBtn"
+												name="reset" type="reset">Reset</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+			
+					
+					<div class="row mt-4">
+									<div class="col-md-12">
+										<div class="card">
+										<div class="card-header">
+											<span style="font-size: medium;font-weight: bold;">Reports List</span>
+										</div>
+										<div class="card-body">
+											<div class="table-responsive">
+
+												<table id="ReportDatatable"
+													class="table table-striped table-bordered table-hover dataTable"
+													role="grid">
+													<thead class="thead-dark">
+														<tr role="row">
+
+															<th class="text-center no-sort">S.No</th>
+															<th class="text-center">Zone</th>
+															<th class="text-center">Ward</th>
+															<th class="text-center no-sort">Complaint No</th>
+															<th class="text-center">Reg Date</th>
+															<th class="text-center">ComplaintType</th>	
+															<th class="text-center">Mode</th>													
+															<th class="text-center no-sort">Public Name</th>
+															<th class="text-center">Public Mobile no</th>
+															<th class="text-center no-sort">Address</th>
+															<th class="text-center">Assign To</th>	
+															<th class="text-center">Status</th>														
+																																												
+														</tr>
+													</thead>
+													<tbody>
+
+													</tbody>
+												</table>
+											</div>
+										</div>
+									 </div>
+									</div>
+								</div>
+					
+				</div>
+
+			</div>
+
+			<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				    <div style="position: relative; top: 50%; transform: translateY(-50%);">
+				        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+				            <span class="sr-only">Loading...</span>
+				        </div>
+				        <!-- Add the 'Please wait' text below the spinner -->
+				        <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
+				    </div>
+				</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+
+
+	<!-- in the code use to show the download different type microsoft -->
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">
+	document.addEventListener("DOMContentLoaded", function () {
+	    const complaintTypeDropdown = document.getElementById('dropdown1');
+	    const complaintGroupDropdown = document.getElementById('dropdown4');
+	    const complaintModeDropdown = document.getElementById('dropdown3');
+	    const complaintZoneDropdown = document.getElementById('dropdown2');
+
+	    // Load Complaint Groups
+	    fetch('/gcc/api/callcenterqaqc/getComplaintGroup') 
+	        .then(response => response.json())
+	        .then(data => {
+	            // Clear existing options
+	            complaintGroupDropdown.innerHTML = `<option value="">Select</option>`;
+
+	            // Add options from the API response
+	            data.forEach(complaintGroupName => {
+	                complaintGroupDropdown.innerHTML += `<option value="${complaintGroupName}">${complaintGroupName}</option>`;
+	            });
+	        })
+	        .catch(error => {
+	            console.error('Error fetching complaint groups:', error);
+	        });
+
+	    // Event Listener for Complaint Group Change
+	    complaintGroupDropdown.addEventListener('change', function () {
+	        const selectedGroup = complaintGroupDropdown.value;
+
+	        if (selectedGroup) {
+	            // Fetch Complaint Types based on selected group
+	            fetch(`/gcc/api/callcenterqaqc/getComplaintTypesByGroup?group=${encodeURIComponent(selectedGroup)}`)
+	                .then(response => response.json())
+	                .then(data => {
+	                    // Clear existing options
+	                    complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+
+	                    // Add options from the API response
+	                    data.forEach(complaintTypeName => {
+	                        complaintTypeDropdown.innerHTML += `<option value="${complaintTypeName}">${complaintTypeName}</option>`;
+	                    });
+	                })
+	                .catch(error => {
+	                    console.error('Error fetching complaint types:', error);
+	                });
+	        } else {
+	            // Clear complaint type dropdown if no group is selected
+	            complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+	        }
+	    });
+	    
+	    
+	    // Load all Modes 
+	    fetch('/gcc/api/callcenterqaqc/getModes') 
+	    .then(response => response.json())
+	    .then(data => {
+	        // Clear existing options
+	        complaintModeDropdown.innerHTML = `<option value="">Select</option>`;
+
+	        // Add options from the API response
+	        data.forEach(complaintMode => {
+	        	complaintModeDropdown.innerHTML += `<option value="${complaintMode}">${complaintMode}</option>`;
+	        });
+	    })
+	    .catch(error => {
+	        console.error('Error fetching complaint groups:', error);
+	    });
+	    
+	    
+	 // Load all zones 
+	    fetch('/gcc/api/callcenterqaqc/getZones') 
+	    .then(response => response.json())
+	    .then(data => {
+	        // Clear existing options
+	        complaintZoneDropdown.innerHTML = `<option value="">Select</option>`;
+
+	        // Add options from the API response
+	        data.forEach(complaintZone => {
+	        	complaintZoneDropdown.innerHTML += `<option value="${complaintZone}">${complaintZone}</option>`;
+	        });
+	    })
+	    .catch(error => {
+	        console.error('Error fetching complaint groups:', error);
+	    });
+	    
+	});
+	
+	 $(document).ready(function() {
+
+     	var table = $('#ReportDatatable').DataTable({
+             dom: 'Bftip',
+             columnDefs: [
+                 { targets: 'no-sort', orderable: false }
+             ],
+             lengthMenu: [
+                 [50, 100, 200, 500, -1],
+                 ['50 rows', '100 rows', '200 rows', 'Show all']
+             ],
+             scrollY: '100vh',
+             fixedColumns: {
+                 left: 1,
+                 right: 1
+             },
+             buttons: [
+                 {
+                     extend: 'pageLength',
+                     className: 'btn btn-warning'
+                 },
+                 {
+                     title: 'Data export',
+                     extend: 'copyHtml5',
+                     text: 'Copy',
+                     className: 'btn btn-secondary',
+                     id: 'copyBtn'
+                 },
+                 {
+                     extend: 'excelHtml5',
+                     text: 'Excel',
+                     className: 'btn btn-secondary',
+                     id: 'excelBtn'
+                 },
+                 {
+                     extend: 'csvHtml5',
+                     text: 'CSV',
+                     className: 'btn btn-secondary',
+                     id: 'csvBtn'
+                 },
+                 {
+                     extend: 'pdfHtml5',
+                     text: 'PDF',
+                     className: 'btn btn-secondary',
+                     id: 'pdfBtn'
+                 }
+             ],
+             fixedHeader: true,
+             autoWidth: true,
+             responsive: true,
+             searching: true,
+             select: false,
+             processing: false
+         });
+     	
+     // Event listener for From Date selection
+  	   $("#startDate").on("change", function() {
+  	       const startDate = $(this).val();  // Get the selected start date
+  	       // Set the min value for To Date to be the selected From Date
+  	       $("#endDate").attr("min", startDate);
+  	   });
+
+  	   // Event listener for To Date selection
+  	   $("#endDate").on("change", function() {
+  	       const endDate = $(this).val();  // Get the selected end date
+  	       // Set the max value for From Date to be the selected To Date
+  	       $("#startDate").attr("max", endDate);
+  	   });
+  	   
+  	 	document.getElementById('resetBtn').addEventListener('click', function () {
+      	event.preventDefault();
+      	
+      	window.location.href="/gcc/callcenterqaqc/overallreport";
+      	
+      	});
+  	 	
+  	 	document.getElementById('searchBtn').addEventListener('click', function (e) {
+  	 		
+  	 		
+  	 		let startDate = document.getElementById('startDate').value;
+     	    let endDate = document.getElementById('endDate').value;
+     	    
+     	    let status = document.getElementById('stsdropdown').value;
+     	    let group= document.getElementById('dropdown4').value;
+     	 	let type= document.getElementById('dropdown1').value;
+     	    let mode= document.getElementById('dropdown3').value;
+     	    let zone= document.getElementById('dropdown2').value;
+     	    
+     	   console.log("startdate: ",startDate);
+    	   console.log("enddate: ",endDate);
+    	   console.log("status: ",status);
+    	   console.log("group: ",group);
+    	   console.log("type: ",type);
+    	   console.log("mode: ",mode);
+    	   console.log("zone: ",zone);
+    	   if (!startDate && !endDate) {
+    	        Swal.fire({
+    	            icon: 'warning',
+    	            title: 'Error',
+    	            text: 'Please Select Both From Date and To Date',
+    	            showConfirmButton: true,
+    	            timer: 3000
+    	        });
+    	        e.preventDefault(); // Prevent the default action
+    	        return; // Stop further execution
+    	    }
+    	   const params = new URLSearchParams({
+    	        startDate: startDate,
+    	        endDate: endDate,
+    	        status: status,
+    	        group: group,
+    	        type: type,
+    	        mode: mode,
+    	        zone: zone
+    	    });
+    	   $('#pageLoader').show();
+    	   $.ajax({
+               type: "GET",
+               url: `/gcc/api/callcenterqaqc/getfilterreport?${params.toString()}`, // Append query string to URL
+               contentType: "application/json",
+               success: function (response) {
+            	    console.log("API Response:", response);
+            	    $('#pageLoader').hide();
+            	    if (response.status === "success") {
+            	        console.log("Details Array:", response.details);
+            	        // Ensure details is an array and has at least one entry
+            	        if (Array.isArray(response.details) && response.details.length > 0) {
+            	            let table = $('#ReportDatatable').DataTable({
+            	                destroy: true,
+            	                searching: true,
+            	                autoWidth: true,
+            	                responsive: true,
+            	                paging: true,
+            	                info: true,
+            	                data: response.details,           	                
+            	                columns: [
+            	                    { 
+            	                        data: null, 
+            	                        render: (data, type, row, meta) => meta.row + 1, 
+            	                        className: 'text-center' 
+            	                    },
+            	                    { data: 'Zone', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Ward', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Number', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Opened Date', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Type', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Mode', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Person Name', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Complaint Person Number', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Address', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Assign To', defaultContent: '-', className: 'text-center' },
+            	                    { data: 'Current Status', defaultContent: '-', className: 'text-center' },
+            	                    
+            	                   
+            	                ],
+            	                dom: 'Bfrtip',
+            	                buttons: [
+   	      		                  {
+   	      		                      extend: 'pageLength',
+   	      		                      className: 'btn btn-warning'
+   	      		                  },
+   	      		                  {
+   	      		                      title: 'Data export',
+   	      		                      extend: 'copyHtml5',
+   	      		                      text: 'Copy',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'copyBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'excelHtml5',
+   	      		                      text: 'Excel',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'excelBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'csvHtml5',
+   	      		                      text: 'CSV',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'csvBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'pdfHtml5',
+   	      		                      text: 'PDF',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'pdfBtn'
+   	      		                  }
+   	      		              ],
+   	      		             columnDefs: [
+   	      		                { targets: 'no-sort', orderable: false }
+   	      		            ],
+   	      		            lengthMenu: [
+   	      		                [50, 100, 200, 500, -1],
+   	      		                ['50 rows', '100 rows', '200 rows', 'Show all']
+   	      		            ],
+   	      		            scrollY: '100vh',
+   	      		            fixedColumns: {
+   	      		                left: 1,
+   	      		                right: 1
+   	      		            }
+   	      		            });
+            	        }
+            	        
+            	    }
+            	    else if (response.status === "nodata") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	                icon: 'warning',
+        	                title: 'No Data',
+        	                text: 'No data available for the selected criteria.'
+        	            });
+        	        }
+            	    else if (response.status === "error") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	            	icon: 'error',
+            	            title: 'Error',
+            	            text: response.message || 'Something went wrong!'
+        	            });
+        	        }
+            	    else {
+            	    	$('#pageLoader').hide();
+            	        Swal.fire({
+            	            icon: 'error',
+            	            title: 'Error',
+            	            text: response.message || 'Something went wrong!'
+            	        });
+            	    }
+            	},
+
+               error: function (error) {
+               	$('#pageLoader').hide();
+               	Swal.fire({
+    	            icon: 'error',
+    	            title: 'Error',
+    	            text: response.message || 'Something went wrong!'
+    	        });
+               }
+           });
+    	   
+  	 	});
+     	
+     });
+	 
+	 
+	</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/pgrcomplaints.html b/target/classes/templates/modules/callcenterqaqc/pgrcomplaints.html
new file mode 100644
index 0000000..a5935e1
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/pgrcomplaints.html
@@ -0,0 +1,1362 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<link
+	href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"
+	rel="stylesheet">
+<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">-->
+<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
+<script
+	src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+
+
+<style>
+.required {
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media ( max-width : 767px) {
+	#complaintform label {
+		margin-top: 10px;
+	}
+}
+
+.form-row {
+	margin-bottom: 20px;
+}
+
+.form-step {
+	display: none;
+}
+
+.form-step.active {
+	display: block;
+}
+
+.container {
+	max-width: 100%;
+}
+
+/*css for step 3*/
+.complaint-icons {
+	display: flex;
+	justify-content: space-around;
+	margin-bottom: 20px;
+}
+
+.complaint-icon {
+	text-align: center;
+	cursor: pointer;
+}
+
+.complaint-icon img {
+	width: 50px;
+	height: 50px;
+}
+
+.complaint-fields {
+	display: none;
+}
+
+.complaint-fields.active {
+	display: block;
+}
+
+/*for radio button style*/
+.radio-group {
+	display: flex;
+	align-items: center;
+	/* Ensures all items are aligned to the center */
+}
+
+.radio-item {
+	display: flex;
+	align-items: center;
+	margin-right: 20px;
+	/* Adds space between each radio item */
+}
+
+.radio-item input[type="radio"] {
+	margin-right: 10px;
+	/* Adds space between the radio button and its label */
+	vertical-align: middle;
+	/* Ensures vertical alignment */
+}
+
+.radio-item label {
+	margin: 0;
+	/* Removes any default margins that might affect alignment */
+}
+
+.back-button {
+	background: none;
+	border: none;
+	color: #000;
+	font-size: 16px;
+	cursor: pointer;
+	padding: 0;
+	margin-right: auto;
+	/* Align the button to the left */
+}
+
+.title {
+	text-align: center;
+	flex-grow: 1;
+	font-size: 24px;
+	font-weight: bold;
+	margin: 0;
+}
+
+/*css for map in step2*/
+#map {
+	height: 300px;
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+	max-width: 100%;
+}
+
+#search-container {
+	position: absolute;
+	top: 10px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 1000;
+	width: 500px;
+	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+	background-color: white;
+	border-radius: 4px;
+	padding: 0;
+	/* Removed extra padding to match the input width */
+}
+
+#search-box {
+	width: 100%;
+	/* Ensures the input takes up the entire width of the container */
+	padding: 5px;
+	font-size: 16px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	/* Rounded corners matching the container */
+	box-sizing: border-box;
+	/* Makes sure padding is considered in width */
+}
+
+#suggestions {
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	max-height: 200px;
+	overflow-y: auto;
+	margin-top: 5px;
+	background-color: white;
+	display: none;
+	width: 100%;
+	/* Matches the width of the container and input */
+	box-sizing: border-box;
+	/* Ensures the width includes borders and padding */
+}
+
+#suggestions ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+#suggestions ul li {
+	padding: 5px;
+	cursor: pointer;
+}
+
+#suggestions ul li:hover {
+	background-color: #f0f0f0;
+}
+
+#reader-btn, #invertColorBtn {
+	padding: 5px 10px;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+.loader {
+	border: 16px solid #f3f3f3;
+	/* Light grey */
+	border-top: 16px solid #3498db;
+	/* Blue */
+	border-radius: 50%;
+	width: 120px;
+	height: 120px;
+	animation: spin 2s linear infinite;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -60px 0 0 -100px;
+	/* Center the loader */
+	z-index: 9999;
+	/* Ensure it's on top of everything */
+	display: none;
+	/* Initially hidden */
+}
+
+@keyframes spin { 0% 
+{
+	transform: rotate(0deg);
+}
+
+100%
+{
+transform:rotate(360deg);
+}
+}
+
+#snackbar {
+			visibility: hidden;
+			min-width: 250px;
+			background-color: #333;
+			color: #fff;
+			text-align: center;
+			border-radius: 2px;
+			padding: 16px;
+			position: fixed;
+			z-index: 1;
+			left: 50%;
+			bottom: 30px;
+			font-size: 17px;
+			transform: translateX(-50%);
+		}
+
+		#snackbar.show {
+			visibility: visible;
+			-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+			animation: fadein 0.5s, fadeout 0.5s 2.5s;
+		}
+
+
+@-webkit-keyframes fadein {from { bottom:0;
+	opacity: 0;
+}
+
+to {
+	bottom: 30px;
+	opacity: 1;
+}
+
+}
+@keyframes fadein {from { bottom:0;
+	opacity: 0;
+}
+
+to {
+	bottom: 30px;
+	opacity: 1;
+}
+
+}
+@-webkit-keyframes fadeout {from { bottom:30px;
+	opacity: 1;
+}
+
+to {
+	bottom: 0;
+	opacity: 0;
+}
+
+}
+@keyframes fadeout {from { bottom:30px;
+	opacity: 1;
+}
+
+to {
+	bottom: 0;
+	opacity: 0;
+}
+}
+
+/*for snack bar*/
+</style>
+<body>
+<div id="snackbar"></div>
+
+	<!--[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]-->
+
+	<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-ticket-alt bg-blue"></i>
+									<div class="d-inline">
+										<h5>PGR Complaint Registration</h5>
+										<span>1913 PGR Complaint Registration</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">PGR Register Complaint</li>											
+										<li class="breadcrumb-item active" aria-current="page">Complaint Registration</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+
+					<div class="row inside mt-4">
+
+						<div class="col-md-12">
+							<div class="card" style="margin-top: 0px;">
+
+								<div class="card-body">
+
+
+									<!-- Step 1 -->
+									<!-- Step 1 -->
+									<div class=" form-step active" id="step-1">
+										<!-- <div class="card-body"> -->
+										<h5 class="card-title">1. Complaining Person's Details:</h5>
+										<div class="form-row">
+											<div class="col-md-4">
+												<label for="mobile">Mobile Number:<span class="required">*</span></label>
+												<div class="input-group">
+													<input type="text" id="mobileNo" name="mobileNo"
+														class="form-control mb-1"
+														placeholder="Enter Mobile Number" maxlength="10"
+														minlength="10" required>
+												</div>
+											</div>
+										</div>
+										<div class="form-row">
+											<div class="col-md-4">
+												<label for="name">Name:<span class="required">*</span></label>
+												 <input type="text" class="form-control" id="name"
+													placeholder="Enter your name" required>
+											</div>
+											
+											<div class="col-md-4">
+												<label for="gender" class="ml-4">Gender/பாலினம்:<span
+													class="required">*</span></label>
+												<div class="radio-group mt-2 ml-4">
+													<div class="radio-item">
+														<input type="radio" id="male" name="gender" value="male"
+															checked> <label for="male">Male</label>
+													</div>
+													<div class="radio-item">
+														<input type="radio" id="female" name="gender"
+															value="female"> <label for="female">Female</label>
+													</div>
+													<div class="radio-item">
+														<input type="radio" id="transgender" name="gender"
+															value="transgender"> <label for="transgender">Transgender</label>
+													</div>
+												</div>
+											</div>
+
+											<div class="col-md-4">
+												<label for="email">Email:</label> <input type="email"
+													class="form-control" id="email"
+													placeholder="Enter your email">
+											</div>
+										</div>
+										<button id="nextStep1" class="btn btn-primary float-right"
+											onclick="nextStep('nextStep1')"
+											style="background-color: #414f69;">Next</button>
+										<!-- </div> -->
+									</div>
+									<!--step-2-->
+									<div class=" form-step readable" id="step-2">
+										<!-- <div class="card-body"> -->
+										<h5 class="card-title">2. Complaint Location Details:</h5>
+										<div class="form-row">
+
+											<!-- loader section -->
+											<div id="loader" class="loader" style="display: none;"></div>
+
+											<!--map fields-->
+
+											<div class="col-md-12">
+												<div id="map"></div>
+												<div id="search-container">
+													<input type="text" id="search-box"
+														placeholder="Search for a location...">
+													<div id="suggestions"></div>
+												</div>
+												<div class="row">
+													<div class="col-md-6">
+														<label for="street">Street:</label> <input type="text"
+															class="form-control" id="street">
+													</div>
+
+													<div class="col-md-6">
+														<label for="longitude_field">Longtitude</label> <input
+															type="text" class="form-control" id="longitude_field"
+															name="longtitude">
+													</div>
+													<div class="col-md-6">
+														<label for="latitude_field">Latitide</label> <input
+															type="text" class="form-control" id="latitude_field">
+													</div>
+													<div class="col-md-6">
+														<label for="street_id">Street Id</label> <input
+															type="text" class="form-control" id="street_id">
+													</div>
+													<div class="col-md-6">
+														<label for="landmark">Landmark</label> <input type="text"
+															class="form-control" id="landmark">
+													</div>
+												</div>
+											</div>
+										</div>
+										<button id="prevStep2" class="btn btn-secondary"
+											onclick="prevStep('prevStep2')">Previous</button>
+										<button id="nextStep2" class="btn btn-primary float-right"
+											onclick="nextStep('nextStep2')"
+											style="background-color: #414f69;">Next</button>
+										<!-- </div> -->
+									</div>
+									<!-- Step 3 -->
+									<div class=" form-step active readable" id="step-3">
+										<div class="card-body">
+											<h5 class="card-title">3. Complaint Type:</h5>
+
+											<!-- Icons -->
+											<div class="complaint-icons">
+												<div class="complaint-icon" data-type="specific"
+													data-id="112">
+													<img src="/gcc/assets/images/road.png" alt="Pothole">
+													<p>Pothole</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="97">
+													<img src="/gcc/assets/images/recycle.png" alt="garbage">
+													<p>Garbage</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="104">
+													<img src="/gcc/assets/images/waste-bin.png" alt="broken-bin">
+													<p>Broken-Bin</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="146">
+													<img src="/gcc/assets/images/street-lamp.png" alt="StreetLight">
+													<p>StreetLight</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="199">
+													<img src="/gcc/assets/images/portable-bathroom.png"
+														alt="public-toilet">
+													<p>Public Toilet</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="118">
+													<img src="/gcc/assets/images/mosquito.png" alt="mosquito">
+													<p>Mosquito Menace</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="138">
+													<img src="/gcc/assets/images/tsunami.png" alt="waterstag">
+													<p>WaterStagnation</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="142">
+													<img src="/gcc/assets/images/sewage.png" alt="sewage">
+													<p>Storm Water Drains</p>
+												</div>
+												<div class="complaint-icon" data-type="specific"
+													data-id="119">
+													<img src="/gcc/assets/images/dog.png" alt="dog">
+													<p>Street Dog</p>
+												</div>
+												<!--<div class="complaint-icon" data-type="specific" data-id="">
+							<img src="images/bad-weather.png" alt="weather">
+							<p>Tree Fallen</p>
+						</div>-->
+
+												<div class="complaint-icon" data-type="others">
+													<img src="/gcc/assets/images/menu.png" alt="Others">
+													<p>Others</p>
+												</div>
+											</div>
+
+
+											<!-- Specific Complaint Fields -->
+											<div class="complaint-fields active" id="specific-fields">
+												<div class="form-row">
+													<div class="col-md-6">
+														<label for="complaint-title">Complaint Title:</label> <input
+															type="text" class="form-control" id="complaint-title"
+															placeholder="Enter complaint title">
+													</div>
+													<div class="col-md-6">
+														<label for="complaint-id">Complaint Type:</label> <input
+															type="text" class="form-control" id="complaint-id"
+															disabled>
+													</div>
+
+												</div>
+												<div class="form-row">
+													<div class="col-md-6">
+														<label for="othercomplaint-details">Details of
+															Complaint:</label>
+														<textarea class="form-control" id="othercomplaint-details"
+															rows="3" placeholder="Enter complaint details"
+															maxlength="400"></textarea>
+													</div>
+													<div class="col-md-6">
+														<label for="complaint-image">Upload Photo:</label> <input
+															type="file" class="form-control" id="complaint-image"
+															name="Comp_Image"> <span style="color: red;">
+															<p>Upload Photo Less Than 1mb*.</p>
+														</span>
+													</div>
+
+												</div>
+											</div>
+
+											<!-- Others Complaint Fields -->
+											<div class="complaint-fields" id="others-fields">
+												<div class="form-row">
+													<div class="col-md-4">
+														<label for="type">Type:</label> <select
+															class="form-control" id="type">
+															<option value="">Please Select</option>
+														</select>
+													</div>
+													<div class="col-md-4">
+														<label for="sub-type">Sub-Type:</label> <select
+															class="form-control" id="sub-type">
+															<option value="">Select complaint</option>
+														</select>
+													</div>
+													<div class="col-md-4">
+														<label for="uploadothers">Upload Photo:</label> <input
+															type="file" class="form-control" id="uploadothers"
+															accept="image/*"> <span style="color: red;">
+															<p>Upload Photo Less Than 1mb*.</p>
+														</span>
+													</div>
+												</div>
+												<div class="form-row">
+													<div class="col-md-6">
+														<label for="othercomplaintdetailsss">Details of
+															Complaint:</label>
+														<textarea class="form-control"
+															id="othercomplaintdetailsss" rows="3"
+															placeholder="Enter complaint details" maxlength="400"></textarea>
+													</div>
+												</div>
+											</div>
+
+
+											<button id="prevStep3" class="btn btn-secondary"
+												onclick="prevStep('prevStep3')">Previous</button>
+											<button id="nextStep3" class="btn btn-primary float-right"
+												onclick="nextStep('nextStep3')"
+												style="background-color: #414f69;">Next</button>
+										</div>
+									</div>
+
+									<!-- Step 4 -->
+									<div class=" form-step readable" id="step-4">
+										<div class="card-body">
+											<h5 class="card-title">4. Complaint Details:</h5>
+											<table class="table">
+												<tbody>
+													<tr>
+														<td><strong>Name</strong></td>
+														<td>: <span id="summaryName"></span></td>
+														<td><strong>Complaint Location</strong></td>
+														<td>: <span id="summaryStreet"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Mobile Number</strong></td>
+														<td>: <span id="summaryMobile"></span></td>
+														<td><strong>Email Address</strong></td>
+														<td>: <span id="summaryEmail"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Complaint Type</strong></td>
+														<td>: <span id="summaryComplaintType"></span></td>
+														<td><strong>Complaint Title</strong></td>
+														<td>: <span id="summaryComplaintTitle"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Description</strong></td>
+														<td>: <span id="summaryDescription"></span></td>
+														<td><strong>Street Id</strong></td>
+														<td>: <span id="summaryStreetId"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Landmark</strong></td>
+														<td>: <span id="summaryLandmark"></span></td>
+														<td><strong>Latitude</strong></td>
+														<td>: <span id="summaryLatitude"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Longitude</strong></td>
+														<td>: <span id="summaryLongitude"></span></td>
+														<td><strong>Gender</strong></td>
+														<td>: <span id="summaryGender"></span></td>
+													</tr>
+													<tr>
+														<td><strong>Image / Video</strong></td>
+														<td>: <img id="summaryImage" src="#"
+															alt="Uploaded Image/Video" width="100"
+															style="display: none;">
+														</td>
+													</tr>
+												</tbody>
+											</table>
+
+
+
+											<button id="prevStep4" class="btn btn-secondary"
+												onclick="prevStep('prevStep4')">Previous</button>
+
+
+											<button id="submitButton" class="btn btn-success float-right">Submit</button>
+
+										</div>
+									</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
+		src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+	<script
+		src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+	<script src="https://kit.fontawesome.com/a076d05399.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script th:src="@{/js/screenreader.js}"></script>
+
+	<script type="text/javascript">
+
+		//for snackbar script
+		 function showSnackbar(message) {
+			var snackbar = document.getElementById("snackbar");
+			snackbar.innerHTML = message;
+			snackbar.className = "show";
+			setTimeout(function () {snackbar.className = snackbar.className.replace("show", "");}, 3000);
+		} 
+
+		//for snackbar script
+
+		let currentStep = 1;
+		let mapInitialized = false;
+
+		function showStep(step) {
+			$('.form-step').removeClass('active');
+			$('#step-' + step).addClass('active');
+			/* updateProgressBar(step); */
+
+			if (step === 2 && !mapInitialized) {
+				document.getElementById('loader').style.display = 'block'; // Show loader before map initialization
+				setTimeout(initializeMap, 3000); // Load the map after 3 seconds
+				mapInitialized = true; // Ensure the map is only initialized once
+			}
+
+			// If we're on step 4, populate the summary fields
+			if (step === 4) {
+				populateSummary();
+			}
+		}
+
+		function nextStep() {
+			if (currentStep < 4) {
+				// Perform validation for the current step
+				if (validateStep(currentStep)) {
+					currentStep++;
+					showStep(currentStep);
+				}
+			}
+		}
+
+		function prevStep() {
+			if (currentStep > 1) {
+				currentStep--;
+				showStep(currentStep);
+			}
+		}
+
+		/* function updateProgressBar(step) {
+			const progress = (step / 4) * 100;
+			$('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
+		} */
+
+		function validateStep(step) {
+			let isValid = true;
+
+			if (step === 1) {
+				const mobileNo = $('#mobileNo').val().trim();
+				const name = $('#name').val().trim();
+				let email = $('#email').val().trim();
+
+				// Validate mobile number
+				if (mobileNo === '' || !/^\d{10}$/.test(mobileNo)) {
+					isValid = false;
+					showSnackbar("Please enter a valid 10-digit mobile number.");
+				}
+
+				// Validate name
+				if (name === '') {
+					isValid = false;
+					showSnackbar("Please enter your name.");
+				}
+
+				// Check email
+				if (email === '') {
+					email = 'N/A'; // Set N/A if empty
+					$('#email').val(email); // Update the input field with N/A
+				} else if (!/^\S+@\S+\.\S+$/.test(email)) {
+					isValid = false;
+					showSnackbar("Please enter a valid email address.");
+				}
+			} else if (step === 2) {
+				const street = $('#street').val().trim();
+				const longitude = $('#longitude_field').val().trim();
+				const latitude = $('#latitude_field').val().trim();
+				const streetId = $('#street_id').val().trim();
+				const landmark = $('#landmark').val().trim();
+
+				// Validate street
+				if (street === '') {
+					isValid = false;
+					showSnackbar("Please enter the street.");
+				}
+
+				// Validate longitude and latitude
+				if (longitude === '' || isNaN(longitude)) {
+					isValid = false;
+					showSnackbar("Please enter a valid longitude.");
+				}
+				if (latitude === '' || isNaN(latitude)) {
+					isValid = false;
+					showSnackbar("Please enter a valid latitude.");
+				}
+
+				// Validate street ID
+				if (streetId === '') {
+					isValid = false;
+					showSnackbar("Please enter the street ID.");
+				}
+
+				// Validate landmark
+				if (landmark === '') {
+					isValid = false;
+					showSnackbar("Please enter the landmark.");
+				}
+			}
+
+			return isValid;
+		}
+
+		function populateSummary() {
+			const name = $('#name').val();
+			const street = $('#street').val();
+			const mobileNo = $('#mobileNo').val();
+			const gender = $('input[name="gender"]:checked').val();
+			const email = $('#email').val();
+
+			// Check if 'specific-fields' is active and use its values
+			if ($('#specific-fields').hasClass('active')) {
+				const complaintTitle = $('#complaint-title').val();
+				const complaintid = $('#complaint-id').val();
+				const complaintDetails = $('#othercomplaint-details').val(); // Specific complaint details
+
+				$('#summaryComplaintTitle').text(complaintTitle);
+				$('#summaryComplaintType').text(complaintid);
+				$('#summaryDescription').text(complaintDetails);
+
+			} else if ($('#others-fields').hasClass('active')) {
+				const complaintTitle = $('#type').find('option:selected').text();
+				const complaintSubType = $('#sub-type').find('option:selected').text();
+				const complaintDetails = $('#othercomplaintdetailsss').val(); // Others complaint details
+
+				$('#summaryComplaintTitle').text(complaintTitle + ' - ' + complaintSubType);
+				$('#summaryComplaintType').text('Other Complaint');
+				$('#summaryDescription').text(complaintDetails);
+			}
+
+
+			const streetid = $('#street_id').val();
+			const landmark = $('#landmark').val();
+			const latitude = $('#latitude_field').val();
+			const longtitude = $('#longitude_field').val();
+
+			$('#summaryName').text(name);
+			$('#summaryStreet').text(street);
+			$('#summaryMobile').text(mobileNo);
+			$('#summaryGender').text(gender);
+			$('#summaryEmail').text(email);
+			$('#summaryStreetId').text(streetid);
+			$('#summaryLandmark').text(landmark);
+			$('#summaryLatitude').text(latitude);
+			$('#summaryLongitude').text(longtitude);
+
+			// Handle image preview
+			/*		const fileInput = $('#complaint-image')[0];  // Assuming this is for the "Others" section
+					if (fileInput.files && fileInput.files[0]) {
+						const reader = new FileReader();
+						reader.onload = function (e) {
+							$('#summaryImage').attr('src', e.target.result).show();
+						}
+						reader.readAsDataURL(fileInput.files[0]);
+					} else {
+						$('#summaryImage').hide();
+					}*/
+
+			// If there's a separate image input for the specific form, handle it similarly:
+			// Check if specific fields section is active
+			if ($('#specific-fields').hasClass('active')) {
+				const specificFileInput = $('#complaint-image')[0]; // Example ID for specific form
+				if (specificFileInput.files && specificFileInput.files[0]) {
+					const reader = new FileReader();
+					reader.onload = function (e) {
+						$('#summaryImage').attr('src', e.target.result).show();
+					};
+					reader.readAsDataURL(specificFileInput.files[0]);
+				} else {
+					$('#summaryImage').hide(); // Hide the image if no file is selected
+				}
+			}
+			// Check if "Others" section is active
+			else if ($('#others-fields').hasClass('active')) {
+				const fileInput = $('#uploadothers')[0]; // Assuming this is for the "Others" section
+				if (fileInput.files && fileInput.files[0]) {
+					const reader = new FileReader();
+					reader.onload = function (e) {
+						$('#summaryImage').attr('src', e.target.result).show();
+					};
+					reader.readAsDataURL(fileInput.files[0]);
+				} else {
+					$('#summaryImage').hide(); // Hide the image if no file is selected
+				}
+			} else {
+				$('#summaryImage').hide(); // Default hide if no section is active
+			}
+
+
+
+
+
+		}
+
+
+		$(document).ready(function () {
+			showStep(currentStep);
+		});
+
+
+
+
+
+		$(document).ready(function () {
+			showStep(currentStep);
+		});
+
+
+		//for step3 onclick function
+		$(document).ready(function () {
+			// On icon click
+			$('.complaint-icon').click(function () {
+				const type = $(this).data('type'); // Get the type (specific or others)
+				const title = $(this).find('p').text().trim(); // Get the icon name (complaint title)
+				const complaintId = $(this).data('id'); // Get the complaint ID
+
+				// Toggle complaint fields based on type
+				$('.complaint-fields').removeClass('active');
+
+				if (type === 'specific') {
+					$('#specific-fields').addClass('active'); // Show specific fields form
+					$('#others-fields').removeClass('active'); // Hide others form
+					$('#complaint-title').val(title); // Set the complaint title to the icon name
+					$('#complaint-id').val(complaintId); // Set the complaint ID to the corresponding ID
+				} else if (type === 'others') {
+					$('#others-fields').addClass('active'); // Show others form
+					$('#specific-fields').removeClass('active'); // Hide specific fields form
+					$('#complaint-title').val(''); // Clear the complaint title for 'Others'
+					$('#complaint-id').val(''); // Clear the complaint ID for 'Others'
+				}
+			});
+		});
+
+
+
+		//for complaint group and complainttype wise options dropdown api
+		$(document).ready(function () {
+			const $type = $('#type');
+			const $subType = $('#sub-type');
+
+			$subType.prop('disabled', true);
+
+			// Fetch and populate the Type dropdown
+			$.ajax({
+				url: '/gcc/api/callcenterqaqc/pgrcomplaint/getComplaintCategories',
+				method: 'GET',
+				success: function (response) {
+
+					const data = typeof response === 'string' ? JSON.parse(response) : response;
+					//console.log('Response:', response); // Log the response to verify
+					let optionsHtml = '<option value="">Please Select</option>';
+					data.ComplaintCategoryListResult.forEach(function (group) {
+						optionsHtml += `<option value="${group.groupid}">${group.groupname}</option>`;
+					});
+					$type.html(optionsHtml);
+				},
+				error: function (error) {
+					console.error('Error fetching complaint categories:', error);
+				}
+			});
+
+			// Handle Type dropdown change
+			$type.change(function () {
+				const selectedType = $(this).val();
+				$subType.empty().append('<option value="">Select complaint</option>');
+
+				if (selectedType) {
+
+					$.ajax({
+						url: `/gcc/api/callcenterqaqc/pgrcomplaint/getComplaintSubTypes?groupId=${selectedType}`,
+						method: 'GET',
+						success: function (response) {
+							const data = typeof response === 'string' ? JSON.parse(response) : response;
+							const selectedGroup = data.ComplaintCategoryListResult[0];
+
+							//console.log(data);
+
+
+							if (selectedGroup && selectedGroup.group) {
+								$subType.prop('disabled', false);
+								selectedGroup.group.forEach(function (complaint) {
+									$subType.append(`<option value="${complaint.id}">${complaint.complaintname}</option>`);
+								});
+							} else {
+								$subType.prop('disabled', true);
+							}
+						},
+						error: function (error) {
+							console.error('Error fetching sub-types:', error);
+							$subType.prop('disabled', true);
+						}
+					});
+				} else {
+					$subType.prop('disabled', true);
+				}
+			});
+		});
+
+		//api for saving
+		//for sweet alert
+		/* function showSuccessAlert() {
+			Swal.fire({
+				icon: 'success',
+				title: 'Complaint Registration Success',
+				text: 'Complaint Number 123456. Use this Number for Complaint Status Check.',
+				confirmButtonText: 'Back to Home',
+				confirmButtonColor: '#3085d6',
+			}).then((result) => {
+				if (result.isConfirmed) {
+					window.location.href = 'home';
+				}
+			});
+		} */
+
+
+		//Script For Map
+
+		var suggestedRoadName;
+		var suggestedWard;
+		var suggestedZone;
+		var suggestedRoadId;
+
+		function initializeMap() {
+			// Create the map
+			var map = L.map('map', {attributionControl: false}).setView([13.0827, 80.2707], 9);
+
+			// Add tile layer and track loading status
+			var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+				maxZoom: 19,
+				attributionControl: false,
+			}).addTo(map);
+
+			// Hide loader once the map tiles are fully loaded
+			tileLayer.on('load', function () {
+				document.getElementById('loader').style.display = 'none';
+				document.getElementById('map').style.visibility = 'visible'; // Ensure map is visible
+			});
+
+			var currentMarker = null;
+
+			// Handle map click events
+			map.on('click', function (e) {
+				var lat = e.latlng.lat;
+				var lng = e.latlng.lng;
+
+				if (currentMarker) {
+					map.removeLayer(currentMarker);
+				}
+
+				currentMarker = L.marker([lat, lng]).addTo(map);
+
+				fetchLocationInfoByMap(lat, lng, currentMarker);
+			});
+
+			// Handle input events in the search box
+			document.getElementById('search-box').addEventListener('input', function () {
+				var query = this.value.trim();
+				if (query.length > 2) {
+					fetchSuggestions(query);
+				} else {
+					document.getElementById('suggestions').style.display = 'none';
+				}
+			});
+
+			// Handle click events on suggestions
+			document.getElementById('suggestions').addEventListener('click', function (e) {
+				if (e.target.tagName === 'LI') {
+					var latlngArray = JSON.parse(e.target.dataset.latlng);
+
+					suggestedRoadId = e.target.dataset.roadId;
+					suggestedRoadName = e.target.dataset.roadName;
+					suggestedWard = e.target.dataset.ward;
+					suggestedZone = e.target.dataset.zone;
+
+					// Check if the data is in the correct format
+					if (Array.isArray(latlngArray) && latlngArray.every(item => Array.isArray(item) && item.length === 2 && typeof item[0] === 'number' && typeof item[1] === 'number')) {
+
+						// Calculate the average latitude and longitude
+						var totalLat = 0;
+						var totalLng = 0;
+						latlngArray.forEach(function (coords) {
+							totalLat += coords[1]; // Latitude
+							totalLng += coords[0]; // Longitude
+						});
+
+						var avgLat = totalLat / latlngArray.length;
+						var avgLng = totalLng / latlngArray.length;
+
+						var latlng = [avgLat, avgLng];
+						map.setView(latlng, 14);
+
+						if (currentMarker) {
+							map.removeLayer(currentMarker);
+						}
+
+						currentMarker = L.marker(latlng).addTo(map);
+
+						fetchLocationInfoBySuggestions(latlng[0], latlng[1], currentMarker);
+
+						// Clear the search box value
+						document.getElementById('search-box').value = '';
+
+						// Hide the suggestions
+						document.getElementById('suggestions').style.display = 'none';
+					} else {
+						// Convert the incorrect format into the correct format
+						const flattenCoordinates = (data) => {
+							return data.reduce((acc, item) => {
+								if (Array.isArray(item) && Array.isArray(item[0])) {
+									// If item is a nested array, flatten it
+									acc.push(...flattenCoordinates(item));
+								} else if (Array.isArray(item) && item.length === 2 && typeof item[0] === 'number' && typeof item[1] === 'number') {
+									// If item is a coordinate pair, add it to the list
+									acc.push(item);
+								}
+								return acc;
+							}, []);
+						};
+
+						// Flatten the nested latlngArray
+						var flattenedLatlngArray = flattenCoordinates(latlngArray);
+
+						// Now, continue with the same logic as before
+						var totalLat = 0;
+						var totalLng = 0;
+						flattenedLatlngArray.forEach(function (coords) {
+							totalLat += coords[1]; // Latitude
+							totalLng += coords[0]; // Longitude
+						});
+
+						var avgLat = totalLat / flattenedLatlngArray.length;
+						var avgLng = totalLng / flattenedLatlngArray.length;
+
+						var latlng = [avgLat, avgLng];
+						map.setView(latlng, 14);
+
+						if (currentMarker) {
+							map.removeLayer(currentMarker);
+						}
+
+						currentMarker = L.marker(latlng).addTo(map);
+
+						fetchLocationInfoBySuggestions(latlng[0], latlng[1], currentMarker);
+
+						// Clear the search box value
+						document.getElementById('search-box').value = '';
+
+						// Hide the suggestions
+						document.getElementById('suggestions').style.display = 'none';
+					}
+				}
+			});
+		}
+
+		function fetchSuggestions(query) {
+			// ArcGIS API URL to fetch suggestions based on the input query
+			const arcgisSuggestionUrl = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/Hosted/Road_API/FeatureServer/0/query?where=UPPER(road_name)%20LIKE%20'%25${query.toUpperCase()}%25'&outFields=road_name,zone,ward,road_id&returnGeometry=true&f=geojson`;
+
+			fetch(arcgisSuggestionUrl)
+				.then(response => response.json())
+				.then(data => {
+					var suggestions = document.getElementById('suggestions');
+					suggestions.innerHTML = '';
+
+					if (data.features && data.features.length > 0) {
+						suggestions.style.display = 'block';
+						var ul = document.createElement('ul');
+						data.features.forEach(function (result) {
+							var lat = result.geometry.coordinates[1];
+							var lng = result.geometry.coordinates[0];
+							var roadName = result.properties.road_name || 'Unknown Road';
+							var zone = result.properties.zone || 'Unknown Zone';
+							var ward = result.properties.ward || 'Unknown Ward';
+							var roadId = result.properties.road_id || 'Unknown Road ID'
+
+							// Creating the suggestion item with road name, zone, and ward
+							var li = document.createElement('li');
+							li.textContent = `${roadName} - Zone: ${zone}, Ward: ${ward}`;
+							li.dataset.latlng = JSON.stringify([lat, lng]);
+							li.dataset.roadName = roadName;
+							li.dataset.roadId = roadId;
+							li.dataset.zone = zone;
+							li.dataset.ward = ward;
+							ul.appendChild(li);
+						});
+						suggestions.appendChild(ul);
+					} else {
+						suggestions.style.display = 'none';
+					}
+				})
+				.catch(error => console.error('Error fetching suggestions:', error));
+		}
+
+		function fetchLocationInfoByMap(lat, lng, marker) {
+			const arcgisUrl = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/Hosted/Road_API/FeatureServer/0/query?where=&objectIds=&time=&geometry=%7B%22y%22%3A${lat}%2C%22x%22%3A${lng}%7D&geometryType=esriGeometryEnvelope&inSR=4326&defaultSR=4326&spatialRel=esriSpatialRelIntersects&distance=25&units=esriSRUnit_Meter&relationParam=&outFields=zone%2Cward%2Croad_id%2Croad_name&returnGeometry=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&gdbVersion=&historicMoment=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=xyFootprint&resultOffset=&resultRecordCount=&returnTrueCurves=false&returnCentroid=false&timeReferenceUnknownClient=false&maxRecordCountFactor=&sqlFormat=none&resultType=&datumTransformation=&lodType=geohash&lod=&lodSR=&f=geojson`;
+
+			fetch(arcgisUrl)
+				.then(response => response.json())
+				.then(data => {
+					console.log(data);
+					let info;
+					if (data.features && data.features.length > 0) {
+						const properties = data.features[0].properties;
+						const roadName = properties.road_name || 'N/A';
+						const zone = properties.zone || 'N/A';
+						const ward = properties.ward || 'N/A';
+						const roadId = properties.road_id || 'N/A';
+
+						info = `Road Name: ${roadName}<br>Zone: ${zone}<br>Ward: ${ward}<br>Latitude: ${lat}<br>Longitude: ${lng}`;
+						document.getElementById("street").value = roadName;
+						document.getElementById("latitude_field").value = lat;
+						document.getElementById("longitude_field").value = lng;
+						document.getElementById("street_id").value = roadId;
+						document.getElementById("landmark").value = roadName;
+						marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
+					} else {
+						document.getElementById("street").value = "No road data found for this location";
+						document.getElementById("latitude_field").value = "No latitude data found for this location";
+						document.getElementById("longitude_field").value = "No latitude data found for this location";
+						document.getElementById("street_id").value = "No street id data found for this location";
+						document.getElementById("landmark").value = "No landmark data found for this location";
+						info = `No road data found for this location`
+						marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
+					}
+				})
+				.catch(error => {
+					console.error('Error fetching road data:', error);
+					marker.bindTooltip(`Error fetching road data.<br>Latitude: ${lat}<br>Longitude: ${lng}`, {permanent: false, direction: 'top'}).openTooltip();
+				});
+		}
+
+		function fetchLocationInfoBySuggestions(lat, lng, marker) {
+			const arcgisUrl = `https://gisgcc.chennaicorporation.gov.in/server/rest/services/Hosted/Road_API/FeatureServer/0/query?where=&objectIds=&time=&geometry=%7B%22y%22%3A${lat}%2C%22x%22%3A${lng}%7D&geometryType=esriGeometryEnvelope&inSR=4326&defaultSR=4326&spatialRel=esriSpatialRelIntersects&distance=25&units=esriSRUnit_Meter&relationParam=&outFields=zone%2Cward%2Croad_id%2Croad_name&returnGeometry=false&maxAllowableOffset=&geometryPrecision=&outSR=&havingClause=&gdbVersion=&historicMoment=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&multipatchOption=xyFootprint&resultOffset=&resultRecordCount=&returnTrueCurves=false&returnCentroid=false&timeReferenceUnknownClient=false&maxRecordCountFactor=&sqlFormat=none&resultType=&datumTransformation=&lodType=geohash&lod=&lodSR=&f=geojson`;
+
+			fetch(arcgisUrl)
+				.then(response => response.json())
+				.then(data => {
+					console.log(data);
+					let info;
+					if (data.features && data.features.length > 0) {
+						const properties = data.features[0].properties;
+						const roadName = properties.road_name || 'N/A';
+						const zone = properties.zone || 'N/A';
+						const ward = properties.ward || 'N/A';
+						const roadId = properties.road_id || 'N/A';
+
+						info = `Road Name: ${roadName}<br>Zone: ${zone}<br>Ward: ${ward}<br>Latitude: ${lat}<br>Longitude: ${lng}`;
+						document.getElementById("street").value = roadName;
+						document.getElementById("latitude_field").value = lat;
+						document.getElementById("longitude_field").value = lng;
+						document.getElementById("street_id").value = roadId;
+						document.getElementById("landmark").value = roadName;
+						marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
+					} else {
+						document.getElementById("street").value = suggestedRoadName;
+						document.getElementById("latitude_field").value = lat;
+						document.getElementById("longitude_field").value = lng;
+						document.getElementById("street_id").value = suggestedRoadId;
+						document.getElementById("landmark").value = suggestedRoadName;
+						info = `Road Name: ${suggestedRoadName}<br>Zone: ${suggestedZone}<br>Ward: ${suggestedWard}<br>Latitude: ${lat}<br>Longitude: ${lng}`
+						marker.bindTooltip(info, {permanent: false, direction: 'top'}).openTooltip();
+					}
+				})
+				.catch(error => {
+					console.error('Error fetching road data:', error);
+					marker.bindTooltip(`Error fetching road data.<br>Latitude: ${lat}<br>Longitude: ${lng}`, {permanent: false, direction: 'top'}).openTooltip();
+				});
+		}
+		
+		$(document).ready(function () {
+			$('#submitButton').click(function (e) {
+				e.preventDefault(); // Prevent the default form submission
+
+				// Collect data from the form fields
+				var complainantName = $('#summaryName').text().trim();
+				var complainantAddr = $('#summaryStreet').text().trim();
+				var mobileNo = $('#summaryMobile').text().trim();
+				var email = $('#summaryEmail').text().trim();
+				var complaintType = $('#summaryComplaintType').text().trim();
+				var complaintTitle = $('#summaryComplaintTitle').text().trim();
+				var complaintDetails = $('#summaryDescription').text().trim();
+				var streetId = $('#summaryStreetId').text().trim();
+				var landmark = $('#summaryLandmark').text().trim();
+				var latitude = $('#summaryLatitude').text().trim();
+				var longtitude = $('#summaryLongitude').text().trim(); // Note the misspelling
+				var gender = $('#summaryGender').text().trim();
+				var imageSrc = $('#summaryImage').attr('src');
+
+				/* console.log({
+					ComplainantName: complainantName,
+					ComplainantAddr: complainantAddr,
+					MobileNo: mobileNo,
+					Email: email,
+					ComplaintType: complaintType,
+					ComplaintTitle: complaintTitle,
+					ComplaintDetails: complaintDetails,
+					StreetId: streetId,
+					Comp_Image: imageSrc,
+					latitude: latitude,
+					longtitude: longtitude,
+					Landmark: landmark,
+					gender: gender
+				}); */
+
+				// AJAX call to your backend controller
+				$.ajax({
+					url: '/gcc/api/callcenterqaqc/pgrcomplaint/register', // Update to your Spring Boot endpoint
+					type: 'POST',
+					data: {
+						ComplainantName: complainantName,
+						ComplainantAddr: complainantAddr,
+						MobileNo: mobileNo,
+						Email: email,
+						ComplaintType: complaintType,
+						ComplaintTitle: complaintTitle,
+						ComplaintDetails: complaintDetails,
+						StreetId: streetId,
+						Comp_Image: imageSrc,
+						latitude: latitude,
+						longtitude: longtitude,
+						Landmark: landmark,
+						gender: gender
+					},
+					success: function (response) {
+						// SweetAlert upon success
+						 //console.log("API Response:", response);
+						// Ensure response is a JavaScript object
+						    if (typeof response === "string") {
+						        try {
+						            response = JSON.parse(response);
+						        } catch (error) {
+						            console.error("Failed to parse response:", error);
+						        }
+						    }
+						
+						 // Access the Complaint Number safely
+						    let complaintNumber = response["Complaint Number"];
+						    if (!complaintNumber || complaintNumber === "null" || complaintNumber === null) {
+						        complaintNumber = "N/A";
+						    }
+						
+						Swal.fire({
+							title: 'Success!',
+					        text: `Your complaint has been submitted successfully. Your Complaint Number is ${complaintNumber}. It will be sent to your mobile number.`,
+							icon: 'success',
+							allowOutsideClick: false, // Disable clicking outside the modal to close it
+		                    allowEscapeKey: false, // Disable escape key to close the modal
+		                    allowEnterKey: false, // Disable enter key to close the modal
+		                    showConfirmButton: true, // Ensure the confirm button is visible
+							confirmButtonText: 'OK'
+						}).then((result) => {
+							if (result.isConfirmed) {
+								
+								window.location.href = '/gcc/callcenterqaqc/pgrcomplaint';
+							}
+						});
+					},
+					error: function (xhr, status, error) {
+						// Improved error handling
+						console.log('Error:', xhr.responseText, status, error);
+						alert('Error: ' + xhr.status + ' ' + xhr.statusText);
+					}
+				});
+			});
+		});
+        
+
+		/*     html: `Your complaint has been submitted successfully. Your Complaint Number is <strong>${complaintNumber}</strong>. It will be sent to your mobile number.`, */
+        </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/qaqcadminsettings.html b/target/classes/templates/modules/callcenterqaqc/qaqcadminsettings.html
new file mode 100644
index 0000000..d0a67ed
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/qaqcadminsettings.html
@@ -0,0 +1,476 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.required{
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media (max-width: 767px) 
+{
+	#qaqcRequestForm label{
+		margin-top: 10px;
+	} 
+}
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-edit bg-blue"></i>
+									<div class="d-inline">	
+										<h5>Admin Settings</h5>
+										<span>1913 Admin Setting for Select Agents inbound or outbound</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">Admin Settings</li>
+										<li class="breadcrumb-item active" aria-current="page">Admin Settings</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                        
+                      
+                      <div class="row mt-4">
+                      
+
+					
+						<div class="col-md-12">
+							<div class="card" style="margin-top: 0px;">
+								<div class="card-header justify-content-between align-items-center">
+									<h3><b>Admin Settings</b></h3>
+									
+								</div>
+								<div class="card-body">
+								
+									 
+									    <div class="form-group">  
+										    <div class="row">
+										        <div class="col-sm-12 col-md-3">
+										            <label for="productivity_count">Productivity Count Per Agent<span class="required">*</span></label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="productivity_count" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].productivity_count : 0}" 
+										                >
+										        </div>	
+										        <div class="col-sm-12 col-md-3">
+										            <label for="total_count">Total Agents</label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="total_count" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].total_count : 0}" 
+										                readonly>
+										        </div>
+										        <div class="col-sm-12 col-md-3">
+										            <label for="assigned">Assigned Agents</label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="assigned" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].assigned : 0}" 
+										                readonly>
+										        </div>
+										        <div class="col-sm-12 col-md-3">
+										            <label for="notassigned">Not Assigned Agents</label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="notassigned" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].notassigned : 0}" 
+										                readonly>
+										        </div>
+										        
+										        
+										    </div>
+										    
+										    <div class="row mt-3">
+										    	<div class="col-sm-12 col-md-3">
+										            <label for="inbound_count">Inbound Agents</label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="inbound_count" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].inbound_count : 0}" 
+										                readonly>
+										        </div>
+										        
+										        <div class="col-sm-12 col-md-3">
+										            <label for="outbound_count">Outbound Agents</label>
+										            <input 
+										                type="number" 
+										                class="form-control" 
+										                id="outbound_count" 
+										                th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].outbound_count : 0}" 
+										                readonly>
+										        </div>
+										    </div>
+										</div>
+									
+									    <div class="form-group text-center">
+									        <button type="submit" class="btn btn-primary" id="requestSubmit">Submit</button>
+									    </div>																	
+								</div>
+							</div>
+						</div>
+						
+						
+						
+						<div class="col-md-12">
+						    <div class="card">
+						        <div class="card-block">
+						            <div class="page-header-title">
+						                <h5 style="margin: 0; font-weight: bold;">Agent List</h5>
+						                <hr>
+						            </div>
+						
+						            <div>
+						                <table id="QaqcDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+						                    <thead class="thead-dark">
+						                        <tr role="row">
+						                            <th class="text-center">S.No</th> 
+						                            <th class="text-center">Agent ID</th> 
+						                            <th class="text-center">Name</th> 
+						                            <th class="text-center">Phone No</th>
+						                            <th class="text-center">
+											            <div class="d-inline-flex align-items-center">
+											                <input type="checkbox" id="selectAllInbound" title="Select All InBound" style="margin-right: 5px;">
+											                <span>InBound</span>
+											            </div>
+											        </th>
+											        <th class="text-center">
+											            <div class="d-inline-flex align-items-center">
+											                <input type="checkbox" id="selectAllOutbound" title="Select All OutBound" style="margin-right: 5px;">
+											                <span>OutBound</span>
+											            </div>
+											        </th>
+						                        </tr>
+						                    </thead>
+						                    <tbody>
+						                        <!-- Populate the table dynamically using Thymeleaf -->
+						                        <tr th:each="agent, iterStat : ${Agents}">
+						                            <td th:text="${iterStat.index + 1}" class="text-center"></td>
+						                            <td th:text="${agent.agent_id}" class="text-center"></td>
+						                            <td th:text="${agent.agent_name}" class="text-center"></td>
+						                            <td th:text="${agent.mobile_number}" class="text-center"></td>
+						                            <td class="text-center">
+						                                <!-- Inbound checkbox, checked if calling_type is INBOUND -->
+						                                <input type="checkbox" th:id="'inbound_' + ${agent.agent_id}" th:checked="${'INBOUND'.equals(agent.calling_type)}">
+						                            </td>
+						                            <td class="text-center">
+						                                <!-- Outbound checkbox, checked if calling_type is OUTBOUND -->
+						                                <input type="checkbox" th:id="'outbound_' + ${agent.agent_id}" th:checked="${'OUTBOUND'.equals(agent.calling_type)}">
+						                            </td>
+						                        </tr>
+						                    </tbody>
+						                </table>
+						
+						                <!-- Center the Submit button -->
+						                <div class="text-center">
+						                    <button type="button" class="btn btn-primary" id="submitBtn">Click to Assign</button>
+						                </div>
+						            </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 src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        
+        <script type="text/javascript">
+        $(document).ready(function() {
+
+        	var table = $('#QaqcDatatable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                ],
+                scrollY: '50vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: [
+                    {
+                        extend: 'pageLength',
+                        className: 'btn btn-warning'
+                    },
+                    {
+                        title: 'Data export',
+                        extend: 'copyHtml5',
+                        text: 'Copy',
+                        className: 'btn btn-secondary',
+                        id: 'copyBtn'
+                    },
+                    {
+                        extend: 'excelHtml5',
+                        text: 'Excel',
+                        className: 'btn btn-secondary',
+                        id: 'excelBtn'
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        text: 'CSV',
+                        className: 'btn btn-secondary',
+                        id: 'csvBtn'
+                    },
+                    {
+                        extend: 'pdfHtml5',
+                        text: 'PDF',
+                        className: 'btn btn-secondary',
+                        id: 'pdfBtn'
+                    }
+                ],
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false
+            });
+        });
+        
+        $(document).ready(function () {
+            let lastClickedColumn = null; // Track the last clicked "Select All" checkbox
+
+            // Handle "Select All" for InBound
+            $('#selectAllInbound').on('change', function () {
+                if (this.checked) {
+                    // Uncheck the "Select All" checkbox in the OutBound column
+                    $('#selectAllOutbound').prop('checked', false);
+                    lastClickedColumn = 'Inbound';
+
+                    // Check all checkboxes in the InBound column
+                    $('#QaqcDatatable tbody input[id^="inbound_"]').prop('checked', true);
+
+                    // Uncheck all checkboxes in the OutBound column
+                    $('#QaqcDatatable tbody input[id^="outbound_"]').prop('checked', false);
+                } else {
+                    // Uncheck all checkboxes in the InBound column
+                    $('#QaqcDatatable tbody input[id^="inbound_"]').prop('checked', false);
+                }
+            });
+
+            // Handle "Select All" for OutBound
+            $('#selectAllOutbound').on('change', function () {
+                if (this.checked) {
+                    // Uncheck the "Select All" checkbox in the InBound column
+                    $('#selectAllInbound').prop('checked', false);
+                    lastClickedColumn = 'Outbound';
+
+                    // Check all checkboxes in the OutBound column
+                    $('#QaqcDatatable tbody input[id^="outbound_"]').prop('checked', true);
+
+                    // Uncheck all checkboxes in the InBound column
+                    $('#QaqcDatatable tbody input[id^="inbound_"]').prop('checked', false);
+                } else {
+                    // Uncheck all checkboxes in the OutBound column
+                    $('#QaqcDatatable tbody input[id^="outbound_"]').prop('checked', false);
+                }
+            });
+
+            // Ensure individual checkboxes deselect the "Select All" if unchecked
+            $('#QaqcDatatable').on('change', 'input[id^="inbound_"], input[id^="outbound_"]', function () {
+                const agentId = $(this).closest('tr').find('td:eq(1)').text().trim();
+
+                // Uncheck "Select All" if any checkbox in its column is deselected
+                if ($(this).attr('id').includes('inbound')) {
+                    if (!this.checked) {
+                        $('#selectAllInbound').prop('checked', false);
+                    }
+                    $('#outbound_' + agentId).prop('checked', false);
+                } else if ($(this).attr('id').includes('outbound')) {
+                    if (!this.checked) {
+                        $('#selectAllOutbound').prop('checked', false);
+                    }
+                    $('#inbound_' + agentId).prop('checked', false);
+                }
+            });
+        });
+
+                
+        $(document).ready(function () {
+            // Ensure only one checkbox is selected at a time (Inbound or Outbound)
+            $('#QaqcDatatable').on('change', 'input[type="checkbox"]', function () {
+                var agentId = $(this).closest('tr').find('td:eq(1)').text().trim(); // Get agent_id from the second column
+                if ($(this).attr('id').includes('inbound')) {
+                    // If Inbound checkbox is selected, uncheck Outbound
+                    $('#outbound_' + agentId).prop('checked', false);
+                } else if ($(this).attr('id').includes('outbound')) {
+                    // If Outbound checkbox is selected, uncheck Inbound
+                    $('#inbound_' + agentId).prop('checked', false);
+                }
+            });
+           
+            
+
+            $('#submitBtn').click(function () {
+                var selectedAgents = [];
+                $('#QaqcDatatable tbody tr').each(function () {
+                    var agentId = $(this).find('td:eq(1)').text().trim(); // Get agent_id from the second column
+                    var isInboundChecked = $(this).find('input[id="inbound_' + agentId + '"]').prop('checked');
+                    var isOutboundChecked = $(this).find('input[id="outbound_' + agentId + '"]').prop('checked');
+
+                    // Set calling_type based on the checked checkboxes
+                    var callingType = null;
+                    if (isInboundChecked) {
+                        callingType = 'INBOUND';
+                    } else if (isOutboundChecked) {
+                        callingType = 'OUTBOUND';
+                    }
+
+                 // Add agent object to the array with agent_id and calling_type
+                    selectedAgents.push({ agent_id: parseInt(agentId, 10), calling_type: callingType });
+                });
+
+                
+
+                // Check if no agents were selected and show an alert
+                if (selectedAgents.length === 0) {
+                    Swal.fire({
+                        icon: 'warning',
+                        title: 'No Selection',
+                        text: 'Please select at least one agent to proceed.',
+                    });
+                    return; // Stop further execution
+                }
+
+                // Send the selected agents and their calling types to the API
+                $.ajax({
+                    type: "POST",
+                    url: "/gcc/api/callcenterqaqc/adminsettings/updateCallType", // Your API endpoint
+                    data: JSON.stringify(selectedAgents),
+                    contentType: "application/json",
+                    success: function (response) {
+                        // Success: Show success message with Swal
+                        Swal.fire({
+                            icon: 'success',
+                            title: 'Success',
+                            text: response.message || 'Agents Assigned Successfully',
+                        }).then(function () {
+                            // Reload the page after the Swal is closed
+                            location.reload();
+                        });
+                    },
+                    error: function (error) {
+                        // Error: Show error message with Swal
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Error',
+                            text: error.responseJSON.message || 'Error in Assigning Agents',
+                        });
+                    }
+                });
+            });
+
+        });
+        
+        $(document).ready(function () {
+            $('#requestSubmit').click(function (event) {
+                event.preventDefault(); // Prevent form submission if it's inside a form
+                
+             // Get the productivity_count value from the input field
+                let productivityCount = $('#productivity_count').val();
+
+                // Check if the value is null, empty, or NaN
+                if (!productivityCount || isNaN(parseInt(productivityCount, 10))) {
+                    // Show an error message using Swal
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Invalid Input',
+                        text: 'Please enter a valid productivity count.',
+                    });
+                    return; // Stop further execution
+                }
+
+                // Parse productivityCount as an integer
+                productivityCount = parseInt(productivityCount, 10);
+
+                // Prepare the data to send
+                const data = { productivity_count: productivityCount };
+
+                // Send the data to the API using AJAX
+                $.ajax({
+                    type: "POST",
+                    url: "/gcc/api/callcenterqaqc/adminsettings/updateproductivity", // Replace with your API endpoint
+                    data: JSON.stringify(data),
+                    contentType: "application/json",
+                    success: function (response) {
+                        // Show a success message using Swal
+                        Swal.fire({
+                            icon: 'success',
+                            title: 'Success',
+                            text: response.message || 'Productivity updated successfully!',
+                        }).then(function () {
+                            // Reload the page after the Swal is closed
+                            location.reload();
+                        
+                        });
+                    },
+                    error: function (error) {
+                        // Show an error message using Swal
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Error',
+                            text: error.responseJSON?.message || 'Failed to update productivity!',
+                        });
+                    }
+                });
+            });
+        });
+
+
+                            	            
+
+		
+        </script>
+        
+    </body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/qaqcagentperformance.html b/target/classes/templates/modules/callcenterqaqc/qaqcagentperformance.html
new file mode 100644
index 0000000..92a9360
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/qaqcagentperformance.html
@@ -0,0 +1,730 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+
+    #QaqcDatatable th, #QaqcDatatable td {
+        text-align: center;
+    }
+
+.modal-dialog {
+    max-width: 80%; /* Adjust width as needed */
+}
+.modal-header {
+    background-color: #007bff;
+    color: #fff;
+}
+.modal-title {
+    font-weight: bold;
+}
+
+
+.boxcard {
+	height: 100px;
+	border-radius: 20px;
+}
+
+
+ .required{
+	color: red;
+}
+.card-box {
+       	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+    }
+    
+@media (max-width: 768px) {
+    .card-box {
+        text-align: center;
+    }
+
+}
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-6">
+								<div class="page-header-title">
+									<i class="fas fa-user-graduate bg-blue"></i>
+									<div class="d-inline">	
+										<h5>QAQC Agent Performance</h5>
+										<span>1913 Agent Performance</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="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 Reports</li>
+										<li class="breadcrumb-item active" aria-current="page">Agent Performance</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                        
+                      
+                      <div class="row mt-4">
+ 
+                      
+                      <div class="col-md-12">
+                             <div class="card">
+                             	<div class="card-header">
+                             		<h3>Agent Performance</h3>
+                             	</div>
+                             	<div class="row mt-3 ml-2">
+									
+									    <div class="col-md-3">
+									        <label for="startDate" class="form-label" style="font-size: medium;">From Date:</label>
+									        <input type="date" id="startDate" class="form-control">
+									    </div>
+									    <div class="col-md-3">
+									        <label for="endDate" class="form-label" style="font-size: medium;">To Date:</label>
+									        <input type="date" id="endDate" class="form-control">
+									    </div>
+									    <div class="col-md-3" style="margin-top: 30px;">
+									        <button id="searchBtn" class="btn btn-primary">Search</button>
+									        <button id="resetBtn" class="btn btn-secondary">Reset</button>
+									    </div>
+									
+									</div>
+
+
+                             	<div class="card-body">
+                             		
+										<div>
+										    <div class="row mt-2">
+										        <div class="col-xl-3 col-md-12">
+										            <div class="card card-box p-4">
+										                <p class="text-facebook mb-20 text-center mt-2"><b>No Of Agents</b></p>
+										                <h3 class="text-twitter fw-700 ml-5 text-center" id="totalnoofagentsCount"></h3>
+										            </div>
+										        </div>
+										        
+										        <div class="col-xl-3 col-md-4">
+										            <div class="card card-box p-4">
+										                <p class="text-facebook mb-20 text-center mt-2"><b>Assigned Calls</b></p> 
+										                <h3 class="text-twitter fw-700 ml-5 text-center" id="totalassignedCount"></h3>
+										            </div>
+										        </div>
+										        <div class="col-xl-3 col-md-4">
+										            <div class="card card-box p-4">
+										                <p class="text-facebook mb-20 text-center mt-2"><b>Finished</b></p> 
+										                <h3 class="text-twitter fw-700 ml-5 text-center" id="totalcompleteCount"></h3>
+										            </div>
+										        </div>
+										        <div class="col-xl-3 col-md-4">
+										            <div class="card card-box p-4">
+										                <p class="text-facebook mb-20 text-center mt-2"><b>Pending Calls</b></p> 
+										                <h3 class="text-twitter fw-700 ml-5 text-center" id="totalpendingCount"></h3>
+										            </div>
+										        </div>
+										    </div>
+										
+										    <div class="cards">
+										        <table id="QaqcDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+										            <thead class="thead-dark">
+										                <tr role="row">
+										                    <th rowspan="2" class="text-center">S.No</th>
+										                    <th rowspan="2" class="text-center">Agent Name</th>
+										                    <th colspan="4" class="text-center">Performance</th>
+							                            	<th colspan="4" class="text-center">Call Results</th>
+							                            </tr>
+							                       		<tr role="row">
+										                    <th class="text-center no-sort">Assigned Calls</th>							                            
+								                            <th class="text-center no-sort">Finished</th>
+								                            <th class="text-center no-sort">Pending Calls</th>
+								                            <th class="text-center no-sort">Completion(%)</th>
+								                            <th class="no-sort">Completed</th> 
+								                            <th class="no-sort">Reopen</th>
+								                            <th class="no-sort">Followup</th>
+								                            <th class="no-sort">Others</th>
+										                </tr>
+										            </thead>
+										            <tbody>
+										                <!-- Data will be populated here -->
+										            </tbody>
+										        </table>
+										    </div>
+										</div>
+                             	</div>						 
+							 </div>
+                         </div> 
+					
+						
+
+						
+                      </div>
+                        
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+        
+        
+<!--agentperformance Modal -->
+		<div class="modal fade" id="agentperformance" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalCenterLabel">Task Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    
+                    <div class="modal-body">
+						<div class="table-responsive" >
+						<table id="agentperformanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+                              <thead class="thead-dark">
+                                 	<tr role="row">
+                            <th rowspan="2" class="text-center">S.No</th>
+                            <th rowspan="2" class="text-center">TaskId</th>
+                            <th rowspan="2" class="text-center" width="100px;">Date</th>                           
+                            <th colspan="4" class="text-center">Performance</th>
+                            <th colspan="4" class="text-center">Call Results</th>
+                        </tr>
+                        <tr role="row">          
+                            <th class="text-center">Assigned Calls</th>
+                            <th class="text-center">Finished</th>
+                            <th class="text-center">Pending Calls</th>
+                            <th class="text-center no-sort">Completion (%)</th>
+                            <th class="text-center no-sort">Completed</th>
+                            <th class="text-center no-sort">Reopen</th>
+                            <th class="text-center no-sort">Followup</th>
+                            <th class="text-center no-sort">Others</th>
+                            
+                        </tr>
+						 </thead>
+                         <tbody>
+                                    
+                         </tbody>
+                               
+                       </table>
+						</div>
+                     </div>
+  					
+  					<div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                        
+                    </div>                                        
+                </div>
+            </div>
+        </div>
+        
+        
+        <!-- Assign Task Details Modal -->
+		<div class="modal fade" id="Assignagentperformance" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel1" aria-hidden="true">
+		    <div class="modal-dialog modal-xl" role="document">
+		        <div class="modal-content">
+		            <div class="modal-header">
+		                <h5 class="modal-title" id="exampleModalCenterLabel1">Assign Task Details</h5>
+		                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+		                    <span aria-hidden="true">&times;</span>
+		                </button>
+		            </div>
+		            
+		            <div class="modal-body">
+		                <div class="table-responsive">
+		                    <table id="AssignagentperformanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+		                        <thead class="thead-dark">
+		                            <tr role="row">
+		                                <th class="text-center">S.No</th>
+		                                
+		                                <th class="text-center">Call Category</th>
+		                                <th class="text-center">Complaint Number</th>
+		                                <th class="text-center">Complaint Date</th>
+		                                <th class="text-center">Complaint Person Name</th>
+		                                <th class="text-center">Complaint Mob no</th>
+		                                <th class="text-center">Complaint Type</th>
+		                                <th class="text-center">Official Name</th>
+		                                <th class="text-center">Official Ph no</th>
+		                                <th class="text-center">Call Status</th>
+		                                <th class="text-center">Remarks</th>
+		                                <!-- <th class="text-center">Updated Date</th> -->
+		                            </tr>
+		                        </thead>
+		                        <tbody>
+		                            <!-- Dynamic content will be populated here -->
+		                        </tbody>
+		                    </table>
+		                </div>
+		            </div>
+		            
+		            <div class="modal-footer">
+		                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+		            </div>
+		        </div>
+		    </div>
+		</div>	
+               
+    
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>     
+        <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        
+         <script type="text/javascript">
+         
+         
+         
+        	 
+        	 
+
+        	 $(document).ready(function() { 
+        		 
+        		 
+        		 
+        		 $('#agentperformance').on('shown.bs.modal', function () {
+
+         	    	 var buttons = [
+         	             {
+         	                 extend: 'pageLength',
+         	                 className: 'btn btn-warning'
+         	             },
+         	             {
+         	                 title: 'Data export',
+         	                 extend: 'copyHtml5',
+         	                 text: 'Copy',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'excelHtml5',
+         	                 text: 'Excel',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'csvHtml5',
+         	                 text: 'CSV',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'pdfHtml5',
+         	                 text: 'PDF',
+         	                 className: 'btn btn-secondary'
+         	             }
+         	         ];
+         	        
+         	            $('#agentperformanceDatatable').DataTable({
+         	                dom: 'Bftip',               
+         	                columnDefs: [
+         	                    { targets: 'no-sort', orderable: false }
+         	                ],
+         	                lengthMenu: [
+         	                    [50, 100, 200, 500, -1],
+         	                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+         	                ],
+         	                scrollY: '50vh',
+         	                scrollX: true,  // Enable horizontal scrolling	
+         	                fixedColumns: {
+         	                    left: 1,
+         	                    right: 1
+         	                },
+         	                buttons: buttons,
+         	                fixedHeader: false,
+         	                autoWidth: false,
+         	                responsive: true,
+         	                searching: true,
+         	                select: false,
+         	                processing: false,
+         	            });
+         	        	
+         	        
+         	    });
+            	 
+            	 
+            	 $('#Assignagentperformance').on('shown.bs.modal', function () {
+
+         	    	 var buttons = [
+         	             {
+         	                 extend: 'pageLength',
+         	                 className: 'btn btn-warning'
+         	             },
+         	             {
+         	                 title: 'Data export',
+         	                 extend: 'copyHtml5',
+         	                 text: 'Copy',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'excelHtml5',
+         	                 text: 'Excel',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'csvHtml5',
+         	                 text: 'CSV',
+         	                 className: 'btn btn-secondary'
+         	             },
+         	             {
+         	                 extend: 'pdfHtml5',
+         	                 text: 'PDF',
+         	                 className: 'btn btn-secondary'
+         	             }
+         	         ];
+         	       
+         	            $('#AssignagentperformanceDatatable').DataTable({
+         	                dom: 'Bftip',               
+         	                columnDefs: [
+         	                    { targets: 'no-sort', orderable: false }
+         	                ],
+         	               lengthMenu: [
+        	                    [50, 100, 200, 500, -1],
+        	                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+        	                ],
+         	                scrollY: '30vh',
+         	                scrollX: true,  // Enable horizontal scrolling	
+         	                fixedColumns: {
+         	                    left: 1,
+         	                    right: 1
+         	                },
+         	                buttons: buttons,
+         	                fixedHeader: false,
+         	                autoWidth: false,
+         	                responsive: true,
+         	                searching: true,
+         	                select: false,
+         	                processing: false,
+         	            });
+         	        
+         	        
+         	    });
+        	 
+          	var table = $('#QaqcDatatable').DataTable({
+                  dom: 'Bftip',
+                  columnDefs: [
+                      { targets: 'no-sort', orderable: false }
+                  ],
+                  lengthMenu: [
+                      [50, 100, 200, 500, -1],
+                      ['50 rows', '100 rows', '200 rows', 'Show all']
+                  ],
+                  scrollY: '50vh',
+                  fixedColumns: {
+                      left: 1,
+                      right: 1
+                  },
+                  buttons: [
+                      {
+                          extend: 'pageLength',
+                          className: 'btn btn-warning'
+                      },
+                      {
+                          title: 'Data export',
+                          extend: 'copyHtml5',
+                          text: 'Copy',
+                          className: 'btn btn-secondary',
+                          id: 'copyBtn'
+                      },
+                      {
+                          extend: 'excelHtml5',
+                          text: 'Excel',
+                          className: 'btn btn-secondary',
+                          id: 'excelBtn'
+                      },
+                      {
+                          extend: 'csvHtml5',
+                          text: 'CSV',
+                          className: 'btn btn-secondary',
+                          id: 'csvBtn'
+                      },
+                      {
+                          extend: 'pdfHtml5',
+                          text: 'PDF',
+                          className: 'btn btn-secondary',
+                          id: 'pdfBtn'
+                      }
+                  ],
+                  fixedHeader: true,
+                  autoWidth: true,
+                  responsive: true,
+                  searching:true,
+                  select: false,
+                  processing: false
+              });
+          	
+                   	
+          	 // Initialize DataTable with export buttons
+            
+
+        
+                 const overallcountapiUrl = "/gcc/api/callcenterqaqc/agent/getagentperformancecount"; // Replace with your API endpoint
+     		    const tableApiUrl = "/gcc/api/callcenterqaqc/agent/getagentperformancelist";
+               
+                 
+                 
+                 const totalagents = document.getElementById("totalnoofagentsCount");
+         	   
+         	    const assignedcallscount = document.getElementById("totalassignedCount");
+         	    const totalcompletedcount = document.getElementById("totalcompleteCount");
+         	    const pendingcallscount = document.getElementById("totalpendingCount");
+         	    /* const dataTableElement = $("#QaqcDatatable").DataTable(); // Initialize DataTable
+                  */
+                 // Fetch Data Function
+         	    const fetchData = async (startDate = "", endDate = "") => {
+         	        try {
+         	            const params = new URLSearchParams();
+         	            if (startDate) params.append("startDate", startDate);
+         	            if (endDate) params.append("endDate", endDate);
+
+         	            const response = await fetch(`${overallcountapiUrl}?${params.toString()}`);
+         	            const data = await response.json();
+         				
+         	            //console.log(data);
+         	            // Update Summary Counts
+         	            const firstItem = data[0];  // Get the first object from the array
+         	            totalagents.textContent = firstItem.no_of_agents || 0;          	            
+         	            assignedcallscount.textContent = firstItem.total_calls || 0;  
+         	            totalcompletedcount.textContent = firstItem.completed_calls || 0; 
+         	            pendingcallscount.textContent = firstItem.pending_calls || 0; 
+                  } catch (error) {
+         	            console.error("Error fetching data:", error);
+         	        }
+         	    };
+         	
+         	
+         	fetchData();
+         	
+         // Fetch and Populate Table Data Function
+         const fetchTableData = async (startDate = "", endDate = "") => {
+             try {
+                 const params = new URLSearchParams();
+                 if (startDate) params.append("startDate", startDate);
+                 if (endDate) params.append("endDate", endDate);
+
+                 const response = await fetch(`${tableApiUrl}?${params.toString()}`);
+                 const tableData = await response.json();
+
+                 // Update DataTable with new data
+                 table.clear(); // Clear existing data
+                 tableData.forEach((row, index) => {
+                     
+                         
+                         const percentage = row.Assigned
+                         ? Math.round((row.TotalCompleted / row.Assigned) * 100)
+                         : 0;
+
+                     table.row.add([
+                     	
+                     	`<div style="text-align: center;">${index + 1}</div>`,
+                         `<button class="btn btn-success" data-agentId="${row.agent_id}" 
+                         onclick="handleTaskButtonClick('${row.agent_id}')">${row.agent_name}</button>`,                         
+                         `<button class="btn btn-success" data-agentId="${row.agent_id}" 
+                         onclick="handleAssignTaskButtonClick('${row.agent_id}')">${row.Assigned}</button>`,
+                         `<div style="text-align: center;">${row.TotalCompleted}</div>`,
+                         `<div style="text-align: center;">${row.Pending}</div>`,
+                         `<div style="text-align: center;">${percentage}%</div>`,
+                         `<div style="text-align: center;">${row.Completed_count}</div>`,
+                         `<div style="text-align: center;">${row.Reopened_count}</div>`,
+                         `<div style="text-align: center;">${row.Followup_count}</div>`,
+                         `<div style="text-align: center;">${row.Other_count}</div>`,
+                        
+                     	
+                     ]);
+                     
+                 });
+                 table.draw(); // Redraw the DataTable with the updated data
+           
+             } catch (error) {
+                 console.error("Error fetching table data:", error);
+             }
+         };
+
+         
+      
+         // Example: Fetch Data initially without filters
+         fetchTableData();
+     
+      // Event listener for From Date selection
+  	   $("#startDate").on("change", function() {
+  	       const startDate = $(this).val();  // Get the selected start date
+  	       // Set the min value for To Date to be the selected From Date
+  	       $("#endDate").attr("min", startDate);
+  	   });
+
+  	   // Event listener for To Date selection
+  	   $("#endDate").on("change", function() {
+  	       const endDate = $(this).val();  // Get the selected end date
+  	       // Set the max value for From Date to be the selected To Date
+  	       $("#startDate").attr("max", endDate);
+  	   });
+
+     		    // Search Button Click
+     		    document.getElementById("searchBtn").addEventListener("click", () => {
+     		        const startDate = document.getElementById("startDate").value;
+     		        const endDate = document.getElementById("endDate").value;
+     		        fetchData(startDate, endDate);
+     		        fetchTableData(startDate,endDate);
+     		        
+     		        
+     		    });
+
+     		    // Reset Button Click
+     		    document.getElementById("resetBtn").addEventListener("click", () => {
+     		        /* document.getElementById("startDate").value = "";
+     		        document.getElementById("endDate").value = "";
+     		        fetchData(); // Fetch data without date filters
+     		        fetchTableData(); */
+     		        window.location.href = "/gcc/callcenterqaqc/qaqcagentperformance";
+     		    });
+
+     		    // Initial Load
+     		    fetchData(); // Load overall data initially
+     		   fetchTableData();
+     		});
+
+         function handleTaskButtonClick(agentId)
+     	 {
+     		 //console.log("agentId",agentId);
+     		      		 
+     		$('#agentperformance').modal({
+                backdrop: 'static',
+                keyboard: false
+            });
+            $('#agentperformance').modal('show');
+            
+         // Clear old data from the table
+     	    if ($.fn.DataTable.isDataTable('#agentperformanceDatatable')) {
+     	        $('#agentperformanceDatatable').DataTable().clear().destroy();
+     	    }
+     		 
+             $.ajax({
+                url: '/gcc/api/callcenterqaqc/agent/agenttaskwise?agentId='+agentId,
+                type: 'GET',
+                contentType: 'application/json',
+                success: function (response) {
+                	//console.log("response",response);
+                	if (response && response.length > 0) {
+                		 
+                	let CtableBody = $('#agentperformanceDatatable tbody');
+                	CtableBody.empty();
+                	response.forEach((item, index) => {
+                		let row = `
+                			<tr>
+                            <td class="text-center">${index + 1}</td>
+                            <td class="text-center no-sort">${item.taskid}</td>
+                            <td class="text-center">${item.cdate}</td>
+                            <td class="text-center">${item.assigned || 0}</td>
+                            <td class="text-center">${item.callstaken || 0}</td>
+                            <td class="text-center">${item.pending || 0}</td>
+                            <td class="text-center">${item.percentage || 0}%</td>
+                            <td class="text-center">${item.Completed || 0}</td>
+                            <td class="text-center">${item.Reopened || 0}</td>
+                            <td class="text-center">${item.Followup || 0}</td>
+                            <td class="text-center">${item.Others || 0}</td>
+                        </tr>
+                    `;
+                		CtableBody.append(row); 
+                	});
+                	 
+                    
+                	}
+                	else {
+                        $('#agentperformanceDatatable tbody').html(`
+                            <tr>
+                                <td colspan="11" class="text-center">No data available</td>
+                            </tr>
+                        `);
+                    }
+                	 
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error in Fetching Task:', error);
+                    $('#agentperformanceDatatable tbody').html(`
+                            <tr>
+                                <td colspan="11" class="text-center text-danger">Failed to load data</td>
+                            </tr>
+                        `);
+                }
+            }); 
+     		 
+     	 }
+         
+         
+         function handleAssignTaskButtonClick(agentId) {
+     	    // Show modal with static backdrop
+     	    $('#Assignagentperformance').modal({
+     	        backdrop: 'static',
+     	        keyboard: false
+     	    });
+     	    $('#Assignagentperformance').modal('show');
+
+     	    // Clear old data from the table
+     	    if ($.fn.DataTable.isDataTable('#AssignagentperformanceDatatable')) {
+     	        $('#AssignagentperformanceDatatable').DataTable().clear().destroy();
+     	    }
+
+     	    // Fetch and display data
+     	    $.ajax({
+     	        url: `/gcc/api/callcenterqaqc/agent/agenttaskassign?agentId=${agentId}`,
+     	        type: 'GET',
+     	        contentType: 'application/json',
+     	        success: function (response) {
+     	            let CtableBody1 = $('#AssignagentperformanceDatatable tbody');
+     	            CtableBody1.empty();
+
+     	            if (response && response.length > 0) {
+     	                response.forEach((item, index) => {
+     	                	let callStatus = item.call_status && item.call_status.trim() !== '' ? item.call_status : 'N/A';
+     	                   let remarks = item.remarks && item.remarks.trim() !== '' ? item.remarks : 'N/A';
+     	                    let row = `
+     	                        <tr>
+     	                            <td class="text-center">${index + 1}</td>
+     	                            <td class="text-center">${item.call_category}</td>
+     	                            <td class="text-center">${item.complaint_number}</td>
+     	                            <td class="text-center">${item.complaint_date}</td>
+     	                            <td class="text-center">${item.complaint_person_name}</td>
+     	                            <td class="text-center">${item.complaint_mobilenumber}</td>
+     	                            <td class="text-center">${item.complaint_type}</td>
+     	                            <td class="text-center">${item.official_name}</td>
+     	                            <td class="text-center">${item.official_mobilenum}</td>
+     	                           <td class="text-center">${callStatus}</td>
+     	                          <td class="text-center">${remarks}</td>
+     	                        </tr>
+     	                    `;
+     	                    CtableBody1.append(row);
+     	                });
+     	            } else {
+     	                CtableBody1.html(`
+     	                    <tr>
+     	                        <td colspan="11" class="text-center">No data available</td>
+     	                    </tr>
+     	                `);
+     	            }
+
+     	        },
+     	        error: function (xhr, status, error) {
+     	            console.error('Error in Fetching Task:', error);
+     	            $('#AssignagentperformanceDatatable tbody').html(`
+     	                <tr>
+     	                    <td colspan="11" class="text-center text-danger">Failed to load data</td>
+     	                </tr>
+     	            `);
+     	        }
+     	    });
+     	}
+      	
+//<td class="text-center">${item.updated_date}</td>
+     	</script>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/qaqcfollowuplist.html b/target/classes/templates/modules/callcenterqaqc/qaqcfollowuplist.html
new file mode 100644
index 0000000..b1a3aa1
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/qaqcfollowuplist.html
@@ -0,0 +1,659 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+    .required{
+        color: red;
+    }
+    #modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+	
+	.card-box {
+		border-radius: 20px;
+       	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+    }
+    
+        #officialfollowupCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#officialfollowupCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+
+#publicfollowupCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#publicfollowupCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+
+</style>
+<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]-->
+
+    <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 mb-2">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fa fa-list-alt bg-blue"></i>
+                                    <div class="d-inline">	
+                                        <h5>FollowUp List</h5>
+                                        <span>1913 QAQC FollowUp List</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <nav class="breadcrumb-container" aria-label="breadcrumb">
+                                    <ol class="breadcrumb">
+                                        <li class="breadcrumb-item"><a href="/gcc/index"><i class="ik ik-home"></i></a></li>
+                                        <li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
+                                        <li class="breadcrumb-item" aria-current="page">Admin QAQC</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Followup List</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                        
+					<div class="row mt-4">
+					<div class="col-md-12">
+					    <div class="card">
+					        <div class="card-block">
+								<p>Click the card to Assign Agents</p>							
+								<div class="row">
+									<div class="col-lg-4 col-md-4 col-sm-12">
+										<div class="card card-box" id="officialfollowupCard">
+											<p class="text-facebook mb-20 text-center mt-4" id="todayFollowUpText"><b>Today Followup</b></p>
+							                <h3 class="text-twitter fw-700 ml-5 text-center" id="officialtotalFollowup"></h3>
+										</div>
+									</div>
+									
+									<div class="col-lg-4 col-md-4 col-sm-12">
+										<div class="card card-box" id="publicfollowupCard">
+											<p class="text-facebook mb-20 text-center mt-4" id="todayFollowUpText2"><b>Today Followup</b></p>
+							                <h3 class="text-twitter fw-700 ml-5 text-center" id="publictotalFollowup"></h3>
+										</div>
+									</div>
+								</div>
+								<hr>
+								<div class="row mb-4">
+								    <div class="col-md-4">
+								        <label for="fromDate">From Date <span class="required">*</span></label>
+								        <input type="date" id="fromDate" class="form-control datepicker" placeholder="yyyy-mm-dd" >
+								    </div>
+								    <div class="col-md-4">
+								        <label for="toDate">To Date <span class="required">*</span></label>
+								        <input type="date" id="toDate" class="form-control datepicker" placeholder="yyyy-mm-dd" >
+								    </div>
+								    <div class="col-md-4 mt-4">
+								        <button id="filterButton" class="btn btn-primary mt-2">Filter</button>
+								        <button id="resetButton" class="btn btn-secondary mt-2">Reset</button>
+								    </div>
+								</div>
+
+					            <div class="page-header-title"></div>
+					            <div>
+					                <table id="FollowupDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+					                    <thead class="thead-dark">
+					                        <tr role="row">
+					                            <th class="text-center">S.No</th>
+					                            <th class="text-center">Task ID</th>
+												<th class="text-center">Complaint Number</th>
+												<th class="text-center">Scheduled Date</th>
+					                            <th class="text-center">Name</th>
+					                            <th class="text-center">Mobile Number</th>
+					                            <th class="text-center">Complaint Type</th>
+					                            <th class="text-center">View</th>
+					                            
+					                            
+
+					                        </tr>
+					                    </thead>
+					                    <tbody style="text-align:center;">
+					                        
+					                    </tbody>
+					                    <tfoot class="thead-dark">
+					                        <tr>
+					                            <th class="text-center">S.No</th>
+					                            <th class="text-center">Task ID</th>
+												<th class="text-center">Complaint Number</th>
+												<th class="text-center">Scheduled Date</th>
+					                            <th class="text-center">Name</th>
+				                                <th class="text-center">Mobile Number</th>
+					                            <th class="text-center">Complaint Type</th>
+					                            <th class="text-center">View</th>
+					                         	
+					                        </tr>
+					                    </tfoot>
+					                </table>
+					            </div>
+					        </div>
+					    </div>
+					</div>
+                    </div>
+                    </div>
+                </div>
+  
+							
+            <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+        </div>
+    </div>
+	<!-- Modal -->
+			<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+			    <div class="modal-dialog modal-lg" role="document">
+			        <div class="modal-content">
+			            <div class="modal-header">
+			                <h5 class="modal-title" id="detailsModalLabel">Complaint Details</h5>
+			                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+			                    <span aria-hidden="true">&times;</span>
+			                </button>
+			            </div>
+			            <div class="modal-body" id="modalBody">
+			                <!-- Details will be populated here -->
+			            </div>
+			            <div class="modal-footer">
+			                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+			            </div>
+			        </div>
+			    </div>
+			</div>
+			
+						
+
+    <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>     
+    <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+	<script>
+
+		$(document).ready(function () {
+		    // Initialize DataTable
+		    const table = $('#FollowupDatatable').DataTable({
+		        dom: 'Bftip',
+		        columnDefs: [
+		            { targets: 'no-sort', orderable: false }
+		        ],
+		        lengthMenu: [
+		            [50, 100, 200, 500, -1],
+		            ['50 rows', '100 rows', '200 rows', 'Show all']
+		        ],
+		        scrollY: '50vh',
+		        buttons: [
+		            { extend: 'pageLength', className: 'btn btn-warning' },
+		            { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
+		            { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
+		            { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
+		            { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
+		        ],
+		        fixedHeader: true,
+		        autoWidth: true,
+		        responsive: true,
+		        searching: false,
+		        select: false,
+		        processing: false
+		    });
+
+			// Default Date Range Setup
+			let today = new Date();
+
+			// Get the first day of the current month (this should give 2024-11-01 for November)
+			let firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+			// Manually format the date as yyyy-mm-dd without relying on toISOString
+			let formattedFirstDay = firstDayOfMonth.getFullYear() + '-' + 
+			                        (firstDayOfMonth.getMonth() + 1).toString().padStart(2, '0') + '-' + 
+			                        firstDayOfMonth.getDate().toString().padStart(2, '0');
+
+			let formattedToday = today.getFullYear() + '-' + 
+			                     (today.getMonth() + 1).toString().padStart(2, '0') + '-' + 
+			                     today.getDate().toString().padStart(2, '0');
+
+			//console.log("formattedFirstDay:", formattedFirstDay); // Check what is printed in the console
+
+					
+			// Set default values for date inputs
+		    $('#fromDate').val(formattedFirstDay);
+		    $('#toDate').val(formattedToday);
+		    $('#toDate').attr('min', formattedFirstDay); // Initial minimum for To Date
+		    $('#fromDate').attr('max', formattedToday); // Initial maximum for From Date
+
+		    // Trigger data load on page load
+		    loadData(formattedFirstDay, formattedToday);
+
+		    // Update To Date's min attribute when From Date changes
+		    $('#fromDate').on('change', function () {
+		        const fromDate = $(this).val();
+		        $('#toDate').attr('min', fromDate); // Update min attribute for To Date
+
+		        // If To Date is earlier than the new From Date, adjust it
+		        const toDate = $('#toDate').val();
+		        if (new Date(toDate) < new Date(fromDate)) {
+		            $('#toDate').val(fromDate);
+		        }
+		    });
+
+		    // Update From Date's max attribute when To Date changes
+		    $('#toDate').on('change', function () {
+		        const toDate = $(this).val();
+		        $('#fromDate').attr('max', toDate); // Update max attribute for From Date
+
+		        // If From Date is later than the new To Date, adjust it
+		        const fromDate = $('#fromDate').val();
+		        if (new Date(fromDate) > new Date(toDate)) {
+		            $('#fromDate').val(toDate);
+		        }
+		    });
+
+		    // Event listener for the Filter button
+		    $('#filterButton').on('click', function () {
+		        const fromDate = $('#fromDate').val();
+		        const toDate = $('#toDate').val();
+
+		        // Ensure valid date range
+		        if (new Date(fromDate) > new Date(toDate)) {
+		            Swal.fire({
+		                icon: 'error',
+		                title: 'Invalid Date Range',
+		                text: 'From Date cannot be later than To Date.'
+		            });
+		            return;
+		        }
+
+		        // Load data for the selected date range
+		        loadData(fromDate, toDate);
+		    });
+		    
+		    $('#resetButton').on('click', function () {
+		    	window.location.href = "/gcc/callcenterqaqc/admin/qaqcfollowuplist";
+		    });
+			
+		    // Function to load data based on the date range
+		    function loadData(fromDate, toDate) {
+		    	const followupStatus = "FOLLOWUP";
+		        $.ajax({
+		            url: '/gcc/api/callcenterqaqc/followuplist',
+		            method: 'GET',
+		            data: { callStatus: followupStatus,fromDate: fromDate, toDate: toDate },
+		            success: function (response) {
+		                //console.log('API Response:', response);
+
+		                const table = $('#FollowupDatatable').DataTable();
+		                table.clear();
+
+		                if (response && response.length > 0) {
+		                    response.forEach(function (item, index) {
+		                        table.row.add([
+		                            index + 1,
+		                            item.taskid || 'N/A',
+		                            item.complaint_number || 'N/A',
+		                            item.remainder_date || 'N/A',
+		                            item.complaint_person_name || 'N/A',
+		                            item.complaint_mobilenumber || 'N/A',
+		                            item.complaint_type || 'N/A',
+		                            `<button type="button" class="btn btn-info" 
+		                                    onclick="viewDetails('${item.complaint_number}')">Details</button>`,
+                                    
+		                        ]);
+		                    });
+		                } else {
+		                    //alert('No data found for the selected date range.');
+		                    $('#FollowupDatatable tbody').html(`
+		                            <tr>
+		                                <td colspan="8" class="text-center">No data available</td>
+		                            </tr>
+		                        `);
+		                }
+
+		                table.draw();
+		            },
+		            error: function (xhr, status, error) {
+		                console.error('Error fetching data:', error);
+		            }
+		        });
+		    }
+		});
+
+		
+		
+		function viewDetails(complaintNumber, complaintMode, complaintDept) {
+	 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+	 	    $('#detailsModal').modal('show');
+
+	 	    // Fetch the main complaint details
+	 	    $.ajax({
+	 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+	 	        type: 'GET',
+	            data:{complaintNumber:complaintNumber},
+	 	        success: function (data) {
+	 	           // console.log('Complaint Data:', data);
+
+	 	            // Fetch agent response details
+	 	            $.ajax({
+	 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+	 	                type: 'GET',
+	 	                data: { complaintNumber },
+	 	                success: function (agentResponse) {
+	 	                    //console.log('Agent Response:', agentResponse);
+
+	 	                    // Use the logic for building complaint and agent details as HTML
+	 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+	 	                    // Update modal content
+	 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+	 	                },
+	 	                error: function () {
+	 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+	 	                }
+	 	            });
+	 	        },
+	 	        error: function () {
+	 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+	 	        }
+	 	    });
+	 	}
+
+	 	// Function to generate complaint and agent details HTML
+	function generateDetailsHtml(data, agentResponse) {
+	 		
+	 	// Helper function to format date to yyyy-mm-dd
+	         function formatDate(dateStr) {
+	             if (!dateStr) return 'N/A';
+	             const date = new Date(dateStr);
+	             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+	         }
+	// Format complaint messages
+	let messagesHtml = '';
+	if (data.comments && data.comments.length > 0) {
+	    data.comments.forEach((comment) => {
+	        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+	            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+	            : '<p style="color: red;">No image available for this comment.</p>';
+
+	        messagesHtml += `
+	            <div class="comment mb-4">
+	                <div class="row">
+	                    <div class="col-2 text-center">
+	                        <p class="text-muted">${comment.comment_date}</p>
+	                    </div>
+	                    <div class="col-10">
+	                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+	                        <p>${comment.message || 'No message available'}</p>
+	                        <div class="user-image">${commentImageLink}</div>
+	                    </div>
+	                </div>
+	            </div>
+	        `;
+	    });
+	} else {
+	    messagesHtml = '<p>No comments available.</p>';
+	}
+
+	// Format agent responses
+	let agentRepliedHtml = '';
+	if (agentResponse.length > 0) {
+	    agentResponse.forEach((agentItem) => {
+	        agentRepliedHtml += `
+	            <div class="comment mb-4">
+	                <div class="row">
+	                    <div class="col-2 text-center">
+	                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+	                    </div>
+	                    <div class="col-10">
+	                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+	                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+	                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+	                    </div>
+	                </div>
+	            </div>
+	        `;
+	    });
+	} else {
+	    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+	}
+
+	// Check for user images
+	const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+	const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+	    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+	    : '<p style="color: red;">UserImages: No image available.</p>';
+
+	// Combine all sections into the final HTML
+	const detailsHtml = `
+	    <div class="row">
+	        <div class="col-md-12">
+	            <h4>Complaint Person's Details:</h4>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+	                </div>
+	            </div>
+	        </div>
+	    </div>
+	    <hr>
+	    <h4>Complaint Details:</h4>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+        <div class="col-6">
+            <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+        </div>
+        
+    </div>
+	    <hr>
+	    <h4>Complaint Messages:</h4>
+	    ${messagesHtml}
+	    <hr>
+	    <h4>Agent Replied Messages:</h4>
+	    ${agentRepliedHtml}
+	    <hr>
+	    ${imageLink}
+	`;
+
+	return detailsHtml;
+	}
+		
+		$(document).ready(function () {
+		// Function to fetch today's follow-up count
+		    function fetchTodayFollowUpCount() {
+		        const followupStatus = "FOLLOWUP"; // Adjust based on your status filter
+
+		        $.ajax({
+		            url: '/gcc/api/callcenterqaqc/followup/todayCount',
+		            method: 'GET',
+		            data: { followupStatus: followupStatus },
+		            success: function (counts) {
+		                // Update the card with the fetched count
+		                $('#officialtotalFollowup').text(counts.officialfollowup || 0);
+		                $('#publictotalFollowup').text(counts.publicfollowup || 0);
+		                
+		             // Get the current date in 'yyyy-mm-dd' format
+		                const currentDate = new Date();
+		                const formattedDate = currentDate.toISOString().split('T')[0];
+		                
+		                sessionStorage.setItem('followupname1', 'officialfollowup');
+		                sessionStorage.setItem('followupcount1', counts.officialfollowup || "0");
+		                sessionStorage.setItem('followupname2', 'publicfollowup');
+		                sessionStorage.setItem('followupcount2', counts.publicfollowup || "0");
+		                sessionStorage.setItem('startDate', formattedDate);
+		                sessionStorage.setItem('endDate', formattedDate);
+		                sessionStorage.setItem('redirected', 'true');
+		                
+		                document.getElementById('officialfollowupCard').addEventListener('click', function () {
+		                    if (parseInt(sessionStorage.getItem('followupcount1')) === 0) {
+		                        Swal.fire({
+		                            icon: 'info',
+		                            title: 'No Data',
+		                            text: 'No Follow-up records available for today.',
+		                        });
+		                    } else {
+		                        sessionStorage.setItem('cardType', 'Followup1'); // Set card type
+		                        window.location.href = "/gcc/callcenterqaqc/admin/qaqcassigntaskagents";
+		                    }
+		                });
+		                
+		                document.getElementById('publicfollowupCard').addEventListener('click', function () {
+		                    if (parseInt(sessionStorage.getItem('followupcount2')) === 0) {
+		                        Swal.fire({
+		                            icon: 'info',
+		                            title: 'No Data',
+		                            text: 'No Follow-up records available for today.',
+		                        });
+		                    } else {
+		                        sessionStorage.setItem('cardType', 'Followup2'); // Set card type
+		                        window.location.href = "/gcc/callcenterqaqc/admin/qaqcassigntaskagents";
+		                    }
+		                });
+		                
+		                
+		            },
+		            error: function (xhr, status, error) {
+		                console.error('Error fetching follow-up count:', error);
+		                $('#officialtotalFollowup').text('N/A');
+		            }
+		        });
+		    }
+
+		    // Fetch count on page load
+		    fetchTodayFollowUpCount();
+			
+			    // Get the current date
+			    const currentDate = new Date();
+			    const formattedDate = currentDate.toISOString().split('T')[0]; // Format: YYYY-MM-DD
+
+			    // Update the text with the current date
+			    document.getElementById("todayFollowUpText").innerText = `Today Official Follow-up (${formattedDate})`;
+			    document.getElementById("todayFollowUpText2").innerText = `Today Public Follow-up (${formattedDate})`;
+		  });
+	</script>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/qaqcgrievancedashboard.html b/target/classes/templates/modules/callcenterqaqc/qaqcgrievancedashboard.html
new file mode 100644
index 0000000..1b4e42d
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/qaqcgrievancedashboard.html
@@ -0,0 +1,702 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.boxcard {
+	height: 100px;
+	border-radius: 20px;
+}
+.boxcard1 {
+	height: 200px;
+	border-radius: 20px;
+	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+}
+
+.required{
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media (max-width: 767px) 
+{
+	#qaqcRequestForm label{
+		margin-top: 10px;
+	} 
+}
+
+.card-box {
+		border-radius: 20px;
+       	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+    }  
+    
+.bg-grey-inline-text {
+        padding:2px 2px;
+        background-color: #e6e6e6; 
+        border-radius: 4px;
+    }
+    
+    #closedCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#closedCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+
+#inProgressCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#inProgressCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+    
+    #redressedCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#redressedCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+    
+   #reopenedCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#reopenedCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+    
+    #closedCard {
+    transition: transform 0.2s ease; /* Smooth scaling transition */
+    cursor: pointer; /* Default cursor change */
+}
+
+#closedCard:hover {
+    transform: scale(1.05); /* Slightly scale up on hover */
+    cursor: pointer; /* Change cursor to hand symbol */
+}
+
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fas fa-tachometer-alt bg-blue"></i>
+									<div class="d-inline">	
+										<h5>Dashboard QAQC</h5>
+										<span>1913 QAQC Dashboard</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">1913 QAQC</li>
+										<li class="breadcrumb-item" aria-current="page">Admin QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Grievance Dashboard</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                    <!-- <h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auto refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>  -->
+					
+					<div class="card mt-4">
+					 	<div class="card-header">
+								<h3>
+									<img alt="No image" src="/gcc/assets/images/donut-chart.png"
+										style="height: 23px; width: 23px;" class="mr-2"><b>Overall Grievance
+										Dashboard</b>
+									</h3>
+								</div> 
+							<div class="card-body">
+									<div class="row">
+										<div class="col-sm-2 mb-2">
+											<label for="startDate" style="font-size: medium; margin-bottom: 0px;">From Date:</label>
+						                    <input type="date" id="startDate" class="form-control">
+										</div>
+										<div class="col-sm-2 mb-2">
+											<label for="endDate" style="font-size: medium; margin-bottom: 0px;">To Date:</label>
+						                    <input type="date" id="endDate" class="form-control">
+										</div>
+
+										<div class="col-sm-2 mb-2">
+								            <label for="dropdown4" style="font-size: medium; margin-bottom: 0px;">Group:</label>
+								            <select id="dropdown4" class="form-control">
+								            <option value="">Select</option>
+								               <!--  <option value="">general</option> -->
+								                <!-- Add options here -->
+											</select>
+										</div>
+															
+									
+										<div class="col-sm-2 mb-2">
+											 <label for="dropdown1"  style="font-size: medium; margin-bottom: 0px;">Type:</label>
+						                     <select id="dropdown1" class="form-control">
+							                 <option value="">Select</option>
+							            	 <!-- <option value="Cleanliness in Parks">Cleanliness in Parks</option> -->
+
+											</select>
+										</div>
+
+										<div class="col-sm-2 mb-2">
+								            <label for="dropdown3" style="font-size: medium; margin-bottom: 0px;">Mode:</label>
+								            <select id="dropdown3" class="form-control">
+								                <option value="">Select</option>
+								                <!-- <option value="">INTERNET</option> -->
+
+											</select>
+										</div>
+										
+										<div class="col-sm-2 mb-2">
+											<label for="dropdown2" style="font-size: medium; margin-bottom: 0px;">zone:</label>
+						                    <select id="dropdown2" class="form-control">
+						                    <option value="">Select</option>
+						                    <!-- <option value="N01">N01</option> -->
+												<!-- <option value="ALL">ALL</option> -->
+
+											</select>
+										</div>
+
+									</div>
+									
+															
+					
+									<div class="row mt-4">
+										<div class="col-12 d-flex justify-content-center">
+											<button type="submit" id="searchButton"
+												class="btn btn-primary mx-2">Filter</button>
+
+											<button class="btn btn-danger mx-2" onclick="resetDate()"
+												name="reset" type="reset">Reset</button>
+										</div>
+									</div>
+
+								</div>
+							
+					
+							<div class="col-12">
+								<div class="row mt-3">
+								    <!-- First Part: 2 cards vertically -->
+								    <div class="col-lg-4 col-md-4 col-sm-12">
+								     	<div class="card card-box" id="inProgressCard">
+											 <p class="text-facebook mb-20 text-center mt-4" id="inProgressname" style="font-size: medium;"><i class="fas fa-spinner text-center" ></i>&nbsp;<b>In-progress</b></p>
+				                             <h3 class="text-twitter fw-700 ml-5 text-center" id="inProgressCount"></h3>
+										</div>
+								       
+								       
+										<div class="card card-box" id="redressedCard">
+											<p class="text-facebook mb-20 text-center mt-4"id="redressedname" style="font-size: medium;"><i class="fas fa-check-circle text-center" style=" color: green;"></i>&nbsp;<b>Action Taken Level 1</b></p>
+				                            <h3 class="text-twitter fw-700 ml-5 text-center" id="redressedCount"></h3>
+										</div>
+								        
+								    </div>
+								    
+								    <!-- Second Part: 1 card, height equal to both cards in the first part -->
+								    <div class="col-lg-4 col-md-4 col-sm-12 mt-3">
+								        								        	
+										<div class="card boxcard1">
+										   <div class="card-body">
+											 <p class="text-facebook mb-20 text-center mt-4" style="font-size: medium;"><i class="fas fa-clipboard-list text-center"></i>&nbsp;<b>Total Complaints</b></p>
+				            				<h3 class="text-twitter fw-700 ml-5 text-center" id="totalComplaints"></h3>
+				            				</div>
+										</div>
+											
+								        
+								    </div>
+								    
+								    <!-- Third Part: 2 cards vertically -->
+								    <div class="col-lg-4 col-md-4 col-sm-12">
+								        
+										<div class="card card-box" id="reopenedCard">
+											<p class="text-facebook mb-20 text-center mt-4" id="Reopenname" style="font-size: medium;"><i class="fas fa-exclamation-circle text-center" style=" color: orange;"></i>&nbsp;<b>Reopened</b></p>
+				            				<h3 class="text-twitter fw-700 ml-5 text-center" id="reopenedCount"></h3>
+										</div>
+						        
+						        
+										<div class="card card-box" id="closedCard">
+											 <p class="text-facebook mb-20 text-center mt-4" id="Closename" style="font-size: medium;"><i class="fas fa-check-circle text-center" style=" color: green;"></i>&nbsp;<b>Action Taken Level 2</b></p>
+				            				<h3 class="text-twitter fw-700 ml-5 text-center" id="closedCount"></h3>
+										</div>
+								        
+								    </div>
+								</div>
+							</div>
+					 
+						
+						<!-- agent wise yesterday performance counts card-->
+					<div class="card-body">
+						<div class="page-header-title" >
+									<h5 style="margin: 0;font-weight: bold;">Yesterday Event - Agent Performance Dashboard</h5><hr>
+					    </div>
+						<div class="row mt-2">
+						    <div class="col-xl-3 col-md-6 col-sm-12">
+						        <div class="card card-box">
+						            <p class="text-facebook mb-20 text-center mt-4"><b>Agent Assigned</b></p>
+						            <h3 class="text-twitter fw-700 ml-5 text-center" th:text="${previousday[0].TotalAgents}"></h3>
+						        </div>
+						    </div>
+						    <div class="col-xl-3 col-md-6 col-sm-12">
+						        <div class="card card-box">
+						            <p class="text-facebook mb-20 text-center mt-4"><b>Assigned Calls</b></p>
+						            <h3 class="text-twitter fw-700 ml-5 text-center" th:text="${previousday[0].TotalAssigned != null ? previousday[0].TotalAssigned : 0}"></h3>
+						        </div>
+						    </div>
+						
+						    <div class="col-xl-3 col-md-6 col-sm-12">
+						        <div class="card card-box">
+						            <p class="text-facebook mb-20 text-center mt-4"><b>Finished</b></p>
+						            <h3 class="text-twitter fw-700 ml-5 text-center" th:text="${previousday[0].TotalCompleted != null ? previousday[0].TotalCompleted : 0}"></h3>
+						        </div>
+						    </div>
+						    <div class="col-xl-3 col-md-6 col-sm-12">
+						        <div class="card card-box">
+						            <p class="text-facebook mb-20 text-center mt-4"><b>Pending Calls</b></p>
+						            <h3 class="text-twitter fw-700 ml-5 text-center" th:text="${previousday[0].TotalPending != null ? previousday[0].TotalPending : 0}"></h3>
+						        </div>
+						    </div>
+						</div>
+						
+						 
+					</div>	
+						
+						<div class="col-md-16">
+							
+							<div class="card-body">
+								<div class="page-header-title" >
+									<h5 style="margin: 0;font-weight: bold;">Yesterday Event - Agents Wise Breakup</h5><hr>
+							    </div> 
+									<table id="YesterdayQaqctable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+                                    	<thead class="thead-dark">
+		                                 	<tr role="row">
+					                            <th rowspan="2" class="text-center">S.No</th>
+					                            <th rowspan="2" class="text-center">Agent</th>
+					                            <th colspan="4" class="text-center">Performance</th>
+					                            <th colspan="4" class="text-center">Call Results</th>
+			                            
+			                        		</tr>
+			                        		<tr role="row">			                            
+					                            <th class="text-center">Assigned Calls</th>
+					                            <th class="text-center">Finished</th>
+					                            <th class="text-center">Pending Calls</th>
+					                            <th class="text-center">Completion (%)</th>
+					                            <th class="text-center">Completed</th>
+					                            <th class="text-center">ReOpen</th>
+					                            <th class="text-center">Followup</th>
+					                            <th class="text-center">Others</th>
+			                        		</tr>
+									 </thead>
+			                         <tbody>
+			                              <!-- Loop through the agentcount data -->
+									        <tr th:each="row, iterStat : ${agentcount}">
+									            <td class="text-center" th:text="${iterStat.index + 1}"></td>
+									            <td class="text-center" th:text="${row.agent_name}"></td>
+									            <td class="text-center" th:text="${row.Assigned}"></td>
+									            <td class="text-center" th:text="${row.TotalCompleted}"></td>
+									            <td class="text-center" th:text="${row.Pending}"></td>
+												<td class="text-center" th:text="${row.CompletionPercentage + '%'}"></td>									            <td class="text-center" th:text="${row.Completed_count}"></td>
+									            <td class="text-center" th:text="${row.Reopened_count}"></td>
+									            <td class="text-center" th:text="${row.Followup_count}"></td>
+									            <td class="text-center" th:text="${row.Other_count}"></td>
+									        </tr>      
+			                         </tbody>
+		                           </table>
+								</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 src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        
+       <script type="text/javascript">
+        $(document).ready(function() {
+
+        	var table = $('#YesterdayQaqctable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                ],
+                scrollY: '50vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: [
+                    {
+                        extend: 'pageLength',
+                        className: 'btn btn-warning'
+                    },
+                    {
+                        title: 'Data export',
+                        extend: 'copyHtml5',
+                        text: 'Copy',
+                        className: 'btn btn-secondary',
+                        id: 'copyBtn'
+                    },
+                    {
+                        extend: 'excelHtml5',
+                        text: 'Excel',
+                        className: 'btn btn-secondary',
+                        id: 'excelBtn'
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        text: 'CSV',
+                        className: 'btn btn-secondary',
+                        id: 'csvBtn'
+                    },
+                    {
+                        extend: 'pdfHtml5',
+                        text: 'PDF',
+                        className: 'btn btn-secondary',
+                        id: 'pdfBtn'
+                    }
+                ],
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false
+            });
+        });
+        
+
+<!------------------ this is updated getting data function ---------------->
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Get today's date
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+    const day = String(today.getDate()).padStart(2, '0');
+
+    // Calculate the first day of the current month
+    const startOfMonth = `${year}-${month}-01`; // yyyy-MM-dd format
+    const todayFormatted = `${year}-${month}-${day}`; // yyyy-MM-dd format
+
+    const startDateField = document.getElementById('startDate');
+    const endDateField = document.getElementById('endDate');
+	
+	// Event listener for To Date
+	   endDateField.addEventListener('change', function () {
+	       if (endDateField.value) {
+	           startDateField.max = endDateField.value; // Set max value for From Date
+	       } else {
+	           startDateField.removeAttribute('max'); // Remove max if To Date is cleared
+	       }
+
+	       // Validate From Date against updated To Date
+	       if (startDateField.value && new Date(startDateField.value) > new Date(endDateField.value)) {
+	           startDateField.value = ''; // Clear invalid From Date
+	           alert("From Date cannot be after To Date.");
+	       }
+	   });
+
+	   // Event listener for From Date
+	   startDateField.addEventListener('change', function () {
+	       if (startDateField.value) {
+	           endDateField.min = startDateField.value; // Set min value for To Date
+	       } else {
+	           endDateField.removeAttribute('min'); // Remove min if From Date is cleared
+	       }
+
+	       // Validate To Date against updated From Date
+	       if (endDateField.value && new Date(endDateField.value) < new Date(startDateField.value)) {
+	           endDateField.value = ''; // Clear invalid To Date
+	           alert("To Date cannot be before From Date.");
+	       }
+	   });
+
+    // Set the default date values in the input fields
+    if (startDateField && endDateField) {
+        startDateField.value = startOfMonth; // yyyy-MM-dd format required for input[type="date"]
+        endDateField.value = todayFormatted; // yyyy-MM-dd format required for input[type="date"]
+    } else {
+        console.error("Start date or end date input field not found!");
+    }
+
+    // Call the search logic directly to load default data on page load
+    loadDashboardData(formatDateForAPI(startOfMonth), formatDateForAPI(todayFormatted));
+});
+
+// Helper function to convert yyyy-MM-dd to dd-MM-yyyy for API calls
+function formatDateForAPI(dateStr) {
+    const [year, month, day] = dateStr.split('-');
+    return `${day}-${month}-${year}`; // Convert to dd-MM-yyyy
+}
+
+
+function loadDashboardData(startDate, endDate) {
+    // Show loading indicators
+    call_loading('totalComplaints', 'start');
+    call_loading('inProgressCount', 'start');
+    call_loading('redressedCount', 'start');
+    call_loading('reopenedCount', 'start');
+    call_loading('closedCount', 'start');
+
+    // Get dropdown values
+    const startDateValue = document.getElementById('startDate').value;
+    const endDateValue = document.getElementById('endDate').value;
+    const dropdown1 = document.getElementById('dropdown1').value;
+    const dropdown2 = document.getElementById('dropdown2').value;
+    const dropdown3 = document.getElementById('dropdown3').value;
+    const dropdown4 = document.getElementById('dropdown4').value;
+
+    // Make API call to get dashboard data
+    fetch(`/gcc/api/callcenterqaqc/dashboard?startDate=${startDate}&endDate=${endDate}&dropdown1=${dropdown1}&dropdown2=${dropdown2}&dropdown3=${dropdown3}&dropdown4=${dropdown4}`)
+        .then(response => response.json())
+        .then(data => {
+            //console.log(data);
+
+            // Store data in sessionStorage
+            sessionStorage.setItem('closename', 'closed');
+            sessionStorage.setItem('closedcount', data["Closed"] || "0");
+            sessionStorage.setItem('reopenname', 'reopened');
+            sessionStorage.setItem('reopenedcount', data["Reopened"] || "0");
+            sessionStorage.setItem('inProgressName', 'processing');
+            sessionStorage.setItem('inProgressCount', data["In Progress"] || "0");
+            sessionStorage.setItem('redressedName', 'redressed');
+            sessionStorage.setItem('redressedCount', data["Redressed"] || "0");
+            sessionStorage.setItem('startDate', startDateValue);
+            sessionStorage.setItem('endDate', endDateValue);
+             
+            sessionStorage.setItem('type', dropdown1);
+            sessionStorage.setItem('zone', dropdown2);
+            sessionStorage.setItem('mode', dropdown3);
+            sessionStorage.setItem('group', dropdown4);
+            
+            sessionStorage.setItem('redirected', 'true'); // Set flag for redirection
+            
+         // Function to handle redirection based on count
+            function handleCardClick(count, cardType, url) {
+                if (parseInt(count) === 0) {
+                    Swal.fire({
+                        icon: 'info',
+                        title: 'No Data',
+                        text: `No ${cardType} records available.`,
+                    });
+                } else {
+                    sessionStorage.setItem('cardType', cardType); // Set card type
+                    window.location.href = url;
+                }
+            }
+
+         // Attach click events to each card
+            document.getElementById('closedCard').addEventListener('click', function () {
+                handleCardClick(sessionStorage.getItem('closedcount'), 'Closed', '/gcc/callcenterqaqc/admin/qaqcassigntaskagents');
+            });
+
+            document.getElementById('reopenedCard').addEventListener('click', function () {
+                handleCardClick(sessionStorage.getItem('reopenedcount'), 'Reopened', '/gcc/callcenterqaqc/admin/qaqcassigntaskagents');
+            });
+
+            document.getElementById('inProgressCard').addEventListener('click', function () {
+                handleCardClick(sessionStorage.getItem('inProgressCount'), 'In Progress', '/gcc/callcenterqaqc/admin/qaqcassigntaskagents');
+            });
+
+            document.getElementById('redressedCard').addEventListener('click', function () {
+                handleCardClick(sessionStorage.getItem('redressedCount'), 'Redressed', '/gcc/callcenterqaqc/admin/qaqcassigntaskagents');
+            });
+
+            // Update UI with fetched data
+            document.getElementById('totalComplaints').textContent = data["Total Complaints"] || "0";
+            document.getElementById('inProgressCount').textContent = data["In Progress"] || "0";
+            document.getElementById('redressedCount').textContent = data["Redressed"] || "0";
+            document.getElementById('reopenedCount').textContent = data["Reopened"] || "0";
+            document.getElementById('closedCount').textContent = data["Closed"] || "0";
+
+            // Stop loading indicators
+            call_loading('totalComplaints', 'stop');
+            call_loading('inProgressCount', 'stop');
+            call_loading('redressedCount', 'stop');
+            call_loading('reopenedCount', 'stop');
+            call_loading('closedCount', 'stop');
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        });
+} 
+
+//Event listener for the search button to reload data based on selected filters
+document.getElementById('searchButton').addEventListener('click', function () {
+    // Get values from input fields
+    const startDateValue = document.getElementById('startDate').value; // yyyy-MM-dd format
+    const endDateValue = document.getElementById('endDate').value;   // yyyy-MM-dd format
+
+    // Function to format date as dd-MM-yyyy
+    const formatDate = (dateStr) => {
+        const [year, month, day] = dateStr.split('-'); // Split yyyy-MM-dd
+        return `${day}-${month}-${year}`;             // Rearrange to dd-MM-yyyy
+    };
+
+    // Convert to dd-MM-yyyy format
+    const formattedStartDate = formatDate(startDateValue);
+    const formattedEndDate = formatDate(endDateValue);
+
+    // Validate dates
+    const startDate = new Date(startDateValue); // Use original yyyy-MM-dd for comparison
+    const endDate = new Date(endDateValue);
+
+    if (startDate && endDate && startDate > endDate) {
+        alert("Start Date should be earlier than End Date.");
+        return;
+    }
+
+    // Call dashboard data loading logic with formatted date values
+    loadDashboardData(formattedStartDate, formattedEndDate);
+});
+
+//api for complainttypes,group,zone,ward
+
+document.addEventListener("DOMContentLoaded", function () {
+    const complaintTypeDropdown = document.getElementById('dropdown1');
+    const complaintGroupDropdown = document.getElementById('dropdown4');
+    const complaintModeDropdown = document.getElementById('dropdown3');
+    const complaintZoneDropdown = document.getElementById('dropdown2');
+
+    // Load Complaint Groups
+    fetch('/gcc/api/callcenterqaqc/getComplaintGroup') 
+        .then(response => response.json())
+        .then(data => {
+            // Clear existing options
+            complaintGroupDropdown.innerHTML = `<option value="">Select</option>`;
+
+            // Add options from the API response
+            data.forEach(complaintGroupName => {
+                complaintGroupDropdown.innerHTML += `<option value="${complaintGroupName}">${complaintGroupName}</option>`;
+            });
+        })
+        .catch(error => {
+            console.error('Error fetching complaint groups:', error);
+        });
+
+    // Event Listener for Complaint Group Change
+    complaintGroupDropdown.addEventListener('change', function () {
+        const selectedGroup = complaintGroupDropdown.value;
+
+        if (selectedGroup) {
+            // Fetch Complaint Types based on selected group
+            fetch(`/gcc/api/callcenterqaqc/getComplaintTypesByGroup?group=${encodeURIComponent(selectedGroup)}`)
+                .then(response => response.json())
+                .then(data => {
+                    // Clear existing options
+                    complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+
+                    // Add options from the API response
+                    data.forEach(complaintTypeName => {
+                        complaintTypeDropdown.innerHTML += `<option value="${complaintTypeName}">${complaintTypeName}</option>`;
+                    });
+                })
+                .catch(error => {
+                    console.error('Error fetching complaint types:', error);
+                });
+        } else {
+            // Clear complaint type dropdown if no group is selected
+            complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+        }
+    });
+    
+    
+    // Load all Modes 
+    fetch('/gcc/api/callcenterqaqc/getModes') 
+    .then(response => response.json())
+    .then(data => {
+        // Clear existing options
+        complaintModeDropdown.innerHTML = `<option value="">Select</option>`;
+
+        // Add options from the API response
+        data.forEach(complaintMode => {
+        	complaintModeDropdown.innerHTML += `<option value="${complaintMode}">${complaintMode}</option>`;
+        });
+    })
+    .catch(error => {
+        console.error('Error fetching complaint groups:', error);
+    });
+    
+    
+ // Load all zones 
+    fetch('/gcc/api/callcenterqaqc/getZones') 
+    .then(response => response.json())
+    .then(data => {
+        // Clear existing options
+        complaintZoneDropdown.innerHTML = `<option value="">Select</option>`;
+
+        // Add options from the API response
+        data.forEach(complaintZone => {
+        	complaintZoneDropdown.innerHTML += `<option value="${complaintZone}">${complaintZone}</option>`;
+        });
+    })
+    .catch(error => {
+        console.error('Error fetching complaint groups:', error);
+    });
+    
+});
+
+
+
+//Function to reset date fields
+  function resetDate() {
+
+  window.location.href = "/gcc/callcenterqaqc/admin/qaqcgrievancedashboard";
+      
+  } 
+
+</script>
+
+<script type="text/javascript">
+
+</script>
+
+        
+        
+    </body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/qaqctaskagentassign.html b/target/classes/templates/modules/callcenterqaqc/qaqctaskagentassign.html
new file mode 100644
index 0000000..31732f9
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/qaqctaskagentassign.html
@@ -0,0 +1,906 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.required{
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media (max-width: 767px) 
+{
+	#qaqcRequestForm label{
+		margin-top: 10px;
+	} 
+}
+
+.card-box {
+       	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+    }  
+    
+.bg-grey-inline-text {
+        padding:2px 2px;
+        background-color: #e6e6e6; 
+        border-radius: 4px;
+    }
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="far fa-calendar-plus bg-blue"></i>
+									<div class="d-inline">	
+										<h5>Assign Agents</h5>
+										<span>Assign Agents for Task</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 QAQC</li>	
+										<li class="breadcrumb-item" aria-current="page">Admin QAQC</li>
+										<li class="breadcrumb-item active" aria-current="page">Assign Agents</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+                        
+                      
+                     <div class="row mt-4">
+
+						<div class="col-sm-4 mb-2">
+							<label for="displaystartDate" class="form-label"
+								style="font-size: medium; margin-bottom: 0px; font-weight: bold;">From
+								Date:</label> <input type="date" id="displaystartDate"
+								class="form-control" >
+						</div>
+						<div class="col-sm-4 mb-2">
+							<label for="displayendDate" class="form-label"
+								style="font-size: medium; margin-bottom: 0px; font-weight: bold;">To
+								Date:</label> <input type="date" id="displayendDate"
+								class="form-control">
+						</div>
+					</div>
+
+                      
+                      <div class="row mt-3">                   	
+                    	
+                    	<div class="col-xl-3 col-md-4 col-sm-12">
+
+							<div class="card card-box" id="closedCard" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayClosename"><b></b></p>
+							    <h2 class="text-twitter fw-700 ml-5 text-center" id="displayClosedcount"></h2>
+							</div>
+							
+							<div class="card card-box" id="reopenedCard" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayReopenname"><b></b></p>
+							    <h3 class="text-twitter fw-700 ml-5 text-center" id="displayReopenedcount"></h3>
+							</div>
+							
+							<div class="card card-box" id="inProgressCard" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayInProgressname"><b></b></p>
+							    <h3 class="text-twitter fw-700 ml-5 text-center" id="displayInProgresscount"></h3>
+							</div>
+							
+							<div class="card card-box" id="redressedCard" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayRedressedname"><b></b></p>
+							    <h3 class="text-twitter fw-700 ml-5 text-center" id="displayRedressedcount"></h3>
+							</div>
+							
+							<div class="card card-box" id="followupCard1" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayFollowupname1"><b></b></p>
+							    <h3 class="text-twitter fw-700 ml-5 text-center" id="displayfollowupcount1"></h3>
+							</div>
+							
+							<div class="card card-box" id="followupCard2" style="display: none;">
+							    <p class="text-facebook mb-20 text-center mt-4" id="displayFollowupname2"><b></b></p>
+							    <h3 class="text-twitter fw-700 ml-5 text-center" id="displayfollowupcount2"></h3>
+							</div>
+							         	
+                    	</div>
+                    	                   	                  	
+                 	</div>
+                 	
+                 	<div class="row">
+                 		<div class="col-12">
+                 			<div class="card">
+                 				<div class="card-block">
+										<label>Task Description If any</label>
+										<textarea rows="1" cols="5" style="width: 100%;height:50px;" placeholder="Enter description"></textarea>
+								</div>								
+								
+                 			</div>
+                 		</div>
+                 	</div>
+                 	
+                 	<div class="row">
+                 		<div class="col-12">
+                 			<div class="card">
+                 				<div class="card-block">
+                 					<div class="row">
+                 						<div class=" col-lg-4 col-md-5 col-sm-12">
+											<label style="font-size: medium;font-weight: bold;">Click this Button to Clear the Pending Calls...</label>
+										</div>
+										<div class="col-lg-8 col-md-7 col-sm-12">
+											<button id="clearButton" class="btn btn-danger">Clear</button>
+										</div>
+									</div>
+								</div>														
+                 			</div>
+                 		</div>
+                 	</div>
+                 	
+                 	<div class="row">
+                 		<div class="col-12">
+                 			<div class="card">
+                 				<div class="card-header">
+									<h3><b>Available Agent List</b></h3>
+								</div>	
+								
+								<div class="card-body">
+									<div class="d-flex justify-content-end mb-2">
+										<button class="btn btn-light mr-4" disabled style="color: blue;border-color: blue;"><i class="ik ik-user-plus f-16" style="color: blue;"></i>Productivity Count:<span class="ml-4" id="productivitycount" style="color: blue;"></span></button>
+										<button class="btn btn-primary" disabled><i class="ik ik-user-plus f-16"></i>Total Available agents:<span class="ml-4" id="availableagentcount"></span></button>
+									</div>
+									<table id="AgentDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+									    <thead class="thead-dark">
+									        <tr role="row">
+									        	<th class="text-center">
+												    <input type="checkbox" id="selectAll" />
+												    <label for="selectAll">Select All</label>
+												</th>
+									            <th class="text-center" width="1%">S.No</th>									            
+									            <th class="text-center">AGENT ID</th>
+									            <th class="text-center">NAME</th>
+									            <th class="text-center">CAMPAIGN PENDING CALLS</th>
+									            <th class="text-center">ALREADY ASSIGNED CALLS</th>
+									            <th class="text-center">CALLS ASSIGNED</th>
+									            <th class="text-center">TOTAL CALLS</th>	
+												<th class="text-center">ACTION</th>
+									        </tr>
+									    </thead>
+									    <tbody style="text-align:center;">
+									        
+									    </tbody>
+										<!-- Transfer Modal -->
+										<div id="transferModal" class="modal" tabindex="-1" role="dialog">
+											<div class="modal-dialog" role="document">
+												<div class="modal-content">
+													<div class="modal-header">
+														<h5 class="modal-title">Transfer Calls</h5>
+														<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+															<span aria-hidden="true">&times;</span>
+														</button>
+													</div>
+													<div class="modal-body">
+														<!-- Editable Calls Assigned Count -->
+														<div class="form-group">
+															<label for="callsAssignedInput">Calls Assigned Count</label>
+															<input type="number" id="callsAssignedInput" class="form-control" min="1" placeholder="Enter Calls Count">
+														</div>
+														<!-- Transfer To Dropdown -->
+														<div class="form-group">
+															<label for="transferToDropdown">Transfer To</label>
+															<select id="transferToDropdown" class="form-control">
+																<!-- Options populated dynamically -->
+															</select>
+														</div>
+													</div>
+													<div class="modal-footer">
+														<button type="button" id="transferButton" class="btn btn-primary">Transfer</button>
+														<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+													</div>
+												</div>
+											</div>
+										</div>
+									</table>
+									 <div class="text-center">
+								      	<button class="btn btn-primary" id="assignBtn">Click to Assign</button>
+								    </div>
+									<div>
+								      	<button class="btn btn-secondary" id="backBtn">Back</button>
+								    </div>
+								</div>							
+								
+                 			</div>
+                 		</div>
+                 	</div>
+                        
+                    </div>
+                </div>
+                
+                <div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				    <div style="position: relative; top: 50%; transform: translateY(-50%);">
+				        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+				            <span class="sr-only">Loading...</span>
+				        </div>
+				        <!-- Add the 'Please wait' text below the spinner -->
+				        <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
+				    </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 src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+        
+        <script type="text/javascript">
+        
+	        $(document).ready(function () {
+	
+	        	const redirected = sessionStorage.getItem('redirected'); // Check if redirected flag is set
+	            const cardType = sessionStorage.getItem('cardType'); // Get the card type
+	            //console.log("Redirected flag:", redirected);
+	            //console.log("Card Type:", cardType);
+	
+	            if (redirected === 'true') {
+	                // Fetch data from sessionStorage
+	                const closeName = sessionStorage.getItem("closename");
+	                const closedCount = sessionStorage.getItem("closedcount");
+	                const reopenName = sessionStorage.getItem("reopenname");
+	                const reopenedCount = sessionStorage.getItem("reopenedcount");
+	                const inProgressName = sessionStorage.getItem("inProgressName");
+	                const inProgressCount = sessionStorage.getItem("inProgressCount");
+	                const redressedName = sessionStorage.getItem("redressedName");
+	                const redressedCount = sessionStorage.getItem("redressedCount");
+	                const startDate = sessionStorage.getItem("startDate");
+	                const endDate = sessionStorage.getItem("endDate");
+	                const followupName1=sessionStorage.getItem("followupname1");
+	                const followupCount1=sessionStorage.getItem("followupcount1");
+	                const followupName2=sessionStorage.getItem("followupname2");
+	                const followupCount2=sessionStorage.getItem("followupcount2");
+	                
+	                const group=sessionStorage.getItem("group");
+	                const type=sessionStorage.getItem("type");
+	                const mode=sessionStorage.getItem("mode");
+	                const zone=sessionStorage.getItem("zone");
+	
+	                /* console.log("CloseName:", closeName);
+	                console.log("ClosedCount:", closedCount);
+	                console.log("ReopenName:", reopenName);
+	                console.log("ReopenedCount:", reopenedCount);
+	                console.log("InProgressName:", inProgressName);
+	                console.log("InProgressCount:", inProgressCount);
+	                console.log("RedressedName:", redressedName);
+	                console.log("RedressedCount:", redressedCount);
+	                console.log("StartDate:", startDate);
+	                console.log("EndDate:", endDate);
+	                console.log("followupName:", followupName);
+	                console.log("followupCount:", followupCount);
+	                
+	                console.log("group:",group);
+	                console.log("type",type);
+	                console.log("mode",mode);
+	                console.log("zone",zone);  */
+	                
+	                /* console.log("ofollowupName:", followupName1);
+	                console.log("ofollowupCount:", followupCount1);
+	                console.log("pfollowupName:", followupName2);
+	                console.log("pfollowupCount:", followupCount2); */
+	                
+	                let cardName = '';
+	                let cardCount = '';
+	
+	                // Set the relevant data based on cardType
+	                if (cardType === 'Closed') {
+	                	cardName = closeName;
+	                    cardCount = closedCount;
+	                    $("#displayClosename").text(closeName); // Display Closed
+	                    $("#displayClosedcount").text(closedCount);
+	                    // Hide others
+	                    $("#reopenedCard, #inProgressCard, #redressedCard","#followupCard1","#followupCard2").hide();
+	                    $("#closedCard").show();  // Show the Closed card
+	                } else if (cardType === 'Reopened') {
+	                	cardName = reopenName;
+	                    cardCount = reopenedCount;
+	                    $("#displayReopenname").text(reopenName); // Display Reopened
+	                    $("#displayReopenedcount").text(reopenedCount);
+	                    // Hide others
+	                    $("#closedCard, #inProgressCard, #redressedCard","#followupCard1","#followupCard2").hide();
+	                    $("#reopenedCard").show();  // Show the Reopened card
+	                } else if (cardType === 'In Progress') {
+	                	cardName = inProgressName;
+	                    cardCount = inProgressCount;
+	                    $("#displayInProgressname").text(inProgressName); // Display In Progress
+	                    $("#displayInProgresscount").text(inProgressCount);
+	                    // Hide others
+	                    $("#closedCard, #reopenedCard, #redressedCard","#followupCard1","#followupCard2").hide();
+	                    $("#inProgressCard").show();  // Show the In Progress card
+	                } else if (cardType === 'Redressed') {
+	                	 cardName = redressedName;
+	                     cardCount = redressedCount;
+	                    $("#displayRedressedname").text(redressedName); // Display Redressed
+	                    $("#displayRedressedcount").text(redressedCount);
+	                    // Hide others
+	                    $("#closedCard, #reopenedCard, #inProgressCard","#followupCard1","#followupCard2").hide();
+	                    $("#redressedCard").show();  // Show the Redressed card
+	                }
+	                else if (cardType === 'Followup1') {
+	               	 cardName = followupName1;
+	                    cardCount = followupCount1;
+	                   $("#displayFollowupname1").text(followupName1); // Display Redressed
+	                   $("#displayfollowupcount1").text(followupCount1);
+	                   // Hide others
+	                   $("#closedCard, #reopenedCard, #inProgressCard","#followupCard2").hide();
+	                   $("#followupCard1").show();  // Show the Redressed card
+	               }
+	                else if (cardType === 'Followup2') {
+		               	 cardName = followupName2;
+		                    cardCount = followupCount2;
+		                   $("#displayFollowupname2").text(followupName2); // Display Redressed
+		                   $("#displayfollowupcount2").text(followupCount2);
+		                   // Hide others
+		                   $("#closedCard, #reopenedCard, #inProgressCard","#followupCard1").hide();
+		                   $("#followupCard2").show();  // Show the Redressed card
+		               }
+	
+	                // Fill in date values
+	                $("#displaystartDate").val(startDate);
+	                $("#displayendDate").val(endDate);
+	
+	                // Disable the start and end date inputs
+	                $("#displaystartDate, #displayendDate").prop("disabled", true);
+	
+	                // Call the getStart function
+	                getStart(cardName, cardCount, startDate, endDate);
+	                
+	                
+	                $('#assignBtn').click(function (event) {
+	                    event.preventDefault();
+	                    
+	                    
+	                    if (!isCleared) {
+	                    	
+	                    	// Trigger Clear button flow
+	                        Swal.fire({
+	                        	allowOutsideClick: false, // Disable clicking outside the modal to close it
+	    	                    allowEscapeKey: false, // Disable escape key to close the modal
+	    	                    allowEnterKey: false, // Disable enter key to close the modal
+							    title: 'Clear pending calls before assigning?',
+							    icon: 'info',
+							    showCancelButton: true,
+							    showDenyButton: true, // Show the Deny button
+							    confirmButtonColor: 'green',
+							    cancelButtonColor: 'orange',
+							    denyButtonColor: 'grey',
+							    confirmButtonText: 'Yes, clear it!', // Confirm button text
+							    cancelButtonText: 'No, assign without clearing', // Cancel button text
+							    denyButtonText: 'Exit' // Deny button text
+							}).then((result) => {
+	                            if (result.isConfirmed) {
+	                                // Trigger Clear logic
+	                                $('#clearButton').click();
+	                                // Wait until Clear logic completes
+	                                const interval = setInterval(() => {
+	                                    if (isCleared) {
+	                                        clearInterval(interval); // Stop checking
+	                                        assignLogic(); // Proceed to Assign logic
+	                                    }
+	                                }, 500); // Check every 500ms
+	                            } 
+	                            else if (result.isDenied) {
+	                                // Do nothing on cancel (Cancel button clicked)
+	                                Swal.fire('Cancelled', 'No action performed.', 'info');
+	                            }
+	                            else {
+	                                // Proceed directly to Assign logic
+	                                assignLogic();
+	                            }
+	                        });
+	                    } else {
+	                        // Proceed with Assign logic directly if Clear is already done
+	                        assignLogic();
+	                    }
+	                    	
+	                });
+	
+	                    
+	            
+	        function assignLogic() {
+	        	
+	        	// Fetch the values from the fields
+                const startDate = $('#displaystartDate').val();
+                const endDate = $('#displayendDate').val();
+                
+                const description = $('textarea').val().trim() || "N/A"; // Default to "N/A" if empty
+                 /* console.log("startDate",startDate);  
+                 console.log("endDate",endDate); */ 
+
+                // Validate inputs if necessary
+                if (!startDate || !endDate || !cardName || !cardCount) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'All fields must be filled!',
+                    });
+                    return;
+                }
+                
+                const allAgents = [];
+                const table = $('#AgentDatatable').DataTable();
+                
+             //Loop through all rows in the DataTable
+                table.rows().every(function (rowIdx, tableLoop, rowLoop) {
+                    const row = $(this.node()); // Get the DOM row
+                    const checkbox = row.find('.select-agent');
+                    const agentId = row.find('td:nth-child(3)').text().trim();
+                    const callsPerAgent = row.find('td:nth-child(7)').text().trim();
+
+                    // Add agent to allAgents with default callsPerAgent = 0
+                    allAgents.push({ agentId: agentId, callsPerAgent: 0 });
+
+                    // If checkbox is checked, update callsPerAgent
+                    if (checkbox.is(':checked')) {
+                        const agent = allAgents.find(a => a.agentId === agentId);
+                        if (agent) {
+                            agent.callsPerAgent = callsPerAgent;
+                        }
+                    }
+                });
+
+                // Remove agents with callsPerAgent still set to 0
+                const filteredAgents = allAgents.filter(agent => agent.callsPerAgent > 0);
+
+             // Check if no agents were selected
+                if (filteredAgents.length === 0) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'Please select at least one agent or assign calls!',
+                    });
+                    return;
+                }
+             
+                //console.log('Filtered agents:', filteredAgents);
+                
+
+             // Prepare the data object to send in the AJAX request
+                const data = {
+                    startDate: startDate,
+                    endDate: endDate,
+                    closeName: cardName,
+                    closedCount: cardCount,
+                    description: description,
+                    group:group,
+	                type:type,
+	                mode:mode,
+	                zone:zone,
+                    agents:filteredAgents // Send only agents with callsPerAgent > 0
+                };
+
+                //console.log('Data to send:', data);
+                
+             	// Show the loader
+              $('#pageLoader').show();
+
+                // Send the AJAX request
+                $.ajax({
+                    type: "POST",
+                    url: "/gcc/api/callcenterqaqc/agentassign/taskassign", // Replace with your API endpoint
+                    data: JSON.stringify(data),
+                    contentType: "application/json",
+                    success: function (response) {
+                    	// Hide the loader
+                        $('#pageLoader').hide();
+                        // Show a success message using Swal
+                        Swal.fire({
+                            icon: 'success',
+                            title: 'Success',
+                            allowOutsideClick: false, // Disable clicking outside the modal to close it
+    	                    allowEscapeKey: false, // Disable escape key to close the modal
+    	                    allowEnterKey: false, // Disable enter key to close the modal
+    	                    showConfirmButton: true, // Ensure the confirm button is visible
+                            text: response.message || 'Data transferred successfully!',
+                        }).then((result) => {
+                        	if (result.isConfirmed) {       		            
+   		                 window.location.href = `/gcc/callcenterqaqc/qaqctasklist`;
+                        	}
+   		            });
+                    },
+                    error: function (error) {
+                    	$('#pageLoader').hide();
+                        // Show an error message using Swal
+                        Swal.fire({
+                        	allowOutsideClick: false, // Disable clicking outside the modal to close it
+    	                    allowEscapeKey: false, // Disable escape key to close the modal
+    	                    allowEnterKey: false, // Disable enter key to close the modal
+    	                    showConfirmButton: true, // Ensure the confirm button is visible
+                            icon: 'error',
+                            title: 'Error',
+                            text: error.responseJSON?.message,
+                        }).then((result) => {
+                        	if (result.isConfirmed) {       		            
+          		                 window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
+                               	}
+          		            });
+                    }
+                }); 
+	        }
+	
+	                // Clear the redirected flag after use
+	                sessionStorage.removeItem('redirected');
+	            } else {
+	                // Clear sessionStorage and notify the user
+	                sessionStorage.clear();
+	             // Show Swal alert and redirect on OK button
+	                Swal.fire({
+	                	allowOutsideClick: false, // Disable clicking outside the modal to close it
+	                    allowEscapeKey: false, // Disable escape key to close the modal
+	                    allowEnterKey: false, // Disable enter key to close the modal
+	                    showConfirmButton: true, // Ensure the confirm button is visible
+	                    icon: 'error',
+	                    title: 'Access Denied',
+	                    text: 'Please navigate from the Dashboard Page.',
+	                    confirmButtonText: 'OK',
+	                }).then((result) => {
+	                    if (result.isConfirmed) {
+	                        // Redirect to the desired page
+	                    	window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
+	                    }
+	                });	            }
+
+            // Optional: You can still allow toggling of cards if needed:
+            $('.card-box').on('click', function () {
+                // Hide all the card-box elements
+                $('.card-box').hide();
+                
+                // Get the id of the clicked card-box and show it
+                const cardId = $(this).attr('id');
+                $('#' + cardId).show();
+            });
+
+            function getStart(closeName,closedCount,startDate,endDate)
+            {	
+            	// Show the loader
+                $('#pageLoader').show();
+            	
+            	$.ajax({
+    		        url: '/gcc/api/callcenterqaqc/agentassign/getavailableagents?totalDataCount='+closedCount,
+    		        type: 'GET',
+    		        dataType: 'json',
+    		        success: function(response) {
+    		        	// Hide the loader
+                        $('#pageLoader').hide();
+    		        	if (response.status === 'success') {
+    	                    populateDataTable(response);
+    	                    $("#productivitycount").text(response.productivity_count);
+    	                    $("#availableagentcount").text(response.agent_available_count);
+    	                } if (response.status === 'error') {
+    	                	 $('#pageLoader').hide();
+    	                    Swal.fire({
+    	                        icon: 'error',
+    	                        title: 'Error',
+    	                        text: response.message || "Error fetching Agents.",
+    	                        confirmButtonText: 'OK',
+    	                    }).then((result) => {
+    	                        if (result.isConfirmed) {
+    	                            // Reload the same page
+             		                 window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
+    	                        }
+    	                    });
+    	                }
+    		        },
+    		        error: function(xhr, status, error) {
+    		        	 $('#pageLoader').hide();
+    		            console.error('Error fetching assigned agents:', error);
+    		        }
+    		    });
+            }
+            
+            function populateDataTable(data) {
+                // Clear existing rows
+                var table = $('#AgentDatatable').DataTable();
+                table.clear();
+
+                // Populate table
+                data.available_agents.forEach((agent, index) => {
+
+                    table.row.add([
+                        `<input type="checkbox" class="select-agent" value="${agent.agent_id}" checked />`,
+                        index + 1,
+                        agent.agent_id,
+                        agent.agent_name,
+                        agent.campaignPendingCount,
+                        agent.todayCount1,
+                        agent.calls_per_agent,
+                        agent.totalCallsCount,
+                         `<button class="btn btn-warning btn-sm edit-agent" data-id="${agent.agent_id}"><i class="ik ik-edit"></i></button>`
+                    ]);
+                });
+
+                // Redraw table to reflect new data
+                table.draw();                             
+               
+            }
+
+			let selectedAgentId; // Store the agent being edited
+
+			// Handle "Edit" button click
+			$(document).on('click', '.edit-agent', function () {
+				const row = $(this).closest('tr'); // Get the parent row of the clicked button
+				selectedAgentId = row.find('td:nth-child(3)').text().trim(); // Get the Agent ID
+				const callsAssigned = row.find('td:nth-child(7)').text().trim(); // Get Calls Assigned Count
+
+				// Populate the Calls Assigned input field
+				$('#callsAssignedInput').val(callsAssigned);
+
+				// Populate the Transfer To dropdown
+				const dropdown = $('#transferToDropdown');
+				dropdown.empty(); // Clear previous options
+				$('#AgentDatatable tbody tr').each(function () {
+					const agentId = $(this).find('td:nth-child(3)').text().trim();
+					const agentName = $(this).find('td:nth-child(4)').text().trim();
+
+					// Exclude the currently selected agent from the dropdown
+					if (agentId !== selectedAgentId) {
+						dropdown.append(`<option value="${agentId}">${agentName}</option>`);
+					}
+				});
+
+				// Show the modal
+				$('#transferModal').modal('show');
+			});
+
+			// Handle "Transfer" button click
+			$('#transferButton').click(function () {
+				const transferCount = parseInt($('#callsAssignedInput').val(), 10);
+				const transferToAgentId = $('#transferToDropdown').val();
+
+				if (!transferCount || transferCount <= 0) {
+					alert('Please enter a valid calls count!');
+					return;
+				}
+
+				if (!transferToAgentId) {
+					alert('Please select an agent to transfer the calls!');
+					return;
+				}
+
+				let deductionSuccess = false; // Flag for successful deduction from the current agent
+				let additionSuccess = false; // Flag for successful addition to the receiving agent
+				const productivityCount = parseInt($('#productivitycount').text().trim(), 10); // Fetch dynamic productivity count from the button
+
+				// Validate and update the table
+				$('#AgentDatatable tbody tr').each(function () {
+					const agentId = $(this).find('td:nth-child(3)').text().trim();
+					const callsAssignedCell = $(this).find('td:nth-child(7)'); // Calls Assigned column
+
+					// Validate deduction from the current agent
+					if (agentId === selectedAgentId) {
+						const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
+						if (currentCount >= transferCount) {
+							deductionSuccess = true;
+						} else {
+
+							alert('Transfer not allowed! Transferring more calls than assigned.');
+
+							return false; // Stop the operation
+						}
+					}
+
+					// Validate addition to the receiving agent
+					if (agentId === transferToAgentId) {
+						const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
+						const newCount = currentCount + transferCount;
+						if (newCount <= productivityCount) {
+							additionSuccess = true;
+						} else {
+							alert(`Transfer not allowed! Transferring ${transferCount} calls will exceed the productivity count of ${productivityCount} for agent ID: ${transferToAgentId}.`);
+
+							return false; // Stop the operation
+						}
+					}
+				});
+
+				// If both validations pass, proceed to update the table
+				if (deductionSuccess && additionSuccess) {
+					$('#AgentDatatable tbody tr').each(function () {
+						const agentId = $(this).find('td:nth-child(3)').text().trim();
+						const callsAssignedCell = $(this).find('td:nth-child(7)'); // Calls Assigned column
+						const totalCallsCell = $(this).find('td:nth-child(8)'); // TOTAL CALLS column
+
+						// Deduct calls from the current agent
+						if (agentId === selectedAgentId) {
+							const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
+							callsAssignedCell.text(currentCount - transferCount);
+
+							// Update TOTAL CALLS for the current agent
+							const currentTotalCalls = parseInt(totalCallsCell.text().trim(), 10);
+							totalCallsCell.text(currentTotalCalls - transferCount);
+						}
+
+						// Add calls to the receiving agent
+						if (agentId === transferToAgentId) {
+							const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
+							callsAssignedCell.text(currentCount + transferCount);
+
+							// Update TOTAL CALLS for the receiving agent
+							const currentTotalCalls = parseInt(totalCallsCell.text().trim(), 10);
+							totalCallsCell.text(currentTotalCalls + transferCount);
+						}
+					});
+
+					// Dynamically update the total calls across all agents
+					let totalCalls = 0;
+					$('#AgentDatatable tbody tr').each(function () {
+						const totalCallsCell = $(this).find('td:nth-child(8)'); // TOTAL CALLS column
+						totalCalls += parseInt(totalCallsCell.text().trim(), 10);
+					});
+					$('#totalCallsCount').text(totalCalls); // Update total calls count across all agents
+
+					// Close the modal
+					$('#transferModal').modal('hide');
+				}
+
+			});
+
+
+            
+            // Initialize DataTable
+            var table = $('#AgentDatatable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                ],
+                scrollY: '50vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: [
+                    {
+                        extend: 'pageLength',
+                        className: 'btn btn-warning'
+                    },
+                    {
+                        title: 'Data export',
+                        extend: 'copyHtml5',
+                        text: 'Copy',
+                        className: 'btn btn-secondary',
+                        id: 'copyBtn'
+                    },
+                    {
+                        extend: 'excelHtml5',
+                        text: 'Excel',
+                        className: 'btn btn-secondary',
+                        id: 'excelBtn'
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        text: 'CSV',
+                        className: 'btn btn-secondary',
+                        id: 'csvBtn'
+                    },
+                    {
+                        extend: 'pdfHtml5',
+                        text: 'PDF',
+                        className: 'btn btn-secondary',
+                        id: 'pdfBtn'
+                    }
+                ],
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false
+            });
+        });
+
+        $(document).ready(function () {
+            // "Select All" checkbox functionality
+            $('#selectAll').on('change', function () {
+                const isChecked = $(this).is(':checked');
+                $('.select-agent').prop('checked', isChecked); // Check/uncheck all checkboxes
+            });
+
+            // Ensure "Select All" is checked/unchecked based on individual checkboxes
+            $(document).on('change', '.select-agent', function () {
+                const allChecked = $('.select-agent:checked').length === $('.select-agent').length;
+                $('#selectAll').prop('checked', allChecked); // Check "Select All" only if all checkboxes are selected
+            });
+        });		
+        </script>
+        <script type="text/javascript">
+        $(document).ready(function () {
+        	$('#backBtn').click(function (event) {
+	                 window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
+        	});
+        	
+        });
+        </script>
+        <script>
+     // Global flag to track if Clear logic has been executed
+        let isCleared = false;
+     	
+    document.getElementById('clearButton').addEventListener('click', function () {
+        Swal.fire({
+            title: 'Are you sure to clear calls?',          
+            icon: 'warning',
+            allowOutsideClick: false, // Disable clicking outside the modal to close it
+            allowEscapeKey: false, // Disable escape key to close the modal
+            allowEnterKey: false, // Disable enter key to close the modal
+            showCancelButton: true,
+            confirmButtonColor: '#d33',
+            cancelButtonColor: '#3085d6',
+            confirmButtonText: 'Yes, clear it!',
+            cancelButtonText: 'No, cancel'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // Logic to clear calls can be added here
+                
+                $.ajax({
+	            url: '/gcc/api/callcenterqaqc/agentassign/deleteRecords',
+	            type: 'GET',
+	            contentType: 'application/json',
+	            success: function (response) {
+            		//console.log("response",response);
+            		if (response==="success") {
+            		
+            			Swal.fire(
+                                'Cleared!',
+                                'The calls have been cleared.',
+                                'success'
+                            );
+            			isCleared = true; // Mark as cleared
+	            	}
+	            	else {
+		                Swal.fire("Info", "No Records to clear,You can Assign", "info");
+		                isCleared = true; // Mark as cleared
+	                }
+            	 
+		            },
+		            error: function (xhr, status, error) {
+			            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+		                
+		            }
+		        });
+
+            } else {
+                Swal.fire(
+                    'Cancelled',
+                    'Your data is safe,If you wish you can Assign :)',
+                    'info'
+                );
+                isCleared = true;
+            }
+        });
+    });
+</script>
+        
+    </body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/qaqctasklist.html b/target/classes/templates/modules/callcenterqaqc/qaqctasklist.html
new file mode 100644
index 0000000..8029b49
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/qaqctasklist.html
@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style> 
+ .required{
+	color: red;
+}
+.card-box {
+       	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
+       	
+    }
+    
+@media (max-width: 768px) {
+    .card-box {
+        text-align: center;
+    }
+
+}		
+</style>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <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="fa fa-list-alt bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>QAQC Task List</h5>
+                                        <span>1913 QAQC Task List</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="/gcc/index"><i class="ik ik-home"></i></a>
+                                        </li>
+                                        <li class="breadcrumb-item" aria-current="page">1913 Reports</li>																				
+                                        <li class="breadcrumb-item active" aria-current="page">QAQC Task List</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+					
+	                <div class="row mt-4">
+	                	
+	                	<div class="col-md-12">
+                             <div class="card">
+                             	<div class="card-header">
+                             		<h3>Task Details</h3>
+                             	</div>
+                             	
+                          	<div class="row mt-3 ml-2">
+									    <div class="col-md-3">
+									    	<label for="startDate" class="form-label" style="font-size: medium;">From Date:</label>
+									        <input type="date" id="startDate" class="form-control" placeholder="Start Date">
+									    </div>
+									    <div class="col-md-3">
+									    	<label for="endDate" class="form-label" style="font-size: medium;">To Date:</label>
+									        <input type="date" id="endDate" class="form-control" placeholder="End Date">
+									    </div>
+									    <div class="col-md-3" style="margin-top: 30px;">
+									        <button id="searchBtn" class="btn btn-primary">Search</button>
+									        <button id="resetBtn" class="btn btn-secondary">Reset</button>
+									    </div>
+									</div>
+					   				
+					   				<div class="card-body">
+					   				<div>
+					   					<div class="row mt-2"> 
+					   					
+					   							                  	                  	
+                    						<div class="col-xl-3 col-md-3 col-sm-12">
+												<div class="card card-box p-4">                   			
+					                    				<h6 class="text-facebook mb-20 mt-2 text-center"><b>Total Task</b></h6>
+                    									<h4 class="text-twitter fw-700 text-center" id="totaltask"></h4>                   			
+                    							</div>                   	
+                    						</div>  
+                    						<div class="col-xl-3 col-md-3 col-sm-12">
+												<div class="card card-box p-4">                   			
+					                    				<h6 class="text-facebook mb-20 mt-2 text-center"><b>Assigned Calls</b></h6>
+                    									<h4 class="text-twitter fw-700 text-center" id="totalcalls"></h4>                   			
+                    							</div>                   	
+                    						</div>
+                    						<div class="col-xl-3 col-md-3 col-sm-12">
+												<div class="card card-box p-4">                   			
+					                    				<h6 class="text-facebook mb-20 mt-2 text-center"><b>Finished</b></h6>
+                    									<h4 class="text-twitter fw-700 text-center" id="completedcalls"></h4>                   			
+                    							</div>                   	
+                    						</div>
+                    						<div class="col-xl-3 col-md-3 col-sm-12">
+												<div class="card card-box p-4">                   			
+					                    				<h6 class="text-facebook mb-20 mt-2 text-center"><b>Pending Calls</b></h6>
+                    									<h4 class="text-twitter fw-700 text-center" id="pendingcalls"></h4>                   			
+                    							</div>                   	
+                    						</div>                  						                	                   	                  	
+                 						</div>
+                 						
+                 						<div>               							
+                 							<table id="QaqcDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+							                    <thead class="thead-dark">
+											        <tr role="row">
+							                            <th rowspan="2" class="text-center" width="1%;">S.No</th>
+							                            <th rowspan="2" class="text-center no-sort">Task ID</th>
+							                            <th rowspan="2" class="text-center" width="100px;">Date</th> 
+							                            <th rowspan="2" class="text-center no-sort">Category</th>
+							                            <!-- <th rowspan="2" class="text-center">Description</th> -->
+							                            <th colspan="4" class="text-center">Performance</th>
+							                            <th colspan="4" class="text-center">Call Results</th>
+							                            
+							                        </tr>
+							                        <tr role="row">           
+							                            <!-- <th class="text-center">S.No</th> 
+							                            <th class="text-center">Task ID</th>  -->
+							                            
+							                            <th class="text-center no-sort">Assigned Calls</th>							                            
+							                            <th class="text-center no-sort">Finished</th>
+							                            <th class="text-center no-sort">Pending Calls</th>
+							                            <th class="text-center no-sort">Completion(%)</th>
+							                            <th class="no-sort">Completed</th> 
+							                            <th class="no-sort">Reopen</th>
+							                            <th class="no-sort">Followup</th>
+							                            <th class="no-sort">Others</th>
+							                        </tr>
+							                    </thead>
+							                    <tbody>
+							                        
+							                    </tbody>
+							                </table>
+                 						</div>
+                 						
+					   				</div>
+                             	</div>						 
+							 </div>
+                         </div> 
+					</div>	               	
+             						 					  
+			</div> 
+        </div>
+   
+     <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+      </div>
+</div>
+
+
+<!--agentperformance Modal -->
+		<div class="modal fade" id="agentperformance" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalCenterLabel">Task Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    
+                    <div class="modal-body">
+                    
+                    <div class="modal-info"></div>
+						<div class="table-responsive" >
+						<table id="agentperformanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
+                              <thead class="thead-dark">
+                                 	<tr role="row">
+                            <th rowspan="2" class="text-center">S.No</th>
+                            <th rowspan="2" class="text-center">Agent Name</th>                           
+                            <th colspan="4" class="text-center">Performance</th>
+                            <th colspan="4" class="text-center">Call Results</th>
+                        </tr>
+                        <tr role="row">          
+                            <th class="text-center">Assigned Calls</th>
+                            <th class="text-center">Finished</th>
+                            <th class="text-center">Pending Calls</th>
+                            <th class="text-center">Completion (%)</th>
+                            <th class="text-center">Completed</th>
+                            <th class="text-center">Reopen</th>
+                            <th class="text-center">Followup</th>
+                            <th class="text-center">Others</th>
+                            
+                        </tr>
+						 </thead>
+                         <tbody>
+                                    
+                         </tbody>
+                               
+                       </table>
+						</div>
+                     </div>
+  					
+  					<div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                        
+                    </div>                                        
+                </div>
+            </div>
+        </div>
+
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">	
+ 	 $(document).ready(function() {
+ 		 
+ 		 $('#agentperformance').on('shown.bs.modal', function () {
+
+ 	    	 var buttons = [
+ 	             {
+ 	                 extend: 'pageLength',
+ 	                 className: 'btn btn-warning'
+ 	             },
+ 	             {
+ 	                 title: 'Data export',
+ 	                 extend: 'copyHtml5',
+ 	                 text: 'Copy',
+ 	                 className: 'btn btn-secondary'
+ 	             },
+ 	             {
+ 	                 extend: 'excelHtml5',
+ 	                 text: 'Excel',
+ 	                 className: 'btn btn-secondary'
+ 	             },
+ 	             {
+ 	                 extend: 'csvHtml5',
+ 	                 text: 'CSV',
+ 	                 className: 'btn btn-secondary'
+ 	             },
+ 	             {
+ 	                 extend: 'pdfHtml5',
+ 	                 text: 'PDF',
+ 	                 className: 'btn btn-secondary'
+ 	             }
+ 	         ];
+ 	        
+ 	            $('#agentperformanceDatatable').DataTable({
+ 	                dom: 'Bftip',               
+ 	                columnDefs: [
+ 	                    { targets: 'no-sort', orderable: false }
+ 	                ],
+ 	                lengthMenu: [
+ 	                    [50, 100, 200, 500, -1],
+ 	                    ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+ 	                ],
+ 	                scrollY: '30vh',
+ 	                scrollX: true,  // Enable horizontal scrolling	
+ 	                fixedColumns: {
+ 	                    left: 1,
+ 	                    right: 1
+ 	                },
+ 	                buttons: buttons,
+ 	                fixedHeader: false,
+ 	                autoWidth: false,
+ 	                responsive: true,
+ 	                searching: true,
+ 	                select: false,
+ 	                processing: false,
+ 	            });
+ 	        
+ 	        
+ 	    });
+
+     	var table = $('#QaqcDatatable').DataTable({
+             dom: 'Bftip',
+             columnDefs: [
+                 { targets: 'no-sort', orderable: false }
+             ],
+             lengthMenu: [
+                 [50, 100, 200, 500, -1],
+                 ['50 rows', '100 rows', '200 rows', 'Show all']
+             ],
+             scrollY: '50vh',
+             fixedColumns: {
+                 left: 1,
+                 right: 1
+             },
+             buttons: [
+                 {
+                     extend: 'pageLength',
+                     className: 'btn btn-warning'
+                 },
+                 {
+                     title: 'Data export',
+                     extend: 'copyHtml5',
+                     text: 'Copy',
+                     className: 'btn btn-secondary',
+                     id: 'copyBtn'
+                 },
+                 {
+                     extend: 'excelHtml5',
+                     text: 'Excel',
+                     className: 'btn btn-secondary',
+                     id: 'excelBtn'
+                 },
+                 {
+                     extend: 'csvHtml5',
+                     text: 'CSV',
+                     className: 'btn btn-secondary',
+                     id: 'csvBtn'
+                 },
+                 {
+                     extend: 'pdfHtml5',
+                     text: 'PDF',
+                     className: 'btn btn-secondary',
+                     id: 'pdfBtn'
+                 }
+             ],
+             fixedHeader: true,
+             autoWidth: true,
+             responsive: true,
+             searching:true,
+             select: false,
+             processing: false
+         });
+    	
+     	 // Initialize DataTable with export buttons
+
+            const overallcountapiUrl = "/gcc/api/callcenterqaqc/qaqctasklist/overalltaskcount"; // Replace with your API endpoint
+		    const tableApiUrl = "/gcc/api/callcenterqaqc/qaqctasklist/taskdatacount";
+            const agentApiUrl = "/gcc/api/callcenterqaqc/qaqctasklist/agentdatacount";
+		    const totaltasks = document.getElementById("totaltask");
+		    const totalcallsassigned = document.getElementById("totalcalls");
+		    const completedcallscount = document.getElementById("completedcalls");
+		    const pendingcallscount = document.getElementById("pendingcalls");
+		    const dataTableElement = $("#QaqcDatatable").DataTable(); // Initialize DataTable
+
+		    // Fetch Data Function
+		    const fetchData = async (startDate = "", endDate = "") => {
+		        try {
+		            const params = new URLSearchParams();
+		            if (startDate) params.append("startDate", startDate);
+		            if (endDate) params.append("endDate", endDate);
+
+		            const response = await fetch(`${overallcountapiUrl}?${params.toString()}`);
+		            const data = await response.json();
+					
+		            //console.log(data);
+		            // Update Summary Counts
+		            const firstItem = data[0];  // Get the first object from the array
+		            totaltasks.textContent = firstItem.total_tasks || 0; 
+		            totalcallsassigned.textContent = firstItem.total_calls || 0; 
+		            completedcallscount.textContent = firstItem.completed_calls || 0;  
+		            pendingcallscount.textContent = firstItem.pending_calls || 0; 
+             } catch (error) {
+		            console.error("Error fetching data:", error);
+		        }
+		    };
+		    
+
+    // Fetch and Populate Table Data Function
+    const fetchTableData = async (startDate = "", endDate = "") => {
+        try {
+            const params = new URLSearchParams();
+            if (startDate) params.append("startDate", startDate);
+            if (endDate) params.append("endDate", endDate);
+
+            const response = await fetch(`${tableApiUrl}?${params.toString()}`);
+            const tableData = await response.json();
+
+            // Update DataTable with new data
+            table.clear(); // Clear existing data
+            tableData.forEach((row, index) => {
+                const percentage = row.Assigned
+                    ? Math.round((row.TotalCompleted / row.Assigned) * 100)
+                    : 0;
+
+                table.row.add([
+                	
+                	`<div style="text-align: center;">${index + 1}</div>`,
+                	`<button class="btn btn-success" data-taskid="${row.qaqc_id}" 
+                    onclick="handleTaskButtonClick('${row.qaqc_id}')">${row.taskid}</button>`,
+                    `<div style="text-align: center;">${row.TaskCreatedDate}</div>`,
+                    `<div style="text-align: center;">${row.call_category}</div>`,
+                    /* `<div style="text-align: center;">${row.description}</div>`, */                                      
+                    `<div style="text-align: center;">${row.Assigned}</div>`,
+                    `<div style="text-align: center;">${row.TotalCompleted}</div>`,
+                    `<div style="text-align: center;">${row.Pending}</div>`,
+                    `<div style="text-align: center;">${percentage}%</div>`,
+                    `<div style="text-align: center;">${row.Completed}</div>`,
+                    `<div style="text-align: center;">${row.Reopened}</div>`,
+                    `<div style="text-align: center;">${row.Followup}</div>`,
+                    `<div style="text-align: center;">${row.Others}</div>`,
+                ]);
+                
+            });
+            table.draw(); // Redraw the DataTable with the updated data
+      
+        } catch (error) {
+            console.error("Error fetching table data:", error);
+        }
+    };
+
+    // Example: Fetch Data initially without filters
+    fetchTableData();
+    
+ // Event listener for From Date selection
+	   $("#startDate").on("change", function() {
+	       const startDate = $(this).val();  // Get the selected start date
+	       // Set the min value for To Date to be the selected From Date
+	       $("#endDate").attr("min", startDate);
+	   });
+
+	   // Event listener for To Date selection
+	   $("#endDate").on("change", function() {
+	       const endDate = $(this).val();  // Get the selected end date
+	       // Set the max value for From Date to be the selected To Date
+	       $("#startDate").attr("max", endDate);
+	   });
+
+		    // Search Button Click
+		    document.getElementById("searchBtn").addEventListener("click", () => {
+		        const startDate = document.getElementById("startDate").value;
+		        const endDate = document.getElementById("endDate").value;
+		        fetchData(startDate, endDate);
+		        fetchTableData(startDate,endDate);
+		        
+		        
+		    });
+
+		    // Reset Button Click
+		    document.getElementById("resetBtn").addEventListener("click", () => {
+		        /* document.getElementById("startDate").value = "";
+		        document.getElementById("endDate").value = "";
+		        fetchData(); // Fetch data without date filters
+		        fetchTableData(); */
+ 		        window.location.href = "/gcc/callcenterqaqc/qaqctasklist";		        
+		    });
+
+		    // Initial Load
+		    fetchData(); // Load overall data initially
+            fetchTableData();
+		});
+ 	 
+ 	 function handleTaskButtonClick(TaskId)
+ 	 {
+ 		 //console.log("TaskId",TaskId);
+ 		 		 
+ 		 
+ 		$('#agentperformance').modal({
+            backdrop: 'static',
+            keyboard: false
+        });
+        $('#agentperformance').modal('show');
+        
+     // Clear old data from the table
+ 	    if ($.fn.DataTable.isDataTable('#agentperformanceDatatable')) {
+ 	        $('#agentperformanceDatatable').DataTable().clear().destroy();
+ 	    }
+ 		 
+        $.ajax({
+            url: '/gcc/api/callcenterqaqc/qaqctasklist/agentdatacount?qaqc_id='+TaskId,
+            type: 'GET',
+            contentType: 'application/json',
+            success: function (response) {
+            	//console.log("response",response);
+            	if (response && response.length > 0) {
+            		
+	            	let CtableBody = $('#agentperformanceDatatable tbody');
+	            	CtableBody.empty();
+            	response.forEach((item, index) => {
+            		const modalHeader = `
+                        <h5 class="modal-title" id="exampleModalCenterLabel">
+                            Task Details - <span>Task ID: ${item.taskId}</span> and
+                            <span>Created Date: ${item.TaskCreatedDate}</span>
+                            
+                        </h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    `;
+                    $('.modal-header').html(modalHeader);
+                    
+                 // Updating the modal body with additional details
+                    const modalBodyDetails = `
+                    <div class="mt-1" style="font-size: 14px;">
+                        <div class="row pb-2">
+                            <div class="col-md-6"><strong>From Date:</strong> ${item.fromdate || 'N/A'}</div>
+                            <div class="col-md-6"><strong>To Date:</strong> ${item.todate || 'N/A'}</div>
+                        </div>
+                        <div class="row pb-2">
+                            <div class="col-md-6"><strong>Description:</strong> ${item.description || 'N/A'}</div>
+                            <div class="col-md-6"><strong>Call Category:</strong> ${item.call_category || 'N/A'}</div>
+                        </div>
+                        <div class="row pb-2">
+	                        <div class="col-md-6"><strong>Complaint Group:</strong> ${item.complaint_group || 'N/A'}</div>
+	                        <div class="col-md-6"><strong>Complaint Type:</strong> ${item.complaint_type || 'N/A'}</div>
+                    	</div>
+                    	<div class="row pb-2">
+                        <div class="col-md-6"><strong>Complaint Mode:</strong> ${item.complaint_mode || 'N/A'}</div>
+                        <div class="col-md-6"><strong>Complaint Zone:</strong> ${item.complaint_zone || 'N/A'}</div>
+                	</div>
+                	</div>
+                        <hr>
+                    `;
+                    $('.modal-info').html(modalBodyDetails); // Insert the details before the table
+                    
+            		let row = `
+            			<tr>
+                        <td class="text-center">${index + 1}</td>
+                        <td class="text-center">${item.agentName}</td>
+                        <td class="text-center">${item.assigned || 0}</td>
+                        <td class="text-center">${item.callstaken || 0}</td>
+                        <td class="text-center">${item.pending || 0}</td>
+                        <td class="text-center">${item.percentage || 0}%</td>
+                        <td class="text-center">${item.Completed || 0}</td>
+                        <td class="text-center">${item.Reopened || 0}</td>
+                        <td class="text-center">${item.Followup || 0}</td>
+                        <td class="text-center">${item.Others || 0}</td>
+                    </tr>
+                `;
+            		CtableBody.append(row); 
+            	});
+            	}
+            	else {
+                    $('#agentperformanceDatatable tbody').html(`
+                        <tr>
+                            <td colspan="10" class="text-center">No data available</td>
+                        </tr>
+                    `);
+                }
+            	 
+            },
+            error: function (xhr, status, error) {
+                console.error('Error in Fetching Task:', error);
+                $('#agentperformanceDatatable tbody').html(`
+                        <tr>
+                            <td colspan="10" class="text-center text-danger">Failed to load data</td>
+                        </tr>
+                    `);
+            }
+        });
+ 		 
+ 	 }
+
+    
+	</script>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/socialmediacomplaints.html b/target/classes/templates/modules/callcenterqaqc/socialmediacomplaints.html
new file mode 100644
index 0000000..60cbf30
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/socialmediacomplaints.html
@@ -0,0 +1,1123 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+    .width1{
+    	width: 100px;
+    }
+    .width2{
+    	width: 120px;
+    }
+</style>
+<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fa fa-list-alt bg-blue"></i>
+									<div class="d-inline">
+										<h5>SocialMedia Complaints</h5>
+										<span>View Social Media Complaints</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 Social Media</li>
+										<li class="breadcrumb-item active" aria-current="page">Social Media Complaints</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+					
+					<div class="row mt-4">
+						<div class="col-12">
+							<div class="card">
+								<div class="card-header">
+									<span style="font-size: medium;font-weight: bold;">Select Filters</span>
+								</div>
+								<div class="card-body">
+									<div class="row">
+										<div class="col-sm-2 mb-2">
+											<label for="startDate" style="font-size: medium;">From Date:</label>
+						                    <input type="date" id="startDate" class="form-control">
+										</div>
+										<div class="col-sm-2 mb-2">
+											<label for="endDate" style="font-size: medium;">To Date:</label>
+						                    <input type="date" id="endDate" class="form-control">
+										</div>
+										
+										<div class="col-sm-2 mb-2">
+								            <label for="stsdropdown" style="font-size: medium;">Status:</label>
+								            <select id="stsdropdown" class="form-control">
+								            <option value="total">Select</option>
+								            <option value="processing">Processing</option>
+								            <option value="reopened">Reopened</option>
+								            <option value="redressed">Action Taken 1</option>
+								            <option value="closed" selected>Action Taken 2</option>
+								            <option value="completed">Completed</option>
+											</select>
+										</div>
+										
+										<div class="col-sm-2 mb-2">
+								            <label for="dropdown4" style="font-size: medium;">Group:</label>
+								            <select id="dropdown4" class="form-control">
+								            <option value="">Select</option>
+								               <!--  <option value="">general</option> -->
+								                <!-- Add options here -->
+											</select>
+										</div>
+															
+									
+										<div class="col-sm-2 mb-2">
+											 <label for="dropdown1"  style="font-size: medium;">Type:</label>
+						                     <select id="dropdown1" class="form-control">
+							                 <option value="">Select</option>
+							            	 <!-- <option value="Cleanliness in Parks">Cleanliness in Parks</option> -->
+
+											</select>
+										</div>
+										<div class="col-sm-2 mb-2">
+											<label for="dropdown2" style="font-size: medium;">Zone:</label>
+						                    <select id="dropdown2" class="form-control">
+						                    <option value="">Select</option>
+						                    <!-- <option value="N01">N01</option> -->
+												<!-- <option value="ALL">ALL</option> -->
+
+											</select>
+										</div>
+										
+										</div>
+										
+									
+									
+									<div class="row mt-4">
+										<div class="col-12 d-flex justify-content-center">
+											<button type="submit" id="searchBtn"
+												class="btn btn-primary mx-2">Search</button>
+
+											<button class="btn btn-danger mx-2" id="resetBtn"
+												name="reset" type="reset">Reset</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+			
+					
+						<div class="row mt-4">
+								<div class="col-md-12">
+									<div class="card">
+									<div class="card-header">
+										<h3 style="font-weight: bold;font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span>
+	  										<span th:text="${agent_name}" style="font-weight: bold; font-size: large;"></span>'s Complaints List</h3>
+									</div>
+									<div class="card-body">
+										<div class="table-responsive">
+	
+											<table id="ReportDatatable"
+												class="table table-striped table-bordered table-hover dataTable"
+												role="grid">
+												<thead class="thead-dark">
+													<tr role="row">
+	
+														<th class="text-center no-sort">S.No</th>																														
+														<th class="text-center">Reg Date</th>
+														<th class="text-center no-sort">Complaint No</th>
+														<th class="text-center">ComplaintType</th>
+														<th class="text-center">View</th>																																											
+														<th class="text-center">Officer Name</th>	
+														<th class="text-center">Officer Mobile no</th>	
+														<th class="text-center width1">Status</th>		
+														<th class="text-center width2">Remarks</th>																									
+														<th class="text-center">Action</th>																												
+													</tr>
+												</thead>
+												<tbody>
+	
+												</tbody>
+											</table>
+										</div>
+									</div>
+								 </div>
+								</div>
+							</div>
+					
+				</div>
+
+			</div>
+
+			<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				    <div style="position: relative; top: 50%; transform: translateY(-50%);">
+				        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+				            <span class="sr-only">Loading...</span>
+				        </div>
+				        <!-- Add the 'Please wait' text below the spinner -->
+				        <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
+				    </div>
+				</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+
+	<!-- Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+	<!-- in the code use to show the download different type microsoft -->
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">
+	document.addEventListener("DOMContentLoaded", function () {
+	    const complaintTypeDropdown = document.getElementById('dropdown1');
+	    const complaintGroupDropdown = document.getElementById('dropdown4');
+	    const complaintModeDropdown = document.getElementById('dropdown3');
+	    const complaintZoneDropdown = document.getElementById('dropdown2');
+
+	    // Load Complaint Groups
+	    fetch('/gcc/api/callcenterqaqc/getComplaintGroup') 
+	        .then(response => response.json())
+	        .then(data => {
+	            // Clear existing options
+	            complaintGroupDropdown.innerHTML = `<option value="">Select</option>`;
+
+	            // Add options from the API response
+	            data.forEach(complaintGroupName => {
+	                complaintGroupDropdown.innerHTML += `<option value="${complaintGroupName}">${complaintGroupName}</option>`;
+	            });
+	        })
+	        .catch(error => {
+	            console.error('Error fetching complaint groups:', error);
+	        });
+
+	    // Event Listener for Complaint Group Change
+	    complaintGroupDropdown.addEventListener('change', function () {
+	        const selectedGroup = complaintGroupDropdown.value;
+
+	        if (selectedGroup) {
+	            // Fetch Complaint Types based on selected group
+	            fetch(`/gcc/api/callcenterqaqc/getComplaintTypesByGroup?group=${encodeURIComponent(selectedGroup)}`)
+	                .then(response => response.json())
+	                .then(data => {
+	                    // Clear existing options
+	                    complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+
+	                    // Add options from the API response
+	                    data.forEach(complaintTypeName => {
+	                        complaintTypeDropdown.innerHTML += `<option value="${complaintTypeName}">${complaintTypeName}</option>`;
+	                    });
+	                })
+	                .catch(error => {
+	                    console.error('Error fetching complaint types:', error);
+	                });
+	        } else {
+	            // Clear complaint type dropdown if no group is selected
+	            complaintTypeDropdown.innerHTML = `<option value="">Select</option>`;
+	        }
+	    });
+	    	    
+	    
+	 // Load all zones 
+	    fetch('/gcc/api/callcenterqaqc/getZones') 
+	    .then(response => response.json())
+	    .then(data => {
+	        // Clear existing options
+	        complaintZoneDropdown.innerHTML = `<option value="">Select</option>`;
+
+	        // Add options from the API response
+	        data.forEach(complaintZone => {
+	        	complaintZoneDropdown.innerHTML += `<option value="${complaintZone}">${complaintZone}</option>`;
+	        });
+	    })
+	    .catch(error => {
+	        console.error('Error fetching complaint groups:', error);
+	    });
+	 
+	    const today = new Date();
+	    const year = today.getFullYear();
+	    const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
+	    const day = String(today.getDate()).padStart(2, '0');
+
+	    // Calculate the first day of the current month
+	    const startOfMonth = `${year}-${month}-01`; // yyyy-MM-dd format
+	    const todayFormatted = `${year}-${month}-${day}`; // yyyy-MM-dd format
+
+	    const startDateField = document.getElementById('startDate');
+	    const endDateField = document.getElementById('endDate');
+		
+		// Event listener for To Date
+		   endDateField.addEventListener('change', function () {
+		       if (endDateField.value) {
+		           startDateField.max = endDateField.value; // Set max value for From Date
+		       } else {
+		           startDateField.removeAttribute('max'); // Remove max if To Date is cleared
+		       }
+
+		       // Validate From Date against updated To Date
+		       if (startDateField.value && new Date(startDateField.value) > new Date(endDateField.value)) {
+		           startDateField.value = ''; // Clear invalid From Date
+		           alert("From Date cannot be after To Date.");
+		       }
+		   });
+
+		   // Event listener for From Date
+		   startDateField.addEventListener('change', function () {
+		       if (startDateField.value) {
+		           endDateField.min = startDateField.value; // Set min value for To Date
+		       } else {
+		           endDateField.removeAttribute('min'); // Remove min if From Date is cleared
+		       }
+
+		       // Validate To Date against updated From Date
+		       if (endDateField.value && new Date(endDateField.value) < new Date(startDateField.value)) {
+		           endDateField.value = ''; // Clear invalid To Date
+		           alert("To Date cannot be before From Date.");
+		       }
+		   });
+
+	    // Set the default date values in the input fields
+	    if (startDateField && endDateField) {
+	        startDateField.value = startOfMonth; // yyyy-MM-dd format required for input[type="date"]
+	        endDateField.value = todayFormatted; // yyyy-MM-dd format required for input[type="date"]
+	    } else {
+	        console.error("Start date or end date input field not found!");
+	    }
+
+	    // Call the search logic directly to load default data on page load
+	    //loadDashboardData(formatDateForAPI(startOfMonth), formatDateForAPI(todayFormatted));
+
+	    
+	});
+	
+	 $(document).ready(function() {
+
+     	var table = $('#ReportDatatable').DataTable({
+             dom: 'Bftip',
+             columnDefs: [
+                 { targets: 'no-sort', orderable: false }
+             ],
+             lengthMenu: [
+                 [50, 100, 200, 500, -1],
+                 ['50 rows', '100 rows', '200 rows', 'Show all']
+             ],
+             scrollY: '100vh',
+             fixedColumns: {
+                 left: 1,
+                 right: 1
+             },
+             buttons: [
+                 {
+                     extend: 'pageLength',
+                     className: 'btn btn-warning'
+                 },
+                 {
+                     title: 'Data export',
+                     extend: 'copyHtml5',
+                     text: 'Copy',
+                     className: 'btn btn-secondary',
+                     id: 'copyBtn'
+                 },
+                 {
+                     extend: 'excelHtml5',
+                     text: 'Excel',
+                     className: 'btn btn-secondary',
+                     id: 'excelBtn'
+                 },
+                 {
+                     extend: 'csvHtml5',
+                     text: 'CSV',
+                     className: 'btn btn-secondary',
+                     id: 'csvBtn'
+                 },
+                 {
+                     extend: 'pdfHtml5',
+                     text: 'PDF',
+                     className: 'btn btn-secondary',
+                     id: 'pdfBtn'
+                 }
+             ],
+             fixedHeader: true,
+             autoWidth: true,
+             responsive: true,
+             searching: true,
+             select: false,
+             processing: false
+         });
+     	
+     // Event listener for From Date selection
+  	   $("#startDate").on("change", function() {
+  	       const startDate = $(this).val();  // Get the selected start date
+  	       // Set the min value for To Date to be the selected From Date
+  	       $("#endDate").attr("min", startDate);
+  	   });
+
+  	   // Event listener for To Date selection
+  	   $("#endDate").on("change", function() {
+  	       const endDate = $(this).val();  // Get the selected end date
+  	       // Set the max value for From Date to be the selected To Date
+  	       $("#startDate").attr("max", endDate);
+  	   });
+  	   
+  	 	document.getElementById('resetBtn').addEventListener('click', function () {
+      	event.preventDefault();
+      	
+      	window.location.href="/gcc/callcenterqaqc/socialmediacomplaints";
+      	
+      	});
+  	 	
+  	 	document.getElementById('searchBtn').addEventListener('click', function (e) {
+  	 		
+  	 		
+  	 		let startDate = document.getElementById('startDate').value;
+     	    let endDate = document.getElementById('endDate').value;
+     	    
+     	    let status = document.getElementById('stsdropdown').value;
+     	    let group= document.getElementById('dropdown4').value;
+     	 	let type= document.getElementById('dropdown1').value;    	    
+     	    let zone= document.getElementById('dropdown2').value;
+     	    
+     	   console.log("startdate: ",startDate);
+    	   console.log("enddate: ",endDate);
+    	   console.log("status: ",status);
+    	   console.log("group: ",group);
+    	   console.log("type: ",type);
+    	  
+    	   console.log("zone: ",zone);
+    	   if (!startDate && !endDate) {
+    	        Swal.fire({
+    	            icon: 'warning',
+    	            title: 'Error',
+    	            text: 'Please Select Both From Date and To Date',
+    	            showConfirmButton: true,
+    	            timer: 3000
+    	        });
+    	        e.preventDefault(); // Prevent the default action
+    	        return; // Stop further execution
+    	    }
+    	   const params = new URLSearchParams({
+    	        startDate: startDate,
+    	        endDate: endDate,
+    	        status: status,
+    	        group: group,
+    	        type: type,    	        
+    	        zone: zone
+    	    });
+    	   $('#pageLoader').show();
+    	   $.ajax({
+               type: "GET",
+               url: `/gcc/api/callcenterqaqc/socialmedia/getsocialmediacomps?${params.toString()}`, // Append query string to URL
+               contentType: "application/json",
+               success: function (response) {
+            	    console.log("API Response:", response);
+            	    $('#pageLoader').hide();
+            	    
+            	    if (response.status === "success") {
+            	    	
+            	    	const tableHeader = `
+                            <tr>
+                                <th class="text-center no-sort">S.No</th>
+                                <th class="text-center">Reg Date</th>
+                                <th class="text-center no-sort">Complaint No</th>
+                                <th class="text-center">Complaint Type</th>
+                                <th class="text-center">View</th>
+                                <th class="text-center">Officer Name</th>
+                                <th class="text-center">Officer Mobile no</th>
+                                
+                                ${
+                                    status === "closed" 
+                                    ? `
+                                    	<th class="text-center width1">Status</th>
+                                        <th class="text-center width2">Remarks</th>
+                                        <th class="text-center">Action</th>
+                                      `
+                                    : ''
+                                }
+                            </tr>
+                        `;
+                        
+                        $('#ReportDatatable thead').html(tableHeader); // Dynamically update <thead>
+            	    	
+                        console.log("Details Array:", response.details);
+
+                        // Ensure details is an array and has at least one entry
+                        if (Array.isArray(response.details) && response.details.length > 0) {
+                            // Dynamically configure columns based on the status
+                            let columns = [
+    { 
+        data: null, 
+        render: (data, type, row, meta) => meta.row + 1, 
+        className: 'text-center' 
+    },
+    { data: 'Complaint Opened Date', defaultContent: '-', className: 'text-center' },
+    { data: 'Complaint Number', defaultContent: '-', className: 'text-center' },
+    { data: 'Complaint Type', defaultContent: '-', className: 'text-center' },
+    { 
+        data: 'Complaint Number', 
+        render: function(data) {
+            return `<button type="button" class="btn btn-info" data-complaint-number="${data}">View</button>`;
+        }, 
+        className: 'text-center' 
+    },
+    { data: 'Assign To', defaultContent: '-', className: 'text-center' },
+    { data: 'Official Contact Number', defaultContent: '-', className: 'text-center' },
+    {
+        data: '', 
+        defaultContent: '-', 
+        className: 'text-center', 
+        render: function(data, type, row) {
+            return status === "closed" 
+            ? `<td class="text-center">
+                    <select class="form-control" id="action">
+                        <option value="">Select</option>
+                        <option value="COMPLETED">COMPLETED</option>
+                        <option value="REOPENED">REOPEN</option>
+                    </select>
+                </td>`
+            	: '-';
+        }
+    },
+    {
+        data: null,
+        defaultContent: '-',
+        render: function(data, type, row) {
+            return status === "closed" 
+                ? `<input type="text" class="form-control" id="remarks" placeholder="Enter remarks">` 
+                : '-';
+        },
+        className: 'text-center'
+    },
+    { 
+        data: 'Complaint Number', 
+        render: function(data) {
+            return status === "closed" 
+                ? `<button type="button" class="btn btn-success" data-complaint-number="${data}">Submit</button>` 
+                : '-';
+        }, 
+        className: 'text-center' 
+    }
+];
+
+
+                            // Initialize the DataTable
+                            $('#ReportDatatable').DataTable({
+                                destroy: true,
+                                searching: true,
+                                autoWidth: true,
+                                responsive: true,
+                                paging: true,
+                                info: true,
+                                data: response.details,
+                                columns: columns,
+                                dom: 'Bfrtip',
+                                buttons: [
+                                    {
+                                        extend: 'pageLength',
+                                        className: 'btn btn-warning'
+                                    },
+                                    {
+                                        title: 'Data export',
+                                        extend: 'copyHtml5',
+                                        text: 'Copy',
+                                        className: 'btn btn-secondary',
+                                        id: 'copyBtn'
+                                    },
+                                    {
+                                        extend: 'excelHtml5',
+                                        text: 'Excel',
+                                        className: 'btn btn-secondary',
+                                        id: 'excelBtn'
+                                    },
+                                    {
+                                        extend: 'csvHtml5',
+                                        text: 'CSV',
+                                        className: 'btn btn-secondary',
+                                        id: 'csvBtn'
+                                    },
+                                    {
+                                        extend: 'pdfHtml5',
+                                        text: 'PDF',
+                                        className: 'btn btn-secondary',
+                                        id: 'pdfBtn'
+                                    }
+                                ],
+                                columnDefs: [
+                                    { targets: 'no-sort', orderable: false }
+                                ],
+                                lengthMenu: [
+                                    [50, 100, 200, 500, -1],
+                                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                                ],
+                                scrollY: '100vh',
+                                fixedColumns: {
+                                    left: 1,
+                                    right: 1
+                                }
+                            });
+                        }
+                    }
+            	    else if (response.status === "nodata") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	                icon: 'warning',
+        	                title: 'No Data',
+        	                text: 'No data available for the selected criteria.'
+        	            });
+        	        }
+            	    else if (response.status === "error") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	            	icon: 'error',
+            	            title: 'Error',
+            	            text: response.message
+        	            });
+        	        }
+            	    else {
+            	    	$('#pageLoader').hide();
+            	        Swal.fire({
+            	            icon: 'error',
+            	            title: 'Error',
+            	            text: response.message
+            	        });
+            	    }
+            	},
+
+               error: function (error) {
+               	$('#pageLoader').hide();
+               	Swal.fire({
+    	            icon: 'error',
+    	            title: 'Error',
+    	            text: response.message
+    	        });
+               }
+           });
+    	   
+  	 	});
+  	 	
+  	 	
+  	 	$(document).on('click', '.btn-info', function () {
+  	 	    // Retrieve the complaint number from the data attribute
+  	 	    var complaintNumber = $(this).data('complaint-number');
+  	 	    console.log("complaintNumber===="+complaintNumber);
+  	 	    // Call the viewDetails function with the complaint number
+  	 	    viewDetails(complaintNumber);
+  	 	});
+  	 	
+  	 	$(document).on('click', '.btn.btn-success', function () {
+  	 	    // Retrieve the complaint number from the data attribute
+  	 	    var complaintNumber = $(this).data('complaint-number');
+  	 	    //console.log("complaintNumberP===="+complaintNumber);
+  	 	    // Call the viewDetails function with the complaint number
+  	 	    CloseComplaints(complaintNumber);
+  	 	 
+  	 	});
+     	
+     });
+	 
+	 function viewDetails(complaintNumber) {
+	 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+	 	    $('#detailsModal').modal('show');
+
+	 	    // Fetch the main complaint details
+	 	    $.ajax({
+	 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+	 	        type: 'GET',
+	            data:{complaintNumber:complaintNumber},
+	 	        success: function (data) {
+	 	            //console.log('Complaint Data:', data);
+
+	 	            // Fetch agent response details
+	 	            $.ajax({
+	 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+	 	                type: 'GET',
+	 	                data: { complaintNumber },
+	 	                success: function (agentResponse) {
+	 	                    //console.log('Agent Response:', agentResponse);
+
+	 	                    // Use the logic for building complaint and agent details as HTML
+	 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+	 	                    // Update modal content
+	 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+	 	                },
+	 	                error: function () {
+	 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+	 	                }
+	 	            });
+	 	        },
+	 	        error: function () {
+	 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+	 	        }
+	 	    });
+	 	}
+
+	 	// Function to generate complaint and agent details HTML
+	function generateDetailsHtml(data, agentResponse) {
+	 		
+	 	// Helper function to format date to yyyy-mm-dd
+	         function formatDate(dateStr) {
+	             if (!dateStr) return 'N/A';
+	             const date = new Date(dateStr);
+	             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+	         }
+	// Format complaint messages
+	let messagesHtml = '';
+	if (data.comments && data.comments.length > 0) {
+	    data.comments.forEach((comment) => {
+	        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+	            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+	            : '<p style="color: red;">No image available for this comment.</p>';
+
+	        messagesHtml += `
+	            <div class="comment mb-4">
+	                <div class="row">
+	                    <div class="col-2 text-center">
+	                        <p class="text-muted">${comment.comment_date}</p>
+	                    </div>
+	                    <div class="col-10">
+	                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+	                        <p>${comment.message || 'No message available'}</p>
+	                        <div class="user-image">${commentImageLink}</div>
+	                    </div>
+	                </div>
+	            </div>
+	        `;
+	    });
+	} else {
+	    messagesHtml = '<p>No comments available.</p>';
+	}
+
+	// Format agent responses
+	let agentRepliedHtml = '';
+	if (agentResponse.length > 0) {
+	    agentResponse.forEach((agentItem) => {
+	        agentRepliedHtml += `
+	            <div class="comment mb-4">
+	                <div class="row">
+	                    <div class="col-2 text-center">
+	                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+	                    </div>
+	                    <div class="col-10">
+	                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+	                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+	                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+	                    </div>
+	                </div>
+	            </div>
+	        `;
+	    });
+	} else {
+	    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+	}
+
+	// Check for user images
+	const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+	const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+	    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+	    : '<p style="color: red;">UserImages: No image available.</p>';
+
+	// Combine all sections into the final HTML
+	const detailsHtml = `
+	    <div class="row">
+	        <div class="col-md-12">
+	            <h4>Complaint Person's Details:</h4>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+	                </div>
+	            </div>
+	            <div class="row">
+	                <div class="col-6">
+	                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+	                </div>
+	                <div class="col-6">
+	                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+	                </div>
+	            </div>
+	        </div>
+	    </div>
+	    <hr>
+	    <h4>Complaint Details:</h4>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+	        <div class="col-6">
+	            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+	        </div>
+	        <div class="col-6">
+	            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+	        </div>
+	    </div>
+	    <div class="row">
+	    <div class="col-6">
+	        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+	    </div>
+	    
+	</div>
+	    <hr>
+	    <h4>Complaint Messages:</h4>
+	    ${messagesHtml}
+	    <hr>
+	    <h4>Agent Replied Messages:</h4>
+	    ${agentRepliedHtml}
+	    <hr>
+	    ${imageLink}
+	`;
+
+	return detailsHtml;
+	}
+	 	
+	/* function CloseComplaints(complaintNumber) {
+		var userId = document.getElementById('userIdSpan').textContent;
+		console.log("userId="+userId);
+		$('.btn.btn-success').prop('disabled', true);
+		 $.ajax({
+	        url: '/gcc/api/callcenterqaqc/socialmedia/update',
+	        type: 'POST',
+	        data: {	            
+	            complaintNumber: complaintNumber,	            	        	            
+	            userId:userId
+	        },	        
+	        success: function (response) {
+	            if (response === "Success") {
+	            	//console.log("Success");
+	            	
+            	               	   
+	                Swal.fire({
+	                    icon: 'success',
+	                    title: 'Success',
+	                    text: 'Complaint updated successfully!',
+	                    allowOutsideClick: false, // Disable clicking outside the modal to close it
+	                    allowEscapeKey: false, // Disable escape key to close the modal
+	                    allowEnterKey: false, // Disable enter key to close the modal
+	                    showConfirmButton: true, // Ensure the confirm button is visible
+	                }).then((result) => {
+	                    if (result.isConfirmed) {
+	                    	console.log("ok button");
+	                    	$('.btn.btn-success').prop('disabled', false);
+                    	
+	                    	// Get the DataTable instance
+	                        const table = $('#ReportDatatable').DataTable();
+
+	                        // Find the row with the clicked button
+	                        let row = $(`.btn[data-complaint-number='${complaintNumber}']`).closest('tr');
+	                        
+	                        // Remove the row
+	                        table.row(row).remove();
+
+	                        // Reindex the "S.No" column
+	                        table.rows().every(function (index) {
+	                            const row = this.node();
+	                            $(row).find('td:first-child').text(index + 1); // Update "S.No"
+	                        });
+
+	                        // Redraw the table
+	                        table.draw(false);
+	                	    
+	                    }
+	                });
+	            } 
+	            else if (response === "error") {
+	            	$('.btn.btn-success').prop('disabled', false);
+	            	Swal.fire("Error", "Please try again later.", "error");
+	            }
+	            else {
+	            	$('.btn.btn-success').prop('disabled', false);
+	                Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+	            }
+	        },
+	        error: function (xhr, status, error) {
+	        	$('.btn.btn-success').prop('disabled', false);
+	            Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+	        }
+	        
+	    });
+		
+	} */
+	
+	function CloseComplaints(complaintNumber) {
+	    const userId = document.getElementById('userIdSpan').textContent;
+	    console.log("userId=" + userId);
+	    
+	    // Find the closest table row and get the specific action and remarks
+	    const row = $(`button[data-complaint-number="${complaintNumber}"]`).closest('tr');
+	    const actionValue = row.find('select').val(); // Select dropdown within the same row
+	    const remarksValue = row.find('input').val(); // Input field within the same row
+
+	   
+		console.log("complaintNumber:",complaintNumber)	    
+		console.log("Action:", actionValue);
+	    console.log("Remarks:", remarksValue);
+
+	 // Check if action is empty
+	    if (actionValue === "") {
+	        Swal.fire({
+	            icon: 'warning',
+	            title: 'Action Required',
+	            text: 'Please select an action.'
+	           
+	        });
+	        return; // Stop execution if no action is selected
+	    }
+	 
+	    if (actionValue === "REOPENED" && remarksValue.trim() === "") {
+	        Swal.fire({
+	            icon: 'warning',
+	            title: 'Remarks Required',
+	            text: 'Please enter remarks.'
+	            
+	        });
+	        return; // Stop execution if remarks are empty
+	    }
+	    
+	    Swal.fire({
+	        title: 'Are you sure to update?',
+	        text: 'This action will update the complaint.',
+	        icon: 'warning',	
+	        allowOutsideClick: false,
+            allowEscapeKey: false,
+            allowEnterKey: false,
+            confirmButtonColor: 'blue',
+		    cancelButtonColor: 'red',
+	        showCancelButton: true, // Enable cancel button
+	        confirmButtonText: 'Yes', // Text for the confirmation button
+	        cancelButtonText: 'No',  // Text for the cancel button
+	        reverseButtons: false // Optional: makes the "No" button appear first
+	    }).then((result) => {
+	        if (result.isConfirmed) {
+	            // User clicked "Yes"
+	            $('.btn.btn-success').prop('disabled', true);
+	            $.ajax({
+	                url: '/gcc/api/callcenterqaqc/socialmedia/update',
+	                type: 'POST',
+	                data: {
+	                    complaintNumber: complaintNumber,
+	                    userId: userId,
+	                    action: actionValue,      // Add selected action to the request data
+	                    remarks: remarksValue     // Add remarks to the request data
+	                },
+	                success: function (response) {
+	                    if (response === "Success") {
+	                        Swal.fire({
+	                            icon: 'success',
+	                            title: 'Success',
+	                            text: 'Complaint updated successfully!',
+	                            allowOutsideClick: false,
+	                            allowEscapeKey: false,
+	                            allowEnterKey: false,
+	                            showConfirmButton: true,
+	                        }).then(() => {
+	                            $('.btn.btn-success').prop('disabled', false);
+
+	                            // Get the DataTable instance
+	                            const table = $('#ReportDatatable').DataTable();
+
+	                            // Find the row with the clicked button
+	                            let row = $(`.btn[data-complaint-number='${complaintNumber}']`).closest('tr');
+	                            
+	                            // Remove the row
+	                            table.row(row).remove();
+
+	                            // Reindex the "S.No" column
+	                            table.rows().every(function (index) {
+	                                const row = this.node();
+	                                $(row).find('td:first-child').text(index + 1);
+	                            });
+
+	                            // Redraw the table
+	                            table.draw(false);
+	                        });
+	                    } else if (response === "error") {
+	                        $('.btn.btn-success').prop('disabled', false);
+	                        Swal.fire("Error", "Please try again later.", "error");
+	                    }else if (response === "erpname") {
+	                        $('.btn.btn-success').prop('disabled', false);
+	                        Swal.fire("Error", "Issue in ERP_Username", "error");
+	                    }
+	                    else if (response === "save") {
+	                        $('.btn.btn-success').prop('disabled', false);
+	                        Swal.fire("Error", "In Erp updated, but issue in saving", "error");
+	                    }
+	                    else {
+	                        $('.btn.btn-success').prop('disabled', false);
+	                        Swal.fire("Error", "Failed to update complaint. Please try again.", "error");
+	                    }
+	                },
+	                error: function (xhr, status, error) {
+	                    $('.btn.btn-success').prop('disabled', false);
+	                    Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
+	                }
+	            });
+	        } else if (result.isDismissed) {
+	            // User clicked "No" or dismissed the dialog
+	            console.log("Update action cancelled by the user.");
+	        }
+	    });
+	}
+
+	</script>
+	
+	
+	<!-- 
+	
+	 {
+                                        data: '', 
+                                        defaultContent: '-', 
+                                        className: 'text-center', 
+                                        render: function(data, type, row) {
+                                            return `
+                                                <td class="text-center">
+                                                    <select class="form-control" id="action">
+                                                        <option value="">Select</option>
+                                                        <option value="COMPLETED">COMPLETED</option>
+                                                        <option value="REOPENED">REOPEN</option>
+                                                    </select>
+                                                </td>`;
+                                        }
+                                    },
+	 -->
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/callcenterqaqc/socialmediacompletedlist.html b/target/classes/templates/modules/callcenterqaqc/socialmediacompletedlist.html
new file mode 100644
index 0000000..87586ee
--- /dev/null
+++ b/target/classes/templates/modules/callcenterqaqc/socialmediacompletedlist.html
@@ -0,0 +1,735 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}">
+
+</head>
+<style>
+#modalBody h4 {
+        font-weight: bold;
+        margin-top: 15px;
+        margin-bottom: 10px;
+    }
+
+    #modalBody p {
+        margin: 5px 0;
+    }
+
+    #modalBody hr {
+        margin: 15px 0;
+    }
+    .comment {
+        margin-bottom: 20px;
+    }
+
+    .comment p {
+        margin: 0;
+    }
+
+    hr {
+        border: 1px solid #ccc;
+    }
+
+    .col-4 {
+        font-weight: bold;
+        text-align: right;
+    }
+
+    .col-8 {
+        padding-left: 20px;
+    }
+
+    .comment {
+        padding: 10px 0;
+    }
+
+    .comment .text-muted {
+        font-size: 0.9em;
+        color: #6c757d;
+    }
+
+    .comment hr {
+        border-top: 1px solid #ccc;
+    }
+
+    .comment .btn-link {
+        font-size: 0.9em;
+        text-decoration: underline;
+        color: #007bff;
+    }
+    /* Make the modal body scrollable */
+    #detailsModal .modal-body {
+        max-height: 70vh;  /* Limit the height to 70% of the viewport */
+        overflow-y: auto;  /* Enable vertical scrolling */
+    }
+</style>
+<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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="fa fa-list-alt bg-blue"></i>
+									<div class="d-inline">
+										<h5>SocialMedia Complaints</h5>
+										<span>View Social Media Completed Complaints</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<nav class="breadcrumb-container" aria-label="breadcrumb">
+									<ol class="breadcrumb">
+										<li class="breadcrumb-item"><a href="/gcc/index"><i
+												class="ik ik-home"></i></a></li>
+										<li class="breadcrumb-item" aria-current="page">1913 Social Media</li>
+										<li class="breadcrumb-item active" aria-current="page">Completed List</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					
+					
+					<div class="row mt-4">
+						<div class="col-12">
+							<div class="card">
+								<div class="card-header">
+									<span style="font-size: medium;font-weight: bold;">Select Filters</span>
+								</div>
+								<div class="card-body">
+									<div class="row">
+										<div class="col-sm-3 mb-2">
+											<label for="startDate" style="font-size: medium;">From Date:</label>
+						                    <input type="date" id="startDate" class="form-control">
+										</div>
+										<div class="col-sm-3 mb-2">
+											<label for="endDate" style="font-size: medium;">To Date:</label>
+						                    <input type="date" id="endDate" class="form-control">
+										</div>
+										
+										<div class="col-sm-3 mb-2">
+											<label for="status" style="font-size: medium;">Status:</label>
+						                    <select id="status" class="form-control">
+						                    <option value="ALL">Select</option>
+						                    <option value="COMPLETED">Completed</option>
+						                    <option value="REOPENED">Reopened</option>
+											</select>
+										</div>
+
+										<div class="col-sm-3 mb-2">
+											<label for="dropdown2" style="font-size: medium;">Zone:</label>
+						                    <select id="dropdown2" class="form-control">
+						                    <option value="">Select</option>
+						                    
+											</select>
+										</div>
+										
+										</div>
+									
+									
+									<div class="row mt-4">
+										<div class="col-12 d-flex justify-content-center">
+											<button type="submit" id="searchBtn"
+												class="btn btn-primary mx-2">Search</button>
+
+											<button class="btn btn-danger mx-2" id="resetBtn"
+												name="reset" type="reset">Reset</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+			
+					
+					<div class="row mt-4">
+									<div class="col-md-12">
+										<div class="card">
+										<div class="card-header">
+											<h3 style="font-weight: bold;font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span>
+    <span th:text="${agent_name}" style="font-weight: bold; font-size: large;"></span>'s Completed List</h3>
+										</div>
+										<div class="card-body">
+											<div class="table-responsive">
+
+												<table id="ReportDatatable"
+													class="table table-striped table-bordered table-hover dataTable"
+													role="grid">
+													<thead class="thead-dark">
+														<tr role="row">
+
+															<th class="text-center no-sort">S.No</th>																														
+															<th class="text-center">Reg Date</th>
+															<th class="text-center no-sort">Complaint No</th>
+															<th class="text-center no-sort">zone</th>
+															<th class="text-center">ComplaintType</th>																												
+															<th class="text-center no-sort">Public Name</th>
+															<th class="text-center">Public Mobile no</th>															
+															<th class="text-center">Officer Name</th>																													
+															<th class="text-center">Status</th>		
+															<th class="text-center">View</th>																										
+														</tr>
+													</thead>
+													<tbody>
+
+													</tbody>
+												</table>
+											</div>
+										</div>
+									 </div>
+									</div>
+								</div>
+					
+				</div>
+
+			</div>
+
+			<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
+				    <div style="position: relative; top: 50%; transform: translateY(-50%);">
+				        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+				            <span class="sr-only">Loading...</span>
+				        </div>
+				        <!-- Add the 'Please wait' text below the spinner -->
+				        <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
+				    </div>
+				</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+
+	<!-- Modal -->
+	<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog"
+		aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="detailsModalLabel">Complaint
+						Details</h5>
+					<button type="button" class="close" data-dismiss="modal"
+						aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body" id="modalBody">
+					<!-- Details will be populated here -->
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary"
+						data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+
+	<!-- in the code use to show the download different type microsoft -->
+
+	<!-- Include jQuery and Bootstrap JavaScript -->
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<script
+		src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<!--  sweet alert -->
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+	<script type="text/javascript">
+	document.addEventListener("DOMContentLoaded", function () {
+	    
+	    const complaintZoneDropdown = document.getElementById('dropdown2');
+    
+	    
+	 // Load all zones 
+	    fetch('/gcc/api/callcenterqaqc/getZones') 
+	    .then(response => response.json())
+	    .then(data => {
+	        // Clear existing options
+	        complaintZoneDropdown.innerHTML = `<option value="">Select</option>`;
+
+	        // Add options from the API response
+	        data.forEach(complaintZone => {
+	        	complaintZoneDropdown.innerHTML += `<option value="${complaintZone}">${complaintZone}</option>`;
+	        });
+	    })
+	    .catch(error => {
+	        console.error('Error fetching complaint groups:', error);
+	    });
+	 
+	    
+
+	    const startDateField = document.getElementById('startDate');
+	    const endDateField = document.getElementById('endDate');
+		
+		// Event listener for To Date
+		   endDateField.addEventListener('change', function () {
+		       if (endDateField.value) {
+		           startDateField.max = endDateField.value; // Set max value for From Date
+		       } else {
+		           startDateField.removeAttribute('max'); // Remove max if To Date is cleared
+		       }
+
+		       // Validate From Date against updated To Date
+		       if (startDateField.value && new Date(startDateField.value) > new Date(endDateField.value)) {
+		           startDateField.value = ''; // Clear invalid From Date
+		           alert("From Date cannot be after To Date.");
+		       }
+		   });
+
+		   // Event listener for From Date
+		   startDateField.addEventListener('change', function () {
+		       if (startDateField.value) {
+		           endDateField.min = startDateField.value; // Set min value for To Date
+		       } else {
+		           endDateField.removeAttribute('min'); // Remove min if From Date is cleared
+		       }
+
+		       // Validate To Date against updated From Date
+		       if (endDateField.value && new Date(endDateField.value) < new Date(startDateField.value)) {
+		           endDateField.value = ''; // Clear invalid To Date
+		           alert("To Date cannot be before From Date.");
+		       }
+		   });
+
+
+	    
+	});
+
+	$(document).ready(function() {
+	
+		var table = $('#ReportDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                { targets: 'no-sort', orderable: false }
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', 'Show all']
+            ],
+            scrollY: '100vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary',
+                    id: 'copyBtn'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary',
+                    id: 'excelBtn'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary',
+                    id: 'csvBtn'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary',
+                    id: 'pdfBtn'
+                }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false
+        });
+		
+		document.getElementById('resetBtn').addEventListener('click', function () {
+	      	event.preventDefault();
+	      	
+	      	window.location.href="/gcc/callcenterqaqc/smfinishedcomplaints";
+	      	
+	      	});
+		
+		document.getElementById('searchBtn').addEventListener('click', function (e) {
+  	 		
+  	 		
+  	 		let startDate = document.getElementById('startDate').value;
+     	    let endDate = document.getElementById('endDate').value;
+    	    
+     	    let zone= document.getElementById('dropdown2').value;
+     	   let status= document.getElementById('status').value;
+     	   
+     	   console.log("startdate: ",startDate);
+    	   console.log("enddate: ",endDate);
+    	   console.log("status: ",status);
+    	   console.log("zone: ",zone);
+    	   
+    	   if (!startDate && !endDate) {
+    	        Swal.fire({
+    	            icon: 'warning',
+    	            title: 'Error',
+    	            text: 'Please Select Both From Date and To Date',
+    	            showConfirmButton: true,
+    	            timer: 3000
+    	        });
+    	        e.preventDefault(); // Prevent the default action
+    	        return; // Stop further execution
+    	    }
+    	   const params = new URLSearchParams({
+    	        startDate: startDate,
+    	        endDate: endDate,  
+    	        status:status,
+    	        zone: zone
+    	    });
+    	   $('#pageLoader').show();
+    	   $.ajax({
+               type: "GET",
+               url: `/gcc/api/callcenterqaqc/socialmedia/socialmediacompletedlist?${params.toString()}`, // Append query string to URL
+               contentType: "application/json",
+               success: function (response) {
+            	    console.log("API Response:", response);
+            	    $('#pageLoader').hide();
+            	    if (response.status === "success") {
+            	        console.log("Details Array:", response.details);
+            	        // Ensure details is an array and has at least one entry
+            	        if (Array.isArray(response.details) && response.details.length > 0) {
+            	            let table = $('#ReportDatatable').DataTable({
+            	                destroy: true,
+            	                searching: true,
+            	                autoWidth: true,
+            	                responsive: true,
+            	                paging: true,
+            	                info: true,
+            	                data: response.details,           	                
+            	                columns: [
+            	                    { 
+            	                        data: null, 
+            	                        render: (data, type, row, meta) => meta.row + 1, 
+            	                        className: 'text-center' 
+            	                    },
+            	                   					
+            	                    { data: 'complaint_date', defaultContent: '-', className: 'text-center' },
+                                    { data: 'complaint_number', defaultContent: '-', className: 'text-center' },
+                                    { data: 'zone', defaultContent: '-', className: 'text-center' },
+                                    { data: 'complaint_type', defaultContent: '-', className: 'text-center' },                                   
+                                    { data: 'complaint_person_name', defaultContent: '-', className: 'text-center' },
+                                    { data: 'complaint_mobilenumber', defaultContent: '-', className: 'text-center' },
+                                    { data: 'official_name', defaultContent: '-', className: 'text-center' },
+                                    { data: 'call_status', defaultContent: '-', className: 'text-center' },
+                                    { 
+                                        data: 'complaint_number', 
+                                        render: function(data, type, row) {
+                                            return `
+                                                <td class="text-center">
+                                                    <button type="button" class="btn btn-info" data-complaint-number="${data}">
+                                                        View
+                                                    </button>
+                                                </td>`;
+                                        }, 
+                                        className: 'text-center' 
+                                    }
+            	                ],
+            	                dom: 'Bfrtip',
+            	                buttons: [
+   	      		                  {
+   	      		                      extend: 'pageLength',
+   	      		                      className: 'btn btn-warning'
+   	      		                  },
+   	      		                  {
+   	      		                      title: 'Data export',
+   	      		                      extend: 'copyHtml5',
+   	      		                      text: 'Copy',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'copyBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'excelHtml5',
+   	      		                      text: 'Excel',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'excelBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'csvHtml5',
+   	      		                      text: 'CSV',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'csvBtn'
+   	      		                  },
+   	      		                  {
+   	      		                      extend: 'pdfHtml5',
+   	      		                      text: 'PDF',
+   	      		                      className: 'btn btn-secondary',
+   	      		                      id: 'pdfBtn'
+   	      		                  }
+   	      		              ],
+   	      		             columnDefs: [
+   	      		                { targets: 'no-sort', orderable: false }
+   	      		            ],
+   	      		            lengthMenu: [
+   	      		                [50, 100, 200, 500, -1],
+   	      		                ['50 rows', '100 rows', '200 rows', 'Show all']
+   	      		            ],
+   	      		            scrollY: '100vh',
+   	      		            fixedColumns: {
+   	      		                left: 1,
+   	      		                right: 1
+   	      		            }
+   	      		            });
+            	        }
+            	        
+            	    }
+            	    else if (response.status === "nodata") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	                icon: 'warning',
+        	                title: 'No Data',
+        	                text: 'No data available for the selected criteria.'
+        	            });
+        	        }
+            	    else if (response.status === "error") {
+        	        	$('#pageLoader').hide();
+        	            Swal.fire({
+        	            	icon: 'error',
+            	            title: 'Error',
+            	            text: response.message
+        	            });
+        	        }
+            	    else {
+            	    	$('#pageLoader').hide();
+            	        Swal.fire({
+            	            icon: 'error',
+            	            title: 'Error',
+            	            text: response.message
+            	        });
+            	    }
+            	},
+
+               error: function (error) {
+               	$('#pageLoader').hide();
+               	Swal.fire({
+    	            icon: 'error',
+    	            title: 'Error',
+    	            text: response.message
+    	        });
+               }
+           });
+    	   
+  	 	});
+		
+		$(document).on('click', '.btn-info', function () {
+  	 	    // Retrieve the complaint number from the data attribute
+  	 	    var complaintNumber = $(this).data('complaint-number');
+  	 	    console.log("complaintNumber===="+complaintNumber);
+  	 	    // Call the viewDetails function with the complaint number
+  	 	    viewDetails(complaintNumber);
+  	 	});
+	
+	});
+	function viewDetails(complaintNumber) {
+ 	    document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>';
+ 	    $('#detailsModal').modal('show');
+
+ 	    // Fetch the main complaint details
+ 	    $.ajax({
+ 	        url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails',
+ 	        type: 'GET',
+            data:{complaintNumber:complaintNumber},
+ 	        success: function (data) {
+ 	            //console.log('Complaint Data:', data);
+
+ 	            // Fetch agent response details
+ 	            $.ajax({
+ 	                url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory',
+ 	                type: 'GET',
+ 	                data: { complaintNumber },
+ 	                success: function (agentResponse) {
+ 	                    //console.log('Agent Response:', agentResponse);
+
+ 	                    // Use the logic for building complaint and agent details as HTML
+ 	                    const detailsHtml = generateDetailsHtml(data, agentResponse);
+
+ 	                    // Update modal content
+ 	                    document.getElementById('modalBody').innerHTML = detailsHtml;
+ 	                },
+ 	                error: function () {
+ 	                    document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>';
+ 	                }
+ 	            });
+ 	        },
+ 	        error: function () {
+ 	            document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>';
+ 	        }
+ 	    });
+ 	}
+
+ 	// Function to generate complaint and agent details HTML
+function generateDetailsHtml(data, agentResponse) {
+ 		
+ 	// Helper function to format date to yyyy-mm-dd
+         function formatDate(dateStr) {
+             if (!dateStr) return 'N/A';
+             const date = new Date(dateStr);
+             return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd
+         }
+// Format complaint messages
+let messagesHtml = '';
+if (data.comments && data.comments.length > 0) {
+    data.comments.forEach((comment) => {
+        const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available"
+            ? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>`
+            : '<p style="color: red;">No image available for this comment.</p>';
+
+        messagesHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted">${comment.comment_date}</p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${comment.user || 'N/A'}</strong> Says:</p>
+                        <p>${comment.message || 'No message available'}</p>
+                        <div class="user-image">${commentImageLink}</div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    messagesHtml = '<p>No comments available.</p>';
+}
+
+// Format agent responses
+let agentRepliedHtml = '';
+if (agentResponse.length > 0) {
+    agentResponse.forEach((agentItem) => {
+        agentRepliedHtml += `
+            <div class="comment mb-4">
+                <div class="row">
+                    <div class="col-2 text-center">
+                        <p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p>
+                    </div>
+                    <div class="col-10">
+                        <p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p>
+                        <p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p>
+                        <p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+} else {
+    agentRepliedHtml = '<p>No agent replied messages available.</p>';
+}
+
+// Check for user images
+const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {};
+const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== ""
+    ? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>`
+    : '<p style="color: red;">UserImages: No image available.</p>';
+
+// Combine all sections into the final HTML
+const detailsHtml = `
+    <div class="row">
+        <div class="col-md-12">
+            <h4>Complaint Person's Details:</h4>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complaint Date:</strong> ${data.complaintdate}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Division:</strong> ${data.Division || 'N/A'}</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6">
+                    <p><strong>Gender:</strong> ${data.gender || 'N/A'}</p>
+                </div>
+                <div class="col-6">
+                    <p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr>
+    <h4>Complaint Details:</h4>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p>
+        </div>
+        <div class="col-6">
+            <p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p>
+        </div>
+    </div>
+    <div class="row">
+    <div class="col-6">
+        <p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p>
+    </div>
+    
+</div>
+    <hr>
+    <h4>Complaint Messages:</h4>
+    ${messagesHtml}
+    <hr>
+    <h4>Agent Replied Messages:</h4>
+    ${agentRepliedHtml}
+    <hr>
+    ${imageLink}
+`;
+
+return detailsHtml;
+}
+	</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/cdwaste/approval.html b/target/classes/templates/modules/cdwaste/approval.html
new file mode 100644
index 0000000..1dd91fb
--- /dev/null
+++ b/target/classes/templates/modules/cdwaste/approval.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <div class="main-content">
+                <div class="container-fluid">
+                    <div class="page-header">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fas fa-th-large bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>C & D Waste Collectors </h5>
+                                        <span>Approval</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <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">C & D Waste Collectors</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Approval</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr>
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card">
+                             <div class="card-header">
+				                				                
+				          
+				                
+				            </div>
+                                <div class="card-block">
+                                    <div>
+                                        <table id="worksDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+                                           <thead class="thead-dark">
+        <tr role="row">
+            <th>S.No</th> <!-- Auto-increment index -->
+            <th>Name</th>
+            <th>Mobile No</th>
+            <th>Address</th>
+            <th>Vehicle Number</th>
+            <th>Vehicle Type</th>
+            <th>Accepted Date</th>
+            <th>Accepted By</th>
+            <th>Register ID</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr th:each="approval, i : ${approvalDetails}">
+            <td th:text="${i.count}">0</td> <!-- Index counter -->
+            <td th:text="${approval.name}">Name</td>
+            <td th:text="${approval.mobile_no}">Mobile No</td>
+            <td th:text="${approval.address}">Address</td>
+            <td th:text="${approval.vehicle_num}">Vehicle Number</td>
+            <td th:text="${approval.vehicletype}">Vehicle Type</td>
+            <td th:text="${approval.accepteddate}">Accepted Date</td>
+            <td th:text="${approval.acceptedby}">Accepted By</td>
+            <td th:text="${approval.register_id}">Register ID</td>
+        </tr>
+    </tbody>
+    <tfoot class="thead-dark">
+        <tr>
+            <th>S.No</th>
+            <th>Name</th>
+            <th>Mobile No</th>
+            <th>Address</th>
+            <th>Vehicle Number</th>
+            <th>Vehicle Type</th>
+            <th>Accepted Date</th>
+            <th>Accepted By</th>
+            <th>Register ID</th>
+        </tr>
+    </tfoot>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+        </div>
+    </div>
+
+   
+
+    <!-- Include jQuery and Bootstrap JavaScript -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+    <script type="text/javascript">
+    $(document).ready(function() {
+
+    	var table = $('#worksDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                { targets: 'no-sort', orderable: false }
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', 'Show all']
+            ],
+            scrollY: '50vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary',
+                    id: 'copyBtn'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary',
+                    id: 'excelBtn'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary',
+                    id: 'csvBtn'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary',
+                    id: 'pdfBtn'
+                }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false
+        });
+       
+    });
+    	   
+
+
+
+    
+
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/cdwaste/pending.html b/target/classes/templates/modules/cdwaste/pending.html
new file mode 100644
index 0000000..74c7203
--- /dev/null
+++ b/target/classes/templates/modules/cdwaste/pending.html
@@ -0,0 +1,446 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <div class="main-content">
+                <div class="container-fluid">
+                    <div class="page-header">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fas fa-th-large bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>C & D Waste Collectors </h5>
+                                        <span>Pending</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <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">C & D Waste Collectors</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Pending</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr>
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card">
+                             <div class="card-header">
+				                				                
+				          
+				                
+				            </div>
+				            
+				            
+				            
+							<div class="card-block">
+							    <!-- Show the table structure -->
+							    <table id="worksDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+							        <thead class="thead-dark">
+							            <tr role="row">
+							                <th>S.NO</th> <!-- Auto-incrementing index -->
+							                <th>Name</th>
+							                <th>Mobile No</th>
+							                <th>Address</th>
+							                <th>Actions</th>
+							            </tr>
+							        </thead>
+							        <tbody>
+							            <!-- Check if userDetails is empty or null -->
+							           
+							            <!-- Iterate over userDetails to display pending registrations -->
+							            <tr th:each="pendinglist, status : ${userDetails}">
+							                <td th:text="${status.index + 1}">1</td> <!-- Auto-incrementing index -->
+							                <td th:text="${pendinglist['name']}">Name</td>
+							                <td th:text="${pendinglist['mobile_no']}">Mobile No</td>
+							                <td th:text="${pendinglist['address']}">Address</td>
+							                <td class="text-center">
+							                    <button class="btn btn-info" 
+							                            th:attr="onclick='showModal(' + ${pendinglist['register_id']} + ')'" 
+							                            th:text="'View Details'">
+							                    </button>
+							                </td>
+							            </tr>
+							        </tbody>
+							        <tfoot class="thead-dark">
+							            <tr>
+							                <th>S.NO</th>
+							                <th>Name</th>
+							                <th>Mobile No</th>
+							                <th>Address</th>
+							                <th>Actions</th>
+							            </tr>
+							        </tfoot>
+							    </table>
+							</div>
+
+
+
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Modal -->
+					<!-- Modal -->
+				<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true">
+						    <div class="modal-dialog modal-lg" role="document">
+						        <div class="modal-content">
+						            <div class="modal-header">
+						                <h5 class="modal-title" id="detailModalLabel">Register id: <span id="modal_register_id"></span></h5>
+						                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						                    <span aria-hidden="true">&times;</span>
+						                </button>
+						            </div>
+						            <div class="modal-body">
+						                <div id="cduserinfoHTML">
+						                </div>
+						                
+						                <div class="row">
+						                    <div class="col-md-12">
+						                        <p><strong>Adhaar Photo/Document:</strong></p>
+						                        <div id="modal_adhaar_container"></div>
+						                    </div>
+						                    <div class="col-md-12">
+						                        <p><strong>User Photo:</strong></p>
+						                        <div id="modal_user_photo_container"></div>
+						                    </div>
+						                    <div class="col-md-12">
+						                        <p><strong>RC Book Document:</strong></p>
+						                        <div id="modal_vehicle_doc_container"></div>
+						                    </div>
+						                    <div class="col-md-12">
+						                        <p><strong>Lease Vehicle Document:</strong></p>
+						                        <div id="modal_leasevehicle_doc_container"></div>
+						                    </div>
+						                </div>
+						
+						                <!-- Rejection Section -->
+						                <div id="rejectionSection" style="display: none; margin-top: 20px;">
+						                    <p><strong>Reason for Rejection <span class="text-danger">*</span></strong></p>
+						                    <textarea id="rejectionReason" rows="4" class="form-control"></textarea>
+						                    <button type="button" class="btn btn-danger mt-2" onclick="confirmRejection()">Confirm</button>
+						                </div>
+						            </div>
+						            <div class="modal-footer">
+						                <button type="button" class="btn btn-success" onclick="acceptAction()">Accept</button>
+						                <button type="button" class="btn btn-warning" onclick="showRejectionSection()">Reject</button>
+						                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+						            </div>
+						        </div>
+						    </div>
+						</div>
+
+
+			                
+			                
+			                
+            </div>
+
+            <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+        </div>
+    </div>
+
+   
+
+    <!-- Include jQuery and Bootstrap JavaScript -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+    <script type="text/javascript">
+    $(document).ready(function() {
+        // Initialize the DataTable
+        var table = $('#worksDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                { targets: 'no-sort', orderable: false } // Disable sorting for certain columns
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', 'Show all']
+            ],
+            scrollY: '50vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary',
+                    id: 'copyBtn'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary',
+                    id: 'excelBtn'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary',
+                    id: 'csvBtn'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary',
+                    id: 'pdfBtn'
+                }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false,
+            language: {
+                emptyTable: "No pending registrations available." // Custom message for empty tables
+            }
+        });
+        
+    });
+
+    
+    function showModal(registerId) {
+        $.ajax({
+            url: '/gcc/api/registration/pendingbyid?registerId=' + registerId,
+            method: 'GET',
+            dataType: 'json',
+            success: function(data) {
+                console.log(data);
+                // Check if data is not empty
+                if (data.length > 0) {
+                    // Access the first item in the array
+                    const userData = data[0]; // Get the first object from the array
+	                
+                    let userinfo = ``;
+                    
+                    userinfo = `<p><strong>Name:</strong> <span id="modal_name">${userData.name}</span></p>
+				                <p><strong>Mobile No:</strong> <span id="modal_mobile_no">${userData.mobile_no}</span></p>
+				                <p><strong>Address:</strong> <span id="modal_address">${userData.address}</span></p>
+				                <p><strong>Vehicle No:</strong> <span id="modal_vehicle_num">${userData.vehicle_num}</span></p> <!-- Added Vehicle No -->
+				                <p><strong>Vehicle Type:</strong> <span id="modal_vehicletype">${userData.vehicletype}</span></p>
+				                <p ><strong>Ref Num:</strong> <span id="modal_ref_num">${userData.reference_num}</span></p>`;
+				      
+				                $("#cduserinfoHTML").html(userinfo);
+				                
+				                $("#modal_register_id").html(userData.register_id);
+				    
+				    console.log(userData.adhaarurl);
+				    
+                    // Display the files (Adhaar, User Photo, Vehicle Document)
+                    if (userData.adhaarurl!=null) {
+                    	displayFile('modal_adhaar_container', userData.adhaarurl);
+                    }
+                    if (userData.user_photourl) {
+                    	displayFile('modal_user_photo_container', userData.user_photourl);
+                    }
+                    //if (userData.rcbookurl) {
+                    	displayFile('modal_vehicle_doc_container', userData.rcbookurl);
+                    //}
+                    if (userData.leasedocurl) {
+                    	displayFile('modal_leasevehicle_doc_container', userData.leasedocurl);
+                    }
+                    
+                    // Hide rejection section initially
+                    document.getElementById('rejectionSection').style.display = 'none';
+                    document.getElementById('rejectionReason').value = ''; // Clear previous input
+
+                    // Show the modal
+                    $('#detailModal').modal({
+                        backdrop: 'static',
+                        keyboard: false
+                    });
+                } else {
+                    // Handle case where no data is returned
+                    alert('No data found for this registration ID.');
+                }
+            },
+            error: function(err) {
+                console.error(err);
+                alert('Failed to fetch data');
+            }
+        });
+    }
+
+ // Function to handle Accept action
+    function acceptAction() {
+        const registerId = document.getElementById('modal_register_id').innerText; // Get register_id from the modal
+        const rowElement = document.querySelector(`tr[data-register-id="${registerId}"]`); // Find the row by register_id
+        const mobileNo = document.getElementById('modal_mobile_no').innerText;
+        
+        const refNum = document.getElementById('modal_ref_num').innerText;
+
+        $.ajax({
+            url: '/gcc/api/registration/acceptbyid',
+            method: 'POST',
+            data: {
+                registerId: registerId
+            },
+            success: function(response) {
+                console.log(response);
+
+                // URL for accepted registration message
+                const acceptMessageUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${mobileNo}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Welcome+to+Greater+Chennai+Corporation%2C+%0A%0AYour+Registered+ID+is+%2A${registerId}%2A+.%0AYour+C%26D+waste+registration+has+been+approved+successfully.+%0A%0AFor+downloading+your+ID+card%2C+kindly+click+on+the+button+below+%F0%9F%91%87&media_url=https%3A%2F%2Fres.cloudinary.com%2Fdpub5muar%2Fimage%2Fupload%2Fv1729597847%2Fq2ihjs99puhhwkjzajyo.png&isTemplate=true&buttonUrlParam=userdetail%3Fregister_id%3D${refNum}`; 
+                //https://gccservices.chennaicorporation.gov.in/volunteer/wastecollectors/https://gccservices.chennaicorporation.gov.in/volunteer/wastecollectors/userdetail?register_id=5
+                	
+                // Call the WhatsApp function to send acceptance message
+                sendWhatsAppMessage(mobileNo, acceptMessageUrl);
+                
+                Swal.fire({
+                    title: 'Success!',
+                    text: 'Registration Accepted Successfully',
+                    icon: 'success',
+                    confirmButtonText: 'OK'
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        $('#detailModal').modal('hide'); // Close the modal after success
+                        location.reload(); // Reload page (optional)
+                       
+                    }
+                });
+            },
+            error: function(error) {
+                console.error(error);
+                Swal.fire({
+                    title: 'Error!',
+                    text: 'Failed to Accept Registration',
+                    icon: 'error',
+                    confirmButtonText: 'OK'
+                });
+            }
+        });
+    }
+
+    
+    
+    function showRejectionSection() {
+        // Show the rejection section when Reject button is clicked
+        document.getElementById('rejectionSection').style.display = 'block';
+    }
+
+    function confirmRejection() {
+        const registerId = document.getElementById('modal_register_id').innerText; // Get register_id from the modal
+        const rejectionReason = document.getElementById('rejectionReason').value; // Get the rejection reason
+        const mobileNo = document.getElementById('modal_mobile_no').innerText; // Get mobile number from the modal
+
+        const refNum = document.getElementById('modal_ref_num').innerText;
+
+        if (!rejectionReason) {
+            Swal.fire({
+                title: 'Info',
+                text: 'Please provide a reason for rejection.',
+                icon: 'info',
+                confirmButtonText: 'OK'
+            });
+            return; // Stop if no reason is provided
+        }
+
+        $.ajax({
+            url: '/gcc/api/registration/rejectbyid', // API endpoint for rejection
+            method: 'POST',
+            data: {
+                registerId: registerId, // Pass registerId as request param
+                reason: rejectionReason // Pass the rejection reason
+            },
+            success: function(response) {
+            	 // URL for rejected registration
+                const rejectMessageUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${mobileNo}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Welcome+to+Greater+Chennai+Corporation%2C%0A%0AYour+Registered+ID+is+%2A${registerId}%2A+.%0AYour+C%26D+waste+registration+has+been+Rejected.+%0A%0AKindly+click+on+the+button+below+for+viewing+the+status%F0%9F%91%87&media_url=https%3A%2F%2Fres.cloudinary.com%2Fdpub5muar%2Fimage%2Fupload%2Fv1729598221%2Fci7ybspyanctl9lackby.jpg&isTemplate=true&buttonUrlParam=userdetail%3Fregister_id%3D${refNum}`;
+                
+                //const acceptMessageUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${mobileNo}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Welcome+to+Greater+Chennai+Corporation%2C+%0A%0AYour+Registered+ID+is+%2A${registerId}%2A+.%0AYour+C%26D+waste+registration+has+been+approved+successfully.+%0A%0AFor+downloading+your+ID+card%2C+kindly+click+on+the+button+below+%F0%9F%91%87&media_url=https%3A%2F%2Fgccservices.in%2Fgcc%2Ffiles%2Fc_d%2F1_approved.jpg&isTemplate=true&buttonUrlParam=userdetail%3Fregister_id%3D${registerId}`;
+
+                sendWhatsAppMessage(mobileNo, rejectMessageUrl); // Call the WhatsApp function to send rejection message
+                Swal.fire({
+                    title: 'Success!',
+                    text: 'Registration Rejected!!',
+                    icon: 'success',
+                    confirmButtonText: 'OK'
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        $('#detailModal').modal('hide'); // Close the modal after success
+                        location.reload(); // Reload page (optional)
+                       
+                    }
+                });
+            },
+            error: function(error) {
+                console.error(error);
+                Swal.fire({
+                    title: 'Error!',
+                    text: 'Failed to Reject Registration',
+                    icon: 'error',
+                    confirmButtonText: 'OK'
+                });
+            }
+        });
+    }
+
+    function displayFile(containerId, filePath) {
+        const container = document.getElementById(containerId);
+        
+        // Check if filePath is defined and not null
+        if (filePath) {
+            const fileExtension = filePath.split('.').pop().toLowerCase();
+            const fullPath = filePath; // Construct full URL
+            console.log('Full Path:', fullPath); 
+
+            if (fileExtension === 'pdf') {
+                container.innerHTML = `<embed src="${fullPath}" type="application/pdf" width="100%" height="500px" />`;
+            } else {
+                container.innerHTML = `<img src="${fullPath}" alt="Document" class="img-fluid img-thumbnail" />`;
+            }
+        } else {
+            // If filePath is undefined or null, display a default message
+            container.innerHTML = 'No document available';
+        }
+    }
+    
+    
+    function sendWhatsAppMessage(cellnumber, msgUrl) {
+        // Send the WhatsApp message
+        $.ajax({
+            url: '/gcc/api/cd/whatsapp/send-whatsapp-message', // Replace with your service path
+            type: 'POST',
+            data: { msgUrl: msgUrl },
+           
+            error: function(xhr, status, error) {
+                console.error('Error sending WhatsApp message:', error);
+                Swal.fire({
+                    title: 'Error!',
+                    text: 'Message Not sent!',
+                    icon: 'error',
+                    timer: 2000,
+                    showConfirmButton: false
+                });
+            }
+        });
+    }
+
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/cdwaste/receipt.html b/target/classes/templates/modules/cdwaste/receipt.html
new file mode 100644
index 0000000..4a671c3
--- /dev/null
+++ b/target/classes/templates/modules/cdwaste/receipt.html
@@ -0,0 +1,139 @@
+<!-- Pre-loader end -->
+<div id="pcoded" class="pcoded">
+	<div class="pcoded-container">
+		<!-- Menu header -->
+		<div class="nav-display">
+			<nav th:replace="~{fragments/nav-user :: nav}"></nav>
+		</div>
+		<!-- Main content -->
+		<div class="container-fluid" style="margin-top: 4%;padding: 15px;">
+			<div class="row">
+				<div class="col-md-12 col-sm-12">
+					<div class="card " style="width:auto">
+
+						<div class="card-body">
+							<table>
+
+								<tr style="height:70px;">
+									<td colspan="4" style="text-align: center;">
+										<span><img src="\assets\media\images\logo.png"
+												style="width:45px;height:45px;text-align: left;"></span>
+										<span>
+											<h6 style="text-align: center;font-weight: bold;">Greater Chennai Corporation</h6>
+											<h6 style="text-align: center;font-weight: bold;">C & D Waste Collectors</h6>
+											<h6 style="text-align: center;font-weight: bold;">Acknowledgement Form</h6>
+										</span>
+									</td>
+								</tr>
+								<tr>
+									<th>User Name:</th>
+									<th>Mobile No:</th>
+									<th>User Type:</th>
+									<th>Email:</th>
+								</tr>
+								<tr>
+									<td id="uName" th:text="${bookingsDetails.users.name}"></td>
+									<td id="mobile" th:text="${bookingsDetails.users.mobileNo}"></td>
+									<td id="uType" th:text="${bookingsDetails.users.usertype}"></td>
+									<td id="eMail" th:text="${bookingsDetails.users.email}"></td>
+								</tr>
+								<tr>
+									<th style="font-weight: bold;">Hall Details:</th>
+								</tr>
+								<tr>
+									<th>Hall Name:</th>
+									<th>Address:</th>
+									<th>Zone:</th>
+									<th>Division:</th>
+								</tr>
+								<tr>
+									<td id="hallname" th:text="${bookingsDetails.hallDetails.hallName}">
+									</td>
+									<td><span id="address">
+											<span th:text="${bookingsDetails.hallDetails.doorNo}"></span>,
+											<span th:text="${bookingsDetails.hallDetails.street}"></span>,
+											<span th:text="${bookingsDetails.hallDetails.area}"></span>,
+											<span th:text="${bookingsDetails.hallDetails.pinCode}"></span>
+										</span></td>
+									<td id="zone" th:text="${bookingsDetails.hallDetails.zone}"></td>
+									<td id="division" th:text="${bookingsDetails.hallDetails.division}">
+									</td>
+								</tr>
+								<tr>
+									<th style="font-weight: bold;">Booking Details:</th>
+								</tr>
+								<tr>
+									<th>Booking Id:</th>
+									<th>Booking Date:</th>
+									<th>Starting Date:</th>
+									<th>Ending Date:</th>
+								</tr>
+								<tr>
+									<td id="bookId" th:text="${bookingsDetails.bookingId}"></td>
+									<td id="bookDate" th:text="${bookingsDetails.bookingDate}"></td>
+									<td id="startDate" th:text="${bookingsDetails.startDate}"></td>
+									<td id="endDate" th:text="${bookingsDetails.endDate}"></td>
+								</tr>
+								<tr>
+									<th>Starting Slot:</th>
+									<th>Ending Slot:</th>
+									<th>Booking Status:</th>
+									<th>Reason For Booking:</th>
+								</tr>
+								<tr>
+									<td id="startingSlot"
+										th:text="${bookingsDetails.startingSlot == 1 ? 'Morning' : 'Evening'}">
+									</td>
+									<td id="endingSlot"
+										th:text="${bookingsDetails.endingSlot == 1 ? 'Morning' : 'Evening'}">
+									</td>
+									<td id="bookStatus" th:text="${bookingsDetails.bookingStatus}"></td>
+									<td id="reason" th:text="${bookingsDetails.reason}"></td>
+								</tr>
+								<tr>
+									<th style="font-weight: bold;">Payment Details:</th>
+								</tr>
+								<tr>
+									<th>Transaction Id:</th>
+									<th>Payment Status:</th>
+									<th>Payment Details:</th>
+									<th>Payment Type:</th>
+								</tr>
+								<tr>
+									<td id="transId" th:text="${bookingsDetails.payments.TransactionId}">
+									</td>
+									<td id="PayStatus" style="text-align: left;font-weight:bold;"
+										th:text="${bookingsDetails.payments.paymentStatus}">
+									</td>
+									<td id="PayDetails"></td>
+									<td id="PayType"></td>
+								</tr>
+								<tr>
+									<td colspan="3" style="text-align: right;font-weight:bold;">Total Amount :</td>
+									<td id="PayDate" style="text-align: left;font-weight:bold;"
+										th:text="${bookingsDetails.payments.amountReceived}">
+									</td>
+								</tr>
+								<tr>
+									<td colspan="4" style="text-align: center;"> <span>
+											<h6 style="text-align: center;font-weight: bold;">*** This is a
+												computer-generated
+												document. No signature is required ***</h6>
+										</span></td>
+								</tr>
+							</table>
+						</div>
+					</div>
+
+					<div class="button-container" style="display: flex;justify-content: flex-end;">
+						<button class="btn btn-success" onclick="printTables()"
+							style="background: #FB6340;">Print</button>
+						<button class="btn btn-success" th:onclick="return redirect([[${bookingsDetails.bookingtype}]])"
+							style="background: rgb(21, 68, 92);">Back to Home</button>
+					</div>
+
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/target/classes/templates/modules/cdwaste/registration.html b/target/classes/templates/modules/cdwaste/registration.html
new file mode 100644
index 0000000..a51fcc4
--- /dev/null
+++ b/target/classes/templates/modules/cdwaste/registration.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<style>
+.required{
+	color: red;
+}
+/* Mobile screens - targeting devices with a max width of 767px */
+@media (max-width: 767px) 
+{
+	#campaignrequestform label{
+		margin-top: 10px;
+	} 
+}
+</style>
+    <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]-->
+
+        <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 mb-2">
+						<div class="row align-items-end">
+							<div class="col-lg-8">
+								<div class="page-header-title">
+									<i class="far fa-calendar-plus bg-blue"></i>
+									<div class="d-inline">
+										<h5>Registration</h5>
+										<span>C & D Waste Collectors Registrations</span>
+									</div>
+								</div>
+							</div>
+							<div class="col-lg-4">
+								<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" aria-current="page">C & D Waste Collectors Registrations</li>
+										<!-- <li class="breadcrumb-item active" aria-current="page">Create Campaign</li> -->
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+					<h4 class="h4 text-right text-mute" style="font-size: 12px;">
+						Auto refresh in <font id="refresh-countdown">00</font> seconds
+					</h4>
+					
+					<div class="row">
+										
+					<div class="col-md-12">
+					    <div class="card" style="margin-top: 0px;">
+					        <div class="card-header justify-content-between align-items-center">
+					            <h3><b>Registration Form</b></h3>
+					        </div>
+					        <div class="card-body">
+					            <form id="cdwasteRegistrationForm">
+					                <div class="form-group">
+					                    <div class="row">
+					                        <div class="col-sm-12 col-md-6">
+					                            <label for="name">Name<span class="required">*</span></label>
+					                            <input type="text" class="form-control" id="name" placeholder="Enter Name" required>
+					                        </div>
+					                        <div class="col-sm-12 col-md-6">
+					                            <label for="mobileNo">Mobile No<span class="required">*</span></label>
+					                            <input type="number" class="form-control" id="mobileNo" placeholder="Mobile No" required>
+					                        </div>
+					                    </div>
+					                </div>
+					
+					                <div class="form-group">
+					                    <label for="address">Address<span class="required">*</span></label>
+					                    <textarea class="form-control" id="address" rows="2" required></textarea>
+					                </div>
+					
+					                <div class="form-group">
+					                    <label for="adhaarFile">Upload Aadhaar:<span class="required">*</span></label>
+					                    <input type="file" class="form-control" id="adhaar" name="adhaar" required>
+					                </div>
+					
+					                <div class="form-group">
+					                    <label for="vehicleRcBookFile">Upload Vehicle RC Book:<span class="required">*</span></label>
+					                    <input type="file" class="form-control" id="vehicleRcBook" name="vehicleRcBook" required>
+					                </div>
+					
+					                <div class="form-group text-center">
+					                    <button type="submit" class="btn btn-primary" id="registerSubmit">Submit</button>
+					                    <button type="reset" class="btn btn-secondary ml-2" onclick="resetForm()">Reset</button>
+					                </div>
+					            </form>
+					        </div>
+					    </div>
+					</div>
+
+
+						
+						
+						
+						<div class="col-md-12">
+						    <div class="card" style="display:none;">
+						        <div class="card-block">
+						        <div class="page-header-title" >
+								    <h5 style="margin: 0;font-weight: bold;">Registration Details</h5><hr>
+								</div>
+						            <div>
+						                <table id="CDWasteDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
+						                    <thead class="thead-dark">
+						                        <tr role="row">
+						                            <th class="text-center">S.No</th>                                                  
+						                            <th class="text-center">Name</th>
+						                            <th class="text-center">Mobile No</th>
+						                            <th class="text-center">Address</th>
+						                            <th class="text-center">Adhaar</th>
+						                            <th class="text-center">Vechicle RC Book</th>                                                                                                    
+						                            <th class="text-center no-sort" width="%2">Action</th> 
+						                        </tr>
+						                    </thead>
+						                    <tbody>
+						                        <tr th:each="campaign, i: ${campaigns}">
+						                            <td th:text="${i.count}">0</td>
+						                            <td th:text="${campaign.campaign_name}"></td>
+						                            <td th:text="${campaign.event_dates}"></td>
+						                            <td th:text="${campaign.description}"></td>
+						                           <td th:text="${campaign.event_dates}"></td>
+						                            <td th:text="${campaign.description}"></td>
+						                            <td class="text-center">
+													    <a href="#" th:onclick="return callEdit([[${campaign.campaign_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit">
+													        <i class="ik ik-edit f-16 mr-15 text-green"></i>
+													    </a>
+													</td>
+ 
+						                        </tr>
+						                    </tbody>
+						                    <tfoot class="thead-dark">
+						                        <tr>
+						                            <th class="text-center">S.No</th>                                                  
+						                            <th class="text-center">Name</th>
+						                            <th class="text-center">Event Date</th>
+						                            <th class="text-center">Description</th>
+						                            <th class="text-center">Adhaar</th>
+						                            <th class="text-center">Vechicle RC Book</th> 
+						                            <th class="text-center no-sort" width="%2">Action</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 src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+        
+        <script type="text/javascript">
+        $(document).ready(function() {
+
+        	var table = $('#CampaignDatatable').DataTable({
+                dom: 'Bftip',
+                columnDefs: [
+                    { targets: 'no-sort', orderable: false }
+                ],
+                lengthMenu: [
+                    [50, 100, 200, 500, -1],
+                    ['50 rows', '100 rows', '200 rows', 'Show all']
+                ],
+                scrollY: '50vh',
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: [
+                    {
+                        extend: 'pageLength',
+                        className: 'btn btn-warning'
+                    },
+                    {
+                        title: 'Data export',
+                        extend: 'copyHtml5',
+                        text: 'Copy',
+                        className: 'btn btn-secondary',
+                        id: 'copyBtn'
+                    },
+                    {
+                        extend: 'excelHtml5',
+                        text: 'Excel',
+                        className: 'btn btn-secondary',
+                        id: 'excelBtn'
+                    },
+                    {
+                        extend: 'csvHtml5',
+                        text: 'CSV',
+                        className: 'btn btn-secondary',
+                        id: 'csvBtn'
+                    },
+                    {
+                        extend: 'pdfHtml5',
+                        text: 'PDF',
+                        className: 'btn btn-secondary',
+                        id: 'pdfBtn'
+                    }
+                ],
+                fixedHeader: true,
+                autoWidth: true,
+                responsive: true,
+                searching: false,
+                select: false,
+                processing: false
+            });
+        });
+        
+       
+        $(document).ready(function () {
+            $('#cdwasteRegistrationForm').on('submit', function (event) {
+                event.preventDefault(); // Prevent default form submission
+
+                var name = $('#name').val();
+                var mobileNo = $('#mobileNo').val();
+                var address = $('#address').val();
+                var adhaarFile = $('#adhaar')[0].files[0];
+                var vehicleRcBookFile = $('#vehicleRcBook')[0].files[0];
+
+                if (!name || !mobileNo || !address || !adhaarFile || !vehicleRcBookFile) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'All fields are required!'
+                    });
+                    return;
+                }
+
+                var formData = new FormData(this); // 'this' refers to the form element
+
+                $.ajax({
+                    url: '/gcc/api/registration/register',
+                    type: 'POST',
+                    data: formData,
+                    processData: false, // Required for FormData
+                    contentType: false, // Required for FormData
+                    success: function (response) {
+                        if (response[0].status === 'success') {
+                            Swal.fire({
+                                icon: 'success',
+                                title: 'Success',
+                                text: response[0].message
+                            }).then((result) => {
+                                if (result.isConfirmed) {
+                                    $('#cdwasteRegistrationForm')[0].reset();
+                                    location.reload();
+                                }
+                            });
+                        } else {
+                            Swal.fire({
+                                icon: 'error',
+                                title: 'Error',
+                                text: response[0].message
+                            });
+                        }
+                    },
+                    error: function (xhr, status, error) {
+                        Swal.fire({
+                            icon: 'error',
+                            title: 'Error',
+                            text: 'An error occurred: ' + error
+                        });
+                    }
+                });
+            });
+        });
+
+
+
+
+
+		
+	
+
+
+	
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/cdwaste/rejected.html b/target/classes/templates/modules/cdwaste/rejected.html
new file mode 100644
index 0000000..b0d160d
--- /dev/null
+++ b/target/classes/templates/modules/cdwaste/rejected.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+<body>
+    <div class="wrapper">
+        <!-- Header -->
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+        <div class="page-wrap">
+            <!-- Left Menu -->
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+
+            <div class="main-content">
+                <div class="container-fluid">
+                    <div class="page-header">
+                        <div class="row align-items-end">
+                            <div class="col-lg-8">
+                                <div class="page-header-title">
+                                    <i class="fas fa-th-large bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>C & D Waste Collectors </h5>
+                                        <span>Rejected</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-lg-4">
+                                <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">C & D Waste Collectors</li>
+                                        <li class="breadcrumb-item active" aria-current="page">Rejected</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr>
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="card">
+                             <div class="card-header">
+
+				            </div>
+                                <div class="card-block">
+                                    <div>
+                                        <table id="worksDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+                                           <thead class="thead-dark">
+										        <tr role="row">
+										            <th>S.No</th> <!-- Auto-increment index -->
+										            <th>Name</th>
+										            <th>Mobile No</th>
+										            <th>Address</th>
+										            <th>Vehicle Number</th>
+										            <th>Vehicle Type</th>
+										            <th>Rejected Date</th>
+										            <th>Rejected By</th>
+										            <th>Reason</th>
+										            <th>Register ID</th>
+										        </tr>
+										    </thead>
+										    <tbody>
+										        <tr th:each="rejected, i : ${rejectedDetails}">
+										            <td th:text="${i.count}">0</td> <!-- Index counter -->
+										            <td th:text="${rejected.name}">Name</td>
+										            <td th:text="${rejected.mobile_no}">Mobile No</td>
+										            <td th:text="${rejected.address}">Address</td>
+										            <td th:text="${rejected.vehicle_num}">Vehicle Number</td>
+										            <td th:text="${rejected.vehicletype}">Vehicle Type</td>
+										            <td th:text="${rejected.accepteddate}">Rejected Date</td>
+										            <td th:text="${rejected.acceptedby}">Rejected By</td>
+										            <td th:text="${rejected.reason}">Reason</td>
+										            <td th:text="${rejected.register_id}">Register ID</td>
+										        </tr>
+										    </tbody>
+										    <tfoot class="thead-dark">
+										        <tr>
+										            <th>S.No</th>
+										            <th>Name</th>
+										            <th>Mobile No</th>
+										            <th>Address</th>
+										            <th>Vehicle Number</th>
+										            <th>Vehicle Type</th>
+										            <th>Rejected Date</th>
+										            <th>Rejected By</th>
+										            <th>Reason</th>
+										            <th>Register ID</th>
+										        </tr>
+										    </tfoot>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+        </div>
+    </div>
+
+   
+
+    <!-- Include jQuery and Bootstrap JavaScript -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+    <script th:replace="~{fragments/modules/base/script :: script}"></script>
+    <script type="text/javascript">
+    $(document).ready(function() {
+
+    	var table = $('#worksDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                { targets: 'no-sort', orderable: false }
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', 'Show all']
+            ],
+            scrollY: '50vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: [
+                {
+                    extend: 'pageLength',
+                    className: 'btn btn-warning'
+                },
+                {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-secondary',
+                    id: 'copyBtn'
+                },
+                {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-secondary',
+                    id: 'excelBtn'
+                },
+                {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-secondary',
+                    id: 'csvBtn'
+                },
+                {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-secondary',
+                    id: 'pdfBtn'
+                }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false
+        });
+       
+    });
+    	   
+
+
+
+    
+
+
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/com_petition/complaint_list.html b/target/classes/templates/modules/com_petition/complaint_list.html
new file mode 100644
index 0000000..93c4c69
--- /dev/null
+++ b/target/classes/templates/modules/com_petition/complaint_list.html
@@ -0,0 +1,803 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Complaint List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Complaint List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <!-- <div class="card">
+                                    
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="complaintDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department Officer</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department Officer</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></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/com_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	var officerMasterList = "";
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_complaint_data(){
+	        	
+	        	var apiUrl = '/gcc/api/com_petition/getComplaintList?loginId='+createdBy;
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+	        
+	        /* Get Complaints List */
+	        function get_complaint_list(){
+	        	get_complaint_data().then(function(complaintList) {
+	    		    // Handle the complaint list
+	    		    generate_table(complaintList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching complaint list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching complaint list:', error);
+			        }
+	    		});
+			}
+	        
+	        function viewPetitionSummary(petitionNo){
+	        	$("#viewpetition").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				var url = '/gcc/com_petition/view-petition-modal?petitionNo='+petitionNo;
+				$.ajax({
+				    url: url,
+				    type: 'GET',
+				    dataType: 'html',
+				    success: function(data) {
+				      $('#viewPetitionBoxBody').html(data); // Inject content into modal body
+				    },
+				    error: function(xhr, status, error) {
+				      console.error("Error loading URL:", error);
+				      // Handle error, display a message, etc.
+				    }
+				  });
+				
+				return false;
+			}
+	        
+	        function updateStatus(mapId){
+	        	$("#ComplaintStatusBox").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				callComplaintDetails(mapId);
+				return false;
+			}
+	        
+	        function callComplaintDetails(mapId){
+	        	loading_text_msg = getLoadingMessage(); // get Loading random text
+	        	var loading=searchinfo("<b>"+loading_text_msg+"</b>");
+	    		var complaintContentHTML=`
+	    							<div class="row">
+	    							    <div class="col-lg-6">
+	    						        <div class="block block-rounded">
+	    						           
+	    						                <div id="leftContainer">${loading}</div>
+	    						            
+	    						        </div>
+	    						    </div>
+	    						    
+	    						    <div class="col-lg-6 printack2">
+	    						        <div class="block block-rounded">
+	    						            
+	    						                <div id="rightContainer">${loading}</div>
+	    						           
+	    						        </div>
+	    						    </div>
+	    						    <!--<div class="col-lg-12 text-center block-options pt-10">
+	    						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+	    						    </div>-->
+	    						</div>`;
+	    		
+	    		$('#ComplaintStatusBoxBody').html(complaintContentHTML); // Box content (Body)
+	    		
+	    		getComplaintData(mapId);
+			}
+	        
+	        function getComplaintData(mapId){
+	        	get_complaint_details_byId(mapId).then(function(complaintDetails) {
+	        		
+	        		var complaintStatus = complaintDetails[0].status;
+					
+	        		var statusBadge = complaintStatus.charAt(0).toUpperCase() + complaintStatus.slice(1);
+	        		var refRibben = `<div class="card-header-right" style="top:auto;">
+	        							Ref ID: ${mapId}
+				              	      </div>`;
+           	        var statusRibben = ""; 
+	        		if(complaintStatus=='pending'){
+	        			statusRibben = `<div class="ribbon">
+		              	      <div class="wrap">
+		              	        <span class="ribbon6 bg-danger"><div styel="color:#fff;">${statusBadge}</div></span>
+		              	      </div>
+		              	    </div>`;
+		              	statusRibben = "";    
+	        			statusBadge = `<span class="badge badge-danger" style="font-size:10px;padding:0.25em 0.4em;">${statusBadge}</span>`;
+	        			
+					}
+	        		else if(complaintStatus=='close'){   
+	        			statusBadge = `<span class="badge badge-success" style="font-size:10px;padding:0.25em 0.4em;">${statusBadge}</span>`;
+					}
+	        		var complaintRightBody = "";
+					var complaintLeftBody = `<div class="card mb-0">
+								             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                	<h3>Complaint Details</h3>
+								                	${statusRibben}
+								                </div>
+								                <div class="card-body">
+									                <table class="table table-borderless table-vcenter mb-0" style="font-size:12px;">
+												      <tbody>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${convertdate(complaintDetails[0].cdate)}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petition_no}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petitioner_name}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petitioner_mobile}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th colspan="2" style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:<br><p class="fw-semibold mb-0" style="font-weight:normal;">${complaintDetails[0].complaint_nature}</p></th>
+												        </tr>
+												        <tr>
+												        	<td colspan="2" style="padding: 0.45rem 0.45rem;">
+													        	<table class="table table-bordered table-vcenter mb-0">
+													                <thead>
+													                  <tr>
+													                    <th>Complaint <i class="fa fa-arrow-right"></i> Status</th>
+													                    <th class="text-right" id="complaint_forward_link"><a href="javascript:void(0);" onclick="return forward_compliant(${complaintDetails[0].mapid}, '${complaintDetails[0].complaint_type}');" class="link" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Click here to forward this complaint to another department officer."><i class="far fa-share-square"></i> Click to forward </a></th>
+													                  </tr>
+													                </thead>
+												                	<tbody>
+												                 		<tr>
+															            	<td colspan="2" class="fw-semibold">
+															            	${complaintDetails[0].complaint_type} <i class="fa fa-arrow-right"></i> ${statusBadge} <i class="fa fa-arrow-right"></i> ${complaintDetails[0].off_nm}
+														                    </td>
+													                  	</tr>
+												                	</tbody>
+												              	</table>
+												        	</td>
+												        </tr>
+												      </tbody>
+												    </table>
+								                </div>
+								            </div>`;
+					
+					$('#leftContainer').html(complaintLeftBody);
+					
+					if(complaintStatus!='close'){
+						complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data">
+												<div class="card mb-0">
+							                    	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+							                    		<h3>Complaint Update Details</h3>
+							                    	    ${refRibben}
+							                		</div>
+							                		<div class="card-body">
+								                		<div class="form-group">
+					                                    	<label for="complaintActionText">நடவடிக்கை / Action:</label>
+									   						<textarea class="form-control" id="complaintActionText" name="complaintActionText" rows="6" maxlength="250" placeholder="புகாரின் தன்மை..." required></textarea>
+									   					</div>
+									   					<div class="form-group">
+									                       <label for="action_san_page1">ஆவணப் பதிவேற்றம் / Document Upload:</label>
+														   <input name="action_san_page1" id="action_san_page1" class="form-control" type="file" capture="camera"  accept="application/pdf, image/*" required>
+														 </div>
+														 <div class="form-group mb-0 text-center">
+														 	<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveandclose(${mapId},${complaintDetails[0].petition_id},'${complaintDetails[0].petition_no}');" id="updatebtn"><i class="ik ik-save"></i> Save and Close </button>
+														 </div>
+							                		</div>
+							            		</div>
+						            		</form>`;
+						$('#rightContainer').html(complaintRightBody);
+					}
+					else{
+						// first remove forward link
+						$("#complaint_forward_link").html("");
+						
+						get_complaint_action_byId(mapId).then(function(complaintAction) {
+							var fileType = complaintAction[0].file_type;
+							fileType = fileType.split("/").pop();
+							var filetypeico = "file-lines";
+							if(fileType=='pdf'){
+								filetypeico = "file-pdf";
+							}
+							else{
+								filetypeico = "file-image";
+							}
+							
+							complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data">
+													<div class="card mb-0">
+								                    	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                    		<h3>Complaint Update Details</h3>
+								                    	    ${refRibben}
+								                		</div>
+								                		<div class="card-body">
+									                		<div>
+									                			<b>நடவடிக்கை தேதி / Action Date:</b> ${convertdate(complaintAction[0].cdate)}
+					                                            <hr>
+					                                            <b>நடவடிக்கை / Action:</b><br>
+					                                            <p class="mt-10">${complaintAction[0].comments}</p>
+					                                        </div>
+					                                        	<hr>
+					                                        <div class="like-comm mt-20 mb-0"> 
+					                                        	<b>ஆவணப் பதிவேற்றம் / Document Upload:</b><br>
+					                                        	
+						                                        	<table class="table table-bordered table-vcenter mb-0">
+														                <thead>
+														                  <tr>
+														                    <th>S.no</th>
+														                    <th>File Name</th>
+														                    <th>Size</th>
+														                    <th>Type</th>
+														                    <th><i class="ik ik-more-horizontal"></i></th>
+														                  </tr>
+														                </thead>
+													                	<tbody>
+													                 		<tr>
+																            	<td class="fw-semibold">1</td>
+																            	<td class="fw-semibold">${complaintAction[0].file_name}</td>
+																            	<td class="fw-semibold">${formatFileSize(complaintAction[0].file_size)}</td>
+																            	<td class="fw-semibold">${fileType}</td>
+																            	<td class="fw-semibold">
+																            		<a href="javascript:void(0)" class="link mr-10" onclick="downloadFile('action','${complaintAction[0].file_name}','${complaintAction[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Download File"><i class="fa fa-fw fa-download" style="font-size: 18px;"></i></a>
+																            		<a href="javascript:void(0)" class="link mr-10" onclick="viewFile('action','${complaintAction[0].file_name}','${complaintAction[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View File"><i class="far fa-3x fa-${filetypeico}" style="font-size: 18px;"></i></a>
+																            	</td>
+														                  	</tr>
+													                	</tbody>
+													              	</table>
+					                                   		</div>
+								                		</div>
+								            		</div>
+							            		</form>`;
+							$('#rightContainer').html(complaintRightBody);
+							// Enable tooltips for all elements with data-toggle="tooltip"
+				            $('[data-toggle="tooltip"]').tooltip();
+						}).catch(function(error) {
+			    		    // Handle errors
+			    		    console.error('Error fetching action details ('+mapId+'):', error);
+			    		});	 
+						
+					}
+					// Enable tooltips for all elements with data-toggle="tooltip"
+		            $('[data-toggle="tooltip"]').tooltip();
+	        	}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching Complaint details ('+mapId+'):', error);
+	    		});	            
+	        	
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#complaintDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        //scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+	            	var complaint_status=row["status"];
+					complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1);
+					
+					actionHTML = `<div class="dropdown d-inline-block show">
+			                        <!--<a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
+			                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end">
+			                        Action for: `+row['petition_no']+` 
+			                        	<a class="dropdown-item" href="" onclick="return viewAck('`+row['petition_no']+`');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View Acknowledgement"><i class="ik ik-eye"></i> Acknowledgement</a>
+			                        	<a class="dropdown-item" href="/gcc/com_petition/petition-ack/`+row['petition_no']+`" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print Acknowledgement"><i class="ik ik-printer"></i> Acknowledgement</a>
+			                        </div>-->
+			                    </div>`
+	                table.row.add([
+	                	rowNum++,
+	                    '<a href="/gcc/com_petition/update-petition?petitionNo='+row['petitionNoEncode']+'" onclick="return viewPetitionSummary(\''+row['petitionNoEncode']+'\');">'+row['petition_no']+'</a>',
+	                    row['petitioner_name'],
+	                    row['petitioner_mobile'],
+	                    row['petitioner_address'],
+	                    row['petitioner_pincode'],
+	                    row['complaint_type'],
+	                    convertdate(row['cdate']),
+	                    '<a href="#" onclick="return updateStatus('+row['mapid']+');" style="text-transform: capitalize;"">'+complaint_status+'</a>',
+	                    row['off_nm'],
+	                    actionHTML
+	                ]).draw(false);
+	            });
+	            
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+	      //Save Forward Details
+			function saveForward(mapid){
+				
+				var offidto = $("#dept2").val();
+				
+				if(offidto=='' || offidto==0){
+					var formError= "Select Department Required!";
+					$('#forwardFormError').html(formError);
+					return false;
+				}
+				
+				var comments = $("#forwardcomp").val();
+				var textLength = comments.length;
+				var formError= "";
+				if(textLength<=10){
+					formError= "Forward Comments Required!";
+					$('#forwardFormError').html(formError);
+					return false;
+				}
+				else{
+					$('#forwardFormError').html(formError);
+				}
+				
+				$.ajax({
+				    type: "POST",
+				    url: '/api/insertForwardLog',
+				    data: {
+				        'mapid': mapid,
+						'comments':comments,
+						'offidto':offidto
+				    },
+				}).done(function(response) {
+				      Swal.fire(
+				        'Complaint Forward Status!',
+				        'Complaint Forwarded Successfully!',
+				        'success'
+				      ).then(() => {
+							    location.reload();
+							 });
+					console.log(response);
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					/*
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+				    console.error("URL: /api/setEventId");
+				    console.error("Query parameters:", {
+				        'upass': upass
+				    });
+					*/
+				});
+				return false;
+			}
+	     	
+	      // Save New Action  
+			function saveandclose(mapId,petitionId,petitionNo){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var comments = $('#complaintActionText');
+				var textLength = comments.val().length;
+				comments.removeClass('is-invalid');
+				
+				var fileInput = $("#action_san_page1");
+				fileInput.removeClass('is-invalid');
+				var selectedFile = fileInput.val();
+				
+				if (textLength>=10 && selectedFile) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#action-form')[0]);
+			        formData.append('createdBy',createdBy);
+			        formData.append('mapId',mapId);
+			        formData.append('petitionId',petitionId);
+			        formData.append('petitionNo',petitionNo);
+			        formData.append('complaintStatus','close');
+			        
+			        saveActionFormData(formData).then(function(response) {
+						if(response!="error"){
+							// Handle the response
+		    		    	Swal.fire({
+		        				title: 'Complaint action saved successfully.',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'success',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					$("#ComplaintStatusBox").modal('hide');
+		        				}
+		        			});
+						}
+						else{
+							// Handle the response
+							// if response == "error"
+		    		    	Swal.fire({
+		        				title: 'Failed to save complaint action. Please try again!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+		    		    
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					if(textLength<10){
+						comments.addClass('is-invalid');
+					}
+					
+					if (!selectedFile) {
+						fileInput.addClass('is-invalid');
+					}
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function saveActionFormData(formData){
+				var apiUrl = '/gcc/api/com_petition/saveComplanitStatus';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function form_btn_enable(){
+				$("#updatebtn").prop("disabled", false);
+				$("#updatebtn").html('<i class="ik ik-save"></i> Save and Close ');
+			}
+			
+			function form_btn_disable(){
+				$("#updatebtn").prop("disabled", true);
+				// Show the loading icon on the button
+				$("#updatebtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+			}
+			
+			// For Complient Map Select HTML 
+			function calloffice(val,id){
+				if(val==1){ // Intenal
+					var officeSelectHTML = `<div class="mb-4">
+	                							<label for="office${id}">Select Office</label>
+	                							<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})">
+									                <option value="0">Select Office</option>
+									                <option value="1">HQ</option>
+									                <option value="2">Zonal Office</option>
+							                	</select>
+						                	</div>`;
+					$("#officedata"+id).html(officeSelectHTML);
+				}
+				else if(val==2){ // External
+					$("#officers"+id).html('');
+					var ExSelectHTML = getselect(id,"ExSelect");
+					var departmentSelectHTML = `<div class="mb-4">
+													<label for="dept3">Select Department</label>
+													${ExSelectHTML}
+											 	</div>`;
+					$("#officedata"+id).html(departmentSelectHTML);
+				}
+				else{
+					$("#officedata"+id).html('');
+					$("#officers"+id).html('');
+				}
+				$("#officers"+id).html('');
+			}
+			
+			function callofficers(val,id){
+				
+				if(val==1){
+					// HQ
+					var HQSelectHTML = getselect(id,"HQSelect");
+				 	$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`);
+				}
+				else if(val==2){
+					// Zone Office
+					var ZoneSelectHTML = getselect(id,"ZoneSelect");
+					$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`);
+				}
+				else{
+					$("#officers"+id).html('');
+				}
+				
+			}
+			
+			function getselect(comid,type){
+		  	  var HQSelect = '';
+		  	  var ZoneSelect = '';
+		  	  var ExSelect = '';
+		  
+		  	  for (var i = 0; i < officerMasterList.length; i++) {
+		  		  if(officerMasterList[i].zone_id=="HQ"){
+		  			  HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else if(officerMasterList[i].zone_id=="99"){
+		  			  ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else{
+		  			  ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  	  }
+		  	  
+		  	// Forward Save Button
+			  var forward_Btn = `<div class="col-12 pt-3 mb-0 pb-0" id="submitdiv">
+									<label class="form-label" for="forwardcomp">Forward Comments</label>
+									<textarea class="js-maxlength form-control" id="forwardcomp" name="forwardcomp" rows="6" maxlength="250" placeholder="கருத்துகள்..." data-always-show="true" data-placement="right" th:utext="" required></textarea>
+			  						<div class="text-center pt-3">
+									<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveForward(${comid});" id="updatebtn"><i class="si si-rocket me-1"></i> Save and Forward</button>
+			  						<div id="forwardFormError" class="text-danger"></div>
+			  						</div>
+								</div>`;
+								
+		  	  if(type=="HQSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ZoneSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ExSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  return '';
+			}
+			$(document).ready(function() {
+				call_loading();
+				get_officer_master_data();
+				get_complaint_list();
+			});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/com_petition/new_petition.html b/target/classes/templates/modules/com_petition/new_petition.html
new file mode 100644
index 0000000..2d29f52
--- /dev/null
+++ b/target/classes/templates/modules/com_petition/new_petition.html
@@ -0,0 +1,301 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Add New Petition</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Add Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                        	<div class="col-md-2"></div>
+							<div class="col-md-8">
+                                <div class="card">
+									<form class="request-form" id="request-form" onsubmit="return saveRequest();" enctype="multipart/form-data">
+	                                    <div class="card-header"><h3>New Petition Form</h3></div>
+	                               		<div class="card-body">
+											<div class="form-group">
+	                                            <label for="petitionerName">Petition Type / மனுவின் வகை</label>
+	                                            <div class="form-radio" id="petition_type">
+		                                          
+		                                        </div>
+	                                        </div>
+											<div class="form-group">
+	                                            <label for="petitionerName">Petitioner's Name / மனுதாரரின் பெயர்</label>
+	                                            <input type="text" class="form-control" name="petitionerName" id="petitionerName" autocomplete="off" placeholder="மனுதாரரின் பெயர்"  maxlength="250" required>
+	                                        </div>
+	                                        <div class="form-group">
+	                                            <label for="petitionerMobile">Mobile NO / கைபேசி எண்</label>
+			                       				<input type="text" class="js-maxlength form-control" id="petitionerMobile" name="petitionerMobile" autocomplete="off" placeholder="கைபேசி எண்" maxlength="10" data-always-show="true" data-placement="top" required>
+	                                        </div>
+											<div class="form-group">
+                                          		<label for="complaintType">Type of complaint / புகார் வகை (பலவற்றை தேர்ந்தெடு..) </label>
+												<select class="select2" id="complaintType" name="complaintType" style="width: 100%;" data-placeholder="பலவற்றை தேர்ந்தெடு.." multiple required>
+													<option th:each="complaintType : ${complaintTypesList}" th:value="${complaintType.complaintTypeId}" th:text="${complaintType.complaintType}"></option>
+												</select>
+											</div>
+	                                        <div class="row">
+												 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page1">Petition Page 1 / மனு பக்கம் 1</label>
+													   <input name="san_page1" id="san_page1" class="form-control" type="file" capture="camera"  accept="application/pdf, image/*">
+													 </div>
+												 </div>
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page2">Petition Page 2 / மனு பக்கம் 2</label>
+													   <input name="san_page2" id="san_page2" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+												 
+											</div>	 
+											<div class="row">	 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page3">Petition Page 3 / மனு பக்கம் 3</label>
+													   <input name="san_page3" id="san_page3" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+												 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page4">Petition Page 4 / மனு பக்கம் 4</label>
+													   <input name="san_page4" id="san_page4" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+											</div>
+										 	
+	                                  	</div>
+	                                  	<div class="card-footer text-right">
+											<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+	                                	</div>
+                                	</form>
+                                </div>
+                            </div>
+							<div class="col-md-2"></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 th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var complaintTypeList = "";
+			/* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(complaintTypeList, function(index, complaintType) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: complaintType.complaint_typeid, // case-sensitive as per object
+	    	                text: complaintType.complaint_type
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#complaintType').append(option);
+	    	        });
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			
+	        /* Get Petition Type Data */
+	        function get_petition_type_data(){
+	        	var petitionTypeHTML="";
+	    		get_petition_type_list().then(function(petitionTypes) {
+	    		    // Handle the Complaint list
+	    		    petitionTypeList = petitionTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(petitionTypeList, function(index, petitionType) {
+	    	            // Create an option element
+	    	            
+	    	            petitionTypeHTML +=`<div class="radio radiofill ${petitionType.color_class} radio-inline">
+						                            <label class="cursure_poiter">
+						                            <input type="radio" name="petitionType" value="${petitionType.petition_type_id}">
+						                            <i class="helper"></i>${petitionType.name}
+						                        </label>
+						                    </div>`;
+	    	        });
+	    		 // Append the option to the select element
+    	         $('#petition_type').html(petitionTypeHTML);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching petition type list:', error);
+	    		});
+			}
+			 
+			// Save New petition 
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var inputElementMobileNo = $('#petitionerMobile');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementComplaintType = $('#complaintType');
+				var complaintType = inputElementComplaintType.val();
+				
+				if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#request-form')[0]);
+			        formData.append('createdBy',createdBy);
+			        saveFormData(formData).then(function(response) {
+						if(response!="error"){
+							// Handle the response
+		    		    	Swal.fire({
+		        				title: 'Petition data saved successfully.',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'success',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					// Reload the current page
+		        					//location.reload();
+		        					// Navigate to a Ack page
+		        					window.location = "/gcc/com_petition/petition-list";//petition-ack/"+response;
+		        				}
+		        			});
+						}
+						else{
+							// Handle the response
+							// if response == "error"
+		    		    	Swal.fire({
+		        				title: 'Failed to save petition data. Please try again!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+		    		    
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					inputElementMobileNo.addClass('is-invalid');
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function saveFormData(formData){
+				var apiUrl = '/gcc/api/com_petition/savePetition';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function form_btn_enable(){
+				$("#resetFormBtn").prop("disabled", false);
+				$("#requestSubmitBtn").prop("disabled", false);
+				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+			}
+			
+			function form_btn_disable(){
+				$("#resetFormBtn").prop("disabled", true);
+				$("#requestSubmitBtn").prop("disabled", true);
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+			}
+			
+			$(document).ready(function() {
+				get_complaint_type_data();
+				get_petition_type_data();
+				$('#petitionerMobile').mask('0000000000');
+			});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/com_petition/petition_ack.html b/target/classes/templates/modules/com_petition/petition_ack.html
new file mode 100644
index 0000000..5d11f60
--- /dev/null
+++ b/target/classes/templates/modules/com_petition/petition_ack.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5 th:utext="'Petition Acknowledgement ('+${petitionNo}+')'">Petition Acknowledgement</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Petition Acknowledgement</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr class="print_no">
+                        <!-- 
+                        <div class="row">
+                        	<div class="col-lg-6">
+								<div class="block block-rounded ack ack-container">
+									<div id="ack1table" style="border: 1px solid black;">
+										<div id="ack1"></div>
+									</div>
+								</div>
+							</div>
+						 
+							<div class="col-lg-6">
+								<div class="block block-rounded ack ack-container">
+									<div id="ack2table" style="border: 1px solid black;">
+										<div id="ack2"></div>
+									</div>
+								</div>
+							</div>
+		   	 	            <div class="col-lg-12 text-center block-options pt-10">
+		   	 					<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+		   	 	            </div>
+                        </div>
+                         -->
+                        <div class="row">
+						    <div class="col-lg-6">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack1table" class="ack-content">
+						                <div id="ack1">This is ack1</div>
+						            </div>
+						        </div>
+						    </div>
+						    
+						    <div class="col-lg-6 printack2">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack2table" class="ack-content">
+						                <div id="ack2">This is ack2</div>
+						            </div>
+						        </div>
+						    </div>
+						    <div class="col-lg-12 text-center block-options pt-10">
+						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+						    </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 th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var complaintTypeList = "";
+			
+			 /* Get Complaint Type Data */
+			function get_complaint_type_data(){
+			
+				get_complaint_type_list().then(function(complaintTypes) {
+				    // Handle the Complaint list
+				    complaintTypeList = complaintTypes;
+					
+				    // After Complaint Type list created we call petition details
+				    get_petition_data();
+				    
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching complaint type list:', error);
+				});
+			}
+			
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint_txt;
+					
+					var complaintArray = complaint.split(',');
+					
+					for(j = 0; j < complaintArray.length; j++){
+						if(j>0){
+							complaintHTML+="<br>";
+						}
+						complaintHTML+= (j+1)+') '+complaintArray[j];
+					}
+					var ack =`
+					<table class="table table-borderless table-vcenter p-0 m-0">
+					  <tbody>
+					    <tr>
+					      <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+					      <td class="fw-semibold text-center">
+								<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br>
+								மக்களை தேடி மேயர் திட்டம்<br>
+								ஒப்புகை சீட்டு / Acknowledgement Receipt</b>
+						  </td>
+						  <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+					    </tr>
+					</tbody>
+					</table>
+					<hr style="margin:0px">
+					  <div class="block-content p-0 m-0">
+					    <table class="table table-borderless table-vcenter" style="font-size:12px;">
+					      <tbody>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${convertdate(petitionDetails[0].cdate)}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petition_no}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petitioner_name}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petitioner_mobile}
+					          </td>
+					        </tr>
+					        <tr style="font-size:12px;">
+					          <th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${complaintHTML}
+							</td>
+					        </tr>
+					        <tr>
+					          <td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th>
+					        </tr>
+					        <tr style="text-align: right;">
+					          <th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th>
+					        </tr>
+					      </tbody>
+					    </table>
+					  `;
+				    
+					$("#ack1").html(ack);
+					$("#ack2").html(ack);
+					  
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition details ('+petitionNo+'):', error);
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			
+			function get_petition_details() {
+			    
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/com_petition/getPetitionDetails?petitionNo='+petitionNo;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                resolve(jsonResponse);
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			$(document).ready(function() {
+				get_complaint_type_data();
+			});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/com_petition/petition_list.html b/target/classes/templates/modules/com_petition/petition_list.html
new file mode 100644
index 0000000..e00581f
--- /dev/null
+++ b/target/classes/templates/modules/com_petition/petition_list.html
@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Petition List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Petition List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                               <!--  <div class="card">
+                                    
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="petitionDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered" style="font-size:10px;">
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Petition Type</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- 
+                                                <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</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/com_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+        <script th:inline="javascript">
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            }
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_petitions_data(){
+	        	var apiUrl = '/gcc/api/com_petition/getPetitionList';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_petitions_list(){
+	        	get_petitions_data().then(function(petitionList) {
+	    		    // Handle the department list
+	    		    generate_table(petitionList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching petition list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching petition list:', error);
+			        }
+	    		});
+			}
+        
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#petitionDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        //scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+
+	            	//View Acknowledgement: View the acknowledgement for petition MP10000001.
+					//Print Acknowledgement: Print the acknowledgement for petition MP10000001.
+					//View Petition Details: View the details of petition MP10000001.
+					//View Uploaded Files: View the files uploaded for petition MP10000001.
+
+					actionHTML = `<div class="dropdown d-inline-block show">
+			                        <a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
+			                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end">
+			                        
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the acknowledgement for petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Acknowledgement</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print the acknowledgement for petition `+row['petition_no']+`."><i class="ik ik-printer"></i> Print Acknowledgement</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the details of petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Petition Details</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the files uploaded for petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Uploaded Files</a>
+			                        </div>
+			                    </div>`
+	                table.row.add([
+	                	rowNum++,
+	                    '<a href="/gcc/com_petition/update-petition?petitionNo='+row['petitionNoEncode']+'" class="link">'+row['petition_no']+'</a>',
+	                    row['petitioner_name'],
+	                    row['petitioner_mobile'],
+	                    row['petitioner_address'],
+	                    row['petitioner_pincode'],
+	                    row['petitioner_complaint_txt'],
+	                    convertdate(row['cdate']),
+	                    row['status'],
+	                    row['petition_type_name'],
+	                    actionHTML
+	                ]).draw(false);
+	            });
+	            
+	           // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+			$(document).ready(function() {
+				call_loading();
+	            get_petitions_list();
+	            
+			});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/com_petition/petition_not_mapped_list.html b/target/classes/templates/modules/com_petition/petition_not_mapped_list.html
new file mode 100644
index 0000000..6385044
--- /dev/null
+++ b/target/classes/templates/modules/com_petition/petition_not_mapped_list.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Unmapped Petition List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Unmapped Petition List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <!-- <div class="card">
+                                	<div class="card-header">
+                                        <h3>These are the petitions that are currently not assigned to any department officer:</h3>
+                                    </div>
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+                                        <div>
+                                        <p style="font-size:12px">These are the petitions that are currently not assigned to any department officer:</p>
+											<table id="petitionDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Petition Type</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</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/com_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+        <script th:inline="javascript">
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            }
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_petitions_data(){
+	        	var apiUrl = '/gcc/api/com_petition/getUnmapPetitionList';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_petitions_list(){
+	        	get_petitions_data().then(function(petitionList) {
+	    		    // Handle the department list
+	    		    generate_table(petitionList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching petition list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching petition list:', error);
+			        }
+	    		});
+			}
+        
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#petitionDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+				        	{ targets: 'no-sort', "orderable": false },
+							{ targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				       // scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+	                table.row.add([
+	                	rowNum++,
+	                    '<a href="/gcc/com_petition/update-petition?petitionNo='+row['petitionNoEncode']+'">'+row['petition_no']+'</a>',
+	                    row['petitioner_name'],
+	                    row['petitioner_mobile'],
+	                    row['petitioner_address'],
+	                    row['petitioner_pincode'],
+	                    row['petitioner_complaint_txt'],
+	                    convertdate(row['cdate']),
+	                    row['status'],
+	                    row['petition_type_name'],
+	                    '<a href="" onclick="return viewAck(\''+row['petition_no']+'\');"data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View Ack"><i class="far fa-handshake"></i></a>',
+	                ]).draw(false);
+	            });
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            
+	            remove_loading(); // remove Loading 
+			}
+			
+			$(document).ready(function() {
+				call_loading();
+	            get_petitions_list();
+			});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/com_petition/petition_update.html b/target/classes/templates/modules/com_petition/petition_update.html
new file mode 100644
index 0000000..255875a
--- /dev/null
+++ b/target/classes/templates/modules/com_petition/petition_update.html
@@ -0,0 +1,764 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Edit / Update Petition</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Edit/Update Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card" id="petitionUpdateForm">
+									<form class="update-request-form" id="update-request-form" onsubmit="return updateRequest();">
+										<div class="card-header">
+		                                    <h3>Edit / Update Petition Form</h3>
+		                                    <div class="card-header-right">
+	                                            <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+	                                        </div>
+	                                    </div>
+	                               		<div class="card-body">
+	                               			<div class="row">
+	                               				<div class="col-12">
+	                               					<div class="form-group">
+			                                            <label for="petitionerName">Petition Type / மனுவின் வகை</label>
+			                                            <div class="form-radio" id="petition_type">
+				                                          
+				                                        </div>
+			                                        </div>
+	                               				</div>
+												<div class="col-6">
+													<div class="form-group">
+			                                            <label for="petitionerName">Petitioner's Name / மனுதாரரின் பெயர்</label>
+			                                            <input type="text" class="form-control" name="petitionerName" id="petitionerName" autocomplete="off" placeholder="மனுதாரரின் பெயர்"  maxlength="250" required>
+			                                        </div>
+			                                        <div class="form-group">
+			                                            <label for="petitionerMobile">Mobile NO / கைபேசி எண்</label>
+					                       				<input type="text" class="form-control" id="petitionerMobile" name="petitionerMobile" autocomplete="off" placeholder="கைபேசி எண்" maxlength="10" required>
+			                                        </div>
+			                                        <div class="form-group">
+			                                        	<label for="complaintNature">புகாரின் தன்மை / Nature Of Complaint</label>
+								   						<textarea class="form-control" id="complaintNature" name="complaintNature" rows="6" placeholder="புகாரின் தன்மை..."></textarea>
+								   					</div>
+								   					<div class="form-group">
+			                                        	<label for="remarks">குறிப்பு / Remarks:</label>
+								   						<textarea class="form-control" id="remarks" name="remarks" rows="6" placeholder="குறிப்பு..."></textarea>
+								   					</div>
+												</div>
+												<div class="col-6">
+													<div class="form-group">
+														<label for="petitionerAddress">Address of petitioner / மனுதாரரின் முகவரி</label>
+									   					<textarea class="form-control" id="petitionerAddress" name="petitionerAddress" rows="6" maxlength="250" placeholder="மனுதாரரின் முகவரி..."></textarea>
+													</div>
+													<div class="form-group">
+														<label for="petitionerPincode">Postal code / தபால் குறியீடு</label>
+	   			                       					<input type="text" class="form-control" id="petitionerPincode" name="petitionerPincode" placeholder="தபால் குறியீடு" maxlength="6" required>
+													</div>
+													<div class="form-group">
+		                                          		<label for="complaintType">Type of complaint / புகார் வகை (பலவற்றை தேர்ந்தெடு..) </label>
+														<select class="select2" id="complaintType" name="complaintType" style="width: 100%;" data-placeholder="பலவற்றை தேர்ந்தெடு.." multiple required onchange="javascript:load_mapper();">
+															<option></option>
+														</select>
+													</div>
+												</div>
+												<div class="col-12">
+													<div class="block-content" id="userinfo2">
+														<div id="comp_mapping_to_officers" class="row"></div>
+													</div>
+											 	</div>
+											</div>
+	                                  	</div>
+	                                  	<div class="card-footer text-right">
+											<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+	                                	</div>
+                                	</form>
+                                </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 th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var petitionId = 0;
+			var closedComplaintsList=[];
+			var complaintTypeList = "";
+			var officerMasterList = "";
+			
+			 /* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Iterate through the Master Complanint Type and add options to the select element
+	    		    $.each(complaintTypeList, function(index, complaintType) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: complaintType.complaint_typeid, // case-sensitive as per object
+	    	                text: complaintType.complaint_type
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#complaintType').append(option);
+	    	        });
+	    		    // Call Petition function to fetch the data
+	    		    get_petition_data();
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			 
+	        /* Get Petition Type Data */
+	        function get_petition_type_data(){
+	        	var petitionTypeHTML="";
+	    		get_petition_type_list().then(function(petitionTypes) {
+	    		    // Handle the Complaint list
+	    		    petitionTypeList = petitionTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(petitionTypeList, function(index, petitionType) {
+	    	            // Create an option element
+	    	            
+	    	            petitionTypeHTML +=`<div class="radio radiofill ${petitionType.color_class} radio-inline">
+						                            <label class="cursure_poiter">
+						                            <input type="radio" name="petitionType" id="petition_type_${petitionType.petition_type_id}" value="${petitionType.petition_type_id}" disable>
+						                            <i class="helper"></i>${petitionType.name}
+						                        </label>
+						                    </div>`;
+	    	        });
+	    		 // Append the option to the select element
+    	         $('#petition_type').html(petitionTypeHTML);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching petition type list:', error);
+	    		});
+			}
+	        
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+			 
+	     	// Function to get complaint_type and complaint_typeid by complaint_typeid
+	        function getComplaintTypeById(complaintTypeId) {
+	            for (var i = 0; i < complaintTypeList.length; i++) {
+	                if (complaintTypeList[i].complaint_typeid == complaintTypeId) {
+	                    return {
+	                        complaint_type: complaintTypeList[i].complaint_type,
+	                        complaint_typeid: complaintTypeList[i].complaint_typeid
+	                    };
+	                }
+	            }
+	            return null; // Return null if no matching complaint_typeid is found
+	        }
+	     
+			// Save New petition 
+			function updateRequest(){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var inputElementMobileNo = $('#petitionerMobile');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementComplaintType = $('#complaintType');
+				var complaintType = inputElementComplaintType.val();
+				
+				if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#update-request-form')[0]);
+			        formData.append('petitionNo',petitionNo);
+			        formData.append('createdBy',createdBy);
+			        formData.append('petitionId',petitionId);
+			        updateFormData(formData).then(function(response) {
+		    		    // Handle the response
+		    		    if(response==true){
+							// Delete Old data in Petition Mapping table
+		    		    	savePetitionMapData(formData).then(function(response) {
+		    		    		if(response==true){
+		    		    			Swal.fire({
+				        				title: 'Petition updated successfully!',
+				        				customClass: {
+				        			        title: 'swal-title-custom' // Add a custom class for the title
+				        			    },
+				        				//text: "Error",
+				        				icon: 'success',
+				        				showCancelButton: false,
+				        				confirmButtonColor: '#3085d6',
+				        				cancelButtonColor: '#d33',
+				        				confirmButtonText: 'Ok',
+				        				}).then(function(result) {
+				        				if (result.isConfirmed) {
+				        					form_btn_enable();
+				        				}
+				        			});
+		    		    		}
+		    		    		else{
+		    		    			Swal.fire({
+				        				title: 'Petition details have been updated, but mapping the complaint to the officer has failed.',
+				        				customClass: {
+				        			        title: 'swal-title-custom' // Add a custom class for the title
+				        			    },
+				        				//text: "Error",
+				        				icon: 'warning',
+				        				showCancelButton: false,
+				        				confirmButtonColor: '#3085d6',
+				        				cancelButtonColor: '#d33',
+				        				confirmButtonText: 'Ok',
+				        				}).then(function(result) {
+				        				if (result.isConfirmed) {
+				        					form_btn_enable();
+				        				}
+				        			});
+								}
+		    		    	}).catch(function(error) {
+		    	    		    // Handle errors
+		    	    		    console.error('Error fetching offcier master data:', error);
+		    	    		    form_btn_enable();
+		    	    		});
+		    		    	
+						}
+		    		    else{
+		    		    	Swal.fire({
+		        				title: 'Failed to update petition details!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+	    		    	
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					inputElementMobileNo.addClass('is-invalid');
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function updateFormData(formData){
+				var apiUrl = '/gcc/api/com_petition/updatePetition';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function savePetitionMapData(formData){
+				var apiUrl = '/gcc/api/com_petition/mapComplientToOfficer';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint;
+					petitionId = petitionDetails[0].petition_id;
+					var complaintArray = complaint.split(",");
+					$("#complaintType").val(complaintArray);
+					
+					$('#complaintType').trigger('change');
+					
+					closedComplaintsList = complaintArray;
+					var petition_type = "#petition_type_"+petitionDetails[0].petition_type;
+					// Suppose you want to select the radio button with the value 'option2'
+					$(petition_type).prop('checked', true);
+
+					$("#petitionerName").val(petitionDetails[0].petitioner_name);
+					$("#petitionerMobile").val(petitionDetails[0].petitioner_mobile);
+					$("#petitionerAddress").val(petitionDetails[0].petitioner_address);
+					$("#petitionerPincode").val(petitionDetails[0].petitioner_pincode);
+					
+					$("#complaintNature").val(petitionDetails[0].complaint_nature);
+					
+					$("#remarks").val(petitionDetails[0].remarks);
+					
+					//load_mapper(); // Call for Complaint Mapping Form
+					
+					// IDs of the values you want to prevent from being deselected
+					var valuesToPreventDeselection = closedComplaintsList;//['value1', 'value2', 'value3'];
+
+					$('#complaintType').on('select2:unselect', function (e) {
+					    var deselectedValue = e.params.data.id;
+					    
+					    // Check if the deselected value should be prevented from being deselected
+					    if (valuesToPreventDeselection.includes(deselectedValue)) {
+					        // Prevent the deselection
+					        e.preventDefault();
+					    	// Re-select the deselected value to prevent it from being deselected
+					        $(this).val(valuesToPreventDeselection).trigger('change.select2');
+					        // Optionally, you can display a message or perform any other action
+					        console.log('Deselection of value ' + deselectedValue + ' prevented');
+					        alert('Deselection of value ' + deselectedValue + ' prevented');
+					    }
+					});
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition Data ('+petitionNo+'):', error.message);
+				    call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			function get_petition_details() {
+			    
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/com_petition/getPetitionDetails?petitionNo='+petitionNo;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			function load_mapper(){
+			  	var complaintArray = $("#complaintType").val();
+			  	//var complaintArray = complaint.split(',');
+				var compPetitionNo = petitionNo;
+				var compPetitionId = petitionId;
+				
+				var compmapHTML='';
+				for(j = 0; j < complaintArray.length; j++){
+					var complaintTypeDetails = getComplaintTypeById(complaintArray[j]); // Pass the complaint_typeid
+					var title=(j+1)+') '+ complaintTypeDetails.complaint_type; // Map form title
+					var compID="comp"+j;
+					var complaintTypeId = complaintTypeDetails.complaint_typeid;
+					
+					getMappingByComplaintsID(complaintTypeId);
+					
+					compmapHTML+=`<div class="col-lg-6" id="comp${complaintArray[j]}">
+										
+										<div class="widget">
+					                        <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                            <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+					                        </div>
+					                        <div class="widget-body">
+					                        	<div class="form-group">
+						                        	<label for="dept${complaintArray[j]}">Select Department Type</label>
+													<select name="dept[]" id="dept${complaintArray[j]}" class="form-control" onchange="javascript:calloffice(this.value,${complaintArray[j]})">
+														<option value="0">Select Department</option>
+														<option value="1">GCC Department</option>
+														<option value="2">External Department</option>
+												    </select>
+												</div>
+												<div id="officedata${complaintArray[j]}"></div>
+												<div id="officers${complaintArray[j]}"></div>
+					                        </div>
+					                    </div>
+									
+								  </div>`;
+						
+				}
+				$('#comp_mapping_to_officers').html(compmapHTML);
+				
+			  }
+			
+		</script>
+		
+		<script>
+		// For Complient Map Select HTML 
+		function calloffice(val,id){
+			if(val==1){ // Intenal
+				var officeSelectHTML = `<div class="mb-4">
+                							<label for="office${id}">Select Office</label>
+                							<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})">
+								                <option value="0">Select Office</option>
+								                <option value="1">HQ</option>
+								                <option value="2">Zonal Office</option>
+						                	</select>
+					                	</div>`;
+				$("#officedata"+id).html(officeSelectHTML);
+			}
+			else if(val==2){ // External
+				$("#officers"+id).html('');
+				var ExSelectHTML = getselect(id,"ExSelect");
+				var departmentSelectHTML = `<div class="mb-4">
+												<label for="dept3">Select Department</label>
+												${ExSelectHTML}
+										 	</div>`;
+				$("#officedata"+id).html(departmentSelectHTML);
+			}
+			else{
+				$("#officedata"+id).html('');
+				$("#officers"+id).html('');
+			}
+			$("#officers"+id).html('');
+		}
+		
+		function callofficers(val,id){
+			
+			if(val==1){
+				// HQ
+				var HQSelectHTML = getselect(id,"HQSelect");
+			 	$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`);
+			}
+			else if(val==2){
+				// Zone Office
+				var ZoneSelectHTML = getselect(id,"ZoneSelect");
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`);
+			}
+			else{
+				$("#officers"+id).html('');
+			}
+			
+		}
+		
+		function getselect(comid,type){
+	  	  var HQSelect = '';
+	  	  var ZoneSelect = '';
+	  	  var ExSelect = '';
+	  
+	  	  for (var i = 0; i < officerMasterList.length; i++) {
+	  		  if(officerMasterList[i].zone_id=="HQ"){
+	  			  HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  		  else if(officerMasterList[i].zone_id=="99"){
+	  			  ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  		  else{
+	  			  ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  	  }
+	  	  
+	  	  if(type=="HQSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>`;
+	  	  }
+	  	  if(type=="ZoneSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>`;
+	  	  }
+	  	  if(type=="ExSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>`;
+	  	  }
+	  	  return '';
+		}
+		
+		function form_btn_enable(){
+			$("#resetFormBtn").prop("disabled", false);
+			$("#requestSubmitBtn").prop("disabled", false);
+			$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+		}
+		
+		function form_btn_disable(){
+			$("#resetFormBtn").prop("disabled", true);
+			$("#requestSubmitBtn").prop("disabled", true);
+			// Show the loading icon on the button
+			$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+		}
+		
+		function getMappingByComplaintsID(complaintTypeId){
+				
+				$.ajax({
+				    type: "GET",
+				    url: '/gcc/api/com_petition/getComplaintMappingDetails',
+				    data: {
+				        'petitionId': petitionId,
+						'petitionNo': petitionNo,
+						'complaintTypeId': complaintTypeId
+				    },
+					dataType: 'json',
+				}).done(function(response) {
+					
+					//console.log(response);
+					
+					if(response.length>0){
+						var comid = response[0]["complaint_typeid"];
+						var offid = response[0]["off_id"];
+						var mapid = response[0]["mapid"];
+						loadSelectforUpdate(comid,offid,comid);
+					}
+					
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+						
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+					    
+				});
+		}
+		
+		function loadSelectforUpdate(comid,offid,id){
+			var type ="NULL";
+	  	  	var HQSelect = '';
+	  	  	var ZoneSelect = '';
+	  	  	var ExSelect = '';
+	  
+			for (var i = 0; i < officerMasterList.length; i++) {
+		  		//console.log(officerMasterList[i]);
+				if(officerMasterList[i].zone_id=="HQ"){
+			  
+				  	if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "HQSelect";
+				  		HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+				  	}
+				  	else{
+				  		HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+				  	}
+					  
+				}
+				else if(officerMasterList[i].zone_id=="99"){
+					if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "ExSelect";
+						ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+		  			}
+		  			else{
+		  				ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  			}
+				}
+				else{
+					if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "ZoneSelect";
+						//console.log(type + " === "+ officerMasterList[i].offId +" == "+ offid);
+						ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+				  	}
+				  	else{
+				  		ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+				  	}  
+				}
+			}  
+			
+			//console.log("comid : "+comid +",\noffid : "+offid+",\nid : "+id+",\ntype : "+type);
+			
+			if(type=="HQSelect"){
+				//console.log("I am from HQSelect: \n #officers"+id);
+				$("#officedata"+id).html('<div class="mb-4">' +
+				           '<label for="office$'+id+'">Select Office</label>' +
+				           '<select name="office[]" id="office$'+id+'" class="form-control" onchange="javascript:callofficers(this.value,'+id+')">' +
+				           '<option value="0">Select Office</option>' +
+				           '<option value="1" Selected>HQ</option>' +
+				           '<option value="2">Zonal Office</option>' +
+				           '</select>' +
+				           '</div>');
+			  	 HQSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>`;
+		 		$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${HQSelectHTML}</div>`);
+		 
+			}
+			if(type=="ZoneSelect"){
+				//console.log("I am from ZoneSelect: \n #officers"+id);
+				$("#officedata"+id).html('<div class="mb-4">' +
+				           '<label for="office$'+id+'">Select Office</label>' +
+				           '<select name="office[]" id="office$'+id+'" class="form-control" onchange="javascript:callofficers(this.value,'+id+')">' +
+				           '<option value="0">Select Office</option>' +
+				           '<option value="1">HQ</option>' +
+				           '<option value="2" Selected>Zonal Office</option>' +
+				           '</select>' +
+				           '</div>');
+				  
+				ZoneSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>`;
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${ZoneSelectHTML}</div>`);
+			}
+			if(type=="ExSelect"){
+				//console.log("I am from ExSelect: \n #officers"+id);
+				ExSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>`;
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${ExSelectHTML}</div>`);
+			}
+		 
+		}
+		
+		function call_petition_search_from(errorTXT){
+			var errorHTML = "";
+			if(errorTXT!=""){
+				errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`;
+			}
+			var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();">
+										<div class="card-header">
+						                <h3>Edit / Update Petition Form</h3>
+						                <div class="card-header-right">
+						                    <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+						                </div>
+						            </div>
+						       		<div class="card-body">
+						       			<div class="row">
+											<div class="col-12 text-center">
+												${errorHTML}
+												<div class="form-group">
+						                            <label for="petitionNoSearch">Petition No / மனு எண் </label>
+						                            <input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="COM00000000" maxlength="11" required>
+						                        </div>
+						                        
+											</div>
+											<div class="col-12">
+												<div class="block-content" id="userinfo2">
+													<div id="comp_mapping_to_officers" class="row"></div>
+												</div>
+										 	</div>
+										</div>
+						          	</div>
+						          	<div class="card-footer text-center">
+										<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+						            	<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button>
+						        	</div>
+						    	</form>`;
+			
+			$("#petitionUpdateForm").html(searchFormHTML);
+			$('#petitionNoSearch').mask('COM00000000');
+		}
+		
+		function searchRequest(){
+			var searchValue = $('#petitionNoSearch').val();
+			if (searchValue && searchValue.trim() !== '') {
+				searchValue = encodeBase64(searchValue);
+				window.location.href = "/gcc/com_petition/update-petition?petitionNo="+searchValue;
+			}
+			else{
+				call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+			}
+			return false;
+		}
+		</script>
+		<script>
+		$(document).ready(function() {
+			
+			if(petitionNo!=null && petitionNo!="error"){
+				get_complaint_type_data();
+				get_petition_type_data();
+				get_officer_master_data();
+			}
+			else{
+				if(petitionNo=="error"){
+					call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				}
+				else{
+					call_petition_search_from("");
+				}
+			}
+			
+		});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/com_petition/petition_view.html b/target/classes/templates/modules/com_petition/petition_view.html
new file mode 100644
index 0000000..41c32ce
--- /dev/null
+++ b/target/classes/templates/modules/com_petition/petition_view.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>View Petition</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">View Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card mb-0" id="petitionViewtable">
+					             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+					                	<h3>Petition Details</h3>
+					                	<div class="card-header-right text-center block-options pt-10" style="padding-right: 20px;">
+									        <a href="javascript:void(0);" onclick="window.print()" class="link"><i class="ik ik-printer"></i> Print</a>
+									    </div>
+					                </div>
+					                <div class="card-body">
+					                	<div class="row">
+											<div class="col-6">
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">நாள் / Date: </th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="cdate_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petition_no_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_name_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_mobile_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Address of petitioner / மனுதாரரின் முகவரி:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_address_value"></td>
+											        </tr>
+											        <tr>
+											          <th colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;">புகாரின் தன்மை / Nature of complaint:<br>
+											          <p class="fw-semibold mb-0" style="font-weight:normal;" id="complaint_nature_value"></p>
+											          </th>
+											        </tr>
+											        <tr>
+											        	<td colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;" id="complaint_with_maping_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+											</div>
+											
+											<div class="col-6">
+												
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											      	<tr>
+											          <th style="padding: 0.45rem 0.45rem;">Petition Status: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_status_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total number of complaints in this petition: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Completed:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_completed_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Pending:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_pending_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+												
+												
+												<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th id="petition_summary_title">Pending Summary</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+									                	<tr style="background-color:#fbffe0;">
+												          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_summary_html"></td>
+												        </tr>
+								                	</tbody>
+								              	</table>
+								              	
+											</div>
+										</div>
+										<div class="row">
+											
+											<div class="col-12">
+												<div class="card-title">List of Complaints in this Petition and Their Status:</div>
+												<div id="listOfComplaintsHTML"></div>
+											</div>
+										</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 th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+        <script th:replace="~{fragments/modules/com_petition/petition_view_script :: script}"></script>
+       	
+    </body>
+</html>
diff --git a/target/classes/templates/modules/com_petition/petition_view_modal_page.html b/target/classes/templates/modules/com_petition/petition_view_modal_page.html
new file mode 100644
index 0000000..ceba147
--- /dev/null
+++ b/target/classes/templates/modules/com_petition/petition_view_modal_page.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+        
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card mb-0" id="petitionViewtable">
+					             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+					                	<h3>Petition Details</h3>
+					                	<div class="card-header-right text-center block-options pt-10" style="padding-right: 20px;">
+									        <a href="javascript:void(0);" onclick="window.print()" class="link"><i class="ik ik-printer"></i> Print</a>
+									    </div>
+					                </div>
+					                <div class="card-body">
+					                	<div class="row">
+											<div class="col-6">
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">நாள் / Date: </th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="cdate_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petition_no_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_name_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_mobile_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">மனுதாரரின் முகவரி / Address of petitioner:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_address_value"></td>
+											        </tr>
+											        <tr>
+											          <th colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;">புகாரின் தன்மை / Nature of complaint:<br>
+											          <p class="fw-semibold mb-0" style="font-weight:normal;" id="complaint_nature_value"></p>
+											          </th>
+											        </tr>
+											        <tr>
+											        	<td colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;" id="complaint_with_maping_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+											</div>
+											
+											<div class="col-6">
+												
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											      	<tr>
+											          <th style="padding: 0.45rem 0.45rem;">Petition Status: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_status_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total number of complaints in this petition: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Completed:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_completed_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Pending:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_pending_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+												
+												
+												<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th id="petition_summary_title">Pending Summary</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+									                	<tr style="background-color:#fbffe0;">
+												          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_summary_html"></td>
+												        </tr>
+								                	</tbody>
+								              	</table>
+								              	
+											</div>
+										</div>
+										<div class="row">
+											
+											<div class="col-12">
+												<div class="card-title">List of Complaints in this Petition and Their Status:</div>
+												<div id="listOfComplaintsHTML"></div>
+											</div>
+										</div>
+					                </div>
+					            </div>
+                            </div>
+                            
+                        </div>
+                        
+        <script th:replace="~{fragments/modules/com_petition/script :: script}"></script>
+       	<script th:replace="~{fragments/modules/com_petition/petition_view_script :: script}"></script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/m_petition/complaint_list.html b/target/classes/templates/modules/m_petition/complaint_list.html
index d4023cb..0289ffd 100644
--- a/target/classes/templates/modules/m_petition/complaint_list.html
+++ b/target/classes/templates/modules/m_petition/complaint_list.html
@@ -176,7 +176,7 @@
 	        
 	        /* Get Complaints Data */
 	        function get_complaint_data(){
-	        	var apiUrl = '/gcc/api/m_petition/getComplaintList';
+	        	var apiUrl = '/gcc/api/m_petition/getComplaintList?loginId='+createdBy;
 	    	    // Return a Promise
 	    	    return new Promise(function(resolve, reject) {
 	    	        $.ajax({
@@ -352,7 +352,11 @@
 													                <thead>
 													                  <tr>
 													                    <th>Complaint <i class="fa fa-arrow-right"></i> Status</th>
-													                    <th class="text-right" id="complaint_forward_link"><a href="javascript:void(0);" onclick="return forward_compliant(${complaintDetails[0].mapid}, '${complaintDetails[0].complaint_type}');" class="link" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Click here to forward this complaint to another department officer."><i class="far fa-share-square"></i> Click to forward </a></th>
+													                    <th class="text-right" id="complaint_forward_link">
+													                    <!--
+													                    <a href="javascript:void(0);" onclick="return forward_compliant(${complaintDetails[0].mapid}, '${complaintDetails[0].complaint_type}');" class="link" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Click here to forward this complaint to another department officer."><i class="far fa-share-square"></i> Click to forward </a>
+													                    -->
+													                    </th>
 													                  </tr>
 													                </thead>
 												                	<tbody>
diff --git a/target/classes/templates/modules/nulm/appointment.html b/target/classes/templates/modules/nulm/appointment.html
new file mode 100644
index 0000000..402290b
--- /dev/null
+++ b/target/classes/templates/modules/nulm/appointment.html
@@ -0,0 +1,485 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Appointment</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 active" aria-current="page">Appointment</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row align-items-center justify-content-center"
+						style="color: white;background-color:#414f69 ;padding: 10px;">
+						<h3 class="title resizable-content">Appoinment</h3>
+					</div>
+
+
+
+					<!-- Card Section -->
+					<div class="card mt-5 p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
+
+
+						<!-- Add the resizable-content class to the card sections -->
+						<div class="card mb-3 resizable-content">
+
+							<div class="card-body">
+								<div class="row">
+									<div class="col-md-6 d-flex justify-content-between align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69;">Order:</label>
+										<select id="orderNumberDropdown" class="form-control"
+											style="font-size: large; width: 70%;">
+											<option value="">Select Order</option>
+										</select>
+									</div>
+								</div>
+
+								<div class="mt-3" id="orderDetails" style="display: none;">
+									<div class="card-block" style="text-align:center;">
+										<div id="chart" class="row">
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">Total Staff</h5>
+														<p class="card-text" id="total"
+															style="font-size:large; font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">Appointed</h5>
+														<p class="card-text" id="pending"
+															style="font-size: large;font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">Available
+														</h5>
+														<p class="card-text" id="notappointed"
+															style="font-size: large;font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<br>
+								<div class="row" id="groupboxsection" style="display:none">
+									<div class="col-md-6 d-flex justify-content-between align-items-center">
+
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69;">Self Help Group:</label>
+										<select id="grouplist" class="form-control"
+											style="font-size: large; width: 70%;">
+											<option value="">Select Group</option>
+										</select>
+									</div>
+								</div>
+
+								<!-- Appointment Date Section (Initially Hidden) -->
+								<div class="row mt-3" id="appointmentSection" style="display: none;">
+									<div class="col-md-6 d-flex align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Appointment
+											Date:</label>
+										<input type="date" id="appointmentDate" class="form-control"
+											style="font-size: large; width: 70%;">
+									</div>
+								</div>
+
+								<!-- Orders Table Section (Initially Hidden) -->
+								<div class="row mt-3" id="ordersTableSection" style="display: none;">
+									<div class="col-md-12">
+										<table class="table table-bordered">
+											<thead>
+												<tr>
+													<th style="width: 10%;">
+														<input type="checkbox" id="selectAll">
+													</th>
+													<th style="width: 30%;">Name</th>
+													<th style="width: 30%;">Phone Number</th>
+													<th style="width: 30%;">Address</th>
+													<th style="width: 30%;">Education Qualification</th>
+												</tr>
+											</thead>
+											<tbody id="ordersTableBody">
+												<!-- Table rows will be populated here -->
+											</tbody>
+										</table>
+									</div>
+								</div>
+								<div class="row mt-3" id="inchargemobilenosection" style="display: none;">
+									<div class="col-md-6 d-flex align-items-center">
+										<label style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Designation:</label>
+										<select id="designation" class="form-control"
+											style="font-size: large; width: 70%;">
+											<option value="">Select Designation</option>
+											<option>CI</option>
+											<option>Software Developer</option>
+										</select>
+									</div>
+									<div class="col-md-6 d-flex align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Incharge
+											Mobileno:</label>
+										<input type="text" id="inchargemobileno" class="form-control"
+											style="font-size: large; width: 70%;">
+									</div>
+									<div class="col-md-6 d-flex align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">Incharge
+											Name:</label>
+										<input type="text" id="inchargeName" class="form-control"
+											style="font-size: large; width: 70%;">
+									</div>
+								</div>
+
+							</div>
+						</div>
+						<div class="d-flex justify-content-center">
+							<button class="btn"
+								style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								id="createorder">
+								Create Appointment
+							</button>
+						</div>
+
+					</div>
+
+
+
+
+				</div>
+
+
+
+			</div>
+
+
+		
+		<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+	</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+	<script th:inline="javascript">
+
+
+
+		$(document).ready(function () {
+			// Function to load scheme group names
+			function loadSchemeGroupNames() {
+				$.ajax({
+					url: '/gcc/api/nulm/getAllSchemeGroupNames', // Endpoint URL
+					method: 'GET',
+					dataType: 'json',
+					success: function (data) {
+						// Get the dropdown element
+						var $dropdown = $('#schemeGroupDropdown');
+						// Clear existing options
+						$dropdown.empty();
+						// Add the default option
+						$dropdown.append('<option value="">Select Scheme Group</option>');
+						// Populate the dropdown with scheme group names
+						$.each(data, function (index, value) {
+							$dropdown.append('<option value="' + value + '">' + value + '</option>');
+						});
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching scheme group names:', error);
+					}
+				});
+			}
+
+			// Load the scheme group names when the document is ready
+			loadSchemeGroupNames();
+		});
+
+$(document).ready(function () {
+    // Function to load scheme group names
+    function loadNotappointed() {
+        $.ajax({
+            url: '/gcc/api/nulm/getAllSchemeGroupNames', // Endpoint URL
+            method: 'GET',
+            dataType: 'json',
+            success: function (data) {
+                var $dropdown = $('#grouplist');
+                $dropdown.empty();
+                $dropdown.append('<option value="">Select Group</option>');
+                $.each(data, function (index, group) {
+                    $dropdown.append('<option value="' + group.group_id + '">' + group.group_name + '</option>');
+                });
+            },
+            error: function (xhr, status, error) {
+                console.error('Error fetching scheme group names:', error);
+            }
+        });
+    }
+
+    // Load the scheme group names when the document is ready
+    loadNotappointed();
+
+    $('#grouplist').change(function () {
+        var groupId = $(this).val();
+
+        if (groupId) {
+            $.ajax({
+                url: '/gcc/api/nulm/enrollmentCountsbygroupId',
+                method: 'GET',
+                data: { groupId: groupId },
+                dataType: 'json',
+                success: function (data) {
+                    console.log("data==", data);
+                    function getTodayDate() {
+				return new Date().toISOString().split('T')[0];
+			}
+
+                    var $ordersTableBody = $('#ordersTableBody');
+                    $ordersTableBody.empty();
+                    $('#appointmentSection').show();
+					$('#inchargemobilenosection').show();
+					$('#appointmentDate').val(getTodayDate());
+
+                    if (data.length > 0) {
+                        $.each(data, function (index, enrollment) {
+                            var row = '<tr>' +
+                                '<td><input type="checkbox" class="form-check-input order-checkbox" name="selectRow" value="' + enrollment.enrollment_id + '" style="margin-left:0px"></td>' +
+                                '<td>' + enrollment.name + '</td>' +
+                                '<td>' + enrollment.phone_number + '</td>' +
+                                '<td>' + enrollment.address + '</td>' +
+                                '<td>' + enrollment.education_qualification + '</td>' +
+                                '</tr>';
+                            $ordersTableBody.append(row);
+                        });
+                        $('#ordersTableSection').show();
+                    } else {
+                        $ordersTableBody.append('<tr><td colspan="5">No enrollments found.</td></tr>');
+                        $('#ordersTableSection').show();
+                    }
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error fetching enrollment counts:', error);
+                }
+            });
+        } else {
+            $('#ordersTableSection').hide(); // Hide the table if no group is selected
+            $('#appointmentSection').hide();
+			$('#inchargemobilenosection').hide();
+        }
+        
+        			$('#selectAll').click(function () {
+				var isChecked = $(this).is(':checked');
+				$('.order-checkbox').prop('checked', isChecked);
+			});
+
+			// Optionally, if you want to uncheck the "Select All" checkbox when any individual checkbox is unchecked
+			$(document).on('click', '.order-checkbox', function () {
+				if (!$(this).is(':checked')) {
+					$('#selectAll').prop('checked', false);
+				} else if ($('.order-checkbox:checked').length === $('.order-checkbox').length) {
+					$('#selectAll').prop('checked', true);
+				}
+			});
+    });
+});
+
+
+
+$(document).ready(function() {
+    // Function to load order details
+    function loadOrderDetails() {
+        $.ajax({
+            url: '/gcc/api/nulm/getAllOrderDetails', // Updated Endpoint URL
+            method: 'GET',
+            dataType: 'json',
+            success: function(data) {
+                var $dropdown = $('#orderNumberDropdown');
+                $dropdown.empty();
+                $dropdown.append('<option value="">Select Order</option>');
+                $.each(data, function(index, order) {
+                    $dropdown.append('<option value="' + order.order_id + '">' + order.order_number + '</option>');
+                });
+            },
+            error: function(xhr, status, error) {
+                console.error('Error fetching order details:', error);
+            }
+        });
+    }
+
+    // Load order details when the document is ready
+    loadOrderDetails();
+
+    // Handle order number selection
+    $('#orderNumberDropdown').change(function() {
+        var orderId = $(this).val();
+        var $orderDetails = $('#orderDetails');
+        var $groupBoxSection = $('#groupboxsection');
+
+        if (orderId) {
+            // Display the order details and group section
+            $orderDetails.show();
+            $groupBoxSection.show();
+
+            // Fetch the enrollment counts based on the selected order ID
+            $.ajax({
+                url: '/gcc/api/nulm/enrollmentCountsbyorderId',
+                method: 'GET',
+                data: { orderId: orderId },
+                dataType: 'json',
+                success: function(counts) {
+                    // Update the values in the cards
+                    $('#total').text(counts.total_count || 0);
+                    $('#pending').text(counts.total_yes || 0);
+                    $('#notappointed').text(counts.output_value || 0);
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error fetching enrollment counts:', error);
+                }
+            });
+        } else {
+            // Hide the order details and group section if no order is selected
+            $orderDetails.hide();
+            $groupBoxSection.hide();
+        }
+    });
+});
+
+		$(document).ready(function () {
+			// Function to load scheme group names
+			function loadStaffName() {
+				$.ajax({
+					url: '/gcc/api/nulm/getAllStaffNames', // Endpoint URL
+					method: 'GET',
+					dataType: 'json',
+					success: function (data) {
+						// Get the dropdown element
+						var $dropdown = $('#staffNameDropdown');
+						// Clear existing options
+						$dropdown.empty();
+						// Add the default option
+						$dropdown.append('<option value="">Select Staff Name</option>');
+						// Populate the dropdown with scheme group names
+						$.each(data, function (index, value) {
+							$dropdown.append('<option value="' + value + '">' + value + '</option>');
+						});
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching scheme group names:', error);
+					}
+				});
+			}
+
+			// Load the scheme group names when the document is ready
+			loadStaffName();
+		});
+$(document).ready(function () {
+    $('#createorder').click(function () {
+        var totalstaff = parseInt($('#total').text(), 10); // Convert total staff to an integer
+        var selectedEnrollments = [];
+        var orderId = parseInt($('#orderNumberDropdown').val(), 10); // Ensure orderId is an integer
+        var inchargePhoneno = $('#inchargemobileno').val(); // Get the in-charge mobile number
+        var designation = $('#designation').val(); // Get the designation
+        
+        $('.order-checkbox:checked').each(function () {
+            selectedEnrollments.push(parseInt($(this).val(), 10)); // Ensure enrollmentIds are integers
+        });
+
+        if (selectedEnrollments.length > totalstaff) {
+            // Show SweetAlert if the number of selected enrollments exceeds the total staff count
+            Swal.fire({
+                icon: 'warning',
+                title: 'Limit Exceeded',
+                text: `For this order, only ${totalstaff} staff members are allowed.`
+            });
+        } else {
+            // Proceed with the order creation logic
+            $.ajax({
+                url: '/gcc/api/nulm/assignAppointment',
+                method: 'POST',
+                contentType: 'application/json', // Set the content type to JSON
+                data: JSON.stringify({
+                    enrollmentIds: selectedEnrollments,
+                    orderId: orderId,
+                    incharge_phoneno: inchargePhoneno, // Include the in-charge mobile number
+                    designation: designation // Include the designation
+                }), // Convert the data to JSON string
+                success: function(response) {
+                    // Show SweetAlert on success
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Order Created',
+                        text: 'The order has been successfully created.',
+                        confirmButtonText: 'OK'
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            // Reload the page after SweetAlert is confirmed
+                            location.reload();
+                        }
+                    });
+                },
+                error: function(xhr, status, error) {
+                    // Show error message using SweetAlert
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'An error occurred while creating the order. Please try again later.'
+                    });
+                    console.error('Error creating order:', error);
+                }
+            });
+        }
+    });
+});
+</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/attendance-report.html b/target/classes/templates/modules/nulm/attendance-report.html
new file mode 100644
index 0000000..cf3e56a
--- /dev/null
+++ b/target/classes/templates/modules/nulm/attendance-report.html
@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+
+<body>
+	<div class="wrapper">
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+			<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Attendance Report</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 active" aria-current="page">Attendance Report</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+
+					<!-- Filters Section -->
+					<div class="row">
+						
+						<div class="col-sm-3">
+							<label for="zone">Zone</label>
+							<select id="zone" class="form-control">
+								<option value="">Select</option>
+								<option value="1">Zone 01</option>
+								<option value="2">Zone 02</option>
+								<option value="3">Zone 03</option>
+								<option value="4">Zone 04</option>
+								<option value="5">Zone 05</option>
+								<option value="6">Zone 06</option>
+								<option value="7">Zone 07</option>
+								<option value="8">Zone 08</option>
+								<option value="9">Zone 09</option>
+								<option value="10">Zone 10</option>
+								<option value="11">Zone 11</option>
+								<option value="12">Zone 12</option>
+								<option value="13">Zone 13</option>
+								<option value="14">Zone 14</option>
+								<option value="15">Zone 15</option>
+							</select>
+						</div>
+						
+						<!-- Division -->
+						<div class="col-md-3 form-group">
+							<label for="division">Division</label>
+							<select class="form-control" id="division" name="division" required>
+								<option value="">Select Division</option>
+								<option th:each="division : ${divisionList}" th:value="${division.division}" th:text="${division.division}"
+									th:selected="${division.division == selectedDivision}">
+								</option>
+							</select>	
+						</div>
+						
+						<!-- Year -->
+						<!--<div class="col-md-3 form-group">
+							<label for="year">Year</label>
+							<select class="form-control" id="year" name="year" required>
+								<option value="">Select Year</option>
+								<option th:each="year : ${yearList}" th:value="${year.year}" th:text="${year.year}"
+									th:selected="${year.year == selectedYear}">
+								</option>
+							</select>
+						</div>
+						
+						 Month 
+						<div class="col-md-3 form-group">
+							<label for="month">Month</label>
+							<select id="month" class="form-control" name="month" required>
+								<option value="">Select Month</option>
+								<option th:each="month : ${monthList}" th:value="${month.month}" th:text="${month.month}"
+									th:selected="${month.month == selectedMonth}">
+								</option>
+							</select>
+						</div>-->
+
+						<div class="col-sm-3">
+							<label for="fromdate">From Date</label>
+							<input type ='date' id = 'fromdate' name= 'fromdate' class="form-control">
+						</div>
+						
+						<div class="col-sm-3">
+							<label for="todate">To Date</label>
+							<input type ='date' id = 'todate' name= 'todate' class="form-control">
+						</div>
+
+						<div class="col-sm-3">
+							<label for="selfhelp">Self Help Group </label>
+							<select id="selfhelp" class="form-control">
+								<option value="">Select</option>
+								<!-- Group names will be populated here -->
+							</select>
+						</div>
+
+
+
+						<div class="col-sm-3">
+
+							<button class="btn btn-primary mt-4" onclick="fetchAttendanceReport()">Get Attendance Details</button>
+						</div>
+					</div>
+
+					<!-- Salary Report Table -->
+					<div class="card-block mt-3">
+						<table id="attendancereporttable" class="table table-striped table-bordered">
+							<thead class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Date</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Attendance Status</th>
+									<th>Incharge Name</th>
+									<th>Incharge Mobile Number</th>
+									<th>Incharge Designation</th>
+									<th>Zone</th>
+									<th>Division</th>
+									<th>Department</th>
+									<th>Self Help Group</th>									
+								</tr>
+							</thead>
+							<tbody>
+								<tr th:each="attendance, i : ${attendanceReport}">
+									<td th:text="${i.count}">1</td>
+									<td th:text="${attendance.attendance_date}"></td>
+									<td th:text="${attendance.emp_id}"></td>
+									<td th:text="${attendance.name}"></td>
+									<td th:text="${attendance.attendance_status}"></td>
+									<td th:text="${attendance.incharge_name}"></td>
+									<td th:text="${attendance.incharge_phoneno}"></td>
+									<td th:text="${attendance.incharge_designation}"></td>
+									<td th:text="${attendance.zone}"></td>
+									<td th:text="${attendance.division}"></td>
+									<td th:text="${attendance.department}"></td>
+									<td th:text="${attendance.group_name}"></td>
+								</tr>
+							</tbody>
+							<tfoot class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Date</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Attendance Status</th>
+									<th>Incharge Name</th>
+									<th>Incharge Mobile Number</th>
+									<th>Incharge Designation</th>
+									<th>Zone</th>
+									<th>Division</th>
+									<th>Department</th>
+									<th>Self Help Group</th>
+								</tr>
+							</tfoot>
+						</table>
+					</div>
+
+				</div>
+			</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<div th:replace="~{fragments/modules/base/script :: script}"></div>
+
+	<script th:inline="javascript">
+		
+		/*function loadYear(selectedYear) {
+				$.ajax({
+					url: '/gcc/api/nulm/getYear',
+					type: 'GET',
+					success: function (response) {
+						const yearDropdown = $('#year');
+						yearDropdown.empty(); // Clear existing options
+						yearDropdown.append('<option value="">Select Year</option>');
+
+						response.forEach(function (year) {
+							const yearName = year.year; // Correct the attribute name if necessary
+							const isSelected = yearName === selectedYear ? 'selected' : '';
+							yearDropdown.append(new Option(yearName, yearName, false, isSelected));
+						});
+
+						// If no department selected, show "Select Zone"
+						if (!selectedYear) {
+							yearDropdown.val('');
+						}
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching departments:', error);
+					}
+				});
+			}*/
+
+
+			//const selectedYear = /*[[${selectedYear}]]*/ ''; // Get this from Thymeleaf or other server-side context
+			//loadYear(selectedYear);
+
+			/*function loadMonth(selectedMonth) {
+				const year = document.getElementById('year').value; // Get the selected year
+				if (!year) {
+					$('#month').empty().append('<option value="">Select Month</option>'); // Clear month dropdown if no year selected
+					return; // Exit if no year is selected
+				}
+
+				$.ajax({
+					url: `/gcc/api/nulm/getMonth?year=${year}`,
+					type: 'GET',
+					success: function (response) {
+						const monthDropdown = $('#month');
+						monthDropdown.empty(); // Clear existing options
+						monthDropdown.append('<option value="">Select Month</option>');
+
+						response.forEach(function (month) {
+							const monthName = month.month;
+							monthDropdown.append(new Option(monthName, monthName));
+						});
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching months:', error);
+					}
+				});
+			}
+
+			// Load months when the year changes
+			document.getElementById('year').addEventListener('change', function () {
+				loadMonth(); // Call loadMonth when the year is selected
+			});*/
+			
+			function loadDivision(selectedDivision) {
+				const zone=document.getElementById('zone').value;
+				console.log(zone);
+					$.ajax({
+						url: '/gcc/api/nulm/getDivisionList',
+						type: 'GET',
+						data: {
+							zone: zone
+						},
+						success: function (response) {
+							const divisionDropdown = $('#division');
+							divisionDropdown.empty(); // Clear existing options
+							divisionDropdown.append('<option value="">Select Division</option>');
+
+							response.forEach(function (division) {
+								const divisionName = division.division; // Correct the attribute name if necessary
+								const isSelected = divisionName === selectedDivision ? 'selected' : '';
+								divisionDropdown.append(new Option(divisionName, divisionName, false, isSelected));
+							});
+
+							// If no department selected, show "Select Zone"
+							if (!selectedDivision) {
+								divisionDropdown.val('');
+							}
+						},
+						error: function (xhr, status, error) {
+							console.error('Error fetching zone:', error);
+						}
+					});
+				}
+				
+				// Load division when zone selected
+			document.getElementById('zone').addEventListener('change', function () {
+			loadDivision(); // Call loadDivision when the zone is selected
+			});
+
+
+
+		function fetchAttendanceReport() {
+			const zone=document.getElementById('zone').value;
+			const division=document.getElementById('division').value;
+			//const month = document.getElementById('month').value;
+			//const year = document.getElementById('year').value;
+			const groupName=document.getElementById('selfhelp').value;
+			const fromdate=document.getElementById('fromdate').value;
+			const todate=document.getElementById('todate').value;
+			console.log(fromdate);
+			console.log(todate);			
+			
+
+			if (fromdate && todate) {
+				//window.location.href = `/gcc/nulm/attendance-report?month=${month}&year=${year}&groupName=${groupName}&zone=${zone}
+				//&division=${division}`;
+				window.location.href = `/gcc/nulm/attendance-report?groupName=${groupName}&zone=${zone}&division=${division}&fromdate=${fromdate}
+				&todate=${todate}`;
+			} else {
+				alert("Please select both From date and To date.");
+			}
+		}
+		$(document).ready(function () {
+
+			function clearUrlParams() {
+				const currentUrl = window.location.href;
+				const urlWithoutParams = currentUrl.split('?')[0]; // Remove the query parameters
+				window.history.replaceState({}, document.title, urlWithoutParams); // Replace the current URL without params
+			}
+
+			// Call this on page load to reset the URL
+			clearUrlParams();
+
+			// Initialize DataTable
+			var table = $('#attendancereporttable').DataTable({
+				dom: 'Bftip',
+				columnDefs: [
+					{targets: 'no-sort', orderable: false}
+				],
+				lengthMenu: [
+					[50, 100, 200, 500, -1],
+					['50 rows', '100 rows', '200 rows', 'Show all']
+				],
+				scrollY: '50vh',
+				fixedColumns: {
+					left: 1,
+					right: 1
+				},
+				buttons: [
+					{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+					{
+						title: 'Data export',
+						extend: 'copyHtml5',
+						text: 'Copy',
+						className: 'btn btn-secondary',
+						id: 'copyBtn'
+					},
+					{
+						extend: 'pdfHtml5',
+						text: 'PDF',
+						className: 'btn btn-secondary',
+						id: 'pdfBtn',
+						exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+                },
+                orientation: 'landscape', // Change to landscape for more horizontal space
+						pageSize: 'A4', // You can change to A4 or A3 depending on your needs
+						customize: function (doc) {
+							// Custom column widths for better fit
+							doc.content[1].table.widths = ['4%', '8%', '6%', '8%', '6%', '8%', '8%', '8%', '4%', '8%', '8%', '8%'];
+							
+							// Optional: Adjust font size if needed
+							doc.styles.tableBodyEven.alignment = 'center';
+							doc.styles.tableBodyOdd.alignment = 'center';
+						}
+					},
+					{
+						extend: 'excelHtml5',
+						text: 'EXCEL',
+						className: 'btn btn-secondary',
+						id: 'excelBtn'
+					},
+					{
+						extend: 'csvHtml5',
+						text: 'CSV',
+						className: 'btn btn-secondary',
+						id: 'csvBtn'
+					}
+				],
+				fixedHeader: true,
+				autoWidth: true,
+				responsive: true,
+				searching: true,
+				select: false,
+				processing: false
+			});
+
+
+		});
+		$(document).ready(function () {
+			$.ajax({
+				url: '/gcc/api/nulm/selfHelpGroups', 
+				type: 'GET',
+				success: function (data) {
+					// Clear existing options (if any)
+					$('#selfhelp').empty().append('<option value="">Select</option>');
+
+					// Check if data is an array and iterate through it
+					if (Array.isArray(data)) {
+						let options = '';
+						data.forEach(function (group) {
+							// Access the correct properties
+							options += `<option value="${group.groupName}">${group.groupName}</option>`;
+						});
+						$('#selfhelp').append(options);
+					} else {
+						console.error("Data is not an array:", data);
+					}
+				},
+				error: function (xhr, status, error) {
+					console.error("Error fetching self-help groups:", error);
+				}
+			});
+		});
+
+
+
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/create-order.html b/target/classes/templates/modules/nulm/create-order.html
new file mode 100644
index 0000000..78e068e
--- /dev/null
+++ b/target/classes/templates/modules/nulm/create-order.html
@@ -0,0 +1,425 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}">
+	<style>
+		label {
+			font-weight: 700;
+			color: #2d5263;
+		}
+
+		
+		.custom-file-upload {
+			position: relative;
+			display: flex;
+			align-items: center;
+			border: 1px solid #d9dde4;
+			border-radius: 5px;
+			padding: 5px;
+			background-color: #f9fafb;
+			cursor: pointer;
+			margin-top: 5px;
+		}
+
+		.custom-file-upload input[type="file"] {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			cursor: pointer;
+		}
+
+		.custom-file-upload label {
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			align-items: center;
+		}
+
+		.upload-text {
+			color: #a6adb5;
+
+			font-weight: 700;
+		}
+
+		.upload-icon i {
+			color: #a6adb5;
+			font-size: 18px;
+		}
+
+		.file-name {
+			margin-left: 10px;
+			color: #414f69;
+			font-size: 14px;
+
+		}
+	</style>
+</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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Create Order</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 active" aria-current="page">Create Order</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row align-items-center justify-content-center"
+						style="color: white;background-color:#414f69 ;padding: 10px;">
+						<h3 class="title resizable-content">Create Order</h3>
+					</div>
+					
+
+						<div class="mt-1">
+
+						</div>
+						<!-- Card Section -->
+						<div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
+
+
+							<!-- Add the resizable-content class to the card sections -->
+							<div class="card mb-3 resizable-content">
+								<!--<div class="card-header text-white" style="background-color: #414f69;font-size: large;font-weight: 700;">Order Details
+								</div>-->
+								<div class="card-body">
+									<div class="row">
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Number:</label>
+											<input type="text" class="form-control" id="orderNumber" value=""
+												placeholder="Enter Order Number" style="font-size: large;">
+										</div>
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Date:</label>
+											<input type="date" class="form-control" id="orderDate" value="" style="font-size: large;">
+										</div>
+										<!--<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Given By:</label>
+											<select type="email" class="form-control" id="orderGeneratedBy" value=""
+												 style="font-size: large;">
+												<option value="select">select</option>
+												<option value="council">Council</option>
+												<option value="commissioner">Commissioner</option>
+												</select>
+										</div>-->
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Given By:</label>
+											<input type="text" class="form-control" id="orderGeneratedBy" value=""
+												placeholder="Enter Order Given By" style="font-size: large;">
+										</div>									
+										
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Description:</label>
+											<textarea class="form-control" id="details" rows="1"
+												placeholder="description..." maxlength="400" style="font-size: large;"></textarea >
+										</div>
+										<div class="col-md-6">
+												<label style="font-size: large;font-weight: 700;">Number Of Staff Required:</label>
+												<input type="number" class="form-control" value=""
+														placeholder="Enter Staff Required..." style="font-size: large;">
+										</div>
+										<div class="col-md-6">
+												<label style="font-size: large;font-weight: 700;">Validity Date:</label>
+												<input type="date" class="form-control" value=""
+														placeholder="Enter Validity date" style="font-size: large;">
+										</div>
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Order Document:</label>
+											<div class="custom-file-upload">
+												<input type="file" id="file-upload" class="form-control"
+													onchange="displayFileName()" style="font-size: large;">
+												<label for="file-upload" id="file-label">
+													<span class="upload-text" id="upload-text">Upload Order
+														Document</span>
+													<span class="upload-icon">
+														<i class="fas fa-file-upload"></i>
+													</span>
+												</label>
+												<span id="file-name" class="file-name"></span>
+											</div>
+										</div>
+										
+										<div class="col-md-6">
+											<label style="font-size: large;font-weight: 700;">Enter Category:</label>
+											<input type="text" class="form-control" id="category" value=""
+												placeholder="Enter Category Name" style="font-size: large;">
+										</div>
+
+
+									</div>
+								</div>
+								<div class="d-flex justify-content-center">
+								    <button class="btn"
+								        style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								        id="createorder">
+								      Submit
+								    </button>
+								    <button class="btn"
+								        style="background-color: #6c757d; color: white; width: 200px;padding: 10px;margin-bottom: 10px;margin-left: 10px;"
+								        id="viewdetails">
+								        View Details
+								    </button>
+								</div>
+
+								<div id="detailsContainer" style="margin-top: 20px;"></div>
+
+							</div>
+							
+
+
+
+						</div>
+
+
+
+
+					
+
+				</div>
+
+
+			</div>
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+<script th:inline="javascript">
+
+    function displayFileName() {
+        const fileInput = document.getElementById('file-upload');
+        const fileNameSpan = document.getElementById('file-name');
+
+        // Validate file
+        const allowedExtensions = ['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg'];
+        const maxSize = 20 * 1024 * 1024; // 20 MB
+        const file = fileInput.files[0];
+        
+        if (file) {
+            const fileName = file.name;
+            const fileSize = file.size;
+            const fileExtension = fileName.split('.').pop().toLowerCase();
+
+            // Check file type
+            if (!allowedExtensions.includes(fileExtension)) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Error',
+                    text: 'Unsupported file type! Please upload a PDF, Word, or image file.'
+                });
+                fileInput.value = ''; // Reset the file input
+                fileNameSpan.textContent = '';
+                return;
+            }
+
+            // Check file size
+            if (fileSize > maxSize) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Error',
+                    text: 'File size exceeds 20MB! Please upload a smaller file.'
+                });
+                fileInput.value = ''; // Reset the file input
+                fileNameSpan.textContent = '';
+                return;
+            }
+
+            fileNameSpan.textContent = fileName; // Show the file name if valid
+        } else {
+            fileNameSpan.textContent = ''; // Reset if no file
+        }
+    }
+
+    $(document).ready(function() {
+        $('#createorder').click(function(e) {
+            e.preventDefault();
+
+            // Get the file input
+            const fileInput = document.getElementById('file-upload');
+            const file = fileInput.files[0];
+
+            // Validate file before proceeding
+            if (file) {
+                const allowedExtensions = ['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg'];
+                const maxSize = 20 * 1024 * 1024; // 20 MB
+                const fileName = file.name;
+                const fileSize = file.size;
+                const fileExtension = fileName.split('.').pop().toLowerCase();
+
+                // Check file type
+                if (!allowedExtensions.includes(fileExtension)) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'Unsupported file type! Please upload a PDF, Word, or image file.'
+                    });
+                    return;
+                }
+
+                // Check file size
+                if (fileSize > maxSize) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'File size exceeds 20MB! Please upload a smaller file.'
+                    });
+                    return;
+                }
+            }
+
+            // Create FormData object
+            const formData = new FormData();
+
+            // Append form data
+            formData.append('order_number', document.getElementById('orderNumber').value);
+            formData.append('order_date', document.getElementById('orderDate').value);
+            formData.append('order_generated_by', document.getElementById('orderGeneratedBy').value);
+            formData.append('order_description', document.getElementById('details').value);
+            formData.append('no_of_staffs', document.querySelector('input[placeholder="Enter Staff Required..."]').value);
+            formData.append('validity_date', document.querySelector('input[placeholder="Enter Validity date"]').value);
+            formData.append('category', document.getElementById('category').value);
+
+            // Append file if selected and valid
+            if (file) {
+                formData.append('ordercopyurl', file);
+            }
+
+            // Send AJAX request
+            $.ajax({
+                url: '/gcc/api/nulm/saveOrder',
+                type: 'POST',
+                processData: false,  // Required for FormData
+                contentType: false,  // Required for FormData
+                data: formData,
+                success: function(response) {
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Success',
+                        text: response,
+                    }).then(function() {
+                        location.reload(); // Reload the page after the user clicks 'OK'
+                    });
+                },
+                error: function(xhr, status, error) {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: xhr.responseText || 'An error occurred while saving the order.'
+                    });
+                }
+            });
+        });
+    });
+
+
+    $('#viewdetails').click(function(e) {
+        e.preventDefault();
+
+        $.ajax({
+            url: '/gcc/api/nulm/getAllOrders', // Assuming this is your endpoint for fetching all orders
+            type: 'GET',
+            success: function(data) {
+                displayTable(data);
+            },
+            error: function(xhr, status, error) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Error',
+                    text: 'Could not retrieve order details'
+                });
+            }
+        });
+    });
+
+	function displayTable(data) {
+	    console.log(data);  // Inspect the structure of the API response
+
+	    let tableHtml = `
+	         <table class="table table-bordered">
+            <thead>
+                <tr>
+                    <th>Order Number</th>
+                    <th>Order Date</th>
+                    <th>Order Given By</th>
+                    <th>Order Description</th>
+                    <th>Number Of Staffs</th>
+                    <th>Validity Date</th>
+                    <th>Appointed</th>
+                    <th>Available</th>
+                    <th>Category</th>
+                </tr>
+            </thead>
+            <tbody>
+	    `;
+
+	    data.forEach(item => {
+			
+			 const imageUrl = `/gcc/api/nulm/getOrderDocument/${item.order_copy_url}`;
+	        tableHtml += `
+	            <tr>
+	                <td>${item.order_number || ''}</td>
+	                <td>${item.order_date || ''}</td>
+	                <td>${item.order_generated_by || ''}</td>
+	                <td>${item.order_description || ''}</td>
+	                <td>${item.no_of_staffs || ''}</td>
+	                <td>${item.validity_date || ''}</td>
+	                <td>${item.appointed_yes_count || 0}</td>
+	                <td>${item.output_value || 0}</td>
+	                <td>${item.category || 0}</td>
+	              
+	            </tr>
+	        `;
+	    });
+
+	    tableHtml += `
+	            </tbody>
+	        </table>
+	    `;
+
+	    document.getElementById('detailsContainer').innerHTML = tableHtml;
+	}
+
+
+</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/dropout.html b/target/classes/templates/modules/nulm/dropout.html
new file mode 100644
index 0000000..24cd571
--- /dev/null
+++ b/target/classes/templates/modules/nulm/dropout.html
@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>DropOut</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 active" aria-current="page">DropOut</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row align-items-center justify-content-center"
+						style="color: white;background-color:#414f69 ;padding: 10px;">
+						<h3 class="title resizable-content">DropOut</h3>
+					</div>
+
+
+
+					<!-- Card Section -->
+					<div class="card mt-5 p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
+
+
+						<!-- Add the resizable-content class to the card sections -->
+						<div class="card mb-3 resizable-content">
+
+							<div class="card-body">
+								<div class="row">
+									<div class="col-md-6 d-flex justify-content-between align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69;">Order:</label>
+										<select id="orderNumberDropdown" class="form-control"
+											style="font-size: large; width: 70%;">
+											<option value="">Select Order</option>
+										</select>
+									</div>
+								</div>
+
+								<div class="mt-3" id="orderDetails" style="display: none;">
+									<div class="card-block" style="text-align:center;">
+										<div id="chart" class="row">
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">Total Staff</h5>
+														<p class="card-text" id="total"
+															style="font-size:large; font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">Appointed</h5>
+														<p class="card-text" id="pending"
+															style="font-size: large;font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+											<div class="col-sm-12 col-lg-4">
+												<div class="card" style="height: 100px;">
+													<div class="card-body">
+														<h5 class="card-title" style="font-size:14px;">DropOut
+														</h5>
+														<p class="card-text" id="notappointed"
+															style="font-size: large;font-weight: bold;">0</p>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+
+								<br>
+								<div class="row" id="groupboxsection" style="display:none">
+									<div class="col-md-6 d-flex justify-content-between align-items-center">
+
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69;">Self Help Group:</label>
+										<select id="grouplist" class="form-control"
+											style="font-size: large; width: 70%;">
+											<option value="">Select Group</option>
+										</select>
+									</div>
+								</div>
+
+								<!-- Appointment Date Section (Initially Hidden) -->
+								<div class="row mt-3" id="appointmentSection" style="display: none;">
+									<div class="col-md-6 d-flex align-items-center">
+										<label
+											style="font-size: large; font-weight: 700; color: #414f69; width: 30%;">DropOut
+											Date:</label>
+										<input type="date" id="appointmentDate" class="form-control"
+											style="font-size: large; width: 70%;">
+									</div>
+								</div>
+
+								<!-- Orders Table Section (Initially Hidden) -->
+								<div class="row mt-3" id="ordersTableSection" style="display: none;">
+									<div class="col-md-12">
+										<table class="table table-bordered">
+											<thead>
+												<tr>
+													<th style="width: 10%;">
+														<input type="checkbox" id="selectAll">
+													</th>
+													<th style="width: 30%;">Name</th>
+													<th style="width: 30%;">Phone Number</th>
+													<th style="width: 30%;">Address</th>
+													<th style="width: 30%;">Education Qualification</th>
+												</tr>
+											</thead>
+											<tbody id="ordersTableBody">
+												<!-- Table rows will be populated here -->
+											</tbody>
+										</table>
+									</div>
+								</div>
+								
+
+							</div>
+						</div>
+						<div class="d-flex justify-content-center">
+							<button class="btn"
+								style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								id="createorder">
+								Create DropOut
+							</button>
+						</div>
+
+					</div>
+
+
+
+
+				</div>
+
+
+
+			</div>
+
+
+	
+		<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+	</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+	<script th:inline="javascript">
+$(document).ready(function() {
+    // Function to load order details
+    function loadOrderDetails() {
+        $.ajax({
+            url: '/gcc/api/nulm/getAllOrderDetails', // Updated Endpoint URL
+            method: 'GET',
+            dataType: 'json',
+            success: function(data) {
+                var $dropdown = $('#orderNumberDropdown');
+                $dropdown.empty();
+                $dropdown.append('<option value="">Select Order</option>');
+                $.each(data, function(index, order) {
+                    $dropdown.append('<option value="' + order.order_id + '">' + order.order_number + '</option>');
+                });
+            },
+            error: function(xhr, status, error) {
+                console.error('Error fetching order details:', error);
+            }
+        });
+    }
+
+    // Load order details when the document is ready
+    loadOrderDetails();
+
+    // Handle order number selection
+   $('#orderNumberDropdown').change(function() {
+        var orderId = $(this).val();
+        var $orderDetails = $('#orderDetails');
+        var $groupBoxSection = $('#groupboxsection');
+
+        if (orderId) {
+            // Display the order details and group section
+            $orderDetails.show();
+            $groupBoxSection.show();
+
+            // Fetch group names based on selected order ID
+            $.ajax({
+                url: '/gcc/api/nulm/getSchemeGroupNamesByOrderId',
+                method: 'GET',
+                data: { orderId: orderId },
+                dataType: 'json',
+                success: function(data) {
+                    console.log('Group names data:', data); // Log the response to check if it’s correct
+
+                    var $groupDropdown = $('#grouplist');  // Ensure you are updating the correct dropdown
+                    $groupDropdown.empty(); // Clear the dropdown before appending new options
+                    $groupDropdown.append('<option value="">Select Scheme Group</option>');
+
+                    // Check if data is an array and has the expected structure
+                    if (Array.isArray(data) && data.length > 0) {
+                        $.each(data, function(index, group) {
+                            $groupDropdown.append('<option value="' + group.group_id + '">' + group.group_name + '</option>');
+                        });
+                    } else {
+                        console.error('No group names available');
+                    }
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error fetching group names:', error);
+                }
+            });
+
+            // Fetch the enrollment counts based on the selected order ID
+            $.ajax({
+                url: '/gcc/api/nulm/dropOutCounts',
+                method: 'GET',
+                data: { orderId: orderId },
+                dataType: 'json',
+                success: function(counts) {
+                    // Update the values in the cards
+                    $('#total').text(counts.total_count || 0);
+                    $('#pending').text(counts.total_yes || 0);
+                    $('#notappointed').text(counts.total_drop || 0);
+                },
+                error: function(xhr, status, error) {
+                    console.error('Error fetching enrollment counts:', error);
+                }
+            });
+        } else {
+            // Hide the order details and group section if no order is selected
+            $orderDetails.hide();
+            $groupBoxSection.hide();
+        }
+    });
+});
+$(document).ready(function() {
+    $('#createorder').click(function() {
+        var totalstaff = parseInt($('#total').text(), 10); // Convert total staff to an integer
+        var selectedEnrollments = [];
+        var orderId = parseInt($('#orderNumberDropdown').val(), 10); // Ensure orderId is an integer
+
+        $('.order-checkbox:checked').each(function() {
+            selectedEnrollments.push(parseInt($(this).val(), 10)); // Ensure enrollmentIds are integers
+        });
+
+        if (selectedEnrollments.length > totalstaff) {
+            // Show SweetAlert if the number of selected enrollments exceeds the total staff count
+            Swal.fire({
+                icon: 'warning',
+                title: 'Limit Exceeded',
+                text: `For this order, only ${totalstaff} staff members are allowed.`
+            });
+        } else {
+            // Proceed with the order creation logic
+            $.ajax({
+                url: '/gcc/api/nulm/assignDropout',
+                method: 'POST',
+                contentType: 'application/json', // Set the content type to JSON
+                data: JSON.stringify({
+                    enrollmentIds: selectedEnrollments,
+                    orderId: orderId
+                }), // Convert the data to JSON string
+                success: function(response) {
+                    // Show SweetAlert on success
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Order Dropped',
+                        text: 'The order has been dropped out.',
+                        confirmButtonText: 'OK'
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            // Reload the page after SweetAlert is confirmed
+                            location.reload();
+                        }
+                    });
+                },
+                error: function(xhr, status, error) {
+                    // Show error message using SweetAlert
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Error',
+                        text: 'An error occurred while creating the order. Please try again later.'
+                    });
+                    console.error('Error creating order:', error);
+                }
+            });
+        }
+    });
+});
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/nulm-payment.html b/target/classes/templates/modules/nulm/nulm-payment.html
new file mode 100644
index 0000000..1521b02
--- /dev/null
+++ b/target/classes/templates/modules/nulm/nulm-payment.html
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}">
+	<style>
+		label {
+			font-weight: 700;
+			color: #2d5263;
+		}
+
+
+
+		.checkbox-label {
+			display: block;
+			margin-bottom: 10px;
+			font-size: 16px;
+		}
+
+		
+		.custom-file-upload {
+			position: relative;
+			display: flex;
+			align-items: center;
+			border: 1px solid #d9dde4;
+			border-radius: 5px;
+			padding: 5px;
+			background-color: #f9fafb;
+			cursor: pointer;
+			margin-top: 5px;
+		}
+
+		.custom-file-upload input[type="file"] {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			cursor: pointer;
+		}
+
+		.custom-file-upload label {
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			align-items: center;
+		}
+
+		.upload-icon i {
+			color: #a6adb5;
+			font-size: 18px;
+		}
+
+		.file-name {
+			margin-left: 10px;
+			color: #414f69;
+			font-size: 14px;
+		}
+
+		#upload-text {
+			color: #a7adb5;
+
+		}
+	</style>
+</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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>NULM Payment</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 active" aria-current="page">NULM Payment</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row align-items-center justify-content-center"
+						style="color: white;background-color:#414f69 ;padding: 10px;">
+						<h3 class="title resizable-content">NULM Payment</h3>
+					</div>
+					<!-- Add the resizable-content class to the card sections -->
+					<div class="card mb-3 mt-4 resizable-content">
+						<!--<div class="card-header text-white" style="background-color: #414f69;">Personal Information's
+                                </div>-->
+                                
+						<div class="card-body">								
+							
+							<div class="row">						
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Name:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="staff-name-input" class="form-control" placeholder="Enter Name..." style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+						</div>						
+						
+							
+							<div class="row">		
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Mobile Number:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="mobile-number" class="form-control" placeholder="Enter Mobile Number..." style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+							</div>
+							<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Type of Fine Category:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="category" class="form-control" placeholder="Enter Fine Category..." style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+							</div>
+							<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Category Fine Amount:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="amount" class="form-control" placeholder="Enter the Category Fine Amount..." style="font-size: large;margin-bottom: 15px;" pattern="\d{10}" maxlength="10" minlength="10">
+								</div>	
+								</div>							
+							</div>
+
+								<!-- Update other input fields similarly -->
+				
+							</div>							
+	
+								
+								<div class="d-flex justify-content-center">
+							<button class="btn"
+								style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								id="staffenroll">
+								Payment
+							</button>
+						</div>						
+							
+
+						</div>
+						
+
+					</div>
+
+
+				</div>
+
+
+			
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+<script th:inline="javascript">
+	
+	$(document).ready(function() {
+			$("#staffenroll").click(function() {
+				// Get input values
+				let name = $("#staff-name-input").val().trim();
+				let mobileNumber = $("#mobile-number").val().trim();
+				let category = $("#category").val().trim();
+				let amount = $("#amount").val().trim();
+
+				// Check if any of the required fields are empty
+				if (name === "" || mobileNumber === "" || category === "") {
+					Swal.fire({
+						icon: 'warning',
+						title: 'Warning',
+						text: 'Category fine amount is not entered!'
+					});
+				} else if (amount === "") {
+					Swal.fire({
+						icon: 'warning',
+						title: 'Warning',
+						text: 'Please enter the Category Fine Amount.'
+					});
+				} else {
+					// Simulate AJAX success response
+					$.ajax({
+						type: "POST",
+						url: "#", // No actual API endpoint
+						data: {
+							name: name,
+							mobileNumber: mobileNumber,
+							category: category,
+							amount: amount
+						},
+						success: function() {
+							Swal.fire({
+								icon: 'success',
+								title: 'Success',
+								text: 'Category fine amount updated successfully!'
+							});
+						}
+					});
+				}
+			});
+		});
+  
+
+
+</script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/salary-approve.html b/target/classes/templates/modules/nulm/salary-approve.html
new file mode 100644
index 0000000..0aa4732
--- /dev/null
+++ b/target/classes/templates/modules/nulm/salary-approve.html
@@ -0,0 +1,389 @@
+<!DOCTYPE html>
+<html>
+<head th:replace="~{fragments/modules/base/head :: head}">
+    <!-- Include Bootstrap CSS for styling the modal -->
+    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header th:replace="~{fragments/modules/base/header :: header}"></header>
+        <div class="page-wrap">
+            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+            <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="ik ik-thumbs-up bg-blue"></i>
+                                    <div class="d-inline">
+                                        <h5>NULM STAFF</h5>
+                                        <span>Salary Approval</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 active" aria-current="page">Salary Approval</li>
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr>
+                    
+                    <div class="row">
+                        <div class="col-sm-3">
+                            <label for="month">Month:</label>
+                            <select id="month" class="form-control" required>
+                                <option value="">Select</option>
+                                <option value="January">January</option>
+                                <option value="February">February</option>
+                                <option value="March">March</option>
+                                <option value="April">April</option>
+                                <option value="May">May</option>
+                                <option value="June">June</option>
+                                <option value="July">July</option>
+                                <option value="August">August</option>
+                                <option value="September">September</option>
+                                <option value="October">October</option>
+                                <option value="November">November</option>
+                                <option value="December">December</option>
+                            </select>
+                        </div>
+
+                        <div class="col-sm-3">
+                            <label for="year">Year:</label>
+                            <input type="number" id="year" class="form-control" min="2000" max="2100" required>
+                        </div>
+
+                        <div class="col-sm-3">
+                            <label for="salaryStatus">Salary Status:</label>
+                            <select id="salaryStatus" class="form-control">
+                                <option value="">Select</option>
+                                <option value="Initiated">Initiated</option>
+                                <option value="Approved">Approved</option>
+                            </select>
+                        </div>
+
+                        <div class="col-sm-3">
+                            <button class="btn btn-primary mt-4" onclick="fetchSalaryReport()">Get Salary Info</button>
+                        </div>
+                    </div>
+                    
+					<div class="card-block mt-4">
+    <div>
+        <table id="salaryDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+            <thead class="thead-dark">
+                <tr role="row">
+                    <th>S.No</th>
+                    <th>Incharge Name</th>
+                    <th>Total Staff Count</th>
+                    <th>Salary Processed</th>
+                    <th>Total Salary Amount</th>
+                    <th>Salary Status</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr th:each="salaryInitiatedCounts, i : ${salaryInitiatedCounts}">
+                    <td th:text="${i.count}">0</td>
+                    <td th:text="${salaryInitiatedCounts.incharge_name}"></td>
+                    
+                    <!-- Make the Total Staff Count clickable -->
+                    <td>
+                        <a href="#" class="total-staff-count" 
+                           th:data-incharge-id="${salaryInitiatedCounts.incharge_id}" 
+                           th:data-month="${salaryInitiatedCounts.month}" 
+                           th:data-incharge-name="${salaryInitiatedCounts.incharge_name}"
+                           th:data-zone="${salaryInitiatedCounts.zone}"
+                           th:data-enrollment-ids="${salaryInitiatedCounts.enrollment_ids}"
+                           th:text="${salaryInitiatedCounts.total_staff_count}" 
+                           data-toggle="modal" data-target="#shgModal">
+                        </a>
+                    </td>
+                    
+                    <td th:text="${salaryInitiatedCounts.total_approved_count}"></td>
+                    <td th:text="${salaryInitiatedCounts.total_salary_amount}"></td>
+                    <td th:text="${salaryInitiatedCounts.salary_status}"></td>                   
+                        <td>
+							 <span th:if="${salaryInitiatedCounts.salary_status == 'Approved'}" class="badge badge-success">Approved</span>
+						    <button th:if="${salaryInitiatedCounts.salary_status == 'Initiated'}"
+						            class="btn btn-primary approve-btn"
+						            th:data-enrollment-ids="${salaryInitiatedCounts.enrollment_ids}"
+						            th:data-month="${salaryInitiatedCounts.month}"
+						            th:data-year="${salaryInitiatedCounts.year}">
+						        Approve
+						    </button>
+						</td>
+                </tr>
+            </tbody>
+            <tfoot class="thead-dark">
+                <tr>
+                    <th>S.No</th>
+                    <th>Incharge Name</th>
+                    <th>Total Staff Count</th>
+                    <th>Salary Processed</th>
+                    <th>Total Salary Amount</th>
+                    <th>Salary Status</th>
+                    <th>Action</th>
+                </tr>
+            </tfoot>
+        </table>
+    </div>
+</div>
+
+<!-- Modal for displaying staff details -->
+<div class="modal fade" id="shgModal" tabindex="-1" role="dialog" aria-labelledby="shgModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-xl" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="shgModalLabel">Staff Details</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <!-- Table for displaying attendance details -->
+                <div id="attendanceDetailsContainer">
+                    <h5>Attendance Details</h5>
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th>S.No</th>
+                                <th>Employee ID</th>
+                                <th>Name</th>
+                                <th>Year</th>
+                                <th>Month</th>
+                                <th>Total Days Present</th>
+                                <th>Total Days Absent</th>
+                                <th>Total Days OD</th>
+                                <th>Total Days Salary</th>
+                                <th>Total Salary</th>
+                                <th>Salary Status</th>
+                            </tr>
+                        </thead>
+                        <tbody id="attendanceDetailsTableBody">
+                            <!-- Dynamic content will be loaded here -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+                    <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+                </div>
+            </div>
+            <div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+		
+
+            <script th:replace="~{fragments/modules/base/script :: script}"></script>
+            <script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+            <script th:inline="javascript">
+				
+	function fetchSalaryReport() {
+        const month = document.getElementById('month').value;
+        const year = document.getElementById('year').value;
+        const salaryStatus = document.getElementById('salaryStatus').value;
+
+        if (month && year) {
+            window.location.href = `/gcc/nulm/salary-approve?month=${month}&year=${year}&salaryStatus=${salaryStatus}`;
+        } else {
+            alert("Please select both month and year.");
+        }
+    }
+				$(document).ready(function () {
+					
+	function clearUrlParams() {
+        const currentUrl = window.location.href;
+        const urlWithoutParams = currentUrl.split('?')[0]; // Remove the query parameters
+        window.history.replaceState({}, document.title, urlWithoutParams); // Replace the current URL without params
+    }
+
+    // Call this on page load to reset the URL
+    clearUrlParams();
+    
+    // Initialize DataTable
+    var table = $('#salaryDatatable').DataTable({
+        dom: 'Bftip',
+        columnDefs: [
+            { targets: 'no-sort', orderable: false }
+        ],
+        lengthMenu: [
+            [50, 100, 200, 500, -1],
+            ['50 rows', '100 rows', '200 rows', 'Show all']
+        ],
+        scrollY: '50vh',
+        fixedColumns: {
+            left: 1,
+            right: 1
+        },
+        buttons: [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary',
+                id: 'copyBtn',
+                columns: [0,1,2,3,4,5]
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary',
+                id: 'pdfBtn',
+                exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5]
+                }
+            },
+            /*
+            {
+                extend: 'excelHtml5',
+                text: 'EXCEL',
+                className: 'btn btn-secondary',
+                id: 'excelBtn'
+            },
+            {
+                extend: 'csvHtml5',
+                text: 'CSV',
+                className: 'btn btn-secondary',
+                id: 'csvBtn'
+            }*/
+        ],
+        fixedHeader: true,
+        autoWidth: true,
+        responsive: true,
+        searching: true,
+        select: false,
+        processing: false
+    });
+
+    // Handle total-staff-count click event
+    $('.total-staff-count').on('click', function (event) {
+        event.preventDefault(); // Prevent default anchor click behavior
+
+        // Get inchargeName and month from the clicked element's data attributes
+       // var inchargeName = $(this).data('incharge-name');
+        var inchargeId = $(this).data('incharge-id')
+        var month = $(this).data('month')
+        var inchargeName = $(this).data('incharge-name')
+        var zone = $(this).data('zone');
+        var enrollmentIds = $(this).data('enrollment-ids');
+        console.log(zone);
+        console.log(inchargeName);
+        // Make the AJAX call to fetch attendance details
+        $.ajax({
+            url: '/gcc/api/nulm/staffInititeadList',
+            method: 'GET',
+            data: {
+                //inchargeName: inchargeName,
+                inchargeId: inchargeId,
+                month: month,
+                inchargeName: inchargeName,
+                enrollmentIds: enrollmentIds.join(',')
+            },
+            success: function (data) {
+                // Populate the modal's table with the fetched data
+                var tbody = $('#attendanceDetailsTableBody');
+                tbody.empty(); // Clear any previous data
+
+                // Loop through the data and append rows to the table
+                $.each(data, function (index, item) {
+                    var row = `<tr>
+                                    <td>${index + 1}</td>
+                                    <td>${item.emp_id}</td>
+                                    <td>${item.name}</td>
+                                    <td>${item.year}</td>
+                                    <td>${item.month}</td>
+                                    <td>${item.total_days_present}</td>
+                                    <td>${item.total_days_absent}</td>
+                                    <td>${item.total_days_od}</td>
+                                    <td>${item.total_days_salary}</td>
+                                    <td>${item.total_salary}</td>
+                                    <td>${item.salary_status}</td>
+                                </tr>`;
+                    tbody.append(row);
+                });
+
+                // Show the modal after data is populated
+                $('#shgModal').modal('show');
+            },
+            error: function (xhr, status, error) {
+                console.error('Failed to fetch data:', error);
+                alert('Failed to load staff details. Please try again.');
+            }
+        });
+    });
+    
+   $(document).on('click', '.approve-btn', function () {
+    var enrollmentIds = $(this).data('enrollment-ids'); // Get the data attribute
+    var month = $(this).data('month');
+    var year = $(this).data('year');
+
+    // Confirm the action with SweetAlert
+    Swal.fire({
+        title: 'Are you sure?',
+        text: 'Do you want to approve the selected enrollments?',
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Yes, approve it!'
+    }).then((result) => {
+        if (result.isConfirmed) {
+            // Make the AJAX call
+            $.ajax({
+                url: '/gcc/api/nulm/update-salary-status',
+                method: 'POST',
+                contentType: 'application/x-www-form-urlencoded',
+                data: {
+                    // Pass the enrollment IDs as a comma-separated string
+                    enrollmentIds: enrollmentIds.join(','), // Convert array to a comma-separated string
+                    month: month,
+                    year: year
+                },
+                success: function (response) {
+                    Swal.fire(
+                        'Approved!',
+                        response,
+                        'success'
+                    );
+                    // Optionally refresh the table or update the UI
+                    location.reload();
+                },
+                error: function (xhr, status, error) {
+                    console.error('Failed to approve:', error);
+                    Swal.fire(
+                        'Error!',
+                        'Failed to approve the selected enrollments. Please try again.',
+                        'error'
+                    );
+                }
+            });
+        }
+    });
+});
+
+});
+
+            </script>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/salary-details.html b/target/classes/templates/modules/nulm/salary-details.html
new file mode 100644
index 0000000..0f04944
--- /dev/null
+++ b/target/classes/templates/modules/nulm/salary-details.html
@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Salary Details</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 active" aria-current="page">Salary Details</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row">
+                        <div class="col-sm-3">
+                            <label for="month">Month:</label>
+                            <select id="month" class="form-control" required>
+                                <option value="">Select</option>
+                                <option value="January">January</option>
+                                <option value="February">February</option>
+                                <option value="March">March</option>
+                                <option value="April">April</option>
+                                <option value="May">May</option>
+                                <option value="June">June</option>
+                                <option value="July">July</option>
+                                <option value="August">August</option>
+                                <option value="September">September</option>
+                                <option value="October">October</option>
+                                <option value="November">November</option>
+                                <option value="December">December</option>
+                            </select>
+                        </div>
+
+                        <div class="col-sm-3">
+                            <label for="year">Year:</label>
+                            <input type="number" id="year" class="form-control" min="2000" max="2100" required>
+                        </div>
+
+                        <div class="col-sm-3">
+                            <button class="btn btn-primary mt-4" onclick="fetchSalaryDetails()">Get Salary Info</button>
+                        </div>
+                    </div>
+                    <div class="card-block mt-3">
+                        <div>
+                            <table id="salaryDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+                                <thead class="thead-dark">
+                                    <tr role="row">
+                                        <th>S.No</th>
+							            <th>Employee Name</th>
+							            <th>Total Number of days</th>
+							            <th>Number of days present</th>
+							            <th>Number of days Absent</th>
+							            <th>OD</th>
+							            <th>Total Days for the Salary</th>
+							            <th>Month</th>
+							            <th>Year</th>
+							            <th>Salary Amount</th>
+							            <th><input type="checkbox" id="selectAll"> Action</th>
+                                    </tr>
+                                    
+                                </thead>
+                                 <tbody>
+                                     <tr th:each="salaryCounts, i : ${salaryCounts}">
+                                      <td th:text="${i.count}">0</td>
+                                        <td th:text="${salaryCounts.name}"></td>
+                                        <td th:text="${salaryCounts.total_days}"></td>
+                                        <td th:text="${salaryCounts.total_days_present}"></td>
+                                        <td th:text="${salaryCounts.total_days_absent}"></td>
+                                        <td th:text="${salaryCounts.total_days_od}"></td>
+                                        <td th:text="${salaryCounts.total_days_salary}"></td>
+                                        <td th:text="${salaryCounts.month}"></td>
+                                        <td th:text="${salaryCounts.year}"></td>
+                                        <td th:text="${salaryCounts.total_salary}"></td>
+                                        <td>
+										    <!-- Show "Approved" badge if salary_status is 'Approved' -->
+										    <span th:if="${salaryCounts.salary_status == 'Approved'}" class="badge badge-primary">Approved</span>
+										
+										    <!-- Show "Initiated" badge if salary_status is 'Initiated' -->
+										    <span th:if="${salaryCounts.salary_status == 'Initiated'}" class="badge badge-success">Initiated</span>
+										
+										    <!-- Show checkbox if salary_status is neither 'Approved' nor 'Initiated' -->
+										    <input type="checkbox" th:unless="${salaryCounts.salary_status == 'Approved' || salaryCounts.salary_status == 'Initiated'}"
+										           class="initiate-checkbox"
+										           th:data-enrollment-id="${salaryCounts.enrollment_id}"
+										           th:data-total-days-present="${salaryCounts.total_days_present}"
+										           th:data-total-days-od="${salaryCounts.total_days_od}"
+										           th:data-total-days="${salaryCounts.total_days}"
+										           th:data-total-days-absent="${salaryCounts.total_days_absent}"
+										           th:data-month="${salaryCounts.month}"
+										           th:data-year="${salaryCounts.year}"
+										           th:data-salary-amount="${salaryCounts.total_salary}"
+										           th:data-salary-status="${salaryCounts.salary_status}"
+										           th:data-group-id="${salaryCounts.group_id}"
+										           th:data-wage-id="${salaryCounts.wage_id}">
+										</td>
+                                    </tr>
+                                </tbody>
+                                <tfoot class="thead-dark">
+                                    <tr role="row">
+                                        <th>S.No</th>
+							            <th>Employee Name</th>
+							            <th>Total Number of days</th>
+							            <th>Number of days present</th>
+							            <th>Number of days Absent</th>
+							            <th>OD</th>
+							            <th>Total Days for the Salary</th>
+							            <th>Month</th>
+							            <th>Year</th>
+							            <th>Salary Amount</th>
+							            <th>Action</th>
+                                    </tr>                                   
+                                </tfoot>
+                            </table>
+                            <button id="initiateButton" class="btn btn-success">Initiate</button>
+                        </div>
+                    </div>
+						
+
+					</div>
+
+
+				</div>
+
+
+			
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+<script th:inline="javascript">
+	
+	function fetchSalaryDetails() {
+        const month = document.getElementById('month').value;
+        const year = document.getElementById('year').value;
+
+        if (month && year) {
+            window.location.href = `/gcc/nulm/salaryDetails?month=${month}&year=${year}`;
+        } else {
+            alert("Please select both month and year.");
+        }
+    }
+
+
+$(document).ready(function () {
+    // Initialize DataTable
+    var table = $('#salaryDatatable').DataTable({
+        dom: 'Bftip',
+        columnDefs: [
+            { targets: 'no-sort', orderable: false }
+        ],
+        lengthMenu: [
+            [50, 100, 200, 500, -1],
+            ['50 rows', '100 rows', '200 rows', 'Show all']
+        ],
+        scrollY: '50vh',
+        fixedColumns: {
+            left: 1,
+            right: 1
+        },
+        buttons: [
+            {
+                extend: 'pageLength',
+                className: 'btn btn-warning'
+            },
+            {
+                title: 'Data export',
+                extend: 'copyHtml5',
+                text: 'Copy',
+                className: 'btn btn-secondary',
+                id: 'copyBtn'
+            },
+            {
+                extend: 'pdfHtml5',
+                text: 'PDF',
+                className: 'btn btn-secondary',
+                id: 'pdfBtn'
+            }
+        ],
+        fixedHeader: true,
+        autoWidth: true,
+        responsive: true,
+        searching: true,
+        select: false,
+        processing: false
+    });
+
+    // Handle "Select All" checkbox change event
+    $("#selectAll").on('change', function () {
+        $(".initiate-checkbox").prop('checked', this.checked);
+    });
+
+    // Handle individual checkboxes change event to update the "Select All" checkbox
+    $(".initiate-checkbox").on('change', function () {
+        if ($('.initiate-checkbox:checked').length === $('.initiate-checkbox').length) {
+            $('#selectAll').prop('checked', true);
+        } else {
+            $('#selectAll').prop('checked', false);
+        }
+    });
+
+    // Approve button click event
+    $("#initiateButton").click(function (event){
+		event.preventDefault();
+        // Collect selected row data
+        let selectedRows = [];
+		$(".initiate-checkbox:checked").each(function () {
+		    const enrollmentId = $(this).data("enrollment-id");
+		    const totalDaysPresent = $(this).data("total-days-present");
+		    const totalDaysOd = $(this).data("total-days-od");
+		    const totalDays = $(this).data("total-days");
+		    const totalDaysAbsent = $(this).data("total-days-absent");
+		    const month = $(this).data("month");
+		    const year = $(this).data("year");
+		    const salaryAmount = $(this).data("salary-amount");
+		    const salaryStatus = $(this).data("salary-status");
+		    const groupId = $(this).data("group-id");
+		    const wageId = $(this).data("wage-id");
+		
+		    selectedRows.push({
+		        enrollment_id: parseInt(enrollmentId),
+		        total_days_present: parseInt(totalDaysPresent),
+		        total_days_od: parseInt(totalDaysOd),
+		        total_days: parseInt(totalDays),
+		        total_days_absent: parseInt(totalDaysAbsent),
+		        month: month,
+		        year: parseInt(year),
+		        salary_amount: parseInt(salaryAmount),
+		        salary_status: salaryStatus,
+		        group_id: parseInt(groupId),
+		        wage_id: parseInt(wageId)
+		    });
+		});
+
+        // If no rows are selected, show an alert
+        if (selectedRows.length === 0) {
+            alert("Please select at least one row to approve.");
+            return;
+        }
+
+        // Send AJAX POST request using jQuery
+       $.ajax({
+    url: "/gcc/api/nulm/salaryDetailUpdate",
+    type: "POST",
+    contentType: "application/json",
+    data: JSON.stringify(selectedRows), // Send array of objects
+    success: function (response) {
+        Swal.fire({
+            title: 'Success!',
+            text: 'Selected Staffs for Salary has been Initited successfully!',
+            icon: 'success',
+            confirmButtonText: 'OK'
+        }).then((result) => {
+            if (result.isConfirmed) {
+                // Optionally, you could refresh the page or update the UI to reflect the changes
+                location.reload(); // This will reload the page to fetch the latest data
+            }
+        });
+    },
+    error: function (xhr, status, error) {
+        console.error("Error:", error);
+        alert("An error occurred while approving salary details.");
+    }
+});
+    });
+})
+
+</script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/salary-report.html b/target/classes/templates/modules/nulm/salary-report.html
new file mode 100644
index 0000000..8ad7385
--- /dev/null
+++ b/target/classes/templates/modules/nulm/salary-report.html
@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+
+<body>
+	<div class="wrapper">
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+			<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Salary Report</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 active" aria-current="page">Salary Report</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+
+					<!-- Filters Section -->
+					<div class="row">
+						<div class="col-sm-3">
+							<label for="month">Month:</label>
+							<select id="month" class="form-control" required>
+								<option value="">Select</option>
+								<option value="January">January</option>
+								<option value="February">February</option>
+								<option value="March">March</option>
+								<option value="April">April</option>
+								<option value="May">May</option>
+								<option value="June">June</option>
+								<option value="July">July</option>
+								<option value="August">August</option>
+								<option value="September">September</option>
+								<option value="October">October</option>
+								<option value="November">November</option>
+								<option value="December">December</option>
+							</select>
+						</div>
+
+						<div class="col-sm-3">
+							<label for="year">Year:</label>
+							<input type="number" id="year" class="form-control" min="2000" max="2100" required>
+						</div>
+
+						<div class="col-sm-3">
+							<label for="salaryStatus">Salary Status:</label>
+							<select id="salaryStatus" class="form-control">
+								<option value="">Select</option>
+								<option value="Initiated">Initiated</option>
+								<option value="Approved">Approved</option>
+							</select>
+						</div>
+
+						<div class="col-sm-3">
+							<label for="selfhelp">Self Help Group:</label>
+							<select id="selfhelp" class="form-control">
+								<option value="">Select</option>
+								<!-- Group names will be populated here -->
+							</select>
+						</div>
+
+
+
+						<div class="col-sm-3">
+
+							<button class="btn btn-primary mt-4" onclick="fetchSalaryReport()">Get Salary Info</button>
+						</div>
+					</div>
+
+					<!-- Salary Report Table -->
+					<div class="card-block mt-3">
+						<table id="salaryreporttable" class="table table-striped table-bordered">
+							<thead class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Incharge Name</th>
+									<th>Incharge Designation</th>
+									<th>Self Help Group</th>
+									<th>Days Present</th>
+									<th>OD</th>
+									<th>Total Days for Salary</th>
+									<th>Total Days</th>
+									<th>Total Days Absent</th>
+									<th>Month</th>
+									<th>Year</th>
+									<th>Salary Amount</th>
+									<th>Salary Status</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr th:each="salary, i : ${salaryReport}">
+									<td th:text="${i.count}">1</td>
+									<td th:text="${salary.emp_id}"></td>
+									<td th:text="${salary.name}"></td>
+									<td th:text="${salary.incharge_name}"></td>
+									<td th:text="${salary.incharge_designation}"></td>
+									<td th:text="${salary.group_name}"></td>
+									<td th:text="${salary.total_days_present}"></td>
+									<td th:text="${salary.total_days_od}"></td>
+									<td th:text="${salary.total_days_salary}"></td>
+									<td th:text="${salary.total_days}"></td>
+									<td th:text="${salary.total_days_absent}"></td>
+									<td th:text="${salary.imonth}"></td>
+									<td th:text="${salary.iyear}"></td>
+									<td th:text="${salary.total_salary}"></td>
+									<td th:text="${salary.salary_status}"></td>
+								</tr>
+							</tbody>
+							<tfoot class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Incharge Name</th>
+									<th>Incharge Designation</th>
+									<th>Self Help Group</th>
+									<th>Days Present</th>
+									<th>OD</th>
+									<th>Total Days for Salary</th>
+									<th>Total Days</th>
+									<th>Total Days Absent</th>
+									<th>Month</th>
+									<th>Year</th>
+									<th>Salary Amount</th>
+									<th>Salary Status</th>
+								</tr>
+							</tfoot>
+						</table>
+					</div>
+
+				</div>
+			</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<div th:replace="~{fragments/modules/base/script :: script}"></div>
+
+	<script th:inline="javascript">
+
+		function fetchSalaryReport() {
+			const month = document.getElementById('month').value;
+			const year = document.getElementById('year').value;
+			const salaryStatus = document.getElementById('salaryStatus').value;
+			const groupName=document.getElementById('selfhelp').value;
+
+			if (month && year) {
+				window.location.href = `/gcc/nulm/salary-report?month=${month}&year=${year}&salaryStatus=${salaryStatus}&groupName=${groupName}`;
+			} else {
+				alert("Please select both month and year.");
+			}
+		}
+		$(document).ready(function () {
+
+			function clearUrlParams() {
+				const currentUrl = window.location.href;
+				const urlWithoutParams = currentUrl.split('?')[0]; // Remove the query parameters
+				window.history.replaceState({}, document.title, urlWithoutParams); // Replace the current URL without params
+			}
+
+			// Call this on page load to reset the URL
+			clearUrlParams();
+
+			// Initialize DataTable
+			var table = $('#salaryreporttable').DataTable({
+				dom: 'Bftip',
+				columnDefs: [
+					{targets: 'no-sort', orderable: false}
+				],
+				lengthMenu: [
+					[50, 100, 200, 500, -1],
+					['50 rows', '100 rows', '200 rows', 'Show all']
+				],
+				scrollY: '50vh',
+				fixedColumns: {
+					left: 1,
+					right: 1
+				},
+				buttons: [
+					{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+					{
+						extend: 'pdfHtml5',
+						text: 'PDF',
+						className: 'btn btn-secondary',
+						id: 'pdfBtn',
+						exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
+                },
+                orientation: 'landscape', // Change to landscape for more horizontal space
+    pageSize: 'A4', // You can change to A4 or A3 depending on your needs
+    customize: function (doc) {
+        // Custom column widths for better fit
+        doc.content[1].table.widths = ['4%', '8%', '8%', '8%', '8%', '8%', '6%', '5%', '6%', '6%', '6%', '6%', '6%', '9%', '9%'];
+        
+        // Optional: Adjust font size if needed
+        doc.styles.tableBodyEven.alignment = 'center';
+        doc.styles.tableBodyOdd.alignment = 'center';
+    }
+					}
+				],
+				fixedHeader: true,
+				autoWidth: true,
+				responsive: true,
+				searching: true,
+				select: false,
+				processing: false
+			});
+
+
+		});
+		$(document).ready(function () {
+			$.ajax({
+				url: '/gcc/api/nulm/selfHelpGroups', // Your API endpoint
+				type: 'GET',
+				success: function (data) {
+					// Clear existing options (if any)
+					$('#selfhelp').empty().append('<option value="">Select</option>');
+
+					// Check if data is an array and iterate through it
+					if (Array.isArray(data)) {
+						let options = '';
+						data.forEach(function (group) {
+							// Access the correct properties
+							options += `<option value="${group.groupName}">${group.groupName}</option>`;
+						});
+						$('#selfhelp').append(options);
+					} else {
+						console.error("Data is not an array:", data);
+					}
+				},
+				error: function (xhr, status, error) {
+					console.error("Error fetching self-help groups:", error);
+				}
+			});
+		});
+
+
+
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/scheme-group.html b/target/classes/templates/modules/nulm/scheme-group.html
new file mode 100644
index 0000000..2e6ff83
--- /dev/null
+++ b/target/classes/templates/modules/nulm/scheme-group.html
@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="ik ik-thumbs-up bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>NULM STAFF</h5>
+                                            <span>Self Help Group</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 active" aria-current="page">Self Help Group</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row align-items-center justify-content-center"
+                        style="color: white;background-color:#414f69 ;padding: 10px;">
+                        <h3 class="title resizable-content">Self Help Group</h3>
+                    </div>
+                    
+                
+                        <div class="mt-1">
+                
+                        </div>
+                        <!-- Card Section -->
+                        <div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
+                
+                
+                            <!-- Add the resizable-content class to the card sections -->
+                            <div class="card mb-3 resizable-content">
+                
+                                <div class="card-body">
+                                    <div class="row">
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Self Help Group:</label>
+                                            <input type="text" class="form-control" id="groupName" placeholder="Enter Scheme Group Name" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                        </div>
+                                     </div>
+								
+									<div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Incharge Name:</label>
+                                            <input type="text" class="form-control" id="inchargeName" placeholder="Enter Incharge Name" style="font-size: large;  width: 70%;margin-bottom: 15px;">
+                                        </div>
+									</div>
+								
+									<div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Incharge Phone Number:</label>
+                                            <input type="text" class="form-control" id="inchargePhoneNo" placeholder="Enter Incharge Phone Number" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                         </div>
+                                    </div>    
+                                    <div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Bank Name:</label>
+                                            <input type="text" class="form-control" id="bankName" placeholder="Enter Incharge Phone Number" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                         </div>
+                                    </div>  
+                                    <div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Bank Branch:</label>
+                                            <input type="text" class="form-control" id="bankBranch" placeholder="Enter Incharge Phone Number" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                         </div>
+                                    </div>  
+                                    <div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">IFSC Code:</label>
+                                            <input type="text" class="form-control" id="ifscCode" placeholder="Enter Incharge Phone Number" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                         </div>
+                                    </div>  
+                                    <div class="row">
+
+                                        <div class="col-md-6 d-flex justify-content-between align-items-center">
+                                            <label style="font-size: large; font-weight: 700; color: #414f69;">Bank Account Number:</label>
+                                            <input type="text" class="form-control" id="bankAccountno" placeholder="Enter Incharge Phone Number" style="font-size: large; width: 70%;margin-bottom: 15px;">
+                                         </div>
+                                    </div>                                  
+                                    
+                                </div>
+								<div class="d-flex justify-content-center">
+								    <button class="btn"
+								        style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								        onclick="saveSchemeGroup()">
+								        Submit
+								    </button>
+								    <button class="btn"
+								        style="background-color: #6c757d; color: white; width: 200px;padding: 10px;margin-bottom: 10px;margin-left: 10px;"
+								        onclick="viewDetails()">
+								        View Details
+								    </button>
+								</div>
+
+							</div>
+							<div id="detailsContainer" style="margin-top: 20px;"></div>
+
+                            </div>
+                           
+                
+                
+                
+                        </div>
+                
+                
+                
+                
+                    
+                
+                </div>
+
+                
+
+			
+
+        <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+        </div>
+		</div>
+	    <div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+        <script th:inline="javascript">
+			
+		function saveSchemeGroup() {
+        const schemeData = {
+            groupName: document.getElementById('groupName').value,
+            inchargeName: document.getElementById('inchargeName').value,
+            inchargePhoneNo: document.getElementById('inchargePhoneNo').value,
+            bankName: document.getElementById('bankName').value,
+            bankBranch: document.getElementById('bankBranch').value,
+            ifscCode: document.getElementById('ifscCode').value,
+            bankAccountno: document.getElementById('bankAccountno').value
+        };
+
+		$.ajax({
+		    type: "POST",
+		    url: "/gcc/api/nulm/saveGroup", // Ensure this matches the controller's mapping
+		    contentType: "application/json",
+		    data: JSON.stringify(schemeData),
+		    success: function(response) {
+		        Swal.fire({
+		            icon: 'success',
+		            title: 'Scheme Group Saved Successfully',
+		            text: response
+		        }).then((result) => {
+		            if (result.isConfirmed) {
+		                location.reload(); // Reload the page after the user confirms the alert
+		            }
+		        });
+		    },
+		    error: function(xhr) {
+		        Swal.fire({
+		            icon: 'error',
+		            title: 'Error',
+		            text: xhr.responseText
+		        });
+		    }
+		});
+
+    }
+
+	function viewDetails() {
+	    $.ajax({
+	        type: "GET",
+	        url: "/gcc/api/nulm/getAllSchemeGroups",
+	        success: function(data) {
+	            displayTable(data);
+	        },
+	        error: function(xhr) {
+	            Swal.fire({
+	                icon: 'error',
+	                title: 'Error',
+	                text: 'Could not retrieve details'
+	            });
+	        }
+	    });
+	}
+
+	function displayTable(data) {
+	    let tableHtml = `
+	        <table class="table table-bordered">
+	            <thead>
+	                <tr>
+	                    <th>Group Name</th>
+	                    <th>Incharge Name</th>
+	                    <th>Incharge Phone Number</th>
+	                    <th>Appointed</th>
+	                    <th>Available</th>
+	                    <th>Dropout</th>
+	                    <th>Created Date</th>
+	                </tr>
+	            </thead>
+	            <tbody>
+	    `;
+
+	    data.forEach(item => {
+	        tableHtml += `
+	            <tr>
+	                <td>${item.group_name}</td>
+	                <td>${item.incharge_name}</td>
+	                <td>${item.incharge_phoneno}</td>
+	                <td>${item.appointed_count}</td>
+	                <td>${item.available_count}</td>
+	                <td>${item.dropout_count}</td>
+	                <td>${item.created_date}</td>
+	            </tr>
+	        `;
+	    });
+
+	    tableHtml += `
+	            </tbody>
+	        </table>
+	    `;
+
+	    document.getElementById('detailsContainer').innerHTML = tableHtml;
+	}
+
+
+        		</script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/staff-enrollment.html b/target/classes/templates/modules/nulm/staff-enrollment.html
new file mode 100644
index 0000000..dcc1672
--- /dev/null
+++ b/target/classes/templates/modules/nulm/staff-enrollment.html
@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}">
+	<style>
+		label {
+			font-weight: 700;
+			color: #2d5263;
+		}
+
+
+
+		.checkbox-label {
+			display: block;
+			margin-bottom: 10px;
+			font-size: 16px;
+		}
+
+		
+		.custom-file-upload {
+			position: relative;
+			display: flex;
+			align-items: center;
+			border: 1px solid #d9dde4;
+			border-radius: 5px;
+			padding: 5px;
+			background-color: #f9fafb;
+			cursor: pointer;
+			margin-top: 5px;
+		}
+
+		.custom-file-upload input[type="file"] {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			cursor: pointer;
+		}
+
+		.custom-file-upload label {
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			align-items: center;
+		}
+
+		.upload-icon i {
+			color: #a6adb5;
+			font-size: 18px;
+		}
+
+		.file-name {
+			margin-left: 10px;
+			color: #414f69;
+			font-size: 14px;
+		}
+
+		#upload-text {
+			color: #a7adb5;
+
+		}
+	</style>
+</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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Staff Enrollment</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 active" aria-current="page">Staff Enrollment</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+					<div class="row align-items-center justify-content-center"
+						style="color: white;background-color:#414f69 ;padding: 10px;">
+						<h3 class="title resizable-content">Staff Enrollment</h3>
+					</div>
+					<!-- Add the resizable-content class to the card sections -->
+					<div class="card mb-3 mt-4 resizable-content">
+						<!--<div class="card-header text-white" style="background-color: #414f69;">Personal Information's
+                                </div>-->
+                                
+						<div class="card-body">								
+							<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+									<label style="font-size: large; font-weight: 700; color: #414f69;">Self Help Group:</label>
+									<div class="col-md-6" style="margin-right: 32%;">
+										<select id="selfHelpGroupDropdown" class="form-control" style="font-size: large; margin-bottom: 15px;">
+											<option value="">Select Group</option>
+										</select>
+									</div>
+								</div>
+							</div>
+							<div class="row">						
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Name:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="staff-name-input" class="form-control" placeholder="Enter Name..." style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+						</div>						
+						
+						<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Gender:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <select id="gender-select" class="form-control" style="font-size: large;margin-bottom: 15px;">
+								        <option value="">Select Gender</option>
+								        <option value="1">Male</option>
+								        <option value="2">Female</option>
+								        <option value="3">Transgender</option>
+								    </select>
+								    </div>
+								</div>								
+							</div>
+							
+							<div class="row">		
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Date Of Birth:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="date" id="dob-input" class="form-control" style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+							</div>
+							<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Address:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="address-input" class="form-control" placeholder="Enter Name..." style="font-size: large;margin-bottom: 15px;">
+								</div>
+								</div>
+							</div>
+							<div class="row">
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+								    <label style="font-size: large;font-weight: 700;color: #414f69;">Phone number:</label>
+								    <div class="col-md-6" style="margin-right: 32%;">
+								    <input type="text" id="phone-number-input" class="form-control" placeholder="Enter the Phone Number..." style="font-size: large;margin-bottom: 15px;" pattern="\d{10}" maxlength="10" minlength="10">
+								</div>	
+								</div>							
+							</div>
+
+								<!-- Update other input fields similarly -->
+							<div class="row">
+
+								<div class="col-md-12 d-flex justify-content-between align-items-center">
+									<label style="font-size: large; font-weight: 700; color: #414f69;">Education
+										Qualification:</label>
+										<div class="col-md-6" style="margin-right: 32%;">
+									<select id="educationQualification" class="form-control" style="font-size: large;margin-bottom: 15px;">
+										<option value="">Select Qualification</option>
+										<option value="8th">8th</option>
+										<option value="9th">9th</option>
+										<option value="10th">10th</option>
+										<option value="11th">11th</option>
+										<option value="12th">12th</option>
+										<option value="UG">UG</option>
+										<option value="PG">PG</option>
+									</select>
+									</div>
+								</div>	
+							</div>
+							
+							<div class="row">
+    <div class="col-md-12 d-flex justify-content-between align-items-center">
+        <label style="font-size: large;font-weight: 700;color: #414f69;">Additional Skills:</label>
+        <div class="col-md-6" style="margin-right: 32%;">
+        <select id="skills-select" class="form-control" style="font-size: large;margin-bottom: 15px;">
+            <option value="">Select Additional Skills</option>
+            <option value="typing">Typing</option>
+            <option value="shorthand">ShortHand</option>
+            <option value="dataentry">DataEntry</option>
+            <option value="others">Others</option>
+        </select>
+        </div>
+    </div>
+</div>
+		
+							</div>							
+								<div class="col-md-12">
+									<label style="font-size: large;font-weight: 700;color: #414f69;">Proof
+										Documents:</label>
+									<div class="row">
+
+
+										<!-- First File Upload -->
+										<div class="col-md-4">
+											<div class="custom-file-upload">
+												<input type="file" id="file-upload-1" class="form-control"
+													onchange="displayFileName('file-upload-1', 'file-name-1')">
+												<label for="file-upload-1" id="file-label-1">
+													<span class="upload-text" id="upload-text">Upload Aadhar Card</span>
+													<span class="upload-icon">
+														<i class="fas fa-file-upload"></i>
+													</span>
+												</label>
+												<span id="file-name-1" class="file-name"></span>
+											</div>
+										</div>
+
+										<!-- Second File Upload -->
+										<div class="col-md-4">
+											<div class="custom-file-upload">
+												<input type="file" id="file-upload-2" class="form-control"
+													onchange="displayFileName('file-upload-2', 'file-name-2')">
+												<label for="file-upload-2" id="file-label-2">
+													<span class="upload-text" id="upload-text">Upload Bank
+														Passbook</span>
+													<span class="upload-icon">
+														<i class="fas fa-file-upload"></i>
+													</span>
+												</label>
+												<span id="file-name-2" class="file-name"></span>
+											</div>
+										</div>
+
+										<!-- Third File Upload -->
+										<div class="col-md-4">
+											<div class="custom-file-upload">
+												<input type="file" id="file-upload-3" class="form-control"
+													onchange="displayFileName('file-upload-3', 'file-name-3')">
+												<label for="file-upload-3" id="file-label-3">
+													<span class="upload-text" id="upload-text">Upload Ration Card</span>
+													<span class="upload-icon">
+														<i class="fas fa-file-upload"></i>
+													</span>
+												</label>
+												<span id="file-name-3" class="file-name"></span>
+											</div>
+										</div>
+										
+										<!-- Fourth File Upload -->
+										<div class="col-md-4">
+											<div class="custom-file-upload">
+												<input type="file" id="file-upload-4" class="form-control"
+													onchange="displayFileName('file-upload-4', 'file-name-4')">
+												<label for="file-upload-4" id="file-label-4">
+													<span class="upload-text" id="upload-text">Upload Staff Photo</span>
+													<span class="upload-icon">
+														<i class="fas fa-file-upload"></i>
+													</span>
+												</label>
+												<span id="file-name-4" class="file-name"></span>
+											</div>
+										</div>
+									</div>
+								</div>	
+								
+								<div class="d-flex justify-content-center">
+							<button class="btn"
+								style="background-color: #414f69; color: white; width: 200px;padding: 10px;margin-bottom: 10px;"
+								id="staffenroll">
+								Enroll Staff
+							</button>
+						</div>						
+							
+
+						</div>
+						
+
+					</div>
+
+
+				</div>
+
+
+			
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+<script th:inline="javascript">
+    function displayFileName(inputId, outputId) {
+        const fileInput = document.getElementById(inputId);
+        const fileNameSpan = document.getElementById(outputId);
+        const fileName = fileInput.files[0]?.name || 'No file chosen';
+        fileNameSpan.textContent = fileName;
+    }
+
+    function isValidAge(dob) {
+        const today = new Date();
+        const birthDate = new Date(dob);
+        let age = today.getFullYear() - birthDate.getFullYear();
+        const monthDifference = today.getMonth() - birthDate.getMonth();
+
+        // Adjust age if the birth date hasn't occurred yet this year
+        if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
+            age--;
+        }
+
+        // Age should be at least 18
+        return age >= 18;
+    }
+
+$(document).ready(function () {
+    $('#staffenroll').click(function () {
+        const dob = document.getElementById('dob-input').value;
+        
+        if (!isValidAge(dob)) {
+            Swal.fire({
+                title: 'Invalid Date of Birth',
+                text: 'Age must be at least 18 years old.',
+                icon: 'error',
+                confirmButtonText: 'OK',
+                background: '#f5f5f5',
+                confirmButtonColor: '#414f69'
+            });
+            return false;
+        }
+
+        const staffData = {
+            name: document.getElementById('staff-name-input').value,
+            phoneNumber: document.getElementById('phone-number-input').value,
+            gender: document.getElementById('gender-select').value,
+            dateOfBirth: dob,
+            educationQualification: document.getElementById('educationQualification').value,
+            additionalSkills: document.getElementById('skills-select').value,
+            aadharCardUrl: document.getElementById('file-name-1').textContent,
+            rationCardUrl: document.getElementById('file-name-3').textContent,
+            bankPassbookUrl: document.getElementById('file-name-2').textContent,
+            staffPhotoUrl: document.getElementById('file-name-4').textContent,
+            address: document.getElementById('address-input').value, // Ensure this is included
+            groupId: document.getElementById('selfHelpGroupDropdown').value,
+        };
+
+        console.log(staffData); // Debug log
+
+        $.ajax({
+            url: '/gcc/api/nulm/saveStaff',
+            method: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify(staffData),
+            success: function (response) {
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Success',
+                    text: response,
+                }).then(function () {
+                    location.reload();
+                });
+            },
+            error: function (xhr, status, error) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Error',
+                    text: 'Error saving staff details: ' + xhr.responseText,
+                });
+            }
+        });
+    });
+
+
+	    document.getElementById('educationQualification').addEventListener('change', function () {
+	        var selectedValue = this.value;
+	        var courseNameField = document.getElementById('courseNameField');
+
+	        if (selectedValue === 'UG' || selectedValue === 'PG') {
+	            courseNameField.style.display = 'block';
+	        } else {
+	            courseNameField.style.display = 'none';
+	        }
+	    });
+
+	    function loadSchemeGroupNames() {
+	        $.ajax({
+	            url: '/gcc/api/nulm/getAllSchemeGroupNames',
+	            method: 'GET',
+	            dataType: 'json',
+	            success: function (data) {
+	                var $dropdown = $('#selfHelpGroupDropdown');
+	                $dropdown.empty();
+	                $dropdown.append('<option value="">Select Scheme Group</option>');
+	               $.each(data, function (index, group) {
+                    $dropdown.append('<option value="' + group.group_id + '">' + group.group_name + '</option>');
+                });
+	            },
+	            error: function (xhr, status, error) {
+	                console.error('Error fetching scheme group names:', error);
+	            }
+	        });
+	    }
+
+	    loadSchemeGroupNames();
+	});
+
+</script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/update.html b/target/classes/templates/modules/nulm/update.html
new file mode 100644
index 0000000..589f79e
--- /dev/null
+++ b/target/classes/templates/modules/nulm/update.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="ISO-8859-1">
+<title>Insert title here</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/updated-staff.html b/target/classes/templates/modules/nulm/updated-staff.html
new file mode 100644
index 0000000..6cb2e5d
--- /dev/null
+++ b/target/classes/templates/modules/nulm/updated-staff.html
@@ -0,0 +1,380 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+	<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Staff Details Updation</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 active" aria-current="page">Staff Details Updation</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+                    <div class="card-block">
+						
+                        <div>
+							
+							<form id="departmentFilterForm" method="GET" action="/gcc/nulm/updateStaff">
+							    <div class="form-group">
+							        <label for="zone">Zone (Department)</label>
+							        <select class="form-control" id="zone" name="department" style="width: 300px;" onchange="this.form.submit()">
+							            <option value="">Select Zone</option>
+							            <option th:each="department : ${departments}"
+							                    th:value="${department.department}"
+							                    th:text="${department.department}"
+							                    th:selected="${department.department == selectedDepartment}">
+							            </option>
+							        </select>
+							    </div>
+							</form>
+                            <table id="salaryDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+                                <thead class="thead-dark">
+                                    <tr role="row">
+                                        <th>S.No</th>
+                                        <th>Employee ID</th>
+							            <th>Employee Name</th>
+							            <th>Designation</th>
+							            <th>Gender</th>
+							            <th>Date Of Birth</th>
+                                        <th>Action</th>
+                                    </tr>
+                                </thead>
+                                 <tbody>
+                                     <tr th:each="enrollments, i : ${enrollments}">
+                                      <td th:text="${i.count}">0</td>
+                                      <td th:text="${enrollments.emp_id}"></td>
+                                        <td th:text="${enrollments.name}"></td>
+                                        <td th:text="${enrollments.designation}"></td>
+                                        <td th:text="${enrollments.gender}"></td>
+                                        <td th:text="${enrollments.date_of_birth}"></td>
+                                        <td class="text-center">
+                                            <a href="#" th:onclick="return callEdit([[${enrollments.enrollment_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit"><i class="ik ik-edit f-16 mr-15 text-green"></i></a>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                                <tfoot class="thead-dark">
+                                    <tr role="row">
+                                        <th>S.No</th>
+                                        <th>Employee ID</th>
+							            <th>Employee Name</th>
+							            <th>Designation</th>
+							            <th>Gender</th>
+							            <th>Date Of Birth</th>
+                                        <th>Action</th>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </div>
+                    </div>
+						
+
+					
+	
+	
+	<!-- Enrollment Edit Modal -->
+<div class="modal fade" id="editEnrollmentModal" tabindex="-1" role="dialog" aria-labelledby="editEnrollmentModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="editEnrollmentModalLabel">Edit Enrollment Details</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <!-- Form for Editing Enrollment -->
+                <form id="editEnrollmentForm">
+                    <input type="hidden" id="enrollmentId" name="enrollmentId">
+                    <div class="form-group">
+                        <label for="name">Name</label>
+                        <input type="text" class="form-control" id="name" name="name" disabled style="color: black;">
+                    </div>
+                    <div class="form-group">
+                        <label for="dateOfBirth">Date of Birth</label>
+                        <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="gender">Gender</label>
+                        <input type="text" class="form-control" id="gender" name="gender" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="gender">Designation</label>
+                        <input type="text" class="form-control" id="designation" name="designation" disabled style="color: black;">
+                    </div>
+                    <div class="form-group">
+					      <label for="inchargeName">Incharge Name</label>
+					      <input type="text" class="form-control" id="inchargename" name="inchargename" disabled style="color: black;">
+					 </div>
+					 <div class="form-group">
+						 <label for="phoneNumber">Incharge Number</label>
+						 <input type="number" class="form-control" id="inchargeno" name="inchargeno" disabled style="color: black;">
+					 </div>
+					 <div class="form-group">
+					    <label for="shg">Self Help Group</label>
+					    <select class="form-control" id="shg" name="shg" required>
+					        <!-- Dropdown options will be populated dynamically via JavaScript -->
+					    </select>
+					</div>
+					
+					<div class="form-group">
+					    <label for="orderNumber">Order Number</label>
+					    <select class="form-control" id="orderNumber" name="orderNumber" required>
+					        <!-- Dropdown options will be populated dynamically via JavaScript -->
+					    </select>
+					</div>
+                    <!-- Add more fields as needed -->
+                    <button type="button" class="btn btn-primary" id="updateEnrollmentButton">Save Changes</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+	
+	</div>
+
+
+				</div>
+
+
+			
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+	
+	<div th:replace="~{fragments/modules/pgr/modal-box :: div}"></div>
+
+	<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+
+	<script th:replace="~{fragments/modules/base/script :: script}"></script>
+	<script th:replace="~{fragments/modules/pgr/script :: script}"></script>
+<script th:inline="javascript">
+
+ $(document).ready(function () {
+        // Initialize DataTable
+        const table = $('#salaryDatatable').DataTable({
+            dom: 'Bftip',
+            columnDefs: [
+                { targets: 'no-sort', orderable: false }
+            ],
+            lengthMenu: [
+                [50, 100, 200, 500, -1],
+                ['50 rows', '100 rows', '200 rows', 'Show all']
+            ],
+            scrollY: '50vh',
+            fixedColumns: {
+                left: 1,
+                right: 1
+            },
+            buttons: [
+                { extend: 'pageLength', className: 'btn btn-warning' },
+                { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary', id: 'copyBtn' },
+                { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary', id: 'excelBtn' },
+                { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary', id: 'csvBtn' },
+                { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary', id: 'pdfBtn' }
+            ],
+            fixedHeader: true,
+            autoWidth: true,
+            responsive: true,
+            searching: true,
+            select: false,
+            processing: false       
+        });
+
+        // Function to open the edit modal and populate data
+        window.callEdit = function (enrollmentId) {
+            fetchEnrollmentDetails(enrollmentId);
+            return false; // Prevent default anchor click behavior
+        };
+        
+               function loadDepartments(selectedDepartment) {
+			    $.ajax({
+			        url: '/gcc/api/nulm/getDepartment',
+			        type: 'GET',
+			        success: function (response) {
+			            const departmentDropdown = $('#zone');
+			            departmentDropdown.empty(); // Clear existing options
+			            departmentDropdown.append('<option value="">Select Zone</option>');
+			
+			            response.forEach(function (department) {
+			                const departmentName = department.department; // Correct the attribute name if necessary
+			                const isSelected = departmentName === selectedDepartment ? 'selected' : '';
+			                departmentDropdown.append(new Option(departmentName, departmentName, false, isSelected));
+			            });
+			
+			            // If no department selected, show "Select Zone"
+			            if (!selectedDepartment) {
+			                departmentDropdown.val('');
+			            }
+			        },
+			        error: function (xhr, status, error) {
+			            console.error('Error fetching departments:', error);
+			        }
+			    });
+			}
+
+        // Load departments on page load
+        const selectedDepartment = /*[[${selectedDepartment}]]*/ ''; // Get this from Thymeleaf or other server-side context
+        loadDepartments(selectedDepartment);
+
+        function fetchEnrollmentDetails(enrollmentId) {
+            $.ajax({
+                url: `/gcc/api/nulm/getEnrollmentdeatilsByID/${enrollmentId}`,
+                type: 'GET',
+                success: function (response) {
+                    if (response && response.length > 0) {
+                        const enrollment = response[0];
+                        // Populate modal fields with data
+                        $('#enrollmentId').val(enrollment.enrollment_id);
+                        $('#name').val(enrollment.name);
+                        $('#dateOfBirth').val(enrollment.date_of_birth);
+                        $('#gender').val(enrollment.gender);
+                        $('#designation').val(enrollment.designation);
+                        $('#inchargename').val(enrollment.incharge_name);
+                        $('#inchargeno').val(enrollment.incharge_phoneno);
+                        
+                        // Call fetchDropdownData and pass the existing group and order values
+                        fetchDropdownData(enrollment.group_id, enrollment.order_id);
+                        
+                        // Open the modal
+                        $('#editEnrollmentModal').modal('show');
+                    } else {
+                        alert('Enrollment details not found.');
+                    }
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error fetching enrollment details:', error);
+                    alert('An error occurred while fetching enrollment details.');
+                }
+            });
+        }
+
+        function fetchDropdownData(selectedGroupId, selectedOrderId) {
+            // Fetch Self Help Group dropdown
+            $.ajax({
+                url: '/gcc/api/nulm/selfHelpGroups',
+                type: 'GET',
+                success: function (response) {
+                    const selfHelpGroupDropdown = $('#shg');
+                    selfHelpGroupDropdown.empty(); // Clear existing options
+                    selfHelpGroupDropdown.append('<option value="">Select Self Help Group</option>');
+
+                    response.forEach(function (item) {
+                        const isSelected = item.groupId == selectedGroupId ? 'selected' : ''; // Check if this option should be selected
+                        selfHelpGroupDropdown.append(new Option(item.groupName, item.groupId, false, isSelected));
+                    });
+
+                    // If no group selected, show "Select Self Help Group"
+                    if (!selectedGroupId) {
+                        selfHelpGroupDropdown.val('');
+                    }
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error fetching self-help groups:', error);
+                }
+            });
+
+            // Fetch Order Number dropdown
+            $.ajax({
+                url: '/gcc/api/nulm/orderNumbers',
+                type: 'GET',
+                success: function (response) {
+                    const orderNumberDropdown = $('#orderNumber');
+                    orderNumberDropdown.empty(); // Clear existing options
+                    orderNumberDropdown.append('<option value="">Select Order Number</option>');
+
+                    response.forEach(function (item) {
+                        const isSelected = item.orderId == selectedOrderId ? 'selected' : ''; // Check if this option should be selected
+                        orderNumberDropdown.append(new Option(item.orderNumber, item.orderId, false, isSelected));
+                    });
+
+                    // If no order selected, show "Select Order Number"
+                    if (!selectedOrderId) {
+                        orderNumberDropdown.val('');
+                    }
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error fetching order numbers:', error);
+                }
+            });
+        }
+
+        $('#updateEnrollmentButton').on('click', function () {
+            const enrollmentId = $('#enrollmentId').val();
+            const updatedData = {
+                name: $('#name').val(),
+                dateOfBirth: $('#dateOfBirth').val(),
+                gender: $('#gender').val(),
+                groupId: $('#shg').val(),  // Get the selected group_id from dropdown
+                orderId: $('#orderNumber').val()  // Get the selected order_id from dropdown
+            };
+
+            $.ajax({
+                url: `/gcc/api/nulm/updateEnrollment/${enrollmentId}`,
+                type: 'POST',
+                data: updatedData,
+                success: function (response) {
+                    Swal.fire({
+                        title: 'Success!',
+                        text: 'Enrollment updated successfully!',
+                        icon: 'success',
+                        confirmButtonText: 'OK'
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            $('#editEnrollmentModal').modal('hide'); // Hide the modal
+                            location.reload(); // Optionally reload the page to refresh the data
+                        }
+                    });
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error updating enrollment details:', error);
+                    alert('An error occurred while updating enrollment details.');
+                }
+            });
+        });       
+
+
+    });
+
+</script>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/nulm/zone-wise-report.html b/target/classes/templates/modules/nulm/zone-wise-report.html
new file mode 100644
index 0000000..8cef154
--- /dev/null
+++ b/target/classes/templates/modules/nulm/zone-wise-report.html
@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+
+<body>
+	<div class="wrapper">
+		<header th:replace="~{fragments/modules/base/header :: header}"></header>
+
+		<div class="page-wrap">
+			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
+			<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="ik ik-thumbs-up bg-blue"></i>
+									<div class="d-inline">
+										<h5>NULM STAFF</h5>
+										<span>Zone wise Report</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 active" aria-current="page">Zone wise Report</li>
+									</ol>
+								</nav>
+							</div>
+						</div>
+					</div>
+
+					<hr>
+
+					<!-- Filters Section -->
+					<div class="row">
+						
+						<div class="col-sm-3">
+							<label for="zone">Zone</label>
+							<select id="zone" class="form-control">
+								<option value="">Select</option>
+								<option value="1">Zone 01</option>
+								<option value="2">Zone 02</option>
+								<option value="3">Zone 03</option>
+								<option value="4">Zone 04</option>
+								<option value="5">Zone 05</option>
+								<option value="6">Zone 06</option>
+								<option value="7">Zone 07</option>
+								<option value="8">Zone 08</option>
+								<option value="9">Zone 09</option>
+								<option value="10">Zone 10</option>
+								<option value="11">Zone 11</option>
+								<option value="12">Zone 12</option>
+								<option value="13">Zone 13</option>
+								<option value="14">Zone 14</option>
+								<option value="15">Zone 15</option>
+							</select>
+						</div>
+						
+						<!-- Division -->
+						<div class="col-md-3 form-group">
+							<label for="division">Division</label>
+							<select class="form-control" id="division" name="division" required>
+								<option value="">Select Division</option>
+								<option th:each="division : ${divisionList}" th:value="${division.division}" th:text="${division.division}"
+									th:selected="${division.division == selectedDivision}">
+								</option>
+							</select>
+						</div>
+						
+						<!-- Year -->
+						<div class="col-md-3 form-group">
+							<label for="year">Year</label>
+							<select class="form-control" id="year" name="year" required>
+								<option value="">Select Year</option>
+								<option th:each="year : ${yearList}" th:value="${year.year}" th:text="${year.year}"
+									th:selected="${year.year == selectedYear}">
+								</option>
+							</select>
+						</div>
+						
+						<!-- Month -->
+						<div class="col-md-3 form-group">
+							<label for="month">Month</label>
+							<select id="month" class="form-control" name="month" required>
+								<option value="">Select Month</option>
+								<option th:each="month : ${monthList}" th:value="${month.month}" th:text="${month.month}"
+									th:selected="${month.month == selectedMonth}">
+								</option>
+							</select>
+						</div>
+
+						<div class="col-sm-3">
+							<label for="salaryStatus">Salary Status:</label>
+							<select id="salaryStatus" class="form-control">
+								<option value="">Select</option>
+								<option value="Initiated">Initiated</option>
+								<option value="Approved">Approved</option>
+							</select>
+						</div>
+
+						<div class="col-sm-3">
+							<label for="selfhelp">Self Help Group:</label>
+							<select id="selfhelp" class="form-control">
+								<option value="">Select</option>
+								<!-- Group names will be populated here -->
+							</select>
+						</div>
+
+
+
+						<div class="col-sm-3">
+
+							<button class="btn btn-primary mt-4" onclick="fetchZoneReport()">Get Salary Info</button>
+						</div>
+					</div>
+
+					<!-- Salary Report Table -->
+					<div class="card-block mt-3">
+						<table id="salaryreporttable" class="table table-striped table-bordered">
+							<thead class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Incharge Name</th>
+									<th>Incharge Designation</th>
+									<th>Zone</th>
+									<th>Division</th>
+									<th>Self Help Group</th>
+									<th>Days Present</th>
+									<th>OD</th>
+									<th>Total Days for Salary</th>
+									<th>Total Days</th>
+									<th>Total Days Absent</th>
+									<th>Month</th>
+									<th>Year</th>
+									<th>Salary Amount</th>
+									<th>Salary Status</th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr th:each="zone, i : ${zonewiseReport}">
+									<td th:text="${i.count}">1</td>
+									<td th:text="${zone.emp_id}"></td>
+									<td th:text="${zone.name}"></td>
+									<td th:text="${zone.incharge_name}"></td>
+									<td th:text="${zone.incharge_designation}"></td>
+									<td th:text="${zone.zone}"></td>
+									<td th:text="${zone.division}"></td>
+									<td th:text="${zone.group_name}"></td>
+									<td th:text="${zone.total_days_present}"></td>
+									<td th:text="${zone.total_days_od}"></td>
+									<td th:text="${zone.total_days_salary}"></td>
+									<td th:text="${zone.total_days}"></td>
+									<td th:text="${zone.total_days_absent}"></td>
+									<td th:text="${zone.imonth}"></td>
+									<td th:text="${zone.iyear}"></td>
+									<td th:text="${zone.total_salary}"></td>
+									<td th:text="${zone.salary_status}"></td>
+								</tr>
+							</tbody>
+							<tfoot class="thead-dark">
+								<tr>
+									<th>S.No</th>
+									<th>Employee Id</th>
+									<th>Employee Name</th>
+									<th>Incharge Name</th>
+									<th>Incharge Designation</th>
+									<th>Zone</th>
+									<th>Division</th>
+									<th>Self Help Group</th>
+									<th>Days Present</th>
+									<th>OD</th>
+									<th>Total Days for Salary</th>
+									<th>Total Days</th>
+									<th>Total Days Absent</th>
+									<th>Month</th>
+									<th>Year</th>
+									<th>Salary Amount</th>
+									<th>Salary Status</th>
+								</tr>
+							</tfoot>
+						</table>
+					</div>
+
+				</div>
+			</div>
+
+			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+		</div>
+	</div>
+
+	<div th:replace="~{fragments/modules/base/script :: script}"></div>
+
+	<script th:inline="javascript">
+		
+		function loadYear(selectedYear) {
+				$.ajax({
+					url: '/gcc/api/nulm/getYear',
+					type: 'GET',
+					success: function (response) {
+						const yearDropdown = $('#year');
+						yearDropdown.empty(); // Clear existing options
+						yearDropdown.append('<option value="">Select Year</option>');
+
+						response.forEach(function (year) {
+							const yearName = year.year; // Correct the attribute name if necessary
+							const isSelected = yearName === selectedYear ? 'selected' : '';
+							yearDropdown.append(new Option(yearName, yearName, false, isSelected));
+						});
+
+						// If no department selected, show "Select Zone"
+						if (!selectedYear) {
+							yearDropdown.val('');
+						}
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching departments:', error);
+					}
+				});
+			}
+
+
+			const selectedYear = /*[[${selectedYear}]]*/ ''; // Get this from Thymeleaf or other server-side context
+			loadYear(selectedYear);
+
+			function loadMonth(selectedMonth) {
+				const year = document.getElementById('year').value; // Get the selected year
+				if (!year) {
+					$('#month').empty().append('<option value="">Select Month</option>'); // Clear month dropdown if no year selected
+					return; // Exit if no year is selected
+				}
+
+				$.ajax({
+					url: `/gcc/api/nulm/getMonth?year=${year}`,
+					type: 'GET',
+					success: function (response) {
+						const monthDropdown = $('#month');
+						monthDropdown.empty(); // Clear existing options
+						monthDropdown.append('<option value="">Select Month</option>');
+
+						response.forEach(function (month) {
+							const monthName = month.month;
+							monthDropdown.append(new Option(monthName, monthName));
+						});
+					},
+					error: function (xhr, status, error) {
+						console.error('Error fetching months:', error);
+					}
+				});
+			}
+
+			// Load months when the year changes
+			document.getElementById('year').addEventListener('change', function () {
+				loadMonth(); // Call loadMonth when the year is selected
+			});
+			
+			function loadDivision(selectedDivision) {
+				const zone=document.getElementById('zone').value;
+				console.log(zone);
+					$.ajax({
+						url: '/gcc/api/nulm/getDivisionList',
+						type: 'GET',
+						data: {
+							zone: zone
+						},
+						success: function (response) {
+							const divisionDropdown = $('#division');
+							divisionDropdown.empty(); // Clear existing options
+							divisionDropdown.append('<option value="">Select Division</option>');
+
+							response.forEach(function (division) {
+								const divisionName = division.division; // Correct the attribute name if necessary
+								const isSelected = divisionName === selectedDivision ? 'selected' : '';
+								divisionDropdown.append(new Option(divisionName, divisionName, false, isSelected));
+							});
+
+							// If no department selected, show "Select Zone"
+							if (!selectedDivision) {
+								divisionDropdown.val('');
+							}
+						},
+						error: function (xhr, status, error) {
+							console.error('Error fetching zone:', error);
+						}
+					});
+				}
+				
+				// Load division when zone selected
+			document.getElementById('zone').addEventListener('change', function () {
+			loadDivision(); // Call loadDivision when the zone is selected
+			});
+
+
+
+		function fetchZoneReport() {
+			const month = document.getElementById('month').value;
+			const year = document.getElementById('year').value;
+			const salaryStatus = document.getElementById('salaryStatus').value;
+			const groupName=document.getElementById('selfhelp').value;
+			const zone=document.getElementById('zone').value;
+			const division=document.getElementById('division').value;
+
+			if (month && year) {
+				window.location.href = `/gcc/nulm/salary-zonereport?month=${month}&year=${year}&salaryStatus=${salaryStatus}
+				&groupName=${groupName}&zone=${zone}&division=${division}`;
+			} else {
+				alert("Please select both month and year.");
+			}
+		}
+		$(document).ready(function () {
+
+			function clearUrlParams() {
+				const currentUrl = window.location.href;
+				const urlWithoutParams = currentUrl.split('?')[0]; // Remove the query parameters
+				window.history.replaceState({}, document.title, urlWithoutParams); // Replace the current URL without params
+			}
+
+			// Call this on page load to reset the URL
+			clearUrlParams();
+
+			// Initialize DataTable
+			var table = $('#salaryreporttable').DataTable({
+				dom: 'Bftip',
+				columnDefs: [
+					{targets: 'no-sort', orderable: false}
+				],
+				lengthMenu: [
+					[50, 100, 200, 500, -1],
+					['50 rows', '100 rows', '200 rows', 'Show all']
+				],
+				scrollY: '50vh',
+				fixedColumns: {
+					left: 1,
+					right: 1
+				},
+				buttons: [
+					{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+					{
+						title: 'Data export',
+						extend: 'copyHtml5',
+						text: 'Copy',
+						className: 'btn btn-secondary',
+						id: 'copyBtn'
+					},
+					{
+						extend: 'pdfHtml5',
+						text: 'PDF',
+						className: 'btn btn-secondary',
+						id: 'pdfBtn',
+						exportOptions: {
+                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
+                },
+                orientation: 'landscape', // Change to landscape for more horizontal space
+						pageSize: 'A3', // You can change to A4 or A3 depending on your needs
+						customize: function (doc) {
+							// Custom column widths for better fit
+							doc.content[1].table.widths = ['4%', '8%', '8%', '8%', '9%', '4%', '6%', '8%', '7%', '6%', '6%', '6%', '6%', '9%', '9%', '7%','6%'];
+
+							// Optional: Adjust font size if needed
+							doc.styles.tableBodyEven.alignment = 'center';
+							doc.styles.tableBodyOdd.alignment = 'center';
+						}
+					},
+					{
+						extend: 'excelHtml5',
+						text: 'EXCEL',
+						className: 'btn btn-secondary',
+						id: 'excelBtn'
+					},
+					{
+						extend: 'csvHtml5',
+						text: 'CSV',
+						className: 'btn btn-secondary',
+						id: 'csvBtn'
+					}
+				],
+				fixedHeader: true,
+				autoWidth: true,
+				responsive: true,
+				searching: true,
+				select: false,
+				processing: false
+			});
+
+
+		});
+		$(document).ready(function () {
+			$.ajax({
+				url: '/gcc/api/nulm/selfHelpGroups', 
+				type: 'GET',
+				success: function (data) {
+					// Clear existing options (if any)
+					$('#selfhelp').empty().append('<option value="">Select</option>');
+
+					// Check if data is an array and iterate through it
+					if (Array.isArray(data)) {
+						let options = '';
+						data.forEach(function (group) {
+							// Access the correct properties
+							options += `<option value="${group.groupName}">${group.groupName}</option>`;
+						});
+						$('#selfhelp').append(options);
+					} else {
+						console.error("Data is not an array:", data);
+					}
+				},
+				error: function (xhr, status, error) {
+					console.error("Error fetching self-help groups:", error);
+				}
+			});
+		});
+
+
+
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/target/classes/templates/modules/sos/closed_inbox.html b/target/classes/templates/modules/sos/closed_inbox.html
new file mode 100644
index 0000000..db5e9f3
--- /dev/null
+++ b/target/classes/templates/modules/sos/closed_inbox.html
@@ -0,0 +1,427 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>SOS</h5>
+                                            <span>Closed Request List</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" aria-current="page">SOS</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Closed Request List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="circularDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort" width="2%">S.No</th>
+														<th class="text-center" width="10%">Type</th>
+														<th class="text-center no-sort" width="2%">Mode</th>
+						 								<th class="text-center" width="10%">Name</th>
+						 								<th class="text-center" width="10%">Mobile</th>
+						 								<th class="text-center" width="10%">Zone</th>
+														<th class="text-center" width="10%">ward</th>
+														<th class="text-center" width="10%">Street Name</th>
+														<th class="text-center" width="10%">Comments</th>
+														<th class="text-center" width="10%">Status</th>
+						                                <th class="text-center no-sort no-exportable no-print" width="5%"><i class="ik ik-more-horizontal"></i></th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- 
+                                                <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Category</th>
+						 								<th class="text-center">Type</th>
+						 								<th class="text-center">Department</th>
+						 								<th class="text-center">Date</th>
+														<th class="text-center">Subject</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></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/circular/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/circular/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+       		var uploadDirectory = /*[[${uploadDirectory}]]*/'';
+       		
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Circular List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_rescue_data(){
+	        	var apiUrl = '/gcc/api/sos/getRescueList?status=1';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_rescue_list(){
+	        	get_rescue_data().then(function(rescueList) {
+	    		    // Handle the complaint list
+	    		    generate_table(rescueList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching resuce list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching rescue list:', error);
+			        }
+	    		});
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#circularDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false },
+						  { targets: 5, orderSequence: ['desc'] }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        /*scrollY: '50vh',*/
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: true,
+				        searching: false,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	//var rowNum = data.length;
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+					var file_text="";
+					var filetype="";
+					var rescueid=row['id'];
+					var action =`<center><a href="#" onclick="return viewFile(${rescueid});" class="text-blue" data-animation="true" data-toggle="tooltip" data-placement="top" title="View Circular Details" data-original-title="View Circular Details"><i class="ik ik-eye f-16 text-blue"></i></a></center>`;
+			                    
+	                table.row.add([
+	                	rowNum++,
+	                	row['request_type'],
+	                	row['modeofcomplient'],
+	                    row['contact_name'],
+	                    row['contact_number'],
+	                    row['zone'],
+	                    row['ward'],
+	                    row['streetname'],
+	                    row['remarks'],
+	                    row['statusText'],
+	                    action
+	                ]).draw(false);
+	            });
+	            
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+	        
+	        /* Get Complaints Data */
+	        function viewData(rescueid){
+	        	var apiUrl = '/gcc/api/sos/getRescueUpdateData?rescueid='+rescueid;
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        function viewFile(rescueid) {
+	            viewData(rescueid).then(function(rescuedata) {
+	                $.each(rescuedata, function(index, row) {
+	                    // Show Modal Box
+	                    $("#viewFileBox").modal({
+	                        backdrop: 'static',
+	                        keyboard: false
+	                    });
+	                    var fileHTML='';
+	                    var fileHTMLleft = '';
+	                    var fileHTMLright = '';
+	                    $("#viewFileTitle").html("Rescue Information");
+	                    
+	                    $.each(row['Data'], function(index2, rowData) {
+
+		                    fileHTMLleft = `<div class="card mb-0">
+									             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+									                	<h3>Complaint Details</h3>
+									                </div>
+									                <div class="card-body">
+										                <table class="table table-borderless table-vcenter mb-0" style="font-size:12px;">
+													      <tbody>
+													        <tr>
+													          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+													          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+													           ${convertdate(rowData['cdate'])}
+													          </td>
+													        </tr>
+													        
+													        <tr>
+													          <th style="padding: 0.45rem 0.45rem;">Contact Name</th>
+													          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+													           ${rowData['contact_name']}
+													          </td>
+													        </tr>
+													        <tr>
+													          <th style="padding: 0.45rem 0.45rem;">Contact Number :</th>
+													          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+													           ${rowData['contact_number']}
+													          </td>
+													        </tr>
+													        <tr>
+												        	<td colspan="2" style="padding: 0.45rem 0.45rem;">
+													        	<table class="table table-bordered table-vcenter mb-0">
+													                <thead>
+													                  <tr>
+													                    <th>Zone</th>
+													                    <th>Ward</th>
+													                    <th>Street Name</th>
+													                  </tr>
+													                </thead>
+												                	<tbody>
+												                 		<tr>
+															            	<td class="fw-semibold">${rowData['zone']}</td>
+															            	<td class="fw-semibold">${rowData['ward']}</td>
+															            	<td class="fw-semibold">${rowData['streetname']}</td>
+													                  	</tr>
+												                	</tbody>
+												              	</table>
+												        	</td>
+												        </tr>
+													        <tr>
+													          <th colspan="2" style="padding: 0.45rem 0.45rem;"><b>Request Type: </b>${rowData['request_type']}  |  <b>Status: </b>${rowData['status_name']}</p></th>
+													        </tr>
+													        <tr>
+													        	<td colspan="2" style="padding: 0.45rem 0.45rem;">
+														        	<table class="table table-bordered table-vcenter mb-0">
+														                <thead>
+														                  <tr>
+														                    <th>Complaint <i class="fa fa-arrow-right"></i> Status</th>
+														                    <th class="text-right" id="complaint_forward_link"></th>
+														                  </tr>
+														                </thead>
+													                	<tbody>
+													                 		<tr>
+																            	<td colspan="2" class="fw-semibold">
+																            	
+															                    </td>
+														                  	</tr>
+													                	</tbody>
+													              	</table>
+													        	</td>
+													        </tr>
+													      </tbody>
+													    </table>
+									                </div>
+									            </div>`;
+	                    	
+		                    if (rowData['officer_activity_data'] && rowData['officer_activity_data'].length > 0) {
+		                        $.each(rowData['officer_activity_data'], function(activityIndex, activity) {
+		                            var filepath = activity['imageUrl'];
+		                            var filetype = activity['filetype'];
+		                            
+		                            fileHTMLright += `<b>Officer Remarks:</b><br>${activity['remarks']}<hr style="padding:1px;">`;
+		                            
+		                            if (filetype === 'application/pdf') {
+		                            	fileHTMLright += `<iframe src="${filepath}" type="application/pdf" width="100%" height="600px"></iframe>`;
+		                            } else if (filetype === 'image/jpeg' || filetype === 'image/png') {
+		                            	fileHTMLright += `<b>Activity Image:</b><br><img src="${filepath}" alt="${filetype}" style="max-width:100%; height:auto;">`;
+		                            } else {
+		                            	fileHTMLright += ``;
+		                            }
+		                            
+		                       });
+		                    } else {
+		                    	fileHTMLright = '<p>No activity data available for this rescue.</p>';
+		                    }
+	                    });
+	                    
+	                    fileHTML=`<div class="row">
+	                    				<div class="col-lg-6"><div class="block block-rounded">${fileHTMLleft}</div></div>
+	                    				<div class="col-lg-6"><div class="block block-rounded">${fileHTMLright}</div></div>
+	                    		  </div>`;
+	                    		  
+	                    $('#viewFileBoxBody').html(fileHTML); // Inject content into modal body
+	                });
+	            }).catch(function(error) {
+	                // Handle errors
+	                if (error && error.message) {
+	                    console.error('Error fetching rescue details:', error.message);
+	                } else {
+	                    console.error('An error occurred while fetching rescue details:', error);
+	                }
+	            });
+	            return false;
+	        }
+	        
+			
+			$(document).ready(function() {
+				call_loading();
+				get_rescue_list();
+			});
+			
+			
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/sos/inbox.html b/target/classes/templates/modules/sos/inbox.html
new file mode 100644
index 0000000..244efef
--- /dev/null
+++ b/target/classes/templates/modules/sos/inbox.html
@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Circular List</h5>
+                                            <span>Circular / Minutes</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" aria-current="page">SOS</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Request List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="circularDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort" width="2%">S.No</th>
+														<th class="text-center" width="10%">Type</th>
+														<th class="text-center no-sort" width="2%">Mode</th>
+						 								<th class="text-center" width="10%">Name</th>
+						 								<th class="text-center" width="10%">Mobile</th>
+						 								<th class="text-center" width="10%">Zone</th>
+														<th class="text-center" width="10%">ward</th>
+														<th class="text-center" width="10%">Street Name</th>
+														<th class="text-center" width="10%">Comments</th>
+														<th class="text-center" width="10%">Status</th>
+						                                <th class="text-center no-sort no-exportable no-print" width="5%"><i class="ik ik-more-horizontal"></i></th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- 
+                                                <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Category</th>
+						 								<th class="text-center">Type</th>
+						 								<th class="text-center">Department</th>
+						 								<th class="text-center">Date</th>
+														<th class="text-center">Subject</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></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/circular/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/circular/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+       		var uploadDirectory = /*[[${uploadDirectory}]]*/'';
+       		
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Circular List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_rescue_data(){
+	        	var apiUrl = '/gcc/api/sos/getRescueList';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_rescue_list(){
+	        	get_rescue_data().then(function(rescueList) {
+	    		    // Handle the complaint list
+	    		    generate_table(rescueList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching resuce list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching rescue list:', error);
+			        }
+	    		});
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#circularDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false },
+						  { targets: 5, orderSequence: ['desc'] }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        /*scrollY: '50vh',*/
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: true,
+				        searching: false,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	//var rowNum = data.length;
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+
+					var action ="1";//`<center><a href="#" onclick="return viewFile('${file_text}','${filetype}');" class="text-blue" data-animation="true" data-toggle="tooltip" data-placement="top" title="View Circular Details" data-original-title="View Circular Details"><i class="ik ik-eye f-16 text-blue"></i></a></center>`;
+			                    
+	                table.row.add([
+	                	rowNum++,
+	                	row['request_type'],
+	                	row['modeofcomplient'],
+	                    row['contact_name'],
+	                    row['contact_number'],
+	                    row['zone'],
+	                    row['ward'],
+	                    row['streetname'],
+	                    row['remarks'],
+	                    row['statusText'],
+	                    action
+	                ]).draw(false);
+	            });
+	            
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+			$(document).ready(function() {
+				call_loading();
+				get_rescue_list();
+			});
+			
+			function viewFile(filename,filetype){
+	        	$("#viewFileBox").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				var filepath= '/gcc/files/circular/'+filename;
+				var fileHTML = '';
+				
+	        	if(filetype=='application/pdf'){
+	        		fileHTML = `<iframe src="${filepath}" type="application/pdf" width="100%" height="600px"></iframe>`;
+					
+				}
+				else{
+					fileHTML =nodata;
+				}
+				
+	        	console.error(fileHTML);
+	        	
+	        	$('#viewFileBoxBody').html(fileHTML); // Inject content into modal body
+				
+				return false;
+			}
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/sos/new_sos.html b/target/classes/templates/modules/sos/new_sos.html
new file mode 100644
index 0000000..db4b42c
--- /dev/null
+++ b/target/classes/templates/modules/sos/new_sos.html
@@ -0,0 +1,667 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+    <style>
+        html,
+        body,
+        #viewDiv {
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            width: 100%;
+        }
+
+        
+        label {
+            display: block;
+            margin: 5px 0 2px;
+            font-weight: bold;
+        }
+
+        select,
+        input {
+            width: 100%;
+            padding: 5px;
+        }
+
+        #resetButton {
+            margin-top: 10px;
+            padding: 10px;
+            background-color: #ff5733;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+
+        #resetButton:hover {
+            background-color: #e04e1d;
+        }
+    </style>
+    <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css">
+        <!--[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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>SOS</h5>
+                                            <span>Add SOS Request</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">SOS</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Add SOS Request</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        
+                        <div class="row">
+                        	<div class="col-md-2"></div>
+							<div class="col-md-12">
+                                <div class="card">
+									<form class="request-form" id="request-form" onsubmit="return saveRequest();">
+	                                    <div class="card-header"><h3>New SOS Request Form</h3></div>
+	                               		<div class="card-body">
+											<div class="row">	 
+							                     <div class="col-lg-6">
+													<div class="form-group">
+														<label for="contact_names">Requester Name :</label> 
+														<input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name" required>
+													</div>
+												</div>
+												<div class="col-lg-6">
+													<div class="form-group">
+														<label for="contact_number">Requester Contact Number :</label> 
+														<input type="text" id="contact_number" name="contact_number" class="form-control" placeholder="Contact Number" required>
+													</div>
+												</div>
+												<div class="col-12">
+											    	<div id="viewDiv" style="width: 100%; height: 600px;"> &nbsp;</div>
+												</div>
+												<div id="infoContainer">
+												        <div id="infoDiv">
+												            <label for="zoneInput">Zone:</label>
+												            <input type="text" id="zoneInput" placeholder="Zone" readonly>
+												
+												            <label for="wardInput">Ward:</label>
+												            <input type="text" id="wardInput" placeholder="Ward" readonly>
+												
+												            <label for="roadInput">Road Name:</label>
+												            <input type="text" id="roadInput" placeholder="Road Name" readonly>
+												
+												            <label for="addressInput">Address:</label>
+												            <input type="text" id="addressInput" placeholder="Address" readonly>
+												
+												            <label for="latInput">Latitude:</label>
+												            <input type="text" id="latInput" placeholder="Latitude" readonly>
+												
+												            <label for="longInput">Longitude:</label>
+												            <input type="text" id="longInput" placeholder="Longitude" readonly>
+												
+												            <label for="roadBufferSelect">Roads within Area:</label>
+												            <select id="roadBufferSelect">
+												                <option value="">Select Road</option>
+												            </select>
+												
+												            <button id="resetButton">Reset Map</button>
+												        </div>
+												    </div>
+												<div class="col-lg-6">
+													<div class="form-group">
+			                                            <label for="zone">Select Zone</label>
+			                                            <select class="form-control" id="zone" name="zone" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." onchange="get_ward_list(this.value);" required>
+															<option value=""></option>
+														</select>
+			                                        </div>
+		                                      	</div>
+	                                        	<div class="col-lg-6">
+			                                        <div class="form-group">
+			                                            <label for="ward">Select Ward</label>
+			                                            <select class="form-control" id="ward" name="ward" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required  onchange="get_councillor_details(this.value);">
+															<option value=""></option>
+														</select>
+			                                        </div>
+	                                        	</div>
+	                                        	
+	                                        	<div class="col-lg-6">
+													<div class="form-group">
+			                                            <label for="request_type">Select Request Type</label>
+			                                            <select class="form-control" id="request_type" name="request_type" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required>
+															<option value=""></option>
+															<option value="Rescue">Rescue</option>
+															<option value="Medical">Medical</option>
+															<option value="Food">Food</option>
+														</select>
+			                                        </div>
+		                                      	</div>
+	                                        	<div class="col-lg-6">
+			                                        <div class="form-group">
+			                                            <label for="no_of_count">No Of People Count</label>
+			                                            <input type="text" class="form-control" id="no_of_count" name="no_of_count" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required>
+			                                        </div>
+	                                        	</div>
+											</div>
+	                                        
+											<div class="form-group">
+												<label for="subject">Remarks :</label>
+												<textarea class="form-control" name="remarks" id="remarks" rows="5" placeholder="Remarks if any" data-autosize-input='{ "space": 40 }'></textarea>
+											</div>
+	                                        
+										</div>	 
+	                                  	<div class="card-footer text-right">
+	                                  		<input type="hidden" id="mode" name="mode" value="1913">
+											<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+	                                	</div>
+                                	</form>
+                                </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 th:replace="~{fragments/modules/circular/script :: script}"></script>
+        
+   		<script src="https://js.arcgis.com/4.30/"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			
+	        /* Get Zone and Ward Data */
+	        function get_zone_ward_data(){
+	        	get_zone_ward_list().then(function(zoneWard) {
+	    		    // Handle the zoneward list
+	    		    zoneWardList = zoneWard;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(zoneWardList, function(index, zoneWards) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: zoneWards.zone, // case-sensitive as per object
+	    	                text: "Zone "+ zoneWards.zone
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#zone').append(option);
+	    	        });
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			
+	        /* Get Ward List */
+	        function get_ward_list(zone) {
+
+	            // Assuming get_zone_ward_list() returns a promise that resolves to the zoneWardList
+	            get_zone_ward_list().then(function(zoneWard) {
+	                // Handle the zoneWard list
+	                zoneWardList = zoneWard;
+	                
+	                // Clear any existing options in the ward dropdown
+	                $('#ward').empty();
+	                
+	                var option = $('<option>', {
+                        value:"" ,  // Set ward number as the value
+                        text:""  // Display as "Ward 1", "Ward 2", etc.
+                    });
+	                
+	                $('#ward').append(option);
+	                
+	                $('#councillorName').val('');
+					$('#councillorMobile').val('');
+					
+	            	 // Find the correct zone in the zoneWardList
+	                var selectedZone = zoneWardList.find(function(zoneWards) {	                    
+						return zoneWards.zone == zone;  // Compare the zone value
+	                });
+	                // If the zone is found, iterate over its wards and add options
+	                if (selectedZone) {
+	                    var wardsArray = selectedZone.wards.split(',');  // Split wards string into array
+	                    $.each(wardsArray, function(index, ward) {
+	                        // Create an option element
+	                        option = $('<option>', {
+	                            value: ward.trim(),  // Set ward number as the value
+	                            text: 'Ward ' + ward.trim()  // Display as "Ward 1", "Ward 2", etc.
+	                        });
+	                        // Append the option to the select element
+	                        $('#ward').append(option);
+	                    });
+	                } else {
+	                    console.error('Zone not found');
+	                }
+
+	            }).catch(function(error) {
+	                // Handle errors
+	                console.error('Error fetching ward list:', error);
+	            });
+	        }
+	        
+	        /* Zone and Ward List */
+	    	function get_zone_ward_list() {
+	    	    
+	    		var apiUrl = '/gcc/api/sos/getZoneAndWard';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	    	}
+	        
+			// Save New petition 
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var inputElementComplaintType = $('#request_type');
+				var request_type = inputElementComplaintType.val();
+				var loginId = $('#contact_number').val();
+				if (request_type && loginId) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#request-form')[0]);
+			        formData.append('createdBy',createdBy);
+			        formData.append('loginId',loginId);
+			        saveFormData(formData).then(function(response) {
+			        	const status = response[0].status;
+						if(status!="error"){
+							// Handle the response
+		    		    	Swal.fire({
+		        				title: 'Rescue data saved successfully.',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'success',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					// Reload the current page
+		        					//location.reload();
+		        					// Navigate to a Ack page
+		        					window.location = "/gcc/sos/new";
+		        				}
+		        			});
+						}
+						else{
+							// Handle the response
+							// if response == "error"
+		    		    	Swal.fire({
+		        				title: 'Failed to save rescue data. Please try again!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+		    		    
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save circular:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					//inputElementMobileNo.addClass('is-invalid');
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function saveFormData(formData){
+				var apiUrl = '/gcc/api/sos/saveRequest';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function form_btn_enable(){
+				$("#resetFormBtn").prop("disabled", false);
+				$("#requestSubmitBtn").prop("disabled", false);
+				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+			}
+			
+			function form_btn_disable(){
+				$("#resetFormBtn").prop("disabled", true);
+				$("#requestSubmitBtn").prop("disabled", true);
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+			}
+			
+			$(document).ready(function() {
+				//get_circular_type_data();
+				get_zone_ward_data();
+				//get_department_data();
+				//$('#petitionerMobile').mask('0000000000');
+			});
+		</script>
+		
+		<script>
+        require([
+            "esri/Map",
+            "esri/views/MapView",
+            "esri/layers/FeatureLayer",
+            "esri/widgets/Search",
+            "esri/geometry/geometryEngine",
+            "esri/Graphic",
+            "esri/widgets/LayerList",
+            "esri/widgets/Legend",
+            "esri/geometry/projection"
+        ], function (Map, MapView, FeatureLayer, Search, geometryEngine, Graphic, LayerList, Legend, projection) {
+
+            // Create the map and view
+            const map = new Map({
+                basemap: "streets"
+            });
+
+            const view = new MapView({
+                container: "viewDiv",
+                map: map,
+                center: [80.237617, 13.067439],
+                zoom: 12
+            });
+
+            // Define the road layer (FeatureLayer) to query
+            const roadLayer = new FeatureLayer({
+                url: "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/APIRoadsMap/FeatureServer/0",
+                outFields: ["zone", "ward", "road_name", "address"],
+                renderer: {
+                    type: "simple",
+                    symbol: {
+                        type: "simple-line",
+                        color: "red",
+                        width: 0.5
+                    }
+                },
+                popupTemplate: {
+                    title: "{road_name}",
+                    content: "Zone: {zone}<br>Ward: {ward}<br>Address: {address}"
+                }
+            });
+
+            map.add(roadLayer);
+
+            const searchWidget = new Search({
+                view: view
+            });
+
+            const layerList = new LayerList({
+                view: view
+            });
+
+            // Add widgets to view
+            view.ui.add(layerList, {
+                position: "top-right"
+            });
+
+            const legend = new Legend({
+                view: view
+            });
+            view.ui.add(legend, {
+                position: "bottom-right"
+            });
+            view.ui.add(searchWidget, "top-right");
+
+            // Create a point graphic and store the reference to it for later use
+            let pointGraphic = null;
+            let highlightGraphic = null;  // To store the highlighted road graphic
+
+            // Event listener for map click on the basemap
+            view.on("click", function (event) {
+				reset();
+                const clickedPoint = event.mapPoint; // Capture the clicked point
+
+                // Update latitude and longitude fields
+                document.getElementById("latInput").value = clickedPoint.latitude.toFixed(6);
+                document.getElementById("longInput").value = clickedPoint.longitude.toFixed(6);
+
+                // Create a buffer around the clicked point (500 meters)
+                const buffer = geometryEngine.buffer(clickedPoint, 50, "meters");
+
+                // Query the road layer for roads within the buffer
+                const query = roadLayer.createQuery();
+                query.geometry = buffer;  // Use the buffer geometry to filter results
+                query.spatialRelationship = "intersects";
+                query.outFields = ["road_name"];  // Only fetch road names
+                query.returnGeometry = false;
+
+                roadLayer.queryFeatures(query).then(function (result) {
+                    const roadNames = result.features.map(function (feature) {
+                        return feature.attributes.road_name;
+                    });
+
+                    // Populate the dropdown with road names
+                    populateDropdown(roadNames);
+                }).catch(function (error) {
+                    console.error("Query failed: ", error);
+                });
+
+                // Create a new point graphic to show the clicked location
+                if (pointGraphic) {
+                    view.graphics.remove(pointGraphic); // Remove the old graphic if it exists
+                }
+
+                pointGraphic = new Graphic({
+                    geometry: clickedPoint,
+                    symbol: {
+                        type: "simple-marker",
+                        color: "blue",
+                        size: "14px"
+                    }
+                });
+
+                view.graphics.add(pointGraphic); // Add the point graphic to the map
+            });
+
+            // Function to populate the dropdown with road names
+            function populateDropdown(roadNames) {
+				
+                const dropdown = document.getElementById("roadBufferSelect");
+                dropdown.innerHTML = ''; // Clear existing dropdown items
+                
+                const defaultOption = document.createElement("option");
+                defaultOption.text = "Select a road";
+                dropdown.appendChild(defaultOption);
+                roadNames.sort();
+				
+                // Populate the dropdown with the queried road names
+                if (roadNames.length > 0) {
+                    roadNames.forEach(function (roadName) {
+                        const option = document.createElement("option");
+                        option.value = roadName;
+                        option.text = roadName;
+                        dropdown.appendChild(option);
+                    });
+                } else {
+                    const noRoadsOption = document.createElement("option");
+                    noRoadsOption.text = "No roads found within 500m";
+                    dropdown.appendChild(noRoadsOption);
+                }
+            }
+
+            // When a user selects a road from the dropdown, fetch additional details (zone, ward, address) and zoom to the road
+            document.getElementById("roadBufferSelect").addEventListener("change", function (event) {
+                const selectedRoadName = event.target.value;
+                if (selectedRoadName) {
+                    // Query the road layer to get the details and geometry of the selected road
+                    const query = roadLayer.createQuery();
+                    query.where = `road_name = '${selectedRoadName}'`;  // Query for the selected road name
+                    query.outFields = ["zone", "ward", "address"];  // Get zone, ward, and address
+                    query.returnGeometry = true;  // We need the geometry to zoom to the road
+
+                    roadLayer.queryFeatures(query).then(function (result) {
+                        if (result.features.length > 0) {
+                            const roadDetails = result.features[0].attributes;
+                            const roadGeometry = result.features[0].geometry;
+
+                            // Populate the fields with the road details
+                            document.getElementById("zoneInput").value = roadDetails.zone || "";
+                            document.getElementById("wardInput").value = roadDetails.ward || "";
+                            document.getElementById("addressInput").value = roadDetails.address || "";
+                            document.getElementById("roadInput").value = selectedRoadName;  // Populate the road name field
+							
+							/*
+			                alert(document.getElementById("zoneInput").value);
+			                alert(document.getElementById("wardInput").value);
+			                alert(document.getElementById("addressInput").value);
+			                alert(document.getElementById("roadInput").value);
+			                alert(document.getElementById("latInput").value);
+			                alert(document.getElementById("longInput").value);
+			                alert(document.getElementById("roadBufferSelect").value);
+							*/
+                            // Zoom to the selected road with level 15
+                            view.goTo({
+                                target: roadGeometry,
+                                zoom: 15
+                            });
+
+                            // Highlight the road
+                            if (highlightGraphic) {
+                                view.graphics.remove(highlightGraphic);  // Remove the previous highlight if any
+                            }
+
+                            highlightGraphic = new Graphic({
+                                geometry: roadGeometry,
+                                symbol: {
+                                    type: "simple-line",
+                                    color: "green",
+                                    width: 4
+                                }
+                            });
+
+                            view.graphics.add(highlightGraphic); // Add the highlight graphic to the map
+                        }
+                    }).catch(function (error) {
+                        console.error("Error fetching road details: ", error);
+                    });
+                } else {
+                    // Clear the input fields if no road is selected
+                    document.getElementById("zoneInput").value = "";
+                    document.getElementById("wardInput").value = "";
+                    document.getElementById("addressInput").value = "";
+                    document.getElementById("roadInput").value = "";
+                }
+            });
+
+            // Reset map (clear the point graphic and highlighted road)
+            document.getElementById("resetButton").addEventListener("click", function () {
+                if (pointGraphic) {
+                    view.graphics.remove(pointGraphic); // Remove the point graphic
+                    pointGraphic = null; // Reset the point graphic variable
+                }
+                if (highlightGraphic) {
+                    view.graphics.remove(highlightGraphic); // Remove the highlight graphic
+                    highlightGraphic = null; // Reset the highlight graphic variable
+                }
+                // Clear input fields
+                document.getElementById("zoneInput").value = "";
+                document.getElementById("wardInput").value = "";
+                document.getElementById("addressInput").value = "";
+                document.getElementById("roadInput").value = "";
+                document.getElementById("latInput").value = "";
+                document.getElementById("longInput").value = "";
+                document.getElementById("roadBufferSelect").value = "";
+            });
+			
+			function reset(){
+                
+                // Clear input fields
+                document.getElementById("zoneInput").value = "";
+                document.getElementById("wardInput").value = "";
+                document.getElementById("addressInput").value = "";
+                document.getElementById("roadInput").value = "";
+                //document.getElementById("latInput").value = "";
+                //document.getElementById("longInput").value = "";
+                document.getElementById("roadBufferSelect").value = "";
+			}
+			
+			
+			
+        });
+		/*
+		function test(){
+            alert(document.getElementById("zoneInput").value);
+            alert(document.getElementById("wardInput").value);
+            alert(document.getElementById("addressInput").value);
+            alert(document.getElementById("roadInput").value);
+            alert(document.getElementById("latInput").value);
+            alert(document.getElementById("longInput").value);
+            alert(document.getElementById("roadBufferSelect").value);
+		}*/
+    </script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/sos/pending_inbox.html b/target/classes/templates/modules/sos/pending_inbox.html
new file mode 100644
index 0000000..db91a0a
--- /dev/null
+++ b/target/classes/templates/modules/sos/pending_inbox.html
@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>SOS</h5>
+                                            <span>Pending Request List</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" aria-current="page">SOS</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Pending Request List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="circularDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort" width="2%">S.No</th>
+														<th class="text-center" width="10%">Type</th>
+						                                <th class="text-center no-sort" width="2%">Mode</th>
+						 								<th class="text-center" width="10%">Name</th>
+						 								<th class="text-center" width="10%">Mobile</th>
+						 								<th class="text-center" width="10%">Zone</th>
+														<th class="text-center" width="10%">ward</th>
+														<th class="text-center" width="10%">Street Name</th>
+														<th class="text-center" width="10%">Comments</th>
+														<th class="text-center" width="10%">Status</th>
+						                                <th class="text-center no-sort no-exportable no-print" width="5%"><i class="ik ik-more-horizontal"></i></th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- 
+                                                <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Category</th>
+						 								<th class="text-center">Type</th>
+						 								<th class="text-center">Department</th>
+						 								<th class="text-center">Date</th>
+														<th class="text-center">Subject</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></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/circular/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/circular/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+       		var uploadDirectory = /*[[${uploadDirectory}]]*/'';
+       		
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Circular List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Circular List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_rescue_data(){
+	        	var apiUrl = '/gcc/api/sos/getRescueList?status=0';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_rescue_list(){
+	        	get_rescue_data().then(function(rescueList) {
+	    		    // Handle the complaint list
+	    		    generate_table(rescueList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching resuce list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching rescue list:', error);
+			        }
+	    		});
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	
+	            var table = $('#circularDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false },
+						  { targets: 5, orderSequence: ['desc'] }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        /*scrollY: '50vh',*/
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: true,
+				        searching: false,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	//var rowNum = data.length;
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+
+					var action =`<center><a href="#" onclick="return viewSOS('${row['id']}');" class="text-blue" data-animation="true" data-toggle="tooltip" data-placement="top" title="View SOS Details" data-original-title="View SOS Details"><i class="ik ik-eye f-16 text-blue"></i></a></center>`;
+			                    
+	                table.row.add([
+	                	rowNum++,
+	                	row['request_type'],
+	                	row['modeofcomplient'],
+	                    row['contact_name'],
+	                    row['contact_number'],
+	                    row['zone'],
+	                    row['ward'],
+	                    row['streetname'],
+	                    row['remarks'],
+	                    row['statusText'],
+	                    action
+	                ]).draw(false);
+	            });
+	            
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+			$(document).ready(function() {
+				call_loading();
+				get_rescue_list();
+			});
+			
+			function viewFile(filename,filetype){
+	        	$("#viewFileBox").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				var filepath= '/gcc/files/circular/'+filename;
+				var fileHTML = '';
+				
+	        	if(filetype=='application/pdf'){
+	        		fileHTML = `<iframe src="${filepath}" type="application/pdf" width="100%" height="600px"></iframe>`;
+					
+				}
+				else{
+					fileHTML =nodata;
+				}
+				
+	        	console.error(fileHTML);
+	        	
+	        	$('#viewFileBoxBody').html(fileHTML); // Inject content into modal body
+				
+				return false;
+			}
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/sos/report.html b/target/classes/templates/modules/sos/report.html
new file mode 100644
index 0000000..abeda82
--- /dev/null
+++ b/target/classes/templates/modules/sos/report.html
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Complaint List</h5>
+                                            <span>Councillor Petition</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" aria-current="page">Councillor Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Complaint List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+										<div id="tableLoading"></div>
+                                        <div>
+											<table id="circularDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort" width="2%">S.No</th>
+														<th class="text-center">Department</th>
+														<th class="text-center">Count</th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+		
+	    <div th:replace="~{fragments/modules/circular/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/circular/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Circular Report'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Circular Report'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Circular Report'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Circular Report',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_circular_data(){
+	        	var apiUrl = '/gcc/api/circular/getReport';
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_circular_list(){
+	        	get_circular_data().then(function(circularList) {
+
+        			// Iterate over the data array
+        			var rowNum = 1;
+		            $.each(circularList, function(index, row) {
+		                var department_name = row["name"];
+		                department_name = department_name.charAt(0).toUpperCase() + department_name.slice(1);
+
+		                // Create an array to store the dynamic values for this row
+		                var dynamicValues = [];
+
+		                // Iterate over the keys in the row object
+		                for (var key in row) {
+		                    // Check if the key starts with "dynamic_"
+		                    if (key.startsWith('dynamic_')) {
+		                        // Extract the field name without the "dynamic_" prefix
+		                        var fieldName = key.substring('dynamic_'.length);
+		                        // If it's the first row, add the dynamic column to the DataTable header
+		                        if (rowNum === 1) {
+		                            $('#circularDatatable thead tr').append(`<th class="text-center dynamic-column">${fieldName}</th>`);
+		                        }
+		                    }
+		                }
+		                rowNum++;
+		            });
+		                
+	    		    // Handle the complaint list
+	    		    generate_table(circularList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching circular list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching circular list:', error);
+			        }
+	    		});
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data) {
+	            var table = $('#circularDatatable').DataTable({
+	                dom: 'Bftip',
+	                columnDefs: [
+	                    { targets: 'no-sort', "orderable": false },
+	                    { targets: 'no-exportable', "exportable": false }
+	                ],
+	                lengthMenu: [
+	                    [25, 50, 100, 200, 500, -1],
+	                    ['25 rows', '50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+	                ],
+	                /*scrollY: '50vh',*/
+	                fixedColumns: {
+	                    left: 0,
+	                    right: 0
+	                },
+	                buttons: [buttons],
+	                responsive: true,
+	                searching: false,
+	                select: false,
+	                processing: false,
+	            });
+
+	            // Clear Table data
+	            table.clear().draw();
+
+	            // Initialize row number
+	            var rowNum = 1;
+
+	            // Iterate over the data array
+	            $.each(data, function(index, row) {
+	                var department_name = row["name"];
+	                department_name = department_name.charAt(0).toUpperCase() + department_name.slice(1);
+
+	                // Create an array to store the dynamic values for this row
+	                var dynamicValues = [];
+
+	                // Iterate over the keys in the row object
+	                for (var key in row) {
+	                    // Check if the key starts with "dynamic_"
+	                    if (key.startsWith('dynamic_')) {
+	                        // Add the dynamic value to the array
+	                        dynamicValues.push(row[key]);
+	                    }
+	                }
+
+					// Create the row array
+				    var rowData = [
+				        rowNum++,
+				        department_name,
+				        row["total"]
+				    ];
+
+				    // Add each dynamic value to the row array
+				    rowData = rowData.concat(dynamicValues);
+
+				    // Add the row to the DataTable
+				    table.row.add(rowData).draw(false);
+	            });
+
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+	        }
+
+			
+			$(document).ready(function() {
+				call_loading();
+				get_circular_list();
+			});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/works/erp-works-update.html b/target/classes/templates/modules/works/erp-works-update.html
new file mode 100644
index 0000000..082a6b8
--- /dev/null
+++ b/target/classes/templates/modules/works/erp-works-update.html
@@ -0,0 +1,1022 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+		<link rel="stylesheet" type="text/css" href="node_modules/jquery.datetimepicker/jquery.datetimepicker.css"/ >
+        <!--[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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>ERP Update Form</h5>
+                                            <span>Works Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Works Module</li>
+                                            <li class="breadcrumb-item active" aria-current="page">ERP - Works Update Form</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							<div class="col-md-12">
+                                <div class="card">
+									<form class="request-form" id="request-form" onsubmit="return saveRequest();">
+	                                    <div class="card-header"><h3>Search By Estimate Number</h3></div>
+	                               		<div class="card-body">
+											<div class="form-group">
+	                                           
+	                                            <div class="row">
+		                                            <div class="col-md-3">
+			                                            <select class="form-control" name="estcode" id="estcode" required>
+		                                                    <option>NK</option>
+		                                                    <option>NE</option>
+		                                                    <option>NA</option>
+		                                                    <option>NL</option>
+		                                                    <option>B</option>
+		                                                    <option>Q</option>
+		                                                </select>
+	                                                </div>
+	                                                <div class="col-md-1 text-center" style="padding-top:10px;width:10px;margin:0px;">&sol;</div>
+	                                                <div class="col-md-3"> 
+	                                                	<select class="form-control" name="estyear" id="estyear" required>
+		                                                    <option>20022-2023</option>
+		                                                    <option>20023-2024</option>
+		                                                    <option>20024-2025</option>
+		                                                </select>
+	                                                </div>
+	                                                <div class="col-md-1 text-center" style="padding-top:10px; width:10px;margin:0px;">&sol;</div>
+	                                                <div class="col-md-4">
+		                                            	<input type="text" class="form-control" name="estnumber" id="estnumber" placeholder="Estimate Number" autocomplete="off" required>
+		                                            </div>
+		                                        </div>
+	                                        </div>
+											
+	                                  	</div>
+	                                  	<div class="card-footer text-right">
+											<button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-search"></i>Search</button>
+	                                	</div>
+                                	</form>
+                                </div>
+                            </div>
+							<div class="col-md-12">
+								<div class="card">
+									<form>
+                                    <div class="card-header">
+                                    	<h3>EST - Update Form</h3>
+                                    </div>
+                               		<div class="card-body" id="ptaxPersonalInfo">
+										<div class="form-group">
+											<div class="title text-warning">
+												<h5>1. Basic Details</h5>
+												<hr>
+											</div>
+											
+											<div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="estno">Estimate No <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estno" id="estno" placeholder="Estimate No" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="estdate">Estimate Date <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estdat" id="estdate" placeholder="Estimate Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-2">
+	                                            	<label for="zone">Zone <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="zone" id="zone" placeholder="zone" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-2">
+	                                            	<label for="zone">Ward <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="ward" id="ward" placeholder="Ward" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="projectname">Project Name <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="projectname" id="projectname" placeholder="Project Name" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="location">Location <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="location" id="location" placeholder="Location" autocomplete="off" required>
+                                                </div>
+                                                
+	                                        </div>
+	                                        <br>
+	                                        <div class="title text-warning">
+												<h5>2. Department and Contractor Details</h5>
+												<hr>
+											</div>
+											
+											<div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="department">Department <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="department" id="department" placeholder="Department" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="contractorname">Contractor Name <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="contractorname" id="contractorname" placeholder="Contractor Name" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="contractorperiod">Contractor Period <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="contractorperiod" id="contractorperiod" placeholder="Contractor Period" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        
+	                                        <br>
+	                                        <div class="title text-warning">
+												<h5>3. Funding and Scheme Details</h5>
+												<hr>
+											</div>
+	                                        
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="fundsource">Details Source of Fund <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="fundsource" id="fundsource" placeholder="Details Source of Fund" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="scheme">Scheme<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="scheme" id="scheme" placeholder="Scheme" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="category">Category<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="category" id="category" placeholder="Category" autocomplete="off" required>
+                                                </div>
+                                            </div>
+                                            <br>
+                                            <div class="row">
+                                                <div class="col-md-4">
+	                                            	<label for="subcategory">Sub-Category<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="subcategory" id="subcategory" placeholder="Sub-Category" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="estamount">Estimation Amount<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estamount" id="estamount" placeholder="Estimation Amount" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="title text-warning">
+												<h5>4. Sanctions and Tender Process</h5>
+												<hr>
+											</div>
+	                                        
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="techsanctiondate">Tech Sanction Date <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="techsanctiondate" id="techsanctiondate" placeholder="Tech Sanction Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-8">
+	                                            	
+                                                </div>
+                                            </div>
+                                            <br>
+                                            <div class="row">   
+                                                <div class="col-md-4">
+	                                            	<label for="adminsanctiondate">Admin Sanction Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="adminsanctiondate" id="adminsanctiondate" placeholder="Admin Sanction Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-8">
+	                                            	<label for="adminsanctionfile">Admin Sanction File<font style="color:red">*</font></label>
+		                                            <input name="adminsanctionfile" id="adminsanctionfile" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+                                            </div>
+                                            <br>
+                                            <div class="row">   
+                                                <div class="col-md-4">
+	                                            	<label for="tendercalldate">Tender Called Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="tendercalldate" id="tendercalldate" placeholder="Tender Called Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="tenderfinalizeddate">Tender Finalized Date <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="tenderfinalizeddate" id="tenderfinalizeddate" placeholder="Tender Finalized Date" autocomplete="off" required>
+                                                </div>
+                                            </div>
+                                            
+                                            <br>
+	                                        <div class="title text-warning">
+												<h5>5. Contract and Execution Details</h5>
+												<hr>
+											</div>
+											
+                                            <div class="row">
+                                                <div class="col-md-4">
+	                                            	<label for="loadate">LOA Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="loadate" id="loadate" placeholder="LOA Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-8">
+	                                            	<label for="loafile">LOA File<font style="color:red">*</font></label>
+		                                            <input name="loafile" id="loafile" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+	                                        </div>
+	                                        
+	                                        <br>
+	                                        <div class="row">
+                                                <div class="col-md-4">
+	                                            	<label for="agreementdate">Agreement Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="agreementdate" id="agreementdate" placeholder="Agreement Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-8">
+	                                            	<label for="agreementfile">Agreement File<font style="color:red">*</font></label>
+		                                            <input name="agreementfile" id="agreementfile" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+                                                <div class="col-md-4">
+	                                            	<label for="workorderdate">Work Order Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="workorderdate" id="workorderdate" placeholder="Sub-Category" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-8">
+	                                            	<label for="workorderfile">Work Order File<font style="color:red">*</font></label>
+		                                            <input name="workorderfile" id="workorderfile" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="workcommenceddate">Work Commenced Date<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="workcommenceddate" id="workcommenceddate" placeholder="Work Commenced Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	
+                                                </div>
+	                                        </div>
+		                                </div>
+									</div>
+									<div class="card-footer text-right">
+										<button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                       	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+                                	</div>
+                                	</form>
+								</div>
+							</div>
+                        </div>
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+        
+		<div class="modal fade" id="taxCollectionRequestView" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    <div class="modal-body">
+						<div class="row">
+							      
+                            <div class="col-xl-6 col-md-6" id="requestDetails">
+								
+                            </div>
+                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="pTaxdetails">
+                                &nbsp;
+                            </div>
+						</div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="modal fade" id="taxCollectionRequestUpdate" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+					
+	                    <div class="modal-header">
+	                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Status Update Form</h5>
+	                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div>
+	                    <div class="modal-body">
+							<div class="row">
+								      
+	                            <div class="col-xl-6 col-md-6" id="requestDetailsUpdate">
+									
+	                            </div>
+	                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="statusUpdateForm">
+	                                &nbsp;
+	                            </div>
+	                            
+	                            <div class="card table-card mb-0">
+                                    
+                                   <h5 class="text-warning pl-10 text-center">Status History</h5>
+                                    
+                                    <div class="card-block pb-0">
+                                        <div class="table-responsive">
+                                            <table class="table table-hover mb-0">
+                                                <thead>
+                                                    <tr>
+                                                        <th>Company</th>
+                                                        <th>Start Date</th>
+                                                        <th>End Date</th>
+                                                        <th>Status</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr>
+                                                        <td>Apple Company</td>
+                                                        <td>23/05/2017</td>
+                                                        <td>04/08/2018</td>
+                                                        <td><label class="badge badge-success">Paid</label></td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+							</div>
+	                    </div>
+	                    <div class="modal-footer">
+	                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+	                    </div>
+                    
+                </div>
+            </div>
+        </div>
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       	
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
+        <script src="node_modules/amcharts3/amcharts/amcharts.js"></script>
+        <script src="node_modules/amcharts3/amcharts/serial.js"></script>
+        <script src="node_modules/amcharts3/amcharts/themes/light.js"></script>
+        <script src="node_modules/jquery.datetimepicker/jquery.datetimepicker.full.min.js"></script>
+       	<script th:inline="javascript">
+			var loginUserID = /*[[${LoginUserId}]]*/'';
+			$(document).ready(function() {
+			  // Input masking for the desired format
+			  $('#ptax').mask('00-000-00000-000');
+			  $('#mobileno').mask('0000000000');
+			  
+			  // For datetime picker
+			  jQuery('#techsandate').datetimepicker({
+				  //minTime:'10:00',
+				  //maxTime:'18:01',
+				  //minDate: 0, // Today
+				  //minDate:'-1970/01/2',
+				  //maxDate:'+1970/01/2',
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  //disabledDates:['2023/08/31','2023/08/11','2023/08/12'], // Disable date on holidays
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  jQuery('#adminsandate').datetimepicker({
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  jQuery('#packagedate').datetimepicker({
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  jQuery('#tenderdate').datetimepicker({
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  jQuery('#tenderfinaldate').datetimepicker({
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  jQuery('#commenceddate').datetimepicker({
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			});
+			
+			function displayPtaxInfo(ptax){
+				var inputElement = $('#ptax');
+				
+				inputElement.removeClass('is-invalid');
+				
+				// Disable the button to prevent multiple clicks
+				$("#ptaxsearchbtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#ptaxsearchbtn").html('<i class="fas fa-spinner fa-spin"></i>');
+				  
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax)) {
+				  console.log('ptax value is valid:', ptax);
+				  // Check if the tax value has the correct length as per the format (15 characters)
+				  if (ptax.length === 16) {
+				    console.log('ptax value length is correct.');
+				    getPtaxInfo(ptax);
+				  } else {
+				    console.log('ptax value length is incorrect.');
+				    
+				    inputElement.addClass('is-invalid');
+				    
+				    $("#ptaxsearchbtn").prop("disabled", false);
+    				$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				  }
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#ptaxsearchbtn").prop("disabled", false); 
+    			  $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				}
+			}
+			
+			function getPtaxInfo(ptax){
+				call_loading('ptaxPersonalInfo','start');
+				//var ptax = '04-042-03251-000';
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if(data.ResultStatus=="False")
+						{
+							$("#ptaxPersonalInfo").html("<center>"+nodata(data.Message)+"</center>");
+							$("#ptaxsearchbtn").prop("disabled", false);
+						    $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+						else{
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							//var famCardNo = data.PROPTAX[0].Fam_Card_No;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#ptaxPersonalInfo").html(ptaxPersonalinfoHtml);
+							// Enable the button
+							$("#ptaxsearchbtn").prop("disabled", false);
+	    					$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching data:', status, error);
+				      // Enable the button
+				      $("#ptaxsearchbtn").prop("disabled", false);
+				      $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				    }
+				});
+			}
+			
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				$("#requestSubmitBtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+				var name = $('#name').val();
+				
+				var inputElement = $('#ptax');
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				inputElement.removeClass('is-invalid');
+				
+				var inputElementMobileNo = $('#mobileno');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementUsertype = $('#usertype');
+				var usertype = inputElementUsertype.val();
+				//inputElementUsertype.removeClass('is-invalid');
+				
+				var inputElementAvailabilityDate = $('#availabilitydate');
+				var availabilitydate = inputElementAvailabilityDate.val();
+				
+				var selectedDateTime = new Date(availabilitydate);
+			    var currentDateTime = new Date();
+			
+			    if (selectedDateTime < currentDateTime) {
+					alert('Selected date and time must be greater than or equal to the current date and time.');
+		        	inputElementAvailabilityDate.addClass('is-invalid');
+					$("#requestSubmitBtn").prop("disabled", false);
+    				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+		        	return false; // Prevent form submission
+		      	}
+			    
+				var formData = new FormData();
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax) && ptax.length == 16) {
+					
+					// Mobile number Check
+					if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
+						$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Submitting your request, please wait...');
+						
+						formData.append('name',name);
+						formData.append('ptax', ptax );
+						formData.append('mobile', mobileNo );
+						formData.append('usertype', usertype );
+						formData.append('availabilitydate', availabilitydate);
+						formData.append('created_by', loginUserID);
+						
+						submitSaveRequest(formData);
+
+						$("#requestSubmitBtn").html('Your request has been successfully submitted!');
+					} else {
+						inputElementMobileNo.addClass('is-invalid');
+						$("#requestSubmitBtn").prop("disabled", false);
+    					$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+					}
+				 
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#requestSubmitBtn").prop("disabled", false); 
+    			  $("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+				}
+				return false;
+			}
+			
+			function submitSaveRequest(formData){
+				$.ajax({
+				    type: "POST",
+				    url: '/gcc/api/taxcollection/saveTaxCollectionRequest',
+		                data: formData,
+		                contentType: false,
+		                processData: false,
+				}).done(function(response) {
+	  			      Swal.fire(
+	  			        'Complaint Status Update!',
+	  			        'Complaint closed Successfully!',
+	  			        'success'
+	  			      ).then(() => {
+	  						    location.reload();
+	  						 });
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					$("#requestSubmitBtn").prop("disabled", false);
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+			    
+				});
+			}
+		</script>
+		<script>
+			$(document).ready(function() {
+				
+				// DataTables buttons configuration
+	            var buttons = [
+	            	{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+	                {
+						title: 'Data export',
+	                    extend: 'copyHtml5',
+	                    text: 'Copy',
+	                    className: 'btn btn-secondary',
+	                    id: 'copyBtn'
+	                },
+	                {
+	                    extend: 'excelHtml5',
+	                    text: 'Excel',
+	                    className: 'btn btn-secondary',
+	                    id: 'excelBtn'
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn'
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn'
+	                },
+	                
+	            ];
+				
+			    $('#requestDatatable').DataTable( {
+			        dom: 'Bftip',
+			        columnDefs: [
+					  { targets: 'no-sort', orderable: false }
+					],
+			        lengthMenu: [
+			            [ 50, 100, 200, 500, -1 ],
+			            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+			        ],
+    				scrollY: '50vh',
+			        fixedColumns: {
+				        left: 1,
+				        right: 1
+				    },
+			        buttons: [buttons],
+			        fixedHeader: true,
+			        autoWidth: true,
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+			
+			function callView(request_id){
+				$('#taxCollectionRequestView').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestView').modal('show');
+				
+				call_loading('requestDetails','start');
+				getTaxCollectionRequestDetails(request_id);
+				call_loading('pTaxdetails','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestDetails(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetails").html(ptaxPersonalinfoHtml);
+						getpTaxDetails(ptax);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function getpTaxDetails(ptax){
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#pTaxdetails").html(ptaxPersonalinfoHtml);
+							
+							// if Ptax data fetched then load valid message
+							var validPtax = ptax+'&nbsp;<font class="custom-tooltip-success"><a href="#" class="text-success" onclick="return false;" data-container=".custom-tooltip-success" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify success" data-original-title="Property tax number cross-verify success"><i class="ik ik-check-circle"></i></font>';
+							$("#pTaxVerification").html(validPtax);
+						}
+						else {
+						    // No data found
+						    console.log("Message: " + data.Message);
+						    var inValidPtax = ptax+'&nbsp;<font class="custom-tooltip-warning"><a href="#" class="text-warning" onclick="return false;" data-container=".custom-tooltip-warning" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify failed" data-original-title="Property tax number cross-verify failed"><i class="ik ik-alert-triangle"></i></font>';
+							$("#pTaxVerification").html(inValidPtax);
+							
+						    $("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching pTax data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function callStatusUpdate(request_id){
+				$('#taxCollectionRequestUpdate').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestUpdate').modal('show');
+				
+				call_loading('requestDetailsUpdate','start');
+				getTaxCollectionRequestUpdate(request_id);
+				call_loading('statusUpdateForm','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestUpdate(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetailsUpdate").html(ptaxPersonalinfoHtml);
+						showStatusUpdateForm(request_id, status);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function showStatusUpdateForm(request_id, status){
+				
+				var selectInput = `<select class="form-control" name="requestStatus" id="requestStatus" required>
+								        <option value="open">Open</option>
+								        <option value="close">Close</option>
+								    </select>`;
+								    
+				var textareaInput=`<textarea class="form-control" name="statusComments" id="statusComments" rows="4"></textarea>`;
+				
+				var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card mb-0"><div class="card-header" style="background-color: #ffe1003b !important;"><h3>Update Form</h3></div>' +
+									   '<div class="card-block p-0">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td width="30%">Current Status</td>' +
+							           '      <td class="font-medium">'+selectInput+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td colspan="2">Status Comments' + textareaInput+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							           
+				$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+				
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card"><div class="card-header"><h3>Update Form</h3></div>' +
+									   '<div class="card-block">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Current Status</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Status Comments</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+
+									   
+									   '      </td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer  text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+						}
+						else {
+						    // No data found
+						    console.log("Status history: " + data.Message);
+						    //$("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching Status history:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function saveStatus(){
+				return false;
+			}
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/works/index.html b/target/classes/templates/modules/works/index.html
new file mode 100644
index 0000000..420f5f6
--- /dev/null
+++ b/target/classes/templates/modules/works/index.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="ik ik-bar-chart-2 bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>1913 Tax Collection Module</h5>
+                                            <span>Tax collection appication for senior citizen and disability users</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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">1913 Tax Collection</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							
+							<!-- analytic card start - First Tile Start -->
+                            <div class="col-xl-3 col-md-6">
+								<a href="javascript:void(0)">
+                                <div class="card social-card">
+                                    <div class="card-body text-center">
+                                        <h2 class="text-facebook mb-20"><i class="ik ik-layers"></i></h2>
+                                        <h3 class="text-facebook fw-700">6,750</h3>
+                                        <p>Assets</p>
+                                        <p class="mb-0 mt-15">View Assets List<i class="fas fa-arrow-right ml-5 f-10 text-facebook"></i></p>
+                                    </div>
+                                </div>
+                                </a>
+                            </div>
+                            <div class="col-xl-3 col-md-6">
+								<a href="javascript:void(0)">
+                                <div class="card social-card">
+                                    <div class="card-body text-center">
+                                        <h2 class="text-twitter mb-20"><i class="fas fa-comments"></i></h2>
+                                        <h3 class="text-twitter fw-700">9,752</h3>
+                                        <p>Feedbacks</p>
+                                        <p class="mb-0 mt-15">View Feedbacks List<i class="fas fa-arrow-right ml-5 f-10 text-twitter"></i></p>
+                                    </div>
+                                </div>
+                                </a>
+                            </div>
+                            <div class="col-xl-3 col-md-6">
+								<a href="javascript:void(0)">
+                                <div class="card social-card">
+                                    <div class="card-body text-center">
+                                        <h2 class="text-green mb-20"><i class="far fa-smile-beam"></i></h2>
+                                        <h3 class="text-green fw-700">8,752</h3>
+                                        <p>Positive Feedbacks</p>
+                                        <p class="mb-0 mt-15">View Positive Feedbacks<i class="fas fa-arrow-right ml-5 f-10 text-green"></i></p>
+                                    </div>
+                                </div>
+                                </a>
+                            </div>
+                            <div class="col-xl-3 col-md-6">
+								<a href="javascript:void(0)">
+                                <div class="card social-card">
+                                    <div class="card-body text-center">
+                                        <h2 class="text-red mb-20"><i class="far fa-frown"></i></h2>
+                                        <h3 class="text-red fw-700">952</h3>
+                                        <p>Negative Feedbacks</p>
+                                        <p class="mb-0 mt-15">View Negative Feedbacks<i class="fas fa-arrow-right ml-5 f-10 text-red"></i></p>
+                                    </div>
+                                </div>
+								</a>
+                            </div>
+                            <!-- First Tile End -->
+			                
+			                <div class="col-md-12">
+				                <div class="card sale-card">
+		                            <div class="card-header">
+		                                <h3>Deals Analytics</h3>
+		                            </div>
+		                            <div class="card-block">
+		                                <div id="deal-analytic-chart" class="chart-shadow" style="height:300px"></div>
+		                            </div>
+		                        </div>    
+	                        </div>    
+	                          
+                            <div class="col-md-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h3>Page Title</h3>
+                                    </div>
+                                    <div class="card-block">
+                                        
+                                    </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 src="node_modules/amcharts3/amcharts/amcharts.js"></script>
+        <script src="node_modules/amcharts3/amcharts/serial.js"></script>
+        <script src="node_modules/amcharts3/amcharts/themes/light.js"></script>
+        <script>
+			
+			var chartData = [];
+		    var currentDate = new Date();
+		    var currentMonth = currentDate.getMonth() + 1;
+		    var currentYear = currentDate.getFullYear();
+		    var daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
+		
+		    // Generate random data for each date in the current month
+		    for (var i = 1; i <= daysInMonth; i++) {
+		        var randomValue1 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
+		        var randomValue2 = Math.floor(Math.random() * 100); // Replace 100 with the maximum value you want
+		
+		        var dateString = currentYear + '-' + (currentMonth < 10 ? '0' : '') + currentMonth + '-' + (i < 10 ? '0' : '') + i;
+		        var dataPoint = {
+		            "date": dateString,
+		            "market1": randomValue1,
+		            "market2": randomValue2
+		        };
+		        chartData.push(dataPoint);
+		    }
+			// deal-analytic-chart
+    var chart = AmCharts.makeChart("deal-analytic-chart", {
+        "type": "serial",
+        "theme": "light",
+        "dataDateFormat": "YYYY-MM-DD",
+        "precision": 2,
+        "valueAxes": [{
+            "id": "v1",
+            "position": "left",
+            "autoGridCount": false,
+            "labelFunction": function(value) {
+                return "$" + Math.round(value) + "M";
+            }
+        }, {
+            "id": "v2",
+            "gridAlpha": 0,
+            "autoGridCount": false
+        }],
+        "graphs": [{
+            "id": "g1",
+            "valueAxis": "v2",
+            /*"bullet": "round",
+            "bulletBorderAlpha": 1,
+            "bulletColor": "#FFFFFF",
+            "bulletSize": 8,
+            "hideBulletsCount": 50,
+            "lineThickness": 3,
+            "lineColor": "#2ed8b6",*/
+            "lineColor": "#2ed8b6",
+            "fillColors": "#2ed8b6",
+            "type": "column",
+            "fillAlphas": 0.3,
+            "columnWidth": 0.5,
+            "title": "Positive Feedback",
+            "useLineColorForBulletBorder": true,
+            "valueField": "market1",
+            "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
+        }, {
+            "id": "g2",
+            "valueAxis": "v2",
+            //"bullet": "round",
+            //"bulletBorderAlpha": 1,
+            //"bulletColor": "#FFFFFF",
+            //"bulletSize": 8,
+            //"hideBulletsCount": 50,
+            //"lineThickness": 3,
+            //"lineColor": "#e95753",
+            "lineColor": "#F22613",
+            "fillColors": "#F22613",
+            "type": "column",
+            "fillAlphas": 0.3,
+            "columnWidth": 0.5,
+            "title": "Negative Feedback",
+            "useLineColorForBulletBorder": true,
+            "valueField": "market2",
+            "balloonText": "[[[[title]]]]<br /><b style='font-size: 130%'>[[[[value]]]]</b>"
+        }],
+        "chartCursor": {
+            "pan": true,
+            "valueLineEnabled": true,
+            "valueLineBalloonEnabled": true,
+            "cursorAlpha": 0,
+            "valueLineAlpha": 0.2
+        },
+        "categoryField": "date",
+        "categoryAxis": {
+            "parseDates": true,
+            "dashLength": 1,
+            "minorGridEnabled": true
+        },
+        "legend": {
+            "useGraphSettings": true,
+            "position": "top"
+        },
+        "balloon": {
+            "borderThickness": 1,
+            "shadowAlpha": 0
+        },
+        "dataProvider": chartData,
+    });
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/works/non-erp-works-add.html b/target/classes/templates/modules/works/non-erp-works-add.html
new file mode 100644
index 0000000..3d606f8
--- /dev/null
+++ b/target/classes/templates/modules/works/non-erp-works-add.html
@@ -0,0 +1,867 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+		<link rel="stylesheet" type="text/css" href="node_modules/jquery.datetimepicker/jquery.datetimepicker.css"/ >
+        <!--[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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Non ERP New Entry Form</h5>
+                                            <span>Works Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Works Module</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Non ERP - New Entry Form</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							
+
+							<div class="col-md-12">
+								<div class="card">
+									<form>
+                                    <div class="card-header"><h3>Non ERP  - Add Form</h3></div>
+                               		<div class="card-body" id="ptaxPersonalInfo">
+										<div class="form-group">
+											<div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="zone">Zone <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="zone" id="zone" placeholder="zone" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="ward">ward <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="ward" id="ward" placeholder="ward" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="projectname">Project Name <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="projectname" id="projectname" placeholder="Project name" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="estimatenumber">Estimate Number <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estimatenumber" id="estimatenumber" placeholder="Estimate Nnumber" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="estimatedate">Estimate Date <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estimatedate" id="estimatedate" placeholder="Estimate date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="location">Location<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="location" id="location" placeholder="location" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="sourceoffund">Source Of Fund <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="sourceoffund" id="sourceoffund" placeholder="Source of fund" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="schemename">Scheme Name<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="schemename" id="schemename" placeholder="Scheme Name" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="category">Category<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="category" id="category" placeholder="Category" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="subcategory">Sub-Category <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="subcategory" id="subcategory" placeholder="Sub-Category" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="estnumber">Estimate Amount<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="estnumber" id="estnumber" placeholder="Estimate number" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="department">Department<font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="department" id="department" placeholder="Department" autocomplete="off" required>
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="loacopy">LOA Copy <font style="color:red">*</font></label>
+		                                            <input name="loacopy" id="loacopy" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="agreementcopy">Agreement Copy<font style="color:red">*</font></label>
+		                                            <input name="agreementcopy" id="agreementcopy" class="form-control" type="file" capture="camera" accept="application/pdf, image/*" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	<label for="workordercopy">Work Order Copy<font style="color:red">*</font></label>
+		                                            <input name="workordercopy" id="workordercopy" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-4">
+	                                            	<label for="sanctioncopy">Admin Sanction Copy<font style="color:red">*</font></label>
+		                                            <input name="sanctioncopy" id="sanctioncopy" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+                                                </div>
+                                                 <div class="col-md-4">
+	                                            	<label for="adminsandate">Admin Sanction Date <font style="color:red">*</font></label>
+		                                            <input type="text" class="form-control" name="adminsandate" id="adminsandate" placeholder="Admin Sanction Date" autocomplete="off" required>
+                                                </div>
+                                                <div class="col-md-4">
+	                                            	
+                                                </div>
+	                                        </div>
+	                                        <br>
+	                                        <div class="row">
+	                                            <div class="col-md-12">
+	                                            	<label for="worksdesc">Works description<font style="color:red">*</font></label>
+		                                            <textarea class="form-control" name="worksdesc"></textarea>
+                                                </div>
+	                                        </div>
+		                                </div>
+		                                
+									</div>
+									<div class="card-footer text-right">
+										<button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                       	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+                                	</div>
+                                	</form>
+								</div>
+							</div>
+                        </div>
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+        
+		<div class="modal fade" id="taxCollectionRequestView" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    <div class="modal-body">
+						<div class="row">
+							      
+                            <div class="col-xl-6 col-md-6" id="requestDetails">
+								
+                            </div>
+                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="pTaxdetails">
+                                &nbsp;
+                            </div>
+						</div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="modal fade" id="taxCollectionRequestUpdate" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+					
+	                    <div class="modal-header">
+	                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Status Update Form</h5>
+	                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div>
+	                    <div class="modal-body">
+							<div class="row">
+								      
+	                            <div class="col-xl-6 col-md-6" id="requestDetailsUpdate">
+									
+	                            </div>
+	                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="statusUpdateForm">
+	                                &nbsp;
+	                            </div>
+	                            
+	                            <div class="card table-card mb-0">
+                                    
+                                   <h5 class="text-warning pl-10 text-center">Status History</h5>
+                                    
+                                    <div class="card-block pb-0">
+                                        <div class="table-responsive">
+                                            <table class="table table-hover mb-0">
+                                                <thead>
+                                                    <tr>
+                                                        <th>Company</th>
+                                                        <th>Start Date</th>
+                                                        <th>End Date</th>
+                                                        <th>Status</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr>
+                                                        <td>Apple Company</td>
+                                                        <td>23/05/2017</td>
+                                                        <td>04/08/2018</td>
+                                                        <td><label class="badge badge-success">Paid</label></td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+							</div>
+	                    </div>
+	                    <div class="modal-footer">
+	                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+	                    </div>
+                    
+                </div>
+            </div>
+        </div>
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       	
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
+        <script src="node_modules/amcharts3/amcharts/amcharts.js"></script>
+        <script src="node_modules/amcharts3/amcharts/serial.js"></script>
+        <script src="node_modules/amcharts3/amcharts/themes/light.js"></script>
+        <script src="node_modules/jquery.datetimepicker/jquery.datetimepicker.full.min.js"></script>
+       	<script th:inline="javascript">
+			var loginUserID = /*[[${LoginUserId}]]*/'';
+			$(document).ready(function() {
+			  // Input masking for the desired format
+			  $('#ptax').mask('00-000-00000-000');
+			  $('#mobileno').mask('0000000000');
+			  
+			  // For datetime picker
+			  jQuery('#estimatedate').datetimepicker({
+				  //minTime:'10:00',
+				  //maxTime:'18:01',
+				  //minDate: 0, // Today
+				  //minDate:'-1970/01/2',
+				  //maxDate:'+1970/01/2',
+				  timepicker:false, // Disable time picker
+				  mask:true,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  //disabledDates:['2023/08/31','2023/08/11','2023/08/12'], // Disable date on holidays
+				  format: 'd-m-Y', // Date format (you can change it as per your needs)
+			  });
+			  
+			  
+			});
+			
+			function displayPtaxInfo(ptax){
+				var inputElement = $('#ptax');
+				
+				inputElement.removeClass('is-invalid');
+				
+				// Disable the button to prevent multiple clicks
+				$("#ptaxsearchbtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#ptaxsearchbtn").html('<i class="fas fa-spinner fa-spin"></i>');
+				  
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax)) {
+				  console.log('ptax value is valid:', ptax);
+				  // Check if the tax value has the correct length as per the format (15 characters)
+				  if (ptax.length === 16) {
+				    console.log('ptax value length is correct.');
+				    getPtaxInfo(ptax);
+				  } else {
+				    console.log('ptax value length is incorrect.');
+				    
+				    inputElement.addClass('is-invalid');
+				    
+				    $("#ptaxsearchbtn").prop("disabled", false);
+    				$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				  }
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#ptaxsearchbtn").prop("disabled", false); 
+    			  $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				}
+			}
+			
+			function getPtaxInfo(ptax){
+				call_loading('ptaxPersonalInfo','start');
+				//var ptax = '04-042-03251-000';
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if(data.ResultStatus=="False")
+						{
+							$("#ptaxPersonalInfo").html("<center>"+nodata(data.Message)+"</center>");
+							$("#ptaxsearchbtn").prop("disabled", false);
+						    $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+						else{
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							//var famCardNo = data.PROPTAX[0].Fam_Card_No;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#ptaxPersonalInfo").html(ptaxPersonalinfoHtml);
+							// Enable the button
+							$("#ptaxsearchbtn").prop("disabled", false);
+	    					$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching data:', status, error);
+				      // Enable the button
+				      $("#ptaxsearchbtn").prop("disabled", false);
+				      $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				    }
+				});
+			}
+			
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				$("#requestSubmitBtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+				var name = $('#name').val();
+				
+				var inputElement = $('#ptax');
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				inputElement.removeClass('is-invalid');
+				
+				var inputElementMobileNo = $('#mobileno');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementUsertype = $('#usertype');
+				var usertype = inputElementUsertype.val();
+				//inputElementUsertype.removeClass('is-invalid');
+				
+				var inputElementAvailabilityDate = $('#availabilitydate');
+				var availabilitydate = inputElementAvailabilityDate.val();
+				
+				var selectedDateTime = new Date(availabilitydate);
+			    var currentDateTime = new Date();
+			
+			    if (selectedDateTime < currentDateTime) {
+					alert('Selected date and time must be greater than or equal to the current date and time.');
+		        	inputElementAvailabilityDate.addClass('is-invalid');
+					$("#requestSubmitBtn").prop("disabled", false);
+    				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+		        	return false; // Prevent form submission
+		      	}
+			    
+				var formData = new FormData();
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax) && ptax.length == 16) {
+					
+					// Mobile number Check
+					if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
+						$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Submitting your request, please wait...');
+						
+						formData.append('name',name);
+						formData.append('ptax', ptax );
+						formData.append('mobile', mobileNo );
+						formData.append('usertype', usertype );
+						formData.append('availabilitydate', availabilitydate);
+						formData.append('created_by', loginUserID);
+						
+						submitSaveRequest(formData);
+
+						$("#requestSubmitBtn").html('Your request has been successfully submitted!');
+					} else {
+						inputElementMobileNo.addClass('is-invalid');
+						$("#requestSubmitBtn").prop("disabled", false);
+    					$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+					}
+				 
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#requestSubmitBtn").prop("disabled", false); 
+    			  $("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+				}
+				return false;
+			}
+			
+			function submitSaveRequest(formData){
+				$.ajax({
+				    type: "POST",
+				    url: '/gcc/api/taxcollection/saveTaxCollectionRequest',
+		                data: formData,
+		                contentType: false,
+		                processData: false,
+				}).done(function(response) {
+	  			      Swal.fire(
+	  			        'Complaint Status Update!',
+	  			        'Complaint closed Successfully!',
+	  			        'success'
+	  			      ).then(() => {
+	  						    location.reload();
+	  						 });
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					$("#requestSubmitBtn").prop("disabled", false);
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+			    
+				});
+			}
+		</script>
+		<script>
+			$(document).ready(function() {
+				
+				// DataTables buttons configuration
+	            var buttons = [
+	            	{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+	                {
+						title: 'Data export',
+	                    extend: 'copyHtml5',
+	                    text: 'Copy',
+	                    className: 'btn btn-secondary',
+	                    id: 'copyBtn'
+	                },
+	                {
+	                    extend: 'excelHtml5',
+	                    text: 'Excel',
+	                    className: 'btn btn-secondary',
+	                    id: 'excelBtn'
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn'
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn'
+	                },
+	                
+	            ];
+				
+			    $('#requestDatatable').DataTable( {
+			        dom: 'Bftip',
+			        columnDefs: [
+					  { targets: 'no-sort', orderable: false }
+					],
+			        lengthMenu: [
+			            [ 50, 100, 200, 500, -1 ],
+			            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+			        ],
+    				scrollY: '50vh',
+			        fixedColumns: {
+				        left: 1,
+				        right: 1
+				    },
+			        buttons: [buttons],
+			        fixedHeader: true,
+			        autoWidth: true,
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+			
+			function callView(request_id){
+				$('#taxCollectionRequestView').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestView').modal('show');
+				
+				call_loading('requestDetails','start');
+				getTaxCollectionRequestDetails(request_id);
+				call_loading('pTaxdetails','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestDetails(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetails").html(ptaxPersonalinfoHtml);
+						getpTaxDetails(ptax);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function getpTaxDetails(ptax){
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#pTaxdetails").html(ptaxPersonalinfoHtml);
+							
+							// if Ptax data fetched then load valid message
+							var validPtax = ptax+'&nbsp;<font class="custom-tooltip-success"><a href="#" class="text-success" onclick="return false;" data-container=".custom-tooltip-success" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify success" data-original-title="Property tax number cross-verify success"><i class="ik ik-check-circle"></i></font>';
+							$("#pTaxVerification").html(validPtax);
+						}
+						else {
+						    // No data found
+						    console.log("Message: " + data.Message);
+						    var inValidPtax = ptax+'&nbsp;<font class="custom-tooltip-warning"><a href="#" class="text-warning" onclick="return false;" data-container=".custom-tooltip-warning" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify failed" data-original-title="Property tax number cross-verify failed"><i class="ik ik-alert-triangle"></i></font>';
+							$("#pTaxVerification").html(inValidPtax);
+							
+						    $("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching pTax data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function callStatusUpdate(request_id){
+				$('#taxCollectionRequestUpdate').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestUpdate').modal('show');
+				
+				call_loading('requestDetailsUpdate','start');
+				getTaxCollectionRequestUpdate(request_id);
+				call_loading('statusUpdateForm','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestUpdate(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetailsUpdate").html(ptaxPersonalinfoHtml);
+						showStatusUpdateForm(request_id, status);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function showStatusUpdateForm(request_id, status){
+				
+				var selectInput = `<select class="form-control" name="requestStatus" id="requestStatus" required>
+								        <option value="open">Open</option>
+								        <option value="close">Close</option>
+								    </select>`;
+								    
+				var textareaInput=`<textarea class="form-control" name="statusComments" id="statusComments" rows="4"></textarea>`;
+				
+				var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card mb-0"><div class="card-header" style="background-color: #ffe1003b !important;"><h3>Update Form</h3></div>' +
+									   '<div class="card-block p-0">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td width="30%">Current Status</td>' +
+							           '      <td class="font-medium">'+selectInput+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td colspan="2">Status Comments' + textareaInput+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							           
+				$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+				
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card"><div class="card-header"><h3>Update Form</h3></div>' +
+									   '<div class="card-block">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Current Status</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Status Comments</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+
+									   
+									   '      </td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer  text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+						}
+						else {
+						    // No data found
+						    console.log("Status history: " + data.Message);
+						    //$("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching Status history:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function saveStatus(){
+				return false;
+			}
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/works/request-list.html b/target/classes/templates/modules/works/request-list.html
new file mode 100644
index 0000000..d117479
--- /dev/null
+++ b/target/classes/templates/modules/works/request-list.html
@@ -0,0 +1,813 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+		<link rel="stylesheet" type="text/css" href="node_modules/jquery.datetimepicker/jquery.datetimepicker.css"/ >
+        <!--[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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="fas fa-headset bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Request List</h5>
+                                            <span>1913 Tax Collection Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">1913 Tax Collection</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Request List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							
+							<div class="card">
+                                <div class="card-block">
+									<div class="d-flex">
+                                        <h4 class="card-title">Tax collection request list</h4>
+                                        
+                                    </div>
+                                
+									<div>
+										<table id="requestDatatable" 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="20%">Name</th>
+													<th class="text-center" width="20%">Property tax number</th>
+													<th class="text-center" width="20%">Mobile Number</th>
+													<th class="text-center" width="20%">Availability Date</th>
+													<th class="text-center" width="20%">User Type</th>
+													<th class="text-center" width="20%">Status</th>
+					                                <th class="text-center no-sort" style="width:50px;">Action</th>
+												</tr>
+                                            </theadclass="thead-dark">
+                                            <tbody>
+                                                <tr th:each="taxCollectionRequestList, i : ${taxCollectionRequestEntities}" class="taxCollectionRequestList text-capitalize">
+					                                <td th:text="${i.count}">0</td>
+													<td th:text="${taxCollectionRequestList.name}"></td>
+													<td th:text="${taxCollectionRequestList.ptax}"></td>
+					                                <td th:text="${taxCollectionRequestList.mobile}"></td>
+					                                <td th:text="${taxCollectionRequestList.availabilitydate}"></td>
+					                                <td th:text="${taxCollectionRequestList.usertype}"></td>
+					                                <td>
+														<a th:href="@{#}" th:text="${taxCollectionRequestList.status}" th:classappend="${taxCollectionRequestList.status == 'open'} ? 'badge badge-success mb-1' : 'badge badge-secondary mb-1'" th:onclick="return callStatusUpdate([[${taxCollectionRequestList.request_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Update Current Status" data-original-title="Update Current Status"></a>
+													</td>
+					                                <td class="text-center">
+					                                    <a th:href="@{#}" th:onclick="return callView([[${taxCollectionRequestList.request_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="View Request Details" data-original-title="View Request Details"><i class="ik ik-eye f-16 text-blue"></i></a>&nbsp;&nbsp;
+					                                </td>
+					                            </tr>
+                                             </tbody>
+                                            <tfoot class="thead-dark">
+                                                <tr>
+													<th class="text-center">S.No</th>
+					                                <th class="text-center">Name</th>
+													<th class="text-center">Property tax number</th>
+													<th class="text-center">Mobile Number</th>
+													<th class="text-center">Availability Date</th>
+													<th class="text-center">User Type</th>
+													<th class="text-center">Status</th>
+					                                <th class="text-center">Action</th>
+												</tr>
+                                            </tfoot>
+                                        </table>
+                                    </div>
+								</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
+            </div>
+        </div>
+        
+		<div class="modal fade" id="taxCollectionRequestView" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Details</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    </div>
+                    <div class="modal-body">
+						<div class="row">
+							      
+                            <div class="col-xl-6 col-md-6" id="requestDetails">
+								
+                            </div>
+                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="pTaxdetails">
+                                &nbsp;
+                            </div>
+						</div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="modal fade" id="taxCollectionRequestUpdate" tabindex="-1" role="dialog" aria-labelledby="modalCenterLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+                <div class="modal-content">
+					
+	                    <div class="modal-header">
+	                        <h5 class="modal-title" id="modalCenterLabel"><i class="ik ik-file-text text-primary"></i> Collection Request Status Update Form</h5>
+	                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+	                    </div>
+	                    <div class="modal-body">
+							<div class="row">
+								      
+	                            <div class="col-xl-6 col-md-6" id="requestDetailsUpdate">
+									
+	                            </div>
+	                            <div class="col-xl-6 col-md-6" style="border-left: 1px solid #dee2e6;" id="statusUpdateForm">
+	                                &nbsp;
+	                            </div>
+	                            
+	                            <div class="card table-card mb-0">
+                                    
+                                   <h5 class="text-warning pl-10 text-center">Status History</h5>
+                                    
+                                    <div class="card-block pb-0">
+                                        <div class="table-responsive">
+                                            <table class="table table-hover mb-0">
+                                                <thead>
+                                                    <tr>
+                                                        <th>Company</th>
+                                                        <th>Start Date</th>
+                                                        <th>End Date</th>
+                                                        <th>Status</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr>
+                                                        <td>Apple Company</td>
+                                                        <td>23/05/2017</td>
+                                                        <td>04/08/2018</td>
+                                                        <td><label class="badge badge-success">Paid</label></td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+							</div>
+	                    </div>
+	                    <div class="modal-footer">
+	                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="ik ik-x-square"></i>Close</button>
+	                    </div>
+                    
+                </div>
+            </div>
+        </div>
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       	
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script>
+        <script src="node_modules/amcharts3/amcharts/amcharts.js"></script>
+        <script src="node_modules/amcharts3/amcharts/serial.js"></script>
+        <script src="node_modules/amcharts3/amcharts/themes/light.js"></script>
+        <script src="node_modules/jquery.datetimepicker/jquery.datetimepicker.full.min.js"></script>
+       	<script th:inline="javascript">
+			var loginUserID = /*[[${LoginUserId}]]*/'';
+			$(document).ready(function() {
+			  // Input masking for the desired format
+			  $('#ptax').mask('00-000-00000-000');
+			  $('#mobileno').mask('0000000000');
+			  
+			  // For datetime picker
+			  jQuery('#availabilitydate').datetimepicker({
+				  minTime:'10:00',
+				  maxTime:'18:01',
+				  minDate: 0, // Today
+				  //minDate:'-1970/01/2',
+				  //maxDate:'+1970/01/2',
+				  //timepicker:false, // Disable time picker
+				  mask:false,
+				  disabledWeekDays:[0], //[0,1,2,3,4,5,6] -> 0-Sunday .... 6-saturday
+				  disabledDates:['2023/08/31','2023/08/11','2023/08/12'], // Disable date on holidays
+				  /*
+				  // Disable all weekends
+				  onGenerate:function( ct ){
+				    jQuery(this).find('.xdsoft_date.xdsoft_weekend')
+				      .addClass('xdsoft_disabled');
+				  }
+				  */
+			  });
+			  
+			});
+			
+			function displayPtaxInfo(ptax){
+				var inputElement = $('#ptax');
+				
+				inputElement.removeClass('is-invalid');
+				
+				// Disable the button to prevent multiple clicks
+				$("#ptaxsearchbtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#ptaxsearchbtn").html('<i class="fas fa-spinner fa-spin"></i>');
+				  
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax)) {
+				  console.log('ptax value is valid:', ptax);
+				  // Check if the tax value has the correct length as per the format (15 characters)
+				  if (ptax.length === 16) {
+				    console.log('ptax value length is correct.');
+				    getPtaxInfo(ptax);
+				  } else {
+				    console.log('ptax value length is incorrect.');
+				    
+				    inputElement.addClass('is-invalid');
+				    
+				    $("#ptaxsearchbtn").prop("disabled", false);
+    				$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				  }
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#ptaxsearchbtn").prop("disabled", false); 
+    			  $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				}
+			}
+			
+			function getPtaxInfo(ptax){
+				call_loading('ptaxPersonalInfo','start');
+				//var ptax = '04-042-03251-000';
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if(data.ResultStatus=="False")
+						{
+							$("#ptaxPersonalInfo").html("<center>"+nodata(data.Message)+"</center>");
+							$("#ptaxsearchbtn").prop("disabled", false);
+						    $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+						else{
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							//var famCardNo = data.PROPTAX[0].Fam_Card_No;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#ptaxPersonalInfo").html(ptaxPersonalinfoHtml);
+							// Enable the button
+							$("#ptaxsearchbtn").prop("disabled", false);
+	    					$("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+						}
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching data:', status, error);
+				      // Enable the button
+				      $("#ptaxsearchbtn").prop("disabled", false);
+				      $("#ptaxsearchbtn").html('<i class="ik ik-search"></i>');
+				    }
+				});
+			}
+			
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				$("#requestSubmitBtn").prop("disabled", true);
+				
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+				var name = $('#name').val();
+				
+				var inputElement = $('#ptax');
+				var ptax = inputElement.val();
+				var formatRegex = /^\d{2}-\d{3}-\d{5}-\d{3}$/; //'04-042-03251-000';
+				inputElement.removeClass('is-invalid');
+				
+				var inputElementMobileNo = $('#mobileno');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementUsertype = $('#usertype');
+				var usertype = inputElementUsertype.val();
+				//inputElementUsertype.removeClass('is-invalid');
+				
+				var inputElementAvailabilityDate = $('#availabilitydate');
+				var availabilitydate = inputElementAvailabilityDate.val();
+				
+				var selectedDateTime = new Date(availabilitydate);
+			    var currentDateTime = new Date();
+			
+			    if (selectedDateTime < currentDateTime) {
+					alert('Selected date and time must be greater than or equal to the current date and time.');
+		        	inputElementAvailabilityDate.addClass('is-invalid');
+					$("#requestSubmitBtn").prop("disabled", false);
+    				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+		        	return false; // Prevent form submission
+		      	}
+			    
+				var formData = new FormData();
+				
+				// Check if the tax value is not null and follows the format
+				if (ptax !== null && formatRegex.test(ptax) && ptax.length == 16) {
+					
+					// Mobile number Check
+					if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) {
+						$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Submitting your request, please wait...');
+						
+						formData.append('name',name);
+						formData.append('ptax', ptax );
+						formData.append('mobile', mobileNo );
+						formData.append('usertype', usertype );
+						formData.append('availabilitydate', availabilitydate);
+						formData.append('created_by', loginUserID);
+						
+						submitSaveRequest(formData);
+
+						$("#requestSubmitBtn").html('Your request has been successfully submitted!');
+					} else {
+						inputElementMobileNo.addClass('is-invalid');
+						$("#requestSubmitBtn").prop("disabled", false);
+    					$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+					}
+				 
+				} else {
+				  console.log('ptax value is not valid or null.');
+				  
+				  inputElement.addClass('is-invalid'); //Error
+				  
+				  $("#requestSubmitBtn").prop("disabled", false); 
+    			  $("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+				}
+				return false;
+			}
+			
+			function submitSaveRequest(formData){
+				$.ajax({
+				    type: "POST",
+				    url: '/gcc/api/taxcollection/saveTaxCollectionRequest',
+		                data: formData,
+		                contentType: false,
+		                processData: false,
+				}).done(function(response) {
+	  			      Swal.fire(
+	  			        'Complaint Status Update!',
+	  			        'Complaint closed Successfully!',
+	  			        'success'
+	  			      ).then(() => {
+	  						    location.reload();
+	  						 });
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					$("#requestSubmitBtn").prop("disabled", false);
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+			    
+				});
+			}
+		</script>
+		<script>
+			$(document).ready(function() {
+				
+				// DataTables buttons configuration
+	            var buttons = [
+	            	{
+						extend: 'pageLength',
+						className: 'btn btn-warning'
+					},
+	                {
+						title: 'Data export',
+	                    extend: 'copyHtml5',
+	                    text: 'Copy',
+	                    className: 'btn btn-secondary',
+	                    id: 'copyBtn'
+	                },
+	                {
+	                    extend: 'excelHtml5',
+	                    text: 'Excel',
+	                    className: 'btn btn-secondary',
+	                    id: 'excelBtn'
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn'
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn'
+	                },
+	                
+	            ];
+				
+			    $('#requestDatatable').DataTable( {
+			        dom: 'Bftip',
+			        columnDefs: [
+					  { targets: 'no-sort', orderable: false }
+					],
+			        lengthMenu: [
+			            [ 50, 100, 200, 500, -1 ],
+			            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+			        ],
+    				scrollY: '50vh',
+			        fixedColumns: {
+				        left: 1,
+				        right: 1
+				    },
+			        buttons: [buttons],
+			        fixedHeader: true,
+			        autoWidth: true,
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+			
+			function callView(request_id){
+				$('#taxCollectionRequestView').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestView').modal('show');
+				
+				call_loading('requestDetails','start');
+				getTaxCollectionRequestDetails(request_id);
+				call_loading('pTaxdetails','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestDetails(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetails").html(ptaxPersonalinfoHtml);
+						getpTaxDetails(ptax);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function getpTaxDetails(ptax){
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Property tax number</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Owner Name</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+address+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Mobile No</td>' +
+							           '      <td class="font-medium">'+mobNo+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>';
+							$("#pTaxdetails").html(ptaxPersonalinfoHtml);
+							
+							// if Ptax data fetched then load valid message
+							var validPtax = ptax+'&nbsp;<font class="custom-tooltip-success"><a href="#" class="text-success" onclick="return false;" data-container=".custom-tooltip-success" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify success" data-original-title="Property tax number cross-verify success"><i class="ik ik-check-circle"></i></font>';
+							$("#pTaxVerification").html(validPtax);
+						}
+						else {
+						    // No data found
+						    console.log("Message: " + data.Message);
+						    var inValidPtax = ptax+'&nbsp;<font class="custom-tooltip-warning"><a href="#" class="text-warning" onclick="return false;" data-container=".custom-tooltip-warning" data-toggle="tooltip" data-html="true" data-placement="top" title="Property tax number<br>cross-verify failed" data-original-title="Property tax number cross-verify failed"><i class="ik ik-alert-triangle"></i></font>';
+							$("#pTaxVerification").html(inValidPtax);
+							
+						    $("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching pTax data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function callStatusUpdate(request_id){
+				$('#taxCollectionRequestUpdate').modal({
+				    backdrop: 'static',
+				    keyboard: false
+				})
+				$('#taxCollectionRequestUpdate').modal('show');
+				
+				call_loading('requestDetailsUpdate','start');
+				getTaxCollectionRequestUpdate(request_id);
+				call_loading('statusUpdateForm','start');
+				
+				return false;
+			}
+			
+			function getTaxCollectionRequestUpdate(request_id){
+				var apiUrl = '/gcc/api/taxcollection/getTaxCollectionRequestById?request_id='+request_id;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						
+						// Access the values
+						var request_id = data.request_id;
+						var requestNo = data.requestNo;
+						var name = data.name;
+						var mobile = data.mobile;
+						var ptax = data.ptax;
+						var usertype = data.usertype;
+						var availabilitydate = data.availabilitydate;
+						var status = data.status;
+						var cdate = data.cDate;
+						
+						// HTML content
+						var ptaxPersonalinfoHtml = '<table class="table table-borderless text-capitalize">' +
+						           '  <tbody>' +
+								   '    <tr>' +
+						           '      <td>Name</td>' +
+						           '      <td class="font-medium">'+name+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Property tax number</td>' +
+						           '      <td class="font-medium font-weight-bold" id="pTaxVerification">'+ptax+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Mobile Number</td>' +
+						           '      <td class="font-medium">'+mobile+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Availability Date & Time</td>' +
+						           '      <td class="font-medium">'+availabilitydate+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>User Type</td>' +
+						           '      <td class="font-medium">'+usertype+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Current Status</td>' +
+						           '      <td class="font-medium">'+status+'</td>' +
+						           '    </tr>' +
+						           '    <tr>' +
+						           '      <td>Request Created On</td>' +
+						           '      <td class="font-medium">'+cdate+'</td>' +
+						           '    </tr>' +
+						           '  </tbody>' +
+						           '</table>';
+						$("#requestDetailsUpdate").html(ptaxPersonalinfoHtml);
+						showStatusUpdateForm(request_id, status);
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching collection reqtest data:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function showStatusUpdateForm(request_id, status){
+				
+				var selectInput = `<select class="form-control" name="requestStatus" id="requestStatus" required>
+								        <option value="open">Open</option>
+								        <option value="close">Close</option>
+								    </select>`;
+								    
+				var textareaInput=`<textarea class="form-control" name="statusComments" id="statusComments" rows="4"></textarea>`;
+				
+				var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card mb-0"><div class="card-header" style="background-color: #ffe1003b !important;"><h3>Update Form</h3></div>' +
+									   '<div class="card-block p-0">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td width="30%">Current Status</td>' +
+							           '      <td class="font-medium">'+selectInput+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td colspan="2">Status Comments' + textareaInput+'</td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							           
+				$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+				
+				
+				var apiUrl = '/gcc/api/taxcollection/getPropertTaxPersonalDetails?ptax='+ptax;
+				$.ajax({
+				    url: apiUrl,
+				    type: 'GET',
+				    dataType: 'json',
+				    success: function(jsonResponse) {
+						// Handle the API response data here
+						console.log('Data from API:', jsonResponse);
+						// Parse the JSON response into a JavaScript object
+						var data = jsonResponse;
+						if (data.ResultStatus === "True") {
+							// Access the values
+							var owner = data.PROPTAX[0].Owner;
+							var address = data.PROPTAX[0].Address;
+							var mobNo = data.PROPTAX[0].Mob_No;
+							var email = data.PROPTAX[0].Email_ID;
+							
+							// HTML content
+							var ptaxPersonalinfoHtml = '<form class="request-form" id="request-form" onsubmit="return saveStatus();">' +
+									   '<div class="card table-card"><div class="card-header"><h3>Update Form</h3></div>' +
+									   '<div class="card-block">' +
+									   '<table class="table table-borderless">' +
+							           '  <tbody>' +
+									   '    <tr>' +
+							           '      <td>Current Status</td>' +
+							           '      <td class="font-medium">'+ptax+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Status Comments</td>' +
+							           '      <td class="font-medium">'+owner+'</td>' +
+							           '    </tr>' +
+							           '    <tr>' +
+							           '      <td>Address</td>' +
+							           '      <td class="font-medium">'+
+									   
+									   '      </td>' +
+							           '    </tr>' +
+							           '  </tbody>' +
+							           '</table>' +
+							           '</div><div class="card-footer  text-center">' +
+									   '        <button type="reset" class="btn btn-secondary mr-2"><i class="ik ik-refresh-cw"></i>Reset</button>'+
+                                       ' 	    <button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>'+
+							           '</div></div></form>';
+							$("#statusUpdateForm").html(ptaxPersonalinfoHtml);
+						}
+						else {
+						    // No data found
+						    console.log("Status history: " + data.Message);
+						    //$("#pTaxdetails").html('<center><img src="images/nodata.png"></br>No Record Found</center>');
+						}
+						// Enable tooltip for model page
+						$('[data-toggle="tooltip"]').tooltip();
+				    },
+				    error: function(xhr, status, error) {
+				      // Handle errors here
+				      console.error('Error fetching Status history:', status, error);
+				      
+				    }
+				});
+			}
+			
+			function saveStatus(){
+				return false;
+			}
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/zerohours_petition/complaint_list.html b/target/classes/templates/modules/zerohours_petition/complaint_list.html
new file mode 100644
index 0000000..29b4942
--- /dev/null
+++ b/target/classes/templates/modules/zerohours_petition/complaint_list.html
@@ -0,0 +1,882 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Complaint List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Complaint List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <!-- <div class="card">
+                                    
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+										
+										<div class="form-group">
+                                            <label for="eventid">Select Event / நிகழ்வை தேர்ந்தெடுக்கவும்</label>
+                                            <select class="form-control" id="eventid" name="eventid" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required onchange="get_complaint_list(this.value);">
+												<option value=""></option>
+											</select>
+                                        </div>
+                                        
+                                        <div>
+											<table id="complaintDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<!-- <th class="text-center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th> -->
+														<!-- <th class="text-center">Postal Code</th> -->
+						                                <!-- <th class="text-center">Type of Complaint</th> -->
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department Officer</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department Officer</th>
+						                                <th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></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/zerohours_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+        <script th:inline="javascript">
+       		var createdBy = /*[[${LoginUserId}]]*/'';
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	var officerMasterList = "";
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            },
+	            {
+					extend: 'colvis',
+					className: 'btn btn-warning'
+				},
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_complaint_data(id){
+	        	
+	        	var apiUrl = '/gcc/api/zerohours_petition/getComplaintList?eventId='+id+'&loginId='+createdBy;
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+	        
+	        
+	        /* Get Complaints List */
+	        function get_complaint_list(id){
+	        	call_loading();
+	        	get_complaint_data(id).then(function(complaintList) {
+	    		    // Handle the complaint list
+	    		    generate_table(complaintList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching complaint list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching complaint list:', error);
+			        }
+	    		});
+			}
+	        
+	        function viewPetitionSummary(petitionNo){
+alert(petitionNo);
+	        	$("#viewpetition").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				var url = '/gcc/zerohours_petition/view-petition-modal?petitionNo='+petitionNo;
+				$.ajax({
+				    url: url,
+				    type: 'GET',
+				    dataType: 'html',
+				    success: function(data) {
+				      $('#viewPetitionBoxBody').html(data); // Inject content into modal body
+				    },
+				    error: function(xhr, status, error) {
+				      console.error("Error loading URL:", error);
+				      // Handle error, display a message, etc.
+				    }
+				  });
+				
+				return false;
+			}
+	        
+	        function updateStatus(mapId){
+	        	$("#ComplaintStatusBox").modal({
+				    backdrop: 'static',
+				    keyboard: false
+				}); // Show Modal Box
+				
+				callComplaintDetails(mapId);
+				return false;
+			}
+	        
+	        function callComplaintDetails(mapId){
+	        	loading_text_msg = getLoadingMessage(); // get Loading random text
+	        	var loading=searchinfo("<b>"+loading_text_msg+"</b>");
+	    		var complaintContentHTML=`
+	    							<div class="row">
+	    							    <div class="col-lg-6">
+	    						        <div class="block block-rounded">
+	    						           
+	    						                <div id="leftContainer">${loading}</div>
+	    						            
+	    						        </div>
+	    						    </div>
+	    						    
+	    						    <div class="col-lg-6 printack2">
+	    						        <div class="block block-rounded">
+	    						            
+	    						                <div id="rightContainer">${loading}</div>
+	    						           
+	    						        </div>
+	    						    </div>
+	    						    <!--<div class="col-lg-12 text-center block-options pt-10">
+	    						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+	    						    </div>-->
+	    						</div>`;
+	    		
+	    		$('#ComplaintStatusBoxBody').html(complaintContentHTML); // Box content (Body)
+	    		
+	    		getComplaintData(mapId,false);
+			}
+	        
+	        function getComplaintData(mapId,edit=false){
+				//alert(mapId);
+	        	get_complaint_details_byId(mapId).then(function(complaintDetails) {
+	        		
+	        		var complaintStatus = complaintDetails[0].status;
+					
+	        		var statusBadge = complaintStatus.charAt(0).toUpperCase() + complaintStatus.slice(1);
+	        		var refRibben = `<div class="card-header-right" style="top:auto;">
+	        							Ref ID: ${mapId}
+				              	      </div>`;
+           	        var statusRibben = ""; 
+	        		if(complaintStatus=='pending'){
+	        			statusRibben = `<div class="ribbon">
+		              	      <div class="wrap">
+		              	        <span class="ribbon6 bg-danger"><div styel="color:#fff;">${statusBadge}</div></span>
+		              	      </div>
+		              	    </div>`;
+		              	statusRibben = "";    
+	        			statusBadge = `<span class="badge badge-danger" style="font-size:10px;padding:0.25em 0.4em;">${statusBadge}</span>`;
+	        			
+					}
+	        		else if(complaintStatus=='close'){   
+	        			statusBadge = `<span class="badge badge-success" style="font-size:10px;padding:0.25em 0.4em;">${statusBadge}</span>`;
+					}
+	        		var complaintRightBody = "";
+					var complaintLeftBody = `<div class="card mb-0">
+								             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                	<h3>Complaint Details</h3>
+								                	${statusRibben}
+								                </div>
+								                <div class="card-body">
+									                <table class="table table-borderless table-vcenter mb-0" style="font-size:12px;">
+												      <tbody>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${convertdate(complaintDetails[0].cdate)}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petition_no}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petitioner_name}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+												          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+												           ${complaintDetails[0].petitioner_mobile}
+												          </td>
+												        </tr>
+												        <tr>
+												          <th colspan="2" style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:<br><p class="fw-semibold mb-0" style="font-weight:normal;">${complaintDetails[0].complaint_nature}</p></th>
+												        </tr>
+												        <tr>
+												        	<td colspan="2" style="padding: 0.45rem 0.45rem;">
+													        	<table class="table table-bordered table-vcenter mb-0">
+													                <thead>
+													                  <tr>
+													                    <th>Complaint <i class="fa fa-arrow-right"></i> Status</th>
+													                    <th class="text-right" id="complaint_forward_link"><!--<a href="javascript:void(0);" onclick="return forward_compliant(${complaintDetails[0].mapid}, '${complaintDetails[0].complaint_type}');" class="link" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Click here to forward this complaint to another department officer."><i class="far fa-share-square"></i> Click to forward </a>--></th>
+													                  </tr>
+													                </thead>
+												                	<tbody>
+												                 		<tr>
+															            	<td colspan="2" class="fw-semibold">
+															            	${complaintDetails[0].petition_no} <i class="fa fa-arrow-right"></i> ${statusBadge} <i class="fa fa-arrow-right"></i> ${complaintDetails[0].off_nm}
+														                    </td>
+													                  	</tr>
+												                	</tbody>
+												              	</table>
+												        	</td>
+												        </tr>
+												      </tbody>
+												    </table>
+								                </div>
+								            </div>`;
+					
+					$('#leftContainer').html(complaintLeftBody);
+					
+					if(complaintStatus!='close'|| edit){
+						if(edit){
+							get_complaint_action_byId(mapId).then(function(complaintAction) {
+							complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data">
+													<div class="card mb-0">
+								                    	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                    		<h3>Complaint Update Details</h3>
+								                    	    ${refRibben}
+								                		</div>
+								                		<div class="card-body">
+									                		<div class="form-group">
+						                                    	<label for="complaintActionText">நடவடிக்கை / Action:</label>
+										   						<textarea class="form-control" id="complaintActionText" name="complaintActionText" rows="6" maxlength="250" placeholder="புகாரின் தன்மை..." required>${complaintAction[0].comments}</textarea>
+										   					</div>
+										   					
+										   					<div class="form-group">
+										                       <label for="action_san_page1">ஆவணப் பதிவேற்றம் / Document Upload:</label>
+															   <input name="action_san_page1" id="action_san_page1" class="form-control" type="file" capture="camera"  accept="application/pdf, image/*" required>
+															 </div>
+															 <div class="form-group mb-0 text-center">
+															 	<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveandclose(${mapId},${complaintDetails[0].petition_id},'${complaintDetails[0].petition_no}');" id="updatebtn"><i class="ik ik-save"></i> Save and Close </button>
+															 </div>
+								                		</div>
+								            		</div>
+							            		</form>`;
+							$('#rightContainer').html(complaintRightBody);
+							}).catch(function(error) {
+				    		    // Handle errors
+				    		    console.error('Error fetching action details ('+mapId+'):', error);
+				    		});	
+							//alert(complaintRightBody);
+							
+						}
+						else{
+							complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data">
+													<div class="card mb-0">
+								                    	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                    		<h3>Complaint Update Details</h3>
+								                    	    ${refRibben}
+								                		</div>
+								                		<div class="card-body">
+									                		<div class="form-group">
+						                                    	<label for="complaintActionText">நடவடிக்கை / Action:</label>
+										   						<textarea class="form-control" id="complaintActionText" name="complaintActionText" rows="6" maxlength="250" placeholder="புகாரின் தன்மை..." required></textarea>
+										   					</div>
+										   					
+										   					<div class="form-group">
+										                       <label for="action_san_page1">ஆவணப் பதிவேற்றம் / Document Upload:</label>
+															   <input name="action_san_page1" id="action_san_page1" class="form-control" type="file" capture="camera"  accept="application/pdf, image/*" required>
+															 </div>
+															 <div class="form-group mb-0 text-center">
+															 	<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveandclose(${mapId},${complaintDetails[0].petition_id},'${complaintDetails[0].petition_no}');" id="updatebtn"><i class="ik ik-save"></i> Save and Close </button>
+															 </div>
+								                		</div>
+								            		</div>
+							            		</form>`;
+						}
+						$('#rightContainer').html(complaintRightBody);
+					}
+					else{
+						// first remove forward link
+						$("#complaint_forward_link").html("");
+						
+						get_complaint_action_byId(mapId).then(function(complaintAction) {
+							var fileType = complaintAction[0].file_type;
+							fileType = fileType.split("/").pop();
+							var filetypeico = "file-lines";
+							if(fileType=='pdf'){
+								filetypeico = "file-pdf";
+							}
+							else{
+								filetypeico = "file-image";
+							}
+							
+							complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data">
+													<div class="card mb-0">
+								                    	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+								                    		<h3>Complaint Update Details</h3>
+								                    	    ${refRibben} 
+								                		</div>
+								                		<div class="card-body">
+									                		<div>
+									                			<b>நடவடிக்கை தேதி / Action Date:</b> ${convertdate(complaintAction[0].cdate)}
+					                                            <hr>
+					                                            <b>நடவடிக்கை / Action:</b><br>
+					                                            <p class="mt-10">${complaintAction[0].comments}</p>
+					                                        </div>
+					                                        	<hr>
+					                                        <div class="like-comm mt-20 mb-0"> 
+					                                        	<b>ஆவணப் பதிவேற்றம் / Document Upload:</b><br>
+					                                        	
+						                                        	<table class="table table-bordered table-vcenter mb-0">
+														                <thead>
+														                  <tr>
+														                    <th>S.no</th>
+														                    <th>File Name</th>
+														                    <th>Size</th>
+														                    <th>Type</th>
+														                    <th><i class="ik ik-more-horizontal"></i></th>
+														                  </tr>
+														                </thead>
+													                	<tbody>
+													                 		<tr>
+																            	<td class="fw-semibold">1</td>
+																            	<td class="fw-semibold">${complaintAction[0].file_name}</td>
+																            	<td class="fw-semibold">${formatFileSize(complaintAction[0].file_size)}</td>
+																            	<td class="fw-semibold">${fileType}</td>
+																            	<td class="fw-semibold">
+																            		<a href="javascript:void(0)" class="link mr-10" onclick="downloadFile('action','${complaintAction[0].file_name}','${complaintAction[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Download File"><i class="fa fa-fw fa-download" style="font-size: 18px;"></i></a>
+																            		<a href="javascript:void(0)" class="link mr-10" onclick="viewFile('action','${complaintAction[0].file_name}','${complaintAction[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View File"><i class="far fa-3x fa-${filetypeico}" style="font-size: 18px;"></i></a>
+																            	</td>
+														                  	</tr>
+													                	</tbody>
+													              	</table>
+					                                   		</div>
+								                		</div>
+								                		<!--<a href="javascript:void(0)" onclick="getComplaintData(${mapId}, true);">Edit</a>-->
+								                		<button type="button" class="btn btn-success" id="edit" onclick="getComplaintData(${mapId}, true);"><i class="ik ik-edit"></i>Edit</button>
+								            		</div>
+							            		</form>`;
+							$('#rightContainer').html(complaintRightBody);
+							// Enable tooltips for all elements with data-toggle="tooltip"
+				            $('[data-toggle="tooltip"]').tooltip();
+						}).catch(function(error) {
+			    		    // Handle errors
+			    		    console.error('Error fetching action details ('+mapId+'):', error);
+			    		});	 
+						
+					}
+					// Enable tooltips for all elements with data-toggle="tooltip"
+		            $('[data-toggle="tooltip"]').tooltip();
+	        	}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching Complaint details ('+mapId+'):', error);
+	    		});	            
+	        	
+			}
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+	        	$('#complaintDatatable').DataTable().destroy();
+	        	
+	            var table = $('#complaintDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        //scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+	            	var complaint_status=row["status"];
+					complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1);
+					
+					actionHTML = `<div class="dropdown d-inline-block show">
+			                        <a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
+			                        <!--<div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end">
+			                        Action for: `+row['petition_no']+` 
+			                        	<a class="dropdown-item" href="" onclick="return viewAck('`+row['petition_no']+`');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View Acknowledgement"><i class="ik ik-eye"></i> Acknowledgement</a>
+			                        	<a class="dropdown-item" href="/gcc/zerohours_petition/petition-ack/`+row['petition_no']+`" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print Acknowledgement"><i class="ik ik-printer"></i> Acknowledgement</a>
+			                        </div>-->
+			                    </div>`
+	                table.row.add([
+	                	rowNum++,
+	                    //'<a href="/gcc/zerohours_petition/update-petition?petitionNo='+row['petitionNoEncode']+'" onclick="return viewPetitionSummary(\''+row['petitionNoEncode']+'\');">'+row['petition_no']+'</a>',
+	                    row['petition_no'],
+	                    row['petitioner_name'],
+	                    row['petitioner_mobile'],
+	                    //row['petitioner_address'],
+	                    //row['petitioner_pincode'],
+	                    //row['complaint_type'],
+	                    convertdate(row['cdate']),
+	                    '<a href="#" class="link" onclick="return updateStatus('+row['mapid']+');" style="text-transform: capitalize;"">'+complaint_status+'</a>',
+	                    row['off_nm'],
+	                    actionHTML
+	                ]).draw(false);
+	            });
+	            
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+	        /* Get Event Data */
+	        function get_event_data(){
+	        	get_event_list().then(function(eventList) {
+	        		$('#ward').empty();
+					if(eventList.length>0){
+						// Iterate through the department list and add options to the select element
+		    		    $.each(eventList, function(index, events) {
+		    	            // Create an option element
+		    	            //alert(events.name);
+		    	            var option = $('<option>', {
+		    	            	value: events.id, // case-sensitive as per object
+		    	                text: events.name
+		    	            });
+		    	            // Append the option to the select element
+		    	            $('#eventid').append(option);
+		    	        });
+					}
+					else{
+						$("#card-body").html("<center>No Active Event Found!</center>");
+					}
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching event list:', error);
+	    		    
+	    		});
+	        	remove_loading();
+			}
+	        
+	      //Save Forward Details
+			function saveForward(mapid){
+				
+				var offidto = $("#dept2").val();
+				
+				if(offidto=='' || offidto==0){
+					var formError= "Select Department Required!";
+					$('#forwardFormError').html(formError);
+					return false;
+				}
+				
+				var comments = $("#forwardcomp").val();
+				var textLength = comments.length;
+				var formError= "";
+				if(textLength<=10){
+					formError= "Forward Comments Required!";
+					$('#forwardFormError').html(formError);
+					return false;
+				}
+				else{
+					$('#forwardFormError').html(formError);
+				}
+				
+				$.ajax({
+				    type: "POST",
+				    url: '/api/insertForwardLog',
+				    data: {
+				        'mapid': mapid,
+						'comments':comments,
+						'offidto':offidto
+				    },
+				}).done(function(response) {
+				      Swal.fire(
+				        'Complaint Forward Status!',
+				        'Complaint Forwarded Successfully!',
+				        'success'
+				      ).then(() => {
+							    location.reload();
+							 });
+					console.log(response);
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					/*
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+				    console.error("URL: /api/setEventId");
+				    console.error("Query parameters:", {
+				        'upass': upass
+				    });
+					*/
+				});
+				return false;
+			}
+	     	
+	      // Save New Action  
+			function saveandclose(mapId,petitionId,petitionNo){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var comments = $('#complaintActionText');
+				var textLength = comments.val().length;
+				comments.removeClass('is-invalid');
+				
+				var fileInput = $("#action_san_page1");
+				fileInput.removeClass('is-invalid');
+				var selectedFile = fileInput.val();
+				
+				if (textLength>=10 && selectedFile) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#action-form')[0]);
+			        formData.append('createdBy',createdBy);
+			        formData.append('mapId',mapId);
+			        formData.append('petitionId',petitionId);
+			        formData.append('petitionNo',petitionNo);
+			        formData.append('complaintStatus','close');
+			        
+			        saveActionFormData(formData).then(function(response) {
+						if(response!="error"){
+							// Handle the response
+		    		    	Swal.fire({
+		        				title: 'Complaint action saved successfully.',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'success',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					$("#ComplaintStatusBox").modal('hide');
+		        				}
+		        			});
+						}
+						else{
+							// Handle the response
+							// if response == "error"
+		    		    	Swal.fire({
+		        				title: 'Failed to save complaint action. Please try again!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+		    		    
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					if(textLength<10){
+						comments.addClass('is-invalid');
+					}
+					
+					if (!selectedFile) {
+						fileInput.addClass('is-invalid');
+					}
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function saveActionFormData(formData){
+				var apiUrl = '/gcc/api/zerohours_petition/saveComplanitStatus';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function form_btn_enable(){
+				$("#updatebtn").prop("disabled", false);
+				$("#updatebtn").html('<i class="ik ik-save"></i> Save and Close ');
+			}
+			
+			function form_btn_disable(){
+				$("#updatebtn").prop("disabled", true);
+				// Show the loading icon on the button
+				$("#updatebtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+			}
+			
+			// For Complient Map Select HTML 
+			function calloffice(val,id){
+				if(val==1){ // Intenal
+					var officeSelectHTML = `<div class="mb-4">
+	                							<label for="office${id}">Select Office</label>
+	                							<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})">
+									                <option value="0">Select Office</option>
+									                <option value="1">HQ</option>
+									                <option value="2">Zonal Office</option>
+							                	</select>
+						                	</div>`;
+					$("#officedata"+id).html(officeSelectHTML);
+				}
+				else if(val==2){ // External
+					$("#officers"+id).html('');
+					var ExSelectHTML = getselect(id,"ExSelect");
+					var departmentSelectHTML = `<div class="mb-4">
+													<label for="dept3">Select Department</label>
+													${ExSelectHTML}
+											 	</div>`;
+					$("#officedata"+id).html(departmentSelectHTML);
+				}
+				else{
+					$("#officedata"+id).html('');
+					$("#officers"+id).html('');
+				}
+				$("#officers"+id).html('');
+			}
+			
+			function callofficers(val,id){
+				
+				if(val==1){
+					// HQ
+					var HQSelectHTML = getselect(id,"HQSelect");
+				 	$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`);
+				}
+				else if(val==2){
+					// Zone Office
+					var ZoneSelectHTML = getselect(id,"ZoneSelect");
+					$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`);
+				}
+				else{
+					$("#officers"+id).html('');
+				}
+				
+			}
+			
+			function getselect(comid,type){
+		  	  var HQSelect = '';
+		  	  var ZoneSelect = '';
+		  	  var ExSelect = '';
+		  
+		  	  for (var i = 0; i < officerMasterList.length; i++) {
+		  		  if(officerMasterList[i].zone_id=="HQ"){
+		  			  HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else if(officerMasterList[i].zone_id=="99"){
+		  			  ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else{
+		  			  ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  	  }
+		  	  
+		  	// Forward Save Button
+			  var forward_Btn = `<div class="col-12 pt-3 mb-0 pb-0" id="submitdiv">
+									<label class="form-label" for="forwardcomp">Forward Comments</label>
+									<textarea class="js-maxlength form-control" id="forwardcomp" name="forwardcomp" rows="6" maxlength="250" placeholder="கருத்துகள்..." data-always-show="true" data-placement="right" th:utext="" required></textarea>
+			  						<div class="text-center pt-3">
+									<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveForward(${comid});" id="updatebtn"><i class="si si-rocket me-1"></i> Save and Forward</button>
+			  						<div id="forwardFormError" class="text-danger"></div>
+			  						</div>
+								</div>`;
+								
+		  	  if(type=="HQSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ZoneSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ExSelect"){
+		  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  return '';
+			}
+			$(document).ready(function() {
+				call_loading();
+				get_officer_master_data();
+				get_event_data();
+			});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/zerohours_petition/new_petition.html b/target/classes/templates/modules/zerohours_petition/new_petition.html
new file mode 100644
index 0000000..22cd4e6
--- /dev/null
+++ b/target/classes/templates/modules/zerohours_petition/new_petition.html
@@ -0,0 +1,456 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Add New Petition</h5>
+                                            <span>Zero Hours Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Zero Hours Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Add Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+                        	<div class="col-md-2"></div>
+							<div class="col-md-8">
+                                <div class="card">
+									<form class="request-form" id="request-form" onsubmit="return saveRequest();" enctype="multipart/form-data">
+	                                    <div class="card-header"><h3>New Petition Form</h3></div>
+	                               		<div class="card-body" id="card-body">
+	                               			<div class="row">
+	                               				<div class="col-lg-12">
+													<div class="form-group">
+			                                            <label for="eventid">Select Current Event / ததற்போதைய நிகழ்வை தேர்ந்தெடுக்கவும்</label>
+			                                            <select class="form-control" id="eventid" name="eventid" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required>
+															<option value=""></option>
+														</select>
+			                                           <!-- <div class="form-radio" id="petition_type"></div> -->
+			                                        </div>
+		                                      	</div>
+	                               				<div class="col-lg-6">
+													<div class="form-group">
+			                                            <label for="zone">Select Zone / தேர்வு செய்யும் மண்டலம்</label>
+			                                            <select class="form-control" id="zone" name="zone" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." onchange="get_ward_list(this.value);" required>
+															<option value=""></option>
+														</select>
+			                                           <!-- <div class="form-radio" id="petition_type"></div> -->
+			                                        </div>
+		                                      	</div>
+	                                        	<div class="col-lg-6">
+			                                        <div class="form-group">
+			                                            <label for="ward">Select Ward / தேர்வு செய்யும் வார்டு</label>
+			                                            <select class="form-control" id="ward" name="ward" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required  onchange="get_councillor_details(this.value);">
+															<option value=""></option>
+														</select>
+			                                           <!-- <div class="form-radio" id="petition_type"></div> -->
+			                                        </div>
+	                                        	</div>
+	                                        </div>
+	                                        <div class="row">
+	                               				<div class="col-lg-6">
+													<div class="form-group">
+			                                            <label for="councillorName">Councillor Name / கௌன்சிலர் பெயர்</label>
+			                                            <input type="text" readonly class="form-control" name="councillorName" id="councillorName" autocomplete="off" placeholder="கௌன்சிலர் பெயர்"  maxlength="250" required>
+			                                        </div>
+			                                    </div>
+	                                        	<div class="col-lg-6">
+			                                        <div class="form-group">
+			                                            <label for="councillorMobile">Mobile NO / கைபேசி எண்</label>
+					                       				<input type="text" readonly class="js-maxlength form-control" id="councillorMobile" name="councillorMobile" autocomplete="off" placeholder="கைபேசி எண்" maxlength="10" data-always-show="true" data-placement="top" required>
+			                                        </div>
+			                                     </div>
+			                                </div>
+			                                <div class="form-group">
+	                                        	<label for="complaintNature">புகாரின் தன்மை / Nature Of Complaint</label>
+						   						<textarea class="form-control" id="complaintNature" name="complaintNature" rows="6" placeholder="புகாரின் தன்மை..."></textarea>
+						   					</div>
+											<!-- 
+	                                        <div class="row">
+												 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page1">Petition Page 1 / மனு பக்கம் 1</label>
+													   <input name="san_page1" id="san_page1" class="form-control" type="file" capture="camera"  accept="application/pdf, image/*">
+													 </div>
+												 </div>
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page2">Petition Page 2 / மனு பக்கம் 2</label>
+													   <input name="san_page2" id="san_page2" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+												 
+											</div>	 
+											<div class="row">	 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page3">Petition Page 3 / மனு பக்கம் 3</label>
+													   <input name="san_page3" id="san_page3" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+												 
+							                     <div class="col-lg-6">
+								                     <div class="form-group">
+								                       <label for="san_page4">Petition Page 4 / மனு பக்கம் 4</label>
+													   <input name="san_page4" id="san_page4" class="form-control" type="file" capture="camera" accept="application/pdf, image/*">
+													 </div>
+												 </div>
+											</div>
+										 	
+	                                  	</div>
+	                                  	 -->
+	                                  	<div class="card-footer text-right">
+											<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+	                                	</div>
+                                	</form>
+                                </div>
+                            </div>
+							<div class="col-md-2"></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 th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var complaintTypeList = "";
+			var zoneList="";
+			var wardList="";
+			
+			/* Get Event Data */
+	        function get_event_data(){
+	        	get_current_event_list().then(function(eventList) {
+	        		$('#ward').empty();
+					if(eventList.length>0){
+						// Iterate through the department list and add options to the select element
+		    		    $.each(eventList, function(index, events) {
+		    	            // Create an option element
+		    	            //alert(events.name);
+		    	            var option = $('<option>', {
+		    	            	value: events.id, // case-sensitive as per object
+		    	                text: events.name
+		    	            });
+		    	            // Append the option to the select element
+		    	            $('#eventid').append(option);
+		    	        });
+					}
+					else{
+						$("#card-body").html("<center>No Active Event Found!</center>");
+					}
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching event list:', error);
+	    		    
+	    		});
+			}
+			
+			/* Get Zone and Ward Data */
+	        function get_zone_ward_data(){
+	        	get_zone_ward_list().then(function(zoneWard) {
+	    		    // Handle the zoneward list
+	    		    zoneWardList = zoneWard;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(zoneWardList, function(index, zoneWards) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: zoneWards.zone, // case-sensitive as per object
+	    	                text: "Zone "+ zoneWards.zone
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#zone').append(option);
+	    	        });
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			
+	        /* Get Ward List */
+	        function get_ward_list(zone) {
+
+	            // Assuming get_zone_ward_list() returns a promise that resolves to the zoneWardList
+	            get_zone_ward_list().then(function(zoneWard) {
+	                // Handle the zoneWard list
+	                zoneWardList = zoneWard;
+	                
+	                // Clear any existing options in the ward dropdown
+	                $('#ward').empty();
+	                
+	                var option = $('<option>', {
+                        value:"" ,  // Set ward number as the value
+                        text:""  // Display as "Ward 1", "Ward 2", etc.
+                    });
+	                
+	                $('#ward').append(option);
+	                
+	                $('#councillorName').val('');
+					$('#councillorMobile').val('');
+					
+	            	 // Find the correct zone in the zoneWardList
+	                var selectedZone = zoneWardList.find(function(zoneWards) {	                    
+						return zoneWards.zone == zone;  // Compare the zone value
+	                });
+	                // If the zone is found, iterate over its wards and add options
+	                if (selectedZone) {
+	                    var wardsArray = selectedZone.wards.split(',');  // Split wards string into array
+	                    $.each(wardsArray, function(index, ward) {
+	                        // Create an option element
+	                        option = $('<option>', {
+	                            value: ward.trim(),  // Set ward number as the value
+	                            text: 'Ward ' + ward.trim()  // Display as "Ward 1", "Ward 2", etc.
+	                        });
+	                        // Append the option to the select element
+	                        $('#ward').append(option);
+	                    });
+	                } else {
+	                    console.error('Zone not found');
+	                }
+
+	            }).catch(function(error) {
+	                // Handle errors
+	                console.error('Error fetching ward list:', error);
+	            });
+	        }
+	        
+	        /* Get Ward List */
+	        function get_councillor_details(ward) {
+
+	            // Assuming get_zone_ward_list() returns a promise that resolves to the zoneWardList
+	            get_councillor_list(ward).then(function(councillors) {
+	                // Handle the zoneWard list
+	                councillorList = councillors;
+	                
+	                // Clear any existing options in the ward dropdown
+	                $('#councillorName').val('');
+					$('#councillorMobile').val('');
+	                
+				   	// Iterate through the department list and add options to the select element
+				   	$.each(councillorList, function(index, councillor) {
+				   		$('#councillorName').val(councillor.name)
+		                $('#councillorMobile').val(councillor.mobile1);
+				   	});   
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+	        }
+	        
+	       
+			/* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(complaintTypeList, function(index, complaintType) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: complaintType.complaint_typeid, // case-sensitive as per object
+	    	                text: complaintType.complaint_type
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#complaintType').append(option);
+	    	        });
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			
+	        /* Get Petition Type Data */
+	        function get_petition_type_data(){
+	        	var petitionTypeHTML="";
+	    		get_petition_type_list().then(function(petitionTypes) {
+	    		    // Handle the Complaint list
+	    		    petitionTypeList = petitionTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(petitionTypeList, function(index, petitionType) {
+	    	            // Create an option element
+	    	            
+	    	            petitionTypeHTML +=`<div class="radio radiofill ${petitionType.color_class} radio-inline">
+						                            <label class="cursure_poiter">
+						                            <input type="radio" name="petitionType" value="${petitionType.petition_type_id}">
+						                            <i class="helper"></i>${petitionType.name}
+						                        </label>
+						                    </div>`;
+	    	        });
+	    		 // Append the option to the select element
+    	         $('#petition_type').html(petitionTypeHTML);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching petition type list:', error);
+	    		});
+			}
+			 
+			// Save New petition 
+			function saveRequest(){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var inputElementMobileNo = $('#petitionerMobile');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementComplaintType = $('#complaintType');
+				var complaintType = inputElementComplaintType.val();
+				
+				if (mobileNo !== null) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#request-form')[0]);
+			        formData.append('createdBy',createdBy);
+			        saveFormData(formData).then(function(response) {
+						if(response!="error"){
+							// Handle the response
+		    		    	Swal.fire({
+		        				title: 'Petition data saved successfully.',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'success',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					// Reload the current page
+		        					//location.reload();
+		        					// Navigate to a Ack page
+		        					//window.location = "/gcc/zerohours_petition/petition-ack/"+response;
+		        					window.location = "/gcc/zerohours_petition/new_petition";
+		        				}
+		        			});
+						}
+						else{
+							// Handle the response
+							// if response == "error"
+		    		    	Swal.fire({
+		        				title: 'Failed to save petition data. Please try again!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+		    		    
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					inputElementMobileNo.addClass('is-invalid');
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function saveFormData(formData){
+				var apiUrl = '/gcc/api/zerohours_petition/savePetition';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function form_btn_enable(){
+				$("#resetFormBtn").prop("disabled", false);
+				$("#requestSubmitBtn").prop("disabled", false);
+				$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+			}
+			
+			function form_btn_disable(){
+				$("#resetFormBtn").prop("disabled", true);
+				$("#requestSubmitBtn").prop("disabled", true);
+				// Show the loading icon on the button
+				$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+			}
+			
+			$(document).ready(function() {
+				get_event_data();
+				get_zone_ward_data();
+				get_complaint_type_data();
+				$('#petitionerMobile').mask('0000000000');
+			});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/zerohours_petition/petition_ack.html b/target/classes/templates/modules/zerohours_petition/petition_ack.html
new file mode 100644
index 0000000..5dcb1cc
--- /dev/null
+++ b/target/classes/templates/modules/zerohours_petition/petition_ack.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5 th:utext="'Petition Acknowledgement ('+${petitionNo}+')'">Petition Acknowledgement</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Petition Acknowledgement</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr class="print_no">
+                        <!-- 
+                        <div class="row">
+                        	<div class="col-lg-6">
+								<div class="block block-rounded ack ack-container">
+									<div id="ack1table" style="border: 1px solid black;">
+										<div id="ack1"></div>
+									</div>
+								</div>
+							</div>
+						 
+							<div class="col-lg-6">
+								<div class="block block-rounded ack ack-container">
+									<div id="ack2table" style="border: 1px solid black;">
+										<div id="ack2"></div>
+									</div>
+								</div>
+							</div>
+		   	 	            <div class="col-lg-12 text-center block-options pt-10">
+		   	 					<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+		   	 	            </div>
+                        </div>
+                         -->
+                        <div class="row">
+						    <div class="col-lg-6">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack1table" class="ack-content">
+						                <div id="ack1">This is ack1</div>
+						            </div>
+						        </div>
+						    </div>
+						    
+						    <div class="col-lg-6 printack2">
+						        <div class="block block-rounded ack ack-container">
+						            <div id="ack2table" class="ack-content">
+						                <div id="ack2">This is ack2</div>
+						            </div>
+						        </div>
+						    </div>
+						    <div class="col-lg-12 text-center block-options pt-10">
+						        <button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button>
+						    </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 th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var complaintTypeList = "";
+			
+			 /* Get Complaint Type Data */
+			function get_complaint_type_data(){
+			
+				get_complaint_type_list().then(function(complaintTypes) {
+				    // Handle the Complaint list
+				    complaintTypeList = complaintTypes;
+					
+				    // After Complaint Type list created we call petition details
+				    get_petition_data();
+				    
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching complaint type list:', error);
+				});
+			}
+			
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint_txt;
+					
+					var complaintArray = complaint.split(',');
+					
+					for(j = 0; j < complaintArray.length; j++){
+						if(j>0){
+							complaintHTML+="<br>";
+						}
+						complaintHTML+= (j+1)+') '+complaintArray[j];
+					}
+					var ack =`
+					<table class="table table-borderless table-vcenter p-0 m-0">
+					  <tbody>
+					    <tr>
+					      <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+					      <td class="fw-semibold text-center">
+								<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br>
+								மக்களை தேடி மேயர் திட்டம்<br>
+								ஒப்புகை சீட்டு / Acknowledgement Receipt</b>
+						  </td>
+						  <td scope="row"><img src="images/logo-sm.png" width="80px"/></td>
+					    </tr>
+					</tbody>
+					</table>
+					<hr style="margin:0px">
+					  <div class="block-content p-0 m-0">
+					    <table class="table table-borderless table-vcenter" style="font-size:12px;">
+					      <tbody>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${convertdate(petitionDetails[0].cdate)}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petition_no}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petitioner_name}
+					          </td>
+					        </tr>
+					        <tr>
+					          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${petitionDetails[0].petitioner_mobile}
+					          </td>
+					        </tr>
+					        <tr style="font-size:12px;">
+					          <th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th>
+					          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+					           ${complaintHTML}
+							</td>
+					        </tr>
+					        <tr>
+					          <td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th>
+					        </tr>
+					        <tr style="text-align: right;">
+					          <th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th>
+					        </tr>
+					      </tbody>
+					    </table>
+					  `;
+				    
+					$("#ack1").html(ack);
+					$("#ack2").html(ack);
+					  
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition details ('+petitionNo+'):', error);
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			
+			function get_petition_details() {
+			    
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/zerohours_petition/getPetitionDetails?petitionNo='+petitionNo;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                resolve(jsonResponse);
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			$(document).ready(function() {
+				get_complaint_type_data();
+			});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/zerohours_petition/petition_list.html b/target/classes/templates/modules/zerohours_petition/petition_list.html
new file mode 100644
index 0000000..d1996b1
--- /dev/null
+++ b/target/classes/templates/modules/zerohours_petition/petition_list.html
@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Petition List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Petition List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                               <!--  <div class="card">
+                                    
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+										
+										<div class="form-group">
+                                            <label for="eventid">Select Event / நிகழ்வை தேர்ந்தெடுக்கவும்</label>
+                                            <select class="form-control" id="eventid" name="eventid" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required onchange="get_petitions_list(this.value);">
+												<option value=""></option>
+											</select>
+                                        </div>
+			                                        
+                                        <div>
+                                        	
+											<table id="petitionDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered" style="font-size:10px;">
+						                                <th class="text-center no-sort" width="3%">S.No</th>
+														<th class="text-center" width="10%">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<!-- <th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>-->
+						                                <th class="text-center">Content</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center" width="7%">Status</th>
+						                                <!--<th class="text-center">Petition Type</th>-->
+						                                <th class="text-center no-sort no-exportable no-print" width="5%">Action</th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- 
+                                                <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</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/zerohours_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+        <script th:inline="javascript">
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            }
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+			/* Get Event Data */
+	        function get_event_data(){
+	        	get_event_list().then(function(eventList) {
+	        		$('#ward').empty();
+					if(eventList.length>0){
+						// Iterate through the department list and add options to the select element
+		    		    $.each(eventList, function(index, events) {
+		    	            // Create an option element
+		    	            //alert(events.name);
+		    	            var option = $('<option>', {
+		    	            	value: events.id, // case-sensitive as per object
+		    	                text: events.name
+		    	            });
+		    	            // Append the option to the select element
+		    	            $('#eventid').append(option);
+		    	        });
+					}
+					else{
+						$("#card-body").html("<center>No Active Event Found!</center>");
+					}
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching event list:', error);
+	    		    
+	    		});
+	        	remove_loading();
+			}
+			
+	        /* Get Complaints Data */
+	        function get_petitions_data(id){
+	        	var apiUrl = '/gcc/api/zerohours_petition/getPetitionList?eventId='+id;
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_petitions_list(id){
+	        	call_loading();
+	        	get_petitions_data(id).then(function(petitionList) {
+	    		    // Handle the department list
+	    		    generate_table(petitionList);
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching petition list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching petition list:', error);
+			        }
+	    		});
+			}
+        
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+
+	        	if ( $.fn.dataTable.isDataTable('#petitionDatatable') ) {
+	        	    $('#petitionDatatable').DataTable().destroy();  // Destroy the existing instance
+	        	}
+	        	
+	            var table = $('#petitionDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+						  { targets: 'no-sort', "orderable": false },
+						  { targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				        //scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+
+	            	//View Acknowledgement: View the acknowledgement for petition MP10000001.
+					//Print Acknowledgement: Print the acknowledgement for petition MP10000001.
+					//View Petition Details: View the details of petition MP10000001.
+					//View Uploaded Files: View the files uploaded for petition MP10000001.
+
+					actionHTML = `<div class="dropdown d-inline-block show">
+			                        <a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a>
+			                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end">
+			                        
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the acknowledgement for petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Acknowledgement</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print the acknowledgement for petition `+row['petition_no']+`."><i class="ik ik-printer"></i> Print Acknowledgement</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the details of petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Petition Details</a>
+			                        	<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the files uploaded for petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Uploaded Files</a>
+			                        </div>
+			                    </div>`
+			                    
+			        actionHTML =`<i class="ik ik-more-horizontal"></i>`
+			        
+	                table.row.add([
+	                	rowNum++,
+	                    '<a href="/gcc/zerohours_petition/update-petition?petitionNo='+row['petitionNoEncode']+'" class="link">'+row['petition_no']+'</a>',
+	                    row['petitioner_name'],
+	                    row['petitioner_mobile'],
+	                    //row['petitioner_address'],
+	                    //row['petitioner_pincode'],
+	                    row['complaint_nature'],
+	                    convertdate(row['cdate']),
+	                    row['status'],
+	                    //row['petition_type_name'],
+	                    actionHTML
+	                ]).draw(false);
+	            });
+	            
+	           // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            remove_loading(); // remove Loading 
+			}
+			
+			$(document).ready(function() {
+				call_loading();
+				get_event_data();
+			});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/zerohours_petition/petition_not_mapped_list.html b/target/classes/templates/modules/zerohours_petition/petition_not_mapped_list.html
new file mode 100644
index 0000000..affc7db
--- /dev/null
+++ b/target/classes/templates/modules/zerohours_petition/petition_not_mapped_list.html
@@ -0,0 +1,463 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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="far fa-list-alt bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Unmapped Petition List</h5>
+                                            <span>Commissioner Petition</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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Unmapped Petition List</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <!-- <div class="card">
+                                	<div class="card-header">
+                                        <h3>These are the petitions that are currently not assigned to any department officer:</h3>
+                                    </div>
+                                    <div class="card-block"> -->
+										<div id="tableLoading"></div>
+										
+										<div class="form-group">
+                                            <label for="eventid">Select Event / நிகழ்வை தேர்ந்தெடுக்கவும்</label>
+                                            <select class="form-control" id="eventid" name="eventid" style="width: 100%;" data-placeholder="தேர்ந்தெடு.." required onchange="get_petitions_list(this.value);">
+												<option value=""></option>
+											</select>
+                                        </div>
+                                        
+                                        <div>
+                                        <p style="font-size:12px">These are the petitions that are currently not assigned to any department officer:</p>
+											<table id="petitionDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%">
+                                                <thead class="thead-dark">
+	                                                <tr class="table-bordered">
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Zone</th>
+														<th class="text-center">Ward</th>
+						                                <th class="text-center">Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</th>
+						                             </tr>
+                                                </thead>
+                                                <tbody>
+	                                                	
+                                                </tbody>
+                                                <!-- <tfoot class="thead-dark">
+	                                                <tr>
+						                                <th class="text-center no-sort">S.No</th>
+														<th class="text-center">Petition No.</th>
+						 								<th class="text-center">Name</th>
+						 								<th class="text-center">Mobile</th>
+						 								<th class="text-center">Address</th>
+														<th class="text-center">Postal Code</th>
+						                                <th class="text-center">Type of Complaint</th>
+						                                <th class="text-center">Date</th>
+						                                <th class="text-center">Status</th>
+						                                <th class="text-center">Department</th>
+						                                <th class="text-center no-sort no-exportable no-print">Action</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/zerohours_petition/modal-box :: div}"></div>   
+        
+        <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
+       
+        <script th:replace="~{fragments/modules/base/script :: script}"></script>
+        <script th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+        <script th:inline="javascript">
+        	var createdBy = /*[[${LoginUserId}]]*/'';
+        	var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script
+        	var officerMasterList = "";
+        	
+        	// Loading Div id
+        	const loading = $("#tableLoading");
+	     	
+        	// DataTables buttons configuration
+	        var buttons = [
+	        	{
+					extend: 'pageLength',
+					className: 'btn btn-warning'
+				},
+	            {
+					title: 'Data export',
+	                extend: 'copyHtml5',
+	                text: 'Copy',
+	                className: 'btn btn-secondary',
+	                id: 'copyBtn'
+	            },
+	            {
+	                extend: 'excelHtml5',
+	                text: 'Excel',
+	                className: 'btn btn-secondary',
+	                id: 'excelBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'csvHtml5',
+	                text: 'CSV',
+	                className: 'btn btn-secondary',
+	                id: 'csvBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'pdfHtml5',
+	                text: 'PDF',
+	                className: 'btn btn-secondary',
+	                id: 'pdfBtn',
+	                title: 'Petition List'
+	            },
+	            {
+	                extend: 'print',
+	                text: 'Print',
+	                className: 'btn btn-secondary',
+	                id: 'printBtn',
+	                title: 'Petition List',
+	                exportOptions: {
+	                    columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view
+	                }
+	            }
+	        ];
+			
+        	
+	        function call_loading(){
+				loading.html(searchinfo("<b>"+loading_text_msg+"</b>"));
+			}
+			
+			function remove_loading(){
+				loading.html("");
+			}
+			
+	        
+	        /* Get Complaints Data */
+	        function get_petitions_data(id){
+	        	var apiUrl = '/gcc/api/zerohours_petition/getUnmapPetitionList?eventId='+id;
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+	        }
+	        
+	        /* Get Complaints List */
+	        function get_petitions_list(id){
+	        	call_loading();
+	        	get_petitions_data(id).then(function(petitionList) {
+	    		    // Handle the department list
+	    		    generate_table(petitionList);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+			        if (error && error.message) {
+			            console.error('Error fetching petition list:', error.message);
+			        } else {
+			            console.error('An error occurred while fetching petition list:', error);
+			        }
+	    		});
+			}
+        
+	        
+	        /* Call DataTable function */
+	        function generate_table(data){
+
+	        	$('#petitionDatatable').DataTable().destroy();
+	        	
+	            var table = $('#petitionDatatable').DataTable( {
+				        dom: 'Bftip',
+				        columnDefs: [
+				        	{ targets: 'no-sort', "orderable": false },
+							{ targets: 'no-exportable', "exportable": false }
+						],
+				        lengthMenu: [
+				            [ 50, 100, 200, 500, -1 ],
+				            [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ]
+				        ],
+				       // scrollY: '50vh',
+				        fixedColumns: {
+					        left: 0,
+					        right: 0
+					    },
+				        buttons: [buttons],
+				        responsive: false,
+				        searching: true,
+				        select: false,
+				        processing: false,
+				    } );
+	            
+	            // Clearn Table data
+	            table.clear().draw();
+	            
+	         	// Add rows to DataTable
+	         	var rowNum = 1;
+	            $.each(data, function(index, row) {
+	                table.row.add([
+	                	rowNum++,
+	                    '<a href="/gcc/zerohours_petition/update-petition?petitionNo='+row['petitionNoEncode']+'">'+row['petition_no']+'</a>',
+	                    row['petitioner_name'],
+	                    row['zone'],
+	                    row['ward'],
+	                    row['complaint_nature'],
+	                    convertdate(row['cdate']),
+	                    row['status'],
+	                    '<a href="#" onclick="return compliant_mapping(\''+row['petition_id']+'\',\'Assign to the Department Officer\',\''+row['petition_no']+'\');"data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Assign to the Department Officer."><i class="far fa-handshake"></i></a>',
+	                ]).draw(false);
+	            });
+	            // Enable tooltips for all elements with data-toggle="tooltip"
+	            $('[data-toggle="tooltip"]').tooltip();
+	            
+	            remove_loading(); // remove Loading 
+			}
+	        
+	        /* Get Event Data */
+	        function get_event_data(){
+	        	get_event_list().then(function(eventList) {
+	        		$('#ward').empty();
+					if(eventList.length>0){
+						// Iterate through the department list and add options to the select element
+		    		    $.each(eventList, function(index, events) {
+		    	            // Create an option element
+		    	            //alert(events.name);
+		    	            var option = $('<option>', {
+		    	            	value: events.id, // case-sensitive as per object
+		    	                text: events.name
+		    	            });
+		    	            // Append the option to the select element
+		    	            $('#eventid').append(option);
+		    	        });
+					}
+					else{
+						$("#card-body").html("<center>No Active Event Found!</center>");
+					}
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching event list:', error);
+	    		    
+	    		});
+	        	remove_loading();
+			}
+			
+	        function get_mapped_list(petitionId){
+	        	var apiUrl = '/gcc/api/zerohours_petition/getPetitionMappingDetails2?petitionId='+petitionId
+	    	    // Return a Promise
+	    	    return new Promise(function(resolve, reject) {
+	    	        $.ajax({
+	    	            url: apiUrl,
+	    	            type: 'GET',
+	    	            //data: formData,
+	    	            dataType: 'json',
+	    	            success: function(jsonResponse) {
+	    	                // Resolve the Promise with the department list
+	    	                resolve(jsonResponse);
+	    	            },
+	    	            error: function(xhr, status, error) {
+	    	                // Reject the Promise with the error message
+	    	                console.error('Error fetching petition maping details ('+petitionNo+'):', error);
+	    	                reject(error);
+	    	            }
+	    	        });
+	    	    });
+			}
+	        
+	     	// For Complient Map Select HTML 
+			function calloffice(val,id){
+				if(val==1){ // Intenal
+					var officeSelectHTML = `<div class="mb-4">
+	                							<label for="office${id}">Select Office</label>
+	                							<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})">
+									                <option value="0">Select Office</option>
+									                <option value="1">HQ</option>
+									                <option value="2">Zonal Office</option>
+							                	</select>
+						                	</div>`;
+					$("#officedata"+id).html(officeSelectHTML);
+				}
+				else if(val==2){ // External
+					$("#officers"+id).html('');
+					var ExSelectHTML = getselect(id,"ExSelect");
+					var departmentSelectHTML = `<div class="mb-4">
+													<label for="dept3">Select Department</label>
+													${ExSelectHTML}
+											 	</div>`;
+					$("#officedata"+id).html(departmentSelectHTML);
+				}
+				else{
+					$("#officedata"+id).html('');
+					$("#officers"+id).html('');
+				}
+				$("#officers"+id).html('');
+			}
+			
+			function callofficers(val,id){
+				
+				if(val==1){
+					// HQ
+					var HQSelectHTML = getselect(id,"HQSelect");
+				 	$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`);
+				}
+				else if(val==2){
+					// Zone Office
+					var ZoneSelectHTML = getselect(id,"ZoneSelect");
+					$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`);
+				}
+				else{
+					$("#officers"+id).html('');
+				}
+				
+			}
+			
+			function getselect(comid,type){
+		  	  var HQSelect = '';
+		  	  var ZoneSelect = '';
+		  	  var ExSelect = '';
+		  
+		  	  for (var i = 0; i < officerMasterList.length; i++) {
+		  		  if(officerMasterList[i].zone_id=="HQ"){
+		  			  HQSelect+=`<option value="${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else if(officerMasterList[i].zone_id=="99"){
+		  			  ExSelect+=`<option value="${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  		  else{
+		  			  ZoneSelect+=`<option value="${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  		  }
+		  	  }
+		  	  
+		  	  // Forward Save Button
+			  var forward_Btn = `<div class="col-12 pt-3 mb-0 pb-0 text-center" id="submitdiv">
+									<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveMappingDepatment();" id="updatebtn"><i class="si si-rocket me-1"></i>Save</button>
+			  						<div id="forwardFormError" class="text-danger"></div>
+			  						</div>
+								</div>`;
+								
+		  	  if(type=="HQSelect"){
+		  	  	 return `<select name="mapOfficerid" id="mapOfficerid" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ZoneSelect"){
+		  	  	 return `<select name="mapOfficerid" id="mapOfficerid" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  if(type=="ExSelect"){
+		  	  	 return `<select name="mapOfficerid" id="mapOfficerid" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>${forward_Btn}`;
+		  	  }
+		  	  return '';
+			}
+			
+			/* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+		
+	     	//Save Forward Details
+			function saveMappingDepatment(){
+				
+				var offidto = $("#mapOfficerid").val();
+				var petitionId = $("#petitionid").val();
+				var petitionNo = $("#petitionno").val();
+				var formError= "";
+				if(offidto=='' || offidto==0){
+					formError= "Select Department Required!";
+					$('#forwardFormError').html(formError);
+					return false;
+				}
+				
+				$.ajax({
+				    type: "POST",
+				    url: '/gcc/api/zerohours_petition/mapPetitionToOfficer',
+				    data: {
+				        'petitionId': petitionId,
+				        'petitionNo': petitionNo,
+				        'createdBy':createdBy,
+						'offidto':offidto
+				    },
+				}).done(function(response) {
+				      Swal.fire(
+				        'Petition Mappiing Status!',
+				        'Petition Mapped Successfully!',
+				        'success'
+				      ).then(() => {
+							    //location.reload();
+				    	  	updateModelBox(petitionId,'Assign to the Department Officer',petitionNo)
+							 });
+					console.log(response);
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					
+				});
+				return false;
+			}
+		     	
+			$(document).ready(function() {
+				call_loading();
+				get_officer_master_data();
+				get_event_data();
+				//get_petitions_list();
+			});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/zerohours_petition/petition_update.html b/target/classes/templates/modules/zerohours_petition/petition_update.html
new file mode 100644
index 0000000..31d8c8a
--- /dev/null
+++ b/target/classes/templates/modules/zerohours_petition/petition_update.html
@@ -0,0 +1,775 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Edit / Update Petition</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Edit/Update Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card" id="petitionUpdateForm">
+									<form class="update-request-form" id="update-request-form" onsubmit="return updateRequest();">
+										<div class="card-header">
+		                                    <h3>Edit / Update Petition Form</h3>
+		                                    <div class="card-header-right">
+	                                            <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+	                                        </div>
+	                                    </div>
+	                               		<div class="card-body">
+	                               			<div class="row">
+	                               				<!-- <div class="col-12">
+	                               					<div class="form-group">
+			                                            <label for="petitionerName">Petition Type / மனுவின் வகை</label>
+			                                            <div class="form-radio" id="petition_type">
+				                                          
+				                                        </div>
+			                                        </div>
+	                               				</div> -->
+												<div class="col-6">
+													<div class="form-group">
+			                                            <label for="petitionerName">Petitioner's Name / மனுதாரரின் பெயர்</label>
+			                                            <input type="text" readonly class="form-control" name="petitionerName" id="petitionerName" autocomplete="off" placeholder="மனுதாரரின் பெயர்">
+			                                        </div>
+			                                    </div>
+												<div class="col-6">
+			                                        <div class="form-group">
+			                                            <label for="petitionerMobile">Mobile NO / கைபேசி எண்</label>
+					                       				<input type="text" readonly class="form-control" id="petitionerMobile" name="petitionerMobile" autocomplete="off" placeholder="கைபேசி எண்">
+			                                        </div>
+			                                   	</div>
+												<div class="col-6">
+			                                      	<div class="form-group">
+			                                        	<label for="complaintNature">புகாரின் தன்மை / Nature Of Complaint</label>
+								   						<textarea class="form-control" id="complaintNature" name="complaintNature" rows="6" placeholder="புகாரின் தன்மை..."></textarea>
+								   					</div>
+								   				</div>
+												<div class="col-6">
+													<!-- 
+													<div class="form-group">
+														<label for="petitionerAddress">Address of petitioner / மனுதாரரின் முகவரி</label>
+									   					<textarea class="form-control" id="petitionerAddress" name="petitionerAddress" rows="6" maxlength="250" placeholder="மனுதாரரின் முகவரி..."></textarea>
+													</div>
+													
+													<div class="form-group">
+														<label for="petitionerPincode">Postal code / தபால் குறியீடு</label>
+	   			                       					<input type="text" class="form-control" id="petitionerPincode" name="petitionerPincode" placeholder="தபால் குறியீடு" maxlength="6" required>
+													</div>
+													-->
+													<div class="form-group">
+		                                          		<label for="complaintType">Type of complaint / புகார் வகை (பலவற்றை தேர்ந்தெடு..) </label>
+														<select class="select2" id="complaintType" name="complaintType" style="width: 100%;" data-placeholder="பலவற்றை தேர்ந்தெடு.." multiple required onchange="javascript:load_mapper();">
+															<option></option>
+														</select>
+													</div>
+												</div>
+												<div class="col-12">
+													<div class="block-content" id="userinfo2">
+														<div id="comp_mapping_to_officers" class="row"></div>
+													</div>
+											 	</div>
+											</div>
+	                                  	</div>
+	                                  	<div class="card-footer text-right">
+											<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+                                        	<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button>
+	                                	</div>
+                                	</form>
+                                </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 th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+       	<script th:inline="javascript">
+			var createdBy = /*[[${LoginUserId}]]*/'';
+			var petitionNo = /*[[${petitionNo}]]*/'';
+			var petitionId = 0;
+			var closedComplaintsList=[];
+			var complaintTypeList = "";
+			var officerMasterList = "";
+			
+			 /* Get Complaint Type Data */
+	        function get_complaint_type_data(){
+	
+	    		get_complaint_type_list().then(function(complaintTypes) {
+	    		    // Handle the Complaint list
+	    		    complaintTypeList = complaintTypes;
+					
+	    		    // Iterate through the Master Complanint Type and add options to the select element
+	    		    $.each(complaintTypeList, function(index, complaintType) {
+	    	            // Create an option element
+	    	            var option = $('<option>', {
+	    	            	value: complaintType.complaint_typeid, // case-sensitive as per object
+	    	                text: complaintType.complaint_type
+	    	            });
+	    	            // Append the option to the select element
+	    	            $('#complaintType').append(option);
+	    	        });
+	    		    // Call Petition function to fetch the data
+	    		    get_petition_data();
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching complaint type list:', error);
+	    		});
+			}
+			 
+	        /* Get Petition Type Data */
+	        function get_petition_type_data(){
+	        	var petitionTypeHTML="";
+	    		get_petition_type_list().then(function(petitionTypes) {
+	    		    // Handle the Complaint list
+	    		    petitionTypeList = petitionTypes;
+					
+	    		    // Iterate through the department list and add options to the select element
+	    		    $.each(petitionTypeList, function(index, petitionType) {
+	    	            // Create an option element
+	    	            
+	    	            petitionTypeHTML +=`<div class="radio radiofill ${petitionType.color_class} radio-inline">
+						                            <label class="cursure_poiter">
+						                            <input type="radio" name="petitionType" id="petition_type_${petitionType.petition_type_id}" value="${petitionType.petition_type_id}" disable>
+						                            <i class="helper"></i>${petitionType.name}
+						                        </label>
+						                    </div>`;
+	    	        });
+	    		 // Append the option to the select element
+    	         $('#petition_type').html(petitionTypeHTML);
+	    		    
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching petition type list:', error);
+	    		});
+			}
+	        
+	        /* Get Officer Master Data */
+	        function get_officer_master_data(){
+	
+	    		get_officer_list().then(function(officers) {
+	    		    // Handle the officer list
+	    		    officerMasterList = officers;
+					
+	    		}).catch(function(error) {
+	    		    // Handle errors
+	    		    console.error('Error fetching offcier master data:', error);
+	    		});
+			}
+			 
+	     	// Function to get complaint_type and complaint_typeid by complaint_typeid
+	        function getComplaintTypeById(complaintTypeId) {
+	            for (var i = 0; i < complaintTypeList.length; i++) {
+	                if (complaintTypeList[i].complaint_typeid == complaintTypeId) {
+	                    return {
+	                        complaint_type: complaintTypeList[i].complaint_type,
+	                        complaint_typeid: complaintTypeList[i].complaint_typeid
+	                    };
+	                }
+	            }
+	            return null; // Return null if no matching complaint_typeid is found
+	        }
+	     
+			// Save New petition 
+			function updateRequest(){
+				// Disable the button to prevent multiple clicks
+				form_btn_disable();
+				
+				var inputElementMobileNo = $('#petitionerMobile');
+				var mobileNo = inputElementMobileNo.val();
+				var mobileFormatRegex = /^\d{10}$/; //'0000000000';
+				inputElementMobileNo.removeClass('is-invalid');
+				
+				var inputElementComplaintType = $('#complaintType');
+				var complaintType = inputElementComplaintType.val();
+				
+				if (mobileNo !== null) {
+					
+					// Serialize form data
+			        var formData = new FormData($('#update-request-form')[0]);
+			        formData.append('petitionNo',petitionNo);
+			        formData.append('createdBy',createdBy);
+			        formData.append('petitionId',petitionId);
+			        updateFormData(formData).then(function(response) {
+		    		    // Handle the response
+		    		    if(response==true){
+							// Delete Old data in Petition Mapping table
+		    		    	savePetitionMapData(formData).then(function(response) {
+		    		    		if(response==true){
+		    		    			Swal.fire({
+				        				title: 'Petition updated successfully!',
+				        				customClass: {
+				        			        title: 'swal-title-custom' // Add a custom class for the title
+				        			    },
+				        				//text: "Error",
+				        				icon: 'success',
+				        				showCancelButton: false,
+				        				confirmButtonColor: '#3085d6',
+				        				cancelButtonColor: '#d33',
+				        				confirmButtonText: 'Ok',
+				        				}).then(function(result) {
+				        				if (result.isConfirmed) {
+				        					form_btn_enable();
+				        				}
+				        			});
+		    		    		}
+		    		    		else{
+		    		    			Swal.fire({
+				        				title: 'Petition details have been updated, but mapping the complaint to the officer has failed.',
+				        				customClass: {
+				        			        title: 'swal-title-custom' // Add a custom class for the title
+				        			    },
+				        				//text: "Error",
+				        				icon: 'warning',
+				        				showCancelButton: false,
+				        				confirmButtonColor: '#3085d6',
+				        				cancelButtonColor: '#d33',
+				        				confirmButtonText: 'Ok',
+				        				}).then(function(result) {
+				        				if (result.isConfirmed) {
+				        					form_btn_enable();
+				        				}
+				        			});
+								}
+		    		    	}).catch(function(error) {
+		    	    		    // Handle errors
+		    	    		    console.error('Error fetching offcier master data:', error);
+		    	    		    form_btn_enable();
+		    	    		});
+		    		    	
+						}
+		    		    else{
+		    		    	Swal.fire({
+		        				title: 'Failed to update petition details!',
+		        				customClass: {
+		        			        title: 'swal-title-custom' // Add a custom class for the title
+		        			    },
+		        				//text: "Error",
+		        				icon: 'error',
+		        				showCancelButton: false,
+		        				confirmButtonColor: '#3085d6',
+		        				cancelButtonColor: '#d33',
+		        				confirmButtonText: 'Ok',
+		        				}).then(function(result) {
+		        				if (result.isConfirmed) {
+		        					form_btn_enable();
+		        				}
+		        			});
+						}
+	    		    	
+	    		    	
+		    	    }).catch(function(error) {
+		    		    // Handle errors
+		    		    console.error('Error on save petition:', error.message);
+		    		    form_btn_enable();
+	    			});
+				}
+				else{
+					//inputElementMobileNo.addClass('is-invalid');
+					form_btn_enable();
+				}
+				return false;
+			}
+			
+			function updateFormData(formData){
+				var apiUrl = '/gcc/api/zerohours_petition/updatePetition';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			function savePetitionMapData(formData){
+				var apiUrl = '/gcc/api/zerohours_petition/mapComplientToOfficer';
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+					$.ajax({
+						url: apiUrl,
+					    type: 'POST',
+					    data: formData,
+					    processData: false,
+					    contentType: false,
+					    success: function(response) {
+					        console.log(response);
+					        // Handle success response
+					        resolve(response);
+					    },
+					    error: function(xhr, status, error) {
+					        console.error('Error:', error);
+					        // Handle error response
+					        reject(error);
+					    }
+					});
+			    });
+			}
+			
+			 /* Get Petition data */
+			function get_petition_data(){
+				get_petition_details().then(function(petitionDetails) {
+				    // Handle the Complaint list
+				    var complaintHTML = "";
+					var complaint = petitionDetails[0].petitioner_complaint;
+					
+					var complaintArray;
+					
+					petitionId = petitionDetails[0].petition_id;
+					if (complaint != null && complaint !== '') {
+					    complaintArray = complaint.split(",");
+					} else {
+					    complaintArray = [];  // Initialize to an empty array
+					}
+					//complaintArray = complaint.split(",");
+					
+					$("#complaintType").val(complaintArray);
+					
+					$('#complaintType').trigger('change');
+					
+					closedComplaintsList = complaintArray;
+					//var petition_type = "#petition_type_"+petitionDetails[0].petition_type;
+					// Suppose you want to select the radio button with the value 'option2'
+					//$(petition_type).prop('checked', true);
+
+					$("#petitionerName").val(petitionDetails[0].petitioner_name);
+					$("#petitionerMobile").val(petitionDetails[0].petitioner_mobile);
+					$("#petitionerAddress").val(petitionDetails[0].petitioner_address);
+					$("#petitionerPincode").val(petitionDetails[0].petitioner_pincode);
+					
+					$("#complaintNature").val(petitionDetails[0].complaint_nature);
+					
+					//load_mapper(); // Call for Complaint Mapping Form
+					
+					// IDs of the values you want to prevent from being deselected
+					var valuesToPreventDeselection = closedComplaintsList;//['value1', 'value2', 'value3'];
+
+					$('#complaintType').on('select2:unselect', function (e) {
+					    var deselectedValue = e.params.data.id;
+					    
+					    // Check if the deselected value should be prevented from being deselected
+					    if (valuesToPreventDeselection.includes(deselectedValue)) {
+					        // Prevent the deselection
+					        e.preventDefault();
+					    	// Re-select the deselected value to prevent it from being deselected
+					        $(this).val(valuesToPreventDeselection).trigger('change.select2');
+					        // Optionally, you can display a message or perform any other action
+					        console.log('Deselection of value ' + deselectedValue + ' prevented');
+					        alert('Deselection of value ' + deselectedValue + ' prevented');
+					    }
+					});
+					
+				}).catch(function(error) {
+				    // Handle errors
+				    console.error('Error fetching petition Data ('+petitionNo+'):', error.message);
+				    call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				});
+			}
+			 
+			/* Get Petition details by petition number */
+			function get_petition_details() {
+			    
+				var formData = new FormData();
+		        formData.append('petitionNo',petitionNo);
+		        
+				var apiUrl = '/gcc/api/zerohours_petition/getPetitionDetails?petitionNo='+petitionNo;
+			    // Return a Promise
+			    return new Promise(function(resolve, reject) {
+			        $.ajax({
+			            url: apiUrl,
+			            type: 'GET',
+			            //data: formData,
+			            dataType: 'json',
+			            success: function(jsonResponse) {
+			                // Resolve the Promise with the department list
+			                //alert(jsonResponse.length);
+			                if(jsonResponse.length>0){
+			                	resolve(jsonResponse);
+							}else{
+								call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+								console.log('Fetched petition details ('+petitionNo+') Is null:');
+							}
+			                
+			            },
+			            error: function(xhr, status, error) {
+			                // Reject the Promise with the error message
+			                console.error('Error fetching petition details ('+petitionNo+'):', error.message);
+			                reject(error);
+			            }
+			        });
+			    });
+			}
+			
+			function load_mapper(){
+			  	var complaintArray = $("#complaintType").val();
+			  	//var complaintArray = complaint.split(',');
+				var compPetitionNo = petitionNo;
+				var compPetitionId = petitionId;
+				
+				var compmapHTML='';
+				for(j = 0; j < complaintArray.length; j++){
+					var complaintTypeDetails = getComplaintTypeById(complaintArray[j]); // Pass the complaint_typeid
+					var title=(j+1)+') '+ complaintTypeDetails.complaint_type; // Map form title
+					var compID="comp"+j;
+					var complaintTypeId = complaintTypeDetails.complaint_typeid;
+					
+					getMappingByComplaintsID(complaintTypeId);
+					
+					compmapHTML+=`<div class="col-lg-6" id="comp${complaintArray[j]}">
+										
+										<div class="widget">
+					                        <div class="widget-header" style="background-color:#2a807f;color:#fff;">
+					                            <h3 class="widget-title" style="font-size:13px;">${title}</h3>
+					                        </div>
+					                        <div class="widget-body">
+					                        	<div class="form-group">
+						                        	<label for="dept${complaintArray[j]}">Select Department Type</label>
+													<select name="dept[]" id="dept${complaintArray[j]}" class="form-control" onchange="javascript:calloffice(this.value,${complaintArray[j]})">
+														<option value="0">Select Department</option>
+														<option value="1">GCC Department</option>
+														<option value="2">External Department</option>
+												    </select>
+												</div>
+												<div id="officedata${complaintArray[j]}"></div>
+												<div id="officers${complaintArray[j]}"></div>
+					                        </div>
+					                    </div>
+									
+								  </div>`;
+						
+				}
+				$('#comp_mapping_to_officers').html(compmapHTML);
+				
+			  }
+			
+		</script>
+		
+		<script>
+		// For Complient Map Select HTML 
+		function calloffice(val,id){
+			if(val==1){ // Intenal
+				var officeSelectHTML = `<div class="mb-4">
+                							<label for="office${id}">Select Office</label>
+                							<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})">
+								                <option value="0">Select Office</option>
+								                <option value="1">HQ</option>
+								                <option value="2">Zonal Office</option>
+						                	</select>
+					                	</div>`;
+				$("#officedata"+id).html(officeSelectHTML);
+			}
+			else if(val==2){ // External
+				$("#officers"+id).html('');
+				var ExSelectHTML = getselect(id,"ExSelect");
+				var departmentSelectHTML = `<div class="mb-4">
+												<label for="dept3">Select Department</label>
+												${ExSelectHTML}
+										 	</div>`;
+				$("#officedata"+id).html(departmentSelectHTML);
+			}
+			else{
+				$("#officedata"+id).html('');
+				$("#officers"+id).html('');
+			}
+			$("#officers"+id).html('');
+		}
+		
+		function callofficers(val,id){
+			
+			if(val==1){
+				// HQ
+				var HQSelectHTML = getselect(id,"HQSelect");
+			 	$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`);
+			}
+			else if(val==2){
+				// Zone Office
+				var ZoneSelectHTML = getselect(id,"ZoneSelect");
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`);
+			}
+			else{
+				$("#officers"+id).html('');
+			}
+			
+		}
+		
+		function getselect(comid,type){
+	  	  var HQSelect = '';
+	  	  var ZoneSelect = '';
+	  	  var ExSelect = '';
+	  
+	  	  for (var i = 0; i < officerMasterList.length; i++) {
+	  		  if(officerMasterList[i].zone_id=="HQ"){
+	  			  HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  		  else if(officerMasterList[i].zone_id=="99"){
+	  			  ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  		  else{
+	  			  ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+	  		  }
+	  	  }
+	  	  
+	  	  if(type=="HQSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>`;
+	  	  }
+	  	  if(type=="ZoneSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>`;
+	  	  }
+	  	  if(type=="ExSelect"){
+	  	  	 return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>`;
+	  	  }
+	  	  return '';
+		}
+		
+		function form_btn_enable(){
+			$("#resetFormBtn").prop("disabled", false);
+			$("#requestSubmitBtn").prop("disabled", false);
+			$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save');
+		}
+		
+		function form_btn_disable(){
+			$("#resetFormBtn").prop("disabled", true);
+			$("#requestSubmitBtn").prop("disabled", true);
+			// Show the loading icon on the button
+			$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...');
+		}
+		
+		function getMappingByComplaintsID(complaintTypeId){
+				
+				$.ajax({
+				    type: "GET",
+				    url: '/gcc/api/zerohours_petition/getComplaintMappingDetails',
+				    data: {
+				        'petitionId': petitionId,
+						'petitionNo': petitionNo,
+						'complaintTypeId': complaintTypeId
+				    },
+					dataType: 'json',
+				}).done(function(response) {
+					
+					//console.log(response);
+					
+					if(response.length>0){
+						var comid = response[0]["complaint_typeid"];
+						var offid = response[0]["off_id"];
+						var mapid = response[0]["mapid"];
+						loadSelectforUpdate(comid,offid,comid);
+					}
+					
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+						
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+					    
+				});
+		}
+		
+		function loadSelectforUpdate(comid,offid,id){
+			var type ="NULL";
+	  	  	var HQSelect = '';
+	  	  	var ZoneSelect = '';
+	  	  	var ExSelect = '';
+	  
+			for (var i = 0; i < officerMasterList.length; i++) {
+		  		//console.log(officerMasterList[i]);
+				if(officerMasterList[i].zone_id=="HQ"){
+			  
+				  	if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "HQSelect";
+				  		HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+				  	}
+				  	else{
+				  		HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+				  	}
+					  
+				}
+				else if(officerMasterList[i].zone_id=="99"){
+					if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "ExSelect";
+						ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+		  			}
+		  			else{
+		  				ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+		  			}
+				}
+				else{
+					if(offid>0 && officerMasterList[i].off_id == offid){
+						type = "ZoneSelect";
+						//console.log(type + " === "+ officerMasterList[i].offId +" == "+ offid);
+						ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`;
+				  	}
+				  	else{
+				  		ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`;
+				  	}  
+				}
+			}  
+			
+			//console.log("comid : "+comid +",\noffid : "+offid+",\nid : "+id+",\ntype : "+type);
+			
+			if(type=="HQSelect"){
+				//console.log("I am from HQSelect: \n #officers"+id);
+				$("#officedata"+id).html('<div class="mb-4">' +
+				           '<label for="office$'+id+'">Select Office</label>' +
+				           '<select name="office[]" id="office$'+id+'" class="form-control" onchange="javascript:callofficers(this.value,'+id+')">' +
+				           '<option value="0">Select Office</option>' +
+				           '<option value="1" Selected>HQ</option>' +
+				           '<option value="2">Zonal Office</option>' +
+				           '</select>' +
+				           '</div>');
+			  	 HQSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${HQSelect}</select>`;
+		 		$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${HQSelectHTML}</div>`);
+		 
+			}
+			if(type=="ZoneSelect"){
+				//console.log("I am from ZoneSelect: \n #officers"+id);
+				$("#officedata"+id).html('<div class="mb-4">' +
+				           '<label for="office$'+id+'">Select Office</label>' +
+				           '<select name="office[]" id="office$'+id+'" class="form-control" onchange="javascript:callofficers(this.value,'+id+')">' +
+				           '<option value="0">Select Office</option>' +
+				           '<option value="1">HQ</option>' +
+				           '<option value="2" Selected>Zonal Office</option>' +
+				           '</select>' +
+				           '</div>');
+				  
+				ZoneSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ZoneSelect}</select>`;
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${ZoneSelectHTML}</div>`);
+			}
+			if(type=="ExSelect"){
+				//console.log("I am from ExSelect: \n #officers"+id);
+				ExSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> &nbsp; </option>${ExSelect}</select>`;
+				$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${ExSelectHTML}</div>`);
+			}
+		 
+		}
+		
+		function call_petition_search_from(errorTXT){
+			var errorHTML = "";
+			if(errorTXT!=""){
+				errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`;
+			}
+			var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();">
+										<div class="card-header">
+						                <h3>Edit / Update Petition Form</h3>
+						                <div class="card-header-right">
+						                    <h3 th:utext="'Petition No: '+${petitionNo}+''"></h3>
+						                </div>
+						            </div>
+						       		<div class="card-body">
+						       			<div class="row">
+											<div class="col-12 text-center">
+												${errorHTML}
+												<div class="form-group">
+						                            <label for="petitionNoSearch">Petition No / மனு எண் </label>
+						                            <input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="ZH00000000" maxlength="11" required>
+						                        </div>
+						                        
+											</div>
+											<div class="col-12">
+												<div class="block-content" id="userinfo2">
+													<div id="comp_mapping_to_officers" class="row"></div>
+												</div>
+										 	</div>
+										</div>
+						          	</div>
+						          	<div class="card-footer text-center">
+										<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button>
+						            	<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button>
+						        	</div>
+						    	</form>`;
+			
+			$("#petitionUpdateForm").html(searchFormHTML);
+			$('#petitionNoSearch').mask('ZH00000000');
+		}
+		
+		function searchRequest(){
+			var searchValue = $('#petitionNoSearch').val();
+			if (searchValue && searchValue.trim() !== '') {
+				searchValue = encodeBase64(searchValue);
+				window.location.href = "/gcc/zerohours_petition/update-petition?petitionNo="+searchValue;
+			}
+			else{
+				call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+			}
+			return false;
+		}
+		</script>
+		<script>
+		$(document).ready(function() {
+			
+			if(petitionNo!=null && petitionNo!="error"){
+				get_complaint_type_data();
+				//get_petition_type_data();
+				get_officer_master_data();
+			}
+			else{
+				if(petitionNo=="error"){
+					call_petition_search_from("Invalid Petition Number: Please provide a valid petition number.");
+				}
+				else{
+					call_petition_search_from("");
+				}
+			}
+			
+		});
+		</script>
+    </body>
+</html>
diff --git a/target/classes/templates/modules/zerohours_petition/petition_view.html b/target/classes/templates/modules/zerohours_petition/petition_view.html
new file mode 100644
index 0000000..e2ac7da
--- /dev/null
+++ b/target/classes/templates/modules/zerohours_petition/petition_view.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html 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]-->
+
+        <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-8">
+                                    <div class="page-header-title">
+                                        <i class="far fa-calendar-plus bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>View Petition</h5>
+                                            <span>Commissioner Petition</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <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" aria-current="page">Commissioner Petition</li>
+                                            <li class="breadcrumb-item active" aria-current="page">View Petition</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card mb-0" id="petitionViewtable">
+					             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+					                	<h3>Petition Details</h3>
+					                	<div class="card-header-right text-center block-options pt-10" style="padding-right: 20px;">
+									        <a href="javascript:void(0);" onclick="window.print()" class="link"><i class="ik ik-printer"></i> Print</a>
+									    </div>
+					                </div>
+					                <div class="card-body">
+					                	<div class="row">
+											<div class="col-6">
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">நாள் / Date: </th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="cdate_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petition_no_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_name_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_mobile_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Address of petitioner / மனுதாரரின் முகவரி:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_address_value"></td>
+											        </tr>
+											        <tr>
+											          <th colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;">புகாரின் தன்மை / Nature of complaint:<br>
+											          <p class="fw-semibold mb-0" style="font-weight:normal;" id="complaint_nature_value"></p>
+											          </th>
+											        </tr>
+											        <tr>
+											        	<td colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;" id="complaint_with_maping_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+											</div>
+											
+											<div class="col-6">
+												
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											      	<tr>
+											          <th style="padding: 0.45rem 0.45rem;">Petition Status: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_status_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total number of complaints in this petition: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Completed:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_completed_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Pending:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_pending_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+												
+												
+												<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th id="petition_summary_title">Pending Summary</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+									                	<tr style="background-color:#fbffe0;">
+												          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_summary_html"></td>
+												        </tr>
+								                	</tbody>
+								              	</table>
+								              	
+											</div>
+										</div>
+										<div class="row">
+											
+											<div class="col-12">
+												<div class="card-title">List of Complaints in this Petition and Their Status:</div>
+												<div id="listOfComplaintsHTML"></div>
+											</div>
+										</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 th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+        <script th:replace="~{fragments/modules/zerohours_petition/petition_view_script :: script}"></script>
+       	
+    </body>
+</html>
diff --git a/target/classes/templates/modules/zerohours_petition/petition_view_modal_page.html b/target/classes/templates/modules/zerohours_petition/petition_view_modal_page.html
new file mode 100644
index 0000000..f2f4fd3
--- /dev/null
+++ b/target/classes/templates/modules/zerohours_petition/petition_view_modal_page.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en" dir="">
+<html xmlns:th="http://www.thymeleaf.org">
+<head th:replace="~{fragments/modules/base/head :: head}"></head>
+    <body>
+        
+                        <div class="row">
+							<div class="col-12">
+                                <div class="card mb-0" id="petitionViewtable">
+					             	<div class="card-header" style="color: #004085;background-color: #e7eff7;">
+					                	<h3>Petition Details</h3>
+					                	<div class="card-header-right text-center block-options pt-10" style="padding-right: 20px;">
+									        <a href="javascript:void(0);" onclick="window.print()" class="link"><i class="ik ik-printer"></i> Print</a>
+									    </div>
+					                </div>
+					                <div class="card-body">
+					                	<div class="row">
+											<div class="col-6">
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">நாள் / Date: </th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="cdate_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petition_no_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_name_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_mobile_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">மனுதாரரின் முகவரி / Address of petitioner:</th>
+											          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_address_value"></td>
+											        </tr>
+											        <tr>
+											          <th colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;">புகாரின் தன்மை / Nature of complaint:<br>
+											          <p class="fw-semibold mb-0" style="font-weight:normal;" id="complaint_nature_value"></p>
+											          </th>
+											        </tr>
+											        <tr>
+											        	<td colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;" id="complaint_with_maping_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+											</div>
+											
+											<div class="col-6">
+												
+								                <table class="table table-bordered table-vcenter" style="font-size:12px;">
+											      <tbody>
+											      	<tr>
+											          <th style="padding: 0.45rem 0.45rem;">Petition Status: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_status_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total number of complaints in this petition: </th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Completed:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_completed_value"></td>
+											        </tr>
+											        <tr>
+											          <th style="padding: 0.45rem 0.45rem;">Total Complaints Pending:</th>
+											          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_pending_value"></td>
+											        </tr>
+											      </tbody>
+											    </table>
+												
+												
+												<table class="table table-bordered table-vcenter mb-0">
+									                <thead>
+									                  <tr>
+									                    <th id="petition_summary_title">Pending Summary</th>
+									                  </tr>
+									                </thead>
+								                	<tbody>
+									                	<tr style="background-color:#fbffe0;">
+												          <td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_summary_html"></td>
+												        </tr>
+								                	</tbody>
+								              	</table>
+								              	
+											</div>
+										</div>
+										<div class="row">
+											
+											<div class="col-12">
+												<div class="card-title">List of Complaints in this Petition and Their Status:</div>
+												<div id="listOfComplaintsHTML"></div>
+											</div>
+										</div>
+					                </div>
+					            </div>
+                            </div>
+                            
+                        </div>
+                        
+        <script th:replace="~{fragments/modules/zerohours_petition/script :: script}"></script>
+       	<script th:replace="~{fragments/modules/zerohours_petition/petition_view_script :: script}"></script>
+    </body>
+</html>
diff --git a/target/gccoffice-0.0.1.jar b/target/gccoffice-0.0.1.jar
deleted file mode 100644
index 3069bc4..0000000
Binary files a/target/gccoffice-0.0.1.jar and /dev/null differ
diff --git a/target/gccoffice-0.0.1.jar.original b/target/gccoffice-0.0.1.jar.original
index ecc2272..a91a1ae 100644
Binary files a/target/gccoffice-0.0.1.jar.original and b/target/gccoffice-0.0.1.jar.original differ
diff --git a/target/maven-status/maven-compiler-plugin/compile/default-compile/createdFiles.lst b/target/maven-status/maven-compiler-plugin/compile/default-compile/createdFiles.lst
index 6b8c548..e69de29 100644
--- a/target/maven-status/maven-compiler-plugin/compile/default-compile/createdFiles.lst
+++ b/target/maven-status/maven-compiler-plugin/compile/default-compile/createdFiles.lst
@@ -1,107 +0,0 @@
-in/gov/chennaicorporation/gccoffice/entity/MenuItemAccessEntity.class
-in/gov/chennaicorporation/gccoffice/mtm/data/MtmComplaintTypes.class
-in/gov/chennaicorporation/gccoffice/entity/AppUserEntity.class
-in/gov/chennaicorporation/gccoffice/repository/SubMenuItemRepository.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/APIController.class
-in/gov/chennaicorporation/gccoffice/repository/SubMenuItemAccessRepository.class
-in/gov/chennaicorporation/gccoffice/repository/UserInfoRepository.class
-in/gov/chennaicorporation/gccoffice/m_petition/controller/MainController.class
-in/gov/chennaicorporation/gccoffice/repository/AppUserGroupRepository.class
-in/gov/chennaicorporation/gccoffice/taxcollection/controller/MainController.class
-in/gov/chennaicorporation/gccoffice/petregistration/controller/MainController.class
-in/gov/chennaicorporation/gccoffice/pgr/data/Departments.class
-in/gov/chennaicorporation/gccoffice/c_petition/service/PetitionMaster.class
-in/gov/chennaicorporation/gccoffice/m_petition/service/PetitionMaster.class
-in/gov/chennaicorporation/gccoffice/taxcollection/configuration/TaxCollectionRepositoryConfig.class
-in/gov/chennaicorporation/gccoffice/petregistration/data/PetCountInfo.class
-in/gov/chennaicorporation/gccoffice/circular/controller/APIController.class
-in/gov/chennaicorporation/gccoffice/m_petition/data/ComplaintType.class
-in/gov/chennaicorporation/gccoffice/service/CustomUserDetails.class
-in/gov/chennaicorporation/gccoffice/m_petition/controller/APIController.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion.class
-in/gov/chennaicorporation/gccoffice/pgr/controller/MainController.class
-in/gov/chennaicorporation/gccoffice/interceptor/AppInterceptor.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset$AssetCategory.class
-in/gov/chennaicorporation/gccoffice/repository/AppModuleRepository.class
-in/gov/chennaicorporation/gccoffice/taxcollection/repository/TaxCollectionRequestRepository.class
-in/gov/chennaicorporation/gccoffice/mtm/data/MtmEvent.class
-in/gov/chennaicorporation/gccoffice/controller/MainController.class
-in/gov/chennaicorporation/gccoffice/entity/SubMenuItemAccessEntity.class
-in/gov/chennaicorporation/gccoffice/entity/AppModuleAccessEntity.class
-in/gov/chennaicorporation/gccoffice/entity/UserInfoEntity.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameter$AssetCategoryInfo.class
-in/gov/chennaicorporation/gccoffice/mtm/controller/OfficerController.class
-in/gov/chennaicorporation/gccoffice/configuration/SecurityConfig.class
-in/gov/chennaicorporation/gccoffice/c_petition/data/ComplaintType.class
-in/gov/chennaicorporation/gccoffice/pgr/controller/APIController.class
-in/gov/chennaicorporation/gccoffice/repository/AppModuleAccessRepository.class
-in/gov/chennaicorporation/gccoffice/controller/login.class
-in/gov/chennaicorporation/gccoffice/repository/UserActivityLogRepository.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback$AssetDetails.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategoryQuestion$AssetCategoryInfo.class
-in/gov/chennaicorporation/gccoffice/mtm/data/MTMOfficer.class
-in/gov/chennaicorporation/gccoffice/GccOfficeApplication.class
-in/gov/chennaicorporation/gccoffice/controller/APIController.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions$AssetCategory.class
-in/gov/chennaicorporation/gccoffice/m_petition/service/Petition.class
-in/gov/chennaicorporation/gccoffice/service/Base64Util.class
-in/gov/chennaicorporation/gccoffice/c_petition/controller/APIController.class
-in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmEventsPetitionId.class
-in/gov/chennaicorporation/gccoffice/c_petition/service/Petition.class
-in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmEvents.class
-in/gov/chennaicorporation/gccoffice/modeldata/ErrorResponse.class
-in/gov/chennaicorporation/gccoffice/petregistration/service/API.class
-in/gov/chennaicorporation/gccoffice/repository/AppUserRepository.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategory.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions$AssetParameter.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion$AssetDetails.class
-in/gov/chennaicorporation/gccoffice/entity/AppUserGroupEntity.class
-in/gov/chennaicorporation/gccoffice/petregistration/controller/APIController.class
-in/gov/chennaicorporation/gccoffice/service/CustomUserDetailsService.class
-in/gov/chennaicorporation/gccoffice/entity/AppModuleEntity.class
-in/gov/chennaicorporation/gccoffice/circular/service/CircularMaster.class
-in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/RequestStatus.class
-in/gov/chennaicorporation/gccoffice/petregistration/data/ResponseWrapper.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset.class
-in/gov/chennaicorporation/gccoffice/configuration/ThymeleafConfig.class
-in/gov/chennaicorporation/gccoffice/service/UserActivityService.class
-in/gov/chennaicorporation/gccoffice/controller/AdminController.class
-in/gov/chennaicorporation/gccoffice/repository/MenuItemRepository.class
-in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestStatusEntity.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategoryQuestion.class
-in/gov/chennaicorporation/gccoffice/entity/MenuItemEntity.class
-in/gov/chennaicorporation/gccoffice/garbagecollection/controller/MainController.class
-in/gov/chennaicorporation/gccoffice/mtm/controller/APIController.class
-in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/Request.class
-in/gov/chennaicorporation/gccoffice/service/LoginUserInfo.class
-in/gov/chennaicorporation/gccoffice/mtm/data/Petition.class
-in/gov/chennaicorporation/gccoffice/circular/controller/MainController.class
-in/gov/chennaicorporation/gccoffice/entity/SubMenuItemEntity.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion$AssetDetails$AssetCategory.class
-in/gov/chennaicorporation/gccoffice/controller/CustomErrorController.class
-in/gov/chennaicorporation/gccoffice/controller/MenuController.class
-in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint.class
-in/gov/chennaicorporation/gccoffice/configuration/JacksonConfiguration.class
-in/gov/chennaicorporation/gccoffice/garbagecollection/controller/APIController.class
-in/gov/chennaicorporation/gccoffice/taxcollection/controller/TaxCollectionRestController.class
-in/gov/chennaicorporation/gccoffice/mtm/controller/MainController.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/MainController.class
-in/gov/chennaicorporation/gccoffice/controller/FileController.class
-in/gov/chennaicorporation/gccoffice/repository/MenuItemAccessRepository.class
-in/gov/chennaicorporation/gccoffice/petregistration/data/RequestList.class
-in/gov/chennaicorporation/gccoffice/service/UserActivityTimelineService.class
-in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint$MtmComplaintTypes.class
-in/gov/chennaicorporation/gccoffice/entity/UserActivityLog.class
-in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestEntity.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback$AssetDetails$AssetCategory.class
-in/gov/chennaicorporation/gccoffice/c_petition/controller/MainController.class
-in/gov/chennaicorporation/gccoffice/configuration/AppConfig.class
-in/gov/chennaicorporation/gccoffice/mtm/controller/MayorController.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions.class
-in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameter.class
-in/gov/chennaicorporation/gccoffice/pgr/service/PGRCommon.class
-in/gov/chennaicorporation/gccoffice/taxcollection/service/TaxCollectionService.class
-in/gov/chennaicorporation/gccoffice/configuration/WebMvcConfig.class
-in/gov/chennaicorporation/gccoffice/mtm/data/Petition$MtmEvents.class
-in/gov/chennaicorporation/gccoffice/modeldata/Employee.class
diff --git a/target/maven-status/maven-compiler-plugin/compile/default-compile/inputFiles.lst b/target/maven-status/maven-compiler-plugin/compile/default-compile/inputFiles.lst
index 263e5e5..691e2ac 100644
--- a/target/maven-status/maven-compiler-plugin/compile/default-compile/inputFiles.lst
+++ b/target/maven-status/maven-compiler-plugin/compile/default-compile/inputFiles.lst
@@ -1,119 +1,203 @@
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/petregistration/controller/APIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/service/DataSyncService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/petregistration/data/PetCountInfo.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/modeldata/Employee.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/taxcollection/repository/TaxCollectionRequestRepository.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/package-info.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/petregistration/data/ResponseWrapper.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/AdminController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/circular/controller/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcCallsController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategoryQuestion.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/sos/service/SOSService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetQuestion.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/taxcollection/controller/MainController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/service/package-info.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/service/Petition.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/UserInfoRepository.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/interceptor/AppInterceptor.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/sos/service/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentAssignService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/CustomErrorController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/controller/package-info.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/FileController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/taxcollection/service/TaxCollectionService.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/service/Base64Util.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/InprogresscallService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/data/Departments.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/SocialMediaController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/ApiController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/CampaignService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/package-info.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/MenuController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/AppUserRepository.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/controller/package-info.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/GccOfficeApplication.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/AppModuleEntity.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcTaskListService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/UserActivityLogRepository.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/petregistration/controller/MainController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestEntity.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/MainController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/UserActivityLog.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/ComplaintController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/Request.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentAssignService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/controller/APIController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/circular/controller/MainController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/AppUserEntity.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/service/UserActivityService.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/UserInfoEntity.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/repository/package-info.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/data/ComplaintType.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/controller/APIController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/MenuItemAccessEntity.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/SubMenuItemEntity.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/service/package-info.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/taxcollection/configuration/TaxCollectionRepositoryConfig.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/AppConfig.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/AppModuleRepository.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/Petition.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/AppModuleAccessEntity.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/AppUserGroupRepository.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/service/PetitionMaster.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/package-info.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/SubMenuItemAccessRepository.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/entity/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/sos/package-info.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/circular/service/CircularMaster.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Feedback.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/circular/controller/APIController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/package-info.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/data/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/StatusCountController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/petregistration/service/API.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/service/LoginUserInfo.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/ThymeleafConfig.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/package-info.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/APIController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/MainController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameterQuestions.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/login.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/JacksonConfiguration.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/repository/NulmRepository.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AttendanceService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/entity/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcTaskListAPIController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/petregistration/package-info.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/SubMenuItemAccessEntity.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/service/CustomUserDetailsService.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/MtmComplaintTypes.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/data/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AddcategoryServices.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/modeldata/ErrorResponse.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/service/PGRCommon.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/controller/MayorController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/package-info.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/service/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAdminSettingService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetParameter.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/Petition.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/StatusCountService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/AppUserGroupEntity.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/controller/MainController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/petregistration/data/RequestList.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/controller/package-info.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/MenuItemEntity.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/APIController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/circular/package-info.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/garbagecollection/controller/MainController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/controller/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcCallsService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/AgentsService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/MtmEvent.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/service/PetitionMaster.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/PublicFollowUpController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentsAPIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/controller/APIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/FollowUpController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/CategoryAPIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/APIMobileCotroller.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/SocialMediaService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/petregistration/data/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/MTMOfficer.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/data/ComplaintType.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/controller/APIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/taxcollection/controller/TaxCollectionRestController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/garbagecollection/controller/APIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/controller/WhatsappControllerCD.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/works/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/MenuItemRepository.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAPIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/circular/service/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/SOSController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/RequestStatus.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/data/ComplaintType.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/APIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/modeldata/Employee.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/taxcollection/repository/TaxCollectionRequestRepository.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/AdminController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/service/NulmService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/works/controller/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/sos/controller/APIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/taxcollection/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/service/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/service/Petition.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/interceptor/AppInterceptor.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/FileController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/service/Base64Util.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/PublicFollowUpService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/WhatsappController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/ComplaintService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/AppUserRepository.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/DataSourceConfig.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/GccOfficeApplication.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAgentAssignAPIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/petregistration/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestEntity.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/QaqcAgentsService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/service/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/circular/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/AppUserEntity.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/UserInfoEntity.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/works/service/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/data/ComplaintType.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/service/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/AppConfig.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmAPIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/AppModuleRepository.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/AppUserGroupRepository.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/WhatsappMsgService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/entity/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/circular/controller/APIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/service/LoginUserInfo.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/ThymeleafConfig.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/Petition.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/APIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/service/WhatsappMsgService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/works/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/login.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/JacksonConfiguration.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/service/CustomUserDetailsService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/MtmComplaintTypes.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/service/PGRCommon.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/service/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/FollowUpService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/Petition.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/controller/MainController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/controller/NulmController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AttendanceAPIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/zerohours_petition/data/ComplaintType.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/entity/MenuItemEntity.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/APIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/controller/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/InprogresscallController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/service/GetMappingUserDetails.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentsAPIController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/nulm/repository/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/controller/DateTimeUtil.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/AppModuleAccessRepository.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/taxcollection/entity/TaxCollectionRequestStatusEntity.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/SubMenuItemRepository.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/Asset.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/package-info.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/controller/APIController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/controller/MainController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/petregistration/data/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/CampaignAPIController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/service/WhatsappqaqcMsgService.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/WhatsappController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenterqaqc/controller/QaqcAdminSettingsController.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/cdwastecollectorregistrations/service/RegistrationService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/service/UserActivityTimelineService.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/MenuItemAccessRepository.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/data/AssetCategory.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/service/Petition.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/MTMOfficer.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/callcenter/controller/AgentAssignAPIController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/controller/MainController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/service/PetitionMaster.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/SecurityConfig.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/controller/OfficerController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/mtm/controller/APIController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/taxcollection/controller/TaxCollectionRestController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/garbagecollection/controller/APIController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/pgr/data/package-info.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/configuration/WebMvcConfig.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/m_petition/data/package-info.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/repository/MenuItemRepository.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/controller/APIController.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/qrassetfeedback/controller/MainController.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/circular/service/package-info.java
+/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/com_petition/service/PetitionMaster.java
 /Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/service/CustomUserDetails.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/garbagecollection/modeldata/RequestStatus.java
-/Users/balajit/MyFolder/Development/MY Projects/gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/c_petition/data/ComplaintType.java
diff --git a/target/maven-status/maven-compiler-plugin/testCompile/default-testCompile/createdFiles.lst b/target/maven-status/maven-compiler-plugin/testCompile/default-testCompile/createdFiles.lst
new file mode 100644
index 0000000..e69de29
diff --git a/target/maven-status/maven-compiler-plugin/testCompile/default-testCompile/inputFiles.lst b/target/maven-status/maven-compiler-plugin/testCompile/default-testCompile/inputFiles.lst
new file mode 100644
index 0000000..e69de29