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.

1131 lines
46 KiB

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. <hr>
  294. <p style="font-weight: bold;font-size: medium;text-decoration: underline;">Zone Benefits</p>
  295. <div class="row mt-2" id="sec2">
  296. <!-- GPF -->
  297. <div class="col-md-4 mb-2">
  298. <label class="form-label fw-bold">GPF</label>
  299. <div class="d-flex align-items-center gap-5">
  300. <div class="form-check">
  301. <input class="form-check-input" type="radio" id="gpfYes" name="gpf" value="yes">
  302. <label class="form-check-label" for="gpfYes">Yes</label>
  303. </div>
  304. <div class="form-check">
  305. <input class="form-check-input" type="radio" id="gpfNo" name="gpf" value="no">
  306. <label class="form-check-label" for="gpfNo">No</label>
  307. </div>
  308. <div class="form-check">
  309. <input class="form-check-input" type="radio" id="gpf50" name="gpf" value="90">
  310. <label class="form-check-label" for="gpf50">90%</label>
  311. </div>
  312. </div>
  313. <!-- Placeholder for dynamically added input -->
  314. <div id="gpfAmountDiv" class="mt-3" style="display: none;">
  315. <label for="gpfAmount" class="form-label">Enter GPF Amount</label>
  316. <input type="number" id="gpfAmount" class="form-control" placeholder="Enter GPF amount" min="1" oninput="validatePositiveNumber(this)">
  317. </div>
  318. </div>
  319. <!-- Earned Leave & Leave on Private Affairs -->
  320. <div class="col-md-4 mb-2">
  321. <label class="form-label fw-bold">Earned Leave & Leave on Private Affairs</label>
  322. <div class="d-flex align-items-center gap-5">
  323. <div class="form-check">
  324. <input class="form-check-input" type="radio" id="earnedleaveYes" name="earnedleave" value="yes">
  325. <label class="form-check-label" for="earnedleaveYes">Yes</label>
  326. </div>
  327. <div class="form-check">
  328. <input class="form-check-input" type="radio" id="earnedleaveNo" name="earnedleave" value="no">
  329. <label class="form-check-label" for="earnedleaveNo">No</label>
  330. </div>
  331. </div>
  332. <!-- Placeholder for dynamically added input -->
  333. <div id="earnedleaveAmountDiv" class="mt-3" style="display: none;">
  334. <label for="earnedleaveAmount" class="form-label">Enter EL and LPA Amount</label>
  335. <input type="number" id="earnedleaveAmount" class="form-control" placeholder="Enter Amount" min="1" oninput="validatePositiveNumber(this)">
  336. </div>
  337. </div>
  338. <!-- SPFGS -->
  339. <div class="col-md-4 mb-2">
  340. <label class="form-label fw-bold">SPFGS</label>
  341. <div class="d-flex align-items-center gap-5">
  342. <div class="form-check">
  343. <input class="form-check-input" type="radio" id="spfgsYes" name="spfgs" value="yes">
  344. <label class="form-check-label" for="spfgsYes">Yes</label>
  345. </div>
  346. <div class="form-check">
  347. <input class="form-check-input" type="radio" id="spfgsNo" name="spfgs" value="no">
  348. <label class="form-check-label" for="spfgsNo">No</label>
  349. </div>
  350. </div>
  351. <!-- Placeholder for dynamically added input -->
  352. <div id="spfgsAmountDiv" class="mt-3" style="display: none;">
  353. <label for="spfgsAmount" class="form-label">Enter SPFGS Amount</label>
  354. <input type="number" id="spfgsAmount" class="form-control" placeholder="Enter spfgs Amount" min="1" oninput="validatePositiveNumber(this)">
  355. </div>
  356. </div>
  357. <div class="col-md-4 mb-2">
  358. <label for="recoveryemployeevalue" class="form-label fw-bold">Recovery From Employee</label>
  359. <input type="text" id="recoveryemployeevalue" class="form-control" placeholder="Enter Recovery From Employee">
  360. </div>
  361. <!-- DCRF File is Ready -->
  362. <div class="col-md-4">
  363. <label class="form-label fw-bold">DCRG File is Ready</label>
  364. <div class="d-flex align-items-center gap-5">
  365. <div class="form-check">
  366. <input class="form-check-input" type="radio" id="dcrgYes" name="dcrg" value="yes">
  367. <label class="form-check-label" for="dcrgYes">Yes</label>
  368. </div>
  369. <div class="form-check">
  370. <input class="form-check-input" type="radio" id="dcrgNo" name="dcrg" value="no">
  371. <label class="form-check-label" for="dcrgNo">No</label>
  372. </div>
  373. </div>
  374. </div>
  375. </div>
  376. <hr>
  377. <p style="font-weight: bold;font-size: medium;text-decoration: underline;">Pension Benefits</p>
  378. <div class="row" id="sec3">
  379. <div class="col-md-4 mt-2 mb-2">
  380. <label for="pensionNumber" class="form-label">Pension Number</label>
  381. <input type="number" id="pensionNumber" class="form-control" placeholder="Enter Employee Pension Number" >
  382. </div>
  383. <div class="col-md-4 mt-2 mb-2">
  384. <label for="ledgerNumber" class="form-label">Ledger Number</label>
  385. <input type="number" id="ledgerNumber" class="form-control" placeholder="Enter Ledger Number">
  386. </div>
  387. </div>
  388. <div class="row mt-2">
  389. <div class="col-md-4 mb-2">
  390. <label class="form-label fw-bold">Sanctions Pensions Benefit-Pension</label>
  391. <div class="d-flex align-items-center gap-5">
  392. <div class="form-check">
  393. <input class="form-check-input" type="radio" id="bpYes" name="benefit_pension" value="yes">
  394. <label class="form-check-label" for="bpYes">Yes</label>
  395. </div>
  396. <div class="form-check">
  397. <input class="form-check-input" type="radio" id="bpNo" name="benefit_pension" value="no">
  398. <label class="form-check-label" for="bpNo">No</label>
  399. </div>
  400. </div>
  401. <!-- Placeholder for dynamically added input -->
  402. <div id="PbAmountDiv" class="mt-3" style="display: none;">
  403. <label for="benefit_pension_amount" class="form-label">Enter Pensions Benefit Amount</label>
  404. <input type="number" id="benefit_pension_amount" class="form-control" placeholder="Enter Pensions Benefit Amount" min="1" oninput="validatePositiveNumber(this)">
  405. </div>
  406. </div>
  407. <div class="col-md-4 mb-2">
  408. <label class="form-label fw-bold">Sanctions Pensions Benefit-DCRG</label>
  409. <div class="d-flex align-items-center gap-5">
  410. <div class="form-check">
  411. <input class="form-check-input" type="radio" id="DcrgYes" name="benefit_dcrg" value="yes">
  412. <label class="form-check-label" for="DcrgYes">Yes</label>
  413. </div>
  414. <div class="form-check">
  415. <input class="form-check-input" type="radio" id="DcrgNo" name="benefit_dcrg" value="no">
  416. <label class="form-check-label" for="DcrgNo">No</label>
  417. </div>
  418. </div>
  419. <!-- Placeholder for dynamically added input -->
  420. <div id="dcrgAmountDiv" class="mt-3" style="display: none;">
  421. <label for="benefit_dcrg_amount" class="form-label">Enter Benefit DCRG Amount</label>
  422. <input type="number" id="benefit_dcrg_amount" class="form-control" placeholder="Enter Pensions Benefit DCRG Amount" min="1" oninput="validatePositiveNumber(this)">
  423. </div>
  424. </div>
  425. <div class="col-md-4 mb-2">
  426. <label class="form-label fw-bold">Sanctions Pensions Benefit-Commutation</label>
  427. <div class="d-flex align-items-center gap-5">
  428. <div class="form-check">
  429. <input class="form-check-input" type="radio" id="commutationYes" name="benefit_commutation" value="yes">
  430. <label class="form-check-label" for="commutationYes">Yes</label>
  431. </div>
  432. <div class="form-check">
  433. <input class="form-check-input" type="radio" id="commutationNo" name="benefit_commutation" value="no">
  434. <label class="form-check-label" for="commutationNo">No</label>
  435. </div>
  436. </div>
  437. <!-- Placeholder for dynamically added input -->
  438. <div id="CommutationAmountDiv" class="mt-3" style="display: none;">
  439. <label for="benefit_commutation_amount" class="form-label">Enter Benefit Commutation Amount</label>
  440. <input type="number" id="benefit_commutation_amount" class="form-control" placeholder="Enter Pensions Benefit Commutation Amount" min="1" oninput="validatePositiveNumber(this)">
  441. </div>
  442. </div>
  443. </div>
  444. <!-- file history -->
  445. <div class="col-md-12 mt-4">
  446. <h5>File History</h5>
  447. <div id="fileHistoryContainer" class="file-history-list">
  448. <!-- File History will be dynamically loaded here -->
  449. </div>
  450. </div>
  451. <hr>
  452. <div class="row mt-4">
  453. <div class="col-12 d-flex justify-content-center">
  454. <button id="backbutton" class="btn btn-secondary mt-2" data-dismiss="modal">Back</button>
  455. </div>
  456. </div>
  457. </div>
  458. </div>
  459. </div>
  460. </div>
  461. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  462. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  463. <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
  464. <!-- Bootstrap 5 JS -->
  465. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  466. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  467. <script>
  468. $(document).ready(function () {
  469. // Initialize DataTable
  470. function initializeDataTable() {
  471. $('#AuditDatatable').DataTable({
  472. dom: 'Bftip',
  473. columnDefs: [{ targets: 'no-sort', orderable: false }],
  474. lengthMenu: [
  475. [50, 100, 200, 500, -1],
  476. ['50 rows', '100 rows', '200 rows', 'Show all']
  477. ],
  478. scrollY: '50vh',
  479. buttons: [
  480. { extend: 'pageLength', className: 'btn btn-warning' },
  481. { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
  482. { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
  483. { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
  484. { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
  485. ],
  486. fixedHeader: true,
  487. autoWidth: true,
  488. responsive: true,
  489. searching: true,
  490. paging: true,
  491. info: true,
  492. ordering: false
  493. });
  494. }
  495. // Call once on page load
  496. initializeDataTable();
  497. // Handle Search button click
  498. //const empCode = $('#empCode').val();
  499. const deptId=$('#deptId').text().trim();
  500. $('#pageLoader').show();
  501. $('#audittable').show();
  502. $.ajax({
  503. url: '/gcc/api/fileclosing/getcloseddetails',
  504. type: 'GET',
  505. data: {deptId:deptId },
  506. success: function (response) {
  507. console.log("depatment",deptId);
  508. console.log("response==",response);
  509. let employeeDetails=response;
  510. $('#pageLoader').hide();
  511. if (employeeDetails && employeeDetails.length > 0) {
  512. populateDataTable(employeeDetails); // Function to populate DataTable
  513. } else {
  514. Swal.fire({
  515. icon: "warning",
  516. title: "No Data Found",
  517. text: "No details found.",
  518. confirmButtonText: "OK",
  519. customClass: {
  520. confirmButton: "btn btn-primary"
  521. }
  522. });
  523. }
  524. },
  525. error: function () {
  526. $('#pageLoader').hide();
  527. Swal.fire({
  528. icon: "error",
  529. title: "Error",
  530. text: "An error occurred while fetching data. Please try again.",
  531. confirmButtonText: "OK"
  532. });
  533. }
  534. });
  535. function populateDataTable(data) {
  536. let tbodyHtml = "";
  537. $.each(data, function (index, audit) {
  538. tbodyHtml += `
  539. <tr>
  540. <td class="text-center">${index + 1}</td>
  541. <td class="text-center">${audit.emp_no || 'N/A'}</td>
  542. <td class="text-center">${audit.emp_name || 'N/A'}</td>
  543. <td class="text-center">${audit.dept_name || 'N/A'}</td>
  544. <td class="text-center">${audit.designation || 'N/A'}</td>
  545. <td class="text-center">${audit.file_moved_date ? formatDate(audit.file_moved_date) : 'N/A'}</td>
  546. <td class="text-center">
  547. <button class="btn btn-primary btn-sm view-btn" data-temp-id="${audit.temp_id}">
  548. View
  549. </button>
  550. </td>
  551. </tr>`;
  552. });
  553. // Destroy old DataTable before reinitializing
  554. let table = $('#AuditDatatable').DataTable();
  555. table.clear().destroy();
  556. $('#AuditDatatable tbody').html(tbodyHtml);
  557. // Reinitialize DataTable with updated data
  558. initializeDataTable();
  559. }
  560. function formatDate(dateString) {
  561. if (!dateString) return 'N/A';
  562. let date = new Date(dateString);
  563. return date.toISOString().split('T')[0]; // Format: YYYY-MM-DD
  564. }
  565. });
  566. //model function
  567. function fetchEmployeeDetails(tempId) {
  568. $.ajax({
  569. url: '/gcc/api/fileclosing/getemployeedetails', // API to fetch employee details
  570. type: 'GET',
  571. data: { tempId: tempId }, // Pass EMPLOYEE_CODE as a parameter
  572. success: function (response) {
  573. if (response && response.length > 0) {
  574. let employeeDetails = response[0]; // Access the first object in the array
  575. console.log("response:",response);
  576. //console.log("retirementdate",retirementdate);
  577. // Populate modal fields
  578. $('#employeenomodel').val(employeeDetails.emp_no);
  579. $('#employeename').val(employeeDetails.emp_name);
  580. $('#department').val(employeeDetails.dept_name);
  581. $('#designation').val(employeeDetails.designation);
  582. $('#typeofretirement').val(employeeDetails.type_of_retirement);
  583. $('#classes').val(employeeDetails.retirement_class);
  584. $('#datefile_modal').val(employeeDetails.file_moved_date);
  585. $('#remarks_modal').val(employeeDetails.remarks);
  586. $('#retirementdate').val(employeeDetails.retirement_date);
  587. $('#deathdate').val(employeeDetails.service_death);
  588. // Update the modal title with the employee code
  589. $('#modalEmployeeCode').text(employeeDetails.emp_no);
  590. // Show the modal
  591. $('#returnretrieddetailsModal').modal('show');
  592. //zone benefits fields
  593. if (employeeDetails.gpf === 'yes') {
  594. $('#gpfYes').prop('checked', true); // Disable radio
  595. $('#gpfNo').prop('disabled', true);
  596. $('#gpf50').prop('disabled', true);
  597. $('#gpfAmountDiv').show();
  598. $('#gpfAmount').val(employeeDetails.gpf_amount).prop('readonly', true); // Make input readonly
  599. } else if (employeeDetails.gpf === 'no') {
  600. $('#gpfNo').prop('checked', true);
  601. $('#gpfYes').prop('disabled', true);
  602. $('#gpf50').prop('disabled', true);
  603. $('#gpfAmountDiv').hide();
  604. } else if (employeeDetails.gpf === '90') {
  605. $('#gpf50').prop('checked', true);
  606. $('#gpfYes').prop('disabled', true);
  607. $('#gpfNo').prop('disabled', true);
  608. $('#gpfAmountDiv').show();
  609. $('#gpfAmount').val(employeeDetails.gpf_amount).prop('readonly', true);
  610. }else {
  611. $('#gpf50').prop('disabled', true);
  612. $('#gpfYes').prop('disabled', true);
  613. $('#gpfNo').prop('disabled', true);
  614. $('#gpfAmountDiv').hide();
  615. }
  616. // Populate Earned Leave & Leave on Private Affairs
  617. if (employeeDetails.private_affairs === 'yes') {
  618. $('#earnedleaveYes').prop('checked', true);
  619. $('#earnedleaveNo').prop('disabled', true);
  620. $('#earnedleaveAmountDiv').show();
  621. $('#earnedleaveAmount').val(employeeDetails.private_affairs_amount).prop('readonly', true);
  622. } else if (employeeDetails.private_affairs === 'no') {
  623. $('#earnedleaveNo').prop('checked', true);
  624. $('#earnedleaveYes').prop('disabled', true);
  625. $('#earnedleaveAmountDiv').hide();
  626. } else {
  627. $('#earnedleaveNo').prop('disabled', true);
  628. $('#earnedleaveYes').prop('disabled', true);
  629. $('#earnedleaveAmountDiv').hide();
  630. }
  631. // Populate SPFGS
  632. if (employeeDetails.spfgs === 'yes') {
  633. $('#spfgsYes').prop('checked', true);
  634. $('#spfgsNo').prop('disabled', true);
  635. $('#spfgsAmountDiv').show();
  636. $('#spfgsAmount').val(employeeDetails.spfgs_amount).prop('readonly', true);
  637. } else if (employeeDetails.spfgs === 'no') {
  638. $('#spfgsNo').prop('checked', true);
  639. $('#spfgsYes').prop('disabled', true);
  640. $('#spfgsAmountDiv').hide();
  641. }else {
  642. $('#spfgsNo').prop('disabled', true);
  643. $('#spfgsYes').prop('disabled', true);
  644. $('#spfgsAmountDiv').hide();
  645. }
  646. // Populate Recovery From Employee
  647. $('#recoveryemployeevalue')
  648. .val(employeeDetails.recovery_emp)
  649. .prop('readonly', true); // Make input readonly
  650. // Populate DCRG
  651. if (employeeDetails.dcrg === 'yes') {
  652. $('#dcrgYes').prop('checked', true);
  653. $('#dcrgNo').prop('disabled', true);
  654. }else if (employeeDetails.dcrg === 'no') {
  655. $('#dcrgNo').prop('checked', true);
  656. $('#dcrgYes').prop('disabled', true);
  657. }else {
  658. $('#dcrgNo').prop('disabled', true);
  659. $('#dcrgYes').prop('disabled', true);
  660. }
  661. $('#pensionNumber').val(employeeDetails.pension_number).prop('readonly',true);
  662. $('#ledgerNumber').val(employeeDetails.ledger_number).prop('readonly',true);
  663. $('input[name="benefit_pension"][value="' + employeeDetails.benefit_pension + '"]').prop('checked', true);
  664. if (employeeDetails.benefit_pension === "yes") {
  665. $('#PbAmountDiv').show();
  666. $('#benefit_pension_amount').val(employeeDetails.benefit_pension_amount).prop('readonly',true);
  667. // bpYes bpNo PbAmountDiv benefit_pension_amount
  668. $('#bpYes').prop('checked', true);
  669. $('#bpNo').prop('disabled', true);
  670. } else if(employeeDetails.benefit_pension === "no"){
  671. $('#PbAmountDiv').hide();
  672. $('#bpNo').prop('checked', true);
  673. $('#bpYes').prop('disabled', true);
  674. }
  675. else{
  676. $('#bpNo').prop('disabled', true);
  677. $('#bpYes').prop('disabled', true);
  678. }
  679. $('input[name="benefit_dcrg"][value="' + employeeDetails.benefit_dcrg + '"]').prop('checked', true);
  680. if (employeeDetails.benefit_dcrg === "yes") {
  681. $('#dcrgAmountDiv').show();
  682. $('#benefit_dcrg_amount').val(employeeDetails.benefit_dcrg_amount).prop('readonly',true);
  683. // DcrgYes DcrgNo dcrgAmountDiv benefit_dcrg_amount
  684. $('#DcrgYes').prop('checked', true);
  685. $('#DcrgNo').prop('disabled', true);
  686. } else if(employeeDetails.benefit_dcrg === "no"){
  687. $('#dcrgAmountDiv').hide();
  688. $('#DcrgNo').prop('checked', true);
  689. $('#DcrgYes').prop('disabled', true);
  690. }else {
  691. $('#dcrgAmountDiv').hide();
  692. $('#DcrgNo').prop('disabled', true);
  693. $('#DcrgYes').prop('disabled', true);
  694. }
  695. $('input[name="benefit_commutation"][value="' + employeeDetails.benefit_commutation + '"]').prop('checked', true);
  696. if (employeeDetails.benefit_commutation === "yes") {
  697. $('#CommutationAmountDiv').show();
  698. $('#benefit_commutation_amount').val(employeeDetails.benefit_commutation_amount).prop('readonly',true);
  699. // commutationYes commutationNo CommutationAmountDiv benefit_commutation_amount
  700. $('#commutationYes').prop('checked', true);
  701. $('#commutationNo').prop('disabled', true);
  702. } else if (employeeDetails.benefit_commutation === "no"){
  703. $('#CommutationAmountDiv').hide();
  704. $('#commutationNo').prop('checked', true);
  705. $('#commutationYes').prop('disabled', true);
  706. }else {
  707. $('#CommutationAmountDiv').hide();
  708. $('#commutationNo').prop('disabled', true);
  709. $('#commutationYes').prop('disabled', true);
  710. }
  711. //$('#datefile').val('');
  712. $('#remarks').val('');
  713. document.getElementById('closedbutton').addEventListener('click', function () {
  714. let employeeNo = $('#employeenomodel').val(); // Using jQuery to get the value
  715. // Trigger the save function and pass the value
  716. saveEntryDetails(tempId,employeeNo);
  717. });
  718. } else {
  719. Swal.fire({
  720. icon: 'info',
  721. title: 'No Data',
  722. text: 'No details found for the selected employee.',
  723. confirmButtonText: 'OK',
  724. });
  725. }
  726. },
  727. error: function () {
  728. Swal.fire({
  729. icon: 'error',
  730. title: 'Error',
  731. text: 'Failed to fetch employee details. Please try again.',
  732. confirmButtonText: 'OK',
  733. });
  734. },
  735. });
  736. }
  737. $(document).ready(function () {
  738. $(document).on('click', '.view-btn', function () {
  739. const empCode = $(this).data('id'); // Fetch `data-id` value
  740. const tempId = $(this).data('temp-id'); // Fetch `data-temp-id` value
  741. console.log("empCode====="+empCode);
  742. console.log("tempId====="+tempId);
  743. // Hide the receivedcard section before showing the modal
  744. $("#receivedcard").hide();
  745. fetchEmployeeDetails(tempId); // Call the function to fetch employee details
  746. loadFileHistory(tempId); // Load the file history for the selected employee
  747. });
  748. // Initialize the modal with static backdrop and disabled keyboard closing
  749. $('#returnretrieddetailsModal').modal({
  750. backdrop: 'static',
  751. keyboard: false,
  752. show: false // Ensure it doesn't auto-show on page load
  753. });
  754. // Handle close button click
  755. $('#backbutton').click(function () {
  756. $('#returnretrieddetailsModal').modal('hide');
  757. });
  758. $('.close').click(function () {
  759. $('#returnretrieddetailsModal').modal('hide');
  760. });
  761. // Listen for changes on the GPF radio buttons
  762. document.querySelectorAll('input[name="gpf"]').forEach(radio => {
  763. radio.addEventListener('change', function () {
  764. const gpfAmountDiv = document.getElementById('gpfAmountDiv');
  765. if (this.value === 'yes' || this.value === '90') {
  766. gpfAmountDiv.style.display = 'block'; // Show the input field
  767. } else {
  768. gpfAmountDiv.style.display = 'none'; // Hide the input field
  769. document.getElementById('gpfAmount').value = ''; // Clear the input field
  770. }
  771. });
  772. });
  773. // Listen for changes on the private affaires radio buttons
  774. document.querySelectorAll('input[name="earnedleave"]').forEach(radio => {
  775. radio.addEventListener('change', function () {
  776. const earnedleaveAmountDiv = document.getElementById('earnedleaveAmountDiv');
  777. if (this.value === 'yes') {
  778. earnedleaveAmountDiv.style.display = 'block'; // Show the input field
  779. } else {
  780. earnedleaveAmountDiv.style.display = 'none'; // Hide the input field
  781. document.getElementById('earnedleaveAmount').value = ''; // Clear the input field
  782. }
  783. });
  784. });
  785. // Listen for changes on the spfgs radio buttons
  786. document.querySelectorAll('input[name="spfgs"]').forEach(radio => {
  787. radio.addEventListener('change', function () {
  788. const spfgsAmountDiv = document.getElementById('spfgsAmountDiv');
  789. if (this.value === 'yes') {
  790. spfgsAmountDiv.style.display = 'block'; // Show the input field
  791. } else {
  792. spfgsAmountDiv.style.display = 'none'; // Hide the input field
  793. document.getElementById('spfgsAmount').value = ''; // Clear the input field
  794. }
  795. });
  796. });
  797. document.querySelectorAll('input[name="benefit_pension"]').forEach(radio => {
  798. radio.addEventListener('change', function () {
  799. const PbAmountDiv = document.getElementById('PbAmountDiv');
  800. if (this.value === 'yes') {
  801. PbAmountDiv.style.display = 'block'; // Show the input field
  802. } else {
  803. PbAmountDiv.style.display = 'none'; // Hide the input field
  804. document.getElementById('benefit_pension_amount').value = ''; // Clear the input field
  805. }
  806. });
  807. });
  808. document.querySelectorAll('input[name="benefit_dcrg"]').forEach(radio => {
  809. radio.addEventListener('change', function () {
  810. const dcrgAmountDiv = document.getElementById('dcrgAmountDiv');
  811. if (this.value === 'yes') {
  812. dcrgAmountDiv.style.display = 'block'; // Show the input field
  813. } else {
  814. dcrgAmountDiv.style.display = 'none'; // Hide the input field
  815. document.getElementById('benefit_dcrg_amount').value = ''; // Clear the input field
  816. }
  817. });
  818. });
  819. document.querySelectorAll('input[name="benefit_commutation"]').forEach(radio => {
  820. radio.addEventListener('change', function () {
  821. const CommutationAmountDiv = document.getElementById('CommutationAmountDiv');
  822. if (this.value === 'yes') {
  823. CommutationAmountDiv.style.display = 'block'; // Show the input field
  824. } else {
  825. CommutationAmountDiv.style.display = 'none'; // Hide the input field
  826. document.getElementById('benefit_commutation_amount').value = ''; // Clear the input field
  827. }
  828. });
  829. });
  830. });
  831. function loadFileHistory(tempId) {
  832. $.ajax({
  833. url: '/gcc/api/department/audit/fileMovementhistory', // API endpoint
  834. type: 'GET',
  835. data: { tempId: tempId }, // Pass empCode as a parameter
  836. success: function (response) {
  837. if (response.length > 0) {
  838. let historyHtml = '';
  839. response.forEach(item => {
  840. historyHtml += `
  841. <div class="file-history-item">
  842. <div class="file-history-date">${formatDateTime(item.fileMovedDateHistory)}</div>
  843. <div class="file-history-content">
  844. <div class="file-history-status">${item.fileStatusHistory}</div>
  845. <div class="file-history-remarks">Remarks: ${item.remarksHistory || 'N/A'}</div>
  846. </div>
  847. </div>
  848. `;
  849. });
  850. $('#fileHistoryContainer').html(historyHtml);
  851. } else {
  852. $('#fileHistoryContainer').html('<p>No file history available.</p>');
  853. }
  854. },
  855. error: function () {
  856. $('#fileHistoryContainer').html('<p>Failed to load file history. Please try again later.</p>');
  857. }
  858. });
  859. }
  860. // Function to format date and time
  861. function formatDateTime(dateString) {
  862. const options = {
  863. day: '2-digit',
  864. month: '2-digit',
  865. year: 'numeric',
  866. };
  867. return new Date(dateString).toLocaleDateString('en-GB', options); // Formats as dd-mm-yyyy
  868. }
  869. document.addEventListener("DOMContentLoaded", function() {
  870. // Get today's date
  871. const today = new Date();
  872. // Format the date as DD-MM-YYYY for display
  873. const day = String(today.getDate()).padStart(2, '0');
  874. const month = String(today.getMonth() + 1).padStart(2, '0'); // Months are 0-based
  875. const year = today.getFullYear();
  876. // Combine into DD-MM-YYYY format for display
  877. const formattedDateDisplay = `${day}-${month}-${year}`;
  878. // Set the value of the input field to the current date (in DD-MM-YYYY format for display)
  879. document.getElementById("datefile").value = formattedDateDisplay;
  880. document.getElementById("datefilereceived").value = formattedDateDisplay;
  881. document.getElementById("datefileyes").value = formattedDateDisplay;
  882. });
  883. function convertDateFormat(dateString) {
  884. if (!dateString) return '';
  885. let [day, month, year] = dateString.split('-');
  886. return `${year}-${month}-${day}`;
  887. }
  888. function saveEntryDetails(tempId,empNo) {
  889. let entryDetails = {
  890. empNo:empNo,
  891. tempId: tempId, // Pass the stored tempId value
  892. dateToAudit: convertDateFormat($('#datefile').val()?.trim()),
  893. serviceDeath:$('#deathdate').val(),
  894. remarks: $('#remarks').val(),
  895. deptId:$('#deptId').text().trim(),
  896. filemovedby:$('#userId').text().trim(),
  897. };
  898. console.log("entryDetails:",entryDetails);
  899. $('#closedbutton').prop('disabled', true).text('Processing...');
  900. $.ajax({
  901. url: '/gcc/api/fileclosing/updateDetails',
  902. type: 'POST',
  903. contentType: 'application/json',
  904. data: JSON.stringify(entryDetails),
  905. success: function (response) {
  906. $('#closedbutton').prop('disabled', false).text('Mark as Closed');
  907. Swal.fire({
  908. icon: 'success',
  909. title: 'Success',
  910. text: response,
  911. allowOutsideClick: false,
  912. allowEscapeKey: false,
  913. allowEnterKey: false,
  914. confirmButtonText: 'OK'
  915. }).then((result) => {
  916. if (result.isConfirmed) {
  917. $('#closedbutton').prop('disabled', false).text('Mark as Closed');
  918. window.location.href = "/gcc/departmentfileclosing/fileclosing";
  919. console.log("Continue clicked");
  920. }
  921. });
  922. },
  923. error: function (xhr, status, error) {
  924. $('#auditsubmit').prop('disabled', false).text('Mark as Closed');
  925. Swal.fire({
  926. icon: 'error',
  927. title: 'Error',
  928. text: 'Failed to save details. Please try again.',
  929. confirmButtonText: 'OK'
  930. });
  931. console.error('Error:', xhr.responseText);
  932. }
  933. });
  934. }
  935. </script>
  936. </body>
  937. </html>