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') }}

    <!-- <canvas id="myChart" data-service-id="{{ service_id }}"></canvas> -->

    <h2 class="font-body-2xl margin-top-0">{{ current_service.name }} Dashboard</h2>

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

    <!-- <button id="sevenDaysButton">7 Days</button>
        <canvas id="myChart" data-service-id="{{ service_id }}"></canvas> -->
    {{ ajax_block(partials, updates_url, 'inbox') }}

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

    {{ ajax_block(partials, updates_url, 'template-statistics') }}

    <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">
      Activity snapshot
    </h2>
    <div id="chartsArea">
      <form class="usa-form">
        <label class="usa-label" for="options">Account</label>
        <select class="usa-select margin-bottom-2" name="options" id="options">
          <option value>- Select -</option>
          <option value="service" selected>{{ current_service.name }}</option>
          <option value="individual">{{ current_user.name }}</option>
        </select>
      </form>
      <div id="Weekly">
        <div class="chart-header">
          <div class="chart-subtitle">{{ current_service.name }} - Last 7 Days</div>
          <div class="chart-legend"></div>
        </div>
        <div class="chart-container" id="weeklyChart" data-service-id="{{ service_id }}"></div>
        <table id="weeklyTable" class="usa-sr-only"></table>
      </div>
    </div>
    <div id="message"></div>

    <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[:12] 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 %}