tercer commit

index.html

@@ -124,13 +124,97 @@
     <div class="table-card">
       <h3>SP Completados — Tabla Resumen</h3>
       <table>
-        <thead><tr><th>Desarrollador</th><th>✅ SP Completados</th><th>% del impacto total</th></tr></thead>
+        <thead><tr><th>Desarrollador</th><th>✅ SP Completados</th><th>🎟️ Tickets</th><th>% del impacto total</th></tr></thead>
         <tbody id="tableHistory"></tbody>
       </table>
     </div>
   </div>
 </div>
 
+
+
+<!-- ── SECCIÓN 3: Control de Calidad (QA) ── -->
+<div class="section-header qa">
+  <div class="dot qa"></div>
+  <h2>Control de Calidad (QA)</h2>
+  <span style="font-size:12px;color:#5e6c84;margin-left:8px;">Métricas del proceso de QA · Tiempos, colas y devoluciones</span>
+</div>
+
+<div class="main">
+  <div class="section-block">
+
+    <!-- KPIs -->
+    <div class="kpi-row">
+      <div class="kpi qa">
+        <div class="kpi-value" id="kpi-qa-tickets">—</div>
+        <div class="kpi-label">Tickets QA</div>
+        <div class="kpi-sub">Procesados en el período</div>
+      </div>
+      <div class="kpi qa-time">
+        <div class="kpi-value" id="kpi-qa-avg">—</div>
+        <div class="kpi-label">Tiempo Prom. QA</div>
+        <div class="kpi-sub">Horas promedio por ticket</div>
+      </div>
+      <div class="kpi qa-queue">
+        <div class="kpi-value" id="kpi-qa-rtqa">—</div>
+        <div class="kpi-label">Tiempo Prom. en Cola</div>
+        <div class="kpi-sub">Horas esperando READY TO QA</div>
+      </div>
+      <div class="kpi returned">
+        <div class="kpi-value" id="kpi-qa-returned">—</div>
+        <div class="kpi-label">Tickets Devueltos</div>
+        <div class="kpi-sub" id="kpi-qa-returned-pct">Volvieron a En Curso</div>
+      </div>
+    </div>
+
+    <!-- Gráficos fila 1 -->
+    <div class="charts-grid">
+      <div class="chart-card">
+        <h3>📊 Distribución de Tiempos en QA</h3>
+        <div class="sub">Rangos: &lt;30min · 30min–2hs · 2–8hs · &gt;8hs</div>
+        <div style="position:relative;height:240px"><canvas id="chartQaDist"></canvas></div>
+      </div>
+      <div class="chart-card">
+        <h3>🔄 Devueltos vs. Aprobados</h3>
+        <div class="sub">Tickets que volvieron a En Curso al menos una vez</div>
+        <div style="position:relative;height:240px"><canvas id="chartQaReturned"></canvas></div>
+      </div>
+    </div>
+
+    <!-- Gráficos fila 2 -->
+    <div class="charts-grid">
+      <div class="chart-card">
+        <h3>📈 Tiempo Promedio en QA — Mes a Mes</h3>
+        <div class="sub">Evolución de la velocidad de revisión (horas)</div>
+        <div style="position:relative;height:240px"><canvas id="chartQaMonthly"></canvas></div>
+      </div>
+      <div class="chart-card">
+        <h3>⏳ Tiempo en Cola RTQA — Mes a Mes</h3>
+        <div class="sub">Horas promedio esperando ser tomado por QA</div>
+        <div style="position:relative;height:240px"><canvas id="chartRtqaMonthly"></canvas></div>
+      </div>
+    </div>
+
+    <!-- Tabla de tickets QA -->
+    <div class="table-card">
+      <h3>🔍 Detalle de Tickets — QA</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>Ticket</th>
+            <th>Resumen</th>
+            <th>⏱️ Tiempo en QA (hs)</th>
+            <th>⏳ Cola RTQA (hs)</th>
+            <th>🔄 Veces devuelto</th>
+            <th>Estado</th>
+          </tr>
+        </thead>
+        <tbody id="tableQA"></tbody>
+      </table>
+    </div>
+
+  </div>
+</div>
 <footer>
   Dashboard en tiempo real · Arquitectura Modular Serverless · Realizado para Vercel & Jira
 </footer>