notifications-admin/app/templates/views/dashboard/dashboard.html

{% extends "withnav_template.html" %}

{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, notification_status_field, notification_carrier_field, notification_carrier_message_field %}
{% from "components/ajax-block.html" import ajax_block %}

{% block service_page_title %}
  Dashboard
{% endblock %}

{% block maincolumn_content %}

  <div class="dashboard margin-bottom-8">

    <h1 class="usa-sr-only">Dashboard</h1>
    {% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
      {% include 'views/dashboard/write-first-messages.html' %}
    {% endif %}

    {{ ajax_block(partials, updates_url, 'upcoming') }}

    <!-- <div>
      <canvas id="myChart"></canvas>
    </div> -->

    <h2 class="font-body-xl margin-0">
      SMS Activity
    </h2>
    <h3 id="total-value" class="margin-y-1"></h3>
    <div class="chart-container">
      <div class="bar delivered" id="delivered-bar"></div>
      <div class="bar pending" id="pending-bar"></div>
      <div class="bar failed" id="failed-bar"></div>
    </div>
    <div class="legend">
      <div class="legend-item">
        <button type="button" class="usa-button usa-tooltip legend-color delivered" data-position="bottom"
          data-classes="width-full tablet:width-auto"
          title="Delivered means that the message was successfully delivered to the mobile device.">
        </button>
        <div class="legend-value" id="delivered-value"></div>
      </div>
      <div class="legend-item">
        <button type="button" class="usa-button usa-tooltip legend-color pending" data-position="bottom"
          data-classes="width-full tablet:width-auto"
          title="Pending means that Notify has sent the message, but has not received the delivery status from the carrier. Messages remain in the Pending state until Notify has received the status, typically about five minutes.">
        </button>
        <div class="legend-value" id="pending-value"></div>
      </div>
      <div class="legend-item">
        <button type="button" class="usa-button usa-tooltip legend-color failed" data-position="bottom"
          data-classes="width-full tablet:width-auto"
          title="Failed means that the carrier could not deliver the message, generally because the phone is unavailable or the number is no longer active.">
        </button>
        <div class="legend-value" id="failed-value"></div>
      </div>
    </div>

    <h2 class="font-body-2xl line-height-sans-2 margin-bottom-0 margin-top-4">
      Messages sent
    </h2>

    {{ ajax_block(partials, updates_url, 'inbox') }}

    {{ ajax_block(partials, updates_url, 'totals') }}

    {{ ajax_block(partials, updates_url, 'template-statistics') }}
    <h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
    <div class="table-wrapper">
      <table class="usa-table usa-table--borderless job-table">
        <thead class="table-field-headings">
          <tr>
            <th scope="col" class="table-field-heading-first">
              <span>File name</span>
            </th>
            <th scope="col" class="table-field-heading">
              <span>Template</span>
            </th>
            <th scope="col" class="table-field-heading">
              <span>Time sent</span>
            </th>
            <th scope="col" class="table-field-heading">
              <span>Sender</span>
            </th>
            <th scope="col" class="table-field-heading">
              <span># of Recipients</span>
            </th>
            <th scope="col" class="table-field-heading">
              <span>Report</span>
            </th>
          </tr>
        </thead>
        <tbody>
          {% if job_and_notifications %}
            {% for job in job_and_notifications[:5] %}
              {% if job.job_id and job.notifications %}
                {% set notification = job.notifications[0] %}
                <tr class="table-row" id="{{ job.job_id }}">
                  <td class="table-field file-name">
                    {{ notification.job.original_file_name if notification.job.original_file_name else 'Manually entered number'}}
                    <br>
                    <a class="usa-link file-list-filename" href="{{ job.view_job_link }}">View Batch</a>
                  </td>
                  <td class="table-field template">
                    {{ notification.template.name }}
                  </td>
                  <td class="table-field time-sent">
                    {{ job.created_at | format_datetime_table }}
                  </td>
                  <td class="table-field sender">
                    {{ notification.created_by.name }}
                  </td>
                  <td class="table-field count-of-recipients">
                    {{ job.notification_count}}
                  </td>
                  <td class="table-field report">
                    {% if notification and job.time_left != "Data no longer available" %}
                      <a class="usa-link file-list-filename" href="{{ job.download_link }}">Download</a>
                      <span class="usa-hint">{{ job.time_left }}</span>
                    {% elif job %}
                      <span>{{ job.time_left }}</span>
                    {% endif %}
                  </td>
                </tr>
              {% endif %}
            {% endfor %}
          {% else %}
            <tr class="table-row">
              <td class="table-empty-message" colspan="10">No batched job messages found &thinsp;(messages are kept for {{ service_data_retention_days }} days).</td>
            </tr>
        {% endif %}
        </tbody>
      </table>
    </div>

    <h2 class="margin-top-4 margin-bottom-1">Message count</h2>
    {% if current_user.has_permissions('manage_service') %}
      <h3 class='margin-bottom-0' id="current-year"></h3>
      {{ ajax_block(partials, updates_url, 'usage') }}
      <p class="margin-top-0">During the pilot period, each service has an allowance of 250,000 message parts. Once this allowance is met, the
      application will stop delivering messages. There's no monthly charge, no setup fee, and no procurement cost.</p>
      <p class="align-with-heading-copy">
        What counts as 1 text message part?<br />
        See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a>.
      </p>
    {% endif %}
  </div>

{% endblock %}