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.

953 lines
34 KiB

2 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head th:replace="~{fragments/modules/base/head :: head}">
  4. </head>
  5. <style>
  6. .required{
  7. color: red;
  8. }
  9. .card-box {
  10. box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
  11. }
  12. @media (max-width: 768px) {
  13. .card-box {
  14. text-align: center;
  15. }
  16. }
  17. /* #questionDatatable {
  18. table-layout: fixed !important;
  19. width: 100% !important;
  20. }
  21. #questionDatatable th,
  22. #questionDatatable td {
  23. white-space: nowrap !important;
  24. text-align: center;
  25. vertical-align: middle;
  26. }
  27. #questionDatatable td:nth-child(2) {
  28. text-align: left !important;
  29. } */
  30. .table-responsive {
  31. min-width: 100%;
  32. overflow-x: auto;
  33. }
  34. /* Active tab color */
  35. .nav-tabs .nav-link.active {
  36. background-color: rgb(40, 185, 123) !important;
  37. color: white !important;
  38. border-color: rgb(40, 185, 123) !important;
  39. }
  40. /* Inactive tab color */
  41. .nav-tabs .nav-link {
  42. background-color: #f8f9fa;
  43. color: black;
  44. border-color: #ddd;
  45. }
  46. /* Hover effect */
  47. .nav-tabs .nav-link:hover {
  48. background-color: rgba(40, 185, 123, 0.8);
  49. color: white;
  50. }
  51. .modal-body {
  52. max-height: 70vh;
  53. overflow-y: auto; /* Enables vertical scrolling */
  54. overflow-x: hidden; /* Hides horizontal scrolling */
  55. padding-right: 15px; /* Prevents content cutoff */
  56. }
  57. </style>
  58. <body>
  59. <div class="wrapper">
  60. <!-- Header -->
  61. <header th:replace="~{fragments/modules/base/header :: header}"></header>
  62. <div class="page-wrap">
  63. <!-- Left Menu -->
  64. <div th:replace="~{fragments/modules/base/menu :: menu}"></div>
  65. <div class="main-content">
  66. <div class="container-fluid">
  67. <div class="page-header">
  68. <div class="row align-items-end">
  69. <div class="col-lg-6">
  70. <div class="page-header-title">
  71. <i class="fa fa-list-alt bg-blue"></i>
  72. <div class="d-inline">
  73. <h5>Campaign Report</h5>
  74. <span>1913 Campaign Report</span>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="col-lg-6">
  79. <nav class="breadcrumb-container" aria-label="breadcrumb">
  80. <ol class="breadcrumb">
  81. <li class="breadcrumb-item">
  82. <a href="/gcc/index"><i class="ik ik-home"></i></a>
  83. </li>
  84. <li class="breadcrumb-item" aria-current="page">1913 Campaign</li>
  85. <li class="breadcrumb-item active" aria-current="page">Campaign Report</li>
  86. </ol>
  87. </nav>
  88. </div>
  89. </div>
  90. </div>
  91. <div class="row mt-4">
  92. <div class="col-md-12">
  93. <div class="card">
  94. <div class="card-header">
  95. <h3>Task Details</h3>
  96. </div>
  97. <div class="row mt-3 ml-2">
  98. <div class="col-md-3">
  99. <label for="startDate" class="form-label" style="font-size: medium;">From Date:</label>
  100. <input type="date" id="startDate" class="form-control" placeholder="Start Date" onclick="this.showPicker()">
  101. </div>
  102. <div class="col-md-3">
  103. <label for="endDate" class="form-label" style="font-size: medium;">To Date:</label>
  104. <input type="date" id="endDate" class="form-control" placeholder="End Date" onclick="this.showPicker()">
  105. </div>
  106. <div class="col-md-3" style="margin-top: 30px;">
  107. <button id="searchBtn" class="btn btn-primary">Search</button>
  108. <button id="resetBtn" class="btn btn-secondary">Reset</button>
  109. </div>
  110. </div>
  111. <div class="card-body">
  112. <table id="QaqcDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
  113. <thead class="thead-dark">
  114. <tr role="row">
  115. <th rowspan="2" class="text-center" width="1%;">S.No</th>
  116. <th colspan="3" class="text-center">Campaign</th>
  117. <th colspan="3" class="text-center">Performance</th>
  118. <th colspan="5" class="text-center">Call Results</th>
  119. <th rowspan="2" class="text-center">Action</th>
  120. </tr>
  121. <tr role="row">
  122. <th class="text-center no-sort" style="text-align: center;">Campaign Name</th>
  123. <th class="text-center no-sort" style="text-align: center;">Date</th>
  124. <th class="text-center no-sort" style="text-align: center;">Category</th>
  125. <th class="text-center no-sort" style="text-align: center;">Total Data</th>
  126. <th class="text-center no-sort" style="text-align: center;">Assigned Calls</th>
  127. <th class="text-center no-sort" style="text-align: center;">Not Assigned Calls</th>
  128. <!-- <th class="text-center no-sort">Completion(%)</th> -->
  129. <th class="no-sort" style="text-align: center;">Information Given</th>
  130. <th class="no-sort" style="text-align: center;">Call Back Later</th>
  131. <th class="no-sort" style="text-align: center;">Unattended</th>
  132. <th class="no-sort" style="text-align: center;">Switch Off</th>
  133. <th class="no-sort" style="text-align: center;">Wrong Number</th>
  134. </tr>
  135. </thead>
  136. <tbody>
  137. </tbody>
  138. </table>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
  146. </div>
  147. </div>
  148. <!--agentperformance Modal -->
  149. <div class="modal fade" id="agentperformance" tabindex="-1"
  150. role="dialog" aria-labelledby="exampleModalCenterLabel"
  151. aria-hidden="true">
  152. <div class="modal-dialog modal-xl modal-dialog-scrollable"
  153. role="document">
  154. <div class="modal-content">
  155. <div class="modal-header">
  156. <h5 class="modal-title" id="exampleModalCenterLabel">Task
  157. Details</h5>
  158. <button type="button" class="close" data-dismiss="modal"
  159. aria-label="Close">
  160. <span aria-hidden="true">&times;</span>
  161. </button>
  162. </div>
  163. <div class="modal-body">
  164. <form id="editForm" onsubmit="submitForm(event)">
  165. <input type="hidden" name="campaign_id" id="campaign_id" />
  166. <div class="form-group">
  167. <input type="hidden" name="category_id" class="form-control"
  168. id="category_id" readonly>
  169. </div>
  170. <div class="mt-1" style="font-size: 14px;">
  171. <div class="row pb-2">
  172. <div class="col-md-6">
  173. <strong>From Date:</strong> <span id="start_date">N/A</span>
  174. </div>
  175. <div class="col-md-6">
  176. <strong>To Date:</strong> <span id="end_date">N/A</span>
  177. </div>
  178. </div>
  179. <div class="row pb-2">
  180. <div class="col-md-6">
  181. <strong>Description:</strong> <span id="description_modal">N/A</span>
  182. </div>
  183. <div class="col-md-6">
  184. <strong>Campaign Category:</strong> <span id="category">N/A</span>
  185. </div>
  186. </div>
  187. </div>
  188. </form>
  189. <!-- Bootstrap Tabs for Switching Tables -->
  190. <ul class="nav nav-tabs" id="tableTabs" role="tablist"
  191. style="margin-bottom: 10px;">
  192. <li class="nav-item"><a class="nav-link active mr-2"
  193. id="performance-tab" data-toggle="tab" href="#performanceTable"
  194. role="tab" aria-controls="performanceTable" aria-selected="true">Agent
  195. With Report</a></li>
  196. <li class="nav-item"><a class="nav-link" id="question-tab"
  197. data-toggle="tab" href="#questionTable" role="tab"
  198. aria-controls="questionTable" aria-selected="false">Feedback
  199. Report</a></li>
  200. </ul>
  201. <!-- <div class="modal-body"> -->
  202. <div class="tab-content">
  203. <!-- Performance Table -->
  204. <div class="tab-pane fade show active" id="performanceTable"
  205. role="tabpanel" aria-labelledby="performance-tab">
  206. <div class="table-responsive">
  207. <table id="agentperformanceDatatable"
  208. class="table table-striped table-bordered table-hover dataTable"
  209. role="grid">
  210. <thead class="thead-dark">
  211. <tr role="row">
  212. <th rowspan="2" class="text-center">S.No</th>
  213. <th rowspan="2" class="text-center">Agent Name</th>
  214. <th colspan="4" class="text-center">Performance</th>
  215. <th colspan="5" class="text-center">Call Results</th>
  216. </tr>
  217. <tr role="row">
  218. <th class="text-center">Assigned Calls</th>
  219. <th class="text-center">Finished</th>
  220. <th class="text-center">Pending Calls</th>
  221. <th class="text-center">Completion (%)</th>
  222. <th class="text-center">Information Given</th>
  223. <th class="text-center">Call Back</th>
  224. <th class="text-center">Unattended</th>
  225. <th class="text-center">Switch Off</th>
  226. <th class="text-center">Wrong Number</th>
  227. </tr>
  228. </thead>
  229. <tbody>
  230. </tbody>
  231. </table>
  232. </div>
  233. </div>
  234. <!-- Questions Table -->
  235. <div class="tab-pane fade" id="questionTable" role="tabpanel"
  236. aria-labelledby="question-tab">
  237. <table id="questionDatatable"
  238. class="table table-striped table-bordered table-hover dataTable"
  239. role="grid">
  240. <thead class="thead-dark">
  241. <tr role="row">
  242. <th class="text-center ">S.No</th>
  243. <th class="text-center no-sort">Question</th>
  244. <th class="text-center no-sort">Answers</th>
  245. </tr>
  246. </thead>
  247. <tbody>
  248. </tbody>
  249. </table>
  250. </div>
  251. </div>
  252. <!-- </div> -->
  253. </div>
  254. <div class="modal-footer">
  255. <button type="button" class="btn btn-secondary"
  256. data-dismiss="modal">Cancel</button>
  257. </div>
  258. </div>
  259. </div>
  260. </div>
  261. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  262. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  263. <script th:replace="~{fragments/modules/base/script :: script}"></script>
  264. <!-- sweet alert -->
  265. <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  266. <script type="text/javascript">
  267. $(document).ready(function() {
  268. $('#agentperformance').on('shown.bs.modal', function () {
  269. let buttons = [
  270. {
  271. extend: 'pageLength',
  272. className: 'btn btn-warning'
  273. },
  274. {
  275. title: 'Data export',
  276. extend: 'copyHtml5',
  277. text: 'Copy',
  278. className: 'btn btn-secondary'
  279. },
  280. {
  281. extend: 'excelHtml5',
  282. text: 'Excel',
  283. className: 'btn btn-secondary'
  284. },
  285. {
  286. extend: 'csvHtml5',
  287. text: 'CSV',
  288. className: 'btn btn-secondary'
  289. },
  290. {
  291. extend: 'pdfHtml5',
  292. text: 'PDF',
  293. className: 'btn btn-secondary'
  294. }
  295. ];
  296. if (!$.fn.DataTable.isDataTable('#agentperformanceDatatable')) {
  297. $('#agentperformanceDatatable').DataTable({
  298. dom: 'Bftip',
  299. columnDefs: [
  300. { targets: 'no-sort', orderable: false }
  301. ],
  302. lengthMenu: [
  303. [50, 100, 200, 500, -1],
  304. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  305. ],
  306. scrollY: '30vh',
  307. scrollX: true, // Enable horizontal scrolling
  308. fixedColumns: {
  309. left: 1,
  310. right: 1
  311. },
  312. buttons: buttons,
  313. fixedHeader: false,
  314. autoWidth: false,
  315. responsive: true,
  316. searching: true,
  317. select: false,
  318. processing: false,
  319. });
  320. }
  321. });
  322. var table = $('#QaqcDatatable').DataTable({
  323. dom: 'Bftip',
  324. columnDefs: [
  325. { targets: 'no-sort', orderable: false }
  326. ],
  327. lengthMenu: [
  328. [50, 100, 200, 500, -1],
  329. ['50 rows', '100 rows', '200 rows', 'Show all']
  330. ],
  331. scrollY: '50vh',
  332. fixedColumns: {
  333. left: 1,
  334. right: 1
  335. },
  336. buttons: [
  337. {
  338. extend: 'pageLength',
  339. className: 'btn btn-warning'
  340. },
  341. {
  342. title: 'Data export',
  343. extend: 'copyHtml5',
  344. text: 'Copy',
  345. className: 'btn btn-secondary',
  346. id: 'copyBtn'
  347. },
  348. {
  349. extend: 'excelHtml5',
  350. text: 'Excel',
  351. className: 'btn btn-secondary',
  352. id: 'excelBtn'
  353. },
  354. {
  355. extend: 'csvHtml5',
  356. text: 'CSV',
  357. className: 'btn btn-secondary',
  358. id: 'csvBtn'
  359. },
  360. {
  361. extend: 'pdfHtml5',
  362. text: 'PDF',
  363. className: 'btn btn-secondary',
  364. id: 'pdfBtn'
  365. }
  366. ],
  367. fixedHeader: true,
  368. autoWidth: true,
  369. responsive: true,
  370. searching:true,
  371. select: false,
  372. processing: false
  373. });
  374. /* var questiontable = $('#questionDatatable').DataTable({
  375. dom: 'Bftip',
  376. columnDefs: [
  377. { targets: 'no-sort', orderable: false }
  378. ],
  379. lengthMenu: [
  380. [50, 100, 200, 500, -1],
  381. ['50 rows', '100 rows', '200 rows', 'Show all']
  382. ],
  383. scrollY: '50vh',
  384. fixedColumns: {
  385. left: 1,
  386. right: 1
  387. },
  388. buttons: [
  389. {
  390. extend: 'pageLength',
  391. className: 'btn btn-warning'
  392. },
  393. {
  394. title: 'Data export',
  395. extend: 'copyHtml5',
  396. text: 'Copy',
  397. className: 'btn btn-secondary',
  398. id: 'copyBtn'
  399. },
  400. {
  401. extend: 'excelHtml5',
  402. text: 'Excel',
  403. className: 'btn btn-secondary',
  404. id: 'excelBtn'
  405. },
  406. {
  407. extend: 'csvHtml5',
  408. text: 'CSV',
  409. className: 'btn btn-secondary',
  410. id: 'csvBtn'
  411. },
  412. {
  413. extend: 'pdfHtml5',
  414. text: 'PDF',
  415. className: 'btn btn-secondary',
  416. id: 'pdfBtn'
  417. }
  418. ],
  419. fixedHeader: false,
  420. autoWidth: true,
  421. responsive: false,
  422. searching:true,
  423. select: false,
  424. processing: false
  425. }); */
  426. // Ensure DataTable columns adjust when modal is shown
  427. /* $('#agentperformance').on('shown.bs.modal', function () {
  428. if ($.fn.DataTable.isDataTable('#questionDatatable')) {
  429. let questionDatatable = $('#questionDatatable').DataTable();
  430. questionDatatable.columns.adjust().draw();
  431. }
  432. }); */
  433. // Initialize DataTable with export buttons
  434. //const overallcountapiUrl = "/gcc/api/callcenterqaqc/qaqctasklist/overalltaskcount"; // Replace with your API endpoint
  435. const tableApiUrl = "/gcc/api/campaignreport/getcampaignData";
  436. const agentApiUrl = "/gcc/api/campaignreport/getagentdatacount";
  437. const excelurl = "/gcc/api/campaign/getCampaignQuestionData";
  438. //const dataTableElement = $("#QaqcDatatable").DataTable(); // Initialize DataTable
  439. //const questionTableElement = $("#questionDatatable").DataTable(); // Initialize DataTable
  440. // Fetch Data Function
  441. // Fetch and Populate Table Data Function
  442. const fetchTableData = async (startDate = "", endDate = "") => {
  443. try {
  444. const params = new URLSearchParams();
  445. if (startDate) params.append("startDate", startDate);
  446. if (endDate) params.append("endDate", endDate);
  447. const response = await fetch(`${tableApiUrl}?${params.toString()}`);
  448. const tableData = await response.json();
  449. // Update DataTable with new data
  450. table.clear(); // Clear existing data
  451. tableData.forEach((row, index) => {
  452. table.row.add([
  453. `<div style="text-align: center;">${index + 1}</div>`,
  454. `<button class="btn btn-success" data-campaign_id="${row.campaign_id}"
  455. onclick="handleTaskButtonClick('${row.campaign_id}')">${row.campaign_name}</button>`,
  456. `<div style="text-align: center;"> ${row.start_date} - ${row.end_date}</div>`,
  457. `<div style="text-align: center;">${row.category_name}</div>`,
  458. `<div style="text-align: center;">${row.assigned_count}</div>`,
  459. `<div style="text-align: center;">${row.total_count}</div>`,
  460. `<div style="text-align: center;">${row.not_assigned_count}</div>`,
  461. `<div style="text-align: center;">${row.informationgiven_count}</div>`,
  462. `<div style="text-align: center;">${row.callback_count}</div>`,
  463. `<div style="text-align: center;">${row.unattended_count}</div>`,
  464. `<div style="text-align: center;">${row.switchoff_count}</div>`,
  465. `<div style="text-align: center;">${row.wrongnumber_count}</div>`,
  466. `<button class="btn btn-primary downloadExcelBtn"
  467. data-categoryid="${row.category_id}"
  468. data-campaignid="${row.campaign_id}"
  469. >
  470. Download Excel
  471. </button>`
  472. ]);
  473. });
  474. table.draw(); // Redraw the DataTable with the updated data
  475. } catch (error) {
  476. console.error("Error fetching table data:", error);
  477. }
  478. };
  479. $(document).on("click", ".downloadExcelBtn", function () {
  480. let categoryId = $(this).data("categoryid");
  481. let campaignId = $(this).data("campaignid");
  482. console.log("dfd",categoryId);
  483. console.log("d",campaignId);
  484. //console.log("Row Data:", row);
  485. window.location.href = `/gcc/api/campaignreport/download-excel?categoryId=${categoryId}&campaignId=${campaignId}`;
  486. });
  487. // Example: Fetch Data initially without filters
  488. fetchTableData();
  489. // Function to Download Campaign Excel
  490. // Event listener for From Date selection
  491. $("#startDate").on("change", function() {
  492. const startDate = $(this).val(); // Get the selected start date
  493. // Set the min value for To Date to be the selected From Date
  494. $("#endDate").attr("min", startDate);
  495. });
  496. // Event listener for To Date selection
  497. $("#endDate").on("change", function() {
  498. const endDate = $(this).val(); // Get the selected end date
  499. // Set the max value for From Date to be the selected To Date
  500. $("#startDate").attr("max", endDate);
  501. });
  502. // Search Button Click
  503. document.getElementById("searchBtn").addEventListener("click", () => {
  504. const startDate = document.getElementById("startDate").value;
  505. const endDate = document.getElementById("endDate").value;
  506. //console.log("xsnskjx");
  507. console.log(startDate);
  508. // Check if startDate or endDate is empty
  509. if (!startDate || !endDate) {
  510. Swal.fire({
  511. icon: "warning",
  512. title: "Incomplete Search",
  513. text: "Please select the Date Before searching",
  514. confirmButtonText: "OK",
  515. });
  516. } else {
  517. // Call fetchTableData if dates are provided
  518. fetchTableData(startDate, endDate);
  519. }
  520. });
  521. // Reset Button Click
  522. document.getElementById("resetBtn").addEventListener("click", () => {
  523. /* document.getElementById("startDate").value = "";
  524. document.getElementById("endDate").value = "";
  525. fetchData(); // Fetch data without date filters
  526. fetchTableData(); */
  527. window.location.reload();
  528. });
  529. // Initial Load
  530. //fetchData(); // Load overall data initially
  531. fetchTableData();
  532. });
  533. /* function downloadCampaignExcel(campaignId) {
  534. const excelurl = `/gcc/api/campaign/exportCampaignData?campaign_id=${campaignId}`;
  535. $.ajax({
  536. url: excelurl,
  537. type: 'GET',
  538. xhrFields: {
  539. responseType: 'blob' // Ensure response is treated as a Blob (binary file)
  540. },
  541. success: function (data, status, xhr) {
  542. const blob = new Blob([data], { type: xhr.getResponseHeader('Content-Type') });
  543. // Extract filename from Content-Disposition header
  544. let filename = "campaign_data.xlsx"; // Default filename
  545. const disposition = xhr.getResponseHeader('Content-Disposition');
  546. if (disposition && disposition.includes('filename=')) {
  547. filename = disposition.split('filename=')[1].trim().replace(/['"]/g, ''); // Clean up filename
  548. }
  549. const downloadUrl = URL.createObjectURL(blob);
  550. const link = document.createElement("a");
  551. link.href = downloadUrl;
  552. link.setAttribute("download", filename); // Set dynamic filename
  553. document.body.appendChild(link);
  554. link.click();
  555. document.body.removeChild(link);
  556. URL.revokeObjectURL(downloadUrl); // Clean up memory
  557. },
  558. error: function (xhr, status, error) {
  559. console.error("Error downloading Excel file:", error);
  560. alert("Failed to download the file. Please try again.");
  561. }
  562. });
  563. } */
  564. function handleTaskButtonClick(CampaignId)
  565. {
  566. //console.log("CampaignId",CampaignId);
  567. $('#agentperformance').modal({
  568. backdrop: 'static',
  569. keyboard: false
  570. });
  571. $('#agentperformance').modal('show');
  572. $.ajax({
  573. url: '/gcc/api/campaignreport/getReportCampaignid?campaign_id='+CampaignId,
  574. type: 'GET',
  575. contentType: 'application/json',
  576. success: function (response) {
  577. if (response && response.length > 0) {
  578. const campaign = response[0];
  579. // Populate form fields with response data
  580. $('#campaign_id').val(campaign.campaign_id);
  581. $('#category_id').val(campaign.category_id);
  582. /* $('#start_date').val(campaign.start_date);
  583. $('#end_date').val(campaign.end_date);
  584. $('#description_modal').val(campaign.description);
  585. $('#category').val(campaign.category_name); */
  586. $('#start_date').text(campaign.start_date || 'N/A');
  587. $('#end_date').text(campaign.end_date || 'N/A');
  588. $('#description_modal').text(campaign.description || 'N/A');
  589. $('#category').text(campaign.category_name || 'N/A');
  590. // Update modal title dynamically
  591. $('#exampleModalCenterLabel').html(
  592. `<b>Campaign ID:</b> ${campaign.campaign_id} and
  593. <b>Created Date:</b> ${campaign.created_date}`
  594. );
  595. /* <b>Category:</b> ${campaign.category_name} | */
  596. // Open modal
  597. $('#agentperformance').modal('show');
  598. } else {
  599. console.warn('No data found for the given campaign ID');
  600. $('#exampleModalCenterLabel').html('<b>No data found</b>');
  601. }
  602. },
  603. error: function (xhr, status, error) {
  604. console.error('Error fetching campaign details:', error);
  605. $('#exampleModalCenterLabel').html('<b class="text-danger">Failed to load campaign details</b>');
  606. }
  607. });
  608. if ($.fn.DataTable.isDataTable('#agentperformanceDatatable')) {
  609. $('#agentperformanceDatatable').DataTable().clear().destroy();
  610. }
  611. $.ajax({
  612. url: '/gcc/api/campaignreport/getagentdatacount?campaign_id='+CampaignId,
  613. type: 'GET',
  614. contentType: 'application/json',
  615. success: function (response) {
  616. //console.log("response",response);
  617. if (response && response.length > 0) {
  618. let CtableBody = $('#agentperformanceDatatable tbody');
  619. CtableBody.empty();
  620. response.forEach((item, index) => {
  621. let row = `
  622. <tr>
  623. <td class="text-center">${index + 1}</td>
  624. <td class="text-center">${item.agent_name}</td>
  625. <td class="text-center">${item.assigned_count || 0}</td>
  626. <td class="text-center">${item.completed_count || 0}</td>
  627. <td class="text-center">${item.pending_count || 0}</td>
  628. <td class="text-center">${item.completed_percentage || 0}%</td>
  629. <td class="text-center">${item.informationgiven_count || 0}</td>
  630. <td class="text-center">${item.callback_count || 0}</td>
  631. <td class="text-center">${item.unattended_count || 0}</td>
  632. <td class="text-center">${item.switchoff_count || 0}</td>
  633. <td class="text-center">${item.wrongnumber_count || 0}</td>
  634. </tr>
  635. `;
  636. CtableBody.append(row);
  637. });
  638. }
  639. else {
  640. $('#agentperformanceDatatable tbody').html(`
  641. <tr>
  642. <td colspan="10" class="text-center">No data available</td>
  643. </tr>
  644. `);
  645. }
  646. },
  647. error: function (xhr, status, error) {
  648. console.error('Error in Fetching Task:', error);
  649. $('#agentperformanceDatatable tbody').html(`
  650. <tr>
  651. <td colspan="10" class="text-center text-danger">Failed to load data</td>
  652. </tr>
  653. `);
  654. }
  655. });
  656. if ($.fn.DataTable.isDataTable('#questionDatatable')) {
  657. $('#questionDatatable').DataTable().clear().destroy();
  658. }
  659. $.ajax({
  660. url: '/gcc/api/campaignreport/question-answers?campaign_id=' + CampaignId,
  661. type: 'GET',
  662. contentType: 'application/json',
  663. success: function (response) {
  664. if (response && response.length > 0) {
  665. let Qtable = $('#questionDatatable tbody');
  666. Qtable.empty(); // Clear existing data
  667. response.forEach((item, index) => {
  668. let answerColumn = item.answers.map(ans => `${ans.campaign_answer} - ${ans.answer_percentage}%`).join('<br>');
  669. let row = `
  670. <tr>
  671. <td class="text-center">${index + 1}</td>
  672. <td class="text-center">${item.questions}</td>
  673. <td class="text-center">${answerColumn}</td>
  674. </tr>
  675. `;
  676. Qtable.append(row);
  677. });
  678. } else {
  679. $('#questionDatatable tbody').html(`
  680. <tr>
  681. <td colspan="1" class="text-center">No data available</td>
  682. </tr>
  683. `);
  684. }
  685. },
  686. error: function (xhr, status, error) {
  687. console.error('Error fetching question answers:', error);
  688. console.error('Error in Fetching Task:', error);
  689. $('#questionDatatable tbody').html(`
  690. <tr>
  691. <td colspan="1" class="text-center text-danger">Failed to load data</td>
  692. </tr>
  693. `);
  694. }
  695. });
  696. /* $.ajax({
  697. url: '/gcc/api/campaignreport/question-answers?campaign_id='+CampaignId,
  698. type: 'GET',
  699. contentType: 'application/json',
  700. success: function (response) {
  701. let QtableBody = $('#questionDatatable tbody');
  702. QtableBody.empty();
  703. if (response && response.length > 0) {
  704. response.forEach((item, index) => {
  705. // Extract Yes and No answers from the array
  706. let yesAnswer = item.answers.find(ans => ans.campaign_answer.toLowerCase() === "yes") || { answer_percentage: 0 };
  707. let noAnswer = item.answers.find(ans => ans.campaign_answer.toLowerCase() === "no") || { answer_percentage: 0 };
  708. // Create the table row with percentage values
  709. let row = `
  710. <tr>
  711. <td >${index + 1}</td>
  712. <td >${item.questions}</td>
  713. <td >${yesAnswer.answer_percentage}%</td>
  714. <td >${noAnswer.answer_percentage}%</td>
  715. </tr>
  716. `;
  717. QtableBody.append(row);
  718. });
  719. } else {
  720. QtableBody.html(`
  721. <tr>
  722. <td colspan="4" class="text-center">No data available</td>
  723. </tr>
  724. `);
  725. }
  726. },
  727. error: function (xhr, status, error) {
  728. console.error('Error fetching question answers:', error);
  729. $('#questionDatatable tbody').html(`
  730. <tr>
  731. <td colspan="4" class="text-center text-danger">Failed to load data</td>
  732. </tr>
  733. `);
  734. }
  735. }); */
  736. }
  737. $(document).ready(function() {
  738. $('#agentperformance').on('shown.bs.modal', function () {
  739. $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  740. let target = $(e.target).attr("href"); // Get the active tab
  741. if (target === "#questionTable") {
  742. if ($.fn.DataTable.isDataTable('#questionDatatable')) {
  743. $('#questionDatatable').DataTable().clear().destroy();
  744. }
  745. }
  746. });
  747. let buttons = [
  748. {
  749. extend: 'pageLength',
  750. className: 'btn btn-warning'
  751. },
  752. {
  753. title: 'Data export',
  754. extend: 'copyHtml5',
  755. text: 'Copy',
  756. className: 'btn btn-secondary'
  757. },
  758. {
  759. extend: 'excelHtml5',
  760. text: 'Excel',
  761. className: 'btn btn-secondary'
  762. },
  763. {
  764. extend: 'csvHtml5',
  765. text: 'CSV',
  766. className: 'btn btn-secondary'
  767. },
  768. {
  769. extend: 'pdfHtml5',
  770. text: 'PDF',
  771. className: 'btn btn-secondary'
  772. }
  773. ];
  774. if (!$.fn.DataTable.isDataTable('#questionDatatable')) {
  775. $('#questionDatatable').DataTable({
  776. dom: 'Bftip',
  777. columnDefs: [
  778. { targets: 'no-sort', orderable: false }
  779. ],
  780. lengthMenu: [
  781. [50, 100, 200, 500, -1],
  782. ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
  783. ],
  784. scrollY: '30vh',
  785. scrollX: true, // Enable horizontal scrolling
  786. buttons: buttons,
  787. fixedHeader: false,
  788. autoWidth: false,
  789. responsive: false,
  790. searching: true,
  791. select: false,
  792. processing: false,
  793. });
  794. }
  795. });
  796. });
  797. </script>
  798. </body>
  799. </html>