refactor: implement dashboard UI enhancements, add health alert tooltips, and introduce modular JS application structure with Netlify data functions.

index.html

@@ -71,7 +71,18 @@
         <div style="position:relative;height:260px"><canvas id="chartCurrentState"></canvas></div>
       </div>
       <div class="chart-card">
-        <h3>📢 Alertas de Salud</h3>
+        <h3 style="display:flex;align-items:center;">📢 Alertas de Salud
+          <div class="pop-trigger" style="margin-left:8px; font-size:14px; cursor:help; border:none;">ℹ️
+            <div class="pop-content" style="text-transform:none; font-weight:normal; letter-spacing:normal; text-align:left; font-size:12px; width:260px;">
+              <strong>Tipos de Alertas:</strong><br><br>
+              <span class="badge" style="background:#ffab00;color:white;font-size:10px;padding:2px 4px;">ESTANCADO</span> &rsaquo; +14 días en curso.<br><br>
+              <span class="badge" style="background:#ff5630;color:white;font-size:10px;padding:2px 4px;">VENCIDO</span> &rsaquo; Fecha de entrega caducada.<br><br>
+              <span class="badge" style="background:#6554c0;color:white;font-size:10px;padding:2px 4px;">SIN SP</span> &rsaquo; Completado sin estimación.<br><br>
+              <span class="badge" style="background:#ff8b00;color:white;font-size:10px;padding:2px 4px;">HUÉRFANO</span> &rsaquo; Ticket con SP sin asignar.<br><br>
+              <span class="badge" style="background:#36b37e;color:white;font-size:10px;padding:2px 4px;">DEV LIBRE</span> &rsaquo; Dev sin tickets pendientes ni en curso.
+            </div>
+          </div>
+        </h3>
         <div class="sub">Tickets estancados o sin estimación</div>
         <div id="warningsSection" style="display:none; overflow-y:auto; max-height:230px; margin-top:10px;">
           <ul class="warning-list" id="warningsList" style="padding:0; margin:0;"></ul>
@@ -127,9 +138,12 @@
     </div>
 
     <div class="table-card">
-      <h3>SP Completados — Tabla Resumen</h3>
+      <h3 style="display:flex; justify-content:space-between; align-items:center;">
+        <span>SP Completados — Tabla Resumen</span>
+        <span id="teamAvgLabel" style="font-size:12px; font-weight:normal; background:#e6fcff; color:#0065ff; padding:4px 8px; border-radius:4px; display:none;"></span>
+      </h3>
       <table>
-        <thead><tr><th>Desarrollador</th><th>✅ SP Completados</th><th>🎟️ Tickets</th><th>% del impacto total</th></tr></thead>
+        <thead><tr><th>Desarrollador</th><th>✅ SP Total</th><th>🎟️ Tickets</th><th>📉 Media SP/Ticket</th><th>% del impacto total vs Equipo</th></tr></thead>
         <tbody id="tableHistory"></tbody>
       </table>
     </div>
@@ -262,10 +276,10 @@
     </div>
     
     <div class="kpi-row-3">
-      <div class="kpi returned" title="Tickets que rebotaron en QA y el desarrollador tuvo que retomar ('Reaperturas' o regresos al ciclo En Curso)">
+      <div class="kpi returned" title="Tickets que sufrieron rechazos en revisiones (Code Review, Ready to QA o QA) y volvieron a desarrollo.">
         <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 class="kpi-label">Tickets con Retrabajo</div>
+        <div class="kpi-sub" id="kpi-qa-returned-pct">Sufrieron rechazos</div>
       </div>
       <div class="kpi qa-queue">
         <div class="kpi-value" id="kpi-qa-rtqa-p50">—</div>
@@ -299,8 +313,8 @@
         <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>
+        <h3>🔄 Flujo Directo vs Retrabajo</h3>
+        <div class="sub">Tickets con 0 rechazos vs con devoluciones (CR/QA)</div>
         <div style="position:relative;height:240px"><canvas id="chartQaReturned"></canvas></div>
       </div>
     </div>
@@ -327,8 +341,9 @@
           <tr>
             <th>Ticket</th>
             <th>Resumen</th>
-            <th>⏱️ Tiempo en QA (hs)</th>
-            <th>⏳ Cola RTQA (hs)</th>
+            <th>⏱️ Dev (hs)</th>
+            <th>⏱️ CR (hs)</th>
+            <th>⏱️ QA (hs)</th>
             <th>🔄 Veces devuelto</th>
             <th>Estado</th>
           </tr>