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

{% extends "withnav_template.html" %}

{% from "components/show-more.html" import show_more %}
{% from "components/table.html" import list_table, field, right_aligned_field_heading, hidden_field_heading %}
{% from "components/ajax-block.html" import ajax_block %}
{% from "components/big-number.html" import big_number %}
{% from "components/pill.html" import pill %}

{% 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 %}

    <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">
        <div class="legend-color delivered"></div>
        <div class="legend-value" id="delivered-value"></div>
      </div>
      <div class="legend-item">
        <div class="legend-color pending"></div>
        <div class="legend-value" id="pending-value"></div>
      </div>
      <div class="legend-item">
        <div class="legend-color failed"></div>
        <div class="legend-value" id="failed-value"></div>
      </div>
    </div>

    <h2 class="font-body-xl margin-top-4 margin-bottom-1">Usage</h2>
    <h3 class="margin-y-0">Daily</h3>
    <p class="margin-top-0 margin-bottom-1">Across all services</p>

    <h3 id="total-daily-usage" class="margin-0"></h3>
    <div class="chart-container usage">
      <div class="bar usage" id="dailyUsage-bar"></div>
      <div class="bar remaining" id="dailyUsageRemaining-bar"></div>
    </div>
    <div class="legend">
      <div class="legend-item">
        <div class="legend-color daily-usage"></div>
        <div class="legend-label">Daily usage</div>
        <div class="legend-value" id="daily-usage-value"></div>
      </div>
      <div class="legend-item">
        <div class="legend-color remaining"></div>
        <div class="legend-label">Remaining messages today</div>
        <div class="legend-value" id="daily-remaining-value"></div>
      </div>
    </div>

    <h3 id="total-yearly-usage" class="margin-bottom-0">This year</h3>
    <div class="chart-container usage">
      <div class="bar usage" id="yearlyUsage-bar"></div>
      <div class="bar remaining" id="yearlyUsageRemaining-bar"></div>
    </div>
    <div class="legend">
      <div class="legend-item">
        <div class="legend-color usage"></div>
        <div class="legend-label">Yearly usage</div>
        <div class="legend-value" id="yearly-usage-value"></div>
      </div>
      <div class="legend-item">
        <div class="legend-color remaining"></div>
        <div class="legend-label">Remaining yearly messages</div>
        <div class="legend-value" id="yearly-remaining-value"></div>
      </div>
    </div>

    <h2 class="font-body-xl margin-0">
      Messages sent
    </h2>
    <p class="margin-top-0">In the last seven days</p>

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

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

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

    <table class="usa-table usa-table--borderless margin-top-1 margin-bottom-5">
      <caption class="usa-sr-only">
        Daily
      </caption>
      <thead>
        <tr>
          <th scope="col">Usage</th>
          <th scope="col">Remaining</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ global_message_limit - daily_global_messages_remaining }}</td>
          <td>{{ daily_global_messages_remaining }}</td>
        </tr>
      </tbody>
    </table>

    {% if current_user.has_permissions('manage_service') %}
      <h3 class='margin-bottom-0' id="current-year"></h3>
      {{ ajax_block(partials, updates_url, 'usage') }}
      {{ show_more(
        url_for(".usage", service_id=current_service['id']),
        'See all usage'
      ) }}
    {% endif %}
  </div>

{% endblock %}