kanimozhi
/
Election_TNELA2026
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
0 Tags
83 MiB
 
 
 
 
 
Tree: 0502bdca41
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '0502bdca41'
${ noResults }
Election_TNELA2026/target/classes/templates/modules/dataentry_admin_mob/dashboard.html

577 lines
15 KiB
Raw Blame History

<!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>