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

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

<head th:replace="~{fragments/modules/base/head :: head}">
	<style>
		.card-box {
			box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
			border-radius: 6px;
		}

		.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: 100px;
		}
	</style>
</head>

<body>

	<div class="wrapper">
		<header th:replace="~{fragments/modules/base/header :: header}"></header>

		<div class="page-wrap">
			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>

			<div class="main-content">
				<div class="container-fluid">

					<!-- ================= ROW 1 : MAIN SUMMARY ================= -->
					<div class="row mt-4">
						<div class="col-md-3">
							<div class="card card-box p-3 text-center">
								<h6 class="text-facebook mb-2"><b>Batch Count</b></h6>
								<h4 class="text-twitter fw-700 mt-3" th:text="${applicationSummary.batchCount}">0</h4>
							</div>
						</div>

						<div class="col-md-3">
							<div class="card card-box p-3 text-center">
								<h6 class="text-facebook mb-2"><b>Total Applications</b></h6>
								<h4 class="text-twitter fw-700 mt-3" th:text="${applicationSummary.totalApplication}">0
								</h4>
							</div>
						</div>

						<div class="col-md-3">
							<div class="card card-box p-3 text-center">
								<h6 class="text-facebook mb-2"><b>Completed</b></h6>
								<h4 class="text-twitter fw-700 mt-3" th:text="${applicationSummary.completedCount}">0
								</h4>
							</div>
						</div>

						<div class="col-md-3">
							<div class="card card-box p-3 text-center">
								<h6 class="text-facebook mb-2"><b>Pending</b></h6>
								<h4 class="text-twitter fw-700 mt-3" th:text="${applicationSummary.pending}">0</h4>
							</div>
						</div>
					</div>

					<!-- ================= ROW 2 : VALIDATION SUMMARY ================= -->
					<!-- ================= ROW 2 : ALL IN CARDS ================= -->
					<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="${validationSummary.male}">0</b>
								</p>
								<p class="mb-0">Female :
									<b class="text-twitter fw-700 mt-3" th:text="${validationSummary.female}">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">Filled :
									<b class="text-twitter fw-700 mt-3"
										th:text="${validationSummary.voter_filled}">0</b>
								</p>
								<p class="mb-0">Not Filled :
									<b class="text-twitter fw-700 mt-3"
										th:text="${validationSummary.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">Filled :
									<b class="text-twitter fw-700 mt-3"
										th:text="${validationSummary.phone_filled}">0</b>
								</p>
								<p class="mb-0">Not Filled :
									<b class="text-twitter fw-700 mt-3"
										th:text="${validationSummary.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">Filled :
									<b class="text-twitter fw-700 mt-3"
										th:text="${validationSummary.image_filled}">0</b>
								</p>
								<p class="mb-0">Not Filled :
									<b class="text-twitter fw-700 mt-3"
										th:text="${validationSummary.image_not_filled}">0</b>
								</p>
							</div>
						</div>

					</div>
					<!-- ================= ROW : DESIGNATION CATEGORY COUNTS ================= -->
					<!--<div class="row mt-4">

						<div class="col-md-2">
							<div class="card card-box p-3 text-center h-100">
								<h6 class="text-facebook mb-2"><b>PO</b></h6>
								<h4 class="text-twitter fw-700 mt-3"
									th:text="${categoryCounts['PO'] != null ? categoryCounts['PO'] : 0}">0</h4>
							</div>
						</div>

						<div class="col-md-2">
							<div class="card card-box p-3 text-center h-100">
								<h6 class="text-facebook mb-2"><b>PO1</b></h6>
								<h4 class="text-twitter fw-700 mt-3"
									th:text="${categoryCounts['PO1'] != null ? categoryCounts['PO1'] : 0}">0</h4>
							</div>
						</div>

						<div class="col-md-2">
							<div class="card card-box p-3 text-center h-100">
								<h6 class="text-facebook mb-2"><b>PO2</b></h6>
								<h4 class="text-twitter fw-700 mt-3"
									th:text="${categoryCounts['PO2'] != null ? categoryCounts['PO2'] : 0}">0</h4>
							</div>
						</div>

						<div class="col-md-2">
							<div class="card card-box p-3 text-center h-100">
								<h6 class="text-facebook mb-2"><b>PO3</b></h6>
								<h4 class="text-twitter fw-700 mt-3"
									th:text="${categoryCounts['PO3'] != null ? categoryCounts['PO3'] : 0}">0</h4>
							</div>
						</div>

						<div class="col-md-2">
							<div class="card card-box p-3 text-center h-100">
								<h6 class="text-facebook mb-2"><b>PO4</b></h6>
								<h4 class="text-twitter fw-700 mt-3"
									th:text="${categoryCounts['PO4'] != null ? categoryCounts['PO4'] : 0}">0</h4>
							</div>
						</div>

					</div>-->
					<!-- ================= ROW : DESIGNATION CATEGORY COUNTS ================= -->
					<div class="row row-cols-1 row-cols-md-5 mt-4 g-3">

						<div class="col">
							<div class="card card-box p-3 text-center h-100">
								<h6 class="text-facebook mb-2"><b>PO</b></h6>
								<h4 class="text-twitter fw-700 mt-3"
									th:text="${categoryCounts['PO'] != null ? categoryCounts['PO'] : 0}">0</h4>
							</div>
						</div>

						<div class="col">
							<div class="card card-box p-3 text-center h-100">
								<h6 class="text-facebook mb-2"><b>PO1</b></h6>
								<h4 class="text-twitter fw-700 mt-3"
									th:text="${categoryCounts['PO1'] != null ? categoryCounts['PO1'] : 0}">0</h4>
							</div>
						</div>

						<div class="col">
							<div class="card card-box p-3 text-center h-100">
								<h6 class="text-facebook mb-2"><b>PO2</b></h6>
								<h4 class="text-twitter fw-700 mt-3"
									th:text="${categoryCounts['PO2'] != null ? categoryCounts['PO2'] : 0}">0</h4>
							</div>
						</div>

						<div class="col">
							<div class="card card-box p-3 text-center h-100">
								<h6 class="text-facebook mb-2"><b>PO3</b></h6>
								<h4 class="text-twitter fw-700 mt-3"
									th:text="${categoryCounts['PO3'] != null ? categoryCounts['PO3'] : 0}">0</h4>
							</div>
						</div>

						<div class="col">
							<div class="card card-box p-3 text-center h-100">
								<h6 class="text-facebook mb-2"><b>PO4</b></h6>
								<h4 class="text-twitter fw-700 mt-3"
									th:text="${categoryCounts['PO4'] != null ? categoryCounts['PO4'] : 0}">0</h4>
							</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"></div>
					<p class="mt-2 text-primary">Please wait...</p>
				</div>
			</div>

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

	<script th:replace="~{fragments/modules/base/script :: script}"></script>
</body>

</html>