vendor/uvdesk/core-framework/Resources/views/home.html.twig line 1

Open in your IDE?
  1. {% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
  3. {% block title %}Dashboard{% endblock %}
  5. {% block templateCSS %}
  6.     <style>
  7.         .graficosTortaBarra{
  8.             font-size:11px;width: 520px;border:1px solid #d3d3d3;height: 300px;
  9.         }
  10.         .boch {
  11.             display:inline-block;
  12.             height: 10px;
  13.             width: 10px;
  14.             margin-right: 3px;
  15.             border-radius: 50%;
  16.         }
  18.         .box-graficos {
  19.             display: flex;
  20.             flex-wrap: wrap;
  21.             gap: 10px;
  22.         }
  23.         .uv-activity-wrapper {
  24.             margin-top: 60px;
  25.         }
  26.         .uv-activity-wrapper .uv-activity-chart-col-lt {
  27.             width: 80%;
  28.             float: left;
  29.         }
  30.         ul.uv-activity-brick-wrapper {
  31.             list-style: none;
  32.             margin: 0;
  33.             padding: 0;
  34.             width: 100%;
  35.             display: inline-block;
  36.         }
  37.         ul.uv-activity-brick-wrapper li {
  38.             width: 25%;
  39.             display: inline-block;
  40.             float: left;
  41.             padding-left: 10px;
  42.             padding-right: 10px;
  43.             color: #fff;
  44.         }
  45.         ul.uv-activity-brick-wrapper .uv-activity-brick {
  46.             border-radius: 3px;
  47.             padding: 10px;
  48.             text-align: center;
  49.         }
  50.         ul.uv-activity-brick-wrapper li a {
  51.             color: #fff;
  52.             font-size: 45px;
  53.             width: 100%;
  54.             display: inline-block;
  55.         }
  56.         ul.uv-activity-brick-wrapper li label {
  57.             font-size: 18px;
  58.             width: 100%;
  59.             display: inline-block;
  60.         }
  61.         .uv-activity-chart-bottom-row .uv-pannel-body {
  62.             height: 450px;
  63.         }
  64.         .kudos-overview {
  65.             width: 40%;
  66.             float: left;
  67.             padding-right: 10px;
  68.         }
  69.         .recent-notification {
  70.             width: 30%;
  71.             float: left;
  72.             padding-left: 10px;
  73.         }
  74.         .completion-chart {
  75.             width: 300px;
  76.             margin: 0 auto;
  77.         }
  78.         .progress-meter .background {
  79.             fill: #EFEFEF;
  80.         }
  81.         .progress-meter text {
  82.             font-size: 30px;
  83.         }
  84.         .kudos-overview .uv-pannel-body {
  85.             text-align: center;
  86.             padding-top: 50px;
  87.         }
  88.         .kudos-overview .uv-pannel-body label {
  89.             margin-top: 10px;
  90.             display: inline-block;
  91.         }
  92.         .recent-notification ul {
  93.             list-style: none;
  94.             padding: 0;
  95.             margin: 0;
  96.             overflow-y: auto;
  97.             max-height: 400px !important;
  98.         }
  99.         .recent-notification .uv-pannel-body {
  100.             padding: 0;
  101.         }
  102.         .recent-notification ul li {
  103.             color: #333333;
  104.             border-bottom: solid 1px #D3D3D3;
  105.             padding: 15px 20px;
  106.         }
  107.         .recent-notification ul li:first-child {
  108.             border-top: none;
  109.         }
  110.         .recent-notification ul li:last-child {
  111.             border-bottom: none;
  112.         }
  113.         .recent-notification ul li * {
  114.             display: inline-block !important;
  115.         }
  116.         .recent-notification ul li .timeago {
  117.             color: #9E9E9E;
  118.             margin-top: 5px;
  119.             font-size: 13px;
  120.         }
  121.         .recent-notification label {
  122.             text-align: center;
  123.             display: inline-block;
  124.             width: 100%;
  125.             padding-top: 15px;
  126.             border-top: 1px solid #d3d3d3;
  127.         }
  128.         .recent-notification span.uv-notification-message {
  129.             float: left;
  130.             width: 100%;
  131.         }
  132.         .kudos-count {
  133.             width: 30%;
  134.             float: left;
  135.             padding-right: 10px;
  136.             padding-left: 10px;
  137.         }
  138.         .kudos-count .uv-pannel-body {
  139.             padding-top: 50px;
  140.             overflow-y: auto;
  141.         }
  142.         .kudos-count ul {
  143.             list-style: none;
  144.             padding: 0;
  145.             margin: 0;
  146.         }
  147.         .kudos-count ul li {
  148.             width: 100%;
  149.             display: inline-block;
  150.             padding: 15px 0;
  151.         }
  152.         .kudos-count ul li .uv-icon-kudos  {
  153.             vertical-align: middle;
  154.             margin-right: 10px;
  155.         }
  156.         .uv-activity-wrapper .uv-activity-chart-col-rt {
  157.             width: 20%;
  158.             float: left;
  159.         }
  160.         .uv-activity-chart-col-rt ul {
  161.             padding: 0;
  162.             margin: 0;
  163.             list-style: none;
  164.         }
  165.         .uv-activity-chart-col-rt ul li {
  166.             margin-bottom: 10px
  167.         }
  168.         .uv-activity-chart-col-rt ul li span {
  169.             width: 100%;
  170.             display: inline-block;
  171.             color: #6f6f6f;
  172.         }
  173.         .uv-middle {
  174.             margin: 0 auto;
  175.             display: inline-block;
  176.             margin-top: 200px;
  177.             text-align: center;
  178.             width: 100%;
  179.         }
  180.         @media screen and (max-width: 1024px) {
  181.             .uv-activity-wrapper .uv-activity-chart-col-lt {
  182.                 width: 100%;
  183.                 padding: 0;
  184.             }
  185.             .uv-activity-wrapper .uv-activity-chart-col-rt {
  186.                 width: 100%;
  187.             }
  188.             .kudos-overview {
  189.                 width: 100%;
  190.                 padding: 0;
  191.             }
  192.             .kudos-count {
  193.                 width: 100%;
  194.                 padding: 0;
  195.             }
  196.             .recent-notification {
  197.                 width: 100%;
  198.                 padding: 0;
  199.             }
  200.             ul.uv-activity-brick-wrapper li {
  201.                 width: 50%;
  202.                 margin: 10px 0;
  203.             }
  204.         }
  205.         @media screen and (max-width: 768px) {
  206.             ul.uv-activity-brick-wrapper li {
  207.                 width: 100%;
  208.             }
  209.         }
  210.         @media screen and (max-width: 467px) {
  211.             .completion-chart {
  212.                 width: 100%;
  213.             }
  214.         }
  215.         span.uv-notification-message a:link, span.uv-notification-message a:visited, label a:link, label a:visited {
  216.             color: #2750C4;
  217.             font-size: 15px;
  218.         }
  219.         .uv-mob-aside {
  220.             display: none;
  221.         }
  222.     {# .uv-copyright {
  223.         text-align: center;
  224.     } #}
  225.     </style>
  226. {% endblock %}
  228. {% block pageContent %}
  230.     <div class="uv-area">
  232.         {{ uvdesk_extensibles.getRegisteredComponent('Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\Dashboard').getHomepageTemplate().render()|raw }}
  234.         <div class="uv-copyright">
  235.             <span class="uv-credit-text">Powered by <a href="https://www.uvdesk.com" target="_blank">UVdesk</a></span>
  236.         </div>
  237.     </div>
  239.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  240.     <script>
  241.         const ticketsByStatus = {{report_service.ticketsByStatus|json_encode|raw}}
  242.         const ticketsByType = {{report_service.ticketsByType|json_encode|raw}}
  243.         const ticketsByPriority = {{report_service.ticketsByPriority|json_encode|raw}}
  244.         const ticketsPerAgent = {{report_service.ticketsPerAgent|json_encode|raw}}
  245.         const ticketsPerTeam = {{report_service.ticketsPerTeam|json_encode|raw}}
  246.         const kudos = {{report_service.kudos|json_encode|raw}}
  248.         const crearGrafico = (tickets, nombre) => {
  249.             console.log(tickets)
  250.             new Chart(
  251.                 document.getElementById(nombre),
  252.                 {
  253.                     type: 'pie',
  254.                     data: {
  255.                         datasets: [{
  256.                             data: Object.values(tickets).map(function (el) { return el.Cantidad }),
  257.                             backgroundColor: Object.values(tickets).map(function (el) { return el.Color }),
  258.                             hoverOffset: 4
  259.                         }]
  260.                     },
  261.                 }
  262.             )
  263.         }
  265.         //Tickets by Status
  266.         crearGrafico(ticketsByStatus, 'ticketsByStatus')
  267.         //Tickets by type
  268.         crearGrafico(ticketsByType, 'ticketsByType')
  269.         //Tickets by priority
  270.         crearGrafico(ticketsByPriority, 'ticketsByPriority')
  271.         //Tickets per agent
  272.         crearGrafico(ticketsPerAgent, 'ticketsPerAgent')
  273.         //Tickets per team
  274.         crearGrafico(ticketsPerTeam, 'ticketsPerTeam')
  275.         //Kudos
  276.         crearGrafico(kudos, 'kudos')
  278.     </script>
  281. {% endblock %}
  285. {% block footer %}
  286.     {{ parent() }}
  287. {% endblock %}