Add usage to the dashboard

Takes the number of emails and SMS fragments sent from:
https://github.com/alphagov/notifications-api/pull/273

Using these numbers it’s possible to show:
- how much of your allowance is left
- or how much you have spent

For now the allowance and rates are hard coded.

Only for users that have manage service.

app/templates/components/big-number.html

@@ -1,7 +1,11 @@
-{% macro big_number(number, label, label_link=None) %}
+{% macro big_number(number, label, label_link=None, currency='', right_aligned=False) %}
   <div class="big-number{% if right_aligned %}-right-aligned{% endif %}">
     {% if number is number %}
-      {{ "{:,}".format(number) }}
+      {% if currency %}
+        {{ "{}{:,.2f}".format(currency, number) }}
+      {% else %}
+        {{ "{}{:,}".format(currency, number) }}
+      {% endif %}
     {% else %}
       {{ number }}
     {% endif %}

app/templates/views/dashboard/all-template-statistics.html

@@ -6,7 +6,7 @@
 
 {% block maincolumn_content %}
   <h1 class='heading-large'>
-  	Templates used this year
+  	Templates sent this year
   </h1>
   <p>
 	1 April 2016 to date

app/templates/views/dashboard/dashboard.html

@@ -6,6 +6,8 @@
 
 {% block maincolumn_content %}
 
+  <div class="dashboard">
+
     {% if not templates and current_user.has_permissions(['send_texts', 'send_emails', 'send_letters'], any_=True) %}
       {% include 'views/dashboard/get-started.html' %}
     {% elif current_user.has_permissions([
@@ -20,4 +22,6 @@
 
     {% include 'views/dashboard/today.html' %}
 
+  </div>
+
 {% endblock %}

app/templates/views/dashboard/today.html

@@ -1,4 +1,4 @@
-{% from "components/big-number.html" import big_number_with_status %}
+{% from "components/big-number.html" import big_number, big_number_with_status %}
 
 <div
   data-module="update-content"
@@ -38,6 +38,36 @@
     {% include 'views/dashboard/template-statistics.html' %}
   {% endwith %}
   <p class='table-show-more-link'>
-    <a href="{{ url_for('.template_history', service_id=current_service.id) }}">See all templates used this year</a>
+    <a href="{{ url_for('.template_history', service_id=current_service.id) }}">See all templates sent this year</a>
   </p>
+
+  {% if current_user.has_permissions(['manage_settings'], admin_override=True) %}
+    <h2 class='heading-medium' style="margin-top: 30px;">This year</h2>   
+
+    <div class='grid-row'>
+      <div class='column-half'>
+        <div class="keyline-block">
+          {{ big_number("Unlimited", 'free email allowance', right_aligned=True) }}
+        </div>
+      </div>
+      <div class='column-half'>
+        <div class="keyline-block">
+          {% if sms_chargeable %}
+            {{ big_number(
+              (sms_chargeable * sms_rate),
+              'spent on text messages',
+              currency="£",
+              right_aligned=True
+            ) }}
+          {% else %}
+            {{ big_number(sms_allowance_remaining, 'free text messages left', right_aligned=True) }}
+          {% endif %}
+        </div>
+      </div>
+    </div>
+    <div class="keyline-block-show-more-link">
+      <a href="{{ url_for(".usage", service_id=current_service['id']) }}">See usage</a>
+    </div>
+  {% endif %}
+
 </div>

app/templates/views/usage.html

@@ -0,0 +1,67 @@
+{% from "components/big-number.html" import big_number %}
+
+{% extends "withnav_template.html" %}
+
+{% block page_title %}
+  Billing – GOV.UK Notify
+{% endblock %}
+
+{% block maincolumn_content %}
+
+    <div class='grid-row'>
+      <div class='column-half'>
+        <h2 class='heading-large'>Usage</h2>
+      </div>
+      <div class='column-half'>
+        <span class="align-with-heading-copy">1 April 2016 to date</span>
+      </div>
+    </div>
+
+    <div class='grid-row'>
+      <div class='column-half'>
+        <h2 class='heading-small'>Emails</h2>
+        <div class="keyline-block">
+          {{ big_number(emails_sent, 'sent', right_aligned=True) }}
+          {{ big_number("Unlimited", 'free allowance', right_aligned=True) }}
+        </div>
+      </div>
+      <div class='column-half'>
+        <h2 class='heading-small'>Text messages</h2>
+        <div class="keyline-block">
+          {{ big_number(sms_sent, 'sent', right_aligned=True) }}
+          {{ big_number(sms_free_allowance, 'free allowance', right_aligned=True) }}
+          {{ big_number(sms_allowance_remaining, 'free allowance remaining', right_aligned=True) }}
+          {% if sms_chargeable %}
+            {{ big_number(
+              sms_chargeable,
+              'at {:.1f}p per message'.format(sms_rate * 100),
+              right_aligned=True
+            ) }}
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    <div class='grid-row'>
+      <div class='column-half'>
+        <div class="keyline-block">
+          &nbsp;
+        </div>
+      </div>
+      <div class='column-half'>
+        <div class="keyline-block bottom-gutter">
+          {{ big_number(
+            (sms_chargeable * sms_rate),
+            'spent',
+            currency="£",
+            right_aligned=True
+          ) }}
+        </div>
+        <p>
+          What counts as 1 text message?<br />
+          See <a href="{{ url_for('.pricing') }}">pricing</a>.
+        </p>
+      </div>
+    </div>
+
+{% endblock %}