122 lines
4.2 KiB
HTML
122 lines
4.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Satisfaction Report{% endblock %}
|
|
{% block page_title %}Satisfaction Report{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- KPI row -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-sm-4">
|
|
<div class="stat-card">
|
|
<div class="stat-icon" style="background:rgba(251,191,36,.1);color:#f59e0b;">
|
|
<i class="bi bi-star-fill"></i>
|
|
</div>
|
|
<div>
|
|
<div class="stat-value">
|
|
{% if avg_rating %}{{ avg_rating }} <span style="font-size:16px;">/ 5</span>{% else %}—{% endif %}
|
|
</div>
|
|
<div class="stat-label">Average Rating</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="stat-card">
|
|
<div class="stat-icon" style="background:rgba(37,99,235,.1);color:var(--accent);">
|
|
<i class="bi bi-clipboard-check"></i>
|
|
</div>
|
|
<div>
|
|
<div class="stat-value">{{ total }}</div>
|
|
<div class="stat-label">Responses Received</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="stat-card">
|
|
<div class="stat-icon" style="background:rgba(100,116,139,.1);color:var(--muted);">
|
|
<i class="bi bi-hourglass-split"></i>
|
|
</div>
|
|
<div>
|
|
<div class="stat-value">{{ pending }}</div>
|
|
<div class="stat-label">Awaiting Response</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rating distribution -->
|
|
{% if total %}
|
|
<div class="card mb-4">
|
|
<div class="card-header"><i class="bi bi-bar-chart-fill me-2"></i>Rating Distribution</div>
|
|
<div class="card-body">
|
|
{% for star in [5,4,3,2,1] %}
|
|
{% set count = dist[star] %}
|
|
{% set pct = ((count / total) * 100)|round(1) if total else 0 %}
|
|
<div class="d-flex align-items-center gap-3 mb-2">
|
|
<div style="width:60px;text-align:right;font-size:13px;font-weight:600;color:var(--text2);flex-shrink:0;">
|
|
{{ star }} ★
|
|
</div>
|
|
<div style="flex:1;background:var(--surface2);border-radius:4px;height:18px;overflow:hidden;">
|
|
<div style="width:{{ pct }}%;height:100%;background:{% if star >= 4 %}var(--success){% elif star == 3 %}var(--warning){% else %}var(--danger){% endif %};border-radius:4px;transition:width .4s;"></div>
|
|
</div>
|
|
<div style="width:70px;font-size:12px;color:var(--muted);font-family:'Space Mono',monospace;">
|
|
{{ count }} ({{ pct }}%)
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Individual responses -->
|
|
<div class="card">
|
|
<div class="card-header"><i class="bi bi-chat-square-text me-2"></i>Individual Responses</div>
|
|
<div class="card-body p-0">
|
|
{% if surveys %}
|
|
<table class="table mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Ticket</th>
|
|
<th>Submitted By</th>
|
|
<th>Rating</th>
|
|
<th>Comment</th>
|
|
<th>Submitted</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for s in surveys %}
|
|
<tr>
|
|
<td>
|
|
<a href="{{ url_for('tickets.ticket_detail', ticket_id=s.ticket_id) }}"
|
|
class="mono" style="font-size:11px;color:var(--accent3);">
|
|
{{ s.ticket.ticket_number }}
|
|
</a>
|
|
<div style="font-size:12px;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
|
|
{{ s.ticket.title }}
|
|
</div>
|
|
</td>
|
|
<td style="font-size:13px;">{{ s.user.full_name }}</td>
|
|
<td>
|
|
<span style="font-size:18px;color:#f59e0b;">
|
|
{% for i in range(s.rating) %}★{% endfor %}{% for i in range(5 - s.rating) %}<span style="color:var(--border2);">★</span>{% endfor %}
|
|
</span>
|
|
</td>
|
|
<td style="font-size:12px;color:var(--muted);max-width:220px;">
|
|
{{ s.comment or '—' }}
|
|
</td>
|
|
<td style="font-size:11px;color:var(--muted);">
|
|
{{ s.submitted_at | localtime("%b %d, %Y") }}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<div class="p-5 text-center" style="color:var(--muted);">
|
|
<i class="bi bi-star" style="font-size:40px;display:block;margin-bottom:12px;"></i>
|
|
No satisfaction responses yet. Surveys are sent automatically when tickets are resolved.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|