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

Open in your IDE?
  1. {% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
  3. {% block title %}Dashboard{% endblock %}
  5. {% block pageContent %}
  8.     <style>
  9.         .btn{
  10.             border: 1px solid #1a1a1a;
  11.             display: inline-block;
  12.             padding: 10px;
  13.             position: relative;
  14.             text-align: center;
  15.             transition: background 600ms ease, color 600ms ease;
  16.             margin-right: 0px !important;
  17.         }
  19.         input[type="radio"].toggle {
  20.             display: none;
  22.         }
  24.         input[type=radio]:checked + label {
  25.             background: blue;
  26.             color:white;
  27.         }
  29.         .uv-action-bar .uv-field-block.date {
  30.             display: inline-block;
  31.             margin-right: 8px;
  32.         }
  33.         .uv-action-bar label {
  34.             font-size: 16px;
  35.             vertical-align: middle;
  36.             margin-right: 10px;
  37.         }
  38.         .uv-inner-section .uv-action-bar label{
  39.             font-size: 15px;
  40.         }
  41.         @media screen and (min-width: 1100px) and (max-width: 1260px) {
  42.             .uv-inner-section .uv-action-bar .uv-action-bar-col-lt, .uv-inner-section .uv-action-bar .uv-action-bar-col-rt {
  43.                 width: 55% !important;
  44.             }
  45.         }
  46.         .graficosTortaBarra{
  47.             font-size:11px;width: 520px;border:1px solid #d3d3d3;height: 300px;padding:10px;
  48.         }
  49.         .graficosTortaBarra label{
  50.             line-height: 2;
  51.             padding: 0 8px;
  52.             display: inline-block;
  53.         }
  54.         .boch {
  55.             display:inline-block;
  56.             height: 10px;
  57.             width: 10px;
  58.             margin-right: 3px;
  59.             border-radius: 50%;
  60.         }
  62.         .box-graficos {
  63.             display: flex;
  64.             flex-wrap: wrap;
  65.             gap: 10px;
  66.         }
  67.         .uv-activity-wrapper {
  68.             margin-top: 60px;
  69.         }
  70.         .uv-activity-wrapper .uv-activity-chart-col-lt {
  71.             width: 80%;
  72.             float: left;
  73.         }
  74.         ul.uv-activity-brick-wrapper {
  75.             list-style: none;
  76.             margin: 0;
  77.             padding: 0;
  78.             width: 100%;
  79.             display: inline-block;
  80.         }
  81.         ul.uv-activity-brick-wrapper li {
  82.             width: 25%;
  83.             display: inline-block;
  84.             float: left;
  85.             padding-left: 10px;
  86.             padding-right: 10px;
  87.             color: #fff;
  88.         }
  89.         ul.uv-activity-brick-wrapper .uv-activity-brick {
  90.             border-radius: 3px;
  91.             padding: 10px;
  92.             text-align: center;
  93.         }
  94.         ul.uv-activity-brick-wrapper li a {
  95.             color: #fff;
  96.             font-size: 45px;
  97.             width: 100%;
  98.             display: inline-block;
  99.         }
  100.         ul.uv-activity-brick-wrapper li label {
  101.             font-size: 18px;
  102.             width: 100%;
  103.             display: inline-block;
  104.         }
  105.         .uv-activity-chart-bottom-row .uv-pannel-body {
  106.             height: 450px;
  107.         }
  108.         .kudos-overview {
  109.             width: 40%;
  110.             float: left;
  111.             padding-right: 10px;
  112.         }
  113.         .recent-notification {
  114.             width: 30%;
  115.             float: left;
  116.             padding-left: 10px;
  117.         }
  118.         .completion-chart {
  119.             width: 300px;
  120.             margin: 0 auto;
  121.         }
  122.         .progress-meter .background {
  123.             fill: #EFEFEF;
  124.         }
  125.         .progress-meter text {
  126.             font-size: 30px;
  127.         }
  128.         .kudos-overview .uv-pannel-body {
  129.             text-align: center;
  130.             padding-top: 50px;
  131.         }
  132.         .kudos-overview .uv-pannel-body label {
  133.             margin-top: 10px;
  134.             display: inline-block;
  135.         }
  136.         .recent-notification ul {
  137.             list-style: none;
  138.             padding: 0;
  139.             margin: 0;
  140.             overflow-y: auto;
  141.             max-height: 400px !important;
  142.         }
  143.         .recent-notification .uv-pannel-body {
  144.             padding: 0;
  145.         }
  146.         .recent-notification ul li {
  147.             color: #333333;
  148.             border-bottom: solid 1px #D3D3D3;
  149.             padding: 15px 20px;
  150.         }
  151.         .recent-notification ul li:first-child {
  152.             border-top: none;
  153.         }
  154.         .recent-notification ul li:last-child {
  155.             border-bottom: none;
  156.         }
  157.         .recent-notification ul li * {
  158.             display: inline-block !important;
  159.         }
  160.         .recent-notification ul li .timeago {
  161.             color: #9E9E9E;
  162.             margin-top: 5px;
  163.             font-size: 13px;
  164.         }
  165.         .recent-notification label {
  166.             text-align: center;
  167.             display: inline-block;
  168.             width: 100%;
  169.             padding-top: 15px;
  170.             border-top: 1px solid #d3d3d3;
  171.         }
  172.         .recent-notification span.uv-notification-message {
  173.             float: left;
  174.             width: 100%;
  175.         }
  176.         .kudos-count {
  177.             width: 30%;
  178.             float: left;
  179.             padding-right: 10px;
  180.             padding-left: 10px;
  181.         }
  182.         .kudos-count .uv-pannel-body {
  183.             padding-top: 50px;
  184.             overflow-y: auto;
  185.         }
  186.         .kudos-count ul {
  187.             list-style: none;
  188.             padding: 0;
  189.             margin: 0;
  190.         }
  191.         .kudos-count ul li {
  192.             width: 100%;
  193.             display: inline-block;
  194.             padding: 15px 0;
  195.         }
  196.         .kudos-count ul li .uv-icon-kudos  {
  197.             vertical-align: middle;
  198.             margin-right: 10px;
  199.         }
  200.         .uv-activity-wrapper .uv-activity-chart-col-rt {
  201.             width: 20%;
  202.             float: left;
  203.         }
  204.         .uv-activity-chart-col-rt ul {
  205.             padding: 0;
  206.             margin: 0;
  207.             list-style: none;
  208.         }
  209.         .uv-activity-chart-col-rt ul li {
  210.             margin-bottom: 10px
  211.         }
  212.         .uv-activity-chart-col-rt ul li span {
  213.             width: 100%;
  214.             display: inline-block;
  215.             color: #6f6f6f;
  216.         }
  217.         .uv-middle {
  218.             margin: 0 auto;
  219.             display: inline-block;
  220.             margin-top: 200px;
  221.             text-align: center;
  222.             width: 100%;
  223.         }
  224.         @media screen and (max-width: 1024px) {
  225.             .uv-activity-wrapper .uv-activity-chart-col-lt {
  226.                 width: 100%;
  227.                 padding: 0;
  228.             }
  229.             .uv-activity-wrapper .uv-activity-chart-col-rt {
  230.                 width: 100%;
  231.             }
  232.             .kudos-overview {
  233.                 width: 100%;
  234.                 padding: 0;
  235.             }
  236.             .kudos-count {
  237.                 width: 100%;
  238.                 padding: 0;
  239.             }
  240.             .recent-notification {
  241.                 width: 100%;
  242.                 padding: 0;
  243.             }
  244.             ul.uv-activity-brick-wrapper li {
  245.                 width: 50%;
  246.                 margin: 10px 0;
  247.             }
  248.         }
  249.         @media screen and (max-width: 768px) {
  250.             ul.uv-activity-brick-wrapper li {
  251.                 width: 100%;
  252.             }
  253.         }
  254.         @media screen and (max-width: 467px) {
  255.             .completion-chart {
  256.                 width: 100%;
  257.             }
  258.         }
  259.         span.uv-notification-message a:link, span.uv-notification-message a:visited, label a:link, label a:visited {
  260.             color: #2750C4;
  261.             font-size: 15px;
  262.         }
  263.         .uv-mob-aside {
  264.             display: none;
  265.         }
  266.         {# .uv-copyright {
  267.             text-align: center;
  268.         } #}
  269.         
  270.         /* Estilos para KPI Cards */
  271.         .kpi-cards {
  272.             display: flex;
  273.             flex-wrap: wrap;
  274.             gap: 20px;
  275.             margin: 20px 0;
  276.             padding: 0;
  277.         }
  278.         .kpi-card {
  279.             flex: 1;
  280.             min-width: 200px;
  281.             background: #fff;
  282.             border: 1px solid #d3d3d3;
  283.             border-radius: 8px;
  284.             padding: 20px;
  285.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  286.         }
  287.         .kpi-card h3 {
  288.             margin: 0 0 10px 0;
  289.             font-size: 14px;
  290.             color: #666;
  291.             text-transform: uppercase;
  292.         }
  293.         .kpi-card .value {
  294.             font-size: 32px;
  295.             font-weight: bold;
  296.             color: #333;
  297.             margin: 10px 0;
  298.         }
  299.         .kpi-card .label {
  300.             font-size: 12px;
  301.             color: #999;
  302.         }
  303.         
  304.         /* Estilos para gráficos mejorados */
  305.         .chart-container {
  306.             background: #fff;
  307.             border: 1px solid #d3d3d3;
  308.             border-radius: 8px;
  309.             padding: 20px;
  310.             margin: 20px 0;
  311.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  312.         }
  313.         .chart-container h3 {
  314.             margin: 0 0 20px 0;
  315.             font-size: 18px;
  316.             color: #333;
  317.         }
  318.         .table-container {
  319.             background: #fff;
  320.             border: 1px solid #d3d3d3;
  321.             border-radius: 8px;
  322.             padding: 20px;
  323.             margin: 20px 0;
  324.             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  325.         }
  326.         .table-container h3 {
  327.             margin: 0 0 20px 0;
  328.             font-size: 18px;
  329.             color: #333;
  330.         }
  331.         .table-container table {
  332.             width: 100%;
  333.             border-collapse: collapse;
  334.         }
  335.         .table-container table th,
  336.         .table-container table td {
  337.             padding: 12px;
  338.             text-align: left;
  339.             border-bottom: 1px solid #ddd;
  340.         }
  341.         .table-container table th {
  342.             background-color: #f5f5f5;
  343.             font-weight: bold;
  344.         }
  345.     </style>
  348.     <div class="uv-area">
  350.         <div>
  354.             <div class="uv-action-bar">
  355.                 <div class="uv-action-bar-col-lt">
  356.                     {# Botón para cargar Excel #}
  357.                     <div style="display: inline-block; margin-right: 20px; vertical-align: top;">
  358.                         <label style="display: block; margin-bottom: 5px;">{{ 'Cargar Excel'|trans }}</label>
  359.                         <input type="file" id="excelFileInput" accept=".xlsx,.xls,.csv" style="display: none;">
  360.                         <button type="button" id="btnUploadExcel" class="btn" style="background: #4caf50; color: white; border: none; padding: 8px 15px; cursor: pointer;">
  361.                             {{ 'Subir Excel'|trans }}
  362.                         </button>
  363.                         <button type="button" id="btnClearExcel" class="btn" style="background: #f44336; color: white; border: none; padding: 8px 15px; cursor: pointer; margin-left: 10px; display: none;">
  364.                             {{ 'Usar BD'|trans }}
  365.                         </button>
  366.                         <span id="excelStatus" style="margin-left: 10px; color: #4caf50; font-weight: bold;"></span>
  367.                     </div>
  369.                     <label>{{ 'From'|trans }}</label>
  370.                     <div class="uv-field-block date">
  371.                         <input type="text" class="uv-field uv-date-picker date date-from" id="from" value="">
  372.                     </div>
  373.                     <label>{{ 'To'|trans }}</label>
  374.                     <div class="uv-field-block date">
  375.                         <input type="text" class="uv-field uv-date-picker date date-to"  id="to" value="">
  376.                     </div>
  379.                     <input value="year" type="radio" class="toggle " name="options" id="year" autocomplete="off" >
  380.                     <label class="btn" for="year">Last Year</label>
  382.                     <input value="month" type="radio" class="toggle " name="options" id="month" autocomplete="off">
  383.                     <label class="btn" for="month">Last Month</label>
  385.                     <input value="week" type="radio" class="toggle " name="options" id="week" autocomplete="off" >
  386.                     <label class="btn" for="week">Last Week</label>
  388.                     <input value="day" type="radio" class="toggle " name="options" id="day" autocomplete="off" >
  389.                     <label class="btn" for="day">Last Day</label>
  392.                 </div>
  394.                 {# <input value="year" type="radio" class="toggle " name="options" id="year" autocomplete="off" >
  395.                  <label class="btn" for="year">Last Year</label>
  397.                  <input value="month" type="radio" class="toggle " name="options" id="month" autocomplete="off">
  398.                  <label class="btn" for="month">Last Month</label>
  400.                  <input value="week" type="radio" class="toggle " name="options" id="week" autocomplete="off" >
  401.                  <label class="btn" for="week">Last Week</label>
  403.                  <input value="day" type="radio" class="toggle " name="options" id="day" autocomplete="off" >
  404.                  <label class="btn" for="day">Last Day</label>#}
  408.             </div>
  410.             {# Sección de KPIs - Estilo Looker Studio #}
  411.             <div class="kpi-cards" id="kpiCards" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 20px 0;">
  412.                 <div class="kpi-card" style="background: #4caf50; color: white;">
  413.                     <h3 style="color: white;">{{ 'Fecha Último Ticket'|trans }}</h3>
  414.                     <div class="value" id="kpiLastTicketDate" style="color: white;">-</div>
  415.                 </div>
  416.                 <div class="kpi-card" style="background: white;">
  417.                     <h3>{{ 'Menos de 5 días'|trans }}</h3>
  418.                     <div class="value" id="kpiLessThan5Days">-</div>
  419.                 </div>
  420.                 <div class="kpi-card">
  421.                     <h3>{{ 'Total Tickets'|trans }}</h3>
  422.                     <div class="value" id="kpiTotalTickets">-</div>
  423.                     <div class="label">{{ 'In selected period'|trans }}</div>
  424.                 </div>
  425.                 <div class="kpi-card">
  426.                     <h3>{{ 'Resolved Tickets'|trans }}</h3>
  427.                     <div class="value" id="kpiResolvedTickets">-</div>
  428.                     <div class="label">{{ 'Successfully closed'|trans }}</div>
  429.                 </div>
  430.                 <div class="kpi-card">
  431.                     <h3>{{ 'Open Tickets'|trans }}</h3>
  432.                     <div class="value" id="kpiOpenTickets">-</div>
  433.                     <div class="label">{{ 'Currently active'|trans }}</div>
  434.                 </div>
  435.             </div>
  437.             {# Layout tipo Looker Studio - Grid de 3 columnas #}
  438.             <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0;">
  439.                 {# Columna 1: Tabla de Agentes #}
  440.                 <div class="table-container">
  441.                     <h3>{{ 'AGENT NAME'|trans }}</h3>
  442.                     <table id="agentsTable">
  443.                         <thead>
  444.                             <tr>
  445.                                 <th>{{ 'Agent'|trans }}</th>
  446.                                 <th>{{ 'Records'|trans }}</th>
  447.                             </tr>
  448.                         </thead>
  449.                         <tbody id="agentsTableBody">
  450.                             <tr><td colspan="2">{{ 'Loading...'|trans }}</td></tr>
  451.                         </tbody>
  452.                     </table>
  453.                 </div>
  455.                 {# Columna 2: Gráfico de Tipos y Pie Chart #}
  456.                 <div>
  457.                     <div class="chart-container">
  458.                         <h3>{{ 'Tipo de Tickets'|trans }}</h3>
  459.                         <canvas id="ticketsByTypeStackedChart" height="200"></canvas>
  460.                     </div>
  461.                     <div class="chart-container" style="margin-top: 20px;">
  462.                         <h3>{{ 'Tipos de Incidentes'|trans }}</h3>
  463.                         <canvas id="incidentTypesChart" height="200"></canvas>
  464.                     </div>
  465.                 </div>
  467.                 {# Columna 3: Tabla de Clientes #}
  468.                 <div class="table-container">
  469.                     <h3>{{ 'CUSTOMER NAME'|trans }}</h3>
  470.                     <table id="customersTable">
  471.                         <thead>
  472.                             <tr>
  473.                                 <th>{{ 'Customer'|trans }}</th>
  474.                                 <th>{{ 'Records'|trans }}</th>
  475.                             </tr>
  476.                         </thead>
  477.                         <tbody id="customersTableBody">
  478.                             <tr><td colspan="2">{{ 'Loading...'|trans }}</td></tr>
  479.                         </tbody>
  480.                     </table>
  481.                 </div>
  482.             </div>
  484.             {# Gráfico de Tickets por Mes #}
  485.             <div class="chart-container">
  486.                 <h3>{{ 'Tickets por Mes'|trans }}</h3>
  487.                 <canvas id="ticketsByMonthChart" height="80"></canvas>
  488.             </div>
  490.             {# Gráfico de Tiempo de Cierre #}
  491.             <div class="chart-container">
  492.                 <h3>{{ 'Tiempo Cierre Tickets'|trans }}</h3>
  493.                 <canvas id="closureTimeChart" height="80"></canvas>
  494.             </div>
  496.             <div class="box-graficos">
  497.                 <div>
  499.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  500.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  501.                     </svg>
  503.                     <b>{{  'Tickets by Status' |trans }}</b><br><br>
  504.                     <div class="graficosTortaBarra" >
  505.                         <span id="contenidoticketsByStatus">
  506.                             {% for tStatus in report_service.ticketsByStatus %}
  507.                                 <label>
  508.                                    <span class='boch'  style="background: {{ tStatus.Color }}"> </span>
  509.                                     ({{ tStatus.Cantidad }}) - {{  tStatus.Nombre }}
  510.                                </label>
  512.                             {% endfor %}
  513.                         </span>
  514.                         <div style="padding:25px;" >
  515.                             <canvas id="ticketsByStatus"   width="700" height="350"></canvas>
  516.                         </div>
  517.                     </div>
  518.                 </div>
  520.                 <div>
  521.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  522.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  523.                     </svg>
  524.                     <b>{{ 'Tickets by Type' |trans }}</b><br><br>
  525.                     <div class="graficosTortaBarra" >
  526.                         <span id="contenidoticketsByType">
  527.                             {% for tStatus in report_service.ticketsByType %}
  528.                                 <label>
  529.                                     <span class='boch'  style="background: {{ tStatus.Color }}"> </span>
  530.                                     ({{ tStatus.Cantidad }}) - {{  tStatus.Nombre }}
  531.                                 </label>
  533.                             {% endfor %}
  534.                         </span>
  535.                         <div style="width: 220px;  margin: 0 auto;padding:25px;">
  536.                             <canvas id="ticketsByType" ></canvas>
  537.                         </div>
  538.                     </div>
  539.                 </div>
  541.                 <div>
  542.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  543.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  544.                     </svg>
  545.                     <b>{{ 'Tickets by Priority' |trans }}</b><br><br>
  546.                     <div class="graficosTortaBarra" >
  547.                         <span id="contenidoticketsByPriority">
  548.                             {% for tPriority in report_service.ticketsByPriority %}
  549.                                 <label>
  550.                                     <span class='boch'  style="background: {{ tPriority.Color }}"> </span>
  552.                                     ({{ tPriority.Cantidad }}) - {{ tPriority.Nombre }}
  553.                                 </label>
  555.                             {% endfor %}
  556.                         </span>
  557.                         <div style="padding:25px;">
  558.                             <canvas id="ticketsByPriority" width="700" height="350"  ></canvas>
  559.                         </div>
  560.                     </div>
  561.                 </div>
  563.                 <div>
  564.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  565.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  566.                     </svg>
  567.                     <b>{{ 'Tickets per Agent' |trans }}</b><br><br>
  568.                     <div class="graficosTortaBarra" >
  569.                         <span id="contenidoticketsPerAgent">
  570.                             {% for tAgent in report_service.ticketsPerAgent %}
  571.                                 <label>
  572.                                     <span class='boch'  style="background: {{ tAgent.Color }}"> </span>
  573.                                     ({{ tAgent.Cantidad }}) - {{  tAgent.Nombre }}
  574.                                 </label>
  575.                             {% endfor %}
  576.                         </span>
  577.                         <div style="padding:25px;width: 220px;  margin: 0 auto;">
  578.                             <canvas id="ticketsPerAgent" ></canvas>
  579.                         </div>
  580.                     </div>
  581.                 </div>
  583.                 <div>
  584.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  585.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  586.                     </svg>
  587.                     <b>{{ 'Tickets per Team' |trans }}</b><br><br>
  588.                     <div class="graficosTortaBarra" >
  589.                         <span id="contenidoticketsPerTeam">
  590.                             {% for tTeam in report_service.ticketsPerTeam %}
  591.                                 <label>
  592.                                     <span class='boch'  style="background: {{ tTeam.Color }}"> </span>
  593.                                     ({{ tTeam.Cantidad }}) - {{  tTeam.Nombre }}
  594.                                 </label>
  596.                             {% endfor %}
  597.                         </span>
  598.                         <div  style="padding:25px;width: 220px;  margin: 0 auto;">
  599.                             <canvas id="ticketsPerTeam" ></canvas>
  600.                         </div>
  601.                     </div>
  602.                 </div>
  604.                 <div>
  605.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
  606.                         <path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
  607.                     </svg>
  608.                     <b>{{ 'Kudos' |trans }}</b><br><br>
  610.                     <div class="graficosTortaBarra" >
  611.                         <span id="contenidokudos">
  612.                             {% for tKudos in report_service.Kudos %}
  613.                                 <label>
  614.                                     <span class='boch'  style="background: {{ tKudos.Color }}"> </span>
  615.                                     ({{ tKudos.Cantidad }}) - {{ tKudos.Nombre }}
  616.                                 </label>
  617.                             {% endfor %}
  618.                         </span>
  619.                         <div style="padding:25px;">
  620.                             <canvas id="kudos" width="700" height="350" ></canvas>
  621.                         </div>
  622.                     </div>
  623.                 </div>
  625.             </div>
  626.         </div>
  628.         <div class="uv-copyright">
  629.             <span class="uv-credit-text">Powered by <a href="https://www.uvdesk.com" target="_blank">UVdesk</a></span>
  630.         </div>
  631.     </div>
  635. {% endblock %}
  639. {% block footer %}
  640.     {{ parent() }}
  642.     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
  643.     <script>
  646.         let startGlobalDate = "";
  647.         let endGlobalDate = "";
  648.         let date = new Date();
  649.         let currentMonth = date.getMonth();
  650.         let currentDate = date.getDate();
  651.         let currentYear = date.getFullYear();
  653.         //Filtros año, mes, semana, dia
  654.         $("input[type='radio']").click(function(){
  655.             currentDate = new Date();
  656.             start = new Date();
  657.             end = new Date();
  658.             $('.uv-action-bar .date').find("#to").val(currentDate.getFullYear() + "-" + (currentDate.getMonth()+1) + "-" + currentDate.getDate());
  659.             var hasta = new Date($('.uv-action-bar .date').find("#to").val());
  660.             switch ($('input[name="options"]:checked').val()) {
  661.                 case "year":
  662.                     start.setFullYear(currentDate.getFullYear() - 1);
  663.                     start.setMonth(0);
  664.                     start.setDate(1);
  665.                     start.setHours(0, 0, 0, 0);
  666.                     end.setFullYear(currentDate.getFullYear() - 1);
  667.                     end.setMonth(11);
  668.                     end.setDate(new Date(currentDate.getFullYear() - 1, 12, 0).getDate())
  669.                     end.setHours(0, 0, 0, 0);
  671.                     datestringStart = start.getFullYear() + "-" + (start.getMonth()+1) + "-" + start.getDate();
  672.                     datestringEnd = end.getFullYear() + "-" + (end.getMonth()+1) + "-" + end.getDate();
  673.                     $('.uv-action-bar .date').find("#from").val(datestringStart)
  674.                     $('.uv-action-bar .date').find("#to").val(datestringEnd).trigger('change');
  675.                     break;
  676.                 case "month":
  677.                     start.setMonth(currentDate.getMonth() - 1);
  678.                     start.setDate(1);
  679.                     start.setHours(0, 0, 0, 0);
  680.                     end.setMonth(currentDate.getMonth() - 1);
  681.                     end.setDate(new Date(end.getFullYear(), end.getMonth(), 0).getDate())
  682.                     end.setHours(0, 0, 0, 0);
  684.                     datestringStart = start.getFullYear() + "-" + (start.getMonth()+1) + "-" + start.getDate();
  685.                     datestringEnd = end.getFullYear() + "-" + (end.getMonth()+1) + "-" + end.getDate();
  686.                     $('.uv-action-bar .date').find("#from").val(datestringStart);
  687.                     $('.uv-action-bar .date').find("#to").val(datestringEnd).trigger('change');
  688.                     break;
  689.                 case "week":
  690.                     var beforeOneWeek = new Date(new Date().getTime() - 60 * 60 * 24 * 7 * 1000)
  691.                     var beforeOneWeek2 = new Date(beforeOneWeek);
  692.                     day = beforeOneWeek.getDay()
  693.                     diffToMonday = beforeOneWeek.getDate() - day + (day === 0 ? -6 : 1)
  694.                     lastMonday = new Date(beforeOneWeek.setDate(diffToMonday))
  695.                     lastSunday = new Date(beforeOneWeek2.setDate(diffToMonday + 6));
  697.                     datestringStart = lastMonday.getFullYear() + "-" + (lastMonday.getMonth()+1) + "-" + lastMonday.getDate();
  698.                     datestringEnd = lastSunday.getFullYear() + "-" + (lastSunday.getMonth()+1) + "-" + lastSunday.getDate();
  699.                     $('.uv-action-bar .date').find("#from").val(datestringStart);
  700.                     $('.uv-action-bar .date').find("#to").val(datestringEnd).trigger('change');
  701.                     break;
  702.                 case "day":
  703.                     start.setFullYear(hasta.getFullYear());
  704.                     start.setMonth(hasta.getMonth());
  705.                     start.setDate(hasta.getDate());
  706.                     start.setHours(0, 0, 0, 0);
  707.                     datestring =  start.getFullYear() + "-" + (start.getMonth()+1) + "-" + start.getDate();
  708.                     $('.uv-action-bar .date').find("#from").val(datestring);
  709.                     $('.uv-action-bar .date').find("#to").val(datestring).trigger('change');
  710.                     break;
  711.             }
  717.         })
  719.         let ticketsByStatus = {{report_service.ticketsByStatus|json_encode|raw}};
  720.         let ticketsByType = {{report_service.ticketsByType|json_encode|raw}};
  721.         let ticketsByPriority = {{report_service.ticketsByPriority|json_encode|raw}};
  722.         let ticketsPerAgent = {{report_service.ticketsPerAgent|json_encode|raw}};
  723.         let ticketsPerTeam = {{report_service.ticketsPerTeam|json_encode|raw}};
  724.         let kudos = {{report_service.kudos|json_encode|raw}};
  727.         $('.uv-action-bar .date #from').datetimepicker({
  728.             maxDate: new Date(currentYear, currentMonth, currentDate),
  729.             format: 'YYYY-MM-DD',
  730.         }).on('dp.change', function(e) {
  731.             filtroFechas();
  732.         });
  733.         $('.uv-action-bar .date #to').datetimepicker({
  734.             maxDate: new Date(currentYear, currentMonth, currentDate),
  735.             format: 'YYYY-MM-DD',
  736.         }).on('dp.change', function(e) {
  737.             filtroFechas();
  738.         });
  740.         const filtroFechas = () => {
  741.             const fromDate = $('.uv-action-bar .date').find("#from").val();
  742.             const toDate = $('.uv-action-bar .date').find("#to").val();
  744.             // Validar que las fechas estén presentes
  745.             if (!fromDate || !toDate) {
  746.                 console.warn('Fechas no definidas:', fromDate, toDate);
  747.                 return;
  748.             }
  750.             console.log('Enviando fechas al servidor:', fromDate, toDate);
  752.             $.ajax({
  753.                 type: "POST",
  754.                 url: "{{ path('helpdesk_member_report_charts_xhr') }}",
  755.                 data: {
  756.                     'from': fromDate,
  757.                     'to': toDate
  758.                 },
  759.                 dataType: "json",
  760.                 success: function(msg){
  761.                     console.log('Respuesta del servidor:', msg);
  762.                     // Actualizar datos
  763.                     ticketsByStatus = msg['ticketsByStatus'] || {};
  764.                     ticketsByType = msg['ticketsByType'] || {};
  765.                     ticketsByPriority = msg['ticketsByPriority'] || {};
  766.                     ticketsPerAgent = msg['ticketsPerAgent'] || {};
  767.                     ticketsPerTeam = msg['ticketsPerTeam'] || {};
  768.                     kudos = msg['kudos'] || {};
  770.                     // Reinicializar gráficos si no existen o si los datos cambiaron
  771.                     if (!graficoTicketByStatus && Object.keys(ticketsByStatus).length > 0) {
  772.                         graficoTicketByStatus = crearGrafico(ticketsByStatus, 'ticketsByStatus');
  773.                     }
  774.                     if (!graficoTicketByType && Object.keys(ticketsByType).length > 0) {
  775.                         graficoTicketByType = crearGrafico(ticketsByType, 'ticketsByType');
  776.                     }
  777.                     if (!graficoTicketByPriority && Object.keys(ticketsByPriority).length > 0) {
  778.                         graficoTicketByPriority = crearGrafico(ticketsByPriority, 'ticketsByPriority');
  779.                     }
  780.                     if (!graficoPerAgent && Object.keys(ticketsPerAgent).length > 0) {
  781.                         graficoPerAgent = crearGrafico(ticketsPerAgent, 'ticketsPerAgent');
  782.                     }
  783.                     if (!graficoPerTeam && Object.keys(ticketsPerTeam).length > 0) {
  784.                         graficoPerTeam = crearGrafico(ticketsPerTeam, 'ticketsPerTeam');
  785.                     }
  786.                     if (!graficoKudos && Object.keys(kudos).length > 0) {
  787.                         graficoKudos = crearGrafico(kudos, 'kudos');
  788.                     }
  790.                     // Actualizar gráficos existentes
  791.                     actualizarGraficos();
  792.                     
  793.                     // Actualizar nuevas métricas
  794.                     if (msg['kpiSummary']) {
  795.                         actualizarKPIs(msg['kpiSummary'], msg['lastTicketDate'], msg['ticketsLessThan5Days']);
  796.                     } else {
  797.                         actualizarKPIs(null, msg['lastTicketDate'], msg['ticketsLessThan5Days']);
  798.                     }
  799.                     
  800.                     // Tablas
  801.                     if (msg['agentsWithCount']) {
  802.                         console.log('Actualizando agentes:', msg['agentsWithCount']);
  803.                         actualizarAgentes(msg['agentsWithCount']);
  804.                     } else {
  805.                         console.log('No hay datos de agentes');
  806.                     }
  807.                     if (msg['customersWithCount']) {
  808.                         console.log('Actualizando clientes:', msg['customersWithCount']);
  809.                         actualizarTopClientes(msg['customersWithCount']);
  810.                     } else {
  811.                         console.log('No hay datos de clientes');
  812.                         const tbody = document.getElementById('customersTableBody');
  813.                         if (tbody) {
  814.                             tbody.innerHTML = '<tr><td colspan="2">{{ 'No data available'|trans }}</td></tr>';
  815.                         }
  816.                     }
  817.                     
  818.                     // Gráficos
  819.                     console.log('Datos recibidos para gráficos:', {
  820.                         ticketsByTypeStacked: msg['ticketsByTypeStacked'],
  821.                         incidentTypes: msg['incidentTypes'],
  822.                         ticketsByMonth: msg['ticketsByMonth'],
  823.                         closureTimeCategories: msg['closureTimeCategories']
  824.                     });
  825.                     
  826.                     if (msg['ticketsByTypeStacked'] && msg['ticketsByTypeStacked'].length > 0) {
  827.                         console.log('Creando gráfico de tipos apilados');
  828.                         crearGraficoTiposStacked(msg['ticketsByTypeStacked']);
  829.                     } else {
  830.                         console.log('No hay datos para ticketsByTypeStacked');
  831.                     }
  832.                     if (msg['incidentTypes'] && msg['incidentTypes'].length > 0) {
  833.                         console.log('Creando gráfico de tipos de incidentes');
  834.                         crearGraficoIncidentTypes(msg['incidentTypes']);
  835.                     } else {
  836.                         console.log('No hay datos para incidentTypes');
  837.                     }
  838.                     if (msg['ticketsByMonth'] && msg['ticketsByMonth'].length > 0) {
  839.                         console.log('Creando gráfico de tickets por mes');
  840.                         crearGraficoTicketsByMonth(msg['ticketsByMonth']);
  841.                     } else {
  842.                         console.log('No hay datos para ticketsByMonth');
  843.                     }
  844.                     if (msg['closureTimeCategories'] && msg['closureTimeCategories'].length > 0) {
  845.                         console.log('Creando gráfico de tiempo de cierre');
  846.                         crearGraficoClosureTime(msg['closureTimeCategories']);
  847.                     } else {
  848.                         console.log('No hay datos para closureTimeCategories');
  849.                     }
  850.                     
  851.                     // Gráficos adicionales (opcionales)
  852.                     if (msg['ticketsByDay']) {
  853.                         crearGraficoTicketsByDay(msg['ticketsByDay']);
  854.                     }
  855.                     if (msg['ticketsByHour']) {
  856.                         crearGraficoTicketsByHour(msg['ticketsByHour']);
  857.                     }
  858.                 }
  859.             });
  860.         }
  862.         // Funcionalidad para cargar Excel
  863.         $('#btnUploadExcel').on('click', function() {
  864.             $('#excelFileInput').click();
  865.         });
  867.         $('#excelFileInput').on('change', function(e) {
  868.             const file = e.target.files[0];
  869.             if (!file) return;
  871.             const formData = new FormData();
  872.             formData.append('excel_file', file);
  874.             $('#excelStatus').text('{{ 'Cargando...'|trans }}');
  876.             $.ajax({
  877.                 url: '/dashboard/excel/upload',
  878.                 type: 'POST',
  879.                 data: formData,
  880.                 processData: false,
  881.                 contentType: false,
  882.                 success: function(response) {
  883.                     if (response.success) {
  884.                         $('#excelStatus').text('{{ 'Excel cargado: '|trans }}' + response.rows + ' {{ 'filas'|trans }}');
  885.                         $('#btnClearExcel').show();
  886.                         // Recargar datos
  887.                         filtroFechas();
  888.                     } else {
  889.                         $('#excelStatus').text('{{ 'Error: '|trans }}' + response.message);
  890.                         alert(response.message);
  891.                     }
  892.                 },
  893.                 error: function(xhr) {
  894.                     const response = xhr.responseJSON || {};
  895.                     $('#excelStatus').text('{{ 'Error al cargar'|trans }}');
  896.                     alert(response.message || '{{ 'Error al cargar el archivo'|trans }}');
  897.                 }
  898.             });
  899.         });
  901.         $('#btnClearExcel').on('click', function() {
  902.             $.ajax({
  903.                 url: '/dashboard/excel/clear',
  904.                 type: 'POST',
  905.                 success: function(response) {
  906.                     if (response.success) {
  907.                         $('#excelStatus').text('');
  908.                         $('#btnClearExcel').hide();
  909.                         $('#excelFileInput').val('');
  910.                         // Recargar datos
  911.                         filtroFechas();
  912.                     }
  913.                 }
  914.             });
  915.         });
  917.         // Verificar estado al cargar
  918.         function checkExcelStatus() {
  919.             $.ajax({
  920.                 url: '/dashboard/excel/status',
  921.                 type: 'GET',
  922.                 success: function(response) {
  923.                     if (response.hasExcelData) {
  924.                         $('#excelStatus').text('{{ 'Usando Excel: '|trans }}' + response.rows + ' {{ 'filas'|trans }}');
  925.                         $('#btnClearExcel').show();
  926.                     }
  927.                 }
  928.             });
  929.         }
  931.         // Cargar datos iniciales al cargar la página
  932.         $(document).ready(function() {
  933.             // Verificar si hay Excel cargado
  934.             checkExcelStatus();
  936.             // Establecer fechas por defecto (últimos 30 días)
  937.             let endDate = new Date();
  938.             let startDate = new Date();
  939.             startDate.setDate(startDate.getDate() - 30);
  940.             
  941.             const formatDate = (date) => {
  942.                 const year = date.getFullYear();
  943.                 const month = String(date.getMonth() + 1).padStart(2, '0');
  944.                 const day = String(date.getDate()).padStart(2, '0');
  945.                 return `${year}-${month}-${day}`;
  946.             };
  947.             
  948.             $('.uv-action-bar .date').find("#from").val(formatDate(startDate));
  949.             $('.uv-action-bar .date').find("#to").val(formatDate(endDate));
  950.             
  951.             // Inicializar gráficos con datos iniciales si existen
  952.             inicializarGraficos();
  953.             
  954.             // Cargar datos iniciales
  955.             filtroFechas();
  956.         });
  958.         const capitalizeFirstLetter = (string) => {
  959.             return string.charAt(0).toUpperCase() + string.slice(1);
  960.         }
  962.         const crearGrafico = (tickets, nombre) => {
  963.             let tipo = 'pie'
  964.             let labels = Object.values(tickets).map(function (el) {return el.Nombre })
  965.             let label = ''
  966.             let options = {
  967.                 legend: { display: false }
  968.             }
  970.             switch(nombre) {
  971.                 case 'kudos':
  972.                     tipo = 'bar';
  973.                     options.indexAxis = 'y';
  974.                     break;
  975.                 case 'ticketsByStatus':
  976.                     tipo = 'bar';
  977.                     options.indexAxis = 'y';
  978.                     break;
  979.                 case 'ticketsByPriority':
  980.                     tipo = 'bar';
  981.                     options.indexAxis = 'y';
  982.                     break;
  983.             }
  985.             return new Chart(
  986.                 document.getElementById(nombre),
  987.                 {
  988.                     type: tipo,
  989.                     data: {
  990.                         labels: labels,
  991.                         datasets: [{
  992.                             label: label,
  993.                             data: Object.values(tickets).map(function (el) { return el.Cantidad }),
  994.                             backgroundColor: Object.values(tickets).map(function (el) { return el.Color }),
  995.                             hoverOffset: 4
  996.                         }]
  997.                     },
  998.                     options: options
  999.                 }
  1000.             )
  1001.         }
  1004.         const actualizaGrafico = (grafico, tickets, nombre) => {
  1005.             if (!grafico || !tickets || Object.keys(tickets).length === 0) {
  1006.                 return;
  1007.             }
  1009.             let labels = Object.values(tickets).map(function (el) {return el.Nombre })
  1011.             const data = {
  1012.                 labels: labels,
  1013.                 datasets: [
  1014.                     {
  1015.                         label: '',
  1016.                         data: Object.values(tickets).map(function (el) { return el.Cantidad }),
  1017.                         backgroundColor: Object.values(tickets).map(function (el) { return el.Color }),
  1018.                         hoverOffset: 4
  1019.                     }
  1020.                 ]
  1021.             };
  1023.             grafico.data.labels = data.labels;
  1024.             grafico.data.datasets = data.datasets;
  1025.             grafico.update();
  1027.             let html = '';
  1028.             $.each(tickets, function (key, value) {
  1029.                 let Color = value.Color;
  1030.                 let Cantidad = value.Cantidad;
  1031.                 let Nombre = value.Nombre;
  1033.                 html += '<label><span class="boch" style="background: '+ Color +'"></span>  '+ Cantidad +' - '+ Nombre +' </label>';
  1034.             });
  1035.             $('#'+nombre).html(html);
  1036.         }
  1038.         // Declarar variables de gráficos globalmente
  1039.         let graficoTicketByStatus = null;
  1040.         let graficoTicketByType = null;
  1041.         let graficoTicketByPriority = null;
  1042.         let graficoPerAgent = null;
  1043.         let graficoPerTeam = null;
  1044.         let graficoKudos = null;
  1046.         // Función para actualizar gráficos - debe estar antes de filtroFechas
  1047.         const actualizarGraficos = () => {
  1048.             if (graficoTicketByStatus && ticketsByStatus) {
  1049.             actualizaGrafico(graficoTicketByStatus, ticketsByStatus, 'contenidoticketsByStatus');
  1050.             }
  1051.             if (graficoTicketByType && ticketsByType) {
  1052.             actualizaGrafico(graficoTicketByType, ticketsByType, 'contenidoticketsByType');
  1053.             }
  1054.             if (graficoTicketByPriority && ticketsByPriority) {
  1055.             actualizaGrafico(graficoTicketByPriority, ticketsByPriority, 'contenidoticketsByPriority');
  1056.             }
  1057.             if (graficoPerAgent && ticketsPerAgent) {
  1058.             actualizaGrafico(graficoPerAgent, ticketsPerAgent, 'contenidoticketsPerAgent');
  1059.             }
  1060.             if (graficoPerTeam && ticketsPerTeam) {
  1061.             actualizaGrafico(graficoPerTeam, ticketsPerTeam, 'contenidoticketsPerTeam');
  1062.             }
  1063.             if (graficoKudos && kudos) {
  1064.             actualizaGrafico(graficoKudos, kudos, 'contenidokudos');
  1065.             }
  1066.         }
  1068.         // Inicializar gráficos solo si hay datos
  1069.         const inicializarGraficos = () => {
  1070.             if (Object.keys(ticketsByStatus).length > 0) {
  1071.                 graficoTicketByStatus = crearGrafico(ticketsByStatus, 'ticketsByStatus');
  1072.             }
  1073.             if (Object.keys(ticketsByType).length > 0) {
  1074.                 graficoTicketByType = crearGrafico(ticketsByType, 'ticketsByType');
  1075.             }
  1076.             if (Object.keys(ticketsByPriority).length > 0) {
  1077.                 graficoTicketByPriority = crearGrafico(ticketsByPriority, 'ticketsByPriority');
  1078.             }
  1079.             if (Object.keys(ticketsPerAgent).length > 0) {
  1080.                 graficoPerAgent = crearGrafico(ticketsPerAgent, 'ticketsPerAgent');
  1081.             }
  1082.             if (Object.keys(ticketsPerTeam).length > 0) {
  1083.                 graficoPerTeam = crearGrafico(ticketsPerTeam, 'ticketsPerTeam');
  1084.             }
  1085.             if (Object.keys(kudos).length > 0) {
  1086.                 graficoKudos = crearGrafico(kudos, 'kudos');
  1087.             }
  1088.         }
  1090.         // Variables globales para nuevos gráficos
  1091.         let ticketsByDayChart = null;
  1092.         let ticketsOpenVsClosedChart = null;
  1093.         let ticketsByHourChart = null;
  1094.         let ticketsByMonthChart = null;
  1095.         let ticketsByTypeStackedChart = null;
  1096.         let incidentTypesChart = null;
  1097.         let closureTimeChart = null;
  1099.         // Función para actualizar KPIs
  1100.         const actualizarKPIs = (kpiData, lastTicketDate, lessThan5Days) => {
  1101.             if (kpiData) {
  1102.                 document.getElementById('kpiTotalTickets').textContent = kpiData.total_tickets || 0;
  1103.                 document.getElementById('kpiResolvedTickets').textContent = kpiData.tickets_resueltos || 0;
  1104.                 document.getElementById('kpiOpenTickets').textContent = kpiData.tickets_abiertos || 0;
  1105.             }
  1106.             if (lastTicketDate) {
  1107.                 document.getElementById('kpiLastTicketDate').textContent = lastTicketDate;
  1108.             }
  1109.             if (lessThan5Days !== undefined) {
  1110.                 document.getElementById('kpiLessThan5Days').textContent = lessThan5Days.toLocaleString();
  1111.             }
  1112.         }
  1114.         // Función para crear gráfico de tendencia temporal
  1115.         const crearGraficoTicketsByDay = (data) => {
  1116.             const ctx = document.getElementById('ticketsByDayChart');
  1117.             if (!ctx) return;
  1119.             if (ticketsByDayChart) {
  1120.                 ticketsByDayChart.destroy();
  1121.             }
  1123.             const labels = data.map(item => item.fecha);
  1124.             const values = data.map(item => item.cantidad);
  1126.             ticketsByDayChart = new Chart(ctx, {
  1127.                 type: 'line',
  1128.                 data: {
  1129.                     labels: labels,
  1130.                     datasets: [{
  1131.                         label: '{{ 'Tickets Created'|trans }}',
  1132.                         data: values,
  1133.                         borderColor: 'rgb(75, 192, 192)',
  1134.                         backgroundColor: 'rgba(75, 192, 192, 0.2)',
  1135.                         tension: 0.1
  1136.                     }]
  1137.                 },
  1138.                 options: {
  1139.                     responsive: true,
  1140.                     maintainAspectRatio: true,
  1141.                     scales: {
  1142.                         y: {
  1143.                             beginAtZero: true,
  1144.                             ticks: {
  1145.                                 stepSize: 1,
  1146.                                 precision: 0
  1147.                             }
  1148.                         }
  1149.                     }
  1150.                 }
  1151.             });
  1152.         }
  1154.         // Función para crear gráfico de tickets abiertos vs cerrados
  1155.         const crearGraficoTicketsOpenVsClosed = (data) => {
  1156.             const ctx = document.getElementById('ticketsOpenVsClosedChart');
  1157.             if (!ctx) return;
  1159.             if (ticketsOpenVsClosedChart) {
  1160.                 ticketsOpenVsClosedChart.destroy();
  1161.             }
  1163.             const labels = data.map(item => item.fecha);
  1164.             const abiertos = data.map(item => item.abiertos);
  1165.             const cerrados = data.map(item => item.cerrados);
  1167.             ticketsOpenVsClosedChart = new Chart(ctx, {
  1168.                 type: 'bar',
  1169.                 data: {
  1170.                     labels: labels,
  1171.                     datasets: [
  1172.                         {
  1173.                             label: '{{ 'Opened'|trans }}',
  1174.                             data: abiertos,
  1175.                             backgroundColor: 'rgba(255, 99, 132, 0.5)',
  1176.                             borderColor: 'rgb(255, 99, 132)',
  1177.                             borderWidth: 1
  1178.                         },
  1179.                         {
  1180.                             label: '{{ 'Closed'|trans }}',
  1181.                             data: cerrados,
  1182.                             backgroundColor: 'rgba(54, 162, 235, 0.5)',
  1183.                             borderColor: 'rgb(54, 162, 235)',
  1184.                             borderWidth: 1
  1185.                         }
  1186.                     ]
  1187.                 },
  1188.                 options: {
  1189.                     responsive: true,
  1190.                     maintainAspectRatio: true,
  1191.                     scales: {
  1192.                         y: {
  1193.                             beginAtZero: true,
  1194.                             ticks: {
  1195.                                 stepSize: 1,
  1196.                                 precision: 0
  1197.                             }
  1198.                         }
  1199.                     }
  1200.                 }
  1201.             });
  1202.         }
  1204.         // Función para crear gráfico de tickets por hora
  1205.         const crearGraficoTicketsByHour = (data) => {
  1206.             const ctx = document.getElementById('ticketsByHourChart');
  1207.             if (!ctx) return;
  1209.             if (ticketsByHourChart) {
  1210.                 ticketsByHourChart.destroy();
  1211.             }
  1213.             // Crear array completo de 24 horas
  1214.             const hoursData = Array.from({length: 24}, (_, i) => {
  1215.                 const found = data.find(item => item.hora === i);
  1216.                 return found ? found.cantidad : 0;
  1217.             });
  1219.             const labels = Array.from({length: 24}, (_, i) => i + ':00');
  1221.             ticketsByHourChart = new Chart(ctx, {
  1222.                 type: 'bar',
  1223.                 data: {
  1224.                     labels: labels,
  1225.                     datasets: [{
  1226.                         label: '{{ 'Tickets'|trans }}',
  1227.                         data: hoursData,
  1228.                         backgroundColor: 'rgba(153, 102, 255, 0.5)',
  1229.                         borderColor: 'rgb(153, 102, 255)',
  1230.                         borderWidth: 1
  1231.                     }]
  1232.                 },
  1233.                 options: {
  1234.                     responsive: true,
  1235.                     maintainAspectRatio: true,
  1236.                     scales: {
  1237.                         y: {
  1238.                             beginAtZero: true,
  1239.                             ticks: {
  1240.                                 stepSize: 1,
  1241.                                 precision: 0
  1242.                             }
  1243.                         }
  1244.                     }
  1245.                 }
  1246.             });
  1247.         }
  1249.         // Función para actualizar tabla de top agentes
  1250.         const actualizarTopAgentes = (data) => {
  1251.             const tbody = document.getElementById('topAgentsTableBody');
  1252.             if (!tbody) return;
  1254.             if (!data || data.length === 0) {
  1255.                 tbody.innerHTML = '<tr><td colspan="2">{{ 'No data available'|trans }}</td></tr>';
  1256.                 return;
  1257.             }
  1259.             tbody.innerHTML = data.map(agent => `
  1260.                 <tr>
  1261.                     <td>${agent.agente || '-'}</td>
  1262.                     <td>${agent.tickets_resueltos || 0}</td>
  1263.                 </tr>
  1264.             `).join('');
  1265.         }
  1267.         // Función para actualizar tabla de top clientes
  1268.         const actualizarTopClientes = (data) => {
  1269.             const tbody = document.getElementById('customersTableBody');
  1270.             if (!tbody) {
  1271.                 console.error('No se encontró el elemento customersTableBody');
  1272.                 return;
  1273.             }
  1275.             console.log('Actualizando tabla de clientes con datos:', data);
  1277.             if (!data || data.length === 0) {
  1278.                 tbody.innerHTML = '<tr><td colspan="2">{{ 'No data available'|trans }}</td></tr>';
  1279.                 return;
  1280.             }
  1282.             tbody.innerHTML = data.map(customer => `
  1283.                 <tr>
  1284.                     <td>${customer.cliente || '-'}</td>
  1285.                     <td>${customer.total_tickets || 0}</td>
  1286.                 </tr>
  1287.             `).join('');
  1288.         }
  1290.         // Función para actualizar tabla de agentes
  1291.         const actualizarAgentes = (data) => {
  1292.             const tbody = document.getElementById('agentsTableBody');
  1293.             if (!tbody) return;
  1295.             if (!data || data.length === 0) {
  1296.                 tbody.innerHTML = '<tr><td colspan="2">{{ 'No data available'|trans }}</td></tr>';
  1297.                 return;
  1298.             }
  1300.             tbody.innerHTML = data.map(agent => `
  1301.                 <tr>
  1302.                     <td>${agent.agente || '-'}</td>
  1303.                     <td>${agent.total_tickets || 0}</td>
  1304.                 </tr>
  1305.             `).join('');
  1306.         }
  1308.         // Función para crear gráfico apilado de tipos
  1309.         const crearGraficoTiposStacked = (data) => {
  1310.             const ctx = document.getElementById('ticketsByTypeStackedChart');
  1311.             if (!ctx) {
  1312.                 console.error('No se encontró el elemento ticketsByTypeStackedChart');
  1313.                 return;
  1314.             }
  1316.             if (ticketsByTypeStackedChart) {
  1317.                 ticketsByTypeStackedChart.destroy();
  1318.             }
  1320.             console.log('Datos para gráfico apilado:', data);
  1322.             const labels = ['Todo'];
  1323.             const colors = ['rgba(54, 162, 235, 0.8)', 'rgba(75, 192, 192, 0.8)', 'rgba(153, 102, 255, 0.8)', 'rgba(255, 206, 86, 0.8)', 'rgba(255, 99, 132, 0.8)', 'rgba(255, 159, 64, 0.8)'];
  1324.             const datasets = data.map((item, index) => ({
  1325.                 label: item.tipo || 'Sin tipo',
  1326.                 data: [item.cantidad || 0],
  1327.                 backgroundColor: colors[index % colors.length] || 'rgba(201, 203, 207, 0.8)'
  1328.             }));
  1330.             ticketsByTypeStackedChart = new Chart(ctx, {
  1331.                 type: 'bar',
  1332.                 data: {
  1333.                     labels: labels,
  1334.                     datasets: datasets
  1335.                 },
  1336.                 options: {
  1337.                     indexAxis: 'y',
  1338.                     responsive: true,
  1339.                     maintainAspectRatio: true,
  1340.                     plugins: {
  1341.                         legend: {
  1342.                             display: true,
  1343.                             position: 'top'
  1344.                         }
  1345.                     },
  1346.                     scales: {
  1347.                         x: {
  1348.                             stacked: true,
  1349.                             beginAtZero: true,
  1350.                             ticks: {
  1351.                                 stepSize: 1,
  1352.                                 precision: 0
  1353.                             }
  1354.                         },
  1355.                         y: {
  1356.                             stacked: true
  1357.                         }
  1358.                     }
  1359.                 }
  1360.             });
  1361.         }
  1363.         // Función para crear pie chart de tipos de incidentes
  1364.         const crearGraficoIncidentTypes = (data) => {
  1365.             const ctx = document.getElementById('incidentTypesChart');
  1366.             if (!ctx) {
  1367.                 console.error('No se encontró el elemento incidentTypesChart');
  1368.                 return;
  1369.             }
  1371.             if (incidentTypesChart) {
  1372.                 incidentTypesChart.destroy();
  1373.             }
  1375.             console.log('Datos para gráfico de incidentes:', data);
  1377.             const total = data.reduce((sum, item) => sum + (item.cantidad || 0), 0);
  1378.             const labels = data.map(item => {
  1379.                 const cantidad = item.cantidad || 0;
  1380.                 const percentage = total > 0 ? ((cantidad / total) * 100).toFixed(1) : 0;
  1381.                 return `${item.tipo || 'Sin tipo'} (${percentage}%)`;
  1382.             });
  1383.             const values = data.map(item => item.cantidad || 0);
  1385.             // Colores para el pie chart
  1386.             const colors = [
  1387.                 'rgba(255, 99, 132, 0.8)', 'rgba(54, 162, 235, 0.8)', 'rgba(255, 206, 86, 0.8)',
  1388.                 'rgba(75, 192, 192, 0.8)', 'rgba(153, 102, 255, 0.8)', 'rgba(255, 159, 64, 0.8)',
  1389.                 'rgba(199, 199, 199, 0.8)', 'rgba(83, 102, 255, 0.8)', 'rgba(255, 99, 255, 0.8)',
  1390.                 'rgba(99, 255, 132, 0.8)', 'rgba(255, 159, 132, 0.8)', 'rgba(132, 99, 255, 0.8)',
  1391.                 'rgba(99, 132, 255, 0.8)', 'rgba(255, 99, 99, 0.8)', 'rgba(99, 255, 255, 0.8)'
  1392.             ];
  1394.             incidentTypesChart = new Chart(ctx, {
  1395.                 type: 'pie',
  1396.                 data: {
  1397.                     labels: labels,
  1398.                     datasets: [{
  1399.                         data: values,
  1400.                         backgroundColor: colors.slice(0, data.length)
  1401.                     }]
  1402.                 },
  1403.                 options: {
  1404.                     responsive: true,
  1405.                     maintainAspectRatio: true,
  1406.                     plugins: {
  1407.                         legend: {
  1408.                             position: 'right',
  1409.                             labels: {
  1410.                                 boxWidth: 12,
  1411.                                 font: {
  1412.                                     size: 10
  1413.                                 }
  1414.                             }
  1415.                         }
  1416.                     }
  1417.                 }
  1418.             });
  1419.         }
  1421.         // Función para crear gráfico de tickets por mes
  1422.         const crearGraficoTicketsByMonth = (data) => {
  1423.             const ctx = document.getElementById('ticketsByMonthChart');
  1424.             if (!ctx) {
  1425.                 console.error('No se encontró el elemento ticketsByMonthChart');
  1426.                 return;
  1427.             }
  1429.             if (ticketsByMonthChart) {
  1430.                 ticketsByMonthChart.destroy();
  1431.             }
  1433.             console.log('Datos para gráfico por mes:', data);
  1435.             const labels = data.map(item => item.mes_formateado || item.mes || '');
  1436.             const values = data.map(item => item.cantidad || 0);
  1438.             ticketsByMonthChart = new Chart(ctx, {
  1439.                 type: 'bar',
  1440.                 data: {
  1441.                     labels: labels,
  1442.                     datasets: [{
  1443.                         label: '{{ 'Tickets'|trans }}',
  1444.                         data: values,
  1445.                         backgroundColor: 'rgba(54, 162, 235, 0.8)',
  1446.                         borderColor: 'rgb(54, 162, 235)',
  1447.                         borderWidth: 1
  1448.                     }]
  1449.                 },
  1450.                 options: {
  1451.                     responsive: true,
  1452.                     maintainAspectRatio: true,
  1453.                     scales: {
  1454.                         y: {
  1455.                             beginAtZero: true,
  1456.                             ticks: {
  1457.                                 stepSize: 1,
  1458.                                 precision: 0
  1459.                             }
  1460.                         }
  1461.                     }
  1462.                 }
  1463.             });
  1464.         }
  1466.         // Función para crear gráfico de tiempo de cierre
  1467.         const crearGraficoClosureTime = (data) => {
  1468.             const ctx = document.getElementById('closureTimeChart');
  1469.             if (!ctx) {
  1470.                 console.error('No se encontró el elemento closureTimeChart');
  1471.                 return;
  1472.             }
  1474.             if (closureTimeChart) {
  1475.                 closureTimeChart.destroy();
  1476.             }
  1478.             console.log('Datos para gráfico de tiempo de cierre:', data);
  1480.             const labels = data.map(item => item.categoria || '');
  1481.             const values = data.map(item => item.cantidad || 0);
  1483.             // Colores específicos para cada categoría
  1484.             const colors = labels.map((label, index) => {
  1485.                 const categoryColors = {
  1486.                     'Menos 30 min': 'rgba(75, 192, 192, 0.8)',
  1487.                     'Menos 2 horas': 'rgba(153, 102, 255, 0.8)',
  1488.                     'Menos 1 día': 'rgba(255, 159, 64, 0.8)',
  1489.                     'Menos 5 días': 'rgba(255, 99, 132, 0.8)',
  1490.                     'Menos 15 días': 'rgba(255, 206, 86, 0.8)',
  1491.                     'Más de 15 días': 'rgba(54, 162, 235, 0.8)',
  1492.                     'No Cerrado': 'rgba(201, 203, 207, 0.8)'
  1493.                 };
  1494.                 return categoryColors[label] || 'rgba(199, 199, 199, 0.8)';
  1495.             });
  1497.             closureTimeChart = new Chart(ctx, {
  1498.                 type: 'bar',
  1499.                 data: {
  1500.                     labels: labels,
  1501.                     datasets: [{
  1502.                         label: '{{ 'Tickets'|trans }}',
  1503.                         data: values,
  1504.                         backgroundColor: colors,
  1505.                         borderColor: colors.map(c => (c && typeof c === 'string') ? c.replace('0.8', '1') : 'rgba(199, 199, 199, 1)'),
  1506.                         borderWidth: 1
  1507.                     }]
  1508.                 },
  1509.                 options: {
  1510.                     indexAxis: 'y',
  1511.                     responsive: true,
  1512.                     maintainAspectRatio: true,
  1513.                     scales: {
  1514.                         x: {
  1515.                             beginAtZero: true,
  1516.                             ticks: {
  1517.                                 stepSize: 1,
  1518.                                 precision: 0
  1519.                             }
  1520.                         }
  1521.                     }
  1522.                 }
  1523.             });
  1524.         }
  1526.     </script>
  1529. {% endblock %}