app/templates/dashboard.html

{% extends "base.html" %} {% block title %}Your Dashboard{% endblock %} {% block
content %}
<div class="container py-4">
  {# This includes the reusable snippet to show flash messages like "Login
  successful" #} {% include '_flash_messages.html' %}

  <!-- Page Header -->
  <div class="dashboard-header">
    <h1 class="h2">Welcome, {{ current_user.username }}!</h1>
    <p class="text-muted">
      Here you can start a new voice analysis or review your test history.
    </p>
  </div>

  <!-- Primary Call-to-Action (CTA) Card -->
  <div class="card text-center border-0 shadow-sm mb-5 bg-light">
    <div class="card-body p-5">
      <h3 class="card-title h4">Ready for a New Analysis?</h3>
      <p class="card-text text-secondary">
        Begin the two-step process to get your preliminary voice analysis.
      </p>

      {# This button now points to our new '/new_test' route #}
      <a
        href="{{ url_for('main.new_test') }}"
        class="btn btn-primary btn-lg mt-3"
      >
        <i class="fas fa-vial me-2"></i>Start New Test
      </a>
    </div>
  </div>

  <!-- Past Reports Section -->
  <h3 class="h4 mb-3">Your Test History</h3>
  <div class="card shadow-sm">
    <div class="card-body p-0">
      {# p-0 to make the table flush with the card edges #} {% if reports %}
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead>
            <tr>
              <th
                scope="col"
                class="ps-4"
              >
                Date
              </th>
              <th scope="col">Age</th>
              <th scope="col">Gender</th>
              <th scope="col">Result</th>
              <th
                scope="col"
                class="pe-4"
              >
                Note
              </th>
            </tr>
          </thead>
          <tbody>
            {% for report in reports %}
            <tr>
              <td class="ps-4">
                <div class="fw-bold">
                  {{ report.timestamp.strftime('%B %d, %Y') }}
                </div>
                <div class="small text-muted">
                  {{ report.timestamp.strftime('%I:%M %p') }} UTC
                </div>
              </td>
              <td>{{ report.age }}</td>
              <td>{{ report.gender }}</td>
              <td>
                <span
                  class="badge fs-6 rounded-pill {% if 'Positive' in report.final_result %} bg-warning text-dark{% elif 'Negative' in report.final_result %}bg-success{% else %}bg-secondary{% endif %}"
                >
                  {{ report.final_result }}
                </span>
              </td>
              <td class="text-muted small pe-4">
                {% if 'Override' in report.final_result %} Initial Prediction
                was 'Positive' Prediction overridden by age criteria. {% else %}
                - {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="text-center p-5">
        <p class="text-muted">
          You have no past reports. Click "Start New Test" to begin.
        </p>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}