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
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
Election_TNELA2026/target/classes/templates/modules/dataentry_admin/dashboard.html

1844 lines
49 KiB
Raw Permalink Normal View History

Election Final Code
5 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/modules/base/head :: head}"></head>
  5. <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
  7. <style>
  8. .mini-card {
  9. box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
  10. border-radius: 6px;
  11. padding: 12px;
  12. text-align: center;
  13. background: #ffffff;
  14. min-height: 90px;
  15. display: flex;
  16. flex-direction: column;
  17. justify-content: center;
  18. }
  20. .card-box {
  21. box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
  22. }
  25. /* Header styling */
  26. .govt-thead th {
  27. background-color: #212529 !important;
  28. color: #fff !important;
  29. text-align: center;
  30. vertical-align: middle;
  31. white-space: nowrap;
  32. /* 🔥 header single line */
  33. }
  35. /* Enable wrapping in body cells */
  36. #GovtTypeDatatable th,
  37. #GovtTypeDatatable td {
  38. white-space: normal !important;
  39. /* ALLOW WRAP */
  40. word-break: break-word;
  41. }
  43. /* Table layout */
  44. #GovtTypePersonDatatable {
  45. width: 100% !important;
  46. table-layout: fixed;
  47. }
  49. /* Modal body must not clip */
  50. #govtTypePersonModal .modal-body {
  51. max-height: 70vh;
  52. /* controls height */
  53. overflow-y: auto;
  54. /* ✅ vertical scroll outside table */
  55. overflow-x: hidden;
  56. }
  59. /* Table base */
  60. #GovtTypePersonDatatable {
  61. width: 100% !important;
  62. }
  64. /* Header */
  65. .govt-thead th {
  66. background: #212529;
  67. color: #fff;
  68. text-align: center;
  69. white-space: nowrap;
  70. }
  72. /* Body cells */
  73. #GovtTypePersonDatatable td {
  74. white-space: normal;
  75. word-break: break-word;
  76. vertical-align: top;
  77. font-size: 14px;
  78. }
  80. /* FORCE SAME WIDTH FOR HEADER & BODY TABLE */
  81. .dataTables_scrollHead table,
  82. .dataTables_scrollBody table {
  83. table-layout: fixed !important;
  84. width: 100% !important;
  85. }
  87. /* Modal body scroll (OUTSIDE table) */
  88. #govtTypeModal .modal-body {
  89. max-height: 70vh;
  90. /* adjust as needed */
  91. overflow-y: auto;
  92. overflow-x: hidden;
  93. }
  95. /* Normal table behavior */
  96. #GovtTypeDatatable {
  97. width: 100% !important;
  98. }
  100. /* Header cells */
  101. #GovtTypeDatatable thead th {
  102. white-space: nowrap;
  103. text-align: center;
  104. vertical-align: middle;
  105. }
  107. /* Body cells */
  108. #GovtTypeDatatable tbody td {
  109. white-space: normal;
  110. word-break: break-word;
  111. vertical-align: top;
  112. }
  117. /* 🔥 Force horizontal scroll to full width */
  118. .dataTables_wrapper {
  119. width: 100%;
  120. }
  122. .dataTables_scroll {
  123. overflow: auto !important;
  124. }
  126. .dataTables_scrollBody {
  127. overflow-x: auto !important;
  128. overflow-y: auto !important;
  129. max-height: 50vh;
  130. }
  134. /* Fix header width sync */
  135. .dataTables_scrollHeadInner,
  136. .dataTables_scrollHeadInner table {
  137. width: 100% !important;
  138. }
  140. /* Mobile fullscreen modal */
  141. @media (max-width: 768px) {
  142. #govtTypePersonModal .modal-dialog {
  143. max-width: 100%;
  144. margin: 0;
  145. }
  147. #govtTypePersonModal .modal-content {
  148. height: 100vh;
  149. border-radius: 0;
  150. }
  152. .dataTables_scrollBody {
  153. max-height: 65vh;
  154. }
  155. }
  158. /* Body cells wrap */
  159. #GovtTypePersonDatatable td {
  160. white-space: normal;
  161. word-break: break-word;
  162. vertical-align: top;
  163. font-size: 14px;
  164. }
  166. /* Fix DataTable header/body width mismatch */
  167. .dataTables_scrollHeadInner,
  168. .dataTables_scrollHeadInner table {
  169. width: 100% !important;
  170. }
  174. /* Fullscreen modal on mobile */
  175. @media (max-width: 768px) {
  176. #govtTypePersonModal .modal-dialog {
  177. max-width: 100%;
  178. margin: 0;
  179. }
  181. #govtTypePersonModal .modal-content {
  182. height: 100vh;
  183. border-radius: 0;
  184. }
  186. #govtTypePersonModal .modal-body {
  187. overflow-y: auto;
  188. }
  189. }
  191. /* MOBILE FIX */
  192. @media (max-width: 768px) {
  193. #GovtTypePersonDatatable {
  194. font-size: 13px;
  195. }
  197. .dataTables_wrapper {
  198. overflow-x: auto;
  199. }
  200. }
  202. @media (max-width: 768px) {
  203. /* #GovtTypePersonDatatable td {
  204. font-size: 13px;
  205. white-space: normal;
  206. word-break: break-word;
  207. } */
  209. #GovtTypePersonDatatable th {
  210. font-size: 13px;
  211. }
  212. }
  216. /* underline css*/
  218. .underline-hover {
  219. cursor: pointer;
  220. text-decoration: underline;
  221. }
  223. .underline-hover:hover {
  224. text-decoration: underline;
  225. /* optional, keeps underline on hover */
  226. }
  229. #completedPivotTable {
  230. table-layout: fixed;
  231. width: 100% !important;
  232. }
  234. #completedPivotTable th,
  235. #completedPivotTable td {
  236. text-align: center;
  237. vertical-align: middle;
  238. white-space: normal;
  239. }
  241. #completedPivotTable th {
  242. word-wrap: break-word;
  243. font-size: small;
  244. }
  246. /* 🔥 FIX HEADER ALIGNMENT */
  247. table.dataTable thead th {
  248. text-align: center;
  249. vertical-align: middle;
  250. white-space: normal;
  251. }
  253. /* Prevent header shifting */
  254. .dataTables_scrollHeadInner,
  255. .dataTables_scrollHeadInner table {
  256. width: 100% !important;
  257. }
  259. /* Match body + header */
  260. .dataTables_scrollBody table {
  261. width: 100% !important;
  262. }
  264. /* Fix column spacing */
  265. #completedPivotTable {
  266. border-collapse: collapse;
  267. }
  269. #personTable td:nth-child(4) {
  270. max-width: 150px;
  271. }
  273. .text-wrap {
  274. white-space: normal !important;
  275. word-break: break-word;
  276. }
  277. </style>
  279. <body>
  281. <div class="wrapper">
  282. <!-- header top menu Start -->
  283. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  284. <!-- header top menu end -->
  285. <div class="page-wrap">
  286. <!--=============== Left Menu side Start ================-->
  287. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  288. <!--=============== Left side End ================-->
  289. <div class="main-content">
  290. <div class="container-fluid">
  292. <div class="page-header mb-2">
  293. <div class="row align-items-end">
  294. <div class="col-lg-8">
  295. <div class="page-header-title">
  296. <!-- <i class="far fa-calendar-plus bg-blue"></i> -->
  297. <div class="d-inline">
  298. <h5>Dashboard</h5>
  299. <!-- <span>Mark attendance for training sessions </span> -->
  300. </div>
  301. </div>
  302. </div>
  303. </div>
  304. </div>
  306. <div class="row mt-4">
  307. <div class="col-12">
  308. <div class="card">
  309. <div class="card-body">
  310. <div class="row mt-2">
  311. <div class="col-md-3">
  312. <div class="card card-box p-3 text-center h-100">
  313. <h6 class="text-facebook mb-2">
  314. <b>Total Requirement</b>
  315. </h6>
  316. <!--<h4 class="text-twitter fw-700 mt-3"
  317. th:text="${RequirementCount.final_value}"></h4>-->
  318. <h4 class="text-twitter fw-700 mt-3">19594</h4>
  319. </div>
  320. </div>
  322. <div class="col-md-3">
  323. <div class="card card-box p-3 text-center h-100">
  324. <h6 class="text-facebook mb-2">
  325. <b>Total Applications</b>
  326. </h6>
  327. <h4 class="text-twitter fw-700 mt-3"
  328. th:text="${applicationsCount.total_applications}"></h4>
  329. </div>
  330. </div>
  331. <!-- QA&QC Calls -->
  332. <div class="col-md-3">
  333. <div class="card card-box p-3 text-center h-100">
  334. <h6 class="text-facebook mb-2">
  335. <b>Completed</b>
  336. </h6>
  337. <h4 class="text-twitter fw-700 mt-3 underline-hover"
  338. th:text="${applicationsCount.completed_applications}"
  339. onclick="openCompletedPivotModal()">
  340. </h4>
  341. <!--<h4 class="text-twitter fw-700 mt-3"
  342. th:text="${applicationsCount.completed_applications}"></h4>-->
  343. </div>
  344. </div>
  345. <!-- In-progress Calls -->
  346. <div class="col-md-3">
  347. <div class="card card-box p-3 text-center h-100">
  348. <h6 class="text-facebook mb-2">
  349. <b>Pending</b>
  350. </h6>
  351. <h4 class="text-twitter fw-700 mt-3"
  352. th:text="${applicationsCount.total_applications - applicationsCount.completed_applications}">
  353. </h4>
  354. </div>
  355. </div>
  357. </div>
  358. </div>
  361. <div class="card-body mt-2">
  362. <div class="row g-3 justify-content-center">
  364. <div class="col-6 col-sm-4 col-md-2">
  365. <div class="mini-card">
  366. <h6 class="text-facebook mb-2"><b> PO </b></h6>
  367. <h4 class="text-twitter fw-700 mt-3" th:text="${gradeCounts.PO}"></h4>
  368. </div>
  369. </div>
  371. <div class="col-6 col-sm-4 col-md-2">
  372. <div class="mini-card">
  373. <h6 class="text-facebook mb-2"><b> PO1 </b></h6>
  374. <h4 class="text-twitter fw-700 mt-3" th:text="${gradeCounts.PO1}"></h4>
  375. </div>
  376. </div>
  378. <div class="col-6 col-sm-4 col-md-2">
  379. <div class="mini-card">
  380. <h6 class="text-facebook mb-2"><b> PO2 </b></h6>
  381. <h4 class="text-twitter fw-700 mt-3" th:text="${gradeCounts.PO2}"></h4>
  382. </div>
  383. </div>
  385. <div class="col-6 col-sm-4 col-md-2">
  386. <div class="mini-card">
  387. <h6 class="text-facebook mb-2"><b> PO3 </b></h6>
  388. <h4 class="text-twitter fw-700 mt-3" th:text="${gradeCounts.PO3}"></h4>
  389. </div>
  390. </div>
  392. <div class="col-6 col-sm-4 col-md-2">
  393. <div class="mini-card">
  394. <h6 class="text-facebook mb-2"><b> PO4 </b></h6>
  395. <h4 class="text-twitter fw-700 mt-3" th:text="${gradeCounts.PO4}"></h4>
  396. </div>
  397. </div>
  399. </div>
  400. </div>
  401. <div class="card-body">
  402. <div class="row mt-4">
  404. <!-- Gender Card -->
  405. <div class="col-md-3">
  406. <div class="card card-box p-3 text-center h-100">
  407. <h6 class="text-facebook mb-2"><b>Gender</b></h6>
  408. <p class="mb-1">Male :
  409. <b class="text-twitter fw-700 mt-3"
  410. th:text="${validationCount.male}">0</b>
  411. </p>
  412. <p class="mb-0">Female :
  413. <b class="text-twitter fw-700 mt-3"
  414. th:text="${validationCount.female}">0</b>
  415. </p>
  416. <p class="mb-0">Transgender :
  417. <b class="text-twitter fw-700 mt-3"
  418. th:text="${validationCount.transgender}">0</b>
  419. </p>
  420. </div>
  421. </div>
  424. <!-- voter -->
  425. <!--<div class="col-md-3">
  426. <div class="card card-box p-3 text-center h-100">
  427. <h6 class="text-facebook mb-2"><b>Voter ID</b></h6>
  429. <p class="mb-1">Available :
  430. <b class="text-success fw-700 mt-3 underline-hover"
  431. th:text="${validationCount.voter_filled}"
  432. onclick="openCategorySummaryModal('VOTER_FILLED')">0</b>
  433. </p>
  435. <p class="mb-0">Not Available :
  436. <b class="text-danger fw-700 mt-3 underline-hover"
  437. th:text="${validationCount.voter_not_filled}"
  438. onclick="openCategorySummaryModal('VOTER_NOT_FILLED')">0</b>
  439. </p>
  440. </div>
  441. </div>
  444. &lt;!&ndash; PHONE &ndash;&gt;
  445. <div class="col-md-3">
  446. <div class="card card-box p-3 text-center h-100">
  447. <h6 class="text-facebook mb-2"><b>Phone</b></h6>
  449. <p class="mb-1">Available :
  450. <b class="text-success fw-700 mt-3 underline-hover"
  451. th:text="${validationCount.phone_filled}"
  452. onclick="openCategorySummaryModal('PHONE_FILLED')">0</b>
  453. </p>
  455. <p class="mb-0">Not Available :
  456. <b class="text-danger fw-700 mt-3 underline-hover"
  457. th:text="${validationCount.phone_not_filled}"
  458. onclick="openCategorySummaryModal('PHONE_NOT_FILLED')">0</b>
  459. </p>
  460. </div>
  461. </div>
  464. &lt;!&ndash; IMAGE &ndash;&gt;
  465. <div class="col-md-3">
  466. <div class="card card-box p-3 text-center h-100">
  467. <h6 class="text-facebook mb-2"><b>Image</b></h6>
  469. <p class="mb-1">Available :
  470. <b class="text-success fw-700 mt-3 underline-hover"
  471. th:text="${validationCount.image_filled}"
  472. onclick="openCategorySummaryModal('IMAGE_FILLED')">0</b>
  473. </p>
  475. <p class="mb-0">Not Available :
  476. <b class="text-danger fw-700 mt-3 underline-hover"
  477. th:text="${validationCount.image_not_filled}"
  478. onclick="openCategorySummaryModal('IMAGE_NOT_FILLED')">0</b>
  479. </p>
  480. </div>
  481. </div>-->
  484. <!-- Voter ID Card -->
  485. <div class="col-md-3">
  486. <div class="card card-box p-3 text-center h-100">
  487. <h6 class="text-facebook mb-2"><b>Voter ID</b></h6>
  488. <p class="mb-1">Available :
  489. <b class="text-twitter fw-700 mt-3"
  490. th:text="${validationCount.voter_filled}">0</b>
  491. </p>
  492. <p class="mb-0">Not Available :
  493. <b class="text-twitter fw-700 mt-3"
  494. th:text="${validationCount.voter_not_filled}">0</b>
  495. </p>
  496. </div>
  497. </div>
  500. <div class="col-md-3">
  501. <div class="card card-box p-3 text-center h-100">
  502. <h6 class="text-facebook mb-2"><b>Phone</b></h6>
  503. <p class="mb-1">Available :
  504. <b class="text-twitter fw-700 mt-3"
  505. th:text="${validationCount.phone_filled}">0</b>
  506. </p>
  507. <p class="mb-0">Not Available :
  508. <b class="text-twitter fw-700 mt-3"
  509. th:text="${validationCount.phone_not_filled}">0</b>
  510. </p>
  511. </div>
  512. </div>
  515. <div class="col-md-3">
  516. <div class="card card-box p-3 text-center h-100">
  517. <h6 class="text-facebook mb-2"><b>Image</b></h6>
  518. <p class="mb-1">Available :
  519. <b class="text-twitter fw-700 mt-3"
  520. th:text="${validationCount.image_filled}">0</b>
  521. </p>
  522. <p class="mb-0">Not Available :
  523. <b class="text-twitter fw-700 mt-3"
  524. th:text="${validationCount.image_not_filled}">0</b>
  525. </p>
  526. </div>
  527. </div>
  529. </div>
  531. </div>
  535. <!-- ================= Central and State Report Count ================= -->
  536. <div class="card-body">
  537. <div class="row mt-2">
  538. <div class="col-xl-6 col-sm-12">
  539. <div class="card card-box p-3 text-center h-100">
  540. <h6 class="text-facebook mb-2">
  541. <b>Central Govt Offices</b>
  542. </h6>
  543. <h4 class="text-twitter fw-700 mt-3 cursor-pointer underline-hover"
  544. th:text="${GovtTypeCount.central_count}"
  545. onclick="openGovtTypeModal('C')"></h4>
  546. <p class="mb-1">No of Applicant :
  547. <b class="text-twitter fw-700 mt-3"
  548. th:text="${GovtOfficeTypeCount.total_central}">0</b>
  549. </p>
  551. </div>
  552. </div>
  554. <!-- In-progress Calls -->
  555. <div class="col-xl-6 col-sm-12">
  556. <div class="card card-box p-3 text-center h-100">
  557. <h6 class="text-facebook mb-2">
  558. <b>State Govt Offices </b>
  559. </h6>
  560. <h4 class="text-twitter fw-700 mt-3 cursor-pointer underline-hover"
  561. th:text="${GovtTypeCount.state_count}"
  562. onclick="openGovtTypeModal('S')"></h4>
  564. <p class="mb-1">No of Applicant :
  565. <b class="text-twitter fw-700 mt-3"
  566. th:text="${GovtOfficeTypeCount.total_state}">0</b>
  567. </p>
  569. </div>
  570. </div>
  572. </div>
  573. </div>
  576. </div>
  577. </div>
  578. </div>
  581. </div>
  582. </div>
  583. <div id="pageLoader"
  584. 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;">
  585. <div style="position: relative; top: 50%; transform: translateY(-50%);">
  586. <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
  587. <span class="sr-only">Loading...</span>
  588. </div>
  589. <!-- Add the 'Please wait' text below the spinner -->
  590. <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
  591. </div>
  592. </div>
  594. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  595. </div>
  596. </div>
  598. <div class="modal fade" id="govtTypeModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
  599. data-keyboard="false">
  601. <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
  602. <div class="modal-content">
  604. <div class="modal-header bg-primary text-white">
  605. <h5 class="modal-title" id="govtTypeModalTitle"></h5>
  606. <button type="button" class="close text-white" data-dismiss="modal">
  607. <span>&times;</span>
  608. </button>
  609. </div>
  611. <div class="modal-body">
  612. <table id="GovtTypeDatatable" class="table table-bordered table-striped w-100">
  613. <thead class="govt-thead">
  614. <tr>
  615. <th>S.No</th>
  616. <th>Department</th>
  617. <th>Office</th>
  618. <th>Total Count</th>
  619. </tr>
  620. </thead>
  621. <tbody></tbody>
  622. </table>
  624. </div>
  626. </div>
  627. </div>
  628. </div>
  631. <div class="modal fade" id="govtTypePersonModal" tabindex="-1" role="dialog" aria-hidden="true"
  632. data-backdrop="static" data-keyboard="false">
  634. <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
  635. <div class="modal-content">
  637. <div class="modal-header bg-dark text-white">
  638. <h5 class="modal-title" id="govtTypePersonModalTitle"></h5>
  639. <button type="button" class="close text-white" data-dismiss="modal">
  640. <span>&times;</span>
  641. </button>
  642. </div>
  644. <div class="modal-body">
  645. <div class="table-responsive">
  646. <table id="GovtTypePersonDatatable" class="table table-bordered table-striped nowrap">
  650. <thead class="govt-thead">
  651. <tr>
  652. <th>S.No</th>
  653. <th>Unique No</th>
  654. <th>Name</th>
  655. <th>Sex</th>
  656. <th>Mobile</th>
  657. <th>Designation</th>
  658. <th>Department</th>
  659. <th>Office</th>
  660. <th>Govt Type</th>
  661. <th>Office Address</th>
  662. <th>Residential Address</th>
  663. <th>Native AC</th>
  664. <th>Residential AC</th>
  665. <th>Elector AC</th>
  666. <th>Working AC</th>
  667. </tr>
  668. </thead>
  669. <tbody></tbody>
  670. </table>
  672. </div>
  673. </div>
  675. </div>
  676. </div>
  677. </div>
  680. <!--ak-->
  681. <div class="modal fade" id="categorySummaryModal" tabindex="-1">
  682. <div class="modal-dialog modal-xl modal-dialog-centered">
  683. <div class="modal-content">
  685. <div class="modal-header bg-primary text-white">
  686. <h5 class="modal-title" id="categorySummaryTitle"></h5>
  687. <button type="button" class="close text-white" data-dismiss="modal">
  688. <span>&times;</span>
  689. </button>
  690. </div>
  692. <div class="modal-body">
  694. <table id="categorySummaryTable" class="table table-bordered table-striped w-100">
  695. <thead class="bg-dark text-white text-center">
  696. <tr>
  697. <th>S.No</th>
  698. <th>Constiency</th>
  700. <th>Department</th>
  701. <th>Office</th>
  702. <th>Total Count</th>
  703. </tr>
  704. </thead>
  706. <tbody id="categorySummaryBody"></tbody>
  707. </table>
  709. </div>
  710. </div>
  711. </div>
  712. </div>
  713. <div class="modal fade" id="completedPivotModal" tabindex="-1">
  714. <div class="modal-dialog modal-xl modal-dialog-scrollable">
  715. <div class="modal-content">
  717. <div class="modal-header bg-primary text-white">
  718. <h5 class="modal-title">Completed - Training Centre Summary</h5>
  719. <button type="button" class="close text-white" data-dismiss="modal">
  720. <span>&times;</span>
  721. </button>
  722. </div>
  724. <div class="modal-body">
  725. <div class="table-responsive">
  727. <table id="completedPivotTable" class="table table-bordered text-center">
  728. <thead class="bg-dark text-white">
  729. <tr>
  730. <th rowspan="2">S.No</th>
  731. <th rowspan="2" class="no-sort text-center">Training Centre</th>
  732. <th colspan="4" class="text-center">PO</th>
  733. <th colspan="4" class="text-center">PO1</th>
  734. <th colspan="4" class="text-center">PO2</th>
  735. <th colspan="4" class="text-center">PO3</th>
  736. <th colspan="4" class="text-center">PO4</th>
  738. </tr>
  739. <tr>
  741. <th word-wrap="break-word" class="no-sort">Total</th>
  742. <th word-wrap="break-word" class="no-sort">No Image</th>
  743. <th word-wrap="break-word" class="no-sort">NO Phone </th>
  744. <th word-wrap="break-word" class="no-sort">NO Voter </th>
  746. <th word-wrap="break-word" class="no-sort">Total</th>
  747. <th word-wrap="break-word" class="no-sort">NO Image </th>
  748. <th word-wrap="break-word" class="no-sort">NO Phone </th>
  749. <th word-wrap="break-word" class="no-sort">NO Voter </th>
  751. <th word-wrap="break-word" class="no-sort">Total</th>
  752. <th word-wrap="break-word" class="no-sort">NO Image</th>
  753. <th word-wrap="break-word" class="no-sort">NO Phone </th>
  754. <th word-wrap="break-word" class="no-sort">NO Voter </th>
  756. <th word-wrap="break-word" class="no-sort">Total</th>
  757. <th word-wrap="break-word" class="no-sort">NO Image </th>
  758. <th word-wrap="break-word" class="no-sort">NO Phone </th>
  759. <th word-wrap="break-word" class="no-sort">NO Voter </th>
  761. <th word-wrap="break-word" class="no-sort">Total</th>
  762. <th word-wrap="break-word" class="no-sort">NO Image </th>
  763. <th word-wrap="break-word" class="no-sort">NO Phone </th>
  764. <th word-wrap="break-word" class="no-sort">NO Voter </th>
  765. </tr>
  766. </thead>
  767. <tbody id="completedPivotBody"></tbody>
  768. </table>
  769. </div>
  771. </div>
  772. </div>
  773. </div>
  774. </div>
  775. <div class="modal fade" id="hallPivotModal" tabindex="-1">
  776. <div class="modal-dialog modal-xl modal-dialog-scrollable">
  777. <div class="modal-content">
  779. <div class="modal-header bg-primary text-white">
  780. <h5 class="modal-title">Hall Wise Summary</h5>
  781. <button type="button" class="close text-white" data-dismiss="modal">
  782. <span>&times;</span>
  783. </button>
  784. </div>
  786. <div class="modal-body">
  787. <div class="table-responsive">
  789. <table id="hallPivotTable" class="table table-bordered text-center w-100">
  790. <thead class="bg-dark text-white">
  791. <tr>
  792. <th rowspan="2">S.No</th>
  793. <th rowspan="2" class="no-sort text-center">Hall No</th>
  794. <th colspan="4" class="text-center">PO</th>
  795. <th colspan="4" class="text-center">PO1</th>
  796. <th colspan="4" class="text-center">PO2</th>
  797. <th colspan="4" class="text-center">PO3</th>
  798. <th colspan="4" class="text-center">PO4</th>
  799. </tr>
  800. <tr>
  801. <th word-wrap="break-word" class="no-sort">Total</th>
  802. <th word-wrap="break-word" class="no-sort">No Image</th>
  803. <th word-wrap="break-word" class="no-sort">NO Phone</th>
  804. <th word-wrap="break-word" class="no-sort">NO Voter</th>
  806. <th word-wrap="break-word" class="no-sort">Total</th>
  807. <th word-wrap="break-word" class="no-sort">NO Image</th>
  808. <th word-wrap="break-word" class="no-sort">NO Phone</th>
  809. <th word-wrap="break-word" class="no-sort">NO Voter</th>
  811. <th word-wrap="break-word" class="no-sort">Total</th>
  812. <th word-wrap="break-word" class="no-sort">NO Image</th>
  813. <th word-wrap="break-word" class="no-sort">NO Phone</th>
  814. <th word-wrap="break-word" class="no-sort">NO Voter</th>
  816. <th word-wrap="break-word" class="no-sort">Total</th>
  817. <th word-wrap="break-word" class="no-sort">NO Image</th>
  818. <th word-wrap="break-word" class="no-sort">NO Phone</th>
  819. <th word-wrap="break-word" class="no-sort">NO Voter</th>
  821. <th word-wrap="break-word" class="no-sort">Total</th>
  822. <th word-wrap="break-word" class="no-sort">NO Image</th>
  823. <th word-wrap="break-word" class="no-sort">NO Phone</th>
  824. <th word-wrap="break-word" class="no-sort">NO Voter</th>
  825. </tr>
  826. </thead>
  827. <tbody id="hallPivotBody"></tbody>
  828. </table>
  829. </div>
  831. </div>
  832. </div>
  833. </div>
  834. </div>
  835. <div class="modal fade" id="personModal" tabindex="-1">
  836. <div class="modal-dialog modal-xl modal-dialog-scrollable">
  837. <div class="modal-content">
  839. <div class="modal-header bg-primary text-white">
  840. <h5 class="modal-title">Person Details</h5>
  841. <button type="button" class="close text-white" data-dismiss="modal">
  842. <span>&times;</span>
  843. </button>
  844. </div>
  846. <div class="modal-body">
  847. <div class="table-responsive">
  849. <table id="personTable" class="table table-bordered">
  850. <thead>
  851. <tr>
  852. <th>S.No</th>
  853. <th>Unique No</th>
  854. <th>Hall NO</th>
  855. <th>Name</th>
  856. <th>Designation</th>
  857. <th>Office Address</th>
  858. <th>Mobile</th>
  859. <th>Category</th>
  860. <th>Photo</th>
  861. </tr>
  862. </thead>
  863. <tbody id="personTableBody"></tbody>
  864. </table>
  865. </div>
  867. </div>
  868. </div>
  869. </div>
  870. </div>
  875. <!-- DataTables Buttons JS -->
  876. <!-- <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
  877. <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
  878. <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script> -->
  880. <!-- Dependencies -->
  881. <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  882. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
  883. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script> -->
  888. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  889. <script type="text/javascript"></script>
  892. <script>
  893. let govtTypeTable = null;
  895. function openGovtTypeModal(govtType) {
  897. const title = govtType === 'C'
  898. ? 'Central Government Details'
  899. : 'State Government Details';
  901. $('#govtTypeModalTitle').text(title);
  903. $.ajax({
  904. url: '/election/api/dataentryadmin/dashboard/govt-type-details',
  905. type: 'GET',
  906. data: { govtType: govtType },
  907. success: function (data) {
  909. if ($.fn.DataTable.isDataTable('#GovtTypeDatatable')) {
  910. govtTypeTable.destroy();
  911. $('#GovtTypeDatatable tbody').empty();
  912. }
  914. let rows = '';
  915. data.forEach((row, index) => {
  916. rows += `
  917. <tr>
  918. <td class="text-center">${index + 1}</td>
  919. <td>${row.dept_name ?? '-'}</td>
  920. <td>${row.office_address ?? '-'}</td>
  921. <td class="text-center">
  922. <a href="javascript:void(0)"
  923. class="text-primary fw-bold"
  924. onclick="openGovtTypePersonModal(
  925. '${govtType}',
  926. '${row.dept_name}',
  927. '${row.office_name}'
  928. )">
  929. ${row.total_count}
  930. </a>
  931. </td>
  932. </tr>
  933. `;
  934. });
  936. $('#GovtTypeDatatable tbody').html(rows);
  938. // DataTable with Buttons
  939. govtTypeTable = $('#GovtTypeDatatable').DataTable({
  940. dom: 'Bftip',
  941. autoWidth: false,
  942. responsive: false,
  943. ordering: true,
  944. searching: true,
  945. paging: true,
  946. pageLength: 10,
  948. buttons: [
  949. {
  950. extend: 'copy',
  951. text: 'Copy',
  952. title: title
  953. },
  954. {
  955. extend: 'excelHtml5',
  956. text: 'Excel',
  957. title: title
  958. },
  959. {
  960. extend: 'csvHtml5',
  961. text: 'CSV',
  962. title: title
  963. },
  964. /* {
  965. extend: 'pdfHtml5',
  966. text: 'PDF',
  967. title: '',
  968. orientation: 'landscape',
  969. pageSize: 'A4',
  970. customize: function (doc) {
  972. // Page margins
  973. doc.pageMargins = [20, 60, 20, 30];
  975. // Add heading manually
  976. doc.content.unshift({
  977. text: title,
  978. alignment: 'center',
  979. fontSize: 14,
  980. bold: true,
  981. margin: [0, 0, 0, 12]
  982. });
  984. doc.defaultStyle.fontSize = 11;
  985. doc.styles.tableHeader.alignment = 'center';
  986. }
  987. } */
  988. ],
  990. columnDefs: [
  991. { targets: 0, width: "60px", className: "text-center" },
  992. { targets: 3, width: "120px", className: "text-center" }
  993. ]
  994. });
  996. govtTypeTable.columns.adjust().draw();
  997. $('#govtTypeModal').modal('show');
  998. },
  999. error: function () {
  1000. alert('Error loading data');
  1001. }
  1002. });
  1003. }
  1005. $('#govtTypeModal').on('shown.bs.modal', function () {
  1006. if (govtTypeTable) {
  1007. govtTypeTable.columns.adjust();
  1008. }
  1009. });
  1010. </script>
  1012. <script>
  1013. let govtTypePersonTable = null;
  1015. function openGovtTypePersonModal(govtType, deptName, officeName) {
  1017. const govtLabel = govtType === 'C'
  1018. ? 'Central Government'
  1019. : 'State Government';
  1020. const pdfHeading = govtLabel + ' - ' + deptName + ' - ' + officeName;
  1022. $('#govtTypePersonModalTitle').text(
  1023. govtLabel + ' - ' + deptName + ' - ' + officeName
  1024. );
  1026. $.ajax({
  1027. url: '/election/api/dataentryadmin/dashboard/govt-type-person-details',
  1028. type: 'GET',
  1029. data: {
  1030. govtType: govtType,
  1031. deptName: deptName,
  1032. officeName: officeName
  1033. },
  1034. success: function (data) {
  1036. if ($.fn.DataTable.isDataTable('#GovtTypePersonDatatable')) {
  1037. govtTypePersonTable.destroy();
  1038. $('#GovtTypePersonDatatable tbody').empty();
  1039. }
  1041. let rows = '';
  1042. data.forEach((row, index) => {
  1043. rows += `
  1044. <tr>
  1045. <td class="text-center">${index + 1}</td> <!-- ✅ S.No -->
  1046. <td class="text-center">${row.unique_no}</td>
  1047. <td>${row.name}</td>
  1048. <td class="text-center">${row.sex ?? ''}</td>
  1049. <td>${row.r_mobile_no ?? ''}</td>
  1050. <td>${row.new_designation ?? ''}</td>
  1051. <td>${row.dept_name ?? ''}</td>
  1052. <td>${row.office_name ?? ''}</td>
  1053. <td class="text-center">${row.govt_type}</td>
  1054. <td>${row.office_address ?? ''}</td>
  1055. <td>${row.residential_address ?? ''}</td>
  1056. <td>${row.native_constituency ?? ''}</td>
  1057. <td>${row.residential_constituency ?? ''}</td>
  1058. <td>${row.elector_constituency ?? ''}</td>
  1059. <td>${row.working_constituency ?? ''}</td>
  1060. </tr>
  1061. `;
  1062. });
  1064. $('#GovtTypePersonDatatable tbody').html(rows);
  1066. const isMobile = window.innerWidth <= 768;
  1068. govtTypePersonTable = $('#GovtTypePersonDatatable').DataTable({
  1069. dom: 'Bfrtip', // 🔥 Buttons + filter + table + pagination
  1070. autoWidth: false,
  1071. responsive: false,
  1072. ordering: true,
  1073. searching: true,
  1074. paging: true,
  1075. pageLength: 10,
  1076. fixedHeader: false,
  1078. buttons: [
  1079. {
  1080. extend: 'copy',
  1081. text: 'Copy'
  1082. },
  1083. {
  1084. extend: 'excelHtml5',
  1085. text: 'Excel',
  1086. title: pdfHeading
  1087. },
  1088. {
  1089. extend: 'csvHtml5',
  1090. text: 'CSV',
  1091. title: pdfHeading
  1092. },
  1093. /* {
  1094. extend: 'pdfHtml5',
  1095. text: 'PDF',
  1096. title: '',
  1097. orientation: 'landscape',
  1098. pageSize: 'A3',
  1099. exportOptions: { columns: ':visible' },
  1101. customize: function (doc) {
  1103. // Page setup
  1104. doc.pageMargins = [10, 50, 10, 20];
  1105. doc.defaultStyle.fontSize = 11;
  1107. // Title
  1108. doc.content.unshift({
  1109. text: pdfHeading,
  1110. alignment: 'center',
  1111. fontSize: 14,
  1112. bold: true,
  1113. margin: [0, 0, 0, 10]
  1114. });
  1116. // Header style
  1117. doc.styles.tableHeader.fontSize = 12;
  1118. doc.styles.tableHeader.alignment = 'center';
  1120. // 🔥 IMPORTANT: Adjust column widths
  1121. doc.content[1].table.widths = [
  1122. 30, // S.No
  1123. 50, // Unique No
  1124. 85, // Name
  1125. 30, // Sex
  1126. 65, // Mobile
  1127. 80, // Designation
  1128. 85, // Department
  1129. 90, // Office
  1130. 40, // Govt Type
  1131. 120, // Office Address
  1132. 120, // Residential Address
  1133. 60, // Native AC
  1134. 60, // Residential AC
  1135. 60, // Elector AC
  1136. 70 // ✅ Working AC (FIXED WIDTH)
  1137. ];
  1139. // Enable wrapping for all cells
  1140. doc.content[1].table.body.forEach(function (row, i) {
  1141. row.forEach(function (cell) {
  1142. if (typeof cell === 'object') {
  1143. cell.noWrap = false;
  1144. }
  1145. });
  1146. });
  1147. }
  1150. } */
  1151. ],
  1155. columnDefs: [
  1156. { width: "60px", targets: 0 },
  1157. { width: "90px", targets: 1 },
  1158. { width: "180px", targets: 2 },
  1159. { width: "60px", targets: 3 },
  1160. { width: "120px", targets: 4 },
  1161. { width: "200px", targets: 5 },
  1162. { width: "220px", targets: 6 },
  1163. { width: "250px", targets: 7 },
  1164. { width: "80px", targets: 8 },
  1165. { width: "260px", targets: 9 },
  1166. { width: "260px", targets: 10 },
  1167. { width: "140px", targets: 11 },
  1168. { width: "140px", targets: 12 },
  1169. { width: "140px", targets: 13 },
  1170. { width: "140px", targets: 14 }
  1171. ]
  1172. });
  1176. $('#govtTypePersonModal').modal('show');
  1177. },
  1178. error: function () {
  1179. alert('Error loading person details');
  1180. }
  1181. });
  1182. }
  1186. //ak
  1187. let categorySummaryTable = null;
  1188. function openCategorySummaryModal(category) {
  1190. $('#categorySummaryTitle').text(category.replaceAll('_', ' '));
  1192. $.ajax({
  1193. url: '/election/api/dataentryadmin/dashboard/category-summary',
  1194. type: 'GET',
  1195. data: { category: category },
  1197. success: function (data) {
  1198. // destroy old table
  1199. if ($.fn.DataTable.isDataTable('#categorySummaryTable')) {
  1200. categorySummaryTable.destroy();
  1201. $('#categorySummaryBody').empty();
  1202. }
  1204. let rows = '';
  1206. data.forEach((row, index) => {
  1208. rows += `
  1209. <tr>
  1210. <td>${index + 1}</td>
  1211. <td>${row.ac_display ?? ''}</td>
  1212. <td>${row.dept_name ?? ''}</td>
  1213. <td>${row.office_address ?? ''}</td>
  1214. <td class="text-center">
  1215. <a href="#" onclick="openCategoryPersonModal(
  1216. '${category}',
  1217. '${row.work_ac_no}',
  1218. '${row.dept_name}',
  1219. '${row.office_name}'
  1220. )">
  1221. ${row.total_count}
  1222. </a>
  1223. </td>
  1224. </tr>
  1225. `;
  1226. });
  1228. $('#categorySummaryBody').html(rows);
  1229. categorySummaryTable = $('#categorySummaryTable').DataTable({
  1230. dom: 'Bfrtip',
  1231. pageLength: 10,
  1232. ordering: true,
  1233. searching: true,
  1235. buttons: [
  1237. {
  1238. extend: 'excelHtml5',
  1239. text: 'Excel',
  1240. title: category
  1241. },
  1243. {
  1244. extend: 'pdfHtml5',
  1245. text: 'PDF',
  1246. title: category,
  1247. orientation: 'landscape',
  1248. pageSize: 'A4'
  1249. }
  1250. ]
  1251. });
  1252. $('#categorySummaryModal').modal('show');
  1253. }
  1254. });
  1255. }
  1256. /*function openCompletedPivotModal() {
  1258. $('#pageLoader').show();
  1260. $.get('/election/api/dataentryadmin/dashboard/training-centre-category-pivot', function(data) {
  1261. if ($.fn.DataTable.isDataTable('#completedPivotTable')) {
  1262. $('#completedPivotTable').DataTable().destroy();
  1263. }
  1264. let rows = '';
  1266. function getCell(c) {
  1267. if (!c) return '-';
  1269. return `
  1270. <div style="text-align:left; font-size:13px; line-height:1.5">
  1272. <b>Total:</b> ${c.total}<br>
  1274. <b>Image Not Filled:</b> ${c.image_not_filled}<br>
  1276. <b>Phone Not Filled:</b> ${c.phone_not_filled}<br>
  1278. <b>Voter Not Filled:</b> ${c.voter_not_filled}
  1280. </div>
  1281. `;
  1282. }
  1284. data.forEach((row, index) => {
  1286. const cats = row.categories || {};
  1288. rows += `
  1289. <tr>
  1290. <td>${index + 1}</td>
  1291. <td>
  1292. <a href="javascript:void(0)"
  1293. class="text-primary fw-bold text-decoration-underline"
  1294. onclick="openHallWiseModal('${row.training_centre_id}')">
  1295. ${row.training_centre}
  1296. </a>
  1297. </td>
  1299. <td>${getCell(cats.PO)}</td>
  1300. <td>${getCell(cats.PO1)}</td>
  1301. <td>${getCell(cats.PO2)}</td>
  1302. <td>${getCell(cats.PO3)}</td>
  1303. <td>${getCell(cats.PO4)}</td>
  1304. </tr>
  1305. `;
  1306. });
  1308. $('#completedPivotBody').html(rows);
  1309. $('#completedPivotTable').DataTable({
  1310. dom: 'Bfrtip',
  1311. buttons: [
  1312. { extend: 'excelHtml5', text: 'Excel', title: 'Training Summary' },
  1313. { extend: 'pdfHtml5', text: 'PDF', title: 'Training Summary', orientation: 'landscape' }
  1314. ]
  1315. });
  1316. $('#pageLoader').hide();
  1317. $('#completedPivotModal').modal('show');
  1318. })
  1319. .fail(function() {
  1320. $('#pageLoader').hide();
  1321. alert("Error loading data");
  1322. });
  1323. }*/
  1324. function openCompletedPivotModal() {
  1326. $('#pageLoader').show();
  1328. $.get('/election/api/dataentryadmin/dashboard/training-centre-category-pivot', function (data) {
  1330. if ($.fn.DataTable.isDataTable('#completedPivotTable')) {
  1331. $('#completedPivotTable').DataTable().destroy();
  1332. }
  1334. let rows = '';
  1336. // 🔥 return 4 columns
  1337. function getCells(c) {
  1338. if (!c) {
  1339. return `<td>0</td><td>0</td><td>0</td><td>0</td>`;
  1340. }
  1342. return `
  1343. <td>${c.total}</td>
  1344. <td>${c.image_not_filled}</td>
  1345. <td>${c.phone_not_filled}</td>
  1346. <td>${c.voter_not_filled}</td>
  1347. `;
  1348. }
  1350. data.forEach((row, index) => {
  1352. const cats = row.categories || {};
  1354. rows += `
  1355. <tr>
  1356. <td>${index + 1}</td>
  1358. <td>
  1359. <a href="javascript:void(0)"
  1360. class="text-primary fw-bold text-decoration-underline"
  1361. onclick="openHallWiseModal('${row.training_centre_id}')">
  1362. ${row.training_centre}
  1363. </a>
  1364. </td>
  1366. ${getCells(cats.PO)}
  1367. ${getCells(cats.PO1)}
  1368. ${getCells(cats.PO2)}
  1369. ${getCells(cats.PO3)}
  1370. ${getCells(cats.PO4)}
  1372. </tr>
  1373. `;
  1374. });
  1376. $('#completedPivotBody').html(rows);
  1378. // 🔥 DATATABLE (IMPORTANT SETTINGS)
  1379. $('#completedPivotTable').DataTable({
  1380. destroy: true,
  1381. fixedHeader: false,
  1382. dom: 'Bfrtip',
  1383. scrollX: true,
  1384. info: true,
  1385. autoWidth: false,
  1386. ordering: false,
  1387. responsive: false,
  1388. lengthMenu: [
  1389. [100, 200, 500, -1],
  1390. ['100 rows', '200 rows', 'Show all']
  1391. ],
  1393. columnDefs: [
  1394. { width: "150px", targets: 1 }
  1396. ],
  1398. buttons: [
  1399. { extend: 'excelHtml5', text: 'Excel', title: 'Training Summary' },
  1400. { extend: 'pdfHtml5', text: 'PDF', title: 'Training Summary', orientation: 'landscape', pageSize: 'A3' }
  1401. ]
  1402. });
  1404. $('#pageLoader').hide();
  1405. $('#completedPivotModal').modal('show');
  1407. $('#completedPivotModal').on('shown.bs.modal', function () {
  1408. setTimeout(() => {
  1409. $('#completedPivotTable').DataTable().columns.adjust();
  1410. }, 200);
  1411. });
  1412. })
  1413. .fail(function () {
  1414. $('#pageLoader').hide();
  1415. alert("Error loading data");
  1416. });
  1417. }
  1418. /*function openHallWiseModal(centreId) {
  1420. $('#pageLoader').show();
  1422. $.ajax({
  1423. url: '/election/api/dataentryadmin/dashboard/hall-wise-pivot',
  1424. type: 'GET',
  1425. data: { trainingCentreId: centreId },
  1427. success: function(data) {
  1428. if ($.fn.DataTable.isDataTable('#hallPivotTable')) {
  1429. $('#hallPivotTable').DataTable().destroy();
  1430. }
  1432. let rows = '';
  1434. data.forEach((row, index) => {
  1436. const cats = row.categories || {};
  1438. function cell(c) {
  1439. if (!c) return '-';
  1441. return `
  1442. <b>Total:</b> ${c.total}<br>
  1443. <b>Image Not Filled:</b> ${c.image_not_filled}<br>
  1444. <b>Phone Not Filled:</b> ${c.phone_not_filled}<br>
  1445. <b>Voter Not Filled:</b> ${c.voter_not_filled}
  1446. `;
  1447. }
  1449. rows += `
  1450. <tr>
  1451. <td>${index + 1}</td>
  1452. <td>
  1453. <a href="javascript:void(0)"
  1454. class="text-primary fw-bold text-decoration-underline"
  1455. onclick="openPersonList('${centreId}', '${row.hall_no}')">
  1456. ${row.hall_no}
  1457. </a>
  1458. </td>
  1460. <td>${cell(cats.PO)}</td>
  1461. <td>${cell(cats.PO1)}</td>
  1462. <td>${cell(cats.PO2)}</td>
  1463. <td>${cell(cats.PO3)}</td>
  1464. <td>${cell(cats.PO4)}</td>
  1465. </tr>
  1466. `;
  1467. });
  1469. $('#hallPivotBody').html(rows);
  1470. $('#hallPivotTable').DataTable({
  1471. dom: 'Bfrtip',
  1472. buttons: [
  1473. { extend: 'excelHtml5', text: 'Excel', title: 'Hall Summary' },
  1474. { extend: 'pdfHtml5', text: 'PDF', title: 'Hall Summary', orientation: 'landscape' }
  1475. ]
  1476. });
  1477. $('#pageLoader').hide();
  1478. $('#hallPivotModal').modal('show');
  1479. },
  1481. error: function() {
  1482. $('#pageLoader').hide();
  1483. alert("Error loading hall data");
  1484. }
  1485. });
  1487. }*/
  1488. /*function openHallWiseModal(centreId) {
  1490. $('#pageLoader').show();
  1492. $.ajax({
  1493. url: '/election/api/dataentryadmin/dashboard/hall-wise-pivot',
  1494. type: 'GET',
  1495. data: { trainingCentreId: centreId },
  1497. success: function(data) {
  1499. if ($.fn.DataTable.isDataTable('#hallPivotTable')) {
  1500. $('#hallPivotTable').DataTable().destroy();
  1501. }
  1503. let rows = '';
  1505. // 🔥 return 4 columns
  1506. function getCells(c) {
  1507. if (!c) {
  1508. return `<td>0</td><td>0</td><td>0</td><td>0</td>`;
  1509. }
  1511. return `
  1512. <td>${c.total}</td>
  1513. <td>${c.image_not_filled}</td>
  1514. <td>${c.phone_not_filled}</td>
  1515. <td>${c.voter_not_filled}</td>
  1516. `;
  1517. }
  1519. data.forEach((row, index) => {
  1521. const cats = row.categories || {};
  1523. rows += `
  1524. <tr>
  1525. <td>${index + 1}</td>
  1527. <td>
  1528. <a href="javascript:void(0)"
  1529. class="text-primary fw-bold text-decoration-underline"
  1530. onclick="openPersonList('${centreId}', '${row.hall_no}')">
  1531. ${row.hall_no}
  1532. </a>
  1533. </td>
  1535. ${getCells(cats.PO)}
  1536. ${getCells(cats.PO1)}
  1537. ${getCells(cats.PO2)}
  1538. ${getCells(cats.PO3)}
  1539. ${getCells(cats.PO4)}
  1541. </tr>
  1542. `;
  1543. });
  1545. $('#hallPivotBody').html(rows);
  1547. // 🔥 SIMPLE DATATABLE (avoid misalignment)
  1548. $('#hallPivotTable').DataTable({
  1549. destroy: true,
  1550. dom: 'Bfrtip',
  1551. scrollX: true,
  1552. autoWidth: false,
  1553. ordering: false,
  1555. buttons: [
  1556. { extend: 'excelHtml5', text: 'Excel', title: 'Hall Summary' },
  1557. { extend: 'pdfHtml5', text: 'PDF', title: 'Hall Summary', orientation: 'landscape', pageSize: 'A3' }
  1558. ]
  1559. });
  1561. $('#pageLoader').hide();
  1562. $('#hallPivotModal').modal('show');
  1564. // 🔥 FIX ALIGNMENT AFTER MODAL OPEN
  1565. $('#hallPivotModal').on('shown.bs.modal', function () {
  1566. setTimeout(() => {
  1567. $('#hallPivotTable').DataTable().columns.adjust();
  1568. }, 200);
  1569. });
  1570. },
  1572. error: function() {
  1573. $('#pageLoader').hide();
  1574. alert("Error loading hall data");
  1575. }
  1576. });
  1577. }*/
  1578. function openHallWiseModal(centreId) {
  1580. $('#pageLoader').show();
  1582. $.ajax({
  1583. url: '/election/api/dataentryadmin/dashboard/hall-wise-pivot',
  1584. type: 'GET',
  1585. data: { trainingCentreId: centreId },
  1587. success: function (data) {
  1589. if ($.fn.DataTable.isDataTable('#hallPivotTable')) {
  1590. $('#hallPivotTable').DataTable().destroy();
  1591. }
  1593. let rows = '';
  1595. // 🔥 clickable cells
  1596. /*function getCells(c, hallNo, category) {
  1598. if (!c) {
  1599. return `<td>0</td><td>0</td><td>0</td><td>0</td>`;
  1600. }
  1602. return `
  1603. <td>${c.total}</td>
  1605. <td>
  1606. <a href="javascript:void(0)"
  1607. class="text-primary fw-bold text-decoration-underline"
  1608. onclick="openPersonList('${centreId}','${hallNo}','${category}','IMAGE')">
  1609. ${c.image_not_filled}
  1610. </a>
  1611. </td>
  1613. <td>
  1614. <a href="javascript:void(0)"
  1615. class="text-primary fw-bold text-decoration-underline"
  1616. onclick="openPersonList('${centreId}','${hallNo}','${category}','PHONE')">
  1617. ${c.phone_not_filled}
  1618. </a>
  1619. </td>
  1621. <td>
  1622. <a href="javascript:void(0)"
  1623. class="text-primary fw-bold text-decoration-underline"
  1624. onclick="openPersonList('${centreId}','${hallNo}','${category}','VOTER')">
  1625. ${c.voter_not_filled}
  1626. </a>
  1627. </td>
  1628. `;
  1629. }*/
  1630. function getCells(c, hallNo, category) {
  1632. if (!c) {
  1633. return `<td>0</td><td>0</td><td>0</td><td>0</td>`;
  1634. }
  1636. return `
  1637. <td>${c.total}</td>
  1639. <td>
  1640. ${c.image_not_filled > 0
  1641. ? `<a href="javascript:void(0)"
  1642. class="text-primary fw-bold text-decoration-underline"
  1643. onclick="openPersonList('${centreId}','${hallNo}','${category}','IMAGE')">
  1644. ${c.image_not_filled}
  1645. </a>`
  1646. : `<span>${c.image_not_filled}</span>`
  1647. }
  1648. </td>
  1650. <td>
  1651. ${c.phone_not_filled > 0
  1652. ? `<a href="javascript:void(0)"
  1653. class="text-primary fw-bold text-decoration-underline"
  1654. onclick="openPersonList('${centreId}','${hallNo}','${category}','PHONE')">
  1655. ${c.phone_not_filled}
  1656. </a>`
  1657. : `<span>${c.phone_not_filled}</span>`
  1658. }
  1659. </td>
  1661. <td>
  1662. ${c.voter_not_filled > 0
  1663. ? `<a href="javascript:void(0)"
  1664. class="text-primary fw-bold text-decoration-underline"
  1665. onclick="openPersonList('${centreId}','${hallNo}','${category}','VOTER')">
  1666. ${c.voter_not_filled}
  1667. </a>`
  1668. : `<span>${c.voter_not_filled}</span>`
  1669. }
  1670. </td>
  1671. `;
  1672. }
  1674. data.forEach((row, index) => {
  1676. const cats = row.categories || {};
  1678. rows += `
  1679. <tr>
  1680. <td>${index + 1}</td>
  1681. <td>${row.hall_no}</td>
  1683. ${getCells(cats.PO, row.hall_no, 'PO')}
  1684. ${getCells(cats.PO1, row.hall_no, 'PO1')}
  1685. ${getCells(cats.PO2, row.hall_no, 'PO2')}
  1686. ${getCells(cats.PO3, row.hall_no, 'PO3')}
  1687. ${getCells(cats.PO4, row.hall_no, 'PO4')}
  1689. </tr>
  1690. `;
  1691. });
  1693. $('#hallPivotBody').html(rows);
  1695. $('#hallPivotTable').DataTable({
  1696. destroy: true,
  1697. dom: 'Bfrtip',
  1698. scrollX: true,
  1699. autoWidth: false,
  1700. ordering: false,
  1701. buttons: [
  1702. { extend: 'excelHtml5', text: 'Excel', title: 'Hall Summary' },
  1703. { extend: 'pdfHtml5', text: 'PDF', title: 'Hall Summary', orientation: 'landscape', pageSize: 'A3' }
  1704. ]
  1705. });
  1707. $('#pageLoader').hide();
  1708. $('#hallPivotModal').modal('show');
  1710. setTimeout(() => {
  1711. $('#hallPivotTable').DataTable().columns.adjust();
  1712. }, 200);
  1713. }
  1714. });
  1715. }
  1716. /*function openPersonList(centreId, hallNo) {
  1718. $('#pageLoader').show();
  1720. $.ajax({
  1721. url: '/election/api/dataentryadmin/dashboard/hall-persons',
  1722. type: 'GET',
  1723. data: {
  1724. trainingCentreId: centreId,
  1725. hallNo: hallNo
  1726. },
  1727. success: function(data) {
  1728. if ($.fn.DataTable.isDataTable('#personTable')) {
  1729. $('#personTable').DataTable().destroy();
  1730. }
  1732. let rows = '';
  1734. data.forEach((row, index) => {
  1736. rows += `
  1737. <tr>
  1738. <td>${index + 1}</td>
  1739. <td>${row.name}</td>
  1740. <td>${row.designation}</td>
  1741. <td>${row.office}</td>
  1742. <td>${row.mobile}</td>
  1743. <td>${row.category}</td>
  1744. <td>
  1745. ${row.img_full_path ?
  1746. `<img src="${row.img_full_path}" width="60" height="60"/>`
  1747. : ''
  1748. }
  1749. </td>
  1750. </tr>
  1751. `;
  1752. });
  1754. $('#personTableBody').html(rows);
  1756. $('#personTable').DataTable({
  1757. dom: 'Bfrtip',
  1758. buttons: [
  1759. { extend: 'excelHtml5', text: 'Excel', title: 'Person Details' },
  1760. { extend: 'pdfHtml5', text: 'PDF', title: 'Person Details', orientation: 'landscape' }
  1761. ]
  1762. });
  1764. $('#pageLoader').hide();
  1765. $('#personModal').modal('show');
  1766. }
  1767. });
  1768. }*/
  1770. function openPersonList(centreId, hallNo, category, type) {
  1772. $('#pageLoader').show();
  1774. $.ajax({
  1775. url: '/election/api/dataentryadmin/dashboard/hall-persons',
  1776. type: 'GET',
  1777. data: {
  1778. trainingCentreId: centreId,
  1779. hallNo: hallNo,
  1780. category: category,
  1781. type: type
  1782. },
  1784. success: function (data) {
  1785. console.log(data);
  1787. if ($.fn.DataTable.isDataTable('#personTable')) {
  1788. $('#personTable').DataTable().destroy();
  1789. }
  1791. let rows = '';
  1793. data.forEach((row, index) => {
  1795. rows += `
  1796. <tr>
  1797. <td>${index + 1}</td>
  1798. <td class="text-center">${row.unique_no}</td>
  1799. <td class="text-center">${row.hall_no}</td>
  1800. <td class="text-wrap">${row.name}</td>
  1801. <td>${row.designation}</td>
  1802. <td>${row.office}</td>
  1803. <td>${row.mobile || '-'}</td>
  1804. <td>${row.category}</td>
  1806. <td>
  1807. ${row.img_full_path
  1808. ? `<img src="${row.img_full_path}" width="60" height="60"/>`
  1809. : '-'
  1810. }
  1811. </td>
  1812. </tr>
  1813. `;
  1814. });
  1816. $('#personTableBody').html(rows);
  1818. $('#personTable').DataTable({
  1819. destroy: true,
  1820. dom: 'Bfrtip',
  1822. scrollX: true,
  1823. autoWidth: false,
  1824. lengthMenu: [
  1825. [25, 100, 200, 500, -1],
  1826. ['25 rows', '100 rows', '200 rows', 'Show all']
  1827. ],
  1828. buttons: [
  1829. { extend: 'excelHtml5', text: 'Excel', title: 'Person Details' },
  1830. { extend: 'pdfHtml5', text: 'PDF', title: 'Person Details', orientation: 'landscape' }
  1831. ]
  1832. });
  1834. $('#pageLoader').hide();
  1835. $('#personModal').modal('show');
  1836. }
  1837. });
  1838. }
  1840. </script>
  1843. </body>
  1845. </html>