Election_TNELA2026/target/classes/templates/modules/dataentry_admin_mob/dashboard.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="~{fragments/modules/base/head :: head}"></head>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

<style>
	.mini-card {
		box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
		border-radius: 6px;
		padding: 12px;
		text-align: center;
		background: #ffffff;
		min-height: 90px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.card-box {
		box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
	}


	/* Header styling */
	.govt-thead th {
		background-color: #212529 !important;
		color: #fff !important;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		/* 🔥 header single line */
	}

	/* Enable wrapping in body cells */
	#GovtTypeDatatable th,
	#GovtTypeDatatable td {
		white-space: normal !important;
		/* ALLOW WRAP */
		word-break: break-word;
	}

	/* Table layout */
	#GovtTypePersonDatatable {
		width: 100% !important;
		table-layout: fixed;
	}

	/* Modal body must not clip */
	#govtTypePersonModal .modal-body {
		max-height: 70vh;
		/* controls height */
		overflow-y: auto;
		/* ✅ vertical scroll outside table */
		overflow-x: hidden;
	}


	/* Table base */
	#GovtTypePersonDatatable {
		width: 100% !important;
	}

	/* Header */
	.govt-thead th {
		background: #212529;
		color: #fff;
		text-align: center;
		white-space: nowrap;
	}

	/* Body cells */
	#GovtTypePersonDatatable td {
		white-space: normal;
		word-break: break-word;
		vertical-align: top;
		font-size: 14px;
	}

	/* FORCE SAME WIDTH FOR HEADER & BODY TABLE */
	.dataTables_scrollHead table,
	.dataTables_scrollBody table {
		table-layout: fixed !important;
		width: 100% !important;
	}

	/* Modal body scroll (OUTSIDE table) */
	#govtTypeModal .modal-body {
		max-height: 70vh;
		/* adjust as needed */
		overflow-y: auto;
		overflow-x: hidden;
	}

	/* Normal table behavior */
	#GovtTypeDatatable {
		width: 100% !important;
	}

	/* Header cells */
	#GovtTypeDatatable thead th {
		white-space: nowrap;
		text-align: center;
		vertical-align: middle;
	}

	/* Body cells */
	#GovtTypeDatatable tbody td {
		white-space: normal;
		word-break: break-word;
		vertical-align: top;
	}




	/* 🔥 Force horizontal scroll to full width */
	.dataTables_wrapper {
		width: 100%;
	}

	.dataTables_scroll {
		overflow: auto !important;
	}

	.dataTables_scrollBody {
		overflow-x: auto !important;
		overflow-y: auto !important;
		max-height: 50vh;
	}



	/* Fix header width sync */
	.dataTables_scrollHeadInner,
	.dataTables_scrollHeadInner table {
		width: 100% !important;
	}

	/* Mobile fullscreen modal */
	@media (max-width: 768px) {
		#govtTypePersonModal .modal-dialog {
			max-width: 100%;
			margin: 0;
		}

		#govtTypePersonModal .modal-content {
			height: 100vh;
			border-radius: 0;
		}

		.dataTables_scrollBody {
			max-height: 65vh;
		}
	}


	/* Body cells wrap */
	#GovtTypePersonDatatable td {
		white-space: normal;
		word-break: break-word;
		vertical-align: top;
		font-size: 14px;
	}

	/* Fix DataTable header/body width mismatch */
	.dataTables_scrollHeadInner,
	.dataTables_scrollHeadInner table {
		width: 100% !important;
	}



	/* Fullscreen modal on mobile */
	@media (max-width: 768px) {
		#govtTypePersonModal .modal-dialog {
			max-width: 100%;
			margin: 0;
		}

		#govtTypePersonModal .modal-content {
			height: 100vh;
			border-radius: 0;
		}

		#govtTypePersonModal .modal-body {
			overflow-y: auto;
		}
	}

	/* MOBILE FIX */
	@media (max-width: 768px) {
		#GovtTypePersonDatatable {
			font-size: 13px;
		}

		.dataTables_wrapper {
			overflow-x: auto;
		}
	}

	@media (max-width: 768px) {
		/*     #GovtTypePersonDatatable td {
                font-size: 13px;
                white-space: normal;
                word-break: break-word;
            } */

		#GovtTypePersonDatatable th {
			font-size: 13px;
		}
	}



	/*	underline css*/

	.underline-hover {
		cursor: pointer;
		text-decoration: underline;
	}

	.underline-hover:hover {
		text-decoration: underline;
		/* optional, keeps underline on hover */
	}
</style>

<body>

	<div class="wrapper">
		<!-- header top menu Start -->
		<header th:replace="~{fragments/modules/base/header :: header}"></header>
		<!-- header top menu end -->
		<div class="page-wrap">
			<!--=============== Left Menu side Start ================-->
			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
			<!--=============== Left side End ================-->
			<div class="main-content">
				<div class="container-fluid">

					<div class="page-header mb-2">
						<div class="row align-items-end">
							<div class="col-lg-8">
								<div class="page-header-title">
									<!-- <i class="far fa-calendar-plus bg-blue"></i> -->
									<div class="d-inline">
										<h5>Dashboard</h5>
										<!-- <span>Mark attendance for training sessions </span> -->
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="row mt-4">
						<div class="col-12">
							<div class="card">
								<div class="card-body">
									<div class="row mt-2">


										<div class="col-md-4">
											<div class="card card-box p-3 text-center h-100">
												<h6 class="text-facebook mb-2">
													<b>Total Applications</b>
												</h6>
												<h4 class="text-twitter fw-700 mt-3"
													th:text="${applicationsCount.total_applications}"></h4>
											</div>
										</div>
										<!-- QA&QC Calls -->
										<div class="col-md-4">
											<div class="card card-box p-3 text-center h-100">
												<h6 class="text-facebook mb-2">
													<b>Completed</b>
												</h6>
												<h4 class="text-twitter fw-700 mt-3"
													th:text="${applicationsCount.completed_applications}"></h4>
											</div>
										</div>
										<!-- In-progress Calls -->
										<div class="col-md-4">
											<div class="card card-box p-3 text-center h-100">
												<h6 class="text-facebook mb-2">
													<b>Pending</b>
												</h6>
												<h4 class="text-twitter fw-700 mt-3"
													th:text="${applicationsCount.pending_applications}"></h4>
											</div>
										</div>

									</div>
								</div>


								<!--	<div class="card-body mt-2">
								<div class="row g-3 justify-content-center">

									<div class="col-6 col-sm-4 col-md-2">
										<div class="mini-card">
											<h6 class="text-facebook mb-2"><b> PO </b></h6>
											<h4 class="text-twitter fw-700 mt-3" th:text="${gradeCounts.PO}"></h4>
										</div>
									</div>

									<div class="col-6 col-sm-4 col-md-2">
										<div class="mini-card">
											<h6 class="text-facebook mb-2"><b> PO1 </b></h6>
											<h4 class="text-twitter fw-700 mt-3" th:text="${gradeCounts.PO1}"></h4>
										</div>
									</div>

									<div class="col-6 col-sm-4 col-md-2">
										<div class="mini-card">
											<h6 class="text-facebook mb-2"><b> PO2 </b></h6>
											<h4 class="text-twitter fw-700 mt-3" th:text="${gradeCounts.PO2}"></h4>
										</div>
									</div>

									<div class="col-6 col-sm-4 col-md-2">
										<div class="mini-card">
											<h6 class="text-facebook mb-2"><b> PO3 </b></h6>
											<h4 class="text-twitter fw-700 mt-3" th:text="${gradeCounts.PO3}"></h4>
										</div>
									</div>

									<div class="col-6 col-sm-4 col-md-2">
										<div class="mini-card">
											<h6 class="text-facebook mb-2"><b> PO4 </b></h6>
											<h4 class="text-twitter fw-700 mt-3" th:text="${gradeCounts.PO4}"></h4>
										</div>
									</div>

								</div>
							</div>-->
								<div class="card-body">
									<div class="row mt-4">

										<!-- Gender Card -->
										<div class="col-md-3">
											<div class="card card-box p-3 text-center h-100">
												<h6 class="text-facebook mb-2"><b>Gender</b></h6>
												<p class="mb-1">Male :
													<b class="text-twitter fw-700 mt-3"
														th:text="${validationCount.male}">0</b>
												</p>
												<p class="mb-0">Female :
													<b class="text-twitter fw-700 mt-3"
														th:text="${validationCount.female}">0</b>
												</p>
												<p class="mb-0">Transgender :
													<b class="text-twitter fw-700 mt-3"
														th:text="${validationCount.transgender}">0</b>
												</p>
											</div>
										</div>

										<!-- Voter ID Card -->
										<div class="col-md-3">
											<div class="card card-box p-3 text-center h-100">
												<h6 class="text-facebook mb-2"><b>Voter ID</b></h6>
												<p class="mb-1">Available :
													<b class="text-twitter fw-700 mt-3"
														th:text="${validationCount.voter_filled}">0</b>
												</p>
												<p class="mb-0">Not Available :
													<b class="text-twitter fw-700 mt-3"
														th:text="${validationCount.voter_not_filled}">0</b>
												</p>
											</div>
										</div>

										<!-- Phone Card -->
										<div class="col-md-3">
											<div class="card card-box p-3 text-center h-100">
												<h6 class="text-facebook mb-2"><b>Phone</b></h6>
												<p class="mb-1">Available :
													<b class="text-twitter fw-700 mt-3"
														th:text="${validationCount.phone_filled}">0</b>
												</p>
												<p class="mb-0">Not Available :
													<b class="text-twitter fw-700 mt-3"
														th:text="${validationCount.phone_not_filled}">0</b>
												</p>
											</div>
										</div>

										<!-- Image Card -->
										<div class="col-md-3">
											<div class="card card-box p-3 text-center h-100">
												<h6 class="text-facebook mb-2"><b>Image</b></h6>
												<p class="mb-1">Available :
													<b class="text-twitter fw-700 mt-3"
														th:text="${validationCount.image_filled}">0</b>
												</p>
												<p class="mb-0">Not Available :
													<b class="text-twitter fw-700 mt-3"
														th:text="${validationCount.image_not_filled}">0</b>
												</p>
											</div>
										</div>

									</div>

								</div>



								<!-- ================= Central and State Report Count ================= -->
								<!-- <div class="card-body">
								<div class="row mt-2">
									<div class="col-xl-6 col-sm-12">
										<div class="card card-box p-3 text-center h-100">
											<h6 class="text-facebook mb-2">
												<b>Central Govt Offices</b>
											</h6>
											<h4 class="text-twitter fw-700 mt-3 cursor-pointer underline-hover"
												th:text="${GovtTypeCount.central_count}" onclick="openGovtTypeModal('C')"></h4>
											<p class="mb-1">No of Applicant :
												<b class="text-twitter fw-700 mt-3"
												   th:text="${GovtOfficeTypeCount.total_central}">0</b>
											</p>

										</div>
									</div>

									
									<div class="col-xl-6  col-sm-12">
										<div class="card card-box p-3 text-center h-100">
											<h6 class="text-facebook mb-2">
												<b>State Govt Offices </b>
											</h6>
											<h4 class="text-twitter fw-700 mt-3 cursor-pointer underline-hover"
												th:text="${GovtTypeCount.state_count}" onclick="openGovtTypeModal('S')"></h4>

											<p class="mb-1">No of Applicant :
												<b class="text-twitter fw-700 mt-3"
												   th:text="${GovtOfficeTypeCount.total_state}">0</b>
											</p>

										</div>
									</div>

								</div>
							</div>-->


							</div>
						</div>
					</div>


				</div>
			</div>
			<div id="pageLoader"
				style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
				<div style="position: relative; top: 50%; transform: translateY(-50%);">
					<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
						<span class="sr-only">Loading...</span>
					</div>
					<!-- Add the 'Please wait' text below the spinner -->
					<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
				</div>
			</div>

			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
		</div>
	</div>

	<!--<div class="modal fade" id="govtTypeModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">

	<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
		<div class="modal-content">

			<div class="modal-header bg-primary text-white">
				<h5 class="modal-title" id="govtTypeModalTitle"></h5>
				<button type="button" class="close text-white" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>

			<div class="modal-body">
				<table id="GovtTypeDatatable"
					   class="table table-bordered table-striped w-100">
					<thead class="govt-thead">
					<tr>
						<th>S.No</th>
						<th>Department</th>
						<th>Office</th>
						<th>Total Count</th>
					</tr>
					</thead>
					<tbody></tbody>
				</table>

			</div>

		</div>
	</div>
</div>


<div class="modal fade" id="govtTypePersonModal" tabindex="-1" role="dialog"
	 aria-hidden="true" data-backdrop="static" data-keyboard="false">

	<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
		<div class="modal-content">

			<div class="modal-header bg-dark text-white">
				<h5 class="modal-title" id="govtTypePersonModalTitle"></h5>
				<button type="button" class="close text-white" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>

			<div class="modal-body">
				<div class="table-responsive">
					<table id="GovtTypePersonDatatable"
						   class="table table-bordered table-striped nowrap">



						<thead class="govt-thead">
						<tr>
							<th>S.No</th>
							<th>Unique No</th>
							<th>Name</th>
							<th>Sex</th>
							<th>Mobile</th>
							<th>Designation</th>
							<th>Department</th>
							<th>Office</th>
							<th>Govt Type</th>
							<th>Office Address</th>
							<th>Residential Address</th>
							<th>Native AC</th>
							<th>Residential AC</th>
							<th>Elector AC</th>
							<th>Working AC</th>
						</tr>
						</thead>
						<tbody></tbody>
					</table>

				</div>
			</div>

		</div>
	</div>
</div>-->



	<!-- DataTables Buttons JS -->
	<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

	<!-- Dependencies -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>




	<script th:replace="~{fragments/modules/base/script :: script}"></script>
	<script type="text/javascript"></script>





</body>

</html>