Sep 6 [FIX] : Bug Fixed 'odoo_website_helpdesk_dashboard'

odoo_website_helpdesk_dashboard/__manifest__.py

@@ -25,6 +25,7 @@
     'description': """Helpdesk Support Ticket Management Dashboard""",
     'summary': """Website HelpDesk Dashboard Module Brings a Multipurpose"""
                """Graphical Dashboard for Website HelpDesk module""",
+    'version': '14.0.1.0.1',
     'author': "Cybrosys Techno Solutions",
     'company': 'Cybrosys Techno Solutions',
     'maintainer': 'Cybrosys Techno Solutions',

odoo_website_helpdesk_dashboard/models/helpdesk_dashboard.py

@@ -19,12 +19,12 @@
 #    If not, see <http://www.gnu.org/licenses/>.
 #
 #############################################################################
-
-from odoo import models, api
 import calendar
+from odoo import models, api
 
 
 class HelpDeskTicket(models.Model):
+    """ Inherited class to get help desk ticket details...."""
     _inherit = 'help.ticket'
 
     @api.model
@@ -33,17 +33,50 @@ class HelpDeskTicket(models.Model):
         user = self.env.user
         if user.has_group('base.group_user'):
             return True
-        else:
+        return False
-            return False
 
     @api.model
     def get_tickets_count(self):
+        """ Function To Get The Ticket Count"""
+
+        ticket_details = self.env['help.ticket'].search([])
+        ticket_data = []
+        for ticket in ticket_details:
+            ticket_data.append({
+                'ticket_name': ticket.name,
+                'customer_name': ticket.customer_id.name,
+                'subject': ticket.subject,
+                'priority': ticket.priority,
+                'assigned_to': ticket.assigned_user.name,
+                'assigned_image': ticket.assigned_user.image_1920,
+            })
+
         tickets_new_count = self.env['help.ticket'].search_count(
             [('stage_id.name', 'in', ['Inbox', 'Draft'])])
         tickets_in_progress_count = self.env['help.ticket'].search_count(
             [('stage_id.name', '=', 'In Progress')])
         tickets_closed_count = self.env['help.ticket'].search_count(
             [('stage_id.name', '=', 'Done')])
+        very_low_count = self.env['help.ticket'].search_count([
+            ('priority', '=', '0')])
+        very_low_count1 = very_low_count * 10
+
+        low_count = self.env['help.ticket'].search_count([
+            ('priority', '=', '1')])
+        low_count1 = low_count * 10
+        normal_count = self.env['help.ticket'].search_count([
+            ('priority', '=', '2')])
+        normal_count1 = normal_count * 10
+        high_count = self.env['help.ticket'].search_count([
+            ('priority', '=', '3')])
+        high_count1 = high_count * 10
+        very_high_count = self.env['help.ticket'].search_count([
+            ('priority', '=', '4')])
+        very_high_count1 = very_high_count * 10
+
+        response = self.env['help.ticket'].search_count([
+            ('review', '!=', None)])
+
         teams_count = self.env['help.team'].search_count([])
 
         tickets = self.env['help.ticket'].search(
@@ -51,18 +84,26 @@ class HelpDeskTicket(models.Model):
         p_tickets = []
         for ticket in tickets:
             p_tickets.append(ticket.name)
-
         values = {
             'inbox_count': tickets_new_count,
             'progress_count': tickets_in_progress_count,
             'done_count': tickets_closed_count,
             'team_count': teams_count,
-            'p_tickets': p_tickets
+            'p_tickets': p_tickets,
+            'very_low_count1': very_low_count1,
+            'low_count1': low_count1,
+            'normal_count1': normal_count1,
+            'high_count1': high_count1,
+            'very_high_count1': very_high_count1,
+            'response': response,
+            'ticket_details': ticket_data,
+
         }
         return values
 
     @api.model
     def get_tickets_view(self):
+        """ Function To Get The Ticket View"""
         tickets_new_count = self.env['help.ticket'].search_count(
             [('stage_id.name', 'in', ['Inbox', 'Draft'])])
         tickets_in_progress_count = self.env['help.ticket'].search_count(
@@ -172,99 +213,3 @@ class HelpDeskTicket(models.Model):
         #
         team = [count, name]
         return team
-
-    @api.model
-    def get_project_ticket_count(self):
-        """bar chart"""
-        ticket_count = []
-        project_list = []
-        tickets = self.env['help.ticket'].search([])
-
-        for rec in tickets:
-            if rec.project_id:
-                project = rec.project_id.name
-                if project not in project_list:
-                    project_list.append(project)
-                ticket_count.append(project)
-
-        project_val = []
-        for index in range(len(project_list)):
-            value = ticket_count.count(project_list[index])
-            project_name = project_list[index]
-            project_val.append({'label': project_name, 'value': value})
-        name = []
-        for record in project_val:
-            name.append(record.get('label'))
-        #
-        count = []
-        for record in project_val:
-            count.append(record.get('value'))
-        #
-        project = [count, name]
-        return project
-
-    @api.model
-    def get_billed_task_team_chart(self):
-        """polarArea chart"""
-        ticket_count = []
-        team_list = []
-        tasks=[]
-        project_task = self.env['project.task'].search([('ticket_billed', '=', True)])
-        for rec in project_task:
-            tasks.append(rec.ticket_id.id)
-        tickets = self.env['help.ticket'].search([('id', 'in', tasks)])
-
-
-        for rec in tickets:
-            # if rec.id in teams.ids:
-            team = rec.team_id.name
-            if team not in team_list:
-                team_list.append(team)
-            ticket_count.append(team)
-
-        team_val = []
-        for index in range(len(team_list)):
-            value = ticket_count.count(team_list[index])
-            team_name = team_list[index]
-            team_val.append({'label': team_name, 'value': value})
-        name = []
-        for record in team_val:
-            name.append(record.get('label'))
-        #
-        count = []
-        for record in team_val:
-            count.append(record.get('value'))
-        #
-        team = [count, name]
-        return team
-
-    @api.model
-    def get_team_ticket_done_pie(self):
-        """bar chart"""
-        ticket_count = []
-        team_list = []
-        tickets = self.env['help.ticket'].search(
-            [('stage_id.name', '=', 'Done')])
-
-        for rec in tickets:
-            if rec.team_id:
-                team = rec.team_id.name
-                if team not in team_list:
-                    team_list.append(team)
-                ticket_count.append(team)
-
-        team_val = []
-        for index in range(len(team_list)):
-            value = ticket_count.count(team_list[index])
-            team_name = team_list[index]
-            team_val.append({'label': team_name, 'value': value})
-        name = []
-        for record in team_val:
-            name.append(record.get('label'))
-        #
-        count = []
-        for record in team_val:
-            count.append(record.get('value'))
-        #
-        team = [count, name]
-        return team

odoo_website_helpdesk_dashboard/static/description/index.html

@@ -241,7 +241,7 @@
 
         <div style="display: block; margin: 30px auto;">
             <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
-                With the help of doughnut chart, Analyse the monthly count of tickets.
+                With the help of doughnut chart, Analyse the status of tickets.
             </h3>
             <img src="./assets/screenshots/Screenshot7.png"
                  class="img-thumbnail">
@@ -262,25 +262,11 @@
         </div>
         <div style="display: block; margin: 30px auto;">
             <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
-                In the Bar graph, view the ratio between Helpdesk Tickets and related Projects.
+                In this view can analyze all tickets and their details.
             </h3>
             <img src="./assets/screenshots/Screenshot10.png"
                  class="img-thumbnail">
         </div>
-        <div style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
-                With the help of polarArea chart, analyse ratio between the Helpdesk teams and No. of billed tasks.
-            </h3>
-            <img src="./assets/screenshots/Screenshot11.png"
-                 class="img-thumbnail">
-        </div>
-        <div style="display: block; margin: 30px auto;">
-            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">
-                The Line chart shows the ratio between Helpdesk teams and No. of tickets resolved by them.
-            </h3>
-            <img src="./assets/screenshots/Screenshot12.png"
-                 class="img-thumbnail">
-        </div>
     </div>
 </div>
 <!-- END OF SCREENSHOTS SECTION -->
@@ -306,7 +292,7 @@
                 <div class="carousel-item" style="min-height: 198.656px;">
                     <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
                          style="float:left">
-                       <a href="https://apps.odoo.com/apps/modules/15.0/export_stockinfo_xls/" target="_blank">
+                       <a href="https://apps.odoo.com/apps/modules/16.0/odoo_website_helpdesk/" target="_blank">
                             <div style="border-radius:10px">
                                 <img class="img img-responsive center-block"
                                      style="border-radius: 0px;"
@@ -316,7 +302,7 @@
                     </div>
                     <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
                          style="float:left">
-                        <a href="https://apps.odoo.com/apps/modules/15.0/custom_gantt_view/"
+                        <a href="https://apps.odoo.com/apps/modules/16.0/website_portal_events/"
                            target="_blank">
                             <div style="border-radius:10px">
                                 <img class="img img-responsive center-block"

odoo_website_helpdesk_dashboard/static/src/css/dashboard.css

@@ -230,3 +230,40 @@
 .chart-container.card-shadow {
     height: 32rem;
 }
+.row {
+    /* Define your styles here */
+    background-color: #f0f0f0;
+    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 */
+}
+}

odoo_website_helpdesk_dashboard/static/src/js/dashboard_view.js

@@ -34,83 +34,71 @@ odoo.define("odoo_website_helpdesk_dashboard.dashboard_view", function (require)
             var self = this;
             self.render_tickets_month_graph();
             self.render_team_ticket_count_graph();
-            self.render_projects_ticket_graph();
+//            self.render_projects_ticket_graph();
-            self.render_billed_task_team_graph();
+//            self.render_billed_task_team_graph();
-            self.render_team_ticket_done_graph();
+//            self.render_team_ticket_done_graph();
 
         },
-        render_tickets_month_graph: function () {
+      render_tickets_month_graph: function () {
-            var self = this
+    var self = this;
-            var ctx = self.$(".ticket_month");
+    var ctx = self.$(".ticket_month");
-            rpc.query({
+    rpc.query({
-                model: "help.ticket",
+        model: "help.ticket",
-                method: "get_ticket_month_pie",
+        method: "get_tickets_view",
-            }).then(function (arrays) {
+    }).then(function (values) {
-                var data = {
+        var data = {
-                    labels: arrays[1],
+            labels: ['New', 'In Progress', 'Solved'],
-                    datasets: [{
+            datasets: [{
-                        label: "",
+                data: [values.inbox_count, values.progress_count, values.done_count],
-                        data: arrays[0],
+                backgroundColor: [
-                        backgroundColor: [
+                    "#665191",
-                            "#665191",
+                    "#ff7c43",
-                            "#ff7c43",
+                    "#ffa600"
-                            "#ffa600",
+                ],
-                            "#a05195",
+                borderColor: [
-                            "#2f4b7c",
+                    "#003f5c",
-                            "#f95d6a",
+                    "#2f4b7c",
-                            "#6d5c16",
+                    "#f95d6a"
-                            "#003f5c",
+                ],
-                            "#d45087"
+                borderWidth: 1
-                        ],
+            }]
-                        borderColor: [
+        };
-                            "#003f5c",
-                            "#2f4b7c",
-                            "#f95d6a",
-                            "#665191",
-                            "#d45087",
-                            "#ff7c43",
-                            "#ffa600",
-                            "#a05195",
-                            "#6d5c16"
-                        ],
-                        borderWidth: 1
-                    },]
-                };
 
-                //options
+        //options
-                var options = {
+        var options = {
-                    responsive: true,
+            responsive: true,
-                    title: false,
+            title: false,
-                    legend: {
+            legend: {
-                        display: true,
+                display: true,
-                        position: "right",
+                position: "right",
-                        labels: {
+                labels: {
-                            fontColor: "#333",
+                    fontColor: "#333",
-                            fontSize: 16
+                    fontSize: 16
-                        }
+                }
+            },
+            scales: {
+                yAxes: [{
+                    gridLines: {
+                        color: "rgba(0, 0, 0, 0)",
+                        display: false,
                     },
-                    scales: {
+                    ticks: {
-                        yAxes: [{
+                        min: 0,
-                            gridLines: {
+                        display: false,
-                                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
+        });
+    });
+},
 
-                //create Chart class object
-                var chart = new Chart(ctx, {
-                    type: "doughnut",
-                    data: data,
-                    options: options
-                });
-            });
-        },
         render_team_ticket_count_graph: function () {
             var self = this
             var ctx = self.$(".team_ticket_count");
@@ -174,195 +162,6 @@ odoo.define("odoo_website_helpdesk_dashboard.dashboard_view", function (require)
             });
         },
 
-        render_projects_ticket_graph: function () {
-            var self = this
-            var ctx = self.$(".projects_ticket");
-            rpc.query({
-                model: "help.ticket",
-                method: "get_project_ticket_count",
-            }).then(function (arrays) {
-                var data = {
-                    labels: arrays[1],
-                    datasets: [{
-                        label: "",
-                        data: arrays[0],
-                        backgroundColor: [
-                            "rgba(175,180,255,0.75)",
-                            "rgba(133,208,255,0.9)",
-                            "rgba(113,255,221,0.79)",
-                            "rgba(255,187,95,0.77)",
-                            "#2c7fb8",
-                            "#fa9fb5",
-                            "#2f4b7c",
-                        ],
-                        borderColor: [
-                            "#003f5c",
-                            "#2f4b7c",
-                            "#f95d6a",
-                            "#665191",
-                            "#d45087",
-                            "#ff7c43",
-                            "#ffa600",
-                            "#a05195",
-                            "#6d5c16"
-                        ],
-                        borderWidth: 1
-                    },]
-                };
-
-                  //options
-                var options = {
-                    responsive: true,
-                    title: false,
-                    maintainAspectRatio: true,
-                    legend: {
-                        display: false //This will do the task
-                    },
-                    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
-                });
-            });
-        },
-        render_billed_task_team_graph: function () {
-            var self = this
-            var ctx = self.$(".billed_team");
-            rpc.query({
-                model: "help.ticket",
-                method: "get_billed_task_team_chart",
-            }).then(function (arrays) {
-                var data = {
-                    labels: arrays[1],
-                    datasets: [{
-                        label: "",
-                        data: arrays[0],
-                        backgroundColor: [
-                            "#a07fcd",
-                            "#fea84c",
-                            "#2cb8b1",
-                            "#fa9fb5",
-                            "#2f4b7c",
-                            "#2c7fb8"
-                        ],
-                        borderColor: [
-                            "#4fc9ff",
-                            "#2f4b7c",
-                            "#f95d6a",
-                            "#665191",
-                            "#d45087",
-                            "#ff7c43",
-                            "#ffa600",
-                            "#a05195",
-                            "#6d5c16"
-                        ],
-                        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: "polarArea",
-                    data: data,
-                    options: options
-                });
-            });
-        },
-        render_team_ticket_done_graph: function () {
-            var self = this
-            var ctx = self.$(".team_ticket_done");
-            rpc.query({
-                model: "help.ticket",
-                method: "get_team_ticket_done_pie",
-            }).then(function (arrays) {
-                var data = {
-                    labels: arrays[1],
-                    datasets: [{
-                        fill: false,
-                        label: "",
-                        data: arrays[0],
-                        backgroundColor:[
-                            "#b7c1ff",
-                            "#6159ff",
-                            "#c79bff",
-                            "#0095b2"
-                        ],
-                        borderColor:
-                            'rgba(54,162,235,0.49)'
-                        ,
-                        borderWidth: 2
-                    },]
-                };
-
-                //options
-                var options = {
-                    responsive: true,
-                    title: false,
-                    maintainAspectRatio: true,
-                    legend: {
-                        display: false //This will do the task
-                    },
-                    scales: {
-                        yAxes: [{
-                            display: true,
-                            ticks: {
-                                beginAtZero: true,
-                                steps: 10,
-                                stepValue: 5,
-                                // max: 100
-                            }
-                        }]
-                    }
-                };
-
-                //create Chart class object
-                var chart = new Chart(ctx, {
-                    type: "line",
-                    data: data,
-                    options: options
-                });
-            });
-        },
 
         render_dashboards: function () {
             var self = this;
@@ -382,6 +181,66 @@ odoo.define("odoo_website_helpdesk_dashboard.dashboard_view", function (require)
                     $("#done_count").append("<span class='stat-digit'>" + result.done_count + "</span>");
                     $("#team_count").append("<span class='stat-digit'>" + result.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
+                        // Add other priorities and their corresponding count properties
+                    };
+
+                    // Loop through the priorities and create progress bars
+                    for (var priority in priorityCounts) {
+                        var progressBarWidth = priorityCounts[priority] + "%";
+
+                        var progressBar = $("<div class='progress-bar'></div>").css("width", progressBarWidth);
+                        var progressBarContainer = $("<div class='progress'></div>").append(progressBar);
+                        var progressValue = $("<div class='progress-value'></div>").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++) {
+                            var ticket = ticket_details[i]; // Get the current ticket object
+                            var row = $("<tr></tr>");
+                            // Assuming you have the Base64-encoded image data in a variable called ticket.assigned_image
+                           var base64Image = ticket.assigned_image;
+
+                             var assignedUserCell = $("<td class='td'></td>");
+                            var imgElement = $("<img>");
+                            imgElement.attr("src", "data:image/png;base64," + base64Image); // Set the image source
+                            imgElement.attr("alt", "User Image"); // Set an alt attribute for accessibility
+                            imgElement.addClass("user-image"); // Add the 'oe-avatar' class to the <img> element
+
+                            // Append the img element to the assignedUserCell
+                            assignedUserCell.append(imgElement);
+
+                            // Append the assignedUserCell to the row
+                            row.append(assignedUserCell);
+
+
+                            row.append("<td class='td'>" + ticket.customer_name + "</td>");
+                            row.append("<td class='td'>" + ticket.ticket_name + "</td>");
+                            row.append(assignedUserCell);
+                            row.append("<td>" + ticket.assigned_to + "</td>");
+                            row.append("<td>" + ticket.subject + "</td>");
+                            row.append("<td>" + ticket.priority + "</td>");
+                            tbody.append(row);
+                        }
+
+
+
+
+
+                    $(".response").append(result.response);
                     ajax.jsonRpc("/help/tickets", "call", {}).then(function (values) {
                         $('.pending_tickets').append(values);
                     });

odoo_website_helpdesk_dashboard/static/src/xml/dashboard_view.xml

@@ -10,16 +10,15 @@
           href="/odoo_website_helpdesk_dashboard/static/src/css/dashboard.css"/>
         <div class="row main-section mt-5">
       <h2 class="section-header" style="font-size: 2em; color:#4a5c9a;">HelpDesk Dashboard</h2>
-
             <div class="col-sm-6 col-md-3-12 col-md-6 col-lg-3 helpdesk inbox_tickets">
         <div class="dashboard_card" data-toggle="collapse">
           <div class="dashboard_card-body panel panel-new">
-            <div class="stat-widget-one">
+            <div class="stat-widget-one" style="background-color:pink">
               <div class="stat-icon">
                 <i class="fa fa-inbox"/>
               </div>
                 <div class="stat-content">
-                <div class="stat-text">New Tickets</div>
+                <div class="stat-text" style="color:black">New Tickets</div>
                     <div class="stat-digit" id="inbox_count">
                 </div>
               </div>
@@ -27,23 +26,25 @@
           </div>
             <div class="panel-new-collapse collapse">
             <div id="help_new_tickets"
-                 style="border:none; font-size:14px; padding:0 15px 15px 15px;">
+                 style="border:none; font-size:8px; padding:0 8px 8px 8px;">
               <br/>
                 <br/>
-                <p style="font-style:italic; font-weight:700;"></p>
+                <p style="border:none; font-size:14px; padding:0 15px 15px 15px;"></p>
             </div>
           </div>
         </div>
       </div>
-            <div class="col-sm-6 col-md-3-12 col-md-6 col-lg-3 salon_spa_orders helpdesk inprogress_tickets">
+
+            <div class="col-sm-6 col-md-3-12 col-md-6 col-lg-3  salon_spa_orders helpdesk inprogress_tickets">
         <div class="dashboard_card" data-toggle="collapse">
           <div class="dashboard_card-body panel panel-progress">
-            <div class="stat-widget-one">
+            <div class="stat-widget-one" style="background-color:orange">
               <div class="stat-icon">
                 <i class="fa fa-spinner"/>
               </div>
                 <div class="stat-content">
-                <div class="stat-text">Tickets In Progress</div>
+                <div class="stat-text"
+                     style="color:black">Tickets In Progress</div>
                     <div class="stat-digit" id="inprogress_count">
                 </div>
               </div>
@@ -51,10 +52,10 @@
           </div>
             <div class="panel-progress-collapse collapse">
             <div id="help_progress_tickets"
-                 style="border:none; font-size:14px; padding:0 15px 15px 15px;">
+                 style="border:none; font-size:8px; padding:0 8px 8px 8px;">
               <br/>
                 <br/>
-                <p style="font-style:italic; font-weight:700;"></p>
+                <p style="border:none; font-size:14px; padding:0 15px 15px 15px;"></p>
             </div>
           </div>
         </div>
@@ -62,12 +63,12 @@
             <div class="col-sm-6 col-md-3-12 col-md-6 col-lg-3 helpdesk done_tickets">
         <div class="dashboard_card" data-toggle="collapse">
           <div class="dashboard_card-body panel panel-done">
-            <div class="stat-widget-one">
+            <div class="stat-widget-one" style="background-color:pink">
               <div class="stat-icon">
                 <i class="fa fa-check"/>
               </div>
                 <div class="stat-content">
-                <div class="stat-text">Closed Tickets</div>
+                <div class="stat-text" style="color:black">Closed Tickets</div>
                     <div class="stat-digit" id="done_count">
                 </div>
               </div>
@@ -78,7 +79,7 @@
                  style="border:none; font-size:14px; padding:0 15px 15px 15px;">
               <br/>
                 <br/>
-                <p style="font-style:italic; font-weight:700;"></p>
+                <p style="font-style:italic; font-weight:100;"></p>
             </div>
           </div>
         </div>
@@ -86,12 +87,12 @@
             <div class="col-sm-6 col-md-3-12 col-md-6 col-lg-3 helpdesk team_card">
         <div class="dashboard_card" data-toggle="collapse">
           <div class="dashboard_card-body panel panel-team">
-            <div class="stat-widget-one">
+            <div class="stat-widget-one" style="background-color:white">
               <div class="stat-icon">
                 <i class="fa fa-group" id="team_ico"/>
               </div>
                 <div class="stat-content">
-                <div class="stat-text">HelpDesk Teams</div>
+                <div class="stat-text" style="color:black">HelpDesk Teams</div>
                     <div class="stat-digit" id="team_count">
                 </div>
               </div>
@@ -103,72 +104,136 @@
                  style="border:none; font-size:14px; padding:0 15px 15px 15px;">
               <br/>
                 <br/>
-                <p style="font-style:italic; font-weight:700;"></p>
+                <p style="font-style:italic; font-weight:100;"></p>
             </div>
           </div>
         </div>
       </div>
+            <!--      </div>-->
+            <div class="dashboard_card"
+                 style="display: flex; justify-content: center; align-items: center;">
+    <div style="color: black; font-weight: bold; height: 60px; width: 700px; text-align: center;">
+        <span>CUSTOMER SATISFACTION:</span>
+        <div style="display: flex; justify-content: center; align-items: center;">
+            <span>😃</span>
+            <span>Response Received:</span>
+            <div style="width: 10px;"></div> <!-- Using width for spacing -->
+            <div class="response"></div>
+        </div>
+    </div>
+</div>
             <div class="row ticket-section">
-        <div class="col-12 col-sm-12 col-md-4 ticket_box chart-container card-shadow">
+                 <div class="col-12 col-sm-12 col-md-4 ticket_box chart-container card-shadow">
-            <h2 class="tickets_head">Received Tickets</h2>
+            <h2 class="tickets_head">Ticket Priority</h2>
-            <hr/>
+                     <hr/>
-            <div class="col-xs-12 text-align">
+                     <div class="col-xs-12 text-align">
               <div class="text-color">
-                <ul class="pending_tickets">
+                <div class="line">
+                Very low :
+                <div class="very_low_count" widget="progressbar">
+                <div class="progress-value"></div>
+                  </div>
 
-                </ul>
+                </div>
               </div>
             </div>
-        </div>
+                     <div class="col-xs-12 text-align">
+              <div class="text-color">
+                <div class="line">
+                Low :
+                <div class="low_count" widget="progressbar">
+                <div class="progress-value"></div>
 
-        <div class="col-12 col-sm-12 col-md-4">
+                  </div>
-          <div class="leads_month_pie_div half_chart chart-container card-shadow">
+
-            <h2>Tickets by Month</h2>
+                </div>
-              <hr/>
+              </div>
-              <div class="graph_canvas">
-              <canvas class="ticket_month" />
             </div>
-          </div>
+                     <div class="col-xs-12 text-align">
-        </div>
+              <div class="text-color">
-        <div class="col-12 col-sm-12 col-md-4">
+                <div class="line">
-          <div class="team_ticket_div half_chart chart-container card-shadow">
+                Normal :
-            <h2>Team - Tickets Count Ratio</h2>
+                <div class="normal_count" widget="progressbar">
-              <hr/>
+                <div class="progress-value"></div>
-              <div class="graph_canvas">
+
-              <canvas class="team_ticket_count" />
+                  </div>
+
+                </div>
+              </div>
             </div>
+                     <div class="col-xs-12 text-align">
+              <div class="text-color">
+                <div class="line">
+                High :
+                <div class="high_count" widget="progressbar">
+                <div class="progress-value"></div>
 
-          </div>
+                  </div>
-        </div>
+
-        <div class="col-12 col-sm-12 col-md-4">
+                </div>
-          <div class="projects_ticket_div half_chart chart-container card-shadow">
+              </div>
-            <h2>Tickets - Projects Ratio</h2>
+            </div>
-              <hr/>
+                     <div class="col-xs-12 text-align">
-              <div class="graph_canvas">
+              <div class="text-color">
-              <canvas class="projects_ticket" width="150" height="120"/>
+                <div class="line">
+                Very High :
+                <div class="very_high_count" widget="progressbar">
+                <div class="progress-value"></div>
+
+                  </div>
+
+                </div>
+              </div>
             </div>
-          </div>
         </div>
-        <div class="col-12 col-sm-12 col-md-4">
+
-          <div class="billed_team_div half_chart chart-container card-shadow">
+                <div class="col-12 col-sm-12 col-md-4">
-            <h2>Billed Task - Team ratio</h2>
+          <div class="leads_month_pie_div half_chart chart-container card-shadow">
+            <h2>TICKET STATUS</h2>
               <hr/>
               <div class="graph_canvas">
-              <canvas class="billed_team" width="150" height="120"/>
+              <canvas class="ticket_month"/>
             </div>
           </div>
         </div>
-        <div class="col-12 col-sm-12 col-md-4">
+                <div class="col-12 col-sm-12 col-md-4">
           <div class="team_ticket_div half_chart chart-container card-shadow">
-            <h2>Team - Resolved Tickets</h2>
+            <h2>Team - Tickets Count Ratio</h2>
               <hr/>
               <div class="graph_canvas">
-              <canvas class="team_ticket_done"/>
+              <canvas class="team_ticket_count"/>
             </div>
 
           </div>
         </div>
+
+                <div class="col-100 col-sm-100 col-md-20">
+  <div class="leads_month_pie_div half_chart chart-container card-shadow">
+    <h2>ISSUE</h2>
+      <hr/>
+
+      <!-- Add a table to display ticket details -->
+      <table class="ticket-table">
+      <thead>
+        <tr style="font-size: 16px; font-weight: bold; background-color: pink; color: black;height:50%"
+            class="custom-tr">
+          <th style="width: 20%; min-width: 20px; font-size: 13px;">Customer Name</th>
+            <th style="width: 20%; min-width: 10px; font-size: 13px;">Ticket</th>
+            <th style="width: 20%; min-width: 20px; font-size: 13px;"> </th>
+            <th style="width: 20%; min-width: 20px; font-size: 13px;">Assigned to</th>
+            <th style="width: 20%; min-width: 20px; font-size: 13px;">Subject</th>
+            <th style="width: 20%; min-width: 20px; font-size: 13px;">Priority</th>
+        </tr>
+      </thead>
+          <tbody class="ticket-details">
+      </tbody>
+    </table>
+  </div>
+</div>
+</div>
+
+
+
       </div>
-    </div>
   </t>
 </templates>