dashboard-infra/index.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard LABS — Story Points</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script type="module" src="./js/app.js" defer></script>
</head>
<body>

<!-- Loading overlay -->
<div class="loading-overlay" id="loadingOverlay">
  <div class="spinner"></div>
  <p>Consultando Jira en tiempo real…</p>
</div>

<!-- Error banner -->
<div class="error-banner" id="errorBanner"></div>
<div class="error-banner" id="limitBanner" style="background:#fff7d6; color:#a15900; border-color:#ffab00;"></div>

<!-- Header Principal -->
<header>
  <div>
    <h1>📊 Dashboard LABS — Story Points</h1>
    <div style="font-size:13px;opacity:.7;margin-top:4px;">
      Proyecto: <strong>LABS</strong> · invera.atlassian.net
    </div>
  </div>
  <div class="header-meta">
    <span id="lastUpdatedLabel">—</span>
    <span class="cache-badge" id="cacheBadge"></span>
    <label style="font-size:12px;opacity:0.8;color:white;margin-right:-6px;">Rango:</label>
    <select id="timeRangeFilter" style="padding:4px 8px; font-size:12px; border-radius:4px; max-width:120px;">
      <option value="1d">Hoy</option>
      <option value="7d">Últimos 7 días</option>
      <option value="30d">Último mes</option>
      <option value="90d" selected>Últimos 3 meses</option>
      <option value="365d">Último año</option>
      <option value="all">Histórico completo</option>
    </select>
    <button class="refresh-btn" id="refreshBtn">↻ Actualizar</button>
  </div>
</header>

<!-- ── SECCIÓN 1: Carga de Trabajo (Pendientes) ── -->
<div class="section-header current">
  <div class="dot" style="background:#0065ff;"></div>
  <h2>Carga de Trabajo Actual</h2>
  <span id="currentTicketsLabel" style="font-size:12px;color:#5e6c84;margin-left:8px;">Tickets pendientes en el tablero</span>
  
  <div class="filter-group">
    <label>Filtrar por Dev:</label>
    <select id="devFilter"><option value="all">Cargando...</option></select>
  </div>
</div>

<div class="main">
  <div class="section-block">
    <div class="kpi-row">
      <div class="kpi progress"><div class="kpi-value" id="kpi-ip">—</div><div class="kpi-label">SP En Progreso</div><div class="kpi-sub">Trabajo en curso</div></div>
      <div class="kpi todo">   <div class="kpi-value" id="kpi-todo">—</div><div class="kpi-label">SP Por Hacer</div><div class="kpi-sub">Backlog del periodo</div></div>
      <div class="kpi members"><div class="kpi-value" id="kpi-members">—</div><div class="kpi-label">Devs con Carga</div><div class="kpi-sub">Con tickets pendientes</div></div>
    </div>
    
    <div class="charts-grid">
      <div class="chart-card">
        <h3>🔵 Pendientes por Desarrollador</h3>
        <div class="sub">Story Points con trabajo pendiente</div>
        <div style="position:relative;height:260px"><canvas id="chartCurrentState"></canvas></div>
      </div>
      <div class="chart-card">
        <h3>📢 Alertas de Salud</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>
        </div>
        <div id="noWarningsMsg" style="text-align:center; color:#36b37e; padding:40px 0; display:none;">
          ✅ No hay alertas pendientes
        </div>
      </div>
    </div>

    <div class="table-card">
      <h3>Detalle de Carga de Trabajo</h3>
      <table>
        <thead><tr><th>Desarrollador</th><th>🔵 En Progreso</th><th>⏳ Por Hacer</th><th>Total Pendiente</th><th>Carga Visual</th></tr></thead>
        <tbody id="tableCurrentState"></tbody>
      </table>
    </div>
  </div>
</div>

<!-- ── SECCIÓN 2: Rendimiento & Resultados ── -->
<div class="section-header history">
  <div class="dot" style="background:#36b37e;"></div>
  <h2>Resultados del Período</h2>
  <span style="font-size:12px;color:#5e6c84;margin-left:8px;">Story Points finalizados y velocidad</span>
  <span class="badge" id="filterBadge" style="display:none;"></span>
</div>

<div class="main">
  <div class="section-block">
    <div class="kpi-row-3">
      <div class="kpi done">   <div class="kpi-value" id="kpi-done-period">—</div><div class="kpi-label">SP Completados</div><div class="kpi-sub">en el período</div></div>
      <div class="kpi members"><div class="kpi-value" id="kpi-devs-period">—</div><div class="kpi-label">Desarrolladores</div><div class="kpi-sub">que completaron SP</div></div>
      <div class="kpi progress"><div class="kpi-value" id="kpi-avg-period">—</div><div class="kpi-label">SP promedio / dev</div><div class="kpi-sub">en el período</div></div>
    </div>
    
    <div class="charts-grid">
      <div class="chart-card">
        <h3>✅ SP Completados — por Desarrollador</h3>
        <div class="sub">Período seleccionado</div>
        <div style="position:relative;height:260px"><canvas id="chartDoneDev"></canvas></div>
      </div>
      <div class="chart-card">
        <h3>📈 Velocidad Histórica</h3>
        <div class="sub">SP completados mes a mes</div>
        <div style="position:relative;height:260px"><canvas id="chartVelocity"></canvas></div>
      </div>
    </div>

    <div class="table-card">
      <h3>SP Completados — Tabla Resumen</h3>
      <table>
        <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>

</body>
</html>