====================================
Development Quality Dashboard Report
====================================

Key Performance Metrics
-----------------------

.. raw:: html

   <div class="card-grid">
      
          <div class="card">
              <div class="card-title">Response Time</div>
              <div class="card-content">245ms</div>
              <div class="card-target">Target: <300ms <span class="card-status-pass">●</span></div>
          </div>
                
          <div class="card">
              <div class="card-title">Throughput</div>
              <div class="card-content">1200req/s</div>
              <div class="card-target">Target: >1000 <span class="card-status-pass">●</span></div>
          </div>
                
          <div class="card">
              <div class="card-title">Error Rate</div>
              <div class="card-content">0.02%</div>
              <div class="card-target">Target: <0.1% <span class="card-status-fail">●</span></div>
          </div>
                
          <div class="card">
              <div class="card-title">Memory Usage</div>
              <div class="card-content">78%</div>
              <div class="card-target">Target: <80% <span class="card-status-pass">●</span></div>
          </div>
             </div>

Test Coverage
-------------

.. raw:: html

   <div class="card">
      <div class="card-title">Overall Test Coverage</div>
      
          <div class="progress-bar-container">
              <div class="progress-bar-label">
                  <span>Unit Tests</span>
                  <span>82%</span>
              </div>
              <div class="progress-bar-bg">
                  <div class="progress-bar-fill" style="width: 82.0%;"></div>
              </div>
          </div>
                
          <div class="progress-bar-container">
              <div class="progress-bar-label">
                  <span>Integration</span>
                  <span>74%</span>
              </div>
              <div class="progress-bar-bg">
                  <div class="progress-bar-fill" style="width: 74.0%;"></div>
              </div>
          </div>
                
          <div class="progress-bar-container">
              <div class="progress-bar-label">
                  <span>E2E Tests</span>
                  <span>65%</span>
              </div>
              <div class="progress-bar-bg">
                  <div class="progress-bar-fill" style="width: 65.0%;"></div>
              </div>
          </div>
                
          <div class="progress-bar-container">
              <div class="progress-bar-label">
                  <span>API Tests</span>
                  <span>91%</span>
              </div>
              <div class="progress-bar-bg">
                  <div class="progress-bar-fill" style="width: 91.0%;"></div>
              </div>
          </div>
             </div>

Code Quality Trends
-------------------

.. raw:: html

   <div class="card">
      <div class="card-title">Quality Score Over Versions</div>
      <div class="bar-chart-container">
              <div class="bar-chart-bar" style="height: 72.5%;">
                  <div class="value">58</div>
                  <div class="label">v2.1</div>
              </div>
              
              <div class="bar-chart-bar" style="height: 81.25%;">
                  <div class="value">65</div>
                  <div class="label">v2.2</div>
              </div>
              
              <div class="bar-chart-bar" style="height: 85.0%;">
                  <div class="value">68</div>
                  <div class="label">v2.3</div>
              </div>
              
              <div class="bar-chart-bar" style="height: 90.0%;">
                  <div class="value">72</div>
                  <div class="label">v2.4</div>
              </div>
              
              <div class="bar-chart-bar" style="height: 93.75%;">
                  <div class="value">75</div>
                  <div class="label">v2.5</div>
              </div>
              
              <div class="bar-chart-bar" style="height: 100.0%;">
                  <div class="value">80</div>
                  <div class="label">v2.6</div>
              </div>
              </div>   </div>

Action Items
------------

.. raw:: html

   <div class="card">
      <div class="card-title">Pending Action Items</div>
      <ul class="styled-list">
         <li>Address medium priority security findings by 2024-10-01</li>
         <li>Increase E2E test coverage to 75% by 2024-10-15</li>
         <li>Complete SOC 2 compliance documentation</li>
         <li>Resolve performance regression in data processing</li>
      </ul>
   </div>