|
|
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head th:replace="~{fragments/modules/base/head :: head}">
</head><style>.required { color: red;}
.card-box { box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;}</style><body> <div class="wrapper">
<!-- header top menu Start --> <header th:replace="~{fragments/modules/base/header :: header}"></header> <!-- header top menu end --> <div class="page-wrap"> <!--=============== Left Menu side Start ================--> <div th:replace="~{fragments/modules/base/menu :: menu}"></div> <!--=============== Left side End ================-->
<div class="main-content"> <div class="container-fluid"> <div class="page-header mb-2"> <div class="row align-items-end"> <div class="col-lg-8"> <div class="page-header-title"> <i class="far fa-calendar-plus bg-blue"></i> <div class="d-inline"> <h5>Dashboard QAQC</h5> <span>1913 QAQC Dashboard</span> </div> </div> </div> <div class="col-lg-4"> <nav class="breadcrumb-container" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/gcc/index"><i class="ik ik-home"></i></a></li> <li class="breadcrumb-item" aria-current="page">1913 QAQC</li> <li class="breadcrumb-item" aria-current="page">Agents QAQC</li> <li class="breadcrumb-item active" aria-current="page">Dashboard</li> </ol> </nav> </div> </div> </div>
<div class="row mt-4"> <div class="col-12"> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <h3 class="mb-0" style="font-weight: bold;font-size: large;"><span th:text="${agent[0]['agent_name']}" style="font-weight: bold;font-size: large;"></span>'s Task Dashboard</h3>
<form id="dateForm" method="POST" action="/gcc/callcenterqaqc/agent/agentgrievancedashboard"> <div class="d-flex"> <!-- Date input fields for start and end dates -->
<input type="date" class="form-control mr-2" id="startDate" name="startDate" placeholder="Start Date"> <input type="date" class="form-control mr-2" id="endDate" name="endDate" placeholder="Start Date">
<!-- Hidden form to submit the selected dates -->
<!-- <input type="hidden" id="hiddenStartDate" name="startDate">
<input type="hidden" id="hiddenEndDate" name="endDate"> --> <button type="submit" class="btn btn-primary" id="searchBtn">Search</button> <button type="button" class="btn btn-secondary ml-2" id="resetBtn">Reset</button> </div> </form>
</div> <div class="card-body"> <div class="row mt-2"> <!-- Total Calls Assigned --> <div class="col-xl-3 col-md-6 col-sm-12"> <div class="card card-box p-3 text-center h-100"> <h6 class="text-facebook mb-2"> <b>Total Calls Assigned</b> </h6> <h4 class="text-twitter fw-700 mt-3" th:text="${details[0]?.Total_Calls_assigned}"> <!-- Display Total Calls Assigned -->
</h4> </div> </div> <!-- QA&QC Calls --> <div class="col-xl-3 col-md-6 col-sm-12"> <div class="card card-box p-3 text-center h-100"> <h6 class="text-facebook mb-2"> <b>QA&QC Calls</b> </h6> <h4 class="text-twitter fw-700 mt-3" th:text=" ${details[0]?.Closed_Call_count}"> <!-- Display Closed Calls Count -->
</h4> </div> </div> <!-- In-progress Calls --> <div class="col-xl-2 col-md-6 col-sm-12"> <div class="card card-box p-3 text-center h-100"> <h6 class="text-facebook mb-2"> <b>In-progress Calls</b> </h6> <h4 class="text-twitter fw-700 mt-3" th:text="${details[0]?.Inprogress_Call_count}"> <!-- Display In-progress Calls Count -->
</h4> </div> </div> <!-- Follow-up Calls --> <div class="col-xl-2 col-md-6 col-sm-12"> <div class="card card-box p-3 text-center h-100"> <h6 class="text-facebook mb-2"> <b>Official Follow-up Calls</b> </h6> <h4 class="text-twitter fw-700 mt-3" th:text="${details[0]?.Followup_Call_count}"> <!-- Display Follow-up Calls Count -->
</h4> </div> </div> <div class="col-xl-2 col-md-6 col-sm-12"> <div class="card card-box p-3 text-center h-100"> <h6 class="text-facebook mb-2"> <b>Public Follow-up Calls</b> </h6> <h4 class="text-twitter fw-700 mt-3" th:text="${details[0]?.PublicFollowup_Call_count}"> <!-- Display Follow-up Calls Count -->
</h4> </div> </div> </div> </div>
<div class="card-block"> <div class="card-header"> <h3 style="font-weight: bold;">Your Performance Overview</h3> </div> <div class="card-body"> <div class="row mt-2"> <div class="col-xl-3 col-md-6 col-sm-12"> <div class="card card-box p-3 text-center h-100"> <h6 class="text-facebook mb-2"> <b>Total Assigned</b> </h6> <h4 class="text-twitter fw-700 mt-3" th:text="${details2[0]?.total_data_count}"></h4> </div> </div> <!-- QA&QC Calls --> <div class="col-xl-3 col-md-6 col-sm-12"> <div class="card card-box p-3 text-center h-100"> <h6 class="text-facebook mb-2"> <b>Finished</b> </h6> <h4 class="text-twitter fw-700 mt-3" th:text="${details2[0]?.completed_count}"></h4> </div> </div> <!-- In-progress Calls --> <div class="col-xl-3 col-md-6 col-sm-12"> <div class="card card-box p-3 text-center h-100"> <h6 class="text-facebook mb-2"> <b>Pending</b> </h6> <h4 class="text-twitter fw-700 mt-3" th:text="${details2[0]?.pending_count}"></h4> </div> </div> <!-- Follow-up Calls --> <div class="col-xl-3 col-md-6 col-sm-12"> <div class="card card-box p-3 text-center h-100"> <h6 class="text-facebook mb-2"> <b>Completion (%)</b> </h6> <h4 class="text-twitter fw-700 mt-3" th:text="${details2[0]?.completed_percentage}+ '%'"></h4> </div> </div> </div> </div> </div> </div> </div> </div>
<div class="row mt-4"> <div class="col-md-12"> <div class="card"> <div class="card-header"><h3><b>Your Task lists</b></h3></div> <div class="card-body"> <div class="table-responsive">
<table id="AgentQaqcDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid"> <thead class="thead-dark"> <tr>
<th rowspan="2" class="text-center">S.No</th> <th rowspan="2" class="text-center">Task ID</th> <th rowspan="2" class="text-center">Date</th> <th rowspan="2" class="text-center">Type</th> <th class="text-center" colspan="4">Performance</th>
</tr> <tr> <th class="text-center">Assigned</th> <th class="text-center">Completed</th> <th class="text-center">Pending</th> <th class="text-center">Completion Percentage(%)</th> </tr> </thead> <tbody> <tr th:each="task, iterStat : ${tasks}"> <td class="text-center" th:text="${iterStat.count}"></td> <td class="text-center" th:text="${task['taskid']}"></td> <td class="text-center" th:text="${task['cdate']}"></td> <td class="text-center" th:text="${task['call_category']}"></td> <td class="text-center" th:text="${task['assigned']}"></td> <td class="text-center" th:text="${task['callstaken']}"></td> <td class="text-center" th:text="${task['pending']}"></td> <td class="text-center" th:text="${task['percentage'] + '%'}"></td> </tr> </tbody> </table> </div> </div> </div> </div> </div>
</div> </div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div> </div>
<!-- in the code use to show the download different type microsoft -->
<!-- Include jQuery and Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script th:replace="~{fragments/modules/base/script :: script}"></script> <!-- sweet alert --> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script type="text/javascript"> $(document).ready(function() {
var table = $('#AgentQaqcDatatable').DataTable({ dom: 'Bftip', columnDefs: [ { targets: 'no-sort', orderable: false } ], lengthMenu: [ [50, 100, 200, 500, -1], ['50 rows', '100 rows', '200 rows', 'Show all'] ], scrollY: '50vh', fixedColumns: { left: 1, right: 1 }, buttons: [ { extend: 'pageLength', className: 'btn btn-warning' }, { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary', id: 'copyBtn' }, { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary', id: 'excelBtn' }, { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary', id: 'csvBtn' }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary', id: 'pdfBtn' } ], fixedHeader: true, autoWidth: true, responsive: true, searching: true, select: false, processing: false }); /* let startDate = new Date().toISOString().split('T')[0]; // Current date in 'yyyy-mm-dd' format let endDate = new Date().toISOString().split('T')[0]; // Current date in 'yyyy-mm-dd' format
console.log("Start Date:", startDate); // Logs the current date console.log("End Date:", endDate); */ // Logs the current date
/* $.ajax({ url: '/gcc/api/callcenterqaqc/agent/getAgentDashboardData', method: 'GET', success: function(response) { console.log("Response:", response); }, error: function(xhr, status, error) { console.error("Error occurred: ", error); } }); */ /* window.onload = function () { // Get the current date in YYYY-MM-DD format const today = new Date().toISOString().split('T')[0]; //Set the hidden inputs with the current date document.getElementById('hiddenStartDate').value = today; document.getElementById('hiddenEndDate').value = today; // Set the date input fields to empty document.getElementById('startDate').value = ''; document.getElementById('endDate').value = ''; // Retrieve stored start and end date from sessionStorage (only for the current session) const storedStartDate = sessionStorage.getItem('startDate'); const storedEndDate = sessionStorage.getItem('endDate');
if (storedStartDate && storedEndDate) { document.getElementById('startDate').value = storedStartDate; document.getElementById('endDate').value = storedEndDate; } }; */
document.getElementById('resetBtn').addEventListener('click', function () { event.preventDefault(); window.location.href="/gcc/callcenterqaqc/agent/agentgrievancedashboard"; }); document.getElementById('searchBtn').addEventListener('click', function (e) { const startDate = document.getElementById('startDate').value; const endDate = document.getElementById('endDate').value;
//console.log("startdate: ", startDate); //console.log("enddate: ", endDate);
if (!startDate || !endDate) { // Show SweetAlert if dates are missing Swal.fire({ icon: 'warning', // Warning icon title: 'Please select both start and end dates.', showConfirmButton: true, // Show a confirmation button timer: 3000 // Optional: Auto-close after 3 seconds });
e.preventDefault(); // Prevent form submission if validation fails return; }
// Submit the form to fetch the data based on the selected date range document.getElementById('dateForm').submit(); // This will submit the form });
});
</script>
</body></html>
|
