File manager

File manager - Edit - /home/autoph/public_html/projects/tickets-autohub/public/js/authentication/dashboard.js

Back
(function () { "use strict"; var from_date = null; var to_date = null; var from_date2 = null; var to_date2 = null; var myBarChart1; var myBarChart2; var myBarChart3; var myBarChart4; var myBarChart5; var myBarChart6; var myBarChart7; function generateRandomColor() { // const colorPalette = ["#191825", "#865DFF", "#E384FF", "#FFA3FD"]; // const colorPalette = ["#658864", "#B7B78A", "#DDDDDD", "#EEEEEE"]; // const colorPalette = ["#557153", "#7D8F69", "#A9AF7E", "#E6E5A3"]; // const colorPalette = ["#395144", "#4E6C50", "#AA8B56", "#F0EBCE"]; // const colorPalette = ["#425F57", "#749F82", "#A8E890", "#CFFF8D"]; const colorPalette = ["#CFE0EB", '#C0D4E1', '#A6C3E4', '#93B9DD', '#8BADD3', '#78A3D4'] // const colorPalette = ["#3C6255", "#61876E", "#A6BB8D", "#EAE7B1","#425F57", "#749F82", "#A8E890", "#CFFF8D"]; // Generate a random index to select a color from the palette const randomIndex = Math.floor(Math.random() * colorPalette.length); // Get the random color from the palette const randomColor = colorPalette[randomIndex]; // var hex = Math.floor(Math.random() * 0xFFFFFF); return randomColor; } function sendAjax() { $.ajax({ type: "GET", url: "/adminDashboard", dataType: 'json', data: { from_date: from_date, to_date: to_date // from_date:$('#from_date').val(), // to_date:$('#to_date').val() }, // processData: false, // contentType: false, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, success: function (result) { // console.log(result); // result.forEach(function(key,value){ // console.log(value); var carplusCards = $('.carplus-cards'); var ticketsCards = $('.ticket-cards'); carplusCards.find('.spinner').remove(); ticketsCards.find('.spinner').remove(); $('#total_count').text(result.ticketCounts.toLocaleString() ?? 0); $('#totalOpenTicketCount').text(result.totalOpenTicketCount.toLocaleString() ?? 0); $('#totalTransferredTicketCount').text(result.totalTransferredTicketCount.toLocaleString() ?? 0); $('#totalAssignedTicketCount').text(result.totalAssignedTicketCount.toLocaleString() ?? 0); $('#totalPickedTicketCount').text(result.totalPickedTicketCount.toLocaleString() ?? 0); $('#totalClosedTicketCount').text(result.totalClosedTicketCount.toLocaleString() ?? 0); $('#carplusTicketTotal').text(result.carplusTicketTotal.toLocaleString() ?? 0); $('#carplusTicketOpen').text(result.carplusTicketOpen.toLocaleString() ?? 0); $('#carplusTicketClosed').text(result.carplusTicketClosed.toLocaleString() ?? 0); $('#dashboard_filter').modal('hide'); // }); // swal.fire({ // 'icon':"success", // 'text':result.message // }); }, error: function (error) { if (error.responseJSON.errors) { $.each(error.responseJSON.errors, function (key, value) { toastRWithTime(value[0], "error"); }); } else { toastRWithTime(error.responseJSON.error, "error"); } } }); } function sendFilter2() { $('#filter_send2').on('click', function (e) { $.ajax({ type: "GET", url: "/dashboardByDealer", dataType: 'json', data: { from_date: from_date2, to_date: to_date2 }, // processData: false, // contentType: false, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, success: function (result) { // console.log(result); generateTicketChart(result); generateChartTicketStatusCountPerCompany(result.ticketChartCounts); $("#list-support").empty(); $.each(result.supportFrequency, function (key, value) { // console.log('key ' +key + ' value '+value.support +' number '+value.occurrence_count); $("#list-support").append('<div class="row"><div class="col-sm-9"><label for="">' + value.support + '</label></div><div class="col-sm-3 text-right"><label for="">' + value.occurrence_count.toLocaleString() + '</label></div></div>'); }); $('#dashboard_filter2').modal('hide'); }, error: function (error) { if (error.responseJSON.errors) { $.each(error.responseJSON.errors, function (key, value) { toastRWithTime(value[0], "error"); }); } else { toastRWithTime(error.responseJSON.error, "error"); } } }); }); // YEAR FILTER EVENT $("#select-year").on('change', function () { $.ajax({ type: "GET", url: "/summaryTicketByYear", dataType: 'json', data: { year: $(this).val() }, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, success: function (result) { generateChartTicketCountByMonthChart(result.ticketsCountsByMonth); }, error: function (error) { if (error.responseJSON.errors) { $.each(error.responseJSON.errors, function (key, value) { toastRWithTime(value[0], "error"); }); } else { toastRWithTime(error.responseJSON.error, "error"); } } }); }) } function filterChange2() { $('[name="date-range2"]').change(function (e) { switch ($(this).val()) { case "last7days2": from_date2 = 7; to_date2 = 7; $('.custom-date2').attr('hidden', true); break; case "last14days2": from_date2 = 14; to_date2 = 14; $('.custom-date2').attr('hidden', true); break; case "last30days2": from_date2 = 30; to_date2 = 30; $('.custom-date2').attr('hidden', true); break; case "custom2": $('.custom-date2').removeAttr('hidden'); break; default: break; } }); } function sendFilter() { $('#filter_send').on('click', function (e) { sendAjax(); }); } function filterChange() { $('[name="date-range"]').change(function (e) { switch ($(this).val()) { case "last7days": from_date = 7; to_date = 7; $('.custom-date').attr('hidden', true); break; case "last14days": from_date = 14; to_date = 14; $('.custom-date').attr('hidden', true); break; case "last30days": from_date = 30; to_date = 30; $('.custom-date').attr('hidden', true); break; case "custom": $('.custom-date').removeAttr('hidden'); break; default: break; } }); } function dateChange() { $('#from_date').on('change', function (e) { from_date = $(this).val(); }); $('#to_date').on('change', function (e) { to_date = $(this).val(); }); $('#from_date2').on('change', function (e) { from_date2 = $(this).val(); }); $('#to_date2').on('change', function (e) { to_date2 = $(this).val(); }); } function sendChartAjax() { $.ajax({ type: "GET", url: "/chartFilterData", dataType: 'json', data: null, // { // from_date:from_date, // to_date:to_date // from_date:$('#from_date').val(), // to_date:$('#to_date').val() // }, // processData: false, // contentType: false, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, success: function (result) { // console.log( result); $.each(result.supportFrequency, function (key, value) { let supportItem = ` <div class="d-flex justify-content-between list-group-item"> <span class="font-weight-bold text-dark">${value.support}</span> <span class="badge badge-primary p-2">${value.occurrence_count.toLocaleString()}</span> </div> `; $("#list-support").append(supportItem); }); if ((AuthUserAbilities.includes("admin-ticket-dashboard"))) { generateTicketChart(result);//SENDER SUMMARY BY COMPANY generateChartTicketCountByMonthChart(result.ticketsCountsByMonth); generateChartTicketStatusCountPerCompany(result.ticketChartCounts); // generateSLAchart(result.percentageBeyondSLA, // result.percentageWithinSLA, // result.percentageOverSLA); } if (AuthUserAbilities.includes("admin-ticket-dashboard") && AuthUserAbilities.includes("carplus-dashboard")) { generateTicketChart(result); //SENDER SUMMARY BY COMPANY generateChartTicketCountByMonthChart(result.ticketsCountsByMonth); generateChartTicketStatusCountPerCompany(result.ticketChartCounts); // generateSLAchart(result.percentageBeyondSLA, // result.percentageWithinSLA, // result.percentageOverSLA); generateChart(result); generateTicketCountByMonthChart(result.ticketCountsByMonth); // generateTicketStatusByCompanyChart(result.ticketCounts); } if (AuthUserAbilities.includes("carplus-dashboard")) { generateChart(result); generateTicketCountByMonthChart(result.ticketCountsByMonth); generateTicketStatusByCompanyChart(result.ticketCounts); } }, error: function (error) { // if(error.responseJSON.errors){ // $.each(error.responseJSON.errors, function(key,value){ // toastRWithTime(value[0],"error"); // }); // } else { // toastRWithTime(error.responseJSON.error,"error"); // } } }); } function generateChart(response) { // Extract the 'requestorPerCompany' data from the JSON response var data = response.requestorPerCompany; // Check if data is an array if (!Array.isArray(data)) { console.error('Data is not an array:', data); return; } // Extract company codes and user counts from the data var companyCodes = data.map(function (item) { return item.comp_code; }); var userCounts = data.map(function (item) { return item.user_count; }); var bGs = userCounts.map(function () { return generateRandomColor(); }); } function generateTicketCountByMonthChart(data) { // Create an array of month names var monthNames = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; // Initialize arrays for month labels and ticket counts var months = []; var ticketCounts = []; // Initialize an empty dataset with zeros for all months for (var i = 1; i <= 12; i++) { var monthLabel = monthNames[i - 1]; months.push(monthLabel); var found = false; for (var j = 0; j < data.length; j++) { if (data[j].month === i) { ticketCounts.push(data[j].ticket_count); found = true; break; } } if (!found) { ticketCounts.push(0); } } // Create a bar chart var bGs = ticketCounts.map(function () { return generateRandomColor(); }); } function generateTicketStatusByCompanyChart(data) { var compCodes = data.map(function (item) { return item.comp_code; }); var openCounts = data.map(function (item) { return item.open_count; }); var closedCounts = data.map(function (item) { return item.closed_count; }); var OpenbGs = openCounts.map(function () { return generateRandomColor(); }); var ClosedbGs = closedCounts.map(function () { return generateRandomColor(); }); } function generateTicketChart(response) { // Extract the 'requestorPerCompany' data from the JSON response var data = response.userCountsTicket; // Check if data is an array if (!Array.isArray(data)) { console.error('Data is not an array:', data); return; } // Extract company codes and user counts from the data var companyCodes = data.map(function (item) { return item.comp_code; }); var userCounts = data.map(function (item) { return item.user_count; }); var bGs = userCounts.map(function () { return generateRandomColor(); }); // Create a bar chart // var ctx4 = document.getElementById('requestPerCompanyChart').getContext('2d'); // if (myBarChart4) { // myBarChart4.destroy(); // } // myBarChart4 = new Chart(ctx4, { // maintainAspectRatio: false, // responsive: true, // type: 'bar', // data: { // labels: companyCodes, // X-axis labels // datasets: [{ // label: '', // data: userCounts, // Y-axis data // backgroundColor: bGs, // Bar color // borderColor: bGs, // Border color // borderWidth: 1 // Border width // }] // }, // options: { // scales: { // y: { // beginAtZero: true // Start Y-axis at zero // }, // x: { // ticks: { // font: { // color: '#000000' // } // } // } // }, // maintainAspectRatio: false // } // }); } function generateChartTicketCountByMonthChart(data) { // Create an array of month names var monthNames = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; // Initialize arrays for month labels and ticket counts var months = []; var ticketCounts = []; // Initialize an empty dataset with zeros for all months for (var i = 1; i <= 12; i++) { var monthLabel = monthNames[i - 1]; months.push(monthLabel); var found = false; for (var j = 0; j < data.length; j++) { if (data[j].month === i) { ticketCounts.push(data[j].ticket_count); found = true; break; } } if (!found) { ticketCounts.push(0); } } // Create a bar chart var bGs = ticketCounts.map(function () { return generateRandomColor(); }); // var ctx5 = document.getElementById('ticketChartCountByMonthChart').getContext('2d'); // if(myBarChart5){ // myBarChart5.destroy(); // } // myBarChart5 = new Chart(ctx5, { // maintainAspectRatio: false, // responsive: true, // type: 'bar', // data: { // labels: months, // X-axis labels (month names) // datasets: [{ // label: '', // data: ticketCounts, // Y-axis data (ticket counts) // backgroundColor: bGs, // Bar color // borderColor: bGs, // Border color // borderWidth: 1 // Border width // }] // }, // options: { // scales: { // y: { // beginAtZero: true // Start Y-axis at zero // }, // x: { // ticks: { // font: { // color: '#000000' // } // } // } // }, // maintainAspectRatio: false // } // }); } function generateChartTicketStatusCountPerCompany(data) { var compCodes = data.map(function (item) { return item.comp_code; }); var openCounts = data.map(function (item) { return item.open_count; }); var closedCounts = data.map(function (item) { return item.closed_count; }); var OpenbGs = openCounts.map(function () { return generateRandomColor(); }); var ClosedbGs = closedCounts.map(function () { return generateRandomColor(); }); // var ctx6 = document.getElementById('ticketStatusPerCompanyChart').getContext('2d'); // if(myBarChart6){ // myBarChart6.destroy(); // } // myBarChart6 = new Chart(ctx6, { // maintainAspectRatio: false, // responsive: true, // type: 'bar', // data: { // labels: compCodes, // X-axis labels (company codes) // datasets: [ // { // label: 'Open Tickets', // data: openCounts, // Y-axis data (open ticket counts) // backgroundColor: OpenbGs, // Bar color for open tickets // borderColor: OpenbGs, // Border color for open tickets // borderWidth: 1, // Border width // }, // { // label: 'Closed Tickets', // data: closedCounts, // Y-axis data (closed ticket counts) // backgroundColor: ClosedbGs, // Bar color for closed tickets // borderColor: ClosedbGs, // Border color for closed tickets // borderWidth: 1, // Border width // }, // ], // }, // options: { // scales: { // y: { // beginAtZero: true, // Start Y-axis at zero // }, // x: { // ticks: { // font: { // color: '#000000' // } // } // } // }, // maintainAspectRatio: false // }, // }); } function top6deptCharts() { $.ajax({ type: "GET", url: "/topDepartments", // Laravel route to fetch data dataType: 'json', data: { from_date: from_date2, to_date: to_date2 }, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, success: function (result) { if (result && result.data && result.data.length > 0) { console.log('result data: ', result.data); const data = result.data; const seriesData = [ { value: data.map(item => Number(item.total_tickets) \|\| 0), name: 'Total tickets', }, { value: data.map(item => Number(item.closed_tickets) \|\| 0), name: 'Closed tickets', }, // { // name: 'Compliance', // value: data.map(item => parseFloat(item.compliance_rate) \|\| 0) // } ]; const departmentNames = result.data.map(item => item.department_name); // ✅ Use compliance rate as the max value per department const indicators = result.data.map(item => ({ name: item.department_name, max: parseFloat(item.total_tickets + 500 ) //parseFloat(item.compliance_rate) \|\| 0 // Use compliance rate as max })); console.log("Indicators:", indicators); console.log('series data:', seriesData); // Render radar chart with compliance-based max values renderRadarChart(indicators, seriesData,departmentNames,data); } else { console.warn("No department data available."); } }, error: function (error) { console.error("Error:", error); } }); } function renderRadarChart(indicators, seriesData,departmentNames,resultData) { const chartContainer = document.querySelector("#TopDept"); if (!chartContainer) { console.error('Chart container not found!'); return; } chartContainer.style.width = "100%"; chartContainer.style.height = "450px"; const chart = echarts.init(chartContainer); const option = { tooltip: { trigger: 'item', backgroundColor: '#fff', borderColor: '#ccc', borderWidth: 1, textStyle: { color: '#333', fontSize: 12 }, formatter: function (params) { if (!params.data \|\| !params.value) return ''; let tooltipContent = `<strong>${params.seriesName}</strong><br>`; const indicators = departmentNames; params.value.forEach((val, index) => { tooltipContent += `${indicators[index]}: <span style="color:#1E90FF;">${val}</span><br>`; }); return tooltipContent; } }, legend: { legend: { data: ['Total tickets', 'Closed tickets'] }, }, radar: { indicator: indicators }, series: [{ name: 'Open tickets vs Closed tickets', type: 'radar', data : seriesData }] }; chart.setOption(option); } function fetchTicketSummary() { $.ajax({ url: "/TicketSummaryStatus", type: "GET", dataType: "json", success: function (result) { if (result && result.data) { const formatNumber = (num) => (num ? Number(num).toLocaleString() : '0'); $("#totalTickets").text(formatNumber(result.data.total_tickets)); $("#openTickets").text(formatNumber(result.data.open_tickets)); $("#transferredTickets").text(formatNumber(result.data.transferred_tickets)); $("#assignedTickets").text(formatNumber(result.data.assigned_tickets)); $("#pickedTickets").text(formatNumber(result.data.picked_tickets)); $("#closedTickets").text(formatNumber(result.data.closed_tickets)); } }, error: function (error) { console.error("Error:", error); } }); } function renderChartTicketByPriority() { const chartContainerId = "TicketByPriorityContainer"; // Function to initialize the chart const initChart = () => { const chartContainer = document.getElementById(chartContainerId); if (!chartContainer) { // console.error("Chart container not found."); return; } // ✅ Fetch data and initialize the chart fetch('/TicketByPriority') .then(response => response.json()) .then(result => { const data = result.data; // Ensure correct data access // ✅ Parse values and fallback to 0 const chartData = [ { value: parseInt(data.urgent, 10) \|\| 0, name: 'High', itemStyle: { color: '#ff4d4f' } }, // Red { value: parseInt(data.medium, 10) \|\| 0, name: 'Medium', itemStyle: { color: '#40a9ff' } }, // Blue { value: parseInt(data.low, 10) \|\| 0, name: 'Low', itemStyle: { color: '#8c8c8c' } } // Gray ]; // ✅ Ensure at least one visible section (prevent empty chart) const hasNonZeroValues = chartData.some(item => item.value > 0); // ✅ Add a fallback "No Data" entry if all values are 0 if (!hasNonZeroValues) { chartData.push({ value: 1, name: 'No Data', itemStyle: { color: '#f0f0f0' } }); } // ✅ Initialize the chart const chart = echarts.init(chartContainer); // ✅ Configure chart options chart.setOption({ tooltip: { trigger: 'item', formatter: '{b}: {c} tickets ({d}%)' }, legend: { top: '0%', left: 'center', bottom: '25px', textStyle: { color: '#000', fontSize: 12 }, itemGap: 20 // ✅ Increased gap between legend items // orient: 'vertical', // ✅ Arrange labels vertically // left: '0%', // ✅ Move legend to the left side // top: 'center', // ✅ Align legend to the middle // textStyle: { // color: '#000', // fontSize: 12 // }, // itemGap: 15 }, series: [{ name: 'Tickets by Priority', type: 'pie', radius: ['40%', '70%'], // Donut shape avoidLabelOverlap: false, label: { show: true, position: 'outside', formatter: '{b}: {c} ({d}%)', fontSize: 12, color: '#333' }, emphasis: { label: { show: true, fontSize: '14', fontWeight: 'bold', formatter: '{b}\n{c} tickets\n({d}%)', color: '#000', padding: [8, 12, 8, 12], // More padding when hovered backgroundColor: '#f5f5f5', borderRadius: 8, borderWidth: 1, borderColor: '#666' } }, labelLine: { // show:false, show: true, length: 20, length2: 10 }, data: chartData }] }); // ✅ Handle resizing window.addEventListener('resize', () => chart.resize()); }) .catch(error => console.error('Error:', error)); }; // ✅ Ensure chart initialization after DOM is fully loaded document.addEventListener("DOMContentLoaded", () => { setTimeout(initChart, 200); }); } function renderChartMonthlyDeptTicket() { document.addEventListener("DOMContentLoaded", () => { const chartContainer = document.querySelector("#MonthlyTicketChart"); if (!chartContainer) { console.error('Chart container not found!'); return; } chartContainer.style.width = "750px"; // Canvas width const chart = echarts.init(chartContainer); const loadChartData = (yearForMonthly) => { fetch(`/MonthlyTicketofDept?year=${yearForMonthly}`) .then(response => response.json()) .then(data => { // console.log(`Data for ${yearForMonthly}:`, data); // Prepare the data for ECharts const monthlyData = Array(12).fill(0); // Initialize with zeros data.forEach(item => { monthlyData[item.month - 1] = item.total; // Map month data }); chart.setOption({ tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.8)', borderColor: '#fff', borderWidth: 1, textStyle: { color: '#fff' } }, xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], axisLine: { lineStyle: { color: '#ccc' } }, axisLabel: { color: '#555', fontSize: 12 } }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#ccc' } }, splitLine: { lineStyle: { // type: 'dashed', color: '#ddd' } } }, series: [{ name: 'Tickets', type: 'bar', data: monthlyData, barWidth: '45%', // Adjust bar width emphasis: { itemStyle: { color: '#2c82c9' // Highlight color on hover } } }], grid: { left: '5%', right: '5%', bottom: '10%', containLabel: true } }); }) .catch(error => { console.error('Error loading monthly ticket data:', error); }); }; // Initialize with current year const currentYear = new Date().getFullYear(); loadChartData(currentYear); // Listen for year changes const yearSelector = document.getElementById('yearForMonthly'); if (yearSelector) { yearSelector.addEventListener('change', (event) => { const selectedYear = event.target.value; loadChartData(selectedYear); }); } }); } top6deptCharts(); fetchTicketSummary(); renderChartTicketByPriority(); renderChartMonthlyDeptTicket(); $(function () { dateChange(); sendFilter(); sendFilter2(); sendAjax(); filterChange(); filterChange2(); sendChartAjax(); }); })();

| ver. 1.4 | . | PHP 8.1.32 | Generation time: 0 | proxy | phpinfo | Settings