CybroAddons/odoo_website_helpdesk_dashboard/static/src/xml/dashboard_view.xml

<?xml version="1.0" encoding="UTF-8" ?>
<templates id="template" xml:space="preserve">
  <t t-name="HelpDesk_Dashboard">
    <div class="helpdesk_dashboards">
      <div class="container-fluid helpdesk_dashboard_main"/>
    </div>
  </t>
    <t t-name="DashBoardHelpDesk">
    <link rel="stylesheet"
          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" style="background-color:pink">
              <div class="stat-icon">
                <i class="fa fa-inbox"/>
              </div>
                <div class="stat-content">
                <div class="stat-text" style="color:black">New Tickets</div>
                    <div class="stat-digit" id="inbox_count">
                </div>
              </div>
            </div>
          </div>
            <div class="panel-new-collapse collapse">
            <div id="help_new_tickets"
                 style="border:none; font-size:8px; padding:0 8px 8px 8px;">
              <br/>
                <br/>
                <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="dashboard_card" data-toggle="collapse">
          <div class="dashboard_card-body panel panel-progress">
            <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"
                     style="color:black">Tickets In Progress</div>
                    <div class="stat-digit" id="inprogress_count">
                </div>
              </div>
            </div>
          </div>
            <div class="panel-progress-collapse collapse">
            <div id="help_progress_tickets"
                 style="border:none; font-size:8px; padding:0 8px 8px 8px;">
              <br/>
                <br/>
                <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 helpdesk done_tickets">
        <div class="dashboard_card" data-toggle="collapse">
          <div class="dashboard_card-body panel panel-done">
            <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" style="color:black">Closed Tickets</div>
                    <div class="stat-digit" id="done_count">
                </div>
              </div>
            </div>
          </div>
            <div class="panel-done-collapse collapse">
            <div id="help_done_tickets"
                 style="border:none; font-size:14px; padding:0 15px 15px 15px;">
              <br/>
                <br/>
                <p style="font-style:italic; font-weight:100;"></p>
            </div>
          </div>
        </div>
      </div>
            <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" 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" style="color:black">HelpDesk Teams</div>
                    <div class="stat-digit" id="team_count">
                </div>
              </div>
            </div>
          </div>

            <div class="panel-team-collapse collapse">
            <div id="help_teams"
                 style="border:none; font-size:14px; padding:0 15px 15px 15px;">
              <br/>
                <br/>
                <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">
            <h2 class="tickets_head">Ticket Priority</h2>
                     <hr/>
                     <div class="col-xs-12 text-align">
              <div class="text-color">
                <div class="line">
                Very low :
                <div class="very_low_count" widget="progressbar">
                <div class="progress-value"></div>
                  </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>

                </div>
              </div>
            </div>
                     <div class="col-xs-12 text-align">
              <div class="text-color">
                <div class="line">
                Normal :
                <div class="normal_count" widget="progressbar">
                <div class="progress-value"></div>

                  </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>
                     <div class="col-xs-12 text-align">
              <div class="text-color">
                <div class="line">
                Very High :
                <div class="very_high_count" widget="progressbar">
                <div class="progress-value"></div>

                  </div>

                </div>
              </div>
            </div>
        </div>

                <div class="col-12 col-sm-12 col-md-4">
          <div class="leads_month_pie_div half_chart chart-container card-shadow">
            <h2>TICKET STATUS</h2>
              <hr/>
              <div class="graph_canvas">
              <canvas class="ticket_month"/>
            </div>
          </div>
        </div>
                <div class="col-12 col-sm-12 col-md-4">
          <div class="team_ticket_div half_chart chart-container card-shadow">
            <h2>Team - Tickets Count Ratio</h2>
              <hr/>
              <div class="graph_canvas">
              <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>
  </t>
</templates>