MTM - Mayor Petition & Complaints

Mayor Petitions and Complaints Resources, Controller & data added

src/main/java/in/gov/chennaicorporation/gccoffice/mtm/controller/APIController.java

@@ -105,4 +105,15 @@ public class APIController {
         return bodyMessage;
 	}
 	
+	
+	@GetMapping(value = "/getComMappingDetailsByMapId")
+	public String getComMappingDetailsByMapId(@RequestParam String mapid) {
+		String baseURL = appConfig.mtm+"/api/getComMappingDetailsByMapId";
+		UriComponentsBuilder uriComponentsBuilder = UriComponentsBuilder.fromUriString(baseURL)
+				.queryParam("mapid", mapid);
+		
+        ResponseEntity<String> response = restTemplate.getForEntity(uriComponentsBuilder.toUriString(),String.class);
+        bodyMessage = response.getBody().trim();
+        return bodyMessage;
+	}
 }

src/main/java/in/gov/chennaicorporation/gccoffice/mtm/controller/MayorController.java

@@ -8,6 +8,8 @@ import javax.websocket.Session;
 
 import org.apache.catalina.User;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.HttpMethod;
+import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
@@ -17,11 +19,14 @@ import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.client.RestTemplate;
 import org.springframework.web.util.UriComponentsBuilder;
 
+import com.fasterxml.jackson.databind.JsonNode;
+
 import in.gov.chennaicorporation.gccoffice.configuration.AppConfig;
 import in.gov.chennaicorporation.gccoffice.controller.login;
 import in.gov.chennaicorporation.gccoffice.mtm.data.MtmComplaintTypes;
 import in.gov.chennaicorporation.gccoffice.mtm.data.MtmEvent;
 import in.gov.chennaicorporation.gccoffice.mtm.data.Petition;
+import in.gov.chennaicorporation.gccoffice.mtm.data.PetitionComplaint;
 import in.gov.chennaicorporation.gccoffice.petregistration.data.RequestList;
 import in.gov.chennaicorporation.gccoffice.qrassetfeedback.data.Asset;
 import in.gov.chennaicorporation.gccoffice.qrassetfeedback.data.AssetCategory;
@@ -71,12 +76,13 @@ public class MayorController {
     	baseUrl = appConfig.mtm + "/api/event-list";
     	MtmEvent[] mtmEventsList = restTemplate.getForObject(baseUrl, MtmEvent[].class);
     	model.addAttribute("mtmEventsList",mtmEventsList);
-    	
+    	/*
     	baseUrl = appConfig.mtm + "/api/complainttypes";
     	MtmComplaintTypes[] mtmComplaintTypesList = restTemplate.getForObject(baseUrl, MtmComplaintTypes[].class);
     	model.addAttribute("complaintTypesList",mtmComplaintTypesList);
     	
     	//System.out.println("Length: "+mtmComplaintTypesList.length);	
+    	 */
 		return basePath+"/petition-list";
 	}
 	
@@ -98,12 +104,13 @@ public class MayorController {
     	baseUrl = appConfig.mtm + "/api/event-list";
     	MtmEvent[] mtmEventsList = restTemplate.getForObject(baseUrl, MtmEvent[].class);
     	model.addAttribute("mtmEventsList",mtmEventsList);
-    	
+    	/*
     	baseUrl = appConfig.mtm + "/api/complainttypes";
     	MtmComplaintTypes[] mtmComplaintTypesList = restTemplate.getForObject(baseUrl, MtmComplaintTypes[].class);
     	model.addAttribute("complaintTypesList",mtmComplaintTypesList);
     	
-    	//System.out.println("Length: "+mtmComplaintTypesList.length);	
+    	//System.out.println("Length: "+mtmComplaintTypesList.length);
+    	 */
 		return basePath+"/completed-petition-list";
 	}
 	
@@ -125,12 +132,14 @@ public class MayorController {
     	baseUrl = appConfig.mtm + "/api/event-list";
     	MtmEvent[] mtmEventsList = restTemplate.getForObject(baseUrl, MtmEvent[].class);
     	model.addAttribute("mtmEventsList",mtmEventsList);
-    	
+    	/*
     	baseUrl = appConfig.mtm + "/api/complainttypes";
     	MtmComplaintTypes[] mtmComplaintTypesList = restTemplate.getForObject(baseUrl, MtmComplaintTypes[].class);
     	model.addAttribute("complaintTypesList",mtmComplaintTypesList);
     	
     	//System.out.println("Length: "+mtmComplaintTypesList.length);	
+    	 
+    	 */
 		return basePath+"/partial-petition-list";
 	}
 	
@@ -152,12 +161,112 @@ public class MayorController {
     	baseUrl = appConfig.mtm + "/api/event-list";
     	MtmEvent[] mtmEventsList = restTemplate.getForObject(baseUrl, MtmEvent[].class);
     	model.addAttribute("mtmEventsList",mtmEventsList);
-    	
+    	/*
     	baseUrl = appConfig.mtm + "/api/complainttypes";
     	MtmComplaintTypes[] mtmComplaintTypesList = restTemplate.getForObject(baseUrl, MtmComplaintTypes[].class);
     	model.addAttribute("complaintTypesList",mtmComplaintTypesList);
     	
-    	//System.out.println("Length: "+mtmComplaintTypesList.length);	
+    	//System.out.println("Length: "+mtmComplaintTypesList.length);
+    	 * 	
+    	 */
 		return basePath+"/pending-petition-list";
 	}
+	
+	@GetMapping({"/complaint-list"})
+	public String showComplaintList(Model model,HttpSession session) {
+		
+		String eventid = "0";
+		
+		if(session.getAttribute("eventid")!= null && !session.getAttribute("eventid").equals("0")){
+			eventid = session.getAttribute("eventid").toString();
+		}
+		String baseUrl = appConfig.mtm + "/api/mayor/complaint-list";
+    	UriComponentsBuilder builder = UriComponentsBuilder.fromUriString(baseUrl)
+    			.queryParam("mtmid",eventid);
+    	PetitionComplaint[] petitionList = restTemplate.getForObject(builder.toUriString(), PetitionComplaint[].class);
+    	model.addAttribute("petitionlist",petitionList);
+    	
+    	baseUrl = appConfig.mtm + "/api/event-list";
+    	MtmEvent[] mtmEventsList = restTemplate.getForObject(baseUrl, MtmEvent[].class);
+    	model.addAttribute("mtmEventsList",mtmEventsList);
+    	/*
+    	baseUrl = appConfig.mtm + "/api/complainttypes";
+    	MtmComplaintTypes[] mtmComplaintTypesList = restTemplate.getForObject(baseUrl, MtmComplaintTypes[].class);
+    	model.addAttribute("complaintTypesList",mtmComplaintTypesList);
+    	*/
+    	
+		return basePath+"/complaint-list";
+	}
+	
+	@GetMapping({"/completed-complaint-list"})
+	public String showCompletedComplaintList(Model model,HttpSession session) {
+		
+		String eventid = "0";
+		
+		if(session.getAttribute("eventid")!= null && !session.getAttribute("eventid").equals("0")){
+			eventid = session.getAttribute("eventid").toString();
+		}
+		String baseUrl = appConfig.mtm + "/api/mayor/completed-complaint-list";
+    	UriComponentsBuilder builder = UriComponentsBuilder.fromUriString(baseUrl)
+    			.queryParam("mtmid",eventid);
+    	PetitionComplaint[] petitionList = restTemplate.getForObject(builder.toUriString(), PetitionComplaint[].class);
+    	model.addAttribute("petitionlist",petitionList);
+    	
+    	baseUrl = appConfig.mtm + "/api/event-list";
+    	MtmEvent[] mtmEventsList = restTemplate.getForObject(baseUrl, MtmEvent[].class);
+    	model.addAttribute("mtmEventsList",mtmEventsList);
+    	/*
+    	baseUrl = appConfig.mtm + "/api/complainttypes";
+    	MtmComplaintTypes[] mtmComplaintTypesList = restTemplate.getForObject(baseUrl, MtmComplaintTypes[].class);
+    	model.addAttribute("complaintTypesList",mtmComplaintTypesList);
+    	*/
+    	
+		return basePath+"/completed-complaint-list";
+	}
+	
+	@GetMapping({"/pending-complaint-list"})
+	public String showPendingComplaintList(Model model,HttpSession session) {
+		
+		String eventid = "0";
+		
+		if(session.getAttribute("eventid")!= null && !session.getAttribute("eventid").equals("0")){
+			eventid = session.getAttribute("eventid").toString();
+		}
+		String baseUrl = appConfig.mtm + "/api/mayor/pending-complaint-list";
+    	UriComponentsBuilder builder = UriComponentsBuilder.fromUriString(baseUrl)
+    			.queryParam("mtmid",eventid);
+    	PetitionComplaint[] petitionList = restTemplate.getForObject(builder.toUriString(), PetitionComplaint[].class);
+    	model.addAttribute("petitionlist",petitionList);
+    	
+    	baseUrl = appConfig.mtm + "/api/event-list";
+    	MtmEvent[] mtmEventsList = restTemplate.getForObject(baseUrl, MtmEvent[].class);
+    	model.addAttribute("mtmEventsList",mtmEventsList);
+    	/*
+    	baseUrl = appConfig.mtm + "/api/complainttypes";
+    	MtmComplaintTypes[] mtmComplaintTypesList = restTemplate.getForObject(baseUrl, MtmComplaintTypes[].class);
+    	model.addAttribute("complaintTypesList",mtmComplaintTypesList);
+    	*/
+		return basePath+"/completed-complaint-list";
+	}
+	
+	@GetMapping({"/by-event-list"})
+	public String showEventListReport(Model model,HttpSession session) {
+		
+		String eventid = "0";
+		
+		if(session.getAttribute("eventid")!= null && !session.getAttribute("eventid").equals("0")){
+			eventid = session.getAttribute("eventid").toString();
+		}
+		String baseUrl = appConfig.mtm + "/api/mayor/by-event-list";
+    	UriComponentsBuilder builder = UriComponentsBuilder.fromUriString(baseUrl)
+    			.queryParam("mtmid",eventid);
+    	MtmEvent[] mtmEventsTableList = restTemplate.getForObject(builder.toUriString(), MtmEvent[].class);
+    	model.addAttribute("mtmEventsTableList",mtmEventsTableList);
+    	
+    	baseUrl = appConfig.mtm + "/api/event-list";
+    	MtmEvent[] mtmEventsList = restTemplate.getForObject(baseUrl, MtmEvent[].class);
+    	model.addAttribute("mtmEventsList",mtmEventsList);
+    	
+		return basePath+"/by-event-list";
+	}
 }

src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/Petition.java

@@ -3,9 +3,6 @@ package in.gov.chennaicorporation.gccoffice.mtm.data;
 import com.fasterxml.jackson.annotation.JsonCreator;
 import com.fasterxml.jackson.annotation.JsonProperty;
 
-import in.gov.chennaicorporation.gccoffice.qrassetfeedback.data.AssetParameterQuestions.AssetCategory;
-import in.gov.chennaicorporation.gccoffice.qrassetfeedback.data.AssetParameterQuestions.AssetParameter;
-
 public class Petition {
 	private Long petitionId;
     private MtmEvents mtmEvents;

src/main/java/in/gov/chennaicorporation/gccoffice/mtm/data/PetitionComplaint.java

@@ -0,0 +1,461 @@
+package in.gov.chennaicorporation.gccoffice.mtm.data;
+
+import com.fasterxml.jackson.annotation.JsonCreator;
+import com.fasterxml.jackson.annotation.JsonProperty;
+
+public class PetitionComplaint {
+    private int mapId;
+    private String petitionNumber;
+    private MtmEventsPetitionId mtmEventsPetitionId;
+    private MtmEvents mtmEvents;
+    private String offID;
+    private String status;
+    private MtmComplaintTypes mtmComplaintTypes;
+    private boolean isDelete;
+    private boolean isActive;
+    private int createdBy;
+    private String cDate;
+    private String officer_name;
+    private String event_name;
+    private Integer officer_petition_count;
+    private Integer officer_completed_count;
+    private Integer officer_pending_count;
+
+    // Getters and setters for the above fields
+
+    public int getMapId() {
+		return mapId;
+	}
+
+	public void setMapId(int mapId) {
+		this.mapId = mapId;
+	}
+
+	public String getPetitionNumber() {
+		return petitionNumber;
+	}
+
+	public void setPetitionNumber(String petitionNumber) {
+		this.petitionNumber = petitionNumber;
+	}
+
+	public MtmEventsPetitionId getMtmEventsPetitionId() {
+		return mtmEventsPetitionId;
+	}
+
+	public void setMtmEventsPetitionId(MtmEventsPetitionId mtmEventsPetitionId) {
+		this.mtmEventsPetitionId = mtmEventsPetitionId;
+	}
+
+	public MtmEvents getMtmEvents() {
+		return mtmEvents;
+	}
+
+	public void setMtmEvents(MtmEvents mtmEvents) {
+		this.mtmEvents = mtmEvents;
+	}
+
+	public String getOffID() {
+		return offID;
+	}
+
+	public void setOffID(String offID) {
+		this.offID = offID;
+	}
+
+	public String getStatus() {
+		return status;
+	}
+
+	public void setStatus(String status) {
+		this.status = status;
+	}
+
+	public MtmComplaintTypes getMtmComplaintTypes() {
+		return mtmComplaintTypes;
+	}
+
+	public void setMtmComplaintTypes(MtmComplaintTypes mtmComplaintTypes) {
+		this.mtmComplaintTypes = mtmComplaintTypes;
+	}
+
+	public boolean isDelete() {
+		return isDelete;
+	}
+
+	public void setDelete(boolean isDelete) {
+		this.isDelete = isDelete;
+	}
+
+	public boolean isActive() {
+		return isActive;
+	}
+
+	public void setActive(boolean isActive) {
+		this.isActive = isActive;
+	}
+
+	public int getCreatedBy() {
+		return createdBy;
+	}
+
+	public void setCreatedBy(int createdBy) {
+		this.createdBy = createdBy;
+	}
+
+	public String getcDate() {
+		return cDate;
+	}
+
+	public void setcDate(String cDate) {
+		this.cDate = cDate;
+	}
+
+	public String getOfficer_name() {
+		return officer_name;
+	}
+
+	public void setOfficer_name(String officer_name) {
+		this.officer_name = officer_name;
+	}
+
+	public String getEvent_name() {
+		return event_name;
+	}
+
+	public void setEvent_name(String event_name) {
+		this.event_name = event_name;
+	}
+
+	public Integer getOfficer_petition_count() {
+		return officer_petition_count;
+	}
+
+	public void setOfficer_petition_count(Integer officer_petition_count) {
+		this.officer_petition_count = officer_petition_count;
+	}
+
+	public Integer getOfficer_completed_count() {
+		return officer_completed_count;
+	}
+
+	public void setOfficer_completed_count(Integer officer_completed_count) {
+		this.officer_completed_count = officer_completed_count;
+	}
+
+	public Integer getOfficer_pending_count() {
+		return officer_pending_count;
+	}
+
+	public void setOfficer_pending_count(Integer officer_pending_count) {
+		this.officer_pending_count = officer_pending_count;
+	}
+
+	public static class MtmEventsPetitionId {
+        private int petitionId;
+        private MtmEvents mtmEvents;
+        private String petitionNumber;
+        private String petitionerName;
+        private long petitionerMobile;
+        private String petitionerComplaint;
+        private String petitionerAddress;
+        private String petitionerPincode;
+        private String petitionerNatureOfComplaint;
+        private String tableNo;
+        private boolean isDelete;
+        private boolean isActive;
+        private long createdBy;
+        private String cDate;
+        private String status;
+        private String petitionerComplaint_txt;
+        
+        // Getters and setters for the above fields
+		public int getPetitionId() {
+			return petitionId;
+		}
+		public void setPetitionId(int petitionId) {
+			this.petitionId = petitionId;
+		}
+		public MtmEvents getMtmEvents() {
+			return mtmEvents;
+		}
+		public void setMtmEvents(MtmEvents mtmEvents) {
+			this.mtmEvents = mtmEvents;
+		}
+		public String getPetitionNumber() {
+			return petitionNumber;
+		}
+		public void setPetitionNumber(String petitionNumber) {
+			this.petitionNumber = petitionNumber;
+		}
+		public String getPetitionerName() {
+			return petitionerName;
+		}
+		public void setPetitionerName(String petitionerName) {
+			this.petitionerName = petitionerName;
+		}
+		public long getPetitionerMobile() {
+			return petitionerMobile;
+		}
+		public void setPetitionerMobile(long petitionerMobile) {
+			this.petitionerMobile = petitionerMobile;
+		}
+		public String getPetitionerComplaint() {
+			return petitionerComplaint;
+		}
+		public void setPetitionerComplaint(String petitionerComplaint) {
+			this.petitionerComplaint = petitionerComplaint;
+		}
+		public String getPetitionerAddress() {
+			return petitionerAddress;
+		}
+		public void setPetitionerAddress(String petitionerAddress) {
+			this.petitionerAddress = petitionerAddress;
+		}
+		public String getPetitionerPincode() {
+			return petitionerPincode;
+		}
+		public void setPetitionerPincode(String petitionerPincode) {
+			this.petitionerPincode = petitionerPincode;
+		}
+		public String getPetitionerNatureOfComplaint() {
+			return petitionerNatureOfComplaint;
+		}
+		public void setPetitionerNatureOfComplaint(String petitionerNatureOfComplaint) {
+			this.petitionerNatureOfComplaint = petitionerNatureOfComplaint;
+		}
+		public String getTableNo() {
+			return tableNo;
+		}
+		public void setTableNo(String tableNo) {
+			this.tableNo = tableNo;
+		}
+		public boolean isDelete() {
+			return isDelete;
+		}
+		public void setDelete(boolean isDelete) {
+			this.isDelete = isDelete;
+		}
+		public boolean isActive() {
+			return isActive;
+		}
+		public void setActive(boolean isActive) {
+			this.isActive = isActive;
+		}
+		public long getCreatedBy() {
+			return createdBy;
+		}
+		public void setCreatedBy(long createdBy) {
+			this.createdBy = createdBy;
+		}
+		public String getcDate() {
+			return cDate;
+		}
+		public void setcDate(String cDate) {
+			this.cDate = cDate;
+		}
+		public String getStatus() {
+			return status;
+		}
+		public void setStatus(String status) {
+			this.status = status;
+		}
+		public String getPetitionerComplaint_txt() {
+			return petitionerComplaint_txt;
+		}
+		public void setPetitionerComplaint_txt(String petitionerComplaint_txt) {
+			this.petitionerComplaint_txt = petitionerComplaint_txt;
+		}
+
+        
+    }
+
+    public static class MtmEvents {
+        private int mtmId;
+        private String eventName;
+        private String eventAddress;
+        private String eventDate;
+        private String zone;
+        private String ackNo;
+        private long startPetId;
+        private boolean isDelete;
+        private boolean isActive;
+        private long createdBy;
+        private String cDate;
+        private String event_date;
+        private Long total_petitions;
+        private Long petitions_completed;
+        private Long petition_partially_completed;
+        private Long petitions_pending;
+        private Long total_compliants;
+        private Long compliants_completed;
+        private Long compliants_pending;
+        
+
+        // Getters and setters for the above fields
+		public int getMtmId() {
+			return mtmId;
+		}
+		public void setMtmId(int mtmId) {
+			this.mtmId = mtmId;
+		}
+		public String getEventName() {
+			return eventName;
+		}
+		public void setEventName(String eventName) {
+			this.eventName = eventName;
+		}
+		public String getEventAddress() {
+			return eventAddress;
+		}
+		public void setEventAddress(String eventAddress) {
+			this.eventAddress = eventAddress;
+		}
+		public String getEventDate() {
+			return eventDate;
+		}
+		public void setEventDate(String eventDate) {
+			this.eventDate = eventDate;
+		}
+		public String getZone() {
+			return zone;
+		}
+		public void setZone(String zone) {
+			this.zone = zone;
+		}
+		public String getAckNo() {
+			return ackNo;
+		}
+		public void setAckNo(String ackNo) {
+			this.ackNo = ackNo;
+		}
+		public long getStartPetId() {
+			return startPetId;
+		}
+		public void setStartPetId(long startPetId) {
+			this.startPetId = startPetId;
+		}
+		public boolean isDelete() {
+			return isDelete;
+		}
+		public void setDelete(boolean isDelete) {
+			this.isDelete = isDelete;
+		}
+		public boolean isActive() {
+			return isActive;
+		}
+		public void setActive(boolean isActive) {
+			this.isActive = isActive;
+		}
+		public long getCreatedBy() {
+			return createdBy;
+		}
+		public void setCreatedBy(long createdBy) {
+			this.createdBy = createdBy;
+		}
+		public String getcDate() {
+			return cDate;
+		}
+		public void setcDate(String cDate) {
+			this.cDate = cDate;
+		}
+		public String getEvent_date() {
+			return event_date;
+		}
+		public void setEvent_date(String event_date) {
+			this.event_date = event_date;
+		}
+		public Long getTotal_petitions() {
+			return total_petitions;
+		}
+		public void setTotal_petitions(Long total_petitions) {
+			this.total_petitions = total_petitions;
+		}
+		public Long getPetitions_completed() {
+			return petitions_completed;
+		}
+		public void setPetitions_completed(Long petitions_completed) {
+			this.petitions_completed = petitions_completed;
+		}
+		public Long getPetition_partially_completed() {
+			return petition_partially_completed;
+		}
+		public void setPetition_partially_completed(Long petition_partially_completed) {
+			this.petition_partially_completed = petition_partially_completed;
+		}
+		public Long getPetitions_pending() {
+			return petitions_pending;
+		}
+		public void setPetitions_pending(Long petitions_pending) {
+			this.petitions_pending = petitions_pending;
+		}
+		public Long getTotal_compliants() {
+			return total_compliants;
+		}
+		public void setTotal_compliants(Long total_compliants) {
+			this.total_compliants = total_compliants;
+		}
+		public Long getCompliants_completed() {
+			return compliants_completed;
+		}
+		public void setCompliants_completed(Long compliants_completed) {
+			this.compliants_completed = compliants_completed;
+		}
+		public Long getCompliants_pending() {
+			return compliants_pending;
+		}
+		public void setCompliants_pending(Long compliants_pending) {
+			this.compliants_pending = compliants_pending;
+		}
+
+        
+    }
+
+    public static class MtmComplaintTypes {
+        private int complaintTypeId;
+        private String complaintType;
+        private boolean isDelete;
+        private boolean isActive;
+        private int createdBy;
+        private String cDate;
+
+        // Getters and setters for the above fields
+		public int getComplaintTypeId() {
+			return complaintTypeId;
+		}
+		public void setComplaintTypeId(int complaintTypeId) {
+			this.complaintTypeId = complaintTypeId;
+		}
+		public String getComplaintType() {
+			return complaintType;
+		}
+		public void setComplaintType(String complaintType) {
+			this.complaintType = complaintType;
+		}
+		public boolean isDelete() {
+			return isDelete;
+		}
+		public void setDelete(boolean isDelete) {
+			this.isDelete = isDelete;
+		}
+		public boolean isActive() {
+			return isActive;
+		}
+		public void setActive(boolean isActive) {
+			this.isActive = isActive;
+		}
+		public int getCreatedBy() {
+			return createdBy;
+		}
+		public void setCreatedBy(int createdBy) {
+			this.createdBy = createdBy;
+		}
+		public String getcDate() {
+			return cDate;
+		}
+		public void setcDate(String cDate) {
+			this.cDate = cDate;
+		}
+        
+    }
+}

src/main/resources/application.properties

@@ -2,8 +2,8 @@ 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
@@ -28,4 +28,9 @@ server.servlet.session.tracking-modes=COOKIE
 
 file.upload.directory=${user.dir}/gccoffice_uploads
 
-server.address=0.0.0.0
+server.address=0.0.0.0
+
+server.servlet.session.timeout: 30m
+server.servlet.session.cookie.name: MYSESSIONID
+server.servlet.session.cookie.max-age: 1800s
+

src/main/resources/templates/fragments/modules/base/head.html

@@ -85,5 +85,20 @@
 			.custom-tooltip-warning .tooltip.bs-tooltip-left .arrow:before {
 			   border-left-color: #fb6340;
 			}
+			
+			.form-label{
+				font-weight: bold !important;
+			}
+			 .modal-header{
+				 color:#fff !important;
+				 background-color: #404E67 !important;
+			 }
+			.bg-modal-title{
+				background-color: rgb(220, 221, 226) !important;
+			}
+			
+			.close{
+				color: #fff !important;
+			}
 		</style>
     </head>

src/main/resources/templates/fragments/modules/base/script.html

@@ -86,6 +86,62 @@ function call_loading(div,action){
 		$(divID).html(loadingimage)
 	}			
 }
+
+// Date format
+function convertdate(date_txt){
+	var datetxt = date_txt;
+	var date = new Date(datetxt);
+
+	// Extract the date components
+	var day = date.getDate();
+	var month = date.getMonth() + 1; // Month starts from 0, so add 1
+	var year = date.getFullYear();
+
+	// Extract the time components
+	var hours = date.getHours();
+	var minutes = date.getMinutes();
+
+	// Determine if it's AM or PM
+	var period = hours >= 12 ? 'PM' : 'AM';
+
+	// Adjust the hours to 12-hour format
+	hours = hours % 12;
+	hours = hours ? hours : 12; // Handle the case when hours is 0
+
+	// Format the date and time string
+	//var formattedDate = `${day}/${month}/${year}`;
+	//var formattedTime = `${hours}:${minutes.toString().padStart(2, '0')} ${period}`;
+
+	// Format the date and time strings
+	var formattedDate = `${day.toString().padStart(2, '0')}-${month.toString().padStart(2, '0')}-${year}`;
+	var formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${period}`;
+	
+	// Concatenate the formatted date and time
+	var formattedDateTime = `${formattedDate} ${formattedTime}`;
+
+	return formattedDateTime;
+}
+
+function date_difference(fromdate,todate,type='time'){
+	
+	// Parse the date strings into moment objects with the specified format
+	var startDate = moment(fromdate, 'DD-MM-YYYY hh:mm A');
+	var endDate = moment(todate, 'DD-MM-YYYY hh:mm A');
+	
+	// Calculate the difference in days
+	var daysDifference = endDate.diff(startDate, 'days');
+	
+	// Calculate the remaining time components (hours, minutes)
+	var duration = moment.duration(endDate - startDate);
+	var hoursDifference = duration.hours();
+	var minutesDifference = duration.minutes();
+	// Display the result
+	if(type=='days'){
+		return daysDifference + ' days';
+	}else{
+		return (hoursDifference) + ' hours and ' + (minutesDifference) + ' minutes';
+	}
+}
 </script>
 <!--
 <script th:inline="javascript">

src/main/resources/templates/fragments/modules/mtm/event_search_form.html

@@ -0,0 +1,22 @@
+				<div class="row">
+					<div class="col-12 mb-2">
+						<div class="input-group mb-0">
+							<span class="input-group-prepend">
+                        	<button type="button" class="btn btn-success" onclick="callReSetEventId(0);" title="Reset">
+                          	  <i class="ik ik-refresh-ccw"></i>
+                        	</button>
+                        	</span>
+						 <select class="form-control" id="search_eid" name="search_eid">
+	                        <option value="0">All Events</option>
+							<option th:each="mtmEvents : ${mtmEventsList}" th:value="${mtmEvents.mtmId}" 
+							        th:utext="${mtmEvents.eventName} +'('+${mtmEvents.eventDate}+')'"
+							        th:selected="${session.eventid == #strings.toString(mtmEvents.mtmId)}"></option>
+	                      </select>
+	                      <span class="input-group-append">
+                         <button type="button" class="btn btn-success" onclick="callSetEventId();" title="Search">
+                           <i class="ik ik-search me-1"></i> Search
+                         </button>
+                         </span>
+						</div>
+					</div>
+				</div>

src/main/resources/templates/fragments/modules/mtm/modal-box.html

@@ -0,0 +1,119 @@
+			<div class="modal fade" id="viewFile" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+	            <div class="modal-dialog" role="document">
+	                <div class="modal-content">
+	                    
+	                  	<div class="modal-header">
+	                          <h6 class="modal-title m-0" id="exampleModalDefaultLabel">Petition Files</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="filehtml">
+							</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 -->
+			
+			<div class="modal fade" id="petitionStatus" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel" 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="exampleModalDefaultLabel">புகார் நிலை / 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 class="row">
+									<div class="col-sm-6 col-xl-6">
+						              <div class="block block-rounded d-flex flex-column h-100 mb-0" id="petitionStatusForm" style="font-size:12px;">
+						                
+						              </div>
+						            </div>
+									
+									<div class="col-sm-6 col-xl-6">
+						              <div class="block block-rounded d-flex flex-column h-100 mb-0" id="petitionUpdateForm" style="font-size:12px;">
+						              	
+						              </div>
+						            </div>
+									
+		                          </div><!--end row-->                                                      
+		                      </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-->
+			
+			<!-- PopUp Modal Help Form -->
+			<div class="modal fade" id="complaintStatus" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel" aria-hidden="true">
+		              <div class="modal-dialog modal-lg" role="document">
+		                  <div class="modal-content">
+							  <div class="modal-header">
+		                          <h6 class="modal-title m-0" id="exampleModalDefaultLabel">புகார் நிலை / 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 class="row">
+									  <div class="col-lg-1"></div> <!-- Left column -->
+									  <div class="col-lg-10">
+									  <div class="block block-rounded" style="border: 1px solid black;">
+									  <div id="ack1">
+									  		<table class="table table-borderless table-vcenter p-0 m-0">
+									  		  <tbody>
+									  		    <tr>
+									  		      <th scope="row"><img th:src="@{/assets/images/logo-sm.png}" width="80px"></th>
+									  		      <td class="fw-semibold text-center">
+									  			<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br>
+									  			மக்களை தேடி மேயர் திட்டம்<br>
+									  			ஒப்புகை சீட்டு / Acknowledgement Receipt</b>
+									  		    </td></tr>
+									  		</tbody>
+									  		</table>
+									  		<hr style="margin:0px">
+									  		  <div class="block-content p-0 m-0" id="petitionStatusDetails">
+							  		   
+									  		  </div></div>
+										</div>
+										<div class="col-lg-1"></div> <!-- Right column -->
+									</div>
+		                          </div><!--end row-->                                                      
+		                      </div><!--end modal-body-->
+		                      <div class="modal-footer">
+		                          <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
+		                      </div><!--end modal-footer-->
+				
+		                  </div><!--end modal-content-->
+		              </div><!--end modal-dialog-->
+		    </div><!--end modal-->
+		    
+			<div class="modal fade" id="viewCloseFile" tabindex="1" role="dialog" aria-labelledby="otpFormLabel" 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="exampleModalDefaultLabel">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 class="row">
+									<div class="col-sm-12 col-xl-12">
+						              <div class="block block-rounded d-flex flex-column h-100 mb-0" id="viewFileHtml" style="font-size:12px;">
+										
+						              </div>
+						            </div>
+		                          </div><!--end row-->                                                      
+		                      </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-->

src/main/resources/templates/fragments/modules/mtm/script.html

@@ -0,0 +1,709 @@
+<script th:inline="javascript">
+	var nodata = `<center><img src="../../assets/images/nodata_ani.gif" width="40%"><br><p class="text-warning">Data are not availble at this moment please check later</p></center>`;
+	
+		var complaintTypesList = /*[[${complaintTypesList}]]*/ [];
+		var complaintTypes =[];
+		var complaintHTML='';
+		console.log(complaintTypesList.length);
+		for (var i = 0; i < complaintTypesList.length; i++) {
+			complaintTypes[complaintTypesList[i].complaintTypeId] = complaintTypesList[i].complaintType;
+		}
+		
+		/* Event Id Search */
+		function callReSetEventId(eventid){
+			$.ajax({
+			    type: "GET",
+			    url: '/api/mtm/setEventId',
+			    data: {
+			        'eventid': eventid
+			    },
+			}).done(function(response) {
+				location.reload();
+			}).fail(function(jqXHR, textStatus, errorThrown) {
+				/*
+			    // Log the error and any relevant information
+			    console.error("Error sending request: " + textStatus + " " + errorThrown);
+				*/
+			});
+			return false;
+		}
+		
+		function callSetEventId(){
+			var eventid = $("#search_eid").val();
+			$.ajax({
+			    type: "GET",
+			    url: '/api/mtm/setEventId',
+			    data: {
+			        'eventid': eventid
+			    },
+			}).done(function(response) {
+				location.reload();
+			}).fail(function(jqXHR, textStatus, errorThrown) {
+				/*
+			    // Log the error and any relevant information
+			    console.error("Error sending request: " + textStatus + " " + errorThrown);
+				*/
+			});
+			return false;
+		}
+		
+		/* Event Id Search */
+		function callSetEventById(eventid,link){
+			$.ajax({
+			    type: "GET",
+			    url: '/api/mtm/setEventId',
+			    data: {
+			        'eventid': eventid
+			    },
+			}).done(function(response) {
+				window.location.href = link;
+			}).fail(function(jqXHR, textStatus, errorThrown) {
+				/*
+			    // Log the error and any relevant information
+			    console.error("Error sending request: " + textStatus + " " + errorThrown);
+				*/
+			});
+			return false;
+		}
+		/* ///////////////// */
+		
+		/* // for Petition // */
+		
+		function callViewFiles( id , pet_num){
+			
+			$('#modaltitle').html(`Petition (${pet_num}) Files`);
+	     	$.ajax({
+	          type: "GET",
+			  dataType: 'json',
+	          url: "/api/mtm/petitionFilesBypetitionId?pid="+id,
+	          
+	          success: function(data){
+				  petitionFiles = data;
+				  var fileLength = petitionFiles.length;
+				  var fileHTML='';
+				  if(fileLength>0){
+					  for (var i = 0; i < fileLength; i++) {
+						  	var petitionFile = petitionFiles[i];
+							var fileId = petitionFile.mtmPetitionFileId;
+						    var fileName = petitionFile.fileName;
+						    var fileSize = null;
+						    var fileType = null;
+							// Get the file size and type from the data object
+						    if (petitionFile.data && petitionFile.data.wrappedBlob) {
+						        var binaryStream = petitionFile.data.wrappedBlob.binaryStream;
+						        if (binaryStream) {
+						            // Get the file size
+						            fileSize = Object.keys(binaryStream).length;
+						            // Get the file type
+						            fileType = fileName.split(".").pop();
+						        }
+						    }
+							var filetypeico = "file-lines";
+							if(fileType=='pdf'){
+								filetypeico = "file-pdf";
+							}
+							else{
+								filetypeico = "file-image";
+							}
+							sno=i+1;
+							/*
+							fileHTML+=`
+		                        	<li>
+			                          <a class="d-flex py-2" href="/blob/${fileId}/download">
+			                            <div class="flex-shrink-0 me-3 ms-2 overlay-container overlay-left">
+			                              <i class="far fa-3x fa-${filetypeico}"></i>
+			                            </div>
+			                            <div class="flex-grow-1">
+			                              <div class="fw-semibold">FileName: ${fileName}</div>
+			                              <div class="fs-sm text-muted">FileType: ${fileType}</div>
+			                            </div>
+			                          </a>
+			                        </li>
+			                      `;
+			                      */
+			               fileHTML+=`
+		                        	 <tr>
+										 <td>${sno}</td>
+										 <td>${fileName}</td>
+										 <td>${fileType}</td>
+										 <td class="text-center" style="width: 100px;">
+											<a href="/blob/${fileId}/download" data-toggle="tooltip" data-animation="true" data-placement="top" class="js-tooltip-enabled" aria-label="Downlaod" data-original-title="Download"><i class="fa fa-fw fa-download" style="font-size: 18px;"></i></a>
+											<a href="#" onclick="return call_blobData(${fileId},'petition');" data-toggle="tooltip" data-animation="true" data-placement="top" class="js-tooltip-enabled" aria-label="View Files" data-original-title="View"><i class="far fa-3x fa-${filetypeico}" style="font-size: 18px;"></i></a>
+										</td>
+									 </tr>
+			                         `;
+										
+					  }
+					  //$('#filehtml').html('<ul class="nav-items push">'+fileHTML+'</ul>');
+					  fileHTML = `<table class="table table-bordered table-vcenter">
+					                <thead>
+					                  <tr>
+										  <th>S.no</th>
+										  <th>File Name</th>
+										  <th>File Type</th>
+										  <th>Action</th>
+					                  </tr>
+					                </thead>
+					                <tbody>
+										${fileHTML}
+					                </tbody>
+					              </table>`;
+					  $('#filehtml').html(fileHTML);
+				  }
+				  else{
+				  	$('#filehtml').html('<center>NO Data</center>');
+				  }
+				  
+					$('#viewFile').modal({
+					    backdrop: 'static',
+					    keyboard: false
+					})
+					$('#viewFile').modal('show');
+		          }
+		     	});
+			return false;
+		}
+		
+		function call_view_complaint(mapid){
+			
+				$.ajax({
+				    type: "GET",
+				    url: '/api/mtm/getComMappingDetailsByMapId',
+				    data: {
+				        'mapid': mapid,
+				    },
+					dataType: 'json',
+				}).done(function(response) {
+					//alert(response.length);
+				    // Handle the response here
+					if(response.length<=0){
+						//console.error("Error:"+response);
+						$("#error").html("<p class='text-danger m-0 p-0'>Invalid Acknowledgement Number!</p>");
+					}
+					else{
+						
+						
+						var complaintBodyHTML='';
+						var com_txt = response[0].mtmComplaintTypes.complaintType;
+						var com_status=response[0].status;
+						var com_status_txt = `<span class="badge bg-info">UNDER PROGRESS</span> <i class="fa fa-arrow-right"></i> ${response[0].officer_name}`;
+						if(com_status=='close'){
+							var com_status_txt = `<span class="badge bg-success">Completed</span> <i class="fa fa-arrow-right"></i> ${response[0].officer_name}`;
+						}
+						complaintBodyHTML+=`<tr>
+						                    <td class="fw-semibold">
+						                      ${com_txt} <i class="fa fa-arrow-right"></i> ${com_status_txt}
+						                    </td>
+						                  </tr>`;
+					
+						var complaintHTML=`
+						<table class="table table-bordered table-vcenter">
+			                <thead>
+			                  <tr>
+			                    <th>Complaint <i class="fa fa-arrow-right"></i> Status</th>
+			                  </tr>
+			                </thead>
+			                <tbody>
+			                  ${complaintBodyHTML}
+			                </tbody>
+			              </table>
+						`;
+						var date_txt = convertdate(response[0].mtmEventsPetitionId.cDate);
+						var statusHTML = `<table class="table table-borderless table-vcenter p-0 m-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;">
+							  		           ${date_txt}
+							  		          </td>
+							  		        </tr>
+							  		        <tr>
+							  		          <th style="padding: 0.45rem 0.45rem;">Table No / User No: </th>
+							  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+							  		           ${response[0].mtmEventsPetitionId.tableNo}
+							  		          </td>
+							  		        </tr>
+							  		        <tr>
+							  		          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+							  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+							  		           ${response[0].mtmEventsPetitionId.petitionNumber}
+							  		          </td>
+							  		        </tr>
+							  		        <tr>
+							  		          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+							  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+							  		          	${response[0].mtmEventsPetitionId.petitionerName}
+							  		          </td>
+							  		        </tr>
+							  		        <tr>
+							  		          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / No.</th>
+							  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+							  		           ${response[0].mtmEventsPetitionId.petitionerMobile}
+							  		          </td>
+							  		        </tr>
+							  		        <tr style="font-size:12px;">
+							  		          <td colspan="2" style="padding: 0.45rem 0.45rem;"><b>புகாரின் தன்மை / Nature of complaint:</b><br>
+							  		           ${response[0].mtmEventsPetitionId.petitionerNatureOfComplaint}
+							  				</td>
+							  		        <tr style="font-size:12px;">
+							  		          <td colspan="2" style="padding: 0.45rem 0.45rem;">
+							  		           ${complaintHTML}
+							  				</td>
+							  		        </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>`;
+		
+							$('#petitionStatusDetails').html(statusHTML);
+							$("#error").html("");
+				  			$('#complaintStatus').modal({
+				  			    backdrop: 'static',
+				  			    keyboard: false
+				  			});
+							$('#complaintStatus').modal('show');
+					
+						 return false;
+					}
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					/*
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+				    console.error("URL: /api/ogin");
+				    console.error("Query parameters:", {
+				        'ptax': ptax,
+				        'uname': uname,
+				        'upass': upass
+				    });
+					*/
+				});
+				return false;
+		}
+		
+		function call_view_petition(petitionNo){
+			var petition_no = petitionNo;
+			
+				$.ajax({
+				    type: "GET",
+				    url: '/api/mtm/getPetitionStatusPublic',
+				    data: {
+				        'petition_no': petition_no,
+				    },
+					dataType: 'json',
+				}).done(function(response) {
+					
+				    // Handle the response here
+					if(response.length<=0){
+						$("#error").html("<p class='text-danger m-0 p-0'>Invalid Acknowledgement Number!</p>");
+					}
+					else{
+						
+						var complaint = response[0].petitionerComplaint;
+						var complaintArray = complaint.split(',');
+						
+						var complaintBodyHTML=``;
+						
+						$.ajax({
+						    type: "GET",
+						    url: '/api/mtm/getComMappingDetailsByPetId',
+						    data: {
+						        'petid': response[0].petitionId
+						    },
+						    dataType: 'json',
+							
+						}).done(function(response2) {
+							complaintBodyHTML=``;
+							var mapid=0;
+							for(j = 0; j < response2.length; j++){
+								
+								var com_txt= complaintTypes[response2[j].mtmComplaintTypes.complaintTypeId];
+								//console.log(response2[j].mtmComplaintTypes.complaintTypeId);
+								var com_status_link=``;
+								var com_status=response2[j].status;
+								var com_status_txt = `<span class="badge bg-info">UNDER PROGRESS</span> <i class="fa fa-arrow-right"></i> ${response2[j].officer_name}`;
+								if(com_status=='close'){
+									var com_status_txt = `<span class="badge bg-success">Completed</span> <i class="fa fa-arrow-right"></i> ${response2[j].officer_name}`;
+									var com_status_link=`<a href="#" onclick="return call_close_details(${response2[j].mapId});">View</a>`;
+									mapid = response2[j].mapId
+								}
+								complaintBodyHTML+=`<tr>
+								                    	<td class="text-center" scope="row">${j+1}</td>
+								                    	<td class="fw-semibold">
+								                      	${com_txt} <i class="fa fa-arrow-right"></i> ${com_status_txt}
+								                    	</td>
+														<td class="fw-semibold">${com_status_link}</td>
+								                   </tr>`;
+							}
+							
+							if(response2.length==0){
+								var complaint = response[0].petitionerComplaint;
+								var complaintArray = complaint.split(',');
+						
+								var complaintBodyHTML='';
+								for(j = 0; j < complaintArray.length; j++){
+									var sno = (j+1);
+									var com_txt= complaintTypes[complaintArray[j]];
+									var com_status=0;
+									var com_status_txt = `<span class="badge bg-danger">Not Assigned</span>`;
+									complaintBodyHTML+=`<tr>
+									                    	<td class="text-center" scope="row">${sno}</td>
+									                    	<td class="fw-semibold">
+									                      	${com_txt} <i class="fa fa-arrow-right"></i> ${com_status_txt}
+									                    	</td>
+															<td> - </td>
+									                  </tr>`;
+								}
+							}
+							else if(response2.length==1){
+								call_close_details(mapid);
+							}
+					
+					var complaintHTML=`
+					<table class="table table-bordered table-vcenter">
+		                <thead>
+		                  <tr>
+		                    <th class="text-center" style="width: 50px;">#</th>
+		                    <th>Complaint <i class="fa fa-arrow-right"></i> Status</th>
+							<th class="text-center" style="width: 50px;"><i class="fa fa-link"></i></th>
+		                  </tr>
+		                </thead>
+		                <tbody>
+		                  ${complaintBodyHTML}
+		                </tbody>
+		              </table>
+					`;
+					var date_txt = convertdate(response[0].cDate);
+					var statusHTML = `<table class="table table-borderless table-vcenter p-0 m-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;">
+						  		           ${date_txt}
+						  		          </td>
+						  		        </tr>
+						  		        <tr>
+						  		          <th style="padding: 0.45rem 0.45rem;">Table No / User No: </th>
+						  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+						  		           ${response[0].tableNo}
+						  		          </td>
+						  		        </tr>
+						  		        <tr>
+						  		          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+						  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+						  		           ${response[0].petitionNumber}
+						  		          </td>
+						  		        </tr>
+						  		        <tr>
+						  		          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+						  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+						  		          	${response[0].petitionerName}
+						  		          </td>
+						  		        </tr>
+						  		        <tr>
+						  		          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / No.</th>
+						  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+						  		           ${response[0].petitionerMobile}
+						  		          </td>
+						  		        </tr>
+						  		        <tr style="font-size:12px;">
+						  		          <td colspan="2" style="padding: 0.45rem 0.45rem;"><b>புகாரின் தன்மை / Nature of complaint:</b><br>
+						  		           ${response[0].petitionerNatureOfComplaint}
+						  				</td>
+						  		        <tr style="font-size:12px;">
+						  		          <td colspan="2" style="padding: 0.45rem 0.45rem;">
+						  		           ${complaintHTML}
+						  				</td>
+						  		        </tr>
+						  		      </tbody>
+						  		    </table>`;
+						  		    
+						statusHTML = `<div class="card mb-0">
+									      <div class="card-header bg-modal-title"><h3>Complaint Details</h3></div>
+									      <div class="card-body">${statusHTML}</div>
+									  </div>`;	
+						
+						petupdateForm = `<div class="card mb-0">
+									      <div class="card-header bg-modal-title"><h3>Complaint Update Details</h3></div>
+									      <div class="card-body text-center"><br><br>
+											   Select View from Left 'Complaint <i class="fa fa-arrow-right"></i> Status'
+											   <br><br><br>
+										  </div>
+									  </div>`;	
+							
+							$('#petitionUpdateForm').html(petupdateForm);	   
+							$('#petitionStatusForm').html(statusHTML);
+							$("#error").html("");
+				  			$('#petitionStatus').modal({
+				  			    backdrop: 'static',
+				  			    keyboard: false
+				  			});
+							$('#petitionStatus').modal('show');
+						});
+					
+						 return false;
+					}
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					/*
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+				    console.error("URL: /api/ogin");
+					*/
+				});
+				return false;
+		}
+		
+		function call_close_petition_details(mapid){
+			
+				$.ajax({
+				    type: "GET",
+				    url: '/api/mtm/getComMappingActionByMapId',
+				    data: {
+				        'mapid': mapid,
+				    },
+					dataType: 'json',
+				}).done(function(response) {
+					//alert(response.length);
+				    // Handle the response here
+					if(response.length<=0){
+						//console.error("Error:"+response);
+						var err=`<div scope="row" class="text-warning text-center">Dev Ref ID: ${mapid}</div>
+								 <div scope="row" class="text-danger text-center">No data Found!</div>`;
+						$('#petitionStatusForm').html(err);
+						$('#petitionUpdateForm').html(err);
+			  			$('#petitionStatusupdate').modal({
+			  			    backdrop: 'static',
+			  			    keyboard: false
+			  			});
+						$('#petitionStatusupdate').modal('show');
+					}
+					else{
+						var complaintBodyHTML='';
+						var com_txt = response[0].mtmEventsPetitionMapping.mtmComplaintTypes.complaintType;
+						var com_status=response[0].status;
+						var date_txt = response[0].cDate;
+						var action_taken_date= convertdate(date_txt);
+						var com_status_txt = `<span class="badge bg-info">UNDER PROGRESS</span> <i class="fa fa-arrow-right"></i> ${response[0].officer_name}`;
+						if(com_status=='close'){
+							var com_status_txt = `<span class="badge bg-success">Completed</span> <i class="fa fa-arrow-right"></i> ${response[0].officer_name}`;
+						}
+						complaintBodyHTML+=`<tr>
+						                    <td class="fw-semibold">
+						                      ${com_txt} <i class="fa fa-arrow-right"></i> ${com_status_txt}
+						                    </td>
+						                  </tr>`;
+					
+						var complaintHTML=`
+						<table class="table table-bordered table-vcenter">
+			                <thead>
+			                  <tr>
+			                    <th>Complaint <i class="fa fa-arrow-right"></i> Status</th>
+			                  </tr>
+			                </thead>
+			                <tbody>
+			                  ${complaintBodyHTML}
+			                </tbody>
+			              </table>
+						`;
+						var date_txt = convertdate(response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.cDate);
+						var statusHTML = `<table class="table table-borderless table-vcenter p-0 m-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;">
+							  		           ${date_txt}
+							  		          </td>
+							  		        </tr>
+							  		        <tr>
+							  		          <th style="padding: 0.45rem 0.45rem;">Table No / User No: </th>
+							  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+							  		           ${response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.tableNo}
+							  		          </td>
+							  		        </tr>
+							  		        <tr>
+							  		          <th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th>
+							  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+							  		           ${response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.petitionNumber}
+							  		          </td>
+							  		        </tr>
+							  		        <tr>
+							  		          <th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th>
+							  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+							  		          	${response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.petitionerName}
+							  		          </td>
+							  		        </tr>
+							  		        <tr>
+							  		          <th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / No.</th>
+							  		          <td class="fw-semibold" style="padding: 0.45rem 0.45rem;">
+							  		           ${response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.petitionerMobile}
+							  		          </td>
+							  		        </tr>
+							  		        <tr style="font-size:12px;">
+							  		          <td colspan="2" style="padding: 0.45rem 0.45rem;"><b>புகாரின் தன்மை / Nature of complaint:</b><br>
+							  		           ${response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.petitionerNatureOfComplaint}
+							  				</td>
+							  		        <tr style="font-size:12px;">
+							  		          <td colspan="2" style="padding: 0.45rem 0.45rem;">
+							  		           ${complaintHTML}
+							  				</td>
+							  		        </tr>
+							  		      </tbody>
+							  		    </table>`;
+		
+							statusHTML=`<div class="card mb-0">
+									      <div class="card-header bg-modal-title"><h3>Complaint Details</h3></div>
+									      <div class="card-body">${statusHTML}</div>
+									    </div>`;
+							
+							$('#petitionStatusForm').html(statusHTML);
+							
+							call_close_details(mapid);
+							
+						 return false;
+					}
+					
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+				    
+					
+				});
+				return false;
+		}
+		
+		function call_close_details(mapid){
+			
+				$.ajax({
+				    type: "GET",
+				    url: '/api/mtm/getComMappingActionByMapId',
+				    data: {
+				        'mapid': mapid,
+				    },
+					dataType: 'json',
+				}).done(function(response) {
+					
+				    // Handle the response here
+					if(response.length<=0){
+						
+						petupdateForm = `<div class="card mb-0">
+									      <div class="card-header bg-modal-title"><h3>Complaint Update Details</h3>
+										      <div class="card-header-right">
+	                                            <p class="bg-warning lbl-card"> Ref ID: ${mapid}</p>
+	                                          </div>
+									      </div>
+									      <div class="card-body">${nodata}</div>
+									     </div>`;
+
+						$('#petitionUpdateForm').html(petupdateForm);
+						$("#formError").html("");
+			  			
+					}
+					else{
+						var complaintBodyHTML='';
+						var com_txt = response[0].mtmEventsPetitionMapping.mtmComplaintTypes.complaintType;
+						var com_status=response[0].status;
+						var date_txt = response[0].cDate;
+						var action_taken_date= convertdate(date_txt);
+						
+						var fromdate=convertdate(response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.cDate);
+						var todate = action_taken_date;
+				        var petupdateForm=`
+									<label class="form-label">நடவடிக்கை தேதி / Action Date:</label>
+									<div class="mb-0 text-warning">${action_taken_date} 
+										<a href="#" onclick="return false;"data-toggle="tooltip" data-html="true" data-animation="true" data-placement="top" title="In Days: ${date_difference(fromdate,todate,'days')}<br> In Time: ${date_difference(fromdate,todate,'time')}"> <i class="ik ik-clock text-success"></i> </a></div>
+									<hr>
+									<label class="form-label">நடவடிக்கை / Action:</label>
+									<div class="text"><p>${response[0].comments}</p></div>
+									<hr>
+									<label class="form-label">ஆவணப் பதிவேற்றம் / Document Upload:</label><br>
+									<p class="mb-0 text btn" onclick="call_blobData(${response[0].solMapId},'action');">${response[0].fileName}</p>
+          					  			<div id="formError" class="text-danger"></div>
+									</div>
+								  `;
+								  
+						petupdateForm = `<div class="card mb-0">
+										      <div class="card-header bg-modal-title"><h3>Complaint Update Details</h3>
+											      <div class="card-header-right">
+													  <span class="badge badge-pill badge-success mb-1">Ref ID: ${mapid}</span>
+			                                      </div>
+										      </div>
+										      <div class="card-body">${petupdateForm}</div>
+										  </div>`;
+						 
+						$('#petitionUpdateForm').html(petupdateForm);
+						$("#formError").html("");
+					}
+						$('#petitionStatus').modal({
+				  			    backdrop: 'static',
+				  			    keyboard: false
+			  			});
+						$('#petitionStatus').modal('show');
+						
+						$('[data-toggle="tooltip"]').tooltip();
+						
+				}).fail(function(jqXHR, textStatus, errorThrown) {
+					
+				    // Log the error and any relevant information
+				    console.error("Error sending request: " + textStatus + " " + errorThrown);
+					
+				});
+				return false;
+		}
+		
+		function call_blobData(id,inTable){
+			
+			$.ajax({
+			    type: "GET",
+			    url: '/api/mtm/viewBlobData',
+			    data: {
+			        'id': id,
+					'table': inTable,
+			    },
+				dataType: 'json',
+			}).done(function(response) {
+				
+				var fileHTML = '';
+			    // Handle the response here
+				if(response.length<=0){
+					fileHTML = `<p class='text-danger m-0 p-0'>No Data!</p>`;
+				}
+				else{
+					if(response[1]=='application/pdf'){
+						var fileHTML = `<iframe src="data:application/pdf;base64,${response[0]}" type="application/pdf" width="100%" height="600px"></iframe>`;
+						
+					}
+					else if(response[1]=='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="data:${response[1]};base64,${response[0]}" alt="File">`;
+					}
+					
+				}
+				/*
+				console.log(response);
+				console.log(response.length);
+				console.log(response[1]);
+				console.log(fileHTML);
+				*/
+				$('#viewFileHtml').html(fileHTML);
+	  			$('#viewCloseFile').modal({
+	  			    backdrop: 'static',
+	  			    keyboard: false
+	  			});
+				$('#viewCloseFile').modal('show');
+				
+			}).fail(function(jqXHR, textStatus, errorThrown) {
+				
+			    // Log the error and any relevant information
+			    console.error("Error sending request: " + textStatus + " " + errorThrown);
+			   
+			});
+			return false;
+		}
+		
+		/* //////////////// */ 
+</script>

src/main/resources/templates/modules/mtm/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>Makkalai Thedi Mayor Module</h5>
+                                            <span>Makkalai Thedi Mayoral Petition and the Complaints Proceeding from It</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">Makkalai Thedi Mayor</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>Total Petitions</p>
+                                        <p class="mb-0 mt-15">View Petition 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>Petition Completed</p>
+                                        <p class="mb-0 mt-15">View Completed 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>Petition Partially Completed</p>
+                                        <p class="mb-0 mt-15">View Partially Completed<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>Petitions Pending</p>
+                                        <p class="mb-0 mt-15">View Pending List<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="/assets/node_modules/amcharts3/amcharts/amcharts.js"></script>
+        <script src="/assets/node_modules/amcharts3/amcharts/serial.js"></script>
+        <script src="/assets/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>

src/main/resources/templates/modules/mtm/mayor/by-event-list.html

@@ -0,0 +1,204 @@
+<!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="fas fa-th-large bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Event based report</h5>
+                                            <span>Makkalai Thedi Mayoral Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <nav class="breadcrumb-container" aria-label="breadcrumb">
+                                        <ol class="breadcrumb">
+                                            <li class="breadcrumb-item">
+                                                <a href="/index"><i class="ik ik-home"></i></a>
+                                            </li>
+                                            <li class="breadcrumb-item">Makkalai Thedi Mayoral </li>
+                                            <li class="breadcrumb-item">Mayor</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Event Report</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+										<div th:replace="~{fragments/modules/mtm/event_search_form :: div}"></div>
+                                        <div>
+											<table id="assetDatatable" 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" colspan=3>Event Info</th>
+					 									<th class="text-center" colspan=4>Petitions</th>
+														<th class="text-center" colspan=3>Compliants</th>
+												    </tr>
+						                            <tr class="table-bordered">
+														<th class="text-center no-sort">S.No</th>
+														<th class="">Name</th>
+														<th class="">Date</th>
+														<th class="text-center">Total</th>
+														<th class="text-center">Completed</th>
+														<th class="text-center">Partially</th>
+														<th class="text-center">Pending</th>
+														<th class="text-center">Total</th>
+														<th class="text-center">Completed</th>
+														<th class="text-center">Pending</th>
+						                            </tr>
+                                                </theadclass="thead-dark">
+                                                <tbody>
+	                                                <tr th:each="event, i : ${mtmEventsTableList}" class="${mtmEventsTableList}">
+						                                <td th:text="${i.index + 1}">0</td>
+														<td th:text="${event.eventName}"></td>
+														<td th:text="${event.event_date}"></td>
+														<td class=""><a th:href="@{#}" th:text="${event.total_petitions}" th:onclick="return callSetEventById( [[${event.mtmId}]],'/mtm/mayor/petition-list');" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Total List"></a></td>
+														<td class=""><a th:href="@{#}" th:text="${event.petitions_completed}" th:onclick="return callSetEventById( [[${event.mtmId}]],'/mtm/mayor/completed-petition-list');" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Completed Petition List"></a></td>
+						 								<td class=""><a th:href="@{#}" th:text="${event.petition_partially_completed}" th:onclick="return callSetEventById( [[${event.mtmId}]],'/mtm/mayor/partial-petition-list');" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Partially Completed Petition List"></a></td> 
+														<td class=""><a th:href="@{#}" th:text="${event.petitions_pending}" th:onclick="return callSetEventById( [[${event.mtmId}]],'/mtm/mayor/pending-petition-list');" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Pending Petition List"></a></td>  
+														<td class=""><a th:href="@{#}" th:text="${event.total_compliants}" th:onclick="return callSetEventById( [[${event.mtmId}]],'/mtm/mayor/complaint-list');" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Complaint List"></a></td>
+						 								<td class=""><a th:href="@{#}" th:text="${event.compliants_completed}" th:onclick="return callSetEventById( [[${event.mtmId}]],'/mtm/mayor/completed-complaint-list');" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Completed Complaint List"></a></td> 
+														<td class=""><a th:href="@{#}" th:text="${event.compliants_pending}" th:onclick="return callSetEventById( [[${event.mtmId}]],'/mtm/mayor/pending-complaint-list');" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Pending Complaint List"></a></td>
+						                            </tr>
+                                                 </tbody>
+                                                <tfoot class="thead-dark">
+	                                                <tr class="table-bordered">
+														<th class="text-center" colspan=3>Event Info</th>
+					 									<th class="text-center" colspan=4>Petitions</th>
+														<th class="text-center" colspan=3>Compliants</th>
+												    </tr>
+						                            <tr class="table-bordered">
+														<th class="text-center no-sort">S.No</th>
+														<th class="">Name</th>
+														<th class="">Date</th>
+														<th class="text-center">Total</th>
+														<th class="text-center">Completed</th>
+														<th class="text-center">Partially</th>
+														<th class="text-center">Pending</th>
+														<th class="text-center">Total</th>
+														<th class="text-center">Completed</th>
+														<th class="text-center">Pending</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/mtm/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/mtm/script :: script}"></script>
+        <script th:inline="javascript">
+			
+			$(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',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'excelHtml5',
+	                    text: 'Excel',
+	                    className: 'btn btn-secondary',
+	                    id: 'excelBtn',
+	                    title: 'Event Report',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn',
+	                    title: 'Event Report',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn',
+	                    title: 'Event Report',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+			            
+	                }
+	            ];
+				
+			    $('#assetDatatable').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],
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+		</script>
+    </body>
+</html>

src/main/resources/templates/modules/mtm/mayor/complaint-list.html

@@ -0,0 +1,208 @@
+<!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="fas fa-th-large bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Complaint List</h5>
+                                            <span>Makkalai Thedi Mayoral Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <nav class="breadcrumb-container" aria-label="breadcrumb">
+                                        <ol class="breadcrumb">
+                                            <li class="breadcrumb-item">
+                                                <a href="/index"><i class="ik ik-home"></i></a>
+                                            </li>
+                                            <li class="breadcrumb-item">Makkalai Thedi Mayoral </li>
+                                            <li class="breadcrumb-item">Mayor</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 th:replace="~{fragments/modules/mtm/event_search_form :: div}"></div>
+                                        <div>
+											<table id="assetDatatable" 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">Department(Officer)</th>
+						                                <th class="text-center" width="10%">Status</th>
+						                                <th class="text-center export-hidden" width="10%">Action</th>
+						                             </tr>
+                                                </theadclass="thead-dark">
+                                                <tbody>
+	                                                <tr th:each="petition, i : ${petitionlist}" class="${petitionlist}">
+						                                <td th:text="${i.count}">0</td>
+														<td th:text="${petition.mtmEventsPetitionId.petitionNumber}"></td>
+						 								<td th:text="${petition.mtmEventsPetitionId.petitionerName}" class="text-center"></td>  
+						                              	<td th:text="${petition.mtmEventsPetitionId.petitionerMobile}"></td>
+						 								<td th:utext="${petition.mtmEventsPetitionId.petitionerAddress + '<br/>' + petition.mtmEventsPetitionId.petitionerPincode}"></td>
+														<!--<td th:utext="${petition.mtmEventsPetitionId.petitionerPincode}"></td>-->
+														<td th:text="${petition.mtmComplaintTypes.complaintType}"></td>
+														<td th:text="${petition.officer_name}"></td>
+						                                <td class="text-center">
+															<span th:if="${petition.status == 'pending'}">
+																<a th:href="@{#}" th:onclick="return call_view_complaint([[${petition.mapId}]]);" data-toggle="tooltip" data-animation="true" data-placement="top" title="Update Status" class="text-danger">Pending</a>
+															</span>
+															<span th:if="${petition.status == 'close'}">
+																<a th:href="@{#}" th:onclick="return call_close_petition_details([[${petition.mapId}]]);" data-toggle="tooltip" data-animation="true" data-placement="top" title="Update Status" class="text-success">Close</a>
+															</span>
+						                                </td>
+						                                <td class="text-center">
+						 									<a th:href="@{#}" th:onclick="return callViewFiles( [[${petition.mtmEventsPetitionId.petitionId}]],[[${petition.mtmEventsPetitionId.petitionNumber}]]);" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Files"><i class="ik ik-file-text" style="font-size: 18px;"></i></a>
+															<a th:href="@{#}" th:onclick="return call_view_complaint([[${petition.mapId}]]);"
+															   data-toggle="tooltip" data-animation="true" data-placement="top" title="View ACK">
+															  <i class="far fa-thumbs-up" style="font-size: 18px;"></i>
+															</a>
+						                                </td>
+						                              </tr>
+                                                 </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">Department(Officer)</th>
+						                                <th class="text-center" width="10%">Status</th>
+						                                <th class="text-center" width="10%">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/mtm/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/mtm/script :: script}"></script>
+        <script th:inline="javascript">
+			//var qrAssetFeedbackApiUrl = "[[${qrAssetFeedbackApiUrl}]]";
+		   
+			$(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',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'excelHtml5',
+	                    text: 'Excel',
+	                    className: 'btn btn-secondary',
+	                    id: 'excelBtn',
+	                    title: 'Complaint List',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn',
+	                    title: 'Complaint List',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn',
+	                    title: 'Complaint List',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+			            
+	                }
+	            ];
+				
+			    $('#assetDatatable').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],
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+		</script>
+    </body>
+</html>

src/main/resources/templates/modules/mtm/mayor/completed-complaint-list.html

@@ -0,0 +1,208 @@
+<!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="fas fa-th-large bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Completed Complaint List</h5>
+                                            <span>Makkalai Thedi Mayoral Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <nav class="breadcrumb-container" aria-label="breadcrumb">
+                                        <ol class="breadcrumb">
+                                            <li class="breadcrumb-item">
+                                                <a href="/index"><i class="ik ik-home"></i></a>
+                                            </li>
+                                            <li class="breadcrumb-item">Makkalai Thedi Mayoral </li>
+                                            <li class="breadcrumb-item">Mayor</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 th:replace="~{fragments/modules/mtm/event_search_form :: div}"></div>
+                                        <div>
+											<table id="assetDatatable" 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">Department(Officer)</th>
+						                                <th class="text-center" width="10%">Status</th>
+						                                <th class="text-center export-hidden" width="10%">Action</th>
+						                             </tr>
+                                                </theadclass="thead-dark">
+                                                <tbody>
+	                                                <tr th:each="petition, i : ${petitionlist}" class="${petitionlist}">
+						                                <td th:text="${i.count}">0</td>
+														<td th:text="${petition.mtmEventsPetitionId.petitionNumber}"></td>
+						 								<td th:text="${petition.mtmEventsPetitionId.petitionerName}" class="text-center"></td>  
+						                              	<td th:text="${petition.mtmEventsPetitionId.petitionerMobile}"></td>
+						 								<td th:utext="${petition.mtmEventsPetitionId.petitionerAddress + '<br/>' + petition.mtmEventsPetitionId.petitionerPincode}"></td>
+														<!--<td th:utext="${petition.mtmEventsPetitionId.petitionerPincode}"></td>-->
+														<td th:text="${petition.mtmComplaintTypes.complaintType}"></td>
+														<td th:text="${petition.officer_name}"></td>
+						                                <td class="text-center">
+															<span th:if="${petition.status == 'pending'}">
+																<a th:href="@{#}" th:onclick="return call_view_complaint([[${petition.mapId}]]);" data-toggle="tooltip" data-animation="true" data-placement="top" title="Update Status" class="text-danger">Pending</a>
+															</span>
+															<span th:if="${petition.status == 'close'}">
+																<a th:href="@{#}" th:onclick="return call_close_petition_details([[${petition.mapId}]]);" data-toggle="tooltip" data-animation="true" data-placement="top" title="Update Status" class="text-success">Close</a>
+															</span>
+						                                </td>
+						                                <td class="text-center">
+						 									<a th:href="@{#}" th:onclick="return callViewFiles( [[${petition.mtmEventsPetitionId.petitionId}]],[[${petition.mtmEventsPetitionId.petitionNumber}]]);" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Files"><i class="ik ik-file-text" style="font-size: 18px;"></i></a>
+															<a th:href="@{#}" th:onclick="return call_view_complaint([[${petition.mapId}]]);"
+															   data-toggle="tooltip" data-animation="true" data-placement="top" title="View ACK">
+															  <i class="far fa-thumbs-up" style="font-size: 18px;"></i>
+															</a>
+						                                </td>
+						                              </tr>
+                                                 </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">Department(Officer)</th>
+						                                <th class="text-center" width="10%">Status</th>
+						                                <th class="text-center" width="10%">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/mtm/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/mtm/script :: script}"></script>
+        <script th:inline="javascript">
+			//var qrAssetFeedbackApiUrl = "[[${qrAssetFeedbackApiUrl}]]";
+		   
+			$(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',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'excelHtml5',
+	                    text: 'Excel',
+	                    className: 'btn btn-secondary',
+	                    id: 'excelBtn',
+	                    title: 'Completed Complaint List',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn',
+	                    title: 'Completed Complaint List',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn',
+	                    title: 'Completed Complaint List',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+			            
+	                }
+	            ];
+				
+			    $('#assetDatatable').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],
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+		</script>
+    </body>
+</html>

src/main/resources/templates/modules/mtm/mayor/completed-petition-list.html

@@ -0,0 +1,185 @@
+<!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="fas fa-th-large bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Completed Petition List</h5>
+                                            <span>Makkalai Thedi Mayoral Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <nav class="breadcrumb-container" aria-label="breadcrumb">
+                                        <ol class="breadcrumb">
+                                            <li class="breadcrumb-item">
+                                                <a href="/index"><i class="ik ik-home"></i></a>
+                                            </li>
+                                            <li class="breadcrumb-item">Makkalai Thedi Mayoral </li>
+                                            <li class="breadcrumb-item">Mayor</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Completed 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 th:replace="~{fragments/modules/mtm/event_search_form :: div}"></div>
+                                        <div>
+											<table id="assetDatatable" 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" width="10%">Status</th>
+						                                <th class="text-center" width="10%">Action</th>
+						                             </tr>
+                                                </theadclass="thead-dark">
+                                                <tbody>
+	                                                <tr th:each="petition, i : ${petitionlist}" class="${petitionlist}">
+						                                <td th:utext="${i.count}">0</td>
+														<td th:utext="${petition.petitionNumber}"></td>
+						 								<td th:utext="${petition.petitionerName}" class="text-center"></td>  
+						                              	<td th:text="${petition.petitionerMobile}"></td>
+						 								<td th:utext="${petition.petitionerAddress}"></td>
+														<td th:utext="${petition.petitionerPincode}"></td>
+														<td th:text="${petition.PetitionerComplaint_txt}"></td>
+														<td style="text-transform: capitalize;" class="text-center"><a href="#" th:onclick="return call_view_petition([[${petition.petitionNumber}]]);" th:utext="${petition.status}" class="text-warning"></a></td>
+						                                <td class="text-center">
+						 									<a th:href="@{#}" th:onclick="return callViewFiles( [[${petition.petitionId}]],[[${petition.petitionNumber}]] );" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Files" data-original-title="View Files"><i class="ik ik-file-text text-green" style="font-size: 18px;"></i></a>
+															<a th:href="@{/petition-ack/{petitionNumber}(petitionNumber=${petition.petitionNumber})}"
+															   data-toggle="tooltip" data-animation="true" data-placement="top" title="View ACK" data-original-title="View ACK">
+															  <i class="far fa-thumbs-up" style="font-size: 18px;"></i>
+															</a>
+						                                </td>
+						                            </tr>
+                                                 </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" width="10%">Status</th>
+						                                <th class="text-center" width="10%">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/mtm/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/mtm/script :: script}"></script>
+        <script th:inline="javascript">
+			//var qrAssetFeedbackApiUrl = "[[${qrAssetFeedbackApiUrl}]]";
+		   
+			$(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',
+	                    title: 'Completed Petition List'
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn',
+	                    title: 'Completed Petition List'
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn',
+	                    title: 'Completed Petition List'
+	                }
+	            ];
+				
+			    $('#assetDatatable').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],
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+		</script>
+    </body>
+</html>

src/main/resources/templates/modules/mtm/mayor/index.html

@@ -0,0 +1,238 @@
+<!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>Makkalai Thedi Mayor Module</h5>
+                                            <span>Makkalai Thedi Mayoral Petition and the Complaints Proceeding from It</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">Makkalai Thedi Mayor</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>Total Petitions</p>
+                                        <p class="mb-0 mt-15">View Petition 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>Petition Completed</p>
+                                        <p class="mb-0 mt-15">View Completed 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>Petition Partially Completed</p>
+                                        <p class="mb-0 mt-15">View Partially Completed<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>Petitions Pending</p>
+                                        <p class="mb-0 mt-15">View Pending List<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 th:replace="~{fragments/modules/mtm/script :: script}"></script>
+        <script src="/assets/node_modules/amcharts3/amcharts/amcharts.js"></script>
+        <script src="/assets/node_modules/amcharts3/amcharts/serial.js"></script>
+        <script src="/assets/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>

src/main/resources/templates/modules/mtm/mayor/partial-petition-list.html

@@ -0,0 +1,185 @@
+<!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="fas fa-th-large bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Partially Completed Petition List</h5>
+                                            <span>Makkalai Thedi Mayoral Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <nav class="breadcrumb-container" aria-label="breadcrumb">
+                                        <ol class="breadcrumb">
+                                            <li class="breadcrumb-item">
+                                                <a href="/index"><i class="ik ik-home"></i></a>
+                                            </li>
+                                            <li class="breadcrumb-item">Makkalai Thedi Mayoral </li>
+                                            <li class="breadcrumb-item">Mayor</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Partially Completed Petitions</li>
+                                        </ol>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <hr>
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="card">
+                                    
+                                    <div class="card-block">
+										<div th:replace="~{fragments/modules/mtm/event_search_form :: div}"></div>
+                                        <div>
+											<table id="assetDatatable" 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" width="10%">Status</th>
+						                                <th class="text-center" width="10%">Action</th>
+						                             </tr>
+                                                </theadclass="thead-dark">
+                                                <tbody>
+	                                                <tr th:each="petition, i : ${petitionlist}" class="${petitionlist}">
+						                                <td th:utext="${i.count}">0</td>
+														<td th:utext="${petition.petitionNumber}"></td>
+						 								<td th:utext="${petition.petitionerName}" class="text-center"></td>  
+						                              	<td th:text="${petition.petitionerMobile}"></td>
+						 								<td th:utext="${petition.petitionerAddress}"></td>
+														<td th:utext="${petition.petitionerPincode}"></td>
+														<td th:text="${petition.PetitionerComplaint_txt}"></td>
+														<td style="text-transform: capitalize;" class="text-center"><a href="#" th:onclick="return call_view_petition([[${petition.petitionNumber}]]);" th:utext="${petition.status}" class="text-warning"></a></td>
+						                                <td class="text-center">
+						 									<a th:href="@{#}" th:onclick="return callViewFiles( [[${petition.petitionId}]],[[${petition.petitionNumber}]] );" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Files" data-original-title="View Files"><i class="ik ik-file-text text-green" style="font-size: 18px;"></i></a>
+															<a th:href="@{/petition-ack/{petitionNumber}(petitionNumber=${petition.petitionNumber})}"
+															   data-toggle="tooltip" data-animation="true" data-placement="top" title="View ACK" data-original-title="View ACK">
+															  <i class="far fa-thumbs-up" style="font-size: 18px;"></i>
+															</a>
+						                                </td>
+						                            </tr>
+                                                 </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" width="10%">Status</th>
+						                                <th class="text-center" width="10%">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/mtm/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/mtm/script :: script}"></script>
+        <script th:inline="javascript">
+			//var qrAssetFeedbackApiUrl = "[[${qrAssetFeedbackApiUrl}]]";
+		   
+			$(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',
+	                    title: 'Partially Completed Petition List'
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn',
+	                    title: 'Partially Completed Petition List'
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn',
+	                    title: 'Partially Completed Petition List'
+	                }
+	            ];
+				
+			    $('#assetDatatable').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],
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+		</script>
+    </body>
+</html>

src/main/resources/templates/modules/mtm/mayor/pending-complaint-list.html

@@ -0,0 +1,208 @@
+<!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="fas fa-th-large bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Pending Complaint List</h5>
+                                            <span>Makkalai Thedi Mayoral Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <nav class="breadcrumb-container" aria-label="breadcrumb">
+                                        <ol class="breadcrumb">
+                                            <li class="breadcrumb-item">
+                                                <a href="/index"><i class="ik ik-home"></i></a>
+                                            </li>
+                                            <li class="breadcrumb-item">Makkalai Thedi Mayoral </li>
+                                            <li class="breadcrumb-item">Mayor</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 th:replace="~{fragments/modules/mtm/event_search_form :: div}"></div>
+                                        <div>
+											<table id="assetDatatable" 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">Department(Officer)</th>
+						                                <th class="text-center" width="10%">Status</th>
+						                                <th class="text-center export-hidden" width="10%">Action</th>
+						                             </tr>
+                                                </theadclass="thead-dark">
+                                                <tbody>
+	                                                <tr th:each="petition, i : ${petitionlist}" class="${petitionlist}">
+						                                <td th:text="${i.count}">0</td>
+														<td th:text="${petition.mtmEventsPetitionId.petitionNumber}"></td>
+						 								<td th:text="${petition.mtmEventsPetitionId.petitionerName}" class="text-center"></td>  
+						                              	<td th:text="${petition.mtmEventsPetitionId.petitionerMobile}"></td>
+						 								<td th:utext="${petition.mtmEventsPetitionId.petitionerAddress + '<br/>' + petition.mtmEventsPetitionId.petitionerPincode}"></td>
+														<!--<td th:utext="${petition.mtmEventsPetitionId.petitionerPincode}"></td>-->
+														<td th:text="${petition.mtmComplaintTypes.complaintType}"></td>
+														<td th:text="${petition.officer_name}"></td>
+						                                <td class="text-center">
+															<span th:if="${petition.status == 'pending'}">
+																<a th:href="@{#}" th:onclick="return call_view_complaint([[${petition.mapId}]]);" data-toggle="tooltip" data-animation="true" data-placement="top" title="Update Status" class="text-danger">Pending</a>
+															</span>
+															<span th:if="${petition.status == 'close'}">
+																<a th:href="@{#}" th:onclick="return call_close_petition_details([[${petition.mapId}]]);" data-toggle="tooltip" data-animation="true" data-placement="top" title="Update Status" class="text-success">Close</a>
+															</span>
+						                                </td>
+						                                <td class="text-center">
+						 									<a th:href="@{#}" th:onclick="return callViewFiles( [[${petition.mtmEventsPetitionId.petitionId}]],[[${petition.mtmEventsPetitionId.petitionNumber}]]);" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Files"><i class="ik ik-file-text" style="font-size: 18px;"></i></a>
+															<a th:href="@{#}" th:onclick="return call_view_complaint([[${petition.mapId}]]);"
+															   data-toggle="tooltip" data-animation="true" data-placement="top" title="View ACK">
+															  <i class="far fa-thumbs-up" style="font-size: 18px;"></i>
+															</a>
+						                                </td>
+						                              </tr>
+                                                 </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">Department(Officer)</th>
+						                                <th class="text-center" width="10%">Status</th>
+						                                <th class="text-center" width="10%">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/mtm/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/mtm/script :: script}"></script>
+        <script th:inline="javascript">
+			//var qrAssetFeedbackApiUrl = "[[${qrAssetFeedbackApiUrl}]]";
+		   
+			$(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',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'excelHtml5',
+	                    text: 'Excel',
+	                    className: 'btn btn-secondary',
+	                    id: 'excelBtn',
+	                    title: 'Pending Complaint List',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn',
+	                    title: 'Pending Complaint List',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn',
+	                    title: 'Pending Complaint List',
+	                    exportOptions: {
+			                columns: ':not(.export-hidden)', // Exclude columns with class 'export-hidden'
+			            },
+			            
+	                }
+	            ];
+				
+			    $('#assetDatatable').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],
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+		</script>
+    </body>
+</html>

src/main/resources/templates/modules/mtm/mayor/pending-petition-list.html

@@ -0,0 +1,185 @@
+<!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="fas fa-th-large bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Pending Petition List</h5>
+                                            <span>Makkalai Thedi Mayoral Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <nav class="breadcrumb-container" aria-label="breadcrumb">
+                                        <ol class="breadcrumb">
+                                            <li class="breadcrumb-item">
+                                                <a href="/index"><i class="ik ik-home"></i></a>
+                                            </li>
+                                            <li class="breadcrumb-item">Makkalai Thedi Mayoral </li>
+                                            <li class="breadcrumb-item">Mayor</li>
+                                            <li class="breadcrumb-item active" aria-current="page">Pending 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 th:replace="~{fragments/modules/mtm/event_search_form :: div}"></div>
+                                        <div>
+											<table id="assetDatatable" 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" width="10%">Status</th>
+						                                <th class="text-center" width="10%">Action</th>
+						                             </tr>
+                                                </theadclass="thead-dark">
+                                                <tbody>
+	                                                <tr th:each="petition, i : ${petitionlist}" class="${petitionlist}">
+						                                <td th:utext="${i.count}">0</td>
+														<td th:utext="${petition.petitionNumber}"></td>
+						 								<td th:utext="${petition.petitionerName}" class="text-center"></td>  
+						                              	<td th:text="${petition.petitionerMobile}"></td>
+						 								<td th:utext="${petition.petitionerAddress}"></td>
+														<td th:utext="${petition.petitionerPincode}"></td>
+														<td th:text="${petition.PetitionerComplaint_txt}"></td>
+														<td style="text-transform: capitalize;" class="text-center"><a href="#" th:onclick="return call_view_petition([[${petition.petitionNumber}]]);" th:utext="${petition.status}" class="text-warning"></a></td>
+						                                <td class="text-center">
+						 									<a th:href="@{#}" th:onclick="return callViewFiles( [[${petition.petitionId}]],[[${petition.petitionNumber}]] );" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Files" data-original-title="View Files"><i class="ik ik-file-text text-green" style="font-size: 18px;"></i></a>
+															<a th:href="@{/petition-ack/{petitionNumber}(petitionNumber=${petition.petitionNumber})}"
+															   data-toggle="tooltip" data-animation="true" data-placement="top" title="View ACK" data-original-title="View ACK">
+															  <i class="far fa-thumbs-up" style="font-size: 18px;"></i>
+															</a>
+						                                </td>
+						                            </tr>
+                                                 </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" width="10%">Status</th>
+						                                <th class="text-center" width="10%">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/mtm/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/mtm/script :: script}"></script>
+        <script th:inline="javascript">
+			//var qrAssetFeedbackApiUrl = "[[${qrAssetFeedbackApiUrl}]]";
+		   
+			$(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',
+	                    title: 'Pending Petition List'
+	                },
+	                {
+	                    extend: 'csvHtml5',
+	                    text: 'CSV',
+	                    className: 'btn btn-secondary',
+	                    id: 'csvBtn',
+	                    title: 'Pending Petition List'
+	                },
+	                {
+	                    extend: 'pdfHtml5',
+	                    text: 'PDF',
+	                    className: 'btn btn-secondary',
+	                    id: 'pdfBtn',
+	                    title: 'Pending Petition List'
+	                }
+	            ];
+				
+			    $('#assetDatatable').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],
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+		</script>
+    </body>
+</html>

src/main/resources/templates/modules/mtm/mayor/petition-list.html

@@ -0,0 +1,185 @@
+<!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="fas fa-th-large bg-blue"></i>
+                                        <div class="d-inline">
+                                            <h5>Petition List</h5>
+                                            <span>Makkalai Thedi Mayoral Module</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-lg-6">
+                                    <nav class="breadcrumb-container" aria-label="breadcrumb">
+                                        <ol class="breadcrumb">
+                                            <li class="breadcrumb-item">
+                                                <a href="/index"><i class="ik ik-home"></i></a>
+                                            </li>
+                                            <li class="breadcrumb-item">Makkalai Thedi Mayoral </li>
+                                            <li class="breadcrumb-item">Mayor</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 th:replace="~{fragments/modules/mtm/event_search_form :: div}"></div>
+                                        <div>
+											<table id="assetDatatable" 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" width="10%">Status</th>
+						                                <th class="text-center" width="10%">Action</th>
+						                             </tr>
+                                                </theadclass="thead-dark">
+                                                <tbody>
+	                                                <tr th:each="petition, i : ${petitionlist}" class="${petitionlist}">
+						                                <td th:utext="${i.count}">0</td>
+														<td th:utext="${petition.petitionNumber}"></td>
+						 								<td th:utext="${petition.petitionerName}" class="text-center"></td>  
+						                              	<td th:text="${petition.petitionerMobile}"></td>
+						 								<td th:utext="${petition.petitionerAddress}"></td>
+														<td th:utext="${petition.petitionerPincode}"></td>
+														<td th:text="${petition.PetitionerComplaint_txt}"></td>
+														<td style="text-transform: capitalize;" class="text-center"><a href="#" th:onclick="return call_view_petition([[${petition.petitionNumber}]]);" th:utext="${petition.status}" class="text-warning"></a></td>
+						                                <td class="text-center">
+						 									<a th:href="@{#}" th:onclick="return callViewFiles( [[${petition.petitionId}]],[[${petition.petitionNumber}]] );" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Files" data-original-title="View Files"><i class="ik ik-file-text text-green" style="font-size: 18px;"></i></a>
+															<a th:href="@{/petition-ack/{petitionNumber}(petitionNumber=${petition.petitionNumber})}"
+															   data-toggle="tooltip" data-animation="true" data-placement="top" title="View ACK" data-original-title="View ACK">
+															  <i class="far fa-thumbs-up" style="font-size: 18px;"></i>
+															</a>
+						                                </td>
+						                            </tr>
+                                                 </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" width="10%">Status</th>
+						                                <th class="text-center" width="10%">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/mtm/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/mtm/script :: script}"></script>
+        <script th:inline="javascript">
+			//var qrAssetFeedbackApiUrl = "[[${qrAssetFeedbackApiUrl}]]";
+		   
+			$(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',
+	                    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'
+	                }
+	            ];
+				
+			    $('#assetDatatable').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],
+			        responsive: true,
+			        searching: false,
+			        select: false,
+			        processing: false,
+			    } );
+			} );
+		</script>
+    </body>
+</html>

src/main/resources/templates/modules/mtm/officer/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>Makkalai Thedi Mayor Module</h5>
+                                            <span>Makkalai Thedi Mayoral Petition and the Complaints Proceeding from It</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">Makkalai Thedi Mayor</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>Total Petitions</p>
+                                        <p class="mb-0 mt-15">View Petition 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>Petition Completed</p>
+                                        <p class="mb-0 mt-15">View Completed 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>Petition Partially Completed</p>
+                                        <p class="mb-0 mt-15">View Partially Completed<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>Petitions Pending</p>
+                                        <p class="mb-0 mt-15">View Pending List<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="/assets/node_modules/amcharts3/amcharts/amcharts.js"></script>
+        <script src="/assets/node_modules/amcharts3/amcharts/serial.js"></script>
+        <script src="/assets/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>