Include letters on monthly messages sent

app/templates/components/table.html

@@ -1,6 +1,6 @@
 {% from "components/big-number.html" import big_number %}
 
-{% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True) -%}
+{% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
   <table class="table table-font-xsmall">
     <caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}">
       {{ caption }}
@@ -8,7 +8,7 @@
     <thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
       <tr>
         {% for field_heading in field_headings %}
-          <th scope="col" class="table-field-heading{% if loop.first %}-first{% endif %}">
+          <th scope="col" class="table-field-heading{% if loop.first %}-first{% endif %}" width="{% if equal_length %}{{ (100 / field_headings|length)|int }}%{% endif %}">
             {% if field_headings_visible %}
               {{ field_heading }}
             {% else %}
@@ -24,10 +24,10 @@
   </table>
 {%- endmacro %}
 
-{% macro list_table(items, caption='', empty_message='', field_headings=[], field_headings_visible=True, caption_visible=True) -%}
+{% macro list_table(items, caption='', empty_message='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
   {% set parent_caller = caller %}
 
-  {% call mapping_table(caption, field_headings, field_headings_visible, caption_visible) %}
+  {% call mapping_table(caption, field_headings, field_headings_visible, caption_visible, equal_length) %}
     {% for item in items %}
       {% call row(item.id) %}
         {{ parent_caller(item, loop.index + 1) }}

app/templates/views/dashboard/monthly.html

@@ -33,8 +33,10 @@
           'Month',
           'Emails',
           'Text messages',
+          'letters',
         ],
-        field_headings_visible=False
+        field_headings_visible=False,
+        equal_length=True
       ) %}
         {% if not month.future %}
           {% call row_heading() %}
@@ -42,7 +44,8 @@
           {% endcall %}
           {% for counts, template_type in [
             (month.email_counts, 'email'),
-            (month.sms_counts, 'sms')
+            (month.sms_counts, 'sms'),
+            (month.letter_counts, 'letter')
           ] %}
             {% call field(align='left') %}
               {{ big_number(

tests/app/main/views/test_dashboard.py

@@ -419,6 +419,36 @@ def test_anyone_can_see_monthly_breakdown(
     )
 
 
+def test_monthly_shows_letters_in_breakdown(
+    client_request,
+    service_one,
+    mock_get_monthly_notification_stats,
+):
+    page = client_request.get(
+        'main.monthly',
+        service_id=service_one['id']
+    )
+
+    columns = page.select('.table-field-center-aligned .big-number-label')
+
+    assert normalize_spaces(columns[0].text) == 'emails'
+    assert normalize_spaces(columns[1].text) == 'text messages'
+    assert normalize_spaces(columns[2].text) == 'letters'
+
+
+def test_monthly_has_equal_length_tables(
+    client_request,
+    service_one,
+    mock_get_monthly_notification_stats,
+):
+    page = client_request.get(
+        'main.monthly',
+        service_id=service_one['id']
+    )
+
+    assert page.select_one('.table-field-headings th').get('width') == "25%"
+
+
 @freeze_time("2016-01-01 11:09:00.061258")
 def test_should_show_upcoming_jobs_on_dashboard(
     logged_in_client,