yoganandhank
/
gccmanpower
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
All GCC vendors and employee details for IT department management
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.
4 Commits
1 Branch
0 Tags
17 MiB
Tree: 608448f162
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '608448f162'
${ noResults }
gccmanpower/src/main/resources/templates/gccservicepaymenttracker/dashboard.html

2150 lines
83 KiB
Raw Normal View History

added payment processing tracker
4 months ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org" lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>GCC Payment Tracker - Dashboard</title>
  9. <!-- CSRF Tokens -->
  10. <meta th:if="${_csrf != null}" name="_csrf" th:content="${_csrf.token}" />
  11. <meta th:if="${_csrf != null}" name="_csrf_header" th:content="${_csrf.headerName}" />
  13. <!-- Google Fonts -->
  14. <link
  15. href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap"
  16. rel="stylesheet">
  18. <!-- Bootstrap & FontAwesome -->
  19. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  20. <link rel="stylesheet" th:href="@{/assets/font-awesome-6.5.2/css/all.min.css}" type="text/css">
  22. <!-- Flatpickr Datepicker -->
  23. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  24. <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  26. <!-- Custom Style Sheet mapping to theme -->
  27. <style>
  28. body {
  29. background-color: #f4f7f6;
  30. font-family: 'Poppins', sans-serif;
  31. color: #333;
  32. }
  34. .header {
  35. background: linear-gradient(135deg, #09303d, #0f5c78);
  36. color: #fff;
  37. padding: 15px 30px;
  38. display: flex;
  39. justify-content: space-between;
  40. align-items: center;
  41. box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  42. }
  44. .logo-left {
  45. display: flex;
  46. align-items: center;
  47. gap: 15px;
  48. }
  50. .logo-left img {
  51. width: 60px;
  52. height: 60px;
  53. }
  55. .logo-text h2 {
  56. font-family: 'Outfit', sans-serif;
  57. font-size: 1.1rem;
  58. font-weight: 700;
  59. margin: 0;
  60. line-height: 1.2;
  61. letter-spacing: 0.5px;
  62. }
  64. .logo-text p {
  65. font-size: 0.7rem;
  66. margin: 0;
  67. color: #aed6f1;
  68. }
  70. .header-title h2 {
  71. font-family: 'Outfit', sans-serif;
  72. font-size: 1.5rem;
  73. font-weight: 700;
  74. margin: 0;
  75. }
  77. .user-menu {
  78. display: flex;
  79. align-items: center;
  80. gap: 15px;
  81. }
  83. .user-badge {
  84. background: rgba(255, 255, 255, 0.15);
  85. padding: 8px 16px;
  86. border-radius: 20px;
  87. font-size: 0.85rem;
  88. font-weight: 600;
  89. display: flex;
  90. align-items: center;
  91. gap: 8px;
  92. }
  94. .btn-logout {
  95. background: #e74c3c;
  96. color: #fff;
  97. border: none;
  98. padding: 8px 16px;
  99. border-radius: 20px;
  100. font-size: 0.85rem;
  101. font-weight: 600;
  102. cursor: pointer;
  103. transition: all 0.3s;
  104. text-decoration: none;
  105. display: inline-flex;
  106. align-items: center;
  107. gap: 6px;
  108. }
  110. .btn-logout:hover {
  111. background: #c0392b;
  112. color: #fff;
  113. transform: translateY(-1.5px);
  114. }
  116. .main-container {
  117. max-width: 95%;
  118. margin: 35px auto;
  119. padding: 0 15px;
  120. }
  122. /* 4 Category Cards Dashboard */
  123. .category-grid {
  124. display: grid;
  125. grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  126. gap: 20px;
  127. margin-bottom: 35px;
  128. }
  130. .category-card {
  131. background: #ffffff;
  132. border: 1px solid #eef2f6;
  133. border-radius: 16px;
  134. padding: 24px;
  135. box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
  136. transition: all 0.3s ease;
  137. position: relative;
  138. overflow: hidden;
  139. cursor: pointer;
  140. display: flex;
  141. align-items: center;
  142. justify-content: space-between;
  143. }
  145. .category-card::before {
  146. content: '';
  147. position: absolute;
  148. top: 0;
  149. left: 0;
  150. width: 5px;
  151. height: 100%;
  152. }
  154. /* SD Card Accent */
  155. .category-card.card-sd::before {
  156. background-color: #0f5c78;
  157. }
  159. .category-card.card-sd.active {
  160. border-color: #0f5c78;
  161. box-shadow: 0 10px 25px rgba(15, 92, 120, 0.15);
  162. background-color: #f0f7f9;
  163. }
  165. /* Invoice Card Accent */
  166. .category-card.card-invoice::before {
  167. background-color: #27ae60;
  168. }
  170. .category-card.card-invoice.active {
  171. border-color: #27ae60;
  172. box-shadow: 0 10px 25px rgba(39, 174, 96, 0.15);
  173. background-color: #f1fbf4;
  174. }
  176. /* EMD Card Accent */
  177. .category-card.card-emd::before {
  178. background-color: #8e44ad;
  179. }
  181. .category-card.card-emd.active {
  182. border-color: #8e44ad;
  183. box-shadow: 0 10px 25px rgba(142, 68, 173, 0.15);
  184. background-color: #f9f2fc;
  185. }
  187. /* BG Card Accent */
  188. .category-card.card-bg::before {
  189. background-color: #1e40af;
  190. }
  192. .category-card.card-bg.active {
  193. border-color: #1e40af;
  194. box-shadow: 0 10px 25px rgba(30, 64, 175, 0.15);
  195. background-color: #eff6ff;
  196. }
  198. /* DC Card Accent */
  199. .category-card.card-dc::before {
  200. background-color: #b91c1c;
  201. }
  203. .category-card.card-dc.active {
  204. border-color: #b91c1c;
  205. box-shadow: 0 10px 25px rgba(185, 28, 28, 0.15);
  206. background-color: #fef2f2;
  207. }
  209. /* ASD Card Accent */
  210. .category-card.card-asd::before {
  211. background-color: #d35400;
  212. }
  214. .category-card.card-asd.active {
  215. border-color: #d35400;
  216. box-shadow: 0 10px 25px rgba(211, 84, 0, 0.15);
  217. background-color: #fdf5e6;
  218. }
  220. /* Agreement Card Accent */
  221. .category-card.card-agreement::before {
  222. background-color: #db2777;
  223. }
  225. .category-card.card-agreement.active {
  226. border-color: #db2777;
  227. box-shadow: 0 10px 25px rgba(219, 39, 119, 0.15);
  228. background-color: #fdf2f8;
  229. }
  231. .category-card:hover {
  232. transform: translateY(-4px);
  233. box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  234. }
  236. .card-left {
  237. display: flex;
  238. flex-direction: column;
  239. gap: 5px;
  240. }
  242. .card-icon {
  243. font-size: 2.2rem;
  244. opacity: 0.85;
  245. transition: all 0.3s;
  246. }
  248. .card-sd .card-icon {
  249. color: #0f5c78;
  250. }
  252. .card-invoice .card-icon {
  253. color: #27ae60;
  254. }
  256. .card-emd .card-icon {
  257. color: #8e44ad;
  258. }
  260. .card-bg .card-icon {
  261. color: #1e40af;
  262. }
  264. .card-dc .card-icon {
  265. color: #b91c1c;
  266. }
  268. .card-asd .card-icon {
  269. color: #d35400;
  270. }
  272. .card-agreement .card-icon {
  273. color: #db2777;
  274. }
  276. .category-card:hover .card-icon {
  277. transform: scale(1.1);
  278. }
  280. .card-title {
  281. font-family: 'Outfit', sans-serif;
  282. font-size: 0.95rem;
  283. font-weight: 700;
  284. color: #64748b;
  285. text-transform: uppercase;
  286. letter-spacing: 0.5px;
  287. margin: 0;
  288. }
  290. .card-value {
  291. font-family: 'Outfit', sans-serif;
  292. font-size: 1.85rem;
  293. font-weight: 800;
  294. color: #1e293b;
  295. margin: 0;
  296. }
  298. /* Filter Section */
  299. .filter-card {
  300. background: #ffffff;
  301. border-radius: 16px;
  302. border: 1px solid #eef2f6;
  303. box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
  304. padding: 24px;
  305. margin-bottom: 30px;
  306. }
  308. .filter-grid {
  309. display: grid;
  310. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  311. gap: 20px;
  312. align-items: end;
  313. }
  315. .filter-group {
  316. display: flex;
  317. flex-direction: column;
  318. gap: 8px;
  319. }
  321. .filter-label {
  322. font-size: 0.8rem;
  323. font-weight: 700;
  324. color: #64748b;
  325. text-transform: uppercase;
  326. letter-spacing: 0.5px;
  327. }
  329. .filter-input {
  330. height: 44px;
  331. border-radius: 10px;
  332. border: 1.5px solid #cbd5e1;
  333. padding: 10px 16px;
  334. font-size: 0.9rem;
  335. font-weight: 500;
  336. color: #334155;
  337. background-color: #f8fafc;
  338. transition: all 0.3s ease;
  339. }
  341. .filter-input:focus {
  342. outline: none;
  343. border-color: #0f5c78;
  344. background-color: #ffffff;
  345. box-shadow: 0 0 0 3px rgba(15, 92, 120, 0.15);
  346. }
  348. .btn-filter-search {
  349. height: 44px;
  350. border-radius: 10px;
  351. border: none;
  352. background: linear-gradient(135deg, #0f5c78, #1781a6);
  353. color: #ffffff;
  354. font-weight: 600;
  355. font-size: 0.9rem;
  356. transition: all 0.3s;
  357. display: flex;
  358. align-items: center;
  359. justify-content: center;
  360. gap: 8px;
  361. cursor: pointer;
  362. box-shadow: 0 4px 10px rgba(15, 92, 120, 0.25);
  363. }
  365. .btn-filter-search:hover {
  366. background: linear-gradient(135deg, #1781a6, #0f5c78);
  367. transform: translateY(-1.5px);
  368. }
  370. .btn-filter-reset {
  371. height: 44px;
  372. border-radius: 10px;
  373. border: 1.5px solid #cbd5e1;
  374. background-color: #ffffff;
  375. color: #475569;
  376. font-weight: 600;
  377. font-size: 0.9rem;
  378. transition: all 0.3s;
  379. display: flex;
  380. align-items: center;
  381. justify-content: center;
  382. gap: 8px;
  383. cursor: pointer;
  384. }
  386. .btn-filter-reset:hover {
  387. background-color: #f1f5f9;
  388. color: #0f5c78;
  389. border-color: #0f5c78;
  390. }
  392. /* Table Card Section */
  393. .table-card {
  394. background: #ffffff;
  395. border-radius: 16px;
  396. border: 1px solid #eef2f6;
  397. box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
  398. padding: 24px;
  399. }
  401. .table-card-header {
  402. display: flex;
  403. justify-content: space-between;
  404. align-items: center;
  405. margin-bottom: 20px;
  406. flex-wrap: wrap;
  407. gap: 15px;
  408. }
  410. .table-card-title {
  411. font-family: 'Outfit', sans-serif;
  412. font-size: 1.25rem;
  413. font-weight: 700;
  414. color: #1e293b;
  415. margin: 0;
  416. display: flex;
  417. align-items: center;
  418. gap: 10px;
  419. }
  421. .active-filter-badge {
  422. background-color: #e2e8f0;
  423. color: #475569;
  424. font-size: 0.78rem;
  425. font-weight: 700;
  426. padding: 5px 12px;
  427. border-radius: 20px;
  428. text-transform: uppercase;
  429. }
  431. .btn-add-record {
  432. background: linear-gradient(135deg, #0f5c78, #1781a6);
  433. color: #ffffff;
  434. border: none;
  435. padding: 10px 20px;
  436. border-radius: 10px;
  437. font-size: 0.9rem;
  438. font-weight: 600;
  439. cursor: pointer;
  440. transition: all 0.3s;
  441. display: inline-flex;
  442. align-items: center;
  443. gap: 8px;
  444. box-shadow: 0 4px 10px rgba(15, 92, 120, 0.2);
  445. text-decoration: none;
  446. }
  448. .btn-add-record:hover {
  449. background: linear-gradient(135deg, #1781a6, #0f5c78);
  450. transform: translateY(-2px);
  451. color: #ffffff;
  452. }
  454. /* Custom Data Grid Table */
  455. .grid-table {
  456. font-size: 0.85rem;
  457. }
  459. .grid-table th {
  460. background-color: #f1f5f9 !important;
  461. color: #475569 !important;
  462. font-weight: 700;
  463. text-transform: uppercase;
  464. font-size: 0.75rem;
  465. letter-spacing: 0.5px;
  466. padding: 14px 10px;
  467. border-bottom: 2px solid #cbd5e1 !important;
  468. vertical-align: middle;
  469. }
  471. .grid-table td {
  472. padding: 12px 10px;
  473. vertical-align: middle;
  474. border-bottom: 1px solid #e2e8f0;
  475. }
  477. .grid-table tbody tr:hover {
  478. background-color: #f8fafc;
  479. }
  481. /* Badges for status */
  482. .status-badge {
  483. font-size: 0.72rem;
  484. font-weight: 700;
  485. padding: 4px 10px;
  486. border-radius: 12px;
  487. text-transform: uppercase;
  488. display: inline-block;
  489. }
  491. .status-pending {
  492. background-color: #fef9c3;
  493. color: #854d0e;
  494. }
  496. .status-awaiting-details {
  497. background-color: #ffedd5;
  498. color: #c2410c;
  499. }
  501. .status-pending-with-dept {
  502. background-color: #e0f2fe;
  503. color: #0369a1;
  504. }
  506. .status-completed {
  507. background-color: #d1fae5;
  508. color: #065f46;
  509. }
  511. .status-no-action {
  512. background-color: #f1f5f9;
  513. color: #475569;
  514. }
  516. .status-processed {
  517. background-color: #dbeafe;
  518. color: #1e40af;
  519. }
  521. .status-approved {
  522. background-color: #d1fae5;
  523. color: #065f46;
  524. }
  526. .status-paid {
  527. background-color: #dcfce7;
  528. color: #166534;
  529. }
  531. .status-rejected {
  532. background-color: #fee2e2;
  533. color: #991b1b;
  534. }
  536. .status-default {
  537. background-color: #f1f5f9;
  538. color: #475569;
  539. }
  541. /* Type Badges */
  542. .type-badge {
  543. font-size: 0.72rem;
  544. font-weight: 700;
  545. padding: 4px 10px;
  546. border-radius: 12px;
  547. text-transform: uppercase;
  548. display: inline-block;
  549. }
  551. .type-sd {
  552. background-color: #f0f7f9;
  553. color: #0f5c78;
  554. border: 1px solid rgba(15, 92, 120, 0.25);
  555. }
  557. .type-tax-invoice {
  558. background-color: #f1fbf4;
  559. color: #27ae60;
  560. border: 1px solid rgba(39, 174, 96, 0.25);
  561. }
  563. .type-emd {
  564. background-color: #f9f2fc;
  565. color: #8e44ad;
  566. border: 1px solid rgba(142, 68, 173, 0.25);
  567. }
  569. .type-bank-guarantee {
  570. background-color: #eff6ff;
  571. color: #1e40af;
  572. border: 1px solid rgba(30, 64, 175, 0.25);
  573. }
  575. .type-delivery-chellan {
  576. background-color: #fef2f2;
  577. color: #b91c1c;
  578. border: 1px solid rgba(185, 28, 28, 0.25);
  579. }
  581. .type-asd {
  582. background-color: #fdf5e6;
  583. color: #d35400;
  584. border: 1px solid rgba(211, 84, 0, 0.25);
  585. }
  587. .type-agreement {
  588. background-color: #fdf2f8;
  589. color: #db2777;
  590. border: 1px solid rgba(219, 39, 119, 0.25);
  591. }
  593. .btn-grid-action {
  594. width: 32px;
  595. height: 32px;
  596. border-radius: 8px;
  597. border: none;
  598. display: inline-flex;
  599. align-items: center;
  600. justify-content: center;
  601. font-size: 0.85rem;
  602. cursor: pointer;
  603. transition: all 0.2s;
  604. }
  606. .btn-grid-edit {
  607. background-color: #e0f2fe;
  608. color: #0369a1;
  609. }
  611. .btn-grid-edit:hover {
  612. background-color: #0369a1;
  613. color: #ffffff;
  614. transform: scale(1.08);
  615. }
  617. .btn-grid-delete {
  618. background-color: #fee2e2;
  619. color: #b91c1c;
  620. }
  622. .btn-grid-delete:hover {
  623. background-color: #b91c1c;
  624. color: #ffffff;
  625. transform: scale(1.08);
  626. }
  628. .btn-grid-pdf {
  629. background-color: #fef2f2;
  630. color: #b91c1c;
  631. border: 1px solid rgba(185, 28, 28, 0.15) !important;
  632. }
  634. .btn-grid-pdf:hover {
  635. background-color: #b91c1c;
  636. color: #ffffff;
  637. transform: scale(1.08);
  638. }
  640. /* Loading Overlay styling */
  641. #loading-overlay {
  642. position: fixed;
  643. top: 0;
  644. left: 0;
  645. width: 100vw;
  646. height: 100vh;
  647. background: rgba(255, 255, 255, 0.75);
  648. backdrop-filter: blur(8px);
  649. -webkit-backdrop-filter: blur(8px);
  650. z-index: 99999;
  651. display: none;
  652. flex-direction: column;
  653. align-items: center;
  654. justify-content: center;
  655. opacity: 0;
  656. pointer-events: none;
  657. transition: opacity 0.3s ease;
  658. }
  660. #loading-overlay.active {
  661. opacity: 1;
  662. pointer-events: all;
  663. display: flex;
  664. }
  666. .loader-spinner-container {
  667. background: white;
  668. padding: 2.5rem 3.5rem;
  669. border-radius: 16px;
  670. box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  671. border: 1px solid rgba(15, 92, 120, 0.1);
  672. display: flex;
  673. flex-direction: column;
  674. align-items: center;
  675. gap: 1.25rem;
  676. }
  678. .loader-spinner {
  679. font-size: 3rem;
  680. color: #0f5c78;
  681. }
  683. .loader-text {
  684. font-family: 'Outfit', 'Inter', sans-serif;
  685. font-size: 1.1rem;
  686. font-weight: 600;
  687. color: #0f5c78;
  688. letter-spacing: 0.5px;
  689. }
  691. .empty-state {
  692. text-align: center;
  693. padding: 60px 20px;
  694. color: #64748b;
  695. }
  697. .empty-icon {
  698. font-size: 3.5rem;
  699. color: #cbd5e1;
  700. margin-bottom: 15px;
  701. }
  703. /* Custom Modal Header Styling */
  704. .modal-custom-header {
  705. background-color: #0f5c78;
  706. color: white;
  707. border-top-left-radius: 14px;
  708. border-top-right-radius: 14px;
  709. padding: 18px 24px;
  710. display: flex;
  711. justify-content: space-between;
  712. align-items: center;
  713. }
  715. .modal-custom-title {
  716. font-weight: 700;
  717. font-size: 1.25rem;
  718. display: flex;
  719. align-items: center;
  720. gap: 10px;
  721. margin: 0;
  722. font-family: 'Outfit', sans-serif;
  723. }
  725. .modal-content {
  726. border-radius: 14px;
  727. border: none;
  728. box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
  729. }
  731. /* Pagination and Table Controls Styling */
  732. .pagination .page-item .page-link {
  733. color: #0f5c78;
  734. border-color: #cbd5e1;
  735. font-weight: 500;
  736. padding: 6px 12px;
  737. transition: all 0.2s;
  738. }
  740. .pagination .page-item.active .page-link {
  741. background-color: #0f5c78;
  742. border-color: #0f5c78;
  743. color: #ffffff;
  744. }
  746. .pagination .page-item .page-link:hover {
  747. background-color: #e2e8f0;
  748. border-color: #0f5c78;
  749. color: #0f5c78;
  750. }
  752. .pagination .page-item.disabled .page-link {
  753. color: #94a3b8;
  754. border-color: #cbd5e1;
  755. background-color: #f1f5f9;
  756. }
  758. .table-controls-row {
  759. display: flex;
  760. justify-content: space-between;
  761. align-items: center;
  762. margin-bottom: 20px;
  763. flex-wrap: wrap;
  764. gap: 15px;
  765. }
  767. .table-controls-left,
  768. .table-controls-right {
  769. display: flex;
  770. align-items: center;
  771. gap: 8px;
  772. }
  773. </style>
  774. </head>
  776. <body>
  778. <!-- Fullscreen Loading Overlay -->
  779. <div id="loading-overlay">
  780. <div class="loader-spinner-container">
  781. <i class="fa-solid fa-spinner fa-spin loader-spinner"></i>
  782. <span class="loader-text" id="loader-overlay-text">Processing...</span>
  783. </div>
  784. </div>
  786. <!-- Header Bar -->
  787. <div class="header">
  788. <div class="logo-left">
  789. <img th:src="@{/assets/header-images/gcc1.png}" alt="Greater Chennai Corporation Logo">
  790. <div class="logo-text">
  791. <h2>GREATER CHENNAI CORPORATION</h2>
  792. <p>பெருநகர சென்னை மாநகராட்சி</p>
  793. </div>
  794. </div>
  795. <div class="header-title">
  796. <h2>Payment Processing Tracker</h2>
  797. </div>
  798. <div class="user-menu">
  799. <span class="user-badge">
  800. <i class="fa-solid fa-user-shield"></i>
  801. <span th:text="${usrName}">Guest</span>
  802. </span>
  803. <a th:href="@{/gccservicepaymenttracker/logout}" class="btn-logout">
  804. <i class="fa-solid fa-right-from-bracket"></i> Logout
  805. </a>
  806. </div>
  807. </div>
  809. <div class="main-container">
  811. <!-- Category Grid (5 Cards) -->
  812. <div class="category-grid">
  814. <!-- Security Deposit -->
  815. <div class="category-card card-sd" onclick="selectCategory('sd', this)">
  816. <div class="card-left">
  817. <h3 class="card-title">Security Deposit</h3>
  818. <p class="card-value" id="count-sd">0</p>
  819. </div>
  820. <i class="fa-solid fa-wallet card-icon"></i>
  821. </div>
  823. <!-- Tax Invoice -->
  824. <div class="category-card card-invoice" onclick="selectCategory('tax invoice', this)">
  825. <div class="card-left">
  826. <h3 class="card-title">Tax Invoice</h3>
  827. <p class="card-value" id="count-invoice">0</p>
  828. </div>
  829. <i class="fa-solid fa-file-invoice-dollar card-icon"></i>
  830. </div>
  832. <!-- EMD -->
  833. <div class="category-card card-emd" onclick="selectCategory('emd', this)">
  834. <div class="card-left">
  835. <h3 class="card-title">EMD</h3>
  836. <p class="card-value" id="count-emd">0</p>
  837. </div>
  838. <i class="fa-solid fa-file-signature card-icon"></i>
  839. </div>
  841. <!-- Bank Guarantee commented out
  842. <div class="category-card card-bg" onclick="selectCategory('bank guarantee', this)">
  843. <div class="card-left">
  844. <h3 class="card-title">Bank Guarantee</h3>
  845. <p class="card-value" id="count-bg">0</p>
  846. </div>
  847. <i class="fa-solid fa-shield-halved card-icon"></i>
  848. </div>
  849. -->
  851. <!-- Delivery Chellan commented out
  852. <div class="category-card card-dc" onclick="selectCategory('delivery chellan', this)">
  853. <div class="card-left">
  854. <h3 class="card-title">Delivery Chellan</h3>
  855. <p class="card-value" id="count-dc">0</p>
  856. </div>
  857. <i class="fa-solid fa-truck-ramp-box card-icon"></i>
  858. </div>
  859. -->
  861. <!-- ASD -->
  862. <div class="category-card card-asd" onclick="selectCategory('asd', this)">
  863. <div class="card-left">
  864. <h3 class="card-title">ASD</h3>
  865. <p class="card-value" id="count-asd">0</p>
  866. </div>
  867. <i class="fa-solid fa-vault card-icon"></i>
  868. </div>
  870. <!-- Agreement -->
  871. <div class="category-card card-agreement" onclick="selectCategory('agreement', this)">
  872. <div class="card-left">
  873. <h3 class="card-title">Agreement</h3>
  874. <p class="card-value" id="count-agreement">0</p>
  875. </div>
  876. <i class="fa-solid fa-file-contract card-icon"></i>
  877. </div>
  879. </div>
  881. <!-- Filter Card -->
  882. <div class="filter-card">
  883. <div class="filter-grid">
  885. <!-- Date range picker
  886. <div class="filter-group">
  887. <label class="filter-label" for="filter-from-date">From Date</label>
  888. <input type="text" id="filter-from-date" class="filter-input" placeholder="dd/mm/yyyy" readonly>
  889. </div>
  891. <div class="filter-group">
  892. <label class="filter-label" for="filter-to-date">To Date</label>
  893. <input type="text" id="filter-to-date" class="filter-input" placeholder="dd/mm/yyyy" readonly>
  894. </div>
  895. -->
  897. <!-- Type Filter -->
  898. <div class="filter-group">
  899. <label class="filter-label" for="filter-type">Type</label>
  900. <select id="filter-type" class="filter-input" onchange="handleTypeFilterChange(this.value)">
  901. <option value="all">- All Types -</option>
  902. <!-- Commented out static options to load from database
  903. <option value="sd">Security Deposit</option>
  904. <option value="tax invoice">Tax Invoice</option>
  905. <option value="emd">EMD</option>
  906. <option value="asd">ASD</option>
  907. <option value="agreement">Agreement</option>
  908. -->
  909. </select>
  910. </div>
  912. <!-- Status Filter -->
  913. <div class="filter-group">
  914. <label class="filter-label" for="filter-status">Status</label>
  915. <select id="filter-status" class="filter-input" onchange="loadList()">
  916. <option value="">- All Statuses -</option>
  917. <option value="Awaiting Details">Awaiting Details</option>
  918. <option value="Pending with Dept">Pending with Dept</option>
  919. <option value="Completed">Completed</option>
  920. <option value="No Action">No Action</option>
  921. <option value="Pending">Pending</option>
  922. </select>
  923. </div>
  925. <!-- Text Search -->
  926. <div class="filter-group">
  927. <label class="filter-label" for="search-text">Search Keyword</label>
  928. <input type="text" id="search-text" class="filter-input" placeholder="Vendor, subject, invoice #..."
  929. oninput="handleSearchInput(this.value)">
  930. </div>
  932. <!-- Action buttons -->
  933. <button class="btn-filter-search" onclick="loadList()">
  934. <i class="fa-solid fa-magnifying-glass"></i> Filter
  935. </button>
  937. <button class="btn-filter-reset" onclick="resetFilters()">
  938. <i class="fa-solid fa-rotate-right"></i> Reset
  939. </button>
  941. </div>
  942. </div>
  944. <!-- Table Card Section -->
  945. <div class="table-card">
  947. <div class="table-card-header">
  948. <h3 class="table-card-title">
  949. <i class="fa-solid fa-table-list text-primary"></i>
  950. <span>Payment Tracking Details</span>
  951. <span class="active-filter-badge" id="active-category-badge">Type: All Types</span>
  952. </h3>
  953. <button th:if="${isAdmin}" class="btn-add-record" onclick="openAddModal()">
  954. <i class="fa-solid fa-circle-plus"></i> Add Payment Tracking Record
  955. </button>
  956. </div>
  958. <!-- Table Controls: Page size & Real-time Search -->
  959. <div class="table-controls-row">
  960. <div class="table-controls-left">
  961. <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">Show</span>
  962. <select id="table-page-size" class="form-select form-select-sm" style="width: 80px;"
  963. onchange="changePageSize(this.value)">
  964. <option value="10">10</option>
  965. <option value="20" selected>20</option>
  966. <option value="30">30</option>
  967. <option value="40">40</option>
  968. <option value="50">50</option>
  969. </select>
  970. <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">entries</span>
  971. </div>
  972. <div class="table-controls-right">
  973. <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">Search:</span>
  974. <input type="text" id="table-search" class="form-control form-control-sm" style="width: 250px;"
  975. placeholder="Search in this table..." oninput="handleTableSearch(this.value)">
  976. </div>
  977. </div>
  979. <!-- Responsive Table Grid -->
  980. <div class="table-responsive">
  981. <table class="table grid-table table-striped table-hover align-middle" id="tracking-table">
  982. <!-- Commented out old thead code
  983. <thead>
  984. <tr>
  985. <th class="text-center" style="width: 50px;">S.No</th>
  986. <th>Received Date</th>
  987. <th>Type</th>
  988. <th>Vendor Name</th>
  989. <th>Subject</th>
  990. <th>Amount</th>
  991. <th>Invoice No</th>
  992. <th>Receipt No</th>
  993. <th>Invoice Date</th>
  994. <th>Physical File No</th>
  995. <th>Remarks</th>
  996. <th>TAT</th>
  997. <th>Status</th>
  998. <th>Followup</th>
  999. <th>My Followup</th>
  1000. <th class="text-center" style="width: 100px;">Actions</th>
  1001. </tr>
  1002. </thead>
  1003. -->
  1004. <thead>
  1005. <tr>
  1006. <th class="text-center" style="width: 50px;">Sr. No.</th>
  1007. <th>Received Date</th>
  1008. <th>Invoice Date</th>
  1009. <th>Physical File No.</th>
  1010. <th>eFile No./ Receipt No.</th>
  1011. <th>Subject</th>
  1012. <th>Type (SD/ ASD)</th>
  1013. <th>Vendor Name</th>
  1014. <th>Amount</th>
  1015. <th>Age of Bill (Days)</th>
  1016. <th>Status (Pending / Completed)</th>
  1017. <th>Remarks</th>
  1018. <th>Updated on</th>
  1019. <th class="text-center" style="width: 100px;">Actions</th>
  1020. </tr>
  1021. </thead>
  1022. <tbody id="tracking-tbody">
  1023. <!-- Populated dynamically via JS -->
  1024. </tbody>
  1025. </table>
  1026. <div id="no-records-found" class="empty-state" style="display: none;">
  1027. <i class="fa-solid fa-folder-open empty-icon"></i>
  1028. <h4>No Records Found</h4>
  1029. <p>No payment tracking records match the active criteria.</p>
  1030. </div>
  1031. </div>
  1033. <!-- Pagination Controls -->
  1034. <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap gap-2">
  1035. <div class="text-secondary fw-semibold" style="font-size: 0.85rem;" id="pagination-info">
  1036. Showing 0 to 0 of 0 entries
  1037. </div>
  1038. <nav aria-label="Table navigation">
  1039. <ul class="pagination pagination-sm mb-0" id="pagination-controls">
  1040. <!-- Populated dynamically via JS -->
  1041. </ul>
  1042. </nav>
  1043. </div>
  1045. </div>
  1047. </div>
  1049. <!-- Add/Edit Modal Form -->
  1050. <div class="modal fade" id="recordModal" tabindex="-1" aria-labelledby="recordModalLabel" aria-hidden="true">
  1051. <div class="modal-dialog modal-lg modal-dialog-centered">
  1052. <div class="modal-content">
  1053. <div class="modal-custom-header">
  1054. <h5 class="modal-custom-title" id="recordModalLabel">
  1055. <i class="fa-solid fa-file-invoice-dollar"></i> Add/Edit Record
  1056. </h5>
  1057. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  1058. aria-label="Close"></button>
  1059. </div>
  1060. <div class="modal-body">
  1061. <form id="recordForm" onsubmit="saveRecord(event)">
  1062. <input type="hidden" id="form-id" name="id">
  1064. <div class="row g-3">
  1066. <!-- Received Date -->
  1067. <div class="col-md-6">
  1068. <label for="form-received-date" class="form-label fw-semibold text-secondary">Received
  1069. Date <span class="text-danger">*</span></label>
  1070. <input type="date" class="form-control" id="form-received-date" required
  1071. onclick="this.showPicker()">
  1072. </div>
  1074. <!-- Type -->
  1075. <div class="col-md-6">
  1076. <label for="form-type" class="form-label fw-semibold text-secondary">Type <span
  1077. class="text-danger">*</span></label>
  1078. <select class="form-select" id="form-type" required>
  1079. <!-- Commented out static options to load from database
  1080. <option value="sd">Security Deposit</option>
  1081. <option value="tax invoice">Tax Invoice</option>
  1082. <option value="emd">EMD</option>
  1083. <option value="asd">ASD</option>
  1084. <option value="agreement">Agreement</option>
  1085. -->
  1086. </select>
  1087. </div>
  1089. <!-- Vendor Name (Dynamic dropdown + Write-in) -->
  1090. <div class="col-md-6">
  1091. <label for="form-vendor-select" class="form-label fw-semibold text-secondary">Vendor
  1092. Name <span class="text-danger">*</span></label>
  1093. <select class="form-select mb-2" id="form-vendor-select"
  1094. onchange="toggleCustomVendor()">
  1095. <option value="">-- Select Vendor --</option>
  1096. <!-- Commented out model-populated options
  1097. <option th:each="vendor : ${vendorDetails}" th:value="${vendor.vendor_name}"
  1098. th:text="${vendor.vendor_name}"></option>
  1099. -->
  1100. <option value="__custom__">-- Write-in custom vendor --</option>
  1101. </select>
  1102. <input type="text" class="form-control" id="form-vendor-custom"
  1103. placeholder="Enter Custom Vendor Name" style="display: none;">
  1104. </div>
  1106. <!-- Subject -->
  1107. <div class="col-md-6">
  1108. <label for="form-subject" class="form-label fw-semibold text-secondary">Subject <span
  1109. class="text-danger">*</span></label>
  1110. <input type="text" class="form-control" id="form-subject"
  1111. placeholder="Enter subject/matter" required>
  1112. </div>
  1114. <!-- Amount -->
  1115. <div class="col-md-6">
  1116. <label for="form-amount" class="form-label fw-semibold text-secondary">Amount <span
  1117. class="text-danger">*</span></label>
  1118. <input type="text" class="form-control" id="form-amount"
  1119. placeholder="Enter amount (e.g. 50,000)" required>
  1120. </div>
  1122. <!-- Invoice No -->
  1123. <div class="col-md-6">
  1124. <label for="form-invoice-no" class="form-label fw-semibold text-secondary">Invoice
  1125. No</label>
  1126. <input type="text" class="form-control" id="form-invoice-no"
  1127. placeholder="Enter invoice number">
  1128. </div>
  1130. <!-- Receipt No -->
  1131. <div class="col-md-6">
  1132. <label for="form-receiptno" class="form-label fw-semibold text-secondary">Receipt
  1133. No</label>
  1134. <input type="text" class="form-control" id="form-receiptno"
  1135. placeholder="Enter Receipt No">
  1136. </div>
  1138. <!-- Invoice Date -->
  1139. <div class="col-md-6">
  1140. <label for="form-invoice-date" class="form-label fw-semibold text-secondary">Invoice
  1141. Date</label>
  1142. <input type="date" class="form-control" id="form-invoice-date"
  1143. onclick="this.showPicker()">
  1144. </div>
  1146. <!-- Physical File No -->
  1147. <div class="col-md-6">
  1148. <label for="form-physical-file-no"
  1149. class="form-label fw-semibold text-secondary">Physical File No</label>
  1150. <input type="text" class="form-control" id="form-physical-file-no"
  1151. placeholder="Enter physical file reference number">
  1152. </div>
  1154. <!-- TAT -->
  1155. <!-- <div class="col-md-6">
  1156. <label for="form-tat" class="form-label fw-semibold text-secondary">Turnaround Time
  1157. (TAT)</label>
  1158. <input type="text" class="form-control" id="form-tat" placeholder="e.g. 5 days">
  1159. </div> -->
  1161. <!-- Status -->
  1162. <div class="col-md-6">
  1163. <label for="form-status" class="form-label fw-semibold text-secondary">Status <span
  1164. class="text-danger">*</span></label>
  1165. <select class="form-select" id="form-status" required>
  1166. <option value="Awaiting Details">Awaiting Details</option>
  1167. <option value="Pending with Dept">Pending with Dept</option>
  1168. <option value="Completed">Completed</option>
  1169. <option value="No Action">No Action</option>
  1170. <option value="Pending">Pending</option>
  1171. </select>
  1172. </div>
  1174. <!-- Followup commented out
  1175. <div class="col-md-6">
  1176. <label for="form-followup"
  1177. class="form-label fw-semibold text-secondary">Follow-up</label>
  1178. <input type="text" class="form-control" id="form-followup" placeholder="Follow-up note">
  1179. </div>
  1180. -->
  1182. <!-- My Followup commented out
  1183. <div class="col-md-6">
  1184. <label for="form-myfollowup" class="form-label fw-semibold text-secondary">My
  1185. Follow-up</label>
  1186. <input type="text" class="form-control" id="form-myfollowup"
  1187. placeholder="Internal follow-up note">
  1188. </div>
  1189. -->
  1191. <!-- Order By commented out
  1192. <div class="col-md-6">
  1193. <label for="form-orderby" class="form-label fw-semibold text-secondary">Order By</label>
  1194. <input type="text" class="form-control" id="form-orderby"
  1195. placeholder="Reference order description">
  1196. </div>
  1197. -->
  1199. <!-- PDF Attachment -->
  1200. <div class="col-md-12">
  1201. <label for="form-pdf" class="form-label fw-semibold text-secondary">PDF Attachment
  1202. (Optional)</label>
  1203. <input type="file" class="form-control" id="form-pdf" accept="application/pdf">
  1204. <div id="form-existing-pdf-container" class="mt-2" style="display: none;">
  1205. <span class="text-secondary fw-semibold">Current Document:</span>
  1206. <a id="form-existing-pdf-link" href="#" target="_blank"
  1207. class="ms-1 text-primary fw-bold text-decoration-none">
  1208. <i class="fa-solid fa-file-pdf"></i> View PDF
  1209. </a>
  1210. </div>
  1211. </div>
  1213. <!-- Remarks -->
  1214. <div class="col-12">
  1215. <label for="form-remarks" class="form-label fw-semibold text-secondary">Remarks</label>
  1216. <textarea class="form-control" id="form-remarks" rows="2"
  1217. placeholder="Additional remarks..."></textarea>
  1218. </div>
  1220. </div>
  1222. <div class="d-flex justify-content-end gap-2 mt-4">
  1223. <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
  1224. <button type="submit" class="btn btn-primary px-4"
  1225. style="background-color: #0f5c78; border-color: #0f5c78;">
  1226. <i class="fa-solid fa-save"></i> Save Record
  1227. </button>
  1228. </div>
  1229. </form>
  1230. </div>
  1231. </div>
  1232. </div>
  1233. </div>
  1235. <!-- Bootstrap & FontAwesome bundles -->
  1236. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  1238. <!-- Custom Page Scripting -->
  1239. <script th:inline="javascript">
  1240. const contextPath = /*[[@{/}]]*/ '';
  1241. const isAdmin = /*[[${isAdmin}]]*/ false;
  1243. let activeCategory = 'all';
  1244. let allRecords = [];
  1245. let recordModalObj = null;
  1246. let currentPage = 1;
  1247. let pageSize = 20;
  1249. // Dynamic lists for types and vendors
  1250. let activeTypes = [];
  1251. let activeVendors = [];
  1253. // Date Pickers
  1254. // let fromDatePicker, toDatePicker;
  1256. document.addEventListener('DOMContentLoaded', async () => {
  1257. recordModalObj = new bootstrap.Modal(document.getElementById('recordModal'));
  1258. // initDatePickers();
  1259. await loadTypesAndVendors();
  1260. loadCounts();
  1261. loadList();
  1262. });
  1264. // Helper to map type_name to a category code
  1265. function getCategoryCode(typeName) {
  1266. const type = String(typeName).toLowerCase().trim();
  1267. if (type === 'asd' || type.includes('asd') || type.includes('additional security')) {
  1268. return 'asd';
  1269. } else if (type.includes('agreement')) {
  1270. return 'agreement';
  1271. } else if (type === 'sd' || (type.includes('security') && !type.includes('additional') && !type.includes('asd'))) {
  1272. return 'sd';
  1273. } else if (type.includes('invoice') || type.includes('bill')) {
  1274. return 'tax invoice';
  1275. } else if (type === 'emd' || type.includes('earnest')) {
  1276. return 'emd';
  1277. } else if (type.includes('guarantee') || type === 'bg') {
  1278. return 'bank guarantee';
  1279. } else if (type.includes('chellan') || type.includes('challan') || type === 'dc') {
  1280. return 'delivery chellan';
  1281. }
  1282. return type;
  1283. }
  1285. // Fetch types and vendors from DB endpoints
  1286. async function loadTypesAndVendors() {
  1287. try {
  1288. const [typesRes, vendorsRes] = await Promise.all([
  1289. fetch(contextPath + 'gccservicepaymenttracker/api/types?_=' + new Date().getTime()),
  1290. fetch(contextPath + 'gccservicepaymenttracker/api/vendors?_=' + new Date().getTime())
  1291. ]);
  1292. activeTypes = await typesRes.json();
  1293. activeVendors = await vendorsRes.json();
  1294. populateDropdowns();
  1295. } catch (err) {
  1296. console.error("Error loading types or vendors:", err);
  1297. }
  1298. }
  1300. // Populate selects with dynamic options
  1301. function populateDropdowns() {
  1302. // Populate filter-type
  1303. const filterTypeSelect = document.getElementById('filter-type');
  1304. if (filterTypeSelect) {
  1305. filterTypeSelect.innerHTML = '<option value="all">- All Types -</option>';
  1306. activeTypes.forEach(t => {
  1307. const categoryCode = getCategoryCode(t.type_name);
  1308. const opt = document.createElement('option');
  1309. opt.value = categoryCode;
  1310. opt.textContent = t.type_name;
  1311. filterTypeSelect.appendChild(opt);
  1312. });
  1313. }
  1315. // Populate form-type
  1316. const formTypeSelect = document.getElementById('form-type');
  1317. if (formTypeSelect) {
  1318. formTypeSelect.innerHTML = '<option value="">-- Select Type --</option>';
  1319. activeTypes.forEach(t => {
  1320. const opt = document.createElement('option');
  1321. opt.value = t.id;
  1322. opt.textContent = t.type_name;
  1323. formTypeSelect.appendChild(opt);
  1324. });
  1325. }
  1327. // Populate form-vendor-select
  1328. const formVendorSelect = document.getElementById('form-vendor-select');
  1329. if (formVendorSelect) {
  1330. formVendorSelect.innerHTML = '<option value="">-- Select Vendor --</option>';
  1331. activeVendors.forEach(v => {
  1332. const opt = document.createElement('option');
  1333. opt.value = v.id;
  1334. opt.textContent = v.vendor_name;
  1335. formVendorSelect.appendChild(opt);
  1336. });
  1337. const customOpt = document.createElement('option');
  1338. customOpt.value = '__custom__';
  1339. customOpt.textContent = '-- Write-in custom vendor --';
  1340. formVendorSelect.appendChild(customOpt);
  1341. }
  1342. }
  1344. // Show/hide loader overlay
  1345. function showLoader(show, text = 'Processing...') {
  1346. const overlay = document.getElementById('loading-overlay');
  1347. const overlayText = document.getElementById('loader-overlay-text');
  1348. overlayText.textContent = text;
  1349. if (show) {
  1350. overlay.classList.add('active');
  1351. } else {
  1352. overlay.classList.remove('active');
  1353. }
  1354. }
  1356. // Get CSRF details
  1357. function getCsrfHeaders() {
  1358. const csrfToken = document.querySelector("meta[name='_csrf']")?.getAttribute("content");
  1359. const csrfHeader = document.querySelector("meta[name='_csrf_header']")?.getAttribute("content");
  1360. const headers = {};
  1361. if (csrfToken && csrfHeader) {
  1362. headers[csrfHeader] = csrfToken;
  1363. }
  1364. return headers;
  1365. }
  1367. // Category count loaders
  1368. function loadCounts() {
  1369. fetch(contextPath + 'gccservicepaymenttracker/api/counts?_=' + new Date().getTime())
  1370. .then(response => response.json())
  1371. .then(data => {
  1372. document.getElementById('count-sd').textContent = data.sd || 0;
  1373. document.getElementById('count-invoice').textContent = data['tax invoice'] || 0;
  1374. document.getElementById('count-emd').textContent = data.emd || 0;
  1375. const bgEl = document.getElementById('count-bg');
  1376. if (bgEl) bgEl.textContent = data['bank guarantee'] || 0;
  1377. const dcEl = document.getElementById('count-dc');
  1378. if (dcEl) dcEl.textContent = data['delivery chellan'] || 0;
  1379. document.getElementById('count-asd').textContent = data.asd || 0;
  1380. document.getElementById('count-agreement').textContent = data.agreement || 0;
  1381. })
  1382. .catch(err => console.error("Error loading category counts:", err));
  1383. }
  1385. // Handles select change of card
  1386. function selectCategory(category, cardElement) {
  1387. const isActive = cardElement.classList.contains('active');
  1389. // Remove active class from all
  1390. document.querySelectorAll('.category-card').forEach(el => el.classList.remove('active'));
  1392. const filterTypeSelect = document.getElementById('filter-type');
  1394. if (isActive) {
  1395. activeCategory = 'all';
  1396. document.getElementById('active-category-badge').textContent = 'Type: All Types';
  1397. if (filterTypeSelect) {
  1398. filterTypeSelect.value = 'all';
  1399. }
  1400. } else {
  1401. cardElement.classList.add('active');
  1402. activeCategory = category;
  1404. if (filterTypeSelect) {
  1405. filterTypeSelect.value = category;
  1406. }
  1408. // Update badge text
  1409. const labels = {
  1410. 'sd': 'Security Deposit',
  1411. 'tax invoice': 'Tax Invoice',
  1412. 'emd': 'EMD',
  1413. 'asd': 'ASD',
  1414. 'agreement': 'Agreement'
  1415. };
  1416. document.getElementById('active-category-badge').textContent = 'Type: ' + (labels[category] || category);
  1417. }
  1419. // Refresh list
  1420. loadList();
  1421. }
  1423. // Loading and Rendering list data
  1424. function loadList() {
  1425. showLoader(true, 'Loading payment tracking details...');
  1427. const statusVal = document.getElementById('filter-status').value;
  1428. const searchVal = document.getElementById('search-text').value;
  1430. // Sync search-text to table-search when hitting main filter search
  1431. const tblSearch = document.getElementById('table-search');
  1432. if (tblSearch) {
  1433. tblSearch.value = searchVal;
  1434. }
  1436. // Build query params
  1437. const params = new URLSearchParams();
  1438. if (activeCategory && activeCategory !== 'all') {
  1439. params.append('category', activeCategory);
  1440. }
  1442. if (statusVal) params.append('status', statusVal);
  1444. // Add cache buster
  1445. params.append('_', new Date().getTime());
  1447. fetch(contextPath + 'gccservicepaymenttracker/api/list?' + params.toString())
  1448. .then(response => response.json())
  1449. .then(data => {
  1450. allRecords = data;
  1451. currentPage = 1;
  1452. renderTable();
  1453. })
  1454. .catch(err => {
  1455. console.error("Error loading details:", err);
  1456. showLoader(false);
  1457. });
  1458. }
  1460. function renderTable() {
  1461. const tbody = document.getElementById('tracking-tbody');
  1462. const noRecords = document.getElementById('no-records-found');
  1463. tbody.innerHTML = '';
  1465. const searchVal = document.getElementById('table-search')?.value || '';
  1466. let query = searchVal.toLowerCase().trim();
  1468. let filtered = allRecords.filter(row => {
  1469. if (!query) return true;
  1470. const vName = String(row.resolved_vendor || row.vendor_name || '').toLowerCase();
  1471. const tName = String(row.resolved_type || row.type || '').toLowerCase();
  1472. return (
  1473. vName.includes(query) ||
  1474. tName.includes(query) ||
  1475. (row.subject && String(row.subject).toLowerCase().includes(query)) ||
  1476. (row.amount && String(row.amount).toLowerCase().includes(query)) ||
  1477. (row.invoice_no && String(row.invoice_no).toLowerCase().includes(query)) ||
  1478. (row.receiptno && String(row.receiptno).toLowerCase().includes(query)) ||
  1479. (row.physical_file_no && String(row.physical_file_no).toLowerCase().includes(query)) ||
  1480. (row.remarks && String(row.remarks).toLowerCase().includes(query)) ||
  1481. (row.tat && String(row.tat).toLowerCase().includes(query)) ||
  1482. (row.status && String(row.status).toLowerCase().includes(query))
  1483. );
  1484. });
  1486. showLoader(false);
  1488. const totalRecords = filtered.length;
  1489. if (totalRecords === 0) {
  1490. noRecords.style.display = 'block';
  1491. document.getElementById('pagination-info').textContent = 'Showing 0 to 0 of 0 entries';
  1492. document.getElementById('pagination-controls').innerHTML = '';
  1493. return;
  1494. }
  1496. noRecords.style.display = 'none';
  1498. // Paginate
  1499. const totalPages = Math.ceil(totalRecords / pageSize);
  1500. if (currentPage > totalPages) {
  1501. currentPage = totalPages;
  1502. }
  1503. if (currentPage < 1) {
  1504. currentPage = 1;
  1505. }
  1507. const startIndex = (currentPage - 1) * pageSize;
  1508. const endIndex = Math.min(startIndex + pageSize, totalRecords);
  1509. const paginatedData = filtered.slice(startIndex, endIndex);
  1511. // Update Pagination Info
  1512. document.getElementById('pagination-info').textContent =
  1513. `Showing ${startIndex + 1} to ${endIndex} of ${totalRecords} entries`;
  1515. paginatedData.forEach((row, pageIndex) => {
  1516. const globalIndex = startIndex + pageIndex;
  1517. const tr = document.createElement('tr');
  1519. // S.No
  1520. const tdIndex = document.createElement('td');
  1521. tdIndex.className = 'text-center fw-semibold text-secondary';
  1522. tdIndex.textContent = globalIndex + 1;
  1523. tr.appendChild(tdIndex);
  1525. // Helper for blank values
  1526. const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
  1528. // Format Dates (yyyy-MM-dd to dd/MM/yyyy)
  1529. const formatDate = dateStr => {
  1530. if (!dateStr) return '-';
  1531. const parts = dateStr.split('-');
  1532. if (parts.length === 3) {
  1533. return `${parts[2]}/${parts[1]}/${parts[0]}`;
  1534. }
  1535. return dateStr;
  1536. };
  1538. // Format Date-Times (yyyy-MM-ddTHH:mm:ss... to dd/MM/yyyy HH:mm:ss)
  1539. const formatDateTime = dateTimeStr => {
  1540. if (!dateTimeStr) return '-';
  1541. try {
  1542. const tParts = dateTimeStr.split('T');
  1543. const datePart = tParts[0];
  1544. const timePart = tParts.length > 1 ? tParts[1].split('.')[0] : '';
  1545. const dateParts = datePart.split('-');
  1546. if (dateParts.length === 3) {
  1547. const formattedDate = `${dateParts[2]}/${dateParts[1]}/${dateParts[0]}`;
  1548. return timePart ? `${formattedDate} ${timePart}` : formattedDate;
  1549. }
  1550. } catch (e) {
  1551. console.error(e);
  1552. }
  1553. return dateTimeStr;
  1554. };
  1556. // Calculate age of bill (days) dynamically from received date:
  1557. const calculateAgeOfBill = receivedDateStr => {
  1558. if (!receivedDateStr) return '0';
  1559. try {
  1560. const recDate = new Date(receivedDateStr);
  1561. if (isNaN(recDate.getTime())) return '0';
  1562. recDate.setHours(0, 0, 0, 0);
  1564. const today = new Date();
  1565. today.setHours(0, 0, 0, 0);
  1567. const graceDate = new Date(recDate);
  1568. graceDate.setDate(graceDate.getDate() + 7);
  1570. if (today <= graceDate) {
  1571. return '0';
  1572. } else {
  1573. const diffTime = today.getTime() - graceDate.getTime();
  1574. const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
  1575. return String(diffDays);
  1576. }
  1577. } catch (e) {
  1578. console.error("Error calculating age of bill:", e);
  1579. return '0';
  1580. }
  1581. };
  1583. const getTypeBadge = typeVal => {
  1584. const cleanType = String(typeVal || '').trim().toLowerCase();
  1585. let label = cleanType;
  1586. let badgeClass = 'type-sd';
  1588. if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
  1589. label = 'ASD';
  1590. badgeClass = 'type-asd';
  1591. } else if (cleanType.includes('agreement')) {
  1592. label = 'Agreement';
  1593. badgeClass = 'type-agreement';
  1594. } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
  1595. label = 'Security Deposit';
  1596. badgeClass = 'type-sd';
  1597. } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
  1598. label = 'Tax Invoice';
  1599. badgeClass = 'type-tax-invoice';
  1600. } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
  1601. label = 'EMD';
  1602. badgeClass = 'type-emd';
  1603. } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
  1604. label = 'Bank Guarantee';
  1605. badgeClass = 'type-bank-guarantee';
  1606. } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
  1607. label = 'Delivery Chellan';
  1608. badgeClass = 'type-delivery-chellan';
  1609. } else {
  1610. // Fallback: check if cleanType is a numeric ID from activeTypes
  1611. const typeObj = activeTypes.find(t => String(t.id) === cleanType);
  1612. if (typeObj) {
  1613. return getTypeBadge(typeObj.type_name);
  1614. }
  1615. label = typeVal || '-';
  1616. badgeClass = 'status-default';
  1617. }
  1618. return `<span class="type-badge ${badgeClass}">${label}</span>`;
  1619. };
  1621. tr.innerHTML += `
  1622. <td>${formatDate(row.received_date)}</td>
  1623. <td>${formatDate(row.invoice_date)}</td>
  1624. <td>${text(row.physical_file_no)}</td>
  1625. <td>${text(row.receiptno)}</td>
  1626. <td>${text(row.subject)}</td>
  1627. <td>${getTypeBadge(row.resolved_type || row.type)}</td>
  1628. <td class="fw-semibold text-secondary">${text(row.resolved_vendor || row.vendor_name)}</td>
  1629. <td class="fw-semibold text-dark">&#8377; ${text(row.amount)}</td>
  1630. <td>${calculateAgeOfBill(row.received_date)}</td>
  1631. <td><span class="status-badge status-${String(row.status || '').toLowerCase().trim().replace(/\s+/g, '-')}">${text(row.status)}</span></td>
  1632. <td><small class="text-muted">${text(row.remarks)}</small></td>
  1633. <td>${formatDateTime(row.updated_date)}</td>
  1634. `;
  1636. // Actions cell
  1637. const tdActions = document.createElement('td');
  1638. tdActions.className = 'text-center';
  1640. if (row.file_path) {
  1641. const btnViewPdf = document.createElement('button');
  1642. btnViewPdf.className = 'btn-grid-action btn-grid-pdf me-1';
  1643. btnViewPdf.innerHTML = '<i class="fa-solid fa-file-pdf"></i>';
  1644. btnViewPdf.title = 'View PDF Document';
  1645. btnViewPdf.onclick = () => {
  1646. let pdfUrl = row.file_path;
  1647. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  1648. pdfUrl = contextPath + pdfUrl.substring(1);
  1649. } else {
  1650. pdfUrl = contextPath + pdfUrl;
  1651. }
  1652. window.open(pdfUrl, '_blank');
  1653. };
  1654. tdActions.appendChild(btnViewPdf);
  1655. }
  1657. if (isAdmin) {
  1658. const btnEdit = document.createElement('button');
  1659. btnEdit.className = 'btn-grid-action btn-grid-edit me-1';
  1660. btnEdit.innerHTML = '<i class="fa-solid fa-pen-to-square"></i>';
  1661. btnEdit.title = 'Edit Record';
  1662. btnEdit.onclick = () => openEditModal(row);
  1664. const btnDelete = document.createElement('button');
  1665. btnDelete.className = 'btn-grid-action btn-grid-delete';
  1666. btnDelete.innerHTML = '<i class="fa-solid fa-trash-can"></i>';
  1667. btnDelete.title = 'Delete Record';
  1668. btnDelete.onclick = () => deleteRecord(row.id);
  1670. tdActions.appendChild(btnEdit);
  1671. tdActions.appendChild(btnDelete);
  1672. }
  1673. tr.appendChild(tdActions);
  1675. tbody.appendChild(tr);
  1676. });
  1678. // Rebuild Pagination Controls
  1679. buildPaginationControls(totalPages);
  1680. }
  1682. function buildPaginationControls(totalPages) {
  1683. const container = document.getElementById('pagination-controls');
  1684. container.innerHTML = '';
  1686. if (totalPages <= 1) {
  1687. return;
  1688. }
  1690. // Previous Button
  1691. const prevLi = document.createElement('li');
  1692. prevLi.className = 'page-item' + (currentPage === 1 ? ' disabled' : '');
  1693. prevLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${currentPage - 1})">Previous</a>`;
  1694. container.appendChild(prevLi);
  1696. // Page numbers
  1697. const maxVisible = 5;
  1698. let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
  1699. let endPage = Math.min(totalPages, startPage + maxVisible - 1);
  1701. if (endPage - startPage + 1 < maxVisible) {
  1702. startPage = Math.max(1, endPage - maxVisible + 1);
  1703. }
  1705. if (startPage > 1) {
  1706. const firstLi = document.createElement('li');
  1707. firstLi.className = 'page-item';
  1708. firstLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(1)">1</a>`;
  1709. container.appendChild(firstLi);
  1711. if (startPage > 2) {
  1712. const dotsLi = document.createElement('li');
  1713. dotsLi.className = 'page-item disabled';
  1714. dotsLi.innerHTML = `<span class="page-link">...</span>`;
  1715. container.appendChild(dotsLi);
  1716. }
  1717. }
  1719. for (let i = startPage; i <= endPage; i++) {
  1720. const pageLi = document.createElement('li');
  1721. pageLi.className = 'page-item' + (i === currentPage ? ' active' : '');
  1722. pageLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${i})">${i}</a>`;
  1723. container.appendChild(pageLi);
  1724. }
  1726. if (endPage < totalPages) {
  1727. if (endPage < totalPages - 1) {
  1728. const dotsLi = document.createElement('li');
  1729. dotsLi.className = 'page-item disabled';
  1730. dotsLi.innerHTML = `<span class="page-link">...</span>`;
  1731. container.appendChild(dotsLi);
  1732. }
  1734. const lastLi = document.createElement('li');
  1735. lastLi.className = 'page-item';
  1736. lastLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${totalPages})">${totalPages}</a>`;
  1737. container.appendChild(lastLi);
  1738. }
  1740. // Next Button
  1741. const nextLi = document.createElement('li');
  1742. nextLi.className = 'page-item' + (currentPage === totalPages ? ' disabled' : '');
  1743. nextLi.innerHTML = `<a class="page-link" href="javascript:void(0)" onclick="goToPage(${currentPage + 1})">Next</a>`;
  1744. container.appendChild(nextLi);
  1745. }
  1747. function goToPage(page) {
  1748. currentPage = page;
  1749. renderTable();
  1750. }
  1752. function changePageSize(size) {
  1753. pageSize = parseInt(size, 10);
  1754. currentPage = 1;
  1755. renderTable();
  1756. }
  1758. // Handles search in local table search input
  1759. function handleTableSearch(keyword) {
  1760. const filterSearch = document.getElementById('search-text');
  1761. if (filterSearch) {
  1762. filterSearch.value = keyword;
  1763. }
  1764. currentPage = 1;
  1765. renderTable();
  1766. }
  1768. function handleSearchInput(keyword) {
  1769. const tblSearch = document.getElementById('table-search');
  1770. if (tblSearch) {
  1771. tblSearch.value = keyword;
  1772. }
  1773. currentPage = 1;
  1774. renderTable();
  1775. }
  1777. function handleTypeFilterChange(category) {
  1778. activeCategory = category;
  1780. // Remove active class from all top cards
  1781. document.querySelectorAll('.category-card').forEach(el => el.classList.remove('active'));
  1783. if (category !== 'all') {
  1784. const classMap = {
  1785. 'sd': 'card-sd',
  1786. 'tax invoice': 'card-invoice',
  1787. 'emd': 'card-emd',
  1788. 'asd': 'card-asd',
  1789. 'agreement': 'card-agreement'
  1790. };
  1791. const cardClass = classMap[category];
  1792. if (cardClass) {
  1793. const cardElement = document.querySelector('.' + cardClass);
  1794. if (cardElement) {
  1795. cardElement.classList.add('active');
  1796. }
  1797. }
  1799. const labels = {
  1800. 'sd': 'Security Deposit',
  1801. 'tax invoice': 'Tax Invoice',
  1802. 'emd': 'EMD',
  1803. 'asd': 'ASD',
  1804. 'agreement': 'Agreement'
  1805. };
  1806. document.getElementById('active-category-badge').textContent = 'Type: ' + (labels[category] || category);
  1807. } else {
  1808. document.getElementById('active-category-badge').textContent = 'Type: All Types';
  1809. }
  1811. loadList();
  1812. }
  1814. function resetFilters() {
  1815. document.getElementById('filter-status').value = '';
  1816. document.getElementById('search-text').value = '';
  1818. const filterType = document.getElementById('filter-type');
  1819. if (filterType) {
  1820. filterType.value = 'all';
  1821. }
  1823. activeCategory = 'all';
  1824. document.querySelectorAll('.category-card').forEach(el => el.classList.remove('active'));
  1825. document.getElementById('active-category-badge').textContent = 'Type: All Types';
  1827. const tblSearch = document.getElementById('table-search');
  1828. if (tblSearch) {
  1829. tblSearch.value = '';
  1830. }
  1831. currentPage = 1;
  1832. loadList();
  1833. }
  1835. // Toggle text field for dynamic vendor select dropdown
  1836. function toggleCustomVendor() {
  1837. const select = document.getElementById('form-vendor-select');
  1838. const customInput = document.getElementById('form-vendor-custom');
  1839. if (select.value === '__custom__') {
  1840. customInput.style.display = 'block';
  1841. customInput.required = true;
  1842. } else {
  1843. customInput.style.display = 'none';
  1844. customInput.required = false;
  1845. customInput.value = '';
  1846. }
  1847. }
  1849. // Edit/Add Modals
  1850. function openAddModal() {
  1851. document.getElementById('recordModalLabel').innerHTML = '<i class="fa-solid fa-circle-plus"></i> Add Payment Tracking Record';
  1852. document.getElementById('recordForm').reset();
  1853. document.getElementById('form-id').value = '';
  1855. // Set type to active category by default
  1856. const formTypeSelect = document.getElementById('form-type');
  1857. formTypeSelect.value = '';
  1858. if (activeCategory && activeCategory !== 'all') {
  1859. for (let option of formTypeSelect.options) {
  1860. if (option.value) {
  1861. const typeObj = activeTypes.find(t => String(t.id) === String(option.value));
  1862. if (typeObj && getCategoryCode(typeObj.type_name) === activeCategory) {
  1863. formTypeSelect.value = option.value;
  1864. break;
  1865. }
  1866. }
  1867. }
  1868. }
  1869. document.getElementById('form-status').value = 'Pending';
  1871. document.getElementById('form-vendor-custom').style.display = 'none';
  1872. document.getElementById('form-vendor-custom').required = false;
  1874. // Reset PDF upload elements
  1875. document.getElementById('form-pdf').value = '';
  1876. document.getElementById('form-existing-pdf-container').style.display = 'none';
  1878. recordModalObj.show();
  1879. }
  1881. function openEditModal(row) {
  1882. document.getElementById('recordModalLabel').innerHTML = '<i class="fa-solid fa-file-signature"></i> Edit Payment Tracking Record';
  1883. document.getElementById('recordForm').reset();
  1885. document.getElementById('form-id').value = row.id;
  1886. document.getElementById('form-received-date').value = row.received_date || '';
  1888. // Set type select
  1889. const typeSelect = document.getElementById('form-type');
  1890. const rowType = String(row.type || '').trim().toLowerCase();
  1891. typeSelect.value = '';
  1893. let found = false;
  1894. for (let option of typeSelect.options) {
  1895. if (option.value && String(option.value) === String(row.type)) {
  1896. typeSelect.value = option.value;
  1897. found = true;
  1898. break;
  1899. }
  1900. }
  1902. if (!found && rowType) {
  1903. const legacyCategory = getCategoryCode(rowType);
  1904. for (let option of typeSelect.options) {
  1905. if (option.value) {
  1906. const typeObj = activeTypes.find(t => String(t.id) === String(option.value));
  1907. if (typeObj) {
  1908. const optCategory = getCategoryCode(typeObj.type_name);
  1909. if (optCategory === legacyCategory) {
  1910. typeSelect.value = option.value;
  1911. found = true;
  1912. break;
  1913. }
  1914. }
  1915. }
  1916. }
  1917. }
  1919. document.getElementById('form-subject').value = row.subject || '';
  1920. document.getElementById('form-amount').value = row.amount || '';
  1921. document.getElementById('form-invoice-no').value = row.invoice_no || '';
  1923. document.getElementById('form-receiptno').value = row.receiptno || '';
  1925. document.getElementById('form-invoice-date').value = row.invoice_date || '';
  1926. document.getElementById('form-physical-file-no').value = row.physical_file_no || '';
  1927. const tatEl = document.getElementById('form-tat');
  1928. if (tatEl) tatEl.value = row.tat || '';
  1930. const statusSelect = document.getElementById('form-status');
  1931. const rowStatus = String(row.status || '').trim();
  1932. statusSelect.value = 'Pending';
  1933. for (let option of statusSelect.options) {
  1934. if (option.value.toLowerCase() === rowStatus.toLowerCase()) {
  1935. statusSelect.value = option.value;
  1936. break;
  1937. }
  1938. }
  1939. const followupEl = document.getElementById('form-followup');
  1940. if (followupEl) followupEl.value = row.followup || '';
  1941. const myfollowupEl = document.getElementById('form-myfollowup');
  1942. if (myfollowupEl) myfollowupEl.value = row.myfollowup || '';
  1943. const orderbyEl = document.getElementById('form-orderby');
  1944. if (orderbyEl) orderbyEl.value = row.order_by || '';
  1945. document.getElementById('form-remarks').value = row.remarks || '';
  1947. // Set vendor select (using ID or legacy fallback/custom)
  1948. const select = document.getElementById('form-vendor-select');
  1949. const vendorVal = String(row.vendor_name || '').trim();
  1950. select.value = '';
  1951. document.getElementById('form-vendor-custom').style.display = 'none';
  1952. document.getElementById('form-vendor-custom').required = false;
  1953. document.getElementById('form-vendor-custom').value = '';
  1955. if (vendorVal) {
  1956. let optionFound = false;
  1957. for (let option of select.options) {
  1958. if (option.value && option.value !== '__custom__' && String(option.value) === vendorVal) {
  1959. select.value = option.value;
  1960. optionFound = true;
  1961. break;
  1962. }
  1963. }
  1965. if (!optionFound) {
  1966. const matchedVendor = activeVendors.find(v => String(v.vendor_name).toLowerCase().trim() === vendorVal.toLowerCase());
  1967. if (matchedVendor) {
  1968. select.value = String(matchedVendor.id);
  1969. optionFound = true;
  1970. }
  1971. }
  1973. if (!optionFound) {
  1974. select.value = '__custom__';
  1975. const customInput = document.getElementById('form-vendor-custom');
  1976. customInput.style.display = 'block';
  1977. customInput.required = true;
  1978. customInput.value = row.vendor_name;
  1979. }
  1980. }
  1982. // Populate/Reset PDF elements
  1983. document.getElementById('form-pdf').value = '';
  1984. const existingPdfContainer = document.getElementById('form-existing-pdf-container');
  1985. const existingPdfLink = document.getElementById('form-existing-pdf-link');
  1986. if (row.file_path) {
  1987. existingPdfContainer.style.display = 'block';
  1988. let pdfUrl = row.file_path;
  1989. if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
  1990. pdfUrl = contextPath + pdfUrl.substring(1);
  1991. } else {
  1992. pdfUrl = contextPath + pdfUrl;
  1993. }
  1994. existingPdfLink.href = pdfUrl;
  1995. } else {
  1996. existingPdfContainer.style.display = 'none';
  1997. }
  1999. recordModalObj.show();
  2000. }
  2002. // SAVE Record API call
  2003. async function saveRecord(event) {
  2004. event.preventDefault();
  2005. showLoader(true, 'Saving record details...');
  2007. const id = document.getElementById('form-id').value;
  2008. const received_date = document.getElementById('form-received-date').value;
  2009. const type = document.getElementById('form-type').value;
  2010. const subject = document.getElementById('form-subject').value;
  2011. const amount = document.getElementById('form-amount').value;
  2012. const invoice_no = document.getElementById('form-invoice-no').value;
  2013. const receiptno = document.getElementById('form-receiptno').value;
  2014. const invoice_date = document.getElementById('form-invoice-date').value;
  2015. const physical_file_no = document.getElementById('form-physical-file-no').value;
  2016. const tatEl = document.getElementById('form-tat');
  2017. const tat = tatEl ? tatEl.value : '';
  2018. const status = document.getElementById('form-status').value;
  2019. // Preserve original values if they were loaded in edit mode
  2020. let originalRecord = null;
  2021. if (id) {
  2022. originalRecord = allRecords.find(r => String(r.id) === String(id));
  2023. }
  2024. const followupEl = document.getElementById('form-followup');
  2025. const followup = followupEl ? followupEl.value : (originalRecord ? originalRecord.followup : '');
  2026. const myfollowupEl = document.getElementById('form-myfollowup');
  2027. const myfollowup = myfollowupEl ? myfollowupEl.value : (originalRecord ? originalRecord.myfollowup : '');
  2028. const orderbyEl = document.getElementById('form-orderby');
  2029. const order_by = orderbyEl ? orderbyEl.value : (originalRecord ? originalRecord.order_by : '');
  2030. const remarks = document.getElementById('form-remarks').value;
  2032. // Resolve vendor
  2033. const vendorSelect = document.getElementById('form-vendor-select').value;
  2034. const vendorName = vendorSelect === '__custom__' ? document.getElementById('form-vendor-custom').value : vendorSelect;
  2036. if (!vendorName) {
  2037. alert('Please select or specify a vendor.');
  2038. showLoader(false);
  2039. return;
  2040. }
  2042. // Upload PDF if selected
  2043. let filePath = originalRecord ? originalRecord.file_path : null;
  2044. const pdfInput = document.getElementById('form-pdf');
  2045. if (pdfInput && pdfInput.files && pdfInput.files.length > 0) {
  2046. showLoader(true, 'Uploading PDF document...');
  2047. const formData = new FormData();
  2048. formData.append('file', pdfInput.files[0]);
  2050. const csrfHeaders = getCsrfHeaders();
  2051. try {
  2052. const uploadResponse = await fetch(contextPath + 'gccservicepaymenttracker/api/upload-pdf', {
  2053. method: 'POST',
  2054. headers: {
  2055. ...csrfHeaders
  2056. },
  2057. body: formData
  2058. });
  2059. const uploadResult = await uploadResponse.json();
  2060. if (uploadResult.success) {
  2061. filePath = uploadResult.filePath;
  2062. } else {
  2063. alert(uploadResult.error || 'Failed to upload PDF file.');
  2064. showLoader(false);
  2065. return;
  2066. }
  2067. } catch (err) {
  2068. console.error("Upload error:", err);
  2069. alert("Failed to upload PDF due to connection error.");
  2070. showLoader(false);
  2071. return;
  2072. }
  2073. }
  2075. const payload = {
  2076. id, received_date, type, vendor_name: vendorName, subject, amount, invoice_no,
  2077. receiptno, invoice_date, physical_file_no, tat, status, followup,
  2078. myfollowup, order_by, remarks, file_path: filePath
  2079. };
  2081. const csrfHeaders = getCsrfHeaders();
  2082. const headers = {
  2083. 'Content-Type': 'application/json',
  2084. ...csrfHeaders
  2085. };
  2087. try {
  2088. showLoader(true, 'Saving record details...');
  2089. const response = await fetch(contextPath + 'gccservicepaymenttracker/api/save', {
  2090. method: 'POST',
  2091. headers: headers,
  2092. body: JSON.stringify(payload)
  2093. });
  2094. const data = await response.json();
  2095. if (data.success) {
  2096. recordModalObj.hide();
  2097. loadCounts();
  2098. loadList();
  2099. } else {
  2100. alert(data.error || 'Failed to save record.');
  2101. showLoader(false);
  2102. }
  2103. } catch (err) {
  2104. console.error("Save Error:", err);
  2105. alert("Failed to save record due to connection error.");
  2106. showLoader(false);
  2107. }
  2108. }
  2110. // Delete record API call
  2111. function deleteRecord(id) {
  2112. if (!confirm('Are you sure you want to delete this payment tracking record?')) {
  2113. return;
  2114. }
  2116. showLoader(true, 'Deleting record...');
  2118. const csrfHeaders = getCsrfHeaders();
  2119. const headers = {
  2120. 'Content-Type': 'application/x-www-form-urlencoded',
  2121. ...csrfHeaders
  2122. };
  2124. const body = new URLSearchParams();
  2125. body.append('id', id);
  2127. fetch(contextPath + 'gccservicepaymenttracker/api/delete', {
  2128. method: 'POST',
  2129. headers: headers,
  2130. body: body
  2131. })
  2132. .then(response => response.json())
  2133. .then(data => {
  2134. if (data.success) {
  2135. loadCounts();
  2136. loadList();
  2137. } else {
  2138. alert(data.error || 'Failed to delete record.');
  2139. showLoader(false);
  2140. }
  2141. })
  2142. .catch(err => {
  2143. console.error("Delete Error:", err);
  2144. alert("Failed to delete record due to connection error.");
  2145. showLoader(false);
  2146. });
  2147. }
  2148. </script>
  2149. </body>
  2151. </html>