+
+
+
+
+
+
+
diff --git a/odoo_website_helpdesk_dashboard/static/src/css/dashboard.css b/odoo_website_helpdesk_dashboard/static/src/css/dashboard.css
new file mode 100644
index 000000000..7d0f5f06e
--- /dev/null
+++ b/odoo_website_helpdesk_dashboard/static/src/css/dashboard.css
@@ -0,0 +1,267 @@
+
+.o_action_manager {
+ overflow: auto !important;
+}
+
+.help_dashboards {
+ padding-top: 10px;
+ background-color: #f8faff !important;
+}
+
+.dashboard_card h4 {
+ font-size: 1.1rem;
+}
+
+.main-section {
+ margin-left: 6px;
+}
+
+.breadcrumbs {
+ margin-top: 0;
+}
+
+/* Widget One
+---------------------------*/
+.stat-content {
+ display: inline-block;
+ width: 66%;
+}
+
+.stat-icon {
+ display: inline-block;
+}
+
+.stat-widget-one .stat-icon {
+ vertical-align: top;
+ margin: auto;
+ width: 100%;
+ color: #01c490;
+}
+
+.stat-widget-one .stat-icon i {
+ font-size: 30px;
+ font-weight: 900;
+ display: inline-block;
+ color: #01c490;
+}
+
+.stat-widget-one .stat-text {
+ font-size: 11px;
+ color: #868e96;
+ font-weight: bold;
+}
+
+.stat-widget-one .stat-digit {
+ font-size: 24px;
+ color: #02448b;
+}
+
+.stat-count {
+ font-size: 20px;
+ text-align: center;
+ color: #00438b;
+}
+
+.stat-title {
+ font-size: 17px;
+ text-align: center;
+ color: #00438b;
+}
+
+/*=====================Dashboard===========================*/
+
+.dashboard_card {
+ padding: 0px;
+ margin-bottom: 1.5rem;
+ border-radius: 0px;
+ box-shadow: none;
+ background: none;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ will-change: transform, box-shadow;
+}
+
+.dashboard_card:hover {
+ transform: translateY(-2px) translateZ(0) !important;
+ box-shadow: 0 10px 10px 0 rgba(62, 57, 107, 0.12), 0 0 0 transparent !important;
+}
+
+.helpdesk {
+ margin-top: 3%;
+ margin-bottom: 2%;
+}
+
+.helpdesk .stat-icon {
+ border-radius: 15px 0 0 15px;
+ width: 30%;
+ height: 100px;
+ text-align: center;
+ padding-top: 11%;
+ background: #4a5c9a;
+ color: #fff;
+}
+
+#team_ico {
+ -webkit-text-stroke: 1px #8e8e8e;
+}
+
+.helpdesk .dashboard_card {
+ border-radius: 15px;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ will-change: transform, box-shadow;
+ box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07),
+ 0 2px 9px 0 rgba(62, 57, 107, 0.06);
+}
+
+.stat-widget-one .stat-text {
+ font-size: 14px;
+ color: #314384ff;
+ margin: 2rem 0rem 1rem 0rem;
+ text-align: center;
+}
+
+.stat-widget-one .stat-digit {
+ font-size: 20px;
+ font-weight: bolder;
+ padding: 1px 10px 2px 0;
+ color: #8061a9;
+ text-shadow: 0px 0px 20px #000000;
+ text-align: center;
+}
+
+.stat-widget-one .stat-icon i {
+ font-size: 25px;
+ font-weight: 900;
+ display: inline-block;
+ color: #fff;
+}
+
+.stat-widget-one {
+ border-radius: 15px;
+ background-color: white;
+ text-align: inherit !important;
+}
+
+.stat-widget-one {
+ width: 100%;
+}
+
+
+.inbox_tickets .stat-widget-one .stat-text {
+ color: #706F8E;
+}
+
+.inbox_tickets .stat-icon {
+ background: #706F8E !important;
+}
+
+.inprogress_tickets .stat-widget-one .stat-text {
+ color: #9AA8A8;
+}
+
+.inprogress_tickets .stat-icon {
+ background: #9AA8A8 !important;
+}
+
+.done_tickets .stat-icon {
+ background: #847A9F !important;
+}
+
+.done_tickets .stat-widget-one .stat-text {
+ color: #847A9F;
+}
+
+.team_card .stat-icon {
+ background: #66719a !important;
+}
+
+.team_card .stat-widget-one .stat-text {
+ color: #66719a;
+}
+
+.dashboard_card-body {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.pending_detail {
+ width: 75%;
+ padding: 0 0 0 40px;
+ margin: 0 0 0 4px;
+}
+
+.ticket_box {
+ height: 32rem;
+ overflow-y: auto;
+}
+
+.ticket_box_head {
+ text-align: center;
+ padding: 12px 0;
+ color: rgb(73 80 87 / 76%);
+ font-weight: bold;
+ font-size: 20px;
+ background: #b1cccc;
+ margin-bottom: 9px;
+}
+
+.tickets_head {
+ margin-left: 10px;
+}
+
+.pending_tickets {
+ padding-left: 0 ! important;
+}
+
+.tickets_list {
+ font-weight: 500;
+ font-size: 14px;
+ margin: 10px;
+ list-style-type: none;
+ border-radius: 5px;
+ border: 1px solid rgba(69, 72, 103, 0.71);
+ background: #f3f3f3bd;
+ padding: 10px !important;
+}
+
+.half_chart.chart-container.card-shadow {
+ height: 32rem;
+}
+.chart-container.card-shadow {
+ height: 32rem;
+}
+.row {
+ /* Define your styles here */
+ font-weight: bold;
+ margin-bottom: 20px;
+ /* Add more styles as needed */
+ transition: background-color 0.3s ease-in-out;
+}
+.td{
+width:20%;
+padding:15px;
+ transition: background-color 0.3s ease-in-out; /* Add a transition for background-color */
+
+}
+.td:hover {
+ background-color: #e0e0e0; /* Change the background color on hover */
+}
+.custom-tr{
+width:10%;
+
+}
+.custom-tr:hover {
+ background-color: #ff8080; /* Change the background color on hover */
+ color: white; /* Change the text color on hover */
+ font-size: 18px; /* Change the font size on hover */
+ font-weight: normal; /* Change the font weight on hover */
+ border: 2px solid #ff8080; /* Add a border on hover */
+ /* Add more hover styles as needed */
+}
+.user-image{
+ width: 10%;
+ height: auto; /* Let the height adjust proportionally to maintain aspect ratio */
+ border-radius: 50%; /* This will create a circular shape */
+ display: block; /* Ensures it's a block element for proper centering */
+ margin: 0 auto; /* Centers the circular image horizontally */
+}
diff --git a/odoo_website_helpdesk_dashboard/static/src/js/dashboard_view.js b/odoo_website_helpdesk_dashboard/static/src/js/dashboard_view.js
new file mode 100644
index 000000000..778a5a50e
--- /dev/null
+++ b/odoo_website_helpdesk_dashboard/static/src/js/dashboard_view.js
@@ -0,0 +1,290 @@
+/** @odoo-module **/
+import { registry } from "@web/core/registry";
+import { rpc } from '@web/core/network/rpc';
+import { _t } from "@web/core/l10n/translation";
+import { Component } from "@odoo/owl";
+import { onMounted, useRef } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+/** Initializes the HelpDeskDashBoard component**/
+class HelpDeskDashBoard extends Component{
+ /**Set up function**/
+ setup() {
+ super.setup();
+ var self = this;
+ this.ref = useRef("helpDeskDashboard")
+ this.actionService = useService("action");
+ onMounted(this.onMounted);
+ }
+ /**Function for onMounted**/
+ onMounted(){
+ this.render_dashboards();
+ this.render_graphs();
+ }
+ /**To render the charts**/
+ render_graphs() {
+ var self = this;
+ self.render_tickets_month_graph();
+ self.render_team_ticket_count_graph();
+ }
+ /**Doughnut chart: TICKET STATUS**/
+ render_tickets_month_graph() {
+ var self = this;
+ var ctx = this.ref.el.querySelector('#ticket_month')
+ rpc('/web/dataset/call_kw/ticket.helpdesk/get_tickets_count', {
+ model: "ticket.helpdesk",
+ method: "get_tickets_view",
+ args: [],
+ kwargs: {},
+ }).then(function (values) {
+ var data = {
+ labels: ['New', 'In Progress', 'Solved'],
+ datasets: [{
+ data: [values.inbox_count, values.progress_count, values.done_count],
+ backgroundColor: [
+ "#665191",
+ "#ff7c43",
+ "#ffa600"
+ ],
+ borderColor: [
+ "#003f5c",
+ "#2f4b7c",
+ "#f95d6a"
+ ],
+ borderWidth: 1
+ }]
+ };
+ /** Options **/
+ var options = {
+ responsive: true,
+ title: false,
+ legend: {
+ display: true,
+ position: "right",
+ labels: {
+ fontColor: "#333",
+ fontSize: 16
+ }
+ },
+ scales: {
+ yAxes: [{
+ gridLines: {
+ color: "rgba(0, 0, 0, 0)",
+ display: false,
+ },
+ ticks: {
+ min: 0,
+ display: false,
+ }
+ }]
+ }
+ };
+ /** Create Chart class object **/
+ var chart = new Chart(ctx, {
+ type: "doughnut",
+ data: data,
+ options: options
+ });
+ });
+ }
+ /** Bar chart: Team - Tickets Count Ratio **/
+ render_team_ticket_count_graph() {
+ var self = this
+ var ctx = this.ref.el.querySelector('.team_ticket_count');
+ rpc('/web/dataset/call_kw/ticket.helpdesk/get_tickets_count', {
+ model: "ticket.helpdesk",
+ method: "get_team_ticket_count_pie",
+ args: [],
+ kwargs: {},
+ }).then(function (arrays) {
+ var data = {
+ labels: arrays[1],
+ datasets: [{
+ label: "",
+ data: arrays[0],
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(255, 159, 64, 0.2)',
+ 'rgba(255, 205, 86, 0.2)',
+ 'rgba(75, 192, 192, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(153, rpc102, 255, 0.2)',
+ 'rgba(201, 203, 207, 0.2)'
+ ],
+ borderColor: ['rgb(255, 99, 132)',
+ 'rgb(255, 159, 64)',
+ 'rgb(255, 205, 86)',
+ 'rgb(75, 192, 192)',
+ 'rgb(54, 162, 235)',
+ 'rgb(153, 102, 255)',
+ 'rgb(201, 203, 207)'
+ ],
+ borderWidth: 1
+ },]
+ };
+ /** Options **/
+ var options = {
+ responsive: true,
+ title: false,
+ maintainAspectRatio: true,
+ legend: {
+ display: false
+ },
+ scales: {
+ yAxes: [{
+ display: true,
+ ticks: {
+ beginAtZero: true,
+ steps: 10,
+ stepValue: 5,
+ // max: 100
+ }
+ }]
+ }
+ };
+ /** Create Chart class object **/
+ var chart = new Chart(ctx, {
+ type: "bar",
+ data: data,
+ options: options
+ });
+ });
+ }
+ /** List view of tickets in dashboard **/
+ render_dashboards() {
+ var self = this;
+ rpc('/web/dataset/call_kw/ticket.helpdesk/get_tickets_count', {
+ model: 'ticket.helpdesk',
+ method: 'get_tickets_count',
+ args: [],
+ kwargs: {},
+ }).then(function(result) {
+ var inbox_count_span = document.createElement("span");
+ inbox_count_span.textContent = result.inbox_count
+ self.ref.el.querySelector('#inbox_count').appendChild(inbox_count_span);
+ var progress_count_span = document.createElement("span");
+ progress_count_span.textContent = result.progress_count
+ self.ref.el.querySelector('#inprogress_count').appendChild(progress_count_span);
+ var done_count_span = document.createElement("span");
+ done_count_span.textContent = result.done_count
+ self.ref.el.querySelector('#done_count').appendChild(done_count_span);
+ var team_count_span = document.createElement("span");
+ team_count_span.textContent = result.team_count
+ self.ref.el.querySelector('#team_count').appendChild(team_count_span);
+ var priorityCounts = {
+ very_low: result.very_low_count1,
+ low: result.low_count1,
+ normal: result.normal_count1,
+ high: result.high_count1,
+ very_high : result.very_high_count1
+ };
+ /**Loop through the priorities and create progress bars**/
+ for (var priority in priorityCounts) {
+ var progressBarWidth = priorityCounts[priority] + "%";
+ var progressBar = $("").css("width", progressBarWidth);
+ var progressBarContainer = $("").append(progressBar);
+ var progressValue = $("").text(priorityCounts[priority] + "%");
+ // Append the progress bar container to elements with class corresponding to the priority
+ $("." + priority + "_count").append(progressBarContainer);
+ $("." + priority + "_count .progress-value").append(progressValue);
+ }
+ var tbody = $(".ticket-details");
+ var ticket_details = result.ticket_details;
+ for (var i = 0; i < ticket_details.length; i++) {
+ /** Get the current ticket object **/
+ var ticket = ticket_details[i];
+ var row = $("
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Multipurpose Graphical Dashboard for Website HelpDesk module. +
+Website HelpDesk Dashboard +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Works in + Classified tickets according to their stages. +
+
+
+
+
+
+
+
+
+ + Number of tickets allotted to each team can be seen in the bar chart. +
+
+
+
+
+
+
+
+
+ + View status of tickets in the Doughnut Chart. +
+
+
+
+
+
+
+
+
+ + Manage Tickets in the backend easily. +
+
+
+
+
+
+
+
+
+
+ Website HelpDesk Dashboard
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + View Tickets created from website and also in the draft stage together inside 'New tickets' tile along with the count. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Manage the tickets in backend by clicking on the 'New tickets' tiles. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + View Tickets that are in progress. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + View and manage tickets that are in the done/completed state. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + Manage helpdesk teams ,also shows the count of teams existing. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + To show the Ticket Priority. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + With the help of doughnut chart, Analyse the status of tickets. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + With the help of Bar graph, analyse ratio between the Helpdesk teams and No. of tickets assigned to them. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + In this view can analyze all tickets and their details. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Available in + Number of tickets allotted to each team can be seen in the bar chart.
+
+
+
+
+
+
+
+
+
+ + View status of tickets in the Doughnut Chart.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + No, it doesn't work with Odosh. +
+
+
+
+
+
+ + We can see the number of tickets at various stages from the dashboard. +
+
+
+
+
+
+ + You can track the ticket status from the dashboard. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 9th December, 2024 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+
+
+
+ HelpDesk Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+ CUSTOMER SATISFACTION:
+
+
+ 😃
+ Response Received:
+
+
+
+
+
+
+
+
+ Ticket Priority
++
+
+
+
+
+ Very low :
+
+
+
+
+
+
+
+
+
+
+ Low :
+
+
+
+
+
+
+
+
+ Normal :
+
+
+
+
+
+
+
+
+
+ High :
+
+
+
+
+
+
+
+
+
+ Very High :
+
+
+
+
+
+
+
+
+
+ TICKET STATUS
++
+
+
+
+
+
+
+
+ Team - Tickets Count Ratio
++
+
+
+
+
+
+
+ +
+
+
+
+ ISSUE
++ +
| Customer Name | +Ticket | ++ | Assigned to | +Subject | +Priority | +
|---|
+
+
+
+
+
+
+
+
+
+ Ticket Name :
+
+
+ Ticket Issue :
+
+
+
+ Ticket Name :
+
+
+ Ticket Issue :
+
+
+
+
+
+ Description :
+
+
+