worker-service 0.2.0

Worker Service - A worker administration microservice that interoperates with the worker-matcher crate
{% extends "layout.html.tera" %}

{% block title %}Data quality — {{ record.label }} — {{ app_display }}{% endblock title %}

{% block content %}
<nav class="breadcrumb-nav" aria-label="Breadcrumb">
  <ol class="breadcrumb-list" aria-label="Breadcrumb trail">
    <li class="breadcrumb-list-item"><a href="/">Home</a></li>
    <li class="breadcrumb-list-item"><a href="/{{ entity_plural }}">{{ entity_plural | capitalize }}</a></li>
    <li class="breadcrumb-list-item"><a href="/{{ entity_plural }}/{{ record.id }}">{{ record.label }}</a></li>
    <li class="breadcrumb-list-item" aria-current="page">Data quality</li>
  </ol>
</nav>

<section aria-label="Data quality score">
  <h2>Data quality &mdash; {{ record.label }}</h2>

  <div class="information-callout" aria-label="Data quality explainer">
    <p>
      Quality is the share of {{ entity_singular }} fields that are populated
      and pass validation. A perfect record has identifiers, contacts, addresses,
      a verified document, and (where applicable) consent on file.
    </p>
  </div>

  <div class="card" role="region" aria-label="Overall quality">
    <h3>Overall</h3>
    <p>
      <span class="five-star-rating-view"
            role="img"
            aria-label="Overall quality: {{ overall.stars }} of 5 stars">
        {% for i in range(end=5) %}{% if i < overall.stars %}★{% else %}☆{% endif %}{% endfor %}
      </span>
      <span class="hint" aria-label="Star count">{{ overall.stars }} / 5</span>
    </p>
    <p>
      <span class="five-face-rating-view"
            role="img"
            aria-label="Satisfaction face: {{ overall.face }}">
        {{ overall.face_emoji }}
      </span>
      <span class="hint" aria-label="Face descriptor">{{ overall.face }}</span>
    </p>
    <p>
      <strong>{{ overall.score_pct }}%</strong>
      complete &middot;
      <meter class="meter"
             aria-label="Overall completeness {{ overall.score_pct }} percent"
             min="0"
             max="100"
             low="40"
             high="80"
             optimum="100"
             value="{{ overall.score_pct }}">{{ overall.score_pct }}%</meter>
    </p>
  </div>

  <h3>Per-component breakdown</h3>
  <table class="data-table" aria-label="Per-component data quality">
    <thead class="data-table-head">
      <tr class="data-table-row">
        <th class="data-table-th" scope="col">Component</th>
        <th class="data-table-th" scope="col">Score</th>
        <th class="data-table-th" scope="col">Stars</th>
        <th class="data-table-th" scope="col">Notes</th>
      </tr>
    </thead>
    <tbody class="data-table-body">
      {% for c in components %}
        <tr class="data-table-row">
          <td class="data-table-td"><strong>{{ c.label }}</strong></td>
          <td class="data-table-td">
            <meter class="meter"
                   aria-label="{{ c.label }} score {{ c.score_pct }} percent"
                   min="0" max="100" low="40" high="80" optimum="100"
                   value="{{ c.score_pct }}">{{ c.score_pct }}%</meter>
            <span>{{ c.score_pct }}%</span>
          </td>
          <td class="data-table-td">
            <span class="five-star-rating-view"
                  role="img"
                  aria-label="{{ c.label }}: {{ c.stars }} of 5 stars">
              {% for i in range(end=5) %}{% if i < c.stars %}★{% else %}☆{% endif %}{% endfor %}
            </span>
          </td>
          <td class="data-table-td">{{ c.note }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  {% if suggestions and suggestions | length > 0 %}
    <h3>Recommended improvements</h3>
    <ol class="summary-list" aria-label="Recommended improvements">
      {% for s in suggestions %}
        <li class="summary-list-item">
          <dl>
            <dt>
              {% if s.severity == "high" %}
                <span class="badge" data-type="error" aria-label="High priority">High</span>
              {% elif s.severity == "medium" %}
                <span class="badge" data-type="warning" aria-label="Medium priority">Medium</span>
              {% else %}
                <span class="badge" data-type="info" aria-label="Low priority">Low</span>
              {% endif %}
              {{ s.title }}
            </dt>
            <dd>
              {{ s.body }}
              {% if s.action_label and s.action_href %}
                &mdash; <a href="{{ s.action_href }}" aria-label="{{ s.action_label }}">{{ s.action_label }}</a>
              {% endif %}
            </dd>
          </dl>
        </li>
      {% endfor %}
    </ol>
  {% endif %}

  <div class="action-bar" role="toolbar" aria-label="Quality actions">
    <a class="button"
       href="/{{ entity_plural }}/{{ record.id }}/edit"
       aria-label="Edit {{ entity_singular }} to improve quality">Edit record</a>
    <a class="button"
       href="/{{ entity_plural }}/{{ record.id }}"
       aria-label="Back to {{ entity_singular }} detail">Back</a>
  </div>
</section>
{% endblock content %}