hiffi-artist-intelligence/data/quality_dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hiffi Artist Intelligence - T4 Quality Dashboard</title>
  <style>
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0f172a; color: #f8fafc; margin: 0; padding: 24px; }
    .container { max-width: 1100px; margin: 0 auto; }
    h1 { font-size: 26px; margin-bottom: 4px; color: #38bdf8; }
    .timestamp { color: #94a3b8; font-size: 13px; margin-bottom: 24px; }
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
    .card { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 16px; }
    .card-title { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
    .card-value { font-size: 24px; font-weight: bold; margin-top: 6px; color: #f1f5f9; }
    .card-sub { font-size: 12px; color: #10b981; margin-top: 4px; }
    table { width: 100%; border-collapse: collapse; margin-bottom: 28px; background: #1e293b; border-radius: 8px; overflow: hidden; }
    th, td { padding: 12px 16px; text-align: left; font-size: 13px; border-bottom: 1px solid #334155; }
    th { background: #0f172a; color: #94a3b8; font-weight: 600; text-transform: uppercase; font-size: 11px; }
    tr:last-child td { border-bottom: none; }
    .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
    .badge-icon { background: #f59e0b20; color: #f59e0b; border: 1px solid #f59e0b40; }
    .badge-pass { background: #10b98120; color: #10b981; border: 1px solid #10b98140; }
  </style>
</head>
<body>
  <div class="container">
    <h1>T4 – Quality & Authenticity Dashboard</h1>
    <div class="timestamp">Generated: 2026-11-10 15:33:57 | Target: hiffi_catalog.db</div>

    <div class="grid">
      <div class="card">
        <div class="card-title">Curated Cohort</div>
        <div class="card-value">500 Artists</div>
        <div class="card-sub">Strict 50 / 150 / 300 Split</div>
      </div>
      <div class="card">
        <div class="card-title">Commercial Catalog</div>
        <div class="card-value">17,135 Artists</div>
        <div class="card-sub">Dense Ranks #1 to #17,135</div>
      </div>
      <div class="card">
        <div class="card-title">Pure Sales Volume</div>
        <div class="card-value">9.58B Units</div>
        <div class="card-sub">0.0 Synthetic Streaming SEA</div>
      </div>
      <div class="card">
        <div class="card-title">Snapshot Telemetry</div>
        <div class="card-value">6,000 Records</div>
        <div class="card-sub">100% 7d & 30d Velocity</div>
      </div>
    </div>

    <h2 style="font-size: 18px; color: #e2e8f0; margin-bottom: 12px;">Data Pipeline Before & After Transformation</h2>
    <table>
      <thead>
        <tr>
          <th>Pipeline Dimension</th>
          <th>Raw Ingested State (Before)</th>
          <th>Production Pipeline State (After)</th>
          <th>Validation Invariant</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><strong>Cohort Scope</strong></td>
          <td>501 unconstrained artists (drift detected)</td>
          <td><strong>Strict 500 verified artists</strong></td>
          <td>T1: 50, T2: 150, T3: 300, T4: 0</td>
          <td><span class="badge badge-pass">PASSED</span></td>
        </tr>
        <tr>
          <td><strong>Avatar Integrity</strong></td>
          <td>Scattered external URLs, missing images</td>
          <td><strong>100% local verified portraits</strong></td>
          <td>image_verified_flag = 1</td>
          <td><span class="badge badge-pass">PASSED</span></td>
        </tr>
        <tr>
          <td><strong>Commercial Sales</strong></td>
          <td>Synthetic streaming formulas (SEA/TEA)</td>
          <td><strong>100% empirical pure sales</strong></td>
          <td>streaming_eas == 0.0</td>
          <td><span class="badge badge-pass">PASSED</span></td>
        </tr>
        <tr>
          <td><strong>Sales Discrepancy</strong></td>
          <td>530 component math mismatches</td>
          <td><strong>0 mismatches; exact CSV parity</strong></td>
          <td>albums + singles == total</td>
          <td><span class="badge badge-pass">PASSED</span></td>
        </tr>
        <tr>
          <td><strong>Catalog Ranking</strong></td>
          <td>Unindexed raw table rows</td>
          <td><strong>Dense sequential ranks (1–17,135)</strong></td>
          <td>Zero gaps, zero duplicates</td>
          <td><span class="badge badge-pass">PASSED</span></td>
        </tr>
        <tr>
          <td><strong>Velocity Telemetry</strong></td>
          <td>Static snapshot views</td>
          <td><strong>6,000 historical delta points</strong></td>
          <td>7d and 30d rolling deltas</td>
          <td><span class="badge badge-pass">PASSED</span></td>
        </tr>
      </tbody>
    </table>

    <h2 style="font-size: 18px; color: #e2e8f0; margin-bottom: 12px;">Top 5 Cohort Preview</h2>
    <table>
      <thead>
        <tr>
          <th>Rank</th>
          <th>Artist</th>
          <th>Tier</th>
          <th>Spotify Listeners</th>
          <th>YT Subscribers</th>
          <th>7d Velocity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>#1</td>
          <td><strong>Drake</strong></td>
          <td><span class="badge badge-icon">TIER_1_ICON</span></td>
          <td>94,140,384</td>
          <td>33,200,000</td>
          <td>+0.37%</td>
        </tr>
        <tr>
          <td>#2</td>
          <td><strong>Eminem</strong></td>
          <td><span class="badge badge-icon">TIER_1_ICON</span></td>
          <td>73,189,445</td>
          <td>67,400,000</td>
          <td>+0.37%</td>
        </tr>
        <tr>
          <td>#3</td>
          <td><strong>Nicki Minaj</strong></td>
          <td><span class="badge badge-icon">TIER_1_ICON</span></td>
          <td>45,450,181</td>
          <td>28,500,000</td>
          <td>+0.36%</td>
        </tr>
        <tr>
          <td>#4</td>
          <td><strong>Travis Scott</strong></td>
          <td><span class="badge badge-icon">TIER_1_ICON</span></td>
          <td>60,293,812</td>
          <td>20,800,000</td>
          <td>+0.36%</td>
        </tr>
        <tr>
          <td>#5</td>
          <td><strong>Post Malone</strong></td>
          <td><span class="badge badge-icon">TIER_1_ICON</span></td>
          <td>61,999,914</td>
          <td>29,100,000</td>
          <td>+0.36%</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>