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.

1154 lines
47 KiB

2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
2 years ago
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
​
​
​
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
​
2 years ago
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
​
2 years ago
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
2 years ago
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
2 years ago
2 years ago
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/modules/base/head :: head}"></head>
  4. <style>
  5. .required{
  6. color: red;
  7. }
  8. #modalBody h4 {
  9. font-weight: bold;
  10. margin-top: 15px;
  11. margin-bottom: 10px;
  12. }
  13. #modalBody p {
  14. margin: 5px 0;
  15. }
  16. #modalBody hr {
  17. margin: 15px 0;
  18. }
  19. .comment {
  20. margin-bottom: 20px;
  21. }
  22. .comment p {
  23. margin: 0;
  24. }
  25. hr {
  26. border: 1px solid #ccc;
  27. margin-top: 20px;
  28. margin-bottom: 20px;
  29. }
  30. h5 {
  31. font-size: bold;
  32. }
  33. /* Limit the height of the dropdown menu and make it scrollable */
  34. .dropdown-menu {
  35. max-height: 200px; /* Adjust this value as needed */
  36. overflow-y: auto;
  37. }
  38. .col-4 {
  39. font-weight: bold;
  40. text-align: right;
  41. }
  42. .col-8 {
  43. padding-left: 20px;
  44. }
  45. .comment {
  46. padding: 10px 0;
  47. }
  48. .comment .text-muted {
  49. font-size: 0.9em;
  50. color: #6c757d;
  51. }
  52. .comment hr {
  53. border-top: 1px solid #ccc;
  54. }
  55. .comment .btn-link {
  56. font-size: 0.9em;
  57. text-decoration: underline;
  58. color: #007bff;
  59. }
  60. /* Make the modal body scrollable */
  61. #detailsModal .modal-body {
  62. max-height: 70vh; /* Limit the height to 70% of the viewport */
  63. overflow-y: auto; /* Enable vertical scrolling */
  64. }
  65. .card-box {
  66. border-radius: 20px;
  67. box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
  68. }
  69. #followupCard {
  70. transition: transform 0.2s ease; /* Smooth scaling transition */
  71. cursor: pointer; /* Default cursor change */
  72. }
  73. #followupCard:hover {
  74. transform: scale(1.05); /* Slightly scale up on hover */
  75. cursor: pointer; /* Change cursor to hand symbol */
  76. }
  77. .card-block {
  78. padding: 20px;
  79. }
  80. .form-label {
  81. margin-bottom: 0.5rem;
  82. }
  83. input.form-control {
  84. padding: 10px;
  85. }
  86. .form-select {
  87. padding: 10px;
  88. height: 40px;
  89. }
  90. #employeeCard label{
  91. padding-top: 2%;
  92. }
  93. #returnretrieddetailsModal .modal-body{
  94. max-height:80vh;
  95. overflow-y:auto;
  96. }
  97. #returnretrieddetailsModal .col-md-6{
  98. padding-bottom: 10px;
  99. }
  100. .file-history-list {
  101. margin-top: 10px;
  102. padding-left: 0;
  103. }
  104. .file-history-item {
  105. display: flex;
  106. padding: 5px 10px;
  107. font-family: Arial, sans-serif;
  108. align-items: flex-start;
  109. position: relative; /* For vertical line positioning */
  110. margin-bottom: 1px; /* Add space between items */
  111. }
  112. .file-history-item::before {
  113. content: '';
  114. position: absolute;
  115. top: 0;
  116. bottom: 0;
  117. left: 120px; /* Position of the vertical line */
  118. width: 1px;
  119. background-color: #ddd;
  120. }
  121. .file-history-date {
  122. margin-top: 10px;
  123. flex: 0 0 100px;
  124. font-weight: bold;
  125. font-size: 0.8rem;
  126. color: #333;
  127. text-align: center;
  128. white-space: nowrap; /* Prevent wrapping */
  129. }
  130. .file-history-content {
  131. flex: 5;
  132. padding-left: 20px; /* Adds space after the vertical line */
  133. display: flex;
  134. flex-direction: column;
  135. gap: 5px; /* Adds spacing between status and remarks */
  136. white-space: pre-wrap; /* Prevents wrapping */
  137. overflow: visible; /* Prevents content overflow */
  138. text-overflow: ellipsis; /* Adds ellipsis if content exceeds container width */
  139. }
  140. .file-history-remarks {
  141. font-size: 0.8rem;
  142. color: #777;
  143. white-space: pre-wrap; /* Prevent wrapping */
  144. overflow: visible;
  145. text-overflow: ellipsis;
  146. }
  147. .form-check {
  148. margin-right: 30px; /* Adjust space between Yes and No */
  149. }
  150. </style>
  151. <body>
  152. <!--[if lt IE 8]>
  153. <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  154. <![endif]-->
  155. <div class="wrapper">
  156. <!-- header top menu Start -->
  157. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  158. <!-- header top menu end -->
  159. <div class="page-wrap">
  160. <!--=============== Left Menu side Start ================-->
  161. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  162. <!--=============== Left side End ================-->
  163. <div class="main-content">
  164. <div class="container-fluid">
  165. <div class="page-header mb-2">
  166. <div class="row align-items-end">
  167. <div class="col-lg-8">
  168. <div class="page-header-title">
  169. <i class="fa fa-list-alt bg-blue"></i>
  170. <div class="d-inline">
  171. <h5>Closed List</h5>
  172. <span>Retirement file Closed list Due to Service Death</span>
  173. </div>
  174. </div>
  175. </div>
  176. <div class="col-lg-4">
  177. <nav class="breadcrumb-container" aria-label="breadcrumb">
  178. <ol class="breadcrumb">
  179. <li class="breadcrumb-item"><a href="/gcc/index"><i class="ik ik-home"></i></a></li>
  180. <li class="breadcrumb-item" aria-current="page">Retirement File Closing</li>
  181. <li class="breadcrumb-item" aria-current="page">Closed List</li>
  182. </ol>
  183. </nav>
  184. </div>
  185. </div>
  186. </div>
  187. <div class="row mt-4">
  188. <div class="col-md-12">
  189. <div class="card">
  190. <div class="card-block">
  191. <h5 style="font-weight:bold;"> <span th:text="${deptname}" id="deptname"></span>&nbsp;Department</h5>
  192. <h5 style="font-weight:bold;">File Closing List</h5>
  193. <h5 style="font-weight:bold;"><span th:text="${deptId}" id="deptId" style="display:none"></span></h5>
  194. <span th:text="${userId}" id="userId" style="display:none"></span>
  195. <div id="audittable">
  196. <table id="AuditDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
  197. <thead class="thead-dark">
  198. <tr role="row">
  199. <th class="text-center">S.No</th>
  200. <th class="text-center">Employee Code</th>
  201. <th class="text-center">Name </th>
  202. <th class="text-center">Department</th>
  203. <th class="text-center">Designation</th>
  204. <th class="text-center">File Sent Date</th>
  205. <th class="text-center">View</th>
  206. </tr>
  207. </thead>
  208. <tbody style="text-align:center;">
  209. </tbody>
  210. </table>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. <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;">
  219. <div style="position: relative; top: 50%; transform: translateY(-50%);">
  220. <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
  221. <span class="sr-only">Loading...</span>
  222. </div>
  223. <!-- Add the 'Please wait' text below the spinner -->
  224. <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
  225. </div>
  226. </div>
  227. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  228. </div>
  229. </div>
  230. <!-- model box -->
  231. <div class="modal fade" id="returnretrieddetailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  232. <div class="modal-dialog modal-xl" role="document">
  233. <div class="modal-content">
  234. <div class="modal-header">
  235. <h5 class="modal-title" id="detailsModalLabel">
  236. File Closing List- Employee (<span id="modalEmployeeCode"></span>)
  237. </h5>
  238. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  239. <span aria-hidden="true">&times;</span>
  240. </button>
  241. </div>
  242. <div class="modal-body">
  243. <div class="row" id="sec1">
  244. <!-- Employee No -->
  245. <div class="col-md-4">
  246. <label for="employeenomodel" class="form-label fw-bold">Employee No </label>
  247. <input type="number" id="employeenomodel" class="form-control" readonly>
  248. </div>
  249. <!-- Employee Name -->
  250. <div class="col-md-4">
  251. <label for="employeename" class="form-label fw-bold">Employee Name </label>
  252. <input type="text" id="employeename" class="form-control" readonly>
  253. </div>
  254. <!-- Department -->
  255. <div class="col-md-4">
  256. <label for="department" class="form-label fw-bold">Department </label>
  257. <input type="text" id="department" class="form-control" readonly>
  258. </div>
  259. <!-- Designation -->
  260. <div class="col-md-4">
  261. <label for="designation" class="form-label fw-bold">Designation </label>
  262. <input type="text" id="designation" class="form-control" readonly>
  263. </div>
  264. <div class="col-md-4">
  265. <label for="retirementdate" class="form-label fw-bold">Retirement Date </label>
  266. <input type="date" id="retirementdate" class="form-control" readonly>
  267. </div>
  268. <!-- Class -->
  269. <div class="col-md-4">
  270. <label for="classes" class="form-label fw-bold">Class </label>
  271. <input type="text" id="classes" class="form-control" readonly>
  272. </div>
  273. <!-- Type of Retirement -->
  274. <div class="col-md-4">
  275. <label for="typeofretirement" class="form-label fw-bold">Type of Retirement </label>
  276. <input type="text" id="typeofretirement" class="form-control" readonly>
  277. </div>
  278. <!-- Date File Sent to Audit -->
  279. <div class="col-md-4">
  280. <label for="datefile_modal" class="form-label fw-bold">File Updated Date</label>
  281. <input type="date" id="datefile_modal" class="form-control" readonly>
  282. </div>
  283. <div class="col-md-4">
  284. <label for="deathdate" class="form-label fw-bold">Employee Death Date</label>
  285. <input type="date" id="deathdate" class="form-control" readonly>
  286. </div>
  287. <!-- Remarks -->
  288. <div class="col-md-12">
  289. <label for="remarks_modal" class="form-label fw-bold">Comments/Remarks </label>
  290. <textarea id="remarks_modal" class="form-control" rows="4" placeholder="Enter your remarks here" readonly></textarea>
  291. </div>
  292. </div>
  293. <div id="zbcard">
  294. <hr>
  295. <p style="font-weight: bold;font-size: medium;text-decoration: underline;">Zone Benefits</p>
  296. <div class="row mt-2" id="sec2">
  297. <!-- GPF -->
  298. <div class="col-md-4 mb-2">
  299. <label class="form-label fw-bold">GPF</label>
  300. <div class="d-flex align-items-center gap-5">
  301. <div class="form-check">
  302. <input class="form-check-input" type="radio" id="gpfYes" name="gpf" value="yes">
  303. <label class="form-check-label" for="gpfYes">Yes</label>
  304. </div>
  305. <div class="form-check">
  306. <input class="form-check-input" type="radio" id="gpfNo" name="gpf" value="no">
  307. <label class="form-check-label" for="gpfNo">No</label>
  308. </div>
  309. <div class="form-check">
  310. <input class="form-check-input" type="radio" id="gpf50" name="gpf" value="90">
  311. <label class="form-check-label" for="gpf50">90%</label>
  312. </div>
  313. </div>
  314. <!-- Placeholder for dynamically added input -->
  315. <div id="gpfAmountDiv" class="mt-3" style="display: none;">
  316. <label for="gpfAmount" class="form-label">Enter GPF Amount</label>
  317. <input type="number" id="gpfAmount" class="form-control" placeholder="Enter GPF amount" min="1" oninput="validatePositiveNumber(this)">
  318. </div>
  319. </div>
  320. <!-- Earned Leave & Leave on Private Affairs -->
  321. <div class="col-md-4 mb-2">
  322. <label class="form-label fw-bold">Earned Leave & Leave on Private Affairs</label>
  323. <div class="d-flex align-items-center gap-5">
  324. <div class="form-check">
  325. <input class="form-check-input" type="radio" id="earnedleaveYes" name="earnedleave" value="yes">
  326. <label class="form-check-label" for="earnedleaveYes">Yes</label>
  327. </div>
  328. <div class="form-check">
  329. <input class="form-check-input" type="radio" id="earnedleaveNo" name="earnedleave" value="no">
  330. <label class="form-check-label" for="earnedleaveNo">No</label>
  331. </div>
  332. </div>
  333. <!-- Placeholder for dynamically added input -->
  334. <div id="earnedleaveAmountDiv" class="mt-3" style="display: none;">
  335. <label for="earnedleaveAmount" class="form-label">Enter EL and LPA Amount</label>
  336. <input type="number" id="earnedleaveAmount" class="form-control" placeholder="Enter Amount" min="1" oninput="validatePositiveNumber(this)">
  337. </div>
  338. </div>
  339. <!-- SPFGS -->
  340. <div class="col-md-4 mb-2">
  341. <label class="form-label fw-bold">SPFGS</label>
  342. <div class="d-flex align-items-center gap-5">
  343. <div class="form-check">
  344. <input class="form-check-input" type="radio" id="spfgsYes" name="spfgs" value="yes">
  345. <label class="form-check-label" for="spfgsYes">Yes</label>
  346. </div>
  347. <div class="form-check">
  348. <input class="form-check-input" type="radio" id="spfgsNo" name="spfgs" value="no">
  349. <label class="form-check-label" for="spfgsNo">No</label>
  350. </div>
  351. </div>
  352. <!-- Placeholder for dynamically added input -->
  353. <div id="spfgsAmountDiv" class="mt-3" style="display: none;">
  354. <label for="spfgsAmount" class="form-label">Enter SPFGS Amount</label>
  355. <input type="number" id="spfgsAmount" class="form-control" placeholder="Enter spfgs Amount" min="1" oninput="validatePositiveNumber(this)">
  356. </div>
  357. </div>
  358. <div class="col-md-4 mb-2">
  359. <label for="recoveryemployeevalue" class="form-label fw-bold">Recovery From Employee</label>
  360. <input type="text" id="recoveryemployeevalue" class="form-control" placeholder="Enter Recovery From Employee">
  361. </div>
  362. <!-- DCRF File is Ready -->
  363. <div class="col-md-4">
  364. <label class="form-label fw-bold">DCRG File is Ready</label>
  365. <div class="d-flex align-items-center gap-5">
  366. <div class="form-check">
  367. <input class="form-check-input" type="radio" id="dcrgYes" name="dcrg" value="yes">
  368. <label class="form-check-label" for="dcrgYes">Yes</label>
  369. </div>
  370. <div class="form-check">
  371. <input class="form-check-input" type="radio" id="dcrgNo" name="dcrg" value="no">
  372. <label class="form-check-label" for="dcrgNo">No</label>
  373. </div>
  374. </div>
  375. </div>
  376. </div>
  377. </div>
  378. <hr>
  379. <!-- <p style="font-weight: bold;font-size: medium;text-decoration: underline;">Pension Benefits</p>
  380. <div class="row" id="sec3">
  381. <div class="col-md-4 mt-2 mb-2">
  382. <label for="pensionNumber" class="form-label">Pension Number</label>
  383. <input type="number" id="pensionNumber" class="form-control" placeholder="Enter Employee Pension Number" >
  384. </div>
  385. <div class="col-md-4 mt-2 mb-2">
  386. <label for="ledgerNumber" class="form-label">Ledger Number</label>
  387. <input type="number" id="ledgerNumber" class="form-control" placeholder="Enter Ledger Number">
  388. </div>
  389. </div>
  390. <div class="row mt-2">
  391. <div class="col-md-4 mb-2">
  392. <label class="form-label fw-bold">Sanctions Pensions Benefit-Pension</label>
  393. <div class="d-flex align-items-center gap-5">
  394. <div class="form-check">
  395. <input class="form-check-input" type="radio" id="bpYes" name="benefit_pension" value="yes">
  396. <label class="form-check-label" for="bpYes">Yes</label>
  397. </div>
  398. <div class="form-check">
  399. <input class="form-check-input" type="radio" id="bpNo" name="benefit_pension" value="no">
  400. <label class="form-check-label" for="bpNo">No</label>
  401. </div>
  402. </div>
  403. Placeholder for dynamically added input
  404. <div id="PbAmountDiv" class="mt-3" style="display: none;">
  405. <label for="benefit_pension_amount" class="form-label">Enter Pensions Benefit Amount</label>
  406. <input type="number" id="benefit_pension_amount" class="form-control" placeholder="Enter Pensions Benefit Amount" min="1" oninput="validatePositiveNumber(this)">
  407. </div>
  408. </div>
  409. <div class="col-md-4 mb-2">
  410. <label class="form-label fw-bold">Sanctions Pensions Benefit-DCRG</label>
  411. <div class="d-flex align-items-center gap-5">
  412. <div class="form-check">
  413. <input class="form-check-input" type="radio" id="DcrgYes" name="benefit_dcrg" value="yes">
  414. <label class="form-check-label" for="DcrgYes">Yes</label>
  415. </div>
  416. <div class="form-check">
  417. <input class="form-check-input" type="radio" id="DcrgNo" name="benefit_dcrg" value="no">
  418. <label class="form-check-label" for="DcrgNo">No</label>
  419. </div>
  420. </div>
  421. Placeholder for dynamically added input
  422. <div id="dcrgAmountDiv" class="mt-3" style="display: none;">
  423. <label for="benefit_dcrg_amount" class="form-label">Enter Benefit DCRG Amount</label>
  424. <input type="number" id="benefit_dcrg_amount" class="form-control" placeholder="Enter Pensions Benefit DCRG Amount" min="1" oninput="validatePositiveNumber(this)">
  425. </div>
  426. </div>
  427. <div class="col-md-4 mb-2">
  428. <label class="form-label fw-bold">Sanctions Pensions Benefit-Commutation</label>
  429. <div class="d-flex align-items-center gap-5">
  430. <div class="form-check">
  431. <input class="form-check-input" type="radio" id="commutationYes" name="benefit_commutation" value="yes">
  432. <label class="form-check-label" for="commutationYes">Yes</label>
  433. </div>
  434. <div class="form-check">
  435. <input class="form-check-input" type="radio" id="commutationNo" name="benefit_commutation" value="no">
  436. <label class="form-check-label" for="commutationNo">No</label>
  437. </div>
  438. </div>
  439. Placeholder for dynamically added input
  440. <div id="CommutationAmountDiv" class="mt-3" style="display: none;">
  441. <label for="benefit_commutation_amount" class="form-label">Enter Benefit Commutation Amount</label>
  442. <input type="number" id="benefit_commutation_amount" class="form-control" placeholder="Enter Pensions Benefit Commutation Amount" min="1" oninput="validatePositiveNumber(this)">
  443. </div>
  444. </div>
  445. </div> -->
  446. <!-- file history -->
  447. <div class="col-md-12 mt-4">
  448. <h5>File History</h5>
  449. <div id="fileHistoryContainer" class="file-history-list">
  450. <!-- File History will be dynamically loaded here -->
  451. </div>
  452. </div>
  453. <hr>
  454. <div class="row mt-4">
  455. <div class="col-12 d-flex justify-content-center">
  456. <button id="backbutton" class="btn btn-secondary mt-2" data-dismiss="modal">Back</button>
  457. </div>
  458. </div>
  459. </div>
  460. </div>
  461. </div>
  462. </div>
  463. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  464. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  465. <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
  466. <!-- Bootstrap 5 JS -->
  467. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  468. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  469. <script>
  470. $(document).ready(function () {
  471. // Initialize DataTable
  472. function initializeDataTable() {
  473. $('#AuditDatatable').DataTable({
  474. dom: 'Bftip',
  475. columnDefs: [{ targets: 'no-sort', orderable: false }],
  476. lengthMenu: [
  477. [50, 100, 200, 500, -1],
  478. ['50 rows', '100 rows', '200 rows', 'Show all']
  479. ],
  480. scrollY: '50vh',
  481. buttons: [
  482. { extend: 'pageLength', className: 'btn btn-warning' },
  483. { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
  484. { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
  485. { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
  486. { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
  487. ],
  488. fixedHeader: true,
  489. autoWidth: true,
  490. responsive: true,
  491. searching: true,
  492. paging: true,
  493. info: true,
  494. ordering: false
  495. });
  496. }
  497. // Call once on page load
  498. initializeDataTable();
  499. // Handle Search button click
  500. //const empCode = $('#empCode').val();
  501. const deptId=$('#deptId').text().trim();
  502. $('#pageLoader').show();
  503. $('#audittable').show();
  504. $.ajax({
  505. url: '/gcc/api/fileclosing/getcloseddetails',
  506. type: 'GET',
  507. data: {deptId:deptId },
  508. success: function (response) {
  509. console.log("depatment",deptId);
  510. console.log("response==",response);
  511. let employeeDetails=response;
  512. $('#pageLoader').hide();
  513. if (employeeDetails && employeeDetails.length > 0) {
  514. populateDataTable(employeeDetails); // Function to populate DataTable
  515. } else {
  516. Swal.fire({
  517. icon: "warning",
  518. title: "No Data Found",
  519. text: "No details found.",
  520. confirmButtonText: "OK",
  521. customClass: {
  522. confirmButton: "btn btn-primary"
  523. }
  524. });
  525. }
  526. },
  527. error: function () {
  528. $('#pageLoader').hide();
  529. Swal.fire({
  530. icon: "error",
  531. title: "Error",
  532. text: "An error occurred while fetching data. Please try again.",
  533. confirmButtonText: "OK"
  534. });
  535. }
  536. });
  537. function populateDataTable(data) {
  538. let tbodyHtml = "";
  539. $.each(data, function (index, audit) {
  540. tbodyHtml += `
  541. <tr>
  542. <td class="text-center">${index + 1}</td>
  543. <td class="text-center">${audit.emp_no || 'N/A'}</td>
  544. <td class="text-center">${audit.emp_name || 'N/A'}</td>
  545. <td class="text-center">${audit.dept_name || 'N/A'}</td>
  546. <td class="text-center">${audit.designation || 'N/A'}</td>
  547. <td class="text-center">${audit.file_moved_date ? formatDate(audit.file_moved_date,'dd-MM-yyyy' ) : 'N/A'}</td>
  548. <td class="text-center">
  549. <button class="btn btn-primary btn-sm view-btn" data-temp-id="${audit.temp_id}">
  550. View
  551. </button>
  552. </td>
  553. </tr>`;
  554. });
  555. // Destroy old DataTable before reinitializing
  556. let table = $('#AuditDatatable').DataTable();
  557. table.clear().destroy();
  558. $('#AuditDatatable tbody').html(tbodyHtml);
  559. // Reinitialize DataTable with updated data
  560. initializeDataTable();
  561. }
  562. });
  563. function formatDate(dateString, format = 'dd-MM-yyyy') {
  564. if (!dateString) return 'N/A';
  565. // Handle case where date might have time part (e.g., "2024-05-31 00:00:00.0")
  566. let parts = dateString.split(' ')[0].split('-'); // Extract only the date part
  567. if (parts.length !== 3) return 'N/A';
  568. let [year, month, day] = parts; // Assuming date format is "YYYY-MM-DD"
  569. if (format === 'dd-MM-yyyy') {
  570. return `${day}-${month}-${year}`;
  571. } else if (format === 'MM-dd-yyyy') {
  572. return `${month}-${day}-${year}`;
  573. } else {
  574. return dateString; // Default case (return original format)
  575. }
  576. }
  577. //model function
  578. function fetchEmployeeDetails(tempId) {
  579. $.ajax({
  580. url: '/gcc/api/fileclosing/getemployeedetails', // API to fetch employee details
  581. type: 'GET',
  582. data: { tempId: tempId }, // Pass EMPLOYEE_CODE as a parameter
  583. success: function (response) {
  584. if (response && response.length > 0) {
  585. let employeeDetails = response[0]; // Access the first object in the array
  586. console.log("response:",response);
  587. //console.log("retirementdate",retirementdate);
  588. // Populate modal fields
  589. $('#employeenomodel').val(employeeDetails.emp_no);
  590. $('#employeename').val(employeeDetails.emp_name);
  591. $('#department').val(employeeDetails.dept_name);
  592. $('#designation').val(employeeDetails.designation);
  593. $('#typeofretirement').val(employeeDetails.type_of_retirement);
  594. $('#classes').val(employeeDetails.retirement_class);
  595. $('#datefile_modal').val(employeeDetails.file_moved_date);
  596. $('#remarks_modal').val(employeeDetails.remarks);
  597. $('#retirementdate').val(employeeDetails.retirement_date);
  598. $('#deathdate').val(employeeDetails.service_death);
  599. // Update the modal title with the employee code
  600. $('#modalEmployeeCode').text(employeeDetails.emp_no);
  601. // Show the modal
  602. $('#returnretrieddetailsModal').modal('show');
  603. //zone benefits fields
  604. if(employeeDetails.gpf === null){
  605. $('#zbcard').hide();
  606. }
  607. else{
  608. $('#zbcard').show();
  609. if (employeeDetails.gpf === 'yes') {
  610. $('#gpfYes').prop('checked', true); // Disable radio
  611. $('#gpfNo').prop('disabled', true);
  612. $('#gpf50').prop('disabled', true);
  613. $('#gpfAmountDiv').show();
  614. $('#gpfAmount').val(employeeDetails.gpf_amount).prop('readonly', true); // Make input readonly
  615. } else if (employeeDetails.gpf === 'no') {
  616. $('#gpfNo').prop('checked', true);
  617. $('#gpfYes').prop('disabled', true);
  618. $('#gpf50').prop('disabled', true);
  619. $('#gpfAmountDiv').hide();
  620. } else if (employeeDetails.gpf === '90') {
  621. $('#gpf50').prop('checked', true);
  622. $('#gpfYes').prop('disabled', true);
  623. $('#gpfNo').prop('disabled', true);
  624. $('#gpfAmountDiv').show();
  625. $('#gpfAmount').val(employeeDetails.gpf_amount).prop('readonly', true);
  626. }else {
  627. $('#gpf50').prop('disabled', true);
  628. $('#gpfYes').prop('disabled', true);
  629. $('#gpfNo').prop('disabled', true);
  630. $('#gpfAmountDiv').hide();
  631. }
  632. // Populate Earned Leave & Leave on Private Affairs
  633. if (employeeDetails.private_affairs === 'yes') {
  634. $('#earnedleaveYes').prop('checked', true);
  635. $('#earnedleaveNo').prop('disabled', true);
  636. $('#earnedleaveAmountDiv').show();
  637. $('#earnedleaveAmount').val(employeeDetails.private_affairs_amount).prop('readonly', true);
  638. } else if (employeeDetails.private_affairs === 'no') {
  639. $('#earnedleaveNo').prop('checked', true);
  640. $('#earnedleaveYes').prop('disabled', true);
  641. $('#earnedleaveAmountDiv').hide();
  642. } else {
  643. $('#earnedleaveNo').prop('disabled', true);
  644. $('#earnedleaveYes').prop('disabled', true);
  645. $('#earnedleaveAmountDiv').hide();
  646. }
  647. // Populate SPFGS
  648. if (employeeDetails.spfgs === 'yes') {
  649. $('#spfgsYes').prop('checked', true);
  650. $('#spfgsNo').prop('disabled', true);
  651. $('#spfgsAmountDiv').show();
  652. $('#spfgsAmount').val(employeeDetails.spfgs_amount).prop('readonly', true);
  653. } else if (employeeDetails.spfgs === 'no') {
  654. $('#spfgsNo').prop('checked', true);
  655. $('#spfgsYes').prop('disabled', true);
  656. $('#spfgsAmountDiv').hide();
  657. }else {
  658. $('#spfgsNo').prop('disabled', true);
  659. $('#spfgsYes').prop('disabled', true);
  660. $('#spfgsAmountDiv').hide();
  661. }
  662. // Populate Recovery From Employee
  663. $('#recoveryemployeevalue')
  664. .val(employeeDetails.recovery_emp)
  665. .prop('readonly', true); // Make input readonly
  666. // Populate DCRG
  667. if (employeeDetails.dcrg === 'yes') {
  668. $('#dcrgYes').prop('checked', true);
  669. $('#dcrgNo').prop('disabled', true);
  670. }else if (employeeDetails.dcrg === 'no') {
  671. $('#dcrgNo').prop('checked', true);
  672. $('#dcrgYes').prop('disabled', true);
  673. }else {
  674. $('#dcrgNo').prop('disabled', true);
  675. $('#dcrgYes').prop('disabled', true);
  676. }
  677. }
  678. /* $('#pensionNumber').val(employeeDetails.pension_number).prop('readonly',true);
  679. $('#ledgerNumber').val(employeeDetails.ledger_number).prop('readonly',true);
  680. $('input[name="benefit_pension"][value="' + employeeDetails.benefit_pension + '"]').prop('checked', true);
  681. if (employeeDetails.benefit_pension === "yes") {
  682. $('#PbAmountDiv').show();
  683. $('#benefit_pension_amount').val(employeeDetails.benefit_pension_amount).prop('readonly',true);
  684. // bpYes bpNo PbAmountDiv benefit_pension_amount
  685. $('#bpYes').prop('checked', true);
  686. $('#bpNo').prop('disabled', true);
  687. } else if(employeeDetails.benefit_pension === "no"){
  688. $('#PbAmountDiv').hide();
  689. $('#bpNo').prop('checked', true);
  690. $('#bpYes').prop('disabled', true);
  691. }
  692. else{
  693. $('#bpNo').prop('disabled', true);
  694. $('#bpYes').prop('disabled', true);
  695. }
  696. $('input[name="benefit_dcrg"][value="' + employeeDetails.benefit_dcrg + '"]').prop('checked', true);
  697. if (employeeDetails.benefit_dcrg === "yes") {
  698. $('#dcrgAmountDiv').show();
  699. $('#benefit_dcrg_amount').val(employeeDetails.benefit_dcrg_amount).prop('readonly',true);
  700. // DcrgYes DcrgNo dcrgAmountDiv benefit_dcrg_amount
  701. $('#DcrgYes').prop('checked', true);
  702. $('#DcrgNo').prop('disabled', true);
  703. } else if(employeeDetails.benefit_dcrg === "no"){
  704. $('#dcrgAmountDiv').hide();
  705. $('#DcrgNo').prop('checked', true);
  706. $('#DcrgYes').prop('disabled', true);
  707. }else {
  708. $('#dcrgAmountDiv').hide();
  709. $('#DcrgNo').prop('disabled', true);
  710. $('#DcrgYes').prop('disabled', true);
  711. }
  712. $('input[name="benefit_commutation"][value="' + employeeDetails.benefit_commutation + '"]').prop('checked', true);
  713. if (employeeDetails.benefit_commutation === "yes") {
  714. $('#CommutationAmountDiv').show();
  715. $('#benefit_commutation_amount').val(employeeDetails.benefit_commutation_amount).prop('readonly',true);
  716. // commutationYes commutationNo CommutationAmountDiv benefit_commutation_amount
  717. $('#commutationYes').prop('checked', true);
  718. $('#commutationNo').prop('disabled', true);
  719. } else if (employeeDetails.benefit_commutation === "no"){
  720. $('#CommutationAmountDiv').hide();
  721. $('#commutationNo').prop('checked', true);
  722. $('#commutationYes').prop('disabled', true);
  723. }else {
  724. $('#CommutationAmountDiv').hide();
  725. $('#commutationNo').prop('disabled', true);
  726. $('#commutationYes').prop('disabled', true);
  727. }
  728. //$('#datefile').val('');
  729. $('#remarks').val('');
  730. document.getElementById('closedbutton').addEventListener('click', function () {
  731. let employeeNo = $('#employeenomodel').val(); // Using jQuery to get the value
  732. // Trigger the save function and pass the value
  733. saveEntryDetails(tempId,employeeNo);
  734. }); */
  735. } else {
  736. Swal.fire({
  737. icon: 'info',
  738. title: 'No Data',
  739. text: 'No details found for the selected employee.',
  740. confirmButtonText: 'OK',
  741. });
  742. }
  743. },
  744. error: function () {
  745. Swal.fire({
  746. icon: 'error',
  747. title: 'Error',
  748. text: 'Failed to fetch employee details. Please try again.',
  749. confirmButtonText: 'OK',
  750. });
  751. },
  752. });
  753. }
  754. $(document).ready(function () {
  755. $(document).on('click', '.view-btn', function () {
  756. const empCode = $(this).data('id'); // Fetch `data-id` value
  757. const tempId = $(this).data('temp-id'); // Fetch `data-temp-id` value
  758. //console.log("empCode====="+empCode);
  759. console.log("tempId====="+tempId);
  760. // Hide the receivedcard section before showing the modal
  761. $("#receivedcard").hide();
  762. fetchEmployeeDetails(tempId); // Call the function to fetch employee details
  763. loadFileHistory(tempId); // Load the file history for the selected employee
  764. });
  765. // Initialize the modal with static backdrop and disabled keyboard closing
  766. $('#returnretrieddetailsModal').modal({
  767. backdrop: 'static',
  768. keyboard: false,
  769. show: false // Ensure it doesn't auto-show on page load
  770. });
  771. // Handle close button click
  772. $('#backbutton').click(function () {
  773. $('#returnretrieddetailsModal').modal('hide');
  774. });
  775. $('.close').click(function () {
  776. $('#returnretrieddetailsModal').modal('hide');
  777. });
  778. // Listen for changes on the GPF radio buttons
  779. document.querySelectorAll('input[name="gpf"]').forEach(radio => {
  780. radio.addEventListener('change', function () {
  781. const gpfAmountDiv = document.getElementById('gpfAmountDiv');
  782. if (this.value === 'yes' || this.value === '90') {
  783. gpfAmountDiv.style.display = 'block'; // Show the input field
  784. } else {
  785. gpfAmountDiv.style.display = 'none'; // Hide the input field
  786. document.getElementById('gpfAmount').value = ''; // Clear the input field
  787. }
  788. });
  789. });
  790. // Listen for changes on the private affaires radio buttons
  791. document.querySelectorAll('input[name="earnedleave"]').forEach(radio => {
  792. radio.addEventListener('change', function () {
  793. const earnedleaveAmountDiv = document.getElementById('earnedleaveAmountDiv');
  794. if (this.value === 'yes') {
  795. earnedleaveAmountDiv.style.display = 'block'; // Show the input field
  796. } else {
  797. earnedleaveAmountDiv.style.display = 'none'; // Hide the input field
  798. document.getElementById('earnedleaveAmount').value = ''; // Clear the input field
  799. }
  800. });
  801. });
  802. // Listen for changes on the spfgs radio buttons
  803. document.querySelectorAll('input[name="spfgs"]').forEach(radio => {
  804. radio.addEventListener('change', function () {
  805. const spfgsAmountDiv = document.getElementById('spfgsAmountDiv');
  806. if (this.value === 'yes') {
  807. spfgsAmountDiv.style.display = 'block'; // Show the input field
  808. } else {
  809. spfgsAmountDiv.style.display = 'none'; // Hide the input field
  810. document.getElementById('spfgsAmount').value = ''; // Clear the input field
  811. }
  812. });
  813. });
  814. document.querySelectorAll('input[name="benefit_pension"]').forEach(radio => {
  815. radio.addEventListener('change', function () {
  816. const PbAmountDiv = document.getElementById('PbAmountDiv');
  817. if (this.value === 'yes') {
  818. PbAmountDiv.style.display = 'block'; // Show the input field
  819. } else {
  820. PbAmountDiv.style.display = 'none'; // Hide the input field
  821. document.getElementById('benefit_pension_amount').value = ''; // Clear the input field
  822. }
  823. });
  824. });
  825. document.querySelectorAll('input[name="benefit_dcrg"]').forEach(radio => {
  826. radio.addEventListener('change', function () {
  827. const dcrgAmountDiv = document.getElementById('dcrgAmountDiv');
  828. if (this.value === 'yes') {
  829. dcrgAmountDiv.style.display = 'block'; // Show the input field
  830. } else {
  831. dcrgAmountDiv.style.display = 'none'; // Hide the input field
  832. document.getElementById('benefit_dcrg_amount').value = ''; // Clear the input field
  833. }
  834. });
  835. });
  836. document.querySelectorAll('input[name="benefit_commutation"]').forEach(radio => {
  837. radio.addEventListener('change', function () {
  838. const CommutationAmountDiv = document.getElementById('CommutationAmountDiv');
  839. if (this.value === 'yes') {
  840. CommutationAmountDiv.style.display = 'block'; // Show the input field
  841. } else {
  842. CommutationAmountDiv.style.display = 'none'; // Hide the input field
  843. document.getElementById('benefit_commutation_amount').value = ''; // Clear the input field
  844. }
  845. });
  846. });
  847. });
  848. function loadFileHistory(tempId) {
  849. $.ajax({
  850. url: '/gcc/api/department/audit/fileMovementhistory', // API endpoint
  851. type: 'GET',
  852. data: { tempId: tempId }, // Pass empCode as a parameter
  853. success: function (response) {
  854. if (response.length > 0) {
  855. let historyHtml = '';
  856. response.forEach(item => {
  857. historyHtml += `
  858. <div class="file-history-item">
  859. <div class="file-history-date">${formatDateTime(item.fileMovedDateHistory)}</div>
  860. <div class="file-history-content">
  861. <div class="file-history-status">${item.fileStatusHistory}</div>
  862. <div class="file-history-remarks">Remarks: ${item.remarksHistory || 'N/A'}</div>
  863. </div>
  864. </div>
  865. `;
  866. });
  867. $('#fileHistoryContainer').html(historyHtml);
  868. } else {
  869. $('#fileHistoryContainer').html('<p>No file history available.</p>');
  870. }
  871. },
  872. error: function () {
  873. $('#fileHistoryContainer').html('<p>Failed to load file history. Please try again later.</p>');
  874. }
  875. });
  876. }
  877. // Function to format date and time
  878. function formatDateTime(dateString) {
  879. const options = {
  880. day: '2-digit',
  881. month: '2-digit',
  882. year: 'numeric',
  883. };
  884. return new Date(dateString).toLocaleDateString('en-GB', options); // Formats as dd-mm-yyyy
  885. }
  886. /* document.addEventListener("DOMContentLoaded", function() {
  887. // Get today's date
  888. const today = new Date();
  889. // Format the date as DD-MM-YYYY for display
  890. const day = String(today.getDate()).padStart(2, '0');
  891. const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-based
  892. const year = today.getFullYear();
  893. // Combine into DD-MM-YYYY format for display
  894. const formattedDateDisplay = `${day}-${month}-${year}`;
  895. // Set the value of the input field to the current date (in DD-MM-YYYY format for display)
  896. document.getElementById("datefile").value = formattedDateDisplay;
  897. document.getElementById("datefilereceived").value = formattedDateDisplay;
  898. document.getElementById("datefileyes").value = formattedDateDisplay;
  899. }); */
  900. /* function convertDateFormat(dateString) {
  901. if (!dateString) return '';
  902. let [day, month, year] = dateString.split('-');
  903. return `${year}-${month}-${day}`;
  904. }
  905. function saveEntryDetails(tempId,empNo) {
  906. let entryDetails = {
  907. empNo:empNo,
  908. tempId: tempId, // Pass the stored tempId value
  909. dateToAudit: convertDateFormat($('#datefile').val()?.trim()),
  910. serviceDeath:$('#deathdate').val(),
  911. remarks: $('#remarks').val(),
  912. deptId:$('#deptId').text().trim(),
  913. filemovedby:$('#userId').text().trim(),
  914. };
  915. console.log("entryDetails:",entryDetails);
  916. $('#closedbutton').prop('disabled', true).text('Processing...');
  917. $.ajax({
  918. url: '/gcc/api/fileclosing/updateDetails',
  919. type: 'POST',
  920. contentType: 'application/json',
  921. data: JSON.stringify(entryDetails),
  922. success: function (response) {
  923. $('#closedbutton').prop('disabled', false).text('Mark as Closed');
  924. Swal.fire({
  925. icon: 'success',
  926. title: 'Success',
  927. text: response,
  928. allowOutsideClick: false,
  929. allowEscapeKey: false,
  930. allowEnterKey: false,
  931. confirmButtonText: 'OK'
  932. }).then((result) => {
  933. if (result.isConfirmed) {
  934. $('#closedbutton').prop('disabled', false).text('Mark as Closed');
  935. window.location.href = "/gcc/departmentfileclosing/fileclosing";
  936. console.log("Continue clicked");
  937. }
  938. });
  939. },
  940. error: function (xhr, status, error) {
  941. $('#auditsubmit').prop('disabled', false).text('Mark as Closed');
  942. Swal.fire({
  943. icon: 'error',
  944. title: 'Error',
  945. text: 'Failed to save details. Please try again.',
  946. confirmButtonText: 'OK'
  947. });
  948. console.error('Error:', xhr.responseText);
  949. }
  950. });
  951. } */
  952. </script>
  953. </body>
  954. </html>