Enhancement for all three reports under child survey

gcc_officer_portal/src/main/java/in/gov/chennaicorporation/gccoffice/childrensurvey/Service/ChildrenSurveyService.java

@@ -190,7 +190,8 @@ public class ChildrenSurveyService {
 				    cqm.q_english,
 				    cqm.question_type,
 				    cqm.master_table_name,
-				        cqm.field_name
+				    cqm.field_name, cqm.Flag
+
 
 				FROM child_survey_response csr
 
@@ -208,8 +209,22 @@ public class ChildrenSurveyService {
 
 		Map<String, Object> finalResponse = new LinkedHashMap<>();
 
+		Map<String, Object> personalInfo = new LinkedHashMap<>();
+		Map<String, Object> locationInfo = new LinkedHashMap<>();
+		Map<String, Object> educationInfo = new LinkedHashMap<>();
+		Map<String, Object> documentInfo = new LinkedHashMap<>();
+		Map<String, Object> healthInfo = new LinkedHashMap<>();
+		Map<String, Object> vulnerabilityInfo = new LinkedHashMap<>();
+
 		for (Map<String, Object> row : responseList) {
 
+			Integer qid = row.get("qid") != null
+					? Integer.parseInt(row.get("qid").toString())
+					: 0;
+			String flag = row.get("Flag") != null
+					? row.get("Flag").toString()
+					: "";
+
 			String question = row.get("q_english") != null
 					? row.get("q_english").toString()
 					: "";
@@ -231,15 +246,88 @@ public class ChildrenSurveyService {
 					masterTable,
 					rawAnswer);
 
-			finalResponse.put(question, finalAnswer);
+			// PERSONAL INFORMATION
+			/*
+			 * if (qid >= 6 && qid <= 24) {
+			 * 
+			 * personalInfo.put(question, finalAnswer);
+			 * }
+			 * 
+			 * // LOCATION DETAILS
+			 * else if (qid >= 1 && qid <= 5) {
+			 * 
+			 * locationInfo.put(question, finalAnswer);
+			 * }
+			 * 
+			 * // EDUCATION DETAILS
+			 * else if (qid >= 25 && qid <= 38) {
+			 * 
+			 * educationInfo.put(question, finalAnswer);
+			 * }
+			 * 
+			 * // HEALTH
+			 * else if (qid >= 39 && qid <= 40) {
+			 * 
+			 * healthInfo.put(question, finalAnswer);
+			 * }
+			 * 
+			 * // DOCUMENT
+			 * else if (qid >= 41 && qid <= 47) {
+			 * 
+			 * documentInfo.put(question, finalAnswer);
+			 * }
+			 * 
+			 * // VULNERABILITY
+			 * else if (qid >= 48 && qid <= 52) {
+			 * 
+			 * vulnerabilityInfo.put(question, finalAnswer);
+			 * }
+			 */
+			if ("A".equalsIgnoreCase(flag)) {
+
+				locationInfo.put(question, finalAnswer);
 			}
 
-		return finalResponse;
+			// PERSONAL INFORMATION
+			else if ("P".equalsIgnoreCase(flag)) {
+
+				personalInfo.put(question, finalAnswer);
 			}
 
-	// =========================================
-	// ANSWER RESOLVER
-	// =========================================
+			// EDUCATION DETAILS
+			else if ("E".equalsIgnoreCase(flag)) {
+
+				educationInfo.put(question, finalAnswer);
+			}
+
+			// HEALTH DETAILS
+			else if ("H".equalsIgnoreCase(flag)) {
+
+				healthInfo.put(question, finalAnswer);
+			}
+
+			// DOCUMENT DETAILS
+			else if ("D".equalsIgnoreCase(flag)) {
+
+				documentInfo.put(question, finalAnswer);
+			}
+
+			// VULNERABILITY DETAILS
+			else if ("V".equalsIgnoreCase(flag)) {
+
+				vulnerabilityInfo.put(question, finalAnswer);
+			}
+		}
+
+		finalResponse.put("personalInformation", personalInfo);
+		finalResponse.put("locationDetails", locationInfo);
+		finalResponse.put("educationDetails", educationInfo);
+		finalResponse.put("healthDetails", healthInfo);
+		finalResponse.put("documentDetails", documentInfo);
+		finalResponse.put("vulnerabilityDetails", vulnerabilityInfo);
+
+		return finalResponse;
+	}
 
 	private String resolveAnswer(
 			String questionType,
@@ -248,21 +336,33 @@ public class ChildrenSurveyService {
 
 		try {
 
-			if (rawAnswer == null || rawAnswer.isEmpty()) {
+			if (rawAnswer == null || rawAnswer.trim().isEmpty()) {
 				return "";
 			}
 
-			// TEXT
+			// DIRECT TEXT TYPES
 			if ("text".equalsIgnoreCase(questionType)
 					|| "textarea".equalsIgnoreCase(questionType)
-					|| "number".equalsIgnoreCase(questionType)) {
+					|| "number".equalsIgnoreCase(questionType)
+					|| "number_text".equalsIgnoreCase(questionType)
+					|| "number_mobile".equalsIgnoreCase(questionType)
+					|| "number_aadhar".equalsIgnoreCase(questionType)
+					|| "date".equalsIgnoreCase(questionType)) {
 
 				return rawAnswer;
 			}
 
+			// CHECK WHETHER VALUE IS NUMERIC
+			boolean isNumeric = rawAnswer.matches("\\d+(,\\d+)*");
+
 			// RADIO
 			if ("radio".equalsIgnoreCase(questionType)) {
 
+				// Already stored as text
+				if (!isNumeric) {
+					return rawAnswer;
+				}
+
 				String sql = """
 						SELECT english_name
 						FROM child_survey_answer_master
@@ -278,6 +378,11 @@ public class ChildrenSurveyService {
 			// MULTICHECK
 			if ("multicheck".equalsIgnoreCase(questionType)) {
 
+				// Already stored as text
+				if (!isNumeric) {
+					return rawAnswer;
+				}
+
 				String[] ids = rawAnswer.split(",");
 
 				List<String> values = new ArrayList<>();
@@ -305,6 +410,11 @@ public class ChildrenSurveyService {
 			if (masterTable != null
 					&& !masterTable.isEmpty()) {
 
+				// Already stored as text
+				if (!isNumeric) {
+					return rawAnswer;
+				}
+
 				String dynamicSql = "SELECT english_name FROM "
 						+ masterTable
 						+ " WHERE id = ?";
@@ -323,6 +433,156 @@ public class ChildrenSurveyService {
 		return rawAnswer;
 	}
 
+	/*
+	 * public Map<String, Object> getSurveyDetails(String surveyId) {
+	 * 
+	 * String sql = """
+	 * SELECT
+	 * csr.qid,
+	 * csr.answer,
+	 * csr.others_answer,
+	 * csr.cby,
+	 * csr.survey_id,
+	 * 
+	 * cqm.q_english,
+	 * cqm.question_type,
+	 * cqm.master_table_name,
+	 * cqm.field_name
+	 * 
+	 * FROM child_survey_response csr
+	 * 
+	 * INNER JOIN child_survey_questions_master cqm
+	 * ON csr.qid = cqm.qid
+	 * 
+	 * WHERE csr.isactive = 1
+	 * AND csr.isdelete = 0
+	 * AND csr.survey_id = ?
+	 * 
+	 * ORDER BY cqm.orderby
+	 * """;
+	 * 
+	 * List<Map<String, Object>> responseList = jdbcTemplate.queryForList(sql,
+	 * surveyId);
+	 * 
+	 * Map<String, Object> finalResponse = new LinkedHashMap<>();
+	 * 
+	 * for (Map<String, Object> row : responseList) {
+	 * 
+	 * String question = row.get("q_english") != null
+	 * ? row.get("q_english").toString()
+	 * : "";
+	 * 
+	 * String questionType = row.get("question_type") != null
+	 * ? row.get("question_type").toString()
+	 * : "";
+	 * 
+	 * String masterTable = row.get("master_table_name") != null
+	 * ? row.get("master_table_name").toString()
+	 * : "";
+	 * 
+	 * String rawAnswer = row.get("answer") != null
+	 * ? row.get("answer").toString()
+	 * : "";
+	 * 
+	 * String finalAnswer = resolveAnswer(
+	 * questionType,
+	 * masterTable,
+	 * rawAnswer);
+	 * 
+	 * finalResponse.put(question, finalAnswer);
+	 * }
+	 * 
+	 * return finalResponse;
+	 * }
+	 */
+
+	// =========================================
+	// ANSWER RESOLVER
+	// =========================================
+
+	/*
+	 * private String resolveAnswer(
+	 * String questionType,
+	 * String masterTable,
+	 * String rawAnswer) {
+	 * 
+	 * try {
+	 * 
+	 * if (rawAnswer == null || rawAnswer.isEmpty()) {
+	 * return "";
+	 * }
+	 * 
+	 * // TEXT
+	 * if ("text".equalsIgnoreCase(questionType)
+	 * || "textarea".equalsIgnoreCase(questionType)
+	 * || "number".equalsIgnoreCase(questionType)) {
+	 * 
+	 * return rawAnswer;
+	 * }
+	 * 
+	 * // RADIO
+	 * if ("radio".equalsIgnoreCase(questionType)) {
+	 * 
+	 * String sql = """
+	 * SELECT english_name
+	 * FROM child_survey_answer_master
+	 * WHERE aid = ?
+	 * """;
+	 * 
+	 * return jdbcTemplate.queryForObject(
+	 * sql,
+	 * String.class,
+	 * Integer.parseInt(rawAnswer));
+	 * }
+	 * 
+	 * // MULTICHECK
+	 * if ("multicheck".equalsIgnoreCase(questionType)) {
+	 * 
+	 * String[] ids = rawAnswer.split(",");
+	 * 
+	 * List<String> values = new ArrayList<>();
+	 * 
+	 * String sql = """
+	 * SELECT english_name
+	 * FROM child_survey_answer_master
+	 * WHERE aid = ?
+	 * """;
+	 * 
+	 * for (String id : ids) {
+	 * 
+	 * String value = jdbcTemplate.queryForObject(
+	 * sql,
+	 * String.class,
+	 * Integer.parseInt(id.trim()));
+	 * 
+	 * values.add(value);
+	 * }
+	 * 
+	 * return String.join(", ", values);
+	 * }
+	 * 
+	 * // DROPDOWN
+	 * if (masterTable != null
+	 * && !masterTable.isEmpty()) {
+	 * 
+	 * String dynamicSql = "SELECT english_name FROM "
+	 * + masterTable
+	 * + " WHERE id = ?";
+	 * 
+	 * return jdbcTemplate.queryForObject(
+	 * dynamicSql,
+	 * String.class,
+	 * Integer.parseInt(rawAnswer));
+	 * }
+	 * 
+	 * } catch (Exception e) {
+	 * 
+	 * e.printStackTrace();
+	 * }
+	 * 
+	 * return rawAnswer;
+	 * }
+	 */
 	public List<Map<String, Object>> getSurveyorsList(
 			String name,
 			String area,

gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/childlist.html

@@ -13,6 +13,8 @@
 			border-radius: 10px;
 		}
 
+
+
 		#surveyModal .modal-header {
 			background-color: #f8f9fa;
 			border-bottom: 2px solid #007bff;
@@ -74,6 +76,99 @@
 				padding: 20px;
 			}
 		}
+
+		#surveyModal .modal-dialog {
+			max-width: 75%;
+		}
+
+		#surveyModal .modal-content {
+			border-radius: 12px;
+			overflow: hidden;
+		}
+
+		#surveyModal .modal-header {
+			background: #44506A;
+			color: white;
+			border: none;
+		}
+
+		#surveyModal .modal-title {
+			font-size: 32px;
+			font-weight: 600;
+		}
+
+		#surveyModal .modal-body {
+			padding: 30px;
+			background: #f7f8fa;
+		}
+
+
+		.detail-card {
+			background: #fff;
+			border-radius: 12px;
+			padding: 14px 18px;
+			border: 1px solid #e9ecef;
+			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+			height: 100%;
+		}
+
+		.detail-label {
+			font-size: 13px;
+			font-weight: 700;
+			color: #7f8c8d;
+			text-transform: uppercase;
+			line-height: 1.5;
+		}
+
+		.detail-value {
+			font-size: 16px;
+			font-weight: 600;
+			color: #2c3e50;
+			line-height: 1.6;
+			word-break: break-word;
+		}
+
+		.section-heading {
+			font-size: 24px;
+			font-weight: 700;
+			margin-bottom: 20px;
+			padding-bottom: 10px;
+			border-bottom: 2px solid #e5e7eb;
+			color: #2c3e50;
+		}
+
+
+
+		.section-heading {
+			font-size: 20px;
+			font-weight: 700;
+			margin-bottom: 20px;
+			padding-bottom: 10px;
+			border-bottom: 2px solid #e74c3c;
+			color: #2c3e50;
+		}
+
+		.detail-card {
+			background: white;
+			border-radius: 10px;
+			padding: 15px 18px;
+			height: 100%;
+			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+			border: 1px solid #edf0f2;
+		}
+
+
+
+		@media(max-width:768px) {
+
+			#surveyModal .modal-dialog {
+				max-width: 95%;
+			}
+
+			.detail-card {
+				margin-bottom: 10px;
+			}
+		}
 	</style>
 </head>
 
@@ -127,13 +222,13 @@
 							</div>
 
 							<!-- RIGHT SIDE (DATE FILTER) -->
-							<div class="col-lg-6 text-end">
+							<!--<div class="col-lg-6 text-end">
 								<label class="form-label fw-semibold me-2">From Date:</label>
 								<input type="date" id="fromDate" class="form-control d-inline-block"
 									style="width:150px;">
 								<label class="form-label fw-semibold me-2">To Date:</label>
 								<input type="date" id="toDate" class="form-control d-inline-block" style="width:150px;">
-							</div>
+							</div>-->
 
 						</div>
 
@@ -155,7 +250,63 @@
 					<hr>
 
 					<!-- Filters Section -->
-					<div class="row mb-3">
+					<div class="row mb-3 align-items-end">
+
+						<div class="col-md-2">
+							<select id="gender" class="form-control">
+								<option value="">Gender</option>
+							</select>
+						</div>
+
+						<div class="col-md-2">
+							<select id="age" class="form-control">
+								<option value="">Age</option>
+								<option value="4-8">4-8</option>
+								<option value="9-13">9-13</option>
+								<option value="14-18">14-18</option>
+							</select>
+						</div>
+
+						<div class="col-md-2">
+							<select id="area" class="form-control">
+								<option value="">Area Wise</option>
+							</select>
+						</div>
+
+						<div class="col-md-2">
+							<select id="education" class="form-control">
+								<option value="">Education</option>
+							</select>
+						</div>
+
+						<div class="col-md-2">
+							<label class="fw-semibold">From Date</label>
+							<input type="date" id="fromDate" class="form-control">
+						</div>
+
+						<div class="col-md-2">
+							<label class="fw-semibold">To Date</label>
+							<input type="date" id="toDate" class="form-control">
+						</div>
+
+					</div>
+
+					<div class="row mb-3 justify-content-center">
+
+						<div class="col-md-2 text-center">
+							<button class="btn btn-primary w-100" onclick="fetchSurveyData()">
+								Search
+							</button>
+						</div>
+
+						<div class="col-md-2 text-center">
+							<button class="btn btn-secondary w-100" onclick="resetFilters()">
+								Reset
+							</button>
+						</div>
+
+					</div>
+					<!--<div class="row mb-3">
 
 
 
@@ -185,10 +336,23 @@
 								<option value="">Education</option>
 							</select>
 						</div>
+						<div class="col-lg-6 text-end">
+							<label class="form-label fw-semibold me-2">From Date:</label>
+							<input type="date" id="fromDate" class="form-control d-inline-block" style="width:150px;">
+							<label class="form-label fw-semibold me-2">To Date:</label>
+							<input type="date" id="toDate" class="form-control d-inline-block" style="width:150px;">
+						</div>
+					</div>
+					<div class="row mb-3 justify-content-center">
+
+						<div class="col-md-2 text-center">
+							<button class="btn btn-primary w-100 " onclick="fetchSurveyData()">Search</button>
 
-						<div class="col-md-2">
-							<button class="btn btn-primary w-100" onclick="fetchSurveyData()">Search</button>
 						</div>
+						<div class="col-md-2 text-center">
+							<button class="btn btn-secondary w-100 " onclick="resetFilters()">Reset</button>
+						</div>
+					</div>-->
 
 				</div>
 				<!-- Salary Report Table -->
@@ -338,12 +502,37 @@
 
 			// 🔹 Load dropdowns when page loads
 			loadDropdowns();
-			fetchSurveyData();
+			fetchSurveyData(true);
 
 			// 🔹 (Optional) Load table initially
 			// fetchSurveyData();
+			// Restrict To Date based on From Date
+			$("#fromDate").on("change", function () {
+
+				let fromDate = $(this).val();
 
+				// Set minimum selectable date for To Date
+				$("#toDate").attr("min", fromDate);
+
+				// If current To Date is less than From Date, clear it
+				if ($("#toDate").val() < fromDate) {
+					$("#toDate").val('');
+				}
 			});
+
+		});
+		function resetFilters() {
+			$("#searchName").val('');
+			$("#gender").val('');
+			$("#age").val('');
+			$("#area").val('');
+			$("#education").val('');
+			$("#fromDate").val('');
+			$("#toDate").val('');
+
+			// Re-load table with all data
+			fetchSurveyData(true);
+		}
 		function viewSurvey(surveyId) {
 
 
@@ -351,9 +540,128 @@
 				url: "/gcc/api/children-survey/details",
 				type: "GET",
 				data: { surveyId: surveyId },
-
 				success: function (data) {
 
+					let html = "";
+					function buildSection(title, sectionData) {
+
+						let sectionHtml = `
+    
+	<div class="survey-section mb-5">
+
+		<h5 class="section-heading">
+			${title}
+		</h5>
+
+		<div class="row">
+	`;
+
+						let keys = Object.keys(sectionData);
+
+						keys.forEach(function (key) {
+
+							sectionHtml += `
+
+			<div class="col-md-6 mb-3">
+
+				<div class="detail-card">
+
+					<div class="detail-label">
+						${key}
+					</div>
+
+					<div class="detail-value">
+						${sectionData[key] || '-'}
+					</div>
+
+				</div>
+
+			</div>
+		`;
+
+						});
+
+						sectionHtml += `
+        </div>
+    </div>
+    `;
+
+						return sectionHtml;
+					}
+
+					/*function buildSection(title, sectionData) {
+			
+						let sectionHtml = `
+			<div class="mb-4">
+			
+				<h5 class="fw-bold border-bottom pb-2 mb-3">
+					${title}
+				</h5>
+			`;
+			
+						Object.keys(sectionData).forEach(function (key) {
+			
+							sectionHtml += `
+				<div class="row py-2 border-bottom">
+			
+					<div class="col-md-5 fw-bold">
+						${key}
+					</div>
+			
+					<div class="col-md-7">
+						: ${sectionData[key] || ''}
+					</div>
+			
+				</div>
+			`;
+						});
+			
+						sectionHtml += `</div>`;
+			
+						return sectionHtml;
+					}*/
+
+					html += buildSection(
+						"Personal Information",
+						data.personalInformation
+					);
+
+					html += buildSection(
+						"Location Details",
+						data.locationDetails
+					);
+
+					html += buildSection(
+						"Education Details",
+						data.educationDetails
+					);
+
+					html += buildSection(
+						"Health Details",
+						data.healthDetails
+					);
+
+					html += buildSection(
+						"Document Details",
+						data.documentDetails
+					);
+
+					html += buildSection(
+						"Vulnerability Details",
+						data.vulnerabilityDetails
+					);
+
+					$("#surveyDetails").html(html);
+
+					let modal = new bootstrap.Modal(
+						document.getElementById('surveyModal')
+					);
+
+					modal.show();
+				}
+
+				/*success: function (data) {
+
 					let html = "";
 
 					Object.keys(data).forEach(function (key) {
@@ -375,10 +683,62 @@
 					// Show modal
 					let modal = new bootstrap.Modal(document.getElementById('surveyModal'));
 					modal.show();
+				}*/
+			});
 		}
+		function fetchSurveyData(isInitialLoad = false) {
+
+
+			var gender = $("#gender").val();
+			var age = $("#age").val();
+			var area = $("#area").val();
+			var education = $("#education").val();
+			var fromDate = $("#fromDate").val();
+			var toDate = $("#toDate").val();
+
+			// SHOW SWAL ONLY WHEN SEARCH BUTTON CLICKED
+			if (!isInitialLoad &&
+
+				gender == '' &&
+				age == '' &&
+				area == '' &&
+				education == '' &&
+				fromDate == '' &&
+				toDate == '') {
+
+				Swal.fire({
+					icon: 'warning',
+					title: 'Warning',
+					text: 'Please select at least one filter.',
+					confirmButtonColor: '#3085d6'
 				});
+
+				return;
+			}
+			if (fromDate != '') {
+				if (toDate == '') {
+					Swal.fire({
+						icon: 'warning',
+						title: 'Warning',
+						text: 'Please select both from date and to date.',
+						confirmButtonColor: '#3085d6'
+					});
+					return;
+				}
+			}
+			if (toDate != '') {
+				if (fromDate == '') {
+					Swal.fire({
+						icon: 'warning',
+						title: 'Warning',
+						text: 'Please select both from date and to date.',
+						confirmButtonColor: '#3085d6'
+					});
+					return;
 				}
-		function fetchSurveyData() {
+			}
+
+
 
 			$.ajax({
 				url: "/gcc/api/children-survey/list",
@@ -450,6 +810,8 @@
 						],
 						responsive: true,
 						destroy: true
+
+
 					});
 				}
 			});

gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/surveylist.html

@@ -111,14 +111,14 @@
 							</div>
 
 							<!-- RIGHT SIDE (DATE FILTER) -->
-							<div class="col-lg-6 text-end">
+							<!--<div class="col-lg-6 text-end">
 								<label class="form-label fw-semibold me-2">From Date:</label>
 								<input type="date" id="fromDate" class="form-control d-inline-block"
 									style="width:150px;">
 
 								<label class="form-label fw-semibold me-2">To Date:</label>
 								<input type="date" id="toDate" class="form-control d-inline-block" style="width:150px;">
-							</div>
+							</div>-->
 
 						</div>
 
@@ -151,12 +151,22 @@
 								<option value="">Area Wise</option>
 							</select>
 						</div>
+						<div class="col-md-6">
+							<label class="form-label fw-semibold me-2">From Date:</label>
+							<input type="date" id="fromDate" class="form-control d-inline-block" style="width:150px;">
+
+							<label class="form-label fw-semibold me-2">To Date:</label>
+							<input type="date" id="toDate" class="form-control d-inline-block" style="width:150px;">
+						</div>
 
 
 
 						<div class="col-md-2">
 							<button class="btn btn-primary w-100" onclick="loadSurveyors()">Search</button>
 						</div>
+						<div class="col-md-2">
+							<button class="btn btn-secondary w-100" onclick="resetFilters()">Reset</button>
+						</div>
 
 					</div>
 					<!-- Salary Report Table -->
@@ -413,12 +423,147 @@
 			// 🔹 Load dropdowns when page loads
 			loadDropdowns();
 			//fetchSurveyData();
-			loadSurveyors();
+			loadSurveyors(true);
+
 
 			// 🔹 (Optional) Load table initially
 			// fetchSurveyData();
+			// Restrict To Date based on From Date
+			$("#fromDate").on("change", function () {
 
+				let fromDate = $(this).val();
+
+				// Set minimum selectable date for To Date
+				$("#toDate").attr("min", fromDate);
+
+				// If current To Date is less than From Date, clear it
+				if ($("#toDate").val() < fromDate) {
+					$("#toDate").val('');
+				}
 			});
+
+		});
+		function resetFilters() {
+
+			// reset all dropdowns
+			$("#zone").val('');
+			$("#area").val('');
+
+			// reset date
+			$("#fromDate").val('');
+			$("#toDate").val('');
+
+			// reload table
+			loadSurveyors(true);
+		}
+		//using flag
+		function viewChildSurvey(surveyId) {
+
+			$.ajax({
+
+				url: "/gcc/api/children-survey/details",
+
+				type: "GET",
+
+				data: {
+					surveyId: surveyId
+				},
+
+				success: function (data) {
+
+					let html = "";
+
+					function buildSection(title, sectionData) {
+
+						let sectionHtml = `
+
+                    <div class="survey-section mb-5">
+
+                        <h5 class="section-heading">
+                            ${title}
+                        </h5>
+
+                        <div class="row">
+                `;
+
+						Object.keys(sectionData).forEach(function (key) {
+
+							sectionHtml += `
+
+                        <div class="col-md-6 mb-3">
+
+                            <div class="detail-card">
+
+                                <div class="detail-label">
+                                    ${key}
+                                </div>
+
+                                <div class="detail-value">
+                                    ${sectionData[key] || '-'}
+                                </div>
+
+                            </div>
+
+                        </div>
+                    `;
+						});
+
+						sectionHtml += `
+                        </div>
+
+                    </div>
+                `;
+
+						return sectionHtml;
+					}
+
+					html += buildSection(
+						"Personal Information",
+						data.personalInformation
+					);
+
+					html += buildSection(
+						"Location Details",
+						data.locationDetails
+					);
+
+					html += buildSection(
+						"Education Details",
+						data.educationDetails
+					);
+
+					html += buildSection(
+						"Health Details",
+						data.healthDetails
+					);
+
+					html += buildSection(
+						"Document Details",
+						data.documentDetails
+					);
+
+					html += buildSection(
+						"Vulnerability Details",
+						data.vulnerabilityDetails
+					);
+
+					$("#surveyDetails").html(html);
+
+					let modal = new bootstrap.Modal(
+						document.getElementById('surveyModal')
+					);
+
+					modal.show();
+				},
+
+				error: function (xhr) {
+
+					console.log(xhr);
+
+					alert("Unable to fetch survey details");
+				}
+			});
+		}
 		function viewSurvey1(loginId, locationId, surveyDate) {
 
 			if ($.fn.DataTable.isDataTable('#surveyTable')) {
@@ -514,7 +659,8 @@
 				}
 			});
 		}
-		function viewChildSurvey(surveyId) {
+		//static qid not flag
+		/*function viewChildSurvey(surveyId) {
 
 			$.ajax({
 
@@ -564,10 +710,52 @@
 					alert("Unable to fetch survey details");
 				}
 			});
-		}
+		}*/
+
+
+		function loadSurveyors(isInitialLoad = false) {
+			var area = $("#area").val();
+			var fromDate = $("#fromDate").val();
+			var toDate = $("#toDate").val();
+
+			// SHOW SWAL ONLY WHEN SEARCH BUTTON CLICKED
+			if (!isInitialLoad &&
+				area == '' &&
+				fromDate == '' &&
+				toDate == '') {
 
+				Swal.fire({
+					icon: 'warning',
+					title: 'Warning',
+					text: 'Please select at least one filter.',
+					confirmButtonColor: '#3085d6'
+				});
+
+				return;
+			}
 
-		function loadSurveyors() {
+			if (fromDate != '') {
+				if (toDate == '') {
+					Swal.fire({
+						icon: 'warning',
+						title: 'Warning',
+						text: 'Please select both from date and to date.',
+						confirmButtonColor: '#3085d6'
+					});
+					return;
+				}
+			}
+			if (toDate != '') {
+				if (fromDate == '') {
+					Swal.fire({
+						icon: 'warning',
+						title: 'Warning',
+						text: 'Please select both from date and to date.',
+						confirmButtonColor: '#3085d6'
+					});
+					return;
+				}
+			}
 
 			if ($.fn.DataTable.isDataTable('#surveyorTable')) {
 				$('#surveyorTable').DataTable().destroy();

gcc_officer_portal/src/main/resources/templates/modules/childrensurvey/surveyorsreports.html

@@ -84,15 +84,18 @@
 			background: #fff;
 			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
 			min-height: 160px;
-			height: 160px;
+			/*height: 160px;*/
 		}
 
-		.dashboard-card .card-body {
+		/*.dashboard-card .card-body {
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
 			align-items: center;
 			height: 100%;
+		}*/
+		.dashboard-card .card-body {
+			padding: 20px;
 		}
 
 		.dashboard-card .card-title {
@@ -111,6 +114,61 @@
 			font-weight: 700;
 			margin-top: 10px;
 		}
+
+		/* AREA CARD SCROLL */
+
+		/* AREA WISE FIXED SCROLL CARD */
+
+		/* AREA WISE CARD FIXED HEIGHT */
+
+		/*.area-scroll-card {
+			height: 500px !important;
+			overflow: hidden !important;
+		}
+
+	
+
+		.area-scroll-card .card-body {
+			height: 100% !important;
+			overflow-y: auto !important;
+			overflow-x: hidden !important;
+			padding-right: 10px;
+		}
+
+		
+
+		.area-scroll-card .card-body::-webkit-scrollbar {
+			width: 6px;
+		}
+
+		.area-scroll-card .card-body::-webkit-scrollbar-thumb {
+			background: #bdbdbd;
+			border-radius: 10px;
+		}
+
+		.area-scroll-card {
+			height: 500px;
+		}
+
+		#areaWiseDiv {
+			max-height: 380px;
+			overflow-y: auto;
+			overflow-x: hidden;
+			padding-right: 8px;
+		}
+
+		
+
+		#areaWiseDiv::-webkit-scrollbar {
+			width: 6px;
+		}
+
+		#areaWiseDiv::-webkit-scrollbar-thumb {
+			background: #bdbdbd;
+			border-radius: 10px;
+		}
+
+		*/
 	</style>
 </head>
 
@@ -174,7 +232,7 @@
 						</div>
 						<!-- TOP COUNTS -->
 
-						<div class="row">
+						<!--	<div class="row">
 
 							<div class="col-lg-2 col-md-4 col-sm-6 mb-4 d-flex">
 
@@ -276,6 +334,79 @@
 
 							</div>
 
+						</div>-->
+						<div class="row">
+
+							<div class="col mb-4 d-flex">
+								<div class="card dashboard-card text-center w-100">
+									<div class="card-body">
+										<h6 class="card-title">
+											Total Surveyed Children
+										</h6>
+
+										<h1 id="totalChildren" class="dashboard-count">
+											0
+										</h1>
+									</div>
+								</div>
+							</div>
+
+							<div class="col mb-4 d-flex">
+								<div class="card dashboard-card text-center w-100">
+									<div class="card-body">
+										<h6 class="card-title">
+											Areas Covered
+										</h6>
+
+										<h1 id="areasCovered" class="dashboard-count">
+											0
+										</h1>
+									</div>
+								</div>
+							</div>
+
+							<div class="col mb-4 d-flex">
+								<div class="card dashboard-card text-center w-100">
+									<div class="card-body">
+										<h6 class="card-title">
+											Gender - Male
+										</h6>
+
+										<h1 id="maleCount" class="dashboard-count">
+											0
+										</h1>
+									</div>
+								</div>
+							</div>
+
+							<div class="col mb-4 d-flex">
+								<div class="card dashboard-card text-center w-100">
+									<div class="card-body">
+										<h6 class="card-title">
+											Gender - Female
+										</h6>
+
+										<h1 id="femaleCount" class="dashboard-count">
+											0
+										</h1>
+									</div>
+								</div>
+							</div>
+
+							<div class="col mb-4 d-flex">
+								<div class="card dashboard-card text-center w-100">
+									<div class="card-body">
+										<h6 class="card-title">
+											Currently Studying
+										</h6>
+
+										<h1 id="currentlyStudying" class="dashboard-count">
+											0
+										</h1>
+									</div>
+								</div>
+							</div>
+
 						</div>
 
 
@@ -339,29 +470,39 @@
 
 						</div>
 
-						<div class="row mt-3">
+						<!--<div class="row mt-3">
+
 							
-							<!-- AREA WISE -->
 
 							<div class="col-md-6">
 
-								<div class="card dashboard-card">
 
 
+								<div class="card" style="height:500px;">
+
+									<div class="card-body">
 
 										<h5 class="section-title">
 											Area-wise Distribution
 										</h5>
-									<div class="card-body">
 
-										<div id="areaWiseDiv"></div>
+										<div id="areaWiseDiv" style="
+                    max-height:400px;
+                    overflow-y:auto;
+                    overflow-x:hidden;
+                    padding-right:8px;
+                 ">
+										</div>
+
+
+
 									</div>
 
 								</div>
 
 							</div>
 
-							<!-- VULNERABILITY -->
+							
 
 							<div class="col-md-6">
 
@@ -378,6 +519,53 @@
 
 							</div>
 
+						</div>-->
+						<div class="row mt-3 align-items-stretch">
+
+							<!-- AREA WISE -->
+							<div class="col-md-6 mb-4">
+
+								<div class="card h-100" style="height:500px;">
+
+									<div class="card-body">
+
+										<h5 class="section-title">
+											Area-wise Distribution
+										</h5>
+
+										<div id="areaWiseDiv" style="
+                        height:400px;
+                        overflow-y:auto;
+                        overflow-x:hidden;
+                        padding-right:8px;
+                     ">
+										</div>
+
+									</div>
+
+								</div>
+
+							</div>
+
+							<!-- VULNERABILITY -->
+							<div class="col-md-6 mb-4">
+
+								<div class="card h-100" style="height:500px;">
+
+									<div class="card-body">
+
+										<h5 class="section-title">
+											Vulnerability Assessment
+										</h5>
+
+										<div id="vulnerabilityDiv"></div>
+
+									</div>
+
+								</div>
+
+							</div>
+
 						</div>