balaji
/
GCC_Officer_Portal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
This portal only for GCC Officers. Based on there roles and Group ID they can view there module`s Like PGR, QR Public Asset Feedback, Makkalai Thedi Mayor,etc...
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.
26 Commits
2 Branches
0 Tags
289 MiB
Tree: 896d4a20d3
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '896d4a20d3'
${ noResults }
GCC_Officer_Portal/target/classes/templates/modules/callcenterqaqc/qaqctaskagentassign.html

924 lines
41 KiB
Raw Normal View History

New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
New Module Added New module updated
1 year ago
​
​
​
​
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
New Module Added New module updated
1 year ago
​
​
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
​
​
New Module Added New module updated
1 year ago
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
New Module Added New module updated
1 year ago
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
​
​
​
​
​
New Module Added New module updated
1 year ago
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
New Module Added New module updated
1 year ago
​
​
​
​
​
​
​
​
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
New Module Added New module updated
1 year ago
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
New Module Added New module updated
1 year ago
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
New Module Added New module updated
1 year ago
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
New Module Added New module updated
1 year ago
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
New Module Added New module updated
1 year ago
​
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
New Module Added New module updated
1 year ago
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
New Module Added New module updated
1 year ago
New Module Code Updated NULM, QAQC (1913) & Petition Modules added
2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" dir="">
  3. <html xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="~{fragments/modules/base/head :: head}"></head>
  5. <style>
  6. .required{
  7. color: red;
  8. }
  9. /* Mobile screens - targeting devices with a max width of 767px */
  10. @media (max-width: 767px)
  11. {
  12. #qaqcRequestForm label{
  13. margin-top: 10px;
  14. }
  15. }
  17. .card-box {
  18. box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
  19. }
  21. .bg-grey-inline-text {
  22. padding:2px 2px;
  23. background-color: #e6e6e6;
  24. border-radius: 4px;
  25. }
  26. </style>
  27. <body>
  29. <!--[if lt IE 8]>
  30. <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>
  31. <![endif]-->
  33. <div class="wrapper">
  34. <!-- header top menu Start -->
  35. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  36. <!-- header top menu end -->
  38. <div class="page-wrap">
  39. <!--=============== Left Menu side Start ================-->
  40. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  41. <!--=============== Left side End ================-->
  42. <div class="main-content">
  43. <div class="container-fluid">
  44. <div class="page-header mb-2">
  45. <div class="row align-items-end">
  46. <div class="col-lg-8">
  47. <div class="page-header-title">
  48. <i class="far fa-calendar-plus bg-blue"></i>
  49. <div class="d-inline">
  50. <h5>Assign Agents</h5>
  51. <span>Assign Agents for Task</span>
  52. </div>
  53. </div>
  54. </div>
  55. <div class="col-lg-4">
  56. <nav class="breadcrumb-container" aria-label="breadcrumb">
  57. <ol class="breadcrumb">
  58. <li class="breadcrumb-item"><a href="/gcc/index"><i
  59. class="ik ik-home"></i></a></li>
  60. <li class="breadcrumb-item" aria-current="page">1913 QAQC</li>
  61. <li class="breadcrumb-item" aria-current="page">Admin QAQC</li>
  62. <li class="breadcrumb-item active" aria-current="page">Assign Agents</li>
  63. </ol>
  64. </nav>
  65. </div>
  66. </div>
  67. </div>
  70. <div class="row mt-4">
  72. <div class="col-sm-4 mb-2">
  73. <label for="displaystartDate" class="form-label"
  74. style="font-size: medium; margin-bottom: 0px; font-weight: bold;">From
  75. Date:</label> <input type="date" id="displaystartDate"
  76. class="form-control" >
  77. </div>
  78. <div class="col-sm-4 mb-2">
  79. <label for="displayendDate" class="form-label"
  80. style="font-size: medium; margin-bottom: 0px; font-weight: bold;">To
  81. Date:</label> <input type="date" id="displayendDate"
  82. class="form-control">
  83. </div>
  84. </div>
  87. <div class="row mt-3">
  89. <div class="col-xl-3 col-md-4 col-sm-12">
  91. <div class="card card-box" id="closedCard" style="display: none;">
  92. <p class="text-facebook mb-20 text-center mt-4" id="displayClosename"><b></b></p>
  93. <h2 class="text-twitter fw-700 ml-5 text-center" id="displayClosedcount"></h2>
  94. </div>
  96. <div class="card card-box" id="reopenedCard" style="display: none;">
  97. <p class="text-facebook mb-20 text-center mt-4" id="displayReopenname"><b></b></p>
  98. <h3 class="text-twitter fw-700 ml-5 text-center" id="displayReopenedcount"></h3>
  99. </div>
  101. <div class="card card-box" id="inProgressCard" style="display: none;">
  102. <p class="text-facebook mb-20 text-center mt-4" id="displayInProgressname"><b></b></p>
  103. <h3 class="text-twitter fw-700 ml-5 text-center" id="displayInProgresscount"></h3>
  104. </div>
  106. <div class="card card-box" id="redressedCard" style="display: none;">
  107. <p class="text-facebook mb-20 text-center mt-4" id="displayRedressedname"><b></b></p>
  108. <h3 class="text-twitter fw-700 ml-5 text-center" id="displayRedressedcount"></h3>
  109. </div>
  111. <div class="card card-box" id="followupCard1" style="display: none;">
  112. <p class="text-facebook mb-20 text-center mt-4" id="displayFollowupname1"><b></b></p>
  113. <h3 class="text-twitter fw-700 ml-5 text-center" id="displayfollowupcount1"></h3>
  114. </div>
  116. <div class="card card-box" id="followupCard2" style="display: none;">
  117. <p class="text-facebook mb-20 text-center mt-4" id="displayFollowupname2"><b></b></p>
  118. <h3 class="text-twitter fw-700 ml-5 text-center" id="displayfollowupcount2"></h3>
  119. </div>
  121. <div class="card card-box" id="withdrawCard" style="display: none;">
  122. <p class="text-facebook mb-20 text-center mt-4" id="displaywithdrawname"><b></b></p>
  123. <h3 class="text-twitter fw-700 ml-5 text-center" id="displaywithdrawcount"></h3>
  124. </div>
  126. </div>
  128. </div>
  130. <div class="row">
  131. <div class="col-12">
  132. <div class="card">
  133. <div class="card-block">
  134. <label>Task Description If any</label>
  135. <textarea rows="1" cols="5" style="width: 100%;height:50px;" placeholder="Enter description"></textarea>
  136. </div>
  138. </div>
  139. </div>
  140. </div>
  142. <div class="row">
  143. <div class="col-12">
  144. <div class="card">
  145. <div class="card-block">
  146. <div class="row">
  147. <div class=" col-lg-4 col-md-5 col-sm-12">
  148. <label style="font-size: medium;font-weight: bold;">Click this Button to Clear the Pending Calls...</label>
  149. </div>
  150. <div class="col-lg-8 col-md-7 col-sm-12">
  151. <button id="clearButton" class="btn btn-danger">Clear</button>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  159. <div class="row">
  160. <div class="col-12">
  161. <div class="card">
  162. <div class="card-header">
  163. <h3><b>Available Agent List</b></h3>
  164. </div>
  166. <div class="card-body">
  167. <div class="d-flex justify-content-end mb-2">
  168. <button class="btn btn-light mr-4" disabled style="color: blue;border-color: blue;"><i class="ik ik-user-plus f-16" style="color: blue;"></i>Productivity Count:<span class="ml-4" id="productivitycount" style="color: blue;"></span></button>
  169. <button class="btn btn-primary" disabled><i class="ik ik-user-plus f-16"></i>Total Available agents:<span class="ml-4" id="availableagentcount"></span></button>
  170. </div>
  171. <table id="AgentDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" >
  172. <thead class="thead-dark">
  173. <tr role="row">
  174. <th class="text-center">
  175. <input type="checkbox" id="selectAll" />
  176. <label for="selectAll">Select All</label>
  177. </th>
  178. <th class="text-center" width="1%">S.No</th>
  179. <th class="text-center">AGENT ID</th>
  180. <th class="text-center">NAME</th>
  181. <th class="text-center">CAMPAIGN PENDING CALLS</th>
  182. <th class="text-center">ALREADY ASSIGNED CALLS</th>
  183. <th class="text-center">CALLS ASSIGNED</th>
  184. <th class="text-center">TOTAL CALLS</th>
  185. <th class="text-center">ACTION</th>
  186. </tr>
  187. </thead>
  188. <tbody style="text-align:center;">
  190. </tbody>
  191. <!-- Transfer Modal -->
  192. <div id="transferModal" class="modal" tabindex="-1" role="dialog">
  193. <div class="modal-dialog" role="document">
  194. <div class="modal-content">
  195. <div class="modal-header">
  196. <h5 class="modal-title">Transfer Calls</h5>
  197. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  198. <span aria-hidden="true">&times;</span>
  199. </button>
  200. </div>
  201. <div class="modal-body">
  202. <!-- Editable Calls Assigned Count -->
  203. <div class="form-group">
  204. <label for="callsAssignedInput">Calls Assigned Count</label>
  205. <input type="number" id="callsAssignedInput" class="form-control" min="1" placeholder="Enter Calls Count">
  206. </div>
  207. <!-- Transfer To Dropdown -->
  208. <div class="form-group">
  209. <label for="transferToDropdown">Transfer To</label>
  210. <select id="transferToDropdown" class="form-control">
  211. <!-- Options populated dynamically -->
  212. </select>
  213. </div>
  214. </div>
  215. <div class="modal-footer">
  216. <button type="button" id="transferButton" class="btn btn-primary">Transfer</button>
  217. <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
  218. </div>
  219. </div>
  220. </div>
  221. </div>
  222. </table>
  223. <div class="text-center">
  224. <button class="btn btn-primary" id="assignBtn">Click to Assign</button>
  225. </div>
  226. <div>
  227. <button class="btn btn-secondary" id="backBtn">Back</button>
  228. </div>
  229. </div>
  231. </div>
  232. </div>
  233. </div>
  235. </div>
  236. </div>
  238. <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;">
  239. <div style="position: relative; top: 50%; transform: translateY(-50%);">
  240. <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
  241. <span class="sr-only">Loading...</span>
  242. </div>
  243. <!-- Add the 'Please wait' text below the spinner -->
  244. <p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
  245. </div>
  246. </div>
  249. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  250. </div>
  251. </div>
  256. <div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
  258. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  259. <script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
  260. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  262. <script type="text/javascript">
  264. $(document).ready(function () {
  266. const redirected = sessionStorage.getItem('redirected'); // Check if redirected flag is set
  267. const cardType = sessionStorage.getItem('cardType'); // Get the card type
  268. //console.log("Redirected flag:", redirected);
  269. //console.log("Card Type:", cardType);
  271. if (redirected === 'true') {
  272. // Fetch data from sessionStorage
  273. const closeName = sessionStorage.getItem("closename");
  274. const closedCount = sessionStorage.getItem("closedcount");
  275. const reopenName = sessionStorage.getItem("reopenname");
  276. const reopenedCount = sessionStorage.getItem("reopenedcount");
  277. const inProgressName = sessionStorage.getItem("inProgressName");
  278. const inProgressCount = sessionStorage.getItem("inProgressCount");
  279. const redressedName = sessionStorage.getItem("redressedName");
  280. const redressedCount = sessionStorage.getItem("redressedCount");
  281. const startDate = sessionStorage.getItem("startDate");
  282. const endDate = sessionStorage.getItem("endDate");
  283. const followupName1=sessionStorage.getItem("followupname1");
  284. const followupCount1=sessionStorage.getItem("followupcount1");
  285. const followupName2=sessionStorage.getItem("followupname2");
  286. const followupCount2=sessionStorage.getItem("followupcount2");
  287. const withdrawname = sessionStorage.getItem("withdrawname");
  288. const withdrawCount = sessionStorage.getItem("withdrawCount");
  291. const group=sessionStorage.getItem("group");
  292. const type=sessionStorage.getItem("type");
  293. const mode=sessionStorage.getItem("mode");
  294. const zone=sessionStorage.getItem("zone");
  295. const region=sessionStorage.getItem("region");
  297. /* console.log("CloseName:", closeName);
  298. console.log("ClosedCount:", closedCount);
  299. console.log("ReopenName:", reopenName);
  300. console.log("ReopenedCount:", reopenedCount);
  301. console.log("InProgressName:", inProgressName);
  302. console.log("InProgressCount:", inProgressCount);
  303. console.log("RedressedName:", redressedName);
  304. console.log("RedressedCount:", redressedCount);
  305. console.log("StartDate:", startDate);
  306. console.log("EndDate:", endDate);
  307. console.log("followupName:", followupName);
  308. console.log("followupCount:", followupCount);
  310. console.log("group:",group);
  311. console.log("type",type);
  312. console.log("mode",mode);
  313. console.log("zone",zone); */
  315. /* console.log("ofollowupName:", followupName1);
  316. console.log("ofollowupCount:", followupCount1);
  317. console.log("pfollowupName:", followupName2);
  318. console.log("pfollowupCount:", followupCount2); */
  320. let cardName = '';
  321. let cardCount = '';
  323. // Set the relevant data based on cardType
  324. if (cardType === 'Closed') {
  325. cardName = closeName;
  326. cardCount = closedCount;
  327. $("#displayClosename").text(closeName); // Display Closed
  328. $("#displayClosedcount").text(closedCount);
  329. // Hide others
  330. $("#reopenedCard, #inProgressCard, #redressedCard","#followupCard1","#followupCard2").hide();
  331. $("#closedCard").show(); // Show the Closed card
  332. } else if (cardType === 'Reopened') {
  333. cardName = reopenName;
  334. cardCount = reopenedCount;
  335. $("#displayReopenname").text(reopenName); // Display Reopened
  336. $("#displayReopenedcount").text(reopenedCount);
  337. // Hide others
  338. $("#closedCard, #inProgressCard, #redressedCard","#followupCard1","#followupCard2").hide();
  339. $("#reopenedCard").show(); // Show the Reopened card
  340. } else if (cardType === 'In Progress') {
  341. cardName = inProgressName;
  342. cardCount = inProgressCount;
  343. $("#displayInProgressname").text(inProgressName); // Display In Progress
  344. $("#displayInProgresscount").text(inProgressCount);
  345. // Hide others
  346. $("#closedCard, #reopenedCard, #redressedCard","#followupCard1","#followupCard2").hide();
  347. $("#inProgressCard").show(); // Show the In Progress card
  348. } else if (cardType === 'Redressed') {
  349. cardName = redressedName;
  350. cardCount = redressedCount;
  351. $("#displayRedressedname").text(redressedName); // Display Redressed
  352. $("#displayRedressedcount").text(redressedCount);
  353. // Hide others
  354. $("#closedCard, #reopenedCard, #inProgressCard","#followupCard1","#followupCard2").hide();
  355. $("#redressedCard").show(); // Show the Redressed card
  356. }
  357. else if (cardType === 'Followup1') {
  358. cardName = followupName1;
  359. cardCount = followupCount1;
  360. $("#displayFollowupname1").text(followupName1); // Display Redressed
  361. $("#displayfollowupcount1").text(followupCount1);
  362. // Hide others
  363. $("#closedCard, #reopenedCard,#redressedCard, #inProgressCard","#followupCard2").hide();
  364. $("#followupCard1").show(); // Show the Redressed card
  365. }
  366. else if (cardType === 'Followup2') {
  367. cardName = followupName2;
  368. cardCount = followupCount2;
  369. $("#displayFollowupname2").text(followupName2); // Display Redressed
  370. $("#displayfollowupcount2").text(followupCount2);
  371. // Hide others
  372. $("#closedCard, #reopenedCard,#redressedCard, #inProgressCard","#followupCard1").hide();
  373. $("#followupCard2").show(); // Show the Redressed card
  374. }
  375. else if (cardType === 'withdraw') {
  376. cardName = withdrawname;
  377. cardCount = withdrawCount;
  378. $("#displaywithdrawname").text(withdrawname); // Display Redressed
  379. $("#displaywithdrawcount").text(withdrawCount);
  380. // Hide others
  381. $("#closedCard, #reopenedCard,#redressedCard, #inProgressCard","#followupCard1","#followupCard2").hide();
  382. $("#withdrawCard").show(); // Show the Redressed card
  383. }
  385. // Fill in date values
  386. $("#displaystartDate").val(startDate);
  387. $("#displayendDate").val(endDate);
  389. // Disable the start and end date inputs
  390. $("#displaystartDate, #displayendDate").prop("disabled", true);
  392. // Call the getStart function
  393. getStart(cardName, cardCount, startDate, endDate);
  396. $('#assignBtn').click(function (event) {
  397. event.preventDefault();
  400. if (!isCleared) {
  402. // Trigger Clear button flow
  403. Swal.fire({
  404. allowOutsideClick: false, // Disable clicking outside the modal to close it
  405. allowEscapeKey: false, // Disable escape key to close the modal
  406. allowEnterKey: false, // Disable enter key to close the modal
  407. title: 'Clear pending calls before assigning?',
  408. icon: 'info',
  409. showCancelButton: true,
  410. showDenyButton: true, // Show the Deny button
  411. confirmButtonColor: 'green',
  412. cancelButtonColor: 'orange',
  413. denyButtonColor: 'grey',
  414. confirmButtonText: 'Yes, clear it!', // Confirm button text
  415. cancelButtonText: 'No, assign without clearing', // Cancel button text
  416. denyButtonText: 'Exit' // Deny button text
  417. }).then((result) => {
  418. if (result.isConfirmed) {
  419. // Trigger Clear logic
  420. $('#clearButton').click();
  421. // Wait until Clear logic completes
  422. const interval = setInterval(() => {
  423. if (isCleared) {
  424. clearInterval(interval); // Stop checking
  425. assignLogic(); // Proceed to Assign logic
  426. }
  427. }, 500); // Check every 500ms
  428. }
  429. else if (result.isDenied) {
  430. // Do nothing on cancel (Cancel button clicked)
  431. Swal.fire('Cancelled', 'No action performed.', 'info');
  432. }
  433. else {
  434. // Proceed directly to Assign logic
  435. assignLogic();
  436. }
  437. });
  438. } else {
  439. // Proceed with Assign logic directly if Clear is already done
  440. assignLogic();
  441. }
  443. });
  447. function assignLogic() {
  449. // Fetch the values from the fields
  450. const startDate = $('#displaystartDate').val();
  451. const endDate = $('#displayendDate').val();
  453. const description = $('textarea').val().trim() || "N/A"; // Default to "N/A" if empty
  454. /* console.log("startDate",startDate);
  455. console.log("endDate",endDate); */
  457. // Validate inputs if necessary
  458. if (!startDate || !endDate || !cardName || !cardCount) {
  459. Swal.fire({
  460. icon: 'error',
  461. title: 'Error',
  462. text: 'All fields must be filled!',
  463. });
  464. return;
  465. }
  467. const allAgents = [];
  468. const table = $('#AgentDatatable').DataTable();
  470. //Loop through all rows in the DataTable
  471. table.rows().every(function (rowIdx, tableLoop, rowLoop) {
  472. const row = $(this.node()); // Get the DOM row
  473. const checkbox = row.find('.select-agent');
  474. const agentId = row.find('td:nth-child(3)').text().trim();
  475. const callsPerAgent = row.find('td:nth-child(7)').text().trim();
  477. // Add agent to allAgents with default callsPerAgent = 0
  478. allAgents.push({ agentId: agentId, callsPerAgent: 0 });
  480. // If checkbox is checked, update callsPerAgent
  481. if (checkbox.is(':checked')) {
  482. const agent = allAgents.find(a => a.agentId === agentId);
  483. if (agent) {
  484. agent.callsPerAgent = callsPerAgent;
  485. }
  486. }
  487. });
  489. // Remove agents with callsPerAgent still set to 0
  490. const filteredAgents = allAgents.filter(agent => agent.callsPerAgent > 0);
  492. // Check if no agents were selected
  493. if (filteredAgents.length === 0) {
  494. Swal.fire({
  495. icon: 'error',
  496. title: 'Error',
  497. text: 'Please select at least one agent to assign calls!',
  498. });
  499. return;
  500. }
  502. //console.log('Filtered agents:', filteredAgents);
  505. // Prepare the data object to send in the AJAX request
  506. const data = {
  507. startDate: startDate,
  508. endDate: endDate,
  509. closeName: cardName,
  510. closedCount: cardCount,
  511. description: description,
  512. group:group,
  513. type:type,
  514. mode:mode,
  515. zone:zone,
  516. region:region,
  517. agents:filteredAgents // Send only agents with callsPerAgent > 0
  518. };
  520. console.log('Data to send:', data);
  522. // Show the loader
  523. $('#pageLoader').show();
  525. // Send the AJAX request
  526. $.ajax({
  527. type: "POST",
  528. url: "/gcc/api/callcenterqaqc/agentassign/taskassign", // Replace with your API endpoint
  529. data: JSON.stringify(data),
  530. contentType: "application/json",
  531. success: function (response) {
  532. // Hide the loader
  533. $('#pageLoader').hide();
  534. // Show a success message using Swal
  535. Swal.fire({
  536. icon: 'success',
  537. title: 'Success',
  538. allowOutsideClick: false, // Disable clicking outside the modal to close it
  539. allowEscapeKey: false, // Disable escape key to close the modal
  540. allowEnterKey: false, // Disable enter key to close the modal
  541. showConfirmButton: true, // Ensure the confirm button is visible
  542. text: response.message || 'Data transferred successfully!',
  543. }).then((result) => {
  544. if (result.isConfirmed) {
  545. window.location.href = `/gcc/callcenterqaqcreports/qaqctasklist`;
  546. }
  547. });
  548. },
  549. error: function (error) {
  550. $('#pageLoader').hide();
  551. // Show an error message using Swal
  552. Swal.fire({
  553. allowOutsideClick: false, // Disable clicking outside the modal to close it
  554. allowEscapeKey: false, // Disable escape key to close the modal
  555. allowEnterKey: false, // Disable enter key to close the modal
  556. showConfirmButton: true, // Ensure the confirm button is visible
  557. icon: 'error',
  558. title: 'Error',
  559. text: error.responseJSON?.message,
  560. }).then((result) => {
  561. if (result.isConfirmed) {
  562. window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
  563. }
  564. });
  565. }
  566. });
  567. }
  569. // Clear the redirected flag after use
  570. sessionStorage.removeItem('redirected');
  571. } else {
  572. // Clear sessionStorage and notify the user
  573. sessionStorage.clear();
  574. // Show Swal alert and redirect on OK button
  575. Swal.fire({
  576. allowOutsideClick: false, // Disable clicking outside the modal to close it
  577. allowEscapeKey: false, // Disable escape key to close the modal
  578. allowEnterKey: false, // Disable enter key to close the modal
  579. showConfirmButton: true, // Ensure the confirm button is visible
  580. icon: 'error',
  581. title: 'Access Denied',
  582. text: 'Please navigate from the Dashboard Page.',
  583. confirmButtonText: 'OK',
  584. }).then((result) => {
  585. if (result.isConfirmed) {
  586. // Redirect to the desired page
  587. window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
  588. }
  589. }); }
  591. // Optional: You can still allow toggling of cards if needed:
  592. $('.card-box').on('click', function () {
  593. // Hide all the card-box elements
  594. $('.card-box').hide();
  596. // Get the id of the clicked card-box and show it
  597. const cardId = $(this).attr('id');
  598. $('#' + cardId).show();
  599. });
  601. function getStart(closeName,closedCount,startDate,endDate)
  602. {
  603. // Show the loader
  604. $('#pageLoader').show();
  606. $.ajax({
  607. url: '/gcc/api/callcenterqaqc/agentassign/getavailableagents?totalDataCount='+closedCount,
  608. type: 'GET',
  609. dataType: 'json',
  610. success: function(response) {
  611. // Hide the loader
  612. $('#pageLoader').hide();
  613. if (response.status === 'success') {
  614. populateDataTable(response);
  615. $("#productivitycount").text(response.productivity_count);
  616. $("#availableagentcount").text(response.agent_available_count);
  617. } if (response.status === 'error') {
  618. $('#pageLoader').hide();
  619. Swal.fire({
  620. icon: 'error',
  621. title: 'Error',
  622. text: response.message || "Error fetching Agents.",
  623. confirmButtonText: 'OK',
  624. }).then((result) => {
  625. if (result.isConfirmed) {
  626. // Reload the same page
  627. window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
  628. }
  629. });
  630. }
  631. },
  632. error: function(xhr, status, error) {
  633. $('#pageLoader').hide();
  634. console.error('Error fetching assigned agents:', error);
  635. }
  636. });
  637. }
  639. function populateDataTable(data) {
  640. // Clear existing rows
  641. var table = $('#AgentDatatable').DataTable();
  642. table.clear();
  644. // Populate table
  645. data.available_agents.forEach((agent, index) => {
  647. table.row.add([
  648. `<input type="checkbox" class="select-agent" value="${agent.agent_id}" checked />`,
  649. index + 1,
  650. agent.agent_id,
  651. agent.agent_name,
  652. agent.campaignPendingCount,
  653. agent.todayCount1,
  654. agent.calls_per_agent,
  655. agent.totalCallsCount,
  656. `<button class="btn btn-warning btn-sm edit-agent" data-id="${agent.agent_id}"><i class="ik ik-edit"></i></button>`
  657. ]);
  658. });
  660. // Redraw table to reflect new data
  661. table.draw();
  663. }
  665. let selectedAgentId; // Store the agent being edited
  667. // Handle "Edit" button click
  668. $(document).on('click', '.edit-agent', function () {
  669. const row = $(this).closest('tr'); // Get the parent row of the clicked button
  670. selectedAgentId = row.find('td:nth-child(3)').text().trim(); // Get the Agent ID
  671. const callsAssigned = row.find('td:nth-child(7)').text().trim(); // Get Calls Assigned Count
  673. // Populate the Calls Assigned input field
  674. $('#callsAssignedInput').val(callsAssigned);
  676. // Populate the Transfer To dropdown
  677. const dropdown = $('#transferToDropdown');
  678. dropdown.empty(); // Clear previous options
  679. $('#AgentDatatable tbody tr').each(function () {
  680. const agentId = $(this).find('td:nth-child(3)').text().trim();
  681. const agentName = $(this).find('td:nth-child(4)').text().trim();
  683. // Exclude the currently selected agent from the dropdown
  684. if (agentId !== selectedAgentId) {
  685. dropdown.append(`<option value="${agentId}">${agentName}</option>`);
  686. }
  687. });
  689. // Show the modal
  690. $('#transferModal').modal('show');
  691. });
  693. // Handle "Transfer" button click
  694. $('#transferButton').click(function () {
  695. const transferCount = parseInt($('#callsAssignedInput').val(), 10);
  696. const transferToAgentId = $('#transferToDropdown').val();
  698. if (!transferCount || transferCount <= 0) {
  699. alert('Please enter a valid calls count!');
  700. return;
  701. }
  703. if (!transferToAgentId) {
  704. alert('Please select an agent to transfer the calls!');
  705. return;
  706. }
  708. let deductionSuccess = false; // Flag for successful deduction from the current agent
  709. let additionSuccess = false; // Flag for successful addition to the receiving agent
  710. const productivityCount = parseInt($('#productivitycount').text().trim(), 10); // Fetch dynamic productivity count from the button
  712. // Validate and update the table
  713. $('#AgentDatatable tbody tr').each(function () {
  714. const agentId = $(this).find('td:nth-child(3)').text().trim();
  715. const callsAssignedCell = $(this).find('td:nth-child(7)'); // Calls Assigned column
  717. // Validate deduction from the current agent
  718. if (agentId === selectedAgentId) {
  719. const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
  720. if (currentCount >= transferCount) {
  721. deductionSuccess = true;
  722. } else {
  724. alert('Transfer not allowed! Transferring more calls than assigned.');
  726. return false; // Stop the operation
  727. }
  728. }
  730. // Validate addition to the receiving agent
  731. if (agentId === transferToAgentId) {
  732. const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
  733. const newCount = currentCount + transferCount;
  734. if (newCount <= productivityCount) {
  735. additionSuccess = true;
  736. } else {
  737. alert(`Transfer not allowed! Transferring ${transferCount} calls will exceed the productivity count of ${productivityCount} for agent ID: ${transferToAgentId}.`);
  739. return false; // Stop the operation
  740. }
  741. }
  742. });
  744. // If both validations pass, proceed to update the table
  745. if (deductionSuccess && additionSuccess) {
  746. $('#AgentDatatable tbody tr').each(function () {
  747. const agentId = $(this).find('td:nth-child(3)').text().trim();
  748. const callsAssignedCell = $(this).find('td:nth-child(7)'); // Calls Assigned column
  749. const totalCallsCell = $(this).find('td:nth-child(8)'); // TOTAL CALLS column
  751. // Deduct calls from the current agent
  752. if (agentId === selectedAgentId) {
  753. const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
  754. callsAssignedCell.text(currentCount - transferCount);
  756. // Update TOTAL CALLS for the current agent
  757. const currentTotalCalls = parseInt(totalCallsCell.text().trim(), 10);
  758. totalCallsCell.text(currentTotalCalls - transferCount);
  759. }
  761. // Add calls to the receiving agent
  762. if (agentId === transferToAgentId) {
  763. const currentCount = parseInt(callsAssignedCell.text().trim(), 10);
  764. callsAssignedCell.text(currentCount + transferCount);
  766. // Update TOTAL CALLS for the receiving agent
  767. const currentTotalCalls = parseInt(totalCallsCell.text().trim(), 10);
  768. totalCallsCell.text(currentTotalCalls + transferCount);
  769. }
  770. });
  772. // Dynamically update the total calls across all agents
  773. let totalCalls = 0;
  774. $('#AgentDatatable tbody tr').each(function () {
  775. const totalCallsCell = $(this).find('td:nth-child(8)'); // TOTAL CALLS column
  776. totalCalls += parseInt(totalCallsCell.text().trim(), 10);
  777. });
  778. $('#totalCallsCount').text(totalCalls); // Update total calls count across all agents
  780. // Close the modal
  781. $('#transferModal').modal('hide');
  782. }
  784. });
  788. // Initialize DataTable
  789. var table = $('#AgentDatatable').DataTable({
  790. dom: 'Bftip',
  791. columnDefs: [
  792. { targets: 'no-sort', orderable: false }
  793. ],
  794. lengthMenu: [
  795. [200, 500, -1],
  796. [ '200 rows','500 rows', 'Show all']
  797. ],
  798. scrollY: '70vh',
  799. fixedColumns: {
  800. left: 1,
  801. right: 1
  802. },
  803. buttons: [
  804. {
  805. extend: 'pageLength',
  806. className: 'btn btn-warning'
  807. },
  808. {
  809. title: 'Data export',
  810. extend: 'copyHtml5',
  811. text: 'Copy',
  812. className: 'btn btn-secondary',
  813. id: 'copyBtn'
  814. },
  815. {
  816. extend: 'excelHtml5',
  817. text: 'Excel',
  818. className: 'btn btn-secondary',
  819. id: 'excelBtn'
  820. },
  821. {
  822. extend: 'csvHtml5',
  823. text: 'CSV',
  824. className: 'btn btn-secondary',
  825. id: 'csvBtn'
  826. },
  827. {
  828. extend: 'pdfHtml5',
  829. text: 'PDF',
  830. className: 'btn btn-secondary',
  831. id: 'pdfBtn'
  832. }
  833. ],
  834. fixedHeader: true,
  835. autoWidth: true,
  836. responsive: true,
  837. searching: true,
  838. select: false,
  839. processing: false
  840. });
  841. });
  843. $(document).ready(function () {
  844. // "Select All" checkbox functionality
  845. $('#selectAll').on('change', function () {
  846. const isChecked = $(this).is(':checked');
  847. $('.select-agent').prop('checked', isChecked); // Check/uncheck all checkboxes
  848. });
  850. // Ensure "Select All" is checked/unchecked based on individual checkboxes
  851. $(document).on('change', '.select-agent', function () {
  852. const allChecked = $('.select-agent:checked').length === $('.select-agent').length;
  853. $('#selectAll').prop('checked', allChecked); // Check "Select All" only if all checkboxes are selected
  854. });
  855. });
  856. </script>
  857. <script type="text/javascript">
  858. $(document).ready(function () {
  859. $('#backBtn').click(function (event) {
  860. window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`;
  861. });
  863. });
  864. </script>
  865. <script>
  866. // Global flag to track if Clear logic has been executed
  867. let isCleared = false;
  869. document.getElementById('clearButton').addEventListener('click', function () {
  870. Swal.fire({
  871. title: 'Are you sure to clear calls?',
  872. icon: 'warning',
  873. allowOutsideClick: false, // Disable clicking outside the modal to close it
  874. allowEscapeKey: false, // Disable escape key to close the modal
  875. allowEnterKey: false, // Disable enter key to close the modal
  876. showCancelButton: true,
  877. confirmButtonColor: '#d33',
  878. cancelButtonColor: '#3085d6',
  879. confirmButtonText: 'Yes, clear it!',
  880. cancelButtonText: 'No, cancel'
  881. }).then((result) => {
  882. if (result.isConfirmed) {
  883. // Logic to clear calls can be added here
  885. $.ajax({
  886. url: '/gcc/api/callcenterqaqc/agentassign/deleteRecords',
  887. type: 'GET',
  888. contentType: 'application/json',
  889. success: function (response) {
  890. //console.log("response",response);
  891. if (response==="success") {
  893. Swal.fire(
  894. 'Cleared!',
  895. 'The calls have been cleared.',
  896. 'success'
  897. );
  898. isCleared = true; // Mark as cleared
  899. }
  900. else {
  901. Swal.fire("Info", "No Records to clear,You can Assign", "info");
  902. isCleared = true; // Mark as cleared
  903. }
  905. },
  906. error: function (xhr, status, error) {
  907. Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error");
  909. }
  910. });
  912. } else {
  913. Swal.fire(
  914. 'Cancelled',
  915. 'Your data is safe,If you wish you can Assign :)',
  916. 'info'
  917. );
  918. isCleared = true;
  919. }
  920. });
  921. });
  922. </script>
  924. </body>
  925. </html>