ewoooc/templates/admin/quality_trend.html

{% extends "base.html" %}

{% block title %}Caller 反饋趨勢{% endblock %}

{% block content %}
<div class="container-fluid mt-3">
  <h2 class="mb-3"><i class="fas fa-comments me-2"></i>Caller 反饋趨勢
    <small class="text-muted">過去 {{ days }} 日</small>
  </h2>

  {% if error %}
    <div class="alert alert-warning"><strong><i class="fas fa-exclamation-triangle me-1"></i></strong> {{ error }}</div>
  {% endif %}

  <form method="get" class="row g-2 mb-3">
    <div class="col-auto">
      <select name="days" class="form-select form-select-sm">
        {% for d in [7, 14, 30, 90] %}
          <option value="{{ d }}" {% if days == d %}selected{% endif %}>{{ d }} 日</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-auto"><button class="btn btn-primary btn-sm">查詢</button></div>
  </form>

  {% if recommendations %}
    <div class="card mb-3">
      <div class="card-header bg-warning"><strong><i class="fas fa-lightbulb me-2"></i>智能建議</strong></div>
      <div class="card-body">
        <ul class="mb-0">
          {% for rec in recommendations %}
            <li>
              {% if rec.action == 'review' %}<i class="fas fa-exclamation-triangle text-warning me-1"></i>{% else %}<i class="fas fa-check text-success me-1"></i>{% endif %}
              <code>{{ rec.caller }}</code>：{{ rec.reason }}
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  {% endif %}

  <div class="card">
    <div class="card-header"><strong>呼叫端 × 反饋分佈</strong>
      <small class="text-muted">（平均分數升序排列，最差先看）</small>
    </div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0">
        <thead class="table-light">
          <tr>
            <th>呼叫端</th><th class="text-end">平均</th>
            <th class="text-end"><i class="fas fa-thumbs-up text-success"></i></th>
            <th class="text-end"><i class="fas fa-thumbs-down text-danger"></i></th>
            <th class="text-end">總數</th><th>趨勢</th><th>分布</th>
          </tr>
        </thead>
        <tbody>
          {% for caller, info in trends %}
            <tr>
              <td><code>{{ caller }}</code></td>
              <td class="text-end">
                <strong>{{ "%.2f"|format(info.avg_score) }}</strong>/5
              </td>
              <td class="text-end text-success">{{ info.thumbs_up }}</td>
              <td class="text-end text-danger">{{ info.thumbs_down }}</td>
              <td class="text-end">{{ info.total_feedback }}</td>
              <td>
                {% if info.trend == 'positive' %}
                  <span class="badge bg-success"><i class="fas fa-arrow-up me-1"></i>正向</span>
                {% elif info.trend == 'negative' %}
                  <span class="badge bg-danger"><i class="fas fa-arrow-down me-1"></i>負向</span>
                {% elif info.trend == 'neutral' %}
                  <span class="badge bg-secondary"><i class="fas fa-minus me-1"></i>中性</span>
                {% else %}
                  <span class="badge bg-light text-dark"><i class="fas fa-question me-1"></i>無資料</span>
                {% endif %}
              </td>
              <td style="width: 200px;">
                <div class="progress" style="height: 8px;">
                  {% set pct = (info.avg_score / 5 * 100)|int %}
                  <div class="progress-bar
                    {% if pct >= 80 %}bg-success
                    {% elif pct >= 50 %}bg-info
                    {% else %}bg-danger{% endif %}"
                    style="width: {{ pct }}%"></div>
                </div>
              </td>
            </tr>
          {% else %}
            <tr><td colspan="7" class="text-center text-muted">無反饋資料</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <p class="text-muted mt-3"><small>
    <i class="fas fa-robot me-1"></i>Operation Ollama-First v5.0 / Phase 29 — Caller 反饋趨勢
  </small></p>
</div>
{% endblock %}