Merge pull request #1421 from GSA/notify-admin-1157

point to staging for e2e

.ds.baseline

@@ -133,15 +133,7 @@
         "filename": ".github/workflows/checks.yml",
         "hashed_secret": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
         "is_verified": false,
-        "line_number": 61,
-        "is_secret": false
-      },
-      {
-        "type": "Basic Auth Credentials",
-        "filename": ".github/workflows/checks.yml",
-        "hashed_secret": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
-        "is_verified": false,
-        "line_number": 95,
+        "line_number": 66,
         "is_secret": false
       }
     ],
@@ -169,7 +161,7 @@
         "filename": "app/config.py",
         "hashed_secret": "577a4c667e4af8682ca431857214b3a920883efc",
         "is_verified": false,
-        "line_number": 117,
+        "line_number": 118,
         "is_secret": false
       }
     ],
@@ -407,23 +399,13 @@
         "is_secret": false
       }
     ],
-    "app/main/views/sign_in.py": [
-      {
-        "type": "Private Key",
-        "filename": "app/main/views/sign_in.py",
-        "hashed_secret": "1348b145fa1a555461c1b790a2f66614781091e9",
-        "is_verified": false,
-        "line_number": 27,
-        "is_secret": false
-      }
-    ],
     "app/templates/new/components/head.html": [
       {
         "type": "Base64 High Entropy String",
         "filename": "app/templates/new/components/head.html",
         "hashed_secret": "ee5048791fc7ff45a1545e24f85bec3317371327",
         "is_verified": false,
-        "line_number": 34,
+        "line_number": 33,
         "is_secret": false
       }
     ],
@@ -527,7 +509,7 @@
         "filename": "tests/app/main/views/organizations/test_organization_invites.py",
         "hashed_secret": "bdbb156d25d02fd7792865824201dda1c60f4473",
         "is_verified": false,
-        "line_number": 265,
+        "line_number": 274,
         "is_secret": false
       },
       {
@@ -535,7 +517,7 @@
         "filename": "tests/app/main/views/organizations/test_organization_invites.py",
         "hashed_secret": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
         "is_verified": false,
-        "line_number": 273,
+        "line_number": 282,
         "is_secret": false
       }
     ],
@@ -545,7 +527,7 @@
         "filename": "tests/app/main/views/test_accept_invite.py",
         "hashed_secret": "07f0a6c13923fc3b5f0c57ffa2d29b715eb80d71",
         "is_verified": false,
-        "line_number": 607,
+        "line_number": 643,
         "is_secret": false
       }
     ],
@@ -565,7 +547,7 @@
         "filename": "tests/app/main/views/test_register.py",
         "hashed_secret": "bdbb156d25d02fd7792865824201dda1c60f4473",
         "is_verified": false,
-        "line_number": 116,
+        "line_number": 122,
         "is_secret": false
       },
       {
@@ -573,7 +555,7 @@
         "filename": "tests/app/main/views/test_register.py",
         "hashed_secret": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
         "is_verified": false,
-        "line_number": 192,
+        "line_number": 201,
         "is_secret": false
       },
       {
@@ -581,7 +563,7 @@
         "filename": "tests/app/main/views/test_register.py",
         "hashed_secret": "bb5b7caa27d005d38039e3797c3ddb9bcd22c3c8",
         "is_verified": false,
-        "line_number": 260,
+        "line_number": 274,
         "is_secret": false
       }
     ],
@@ -591,7 +573,7 @@
         "filename": "tests/app/main/views/test_sign_in.py",
         "hashed_secret": "8b8b69116ee882b5e987e330f55db81aba0636f9",
         "is_verified": false,
-        "line_number": 90,
+        "line_number": 97,
         "is_secret": false
       }
     ],
@@ -601,7 +583,7 @@
         "filename": "tests/app/main/views/test_two_factor.py",
         "hashed_secret": "dc66ad927c29e31c6c374231f57a4684b0687bfe",
         "is_verified": false,
-        "line_number": 267,
+        "line_number": 290,
         "is_secret": false
       }
     ],
@@ -611,7 +593,7 @@
         "filename": "tests/app/main/views/test_user_profile.py",
         "hashed_secret": "8072d7aad32964ec43fbcb699c75dc38890792f7",
         "is_verified": false,
-        "line_number": 350,
+        "line_number": 336,
         "is_secret": false
       },
       {
@@ -619,7 +601,7 @@
         "filename": "tests/app/main/views/test_user_profile.py",
         "hashed_secret": "4c9dbb972da179e4f66f023eaa5fb9451d835030",
         "is_verified": false,
-        "line_number": 351,
+        "line_number": 337,
         "is_secret": false
       }
     ],
@@ -702,5 +684,5 @@
       }
     ]
   },
-  "generated_at": "2024-06-11T22:26:18Z"
+  "generated_at": "2024-09-03T17:36:57Z"
 }

.github/dependabot.yml

@@ -3,14 +3,22 @@
 # Please see the documentation for all configuration options:
 # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 
-version: 3
+version: 2
 updates:
   - package-ecosystem: "pip" # See documentation for possible values
     directory: "/" # Location of package manifests
     schedule:
       interval: "daily"
-  - package-ecosystem: 'npm'
-    directory: '/'
+    assignees:
+      - "A-Shumway42"
+    reviewers:
+      - "A-Shumway42"
+  - package-ecosystem: "npm"
+    directory: "/"
     schedule:
-      interval: 'daily'
-
+      interval: "daily"
+    versioning-strategy: increase
+    assignees:
+      - "alexjanousekGSA"
+    reviewers:
+      - "alexjanousekGSA"

.github/workflows/checks.yml

@@ -23,6 +23,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22.3.0"
+      - name: Install dependencies
+        run: npm install
       - uses: ./.github/actions/setup-project
       - uses: jwalton/gh-find-current-pr@v1
         id: findPr
@@ -38,8 +44,6 @@ jobs:
         run: poetry run isort --check-only ./app ./tests
       - name: Check dead code
         run: make dead-code
-      - name: Run js lint
-        run: npm run lint
       - name: Run js tests
         run: npm test
       - name: Run py tests with coverage
@@ -48,6 +52,7 @@ jobs:
         run: poetry run coverage report --fail-under=90
 
   end-to-end-tests:
+    if: ${{ github.actor != 'dependabot[bot]' }}
     permissions:
       checks: write
       pull-requests: write
@@ -78,41 +83,25 @@ jobs:
         ports:
           # Maps tcp port 6379 on service container to the host
           - 6379:6379
+
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup-project
       - uses: jwalton/gh-find-current-pr@v1
         id: findPr
-      - name: Clone API
-        uses: actions/checkout@v4
-        with:
-         repository: GSA/notifications-api
-         path: 'notifications-api'
-      - name: Install API dependencies
-        working-directory: 'notifications-api'
-        run: make bootstrap
-        env:
-          DATABASE_URL: postgresql://user:password@localhost:5432/test_notification_api
-          SQLALCHEMY_DATABASE_TEST_URI: postgresql://user:password@localhost:5432/test_notification_api
-          REDIS_URL: redis://localhost:6379
-          NOTIFY_E2E_TEST_EMAIL: ${{ secrets.NOTIFY_E2E_TEST_EMAIL }}
-          NOTIFY_E2E_TEST_PASSWORD: ${{ secrets.NOTIFY_E2E_TEST_PASSWORD }}
-          NOTIFY_ENVIRONMENT: development
-      - name: Run API server
-        working-directory: 'notifications-api'
-        run: make run-procfile &
-        env:
-          DATABASE_URL: postgresql://user:password@localhost:5432/test_notification_api
-          SQLALCHEMY_DATABASE_TEST_URI: postgresql://user:password@localhost:5432/test_notification_api
-          REDIS_URL: redis://localhost:6379
-          NOTIFY_E2E_TEST_EMAIL: ${{ secrets.NOTIFY_E2E_TEST_EMAIL }}
-          NOTIFY_E2E_TEST_PASSWORD: ${{ secrets.NOTIFY_E2E_TEST_PASSWORD }}
-          NOTIFY_ENVIRONMENT: development
+      - name: Check API Server availability
+        run: |
+          curl --fail -v https://notify-api-staging.app.cloud.gov || exit 1
       - name: Run Admin server
-        run: make run-flask &
+        # If we want to log stuff and see what's broken,
+        # insert this line:
+        # tail -f admin-server.log &
+        # above make e2e-test
+        run: |
+          make run-flask > admin-server.log 2>&1 &
+          make e2e-test
         env:
-          # API_HOST_NAME: https://notify-api-staging.app.cloud.gov
-          API_HOST_NAME: http://localhost:6011
+          API_HOST_NAME: https://notify-api-staging.app.cloud.gov/
           DANGEROUS_SALT: ${{ secrets.DANGEROUS_SALT }}
           SECRET_KEY: ${{ secrets.SECRET_KEY }}
           ADMIN_CLIENT_SECRET: ${{ secrets.ADMIN_CLIENT_SECRET }}
@@ -121,20 +110,7 @@ jobs:
           NOTIFY_E2E_AUTH_STATE_PATH: ${{ secrets.NOTIFY_E2E_AUTH_STATE_PATH }}
           NOTIFY_E2E_TEST_EMAIL: ${{ secrets.NOTIFY_E2E_TEST_EMAIL }}
           NOTIFY_E2E_TEST_PASSWORD: ${{ secrets.NOTIFY_E2E_TEST_PASSWORD }}
-          NOTIFY_E2E_TEST_URI: http://localhost:6012
-      - name: Run E2E tests
-        # Run the E2E tests against the code found in this PR.
-        # run: poetry run pytest -v --browser chromium --browser firefox --browser webkit tests/end_to_end
-        # --browser webkit doesn't work at this time.
-        run: make e2e-test
-        # Debugging for now to troubleshoot a connectivity issue to the local servers
-        # run: curl --request GET --url "http://localhost:6012"
-        env:
-          NOTIFY_ENVIRONMENT: e2etest
-          NOTIFY_E2E_AUTH_STATE_PATH: ${{ secrets.NOTIFY_E2E_AUTH_STATE_PATH }}
-          NOTIFY_E2E_TEST_EMAIL: ${{ secrets.NOTIFY_E2E_TEST_EMAIL }}
-          NOTIFY_E2E_TEST_PASSWORD: ${{ secrets.NOTIFY_E2E_TEST_PASSWORD }}
-          NOTIFY_E2E_TEST_URI: http://localhost:6012
+          NOTIFY_E2E_TEST_URI: http://localhost:6012/
 
   validate-new-relic-config:
     runs-on: ubuntu-latest
@@ -160,6 +136,8 @@ jobs:
       - uses: pypa/gh-action-pip-audit@v1.0.8
         with:
           inputs: requirements.txt
+          ignore-vulns: |
+            PYSEC-2024-60
       - name: Run npm audit
         run: make npm-audit
 
@@ -183,12 +161,12 @@ jobs:
       - name: Run OWASP Baseline Scan
         uses: zaproxy/action-baseline@v0.9.0
         with:
-          docker_name: 'ghcr.io/zaproxy/zaproxy:weekly'
-          target: 'http://localhost:6012'
+          docker_name: "ghcr.io/zaproxy/zaproxy:weekly"
+          target: "http://localhost:6012"
           fail_action: true
           allow_issue_writing: false
-          rules_file_name: 'zap.conf'
-          cmd_options: '-I'
+          rules_file_name: "zap.conf"
+          cmd_options: "-I"
 
   a11y-scan:
     runs-on: ubuntu-20.04

.gitignore

@@ -123,6 +123,8 @@ app/templates/vendor
 secrets.auto.tfvars
 terraform.tfstate
 terraform.tfstate.backup
+requirements.txt
+terraform/sandbox/requirements.txt
 
 # Playwright
 playwright/

Makefile

@@ -88,7 +88,7 @@ dead-code: ## 60% is our aspirational goal, but currently breaks the build
 .PHONY: e2e-test
 e2e-test: export NEW_RELIC_ENVIRONMENT=test
 e2e-test: ## Run end-to-end integration tests; note that --browser webkit isn't currently working
-	poetry run pytest -vv --browser chromium  --browser firefox tests/end_to_end
+	DEBUG=pw:api,pw:browser poetry run pytest -vv --browser chromium  --browser firefox tests/end_to_end
 
 .PHONY: js-lint
 js-lint: ## Run javascript linting scanners

app/__init__.py

@@ -18,7 +18,6 @@ from flask import (
 )
 from flask.globals import request_ctx
 from flask_login import LoginManager, current_user
-from flask_socketio import SocketIO
 from flask_talisman import Talisman
 from flask_wtf import CSRFProtect
 from flask_wtf.csrf import CSRFError
@@ -119,8 +118,6 @@ from notifications_utils.recipients import format_phone_number_human_readable
 login_manager = LoginManager()
 csrf = CSRFProtect()
 talisman = Talisman()
-socketio = SocketIO()
-
 
 # The current service attached to the request stack.
 current_service = LocalProxy(partial(getattr, request_ctx, "service"))
@@ -177,7 +174,6 @@ def create_app(application):
 
     init_govuk_frontend(application)
     init_jinja(application)
-    socketio.init_app(application)
 
     for client in (
         csrf,
@@ -368,11 +364,23 @@ def make_session_permanent():
 
 
 def create_beta_url(url):
-    url_created = urlparse(url)
-    url_list = list(url_created)
-    url_list[1] = "beta.notify.gov"
-    url_for_redirect = urlunparse(url_list)
-    return url_for_redirect
+    url_created = None
+    try:
+        url_created = urlparse(url)
+        url_list = list(url_created)
+        url_list[1] = "beta.notify.gov"
+        url_for_redirect = urlunparse(url_list)
+        return url_for_redirect
+    except ValueError:
+        # This might be happening due to IPv6, see issue # 1395.
+        # If we see "'RequestContext' object has no attribute 'service'" in the logs
+        # we can search around that timestamp and find this output, hopefully.
+        # It may be sufficient to just catch and log, and prevent the stack trace from being in the logs
+        # but we need to confirm the root cause first.
+        current_app.logger.error(
+            f"create_beta_url orig_url: {url} \
+                                 url_created = {str(url_created)} url_for_redirect {str(url_for_redirect)}"
+        )
 
 
 def redirect_notify_to_beta():
@@ -380,6 +388,7 @@ def redirect_notify_to_beta():
         current_app.config["NOTIFY_ENVIRONMENT"] == "production"
         and "beta.notify.gov" not in request.url
     ):
+        # TODO add debug here to trace what is going on with the URL for the 'RequestContext' error
         url_to_beta = create_beta_url(request.url)
         return redirect(url_to_beta, 302)
 

app/assets/error_pages/5xx.html

@@ -17,7 +17,7 @@
     href="/static/images/apple-touch-icon.png?a0f7e1b728a42016b247dc54ee40d055">
   <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
-  <link rel="manifest" href="/static/images/site.webmanifest">
+  <link rel="manifest" href="{{ asset_url('images/site.webmanifest') }}">
 
   <link rel="stylesheet" media="screen" href="/static/stylesheets/main.css?d077f86473501ab244de0b30600536ee" />
   <link rel="stylesheet" media="print" href="/static/stylesheets/print.css?28010888ca5719dc83d7c2c80f6ed2b2" />

app/assets/images/gsa-logo.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="719px" height="720px" viewBox="0 0 129.996 130.238" enable-background="new 0 0 129.996 130.238"
+	 xml:space="preserve">
+<rect fill="#00538E" width="129.996" height="130.238"/>
+<path fill="#FFFFFF" d="M78.611,96.076c0,9.138-7.175,12.953-15.451,12.688c-2.938-0.095-5.799-0.838-8.916-1.855l0.707-6.578
+	c2.638,1.086,6.057,2.263,8.92,2.219c3.74-0.058,7.477-1.794,7.477-6.124c0-3.335-2.67-4.976-5.252-6.283
+	c-5.709-2.896-12.275-4.907-12.275-12.998c0-7.65,6.084-11.64,13.625-11.64c2.741,0,6.014,0.477,9.299,1.641l-0.985,6.478
+	c-3.577-1.403-5.14-1.901-8.078-1.901c-3.253,0-6.597,1.143-6.597,4.896c0,2.933,3.01,4.456,5.248,5.573
+	C72.398,85.218,78.611,87.703,78.611,96.076"/>
+<path fill="#FFFFFF" d="M44.561,106.8c-2.632,0.901-6.662,1.964-13.092,1.964c-13.195,0-22.027-8.529-22.027-21.805
+	c0-12.882,9.375-21.455,22.086-21.455c6.036,0,8.727,0.896,12.541,2.212l-0.574,7.216c-3.51-2.294-6.498-3.211-11.674-3.211
+	c-9.09,0-15.158,6.578-15.115,15.412c0.043,9.506,6.648,15.416,14.822,15.416c2.437,0,4.508-0.178,5.996-0.569V91.15h-7.861v-6.103
+	h14.898V106.8"/>
+<polyline fill="#FFFFFF" points="102.041,64.587 112.063,86.918 105.08,86.918 102.041,79.497 98.996,86.918 92.014,86.918
+	102.041,64.587 "/>
+<polyline fill="#FFFFFF" points="112.178,87.179 121.507,108.029 114.176,108.029 107.203,91.839 112.178,87.179 "/>
+<polyline fill="#FFFFFF" points="91.9,87.183 96.873,91.841 93.199,100.24 102.027,95.611 107.109,99.525 89.727,108.031
+	82.57,108.031 91.9,87.183 "/>
+</svg>

app/assets/javascripts/activityChart.js

@@ -0,0 +1,300 @@
+(function (window) {
+
+    if (document.getElementById('activityChartContainer')) {
+
+        const COLORS = {
+            delivered: '#0076d6',
+            failed: '#fa9441',
+            text: '#666'
+        };
+
+        const FONT_SIZE = 16;
+        const FONT_WEIGHT = 'bold';
+        const MAX_Y = 120;
+
+        const createChart = function(containerId, labels, deliveredData, failedData) {
+            const container = d3.select(containerId);
+            container.selectAll('*').remove(); // Clear any existing content
+
+            const margin = { top: 60, right: 20, bottom: 40, left: 20 }; // Adjusted top margin for legend
+            const width = container.node().getBoundingClientRect().width - margin.left - margin.right;
+            const height = 400 - margin.top - margin.bottom;
+
+            const svg = container.append('svg')
+                .attr('width', width + margin.left + margin.right)
+                .attr('height', height + margin.top + margin.bottom)
+                .append('g')
+                .attr('transform', `translate(${margin.left},${margin.top})`);
+
+            let tooltip = d3.select('#tooltip');
+
+            if (tooltip.empty()) {
+                tooltip = d3.select('body').append('div')
+                    .attr('id', 'tooltip')
+                    .style('display', 'none');
+            }
+            // Create legend
+            const legendContainer = d3.select('.chart-legend');
+            legendContainer.selectAll('*').remove(); // Clear any existing legend
+
+            const legendData = [
+                { label: 'Delivered', color: COLORS.delivered },
+                { label: 'Failed', color: COLORS.failed }
+            ];
+
+            const legendItem = legendContainer.selectAll('.legend-item')
+                .data(legendData)
+                .enter()
+                .append('div')
+                .attr('class', 'legend-item');
+
+            legendItem.append('div')
+                .attr('class', 'legend-rect')
+                .style('background-color', d => d.color)
+                .style('display', 'inline-block')
+                .style('margin-right', '5px');
+
+            legendItem.append('span')
+                .attr('class', 'legend-label')
+                .text(d => d.label);
+
+            const x = d3.scaleBand()
+                .domain(labels)
+                .range([0, width])
+                .padding(0.1);
+                            // Adjust the y-axis domain to add some space above the tallest bar
+            const maxY = d3.max(deliveredData.map((d, i) => d + (failedData[i] || 0)));
+            const y = d3.scaleSqrt()
+                .domain([0, maxY + 2]) // Add 2 units of space at the top
+                .nice()
+                .range([height, 0]);
+
+            svg.append('g')
+                .attr('class', 'x axis')
+                .attr('transform', `translate(0,${height})`)
+                .call(d3.axisBottom(x));
+
+            // Generate the y-axis with whole numbers
+            const yAxis = d3.axisLeft(y)
+                .ticks(Math.min(maxY + 2, 10)) // Generate up to 10 ticks based on the data
+                .tickFormat(d3.format('d')); // Ensure whole numbers on the y-axis
+
+            svg.append('g')
+                .attr('class', 'y axis')
+                .call(yAxis);
+
+            // Data for stacking
+            const stackData = labels.map((label, i) => ({
+                label: label,
+                delivered: deliveredData[i],
+                failed: failedData[i] || 0 // Ensure there's a value for failed, even if it's 0
+            }));
+
+            // Stack the data
+            const stack = d3.stack()
+                .keys(['delivered', 'failed'])
+                .order(d3.stackOrderNone)
+                .offset(d3.stackOffsetNone);
+
+            const series = stack(stackData);
+
+            // Color scale
+            const color = d3.scaleOrdinal()
+                .domain(['delivered', 'failed'])
+                .range([COLORS.delivered, COLORS.failed]);
+
+        // Create bars with animation
+        const barGroups = svg.selectAll('.bar-group')
+            .data(series)
+            .enter()
+            .append('g')
+            .attr('class', 'bar-group')
+            .attr('fill', d => color(d.key));
+
+        barGroups.selectAll('rect')
+            .data(d => d)
+            .enter()
+            .append('rect')
+            .attr('x', d => x(d.data.label))
+            .attr('y', height)
+            .attr('height', 0)
+            .attr('width', x.bandwidth())
+            .on('mouseover', function(event, d) {
+                const key = d3.select(this.parentNode).datum().key;
+                const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+                tooltip.style('display', 'block')
+                    .html(`${d.data.label}<br>${capitalizedKey}: ${d.data[key]}`);
+            })
+            .on('mousemove', function(event) {
+                tooltip.style('left', `${event.pageX + 10}px`)
+                    .style('top', `${event.pageY - 20}px`);
+            })
+            .on('mouseout', function() {
+                tooltip.style('display', 'none');
+            })
+            .transition()
+            .duration(1000)
+            .attr('y', d => y(d[1]))
+            .attr('height', d => y(d[0]) - y(d[1]));
+    };
+
+    // Function to create an accessible table
+    const createTable = function(tableId, chartType, labels, deliveredData, failedData) {
+        const table = document.getElementById(tableId);
+        table.innerHTML = ""; // Clear previous data
+
+        const captionText = document.querySelector(`#${chartType} .chart-subtitle`).textContent;
+        const caption = document.createElement('caption');
+        caption.textContent = captionText;
+        const thead = document.createElement('thead');
+        const tbody = document.createElement('tbody');
+
+        // Create table header
+        const headerRow = document.createElement('tr');
+        const headers = ['Day', 'Delivered', 'Failed'];
+        headers.forEach(headerText => {
+            const th = document.createElement('th');
+            th.textContent = headerText;
+            headerRow.appendChild(th);
+        });
+        thead.appendChild(headerRow);
+
+        // Create table body
+        labels.forEach((label, index) => {
+            const row = document.createElement('tr');
+            const cellDay = document.createElement('td');
+            cellDay.textContent = label;
+            row.appendChild(cellDay);
+
+            const cellDelivered = document.createElement('td');
+            cellDelivered.textContent = deliveredData[index];
+            row.appendChild(cellDelivered);
+
+            const cellFailed = document.createElement('td');
+            cellFailed.textContent = failedData[index];
+            row.appendChild(cellFailed);
+
+            tbody.appendChild(row);
+        });
+
+        table.appendChild(caption);
+        table.appendChild(thead);
+        table.append(tbody);
+    };
+
+    const fetchData = function(type) {
+        var ctx = document.getElementById('weeklyChart');
+        if (!ctx) {
+            return;
+        }
+
+        var url = type === 'service' ? `/daily_stats.json` : `/daily_stats_by_user.json`;
+        return fetch(url)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                labels = [];
+                deliveredData = [];
+                failedData = [];
+
+                let totalMessages = 0;
+
+                for (var dateString in data) {
+                    if (data.hasOwnProperty(dateString)) {
+                        const dateParts = dateString.split('-');
+                        const formattedDate = `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`;
+
+                        labels.push(formattedDate);
+                        deliveredData.push(data[dateString].sms.delivered);
+                        failedData.push(data[dateString].sms.failure);
+
+                        // Calculate the total number of messages
+                        totalMessages += data[dateString].sms.delivered + data[dateString].sms.failure;
+                    }
+                }
+
+                // Check if there are no messages sent
+                const subTitle = document.querySelector(`#activityChartContainer .chart-subtitle`);
+                if (totalMessages === 0) {
+                    // Remove existing chart and render the alert message
+                    d3.select('#weeklyChart').selectAll('*').remove();
+                    d3.select('#weeklyChart')
+                        .append('div')
+                        .html(`
+                            <div class="usa-alert usa-alert--info usa-alert--slim">
+                                <div class="usa-alert__body">
+                                    <p class="usa-alert__text">
+                                        No messages sent in the last 7 days
+                                    </p>
+                                </div>
+                            </div>
+                        `);
+                    // Hide the subtitle
+                    if (subTitle) {
+                        subTitle.style.display = 'none';
+                    }
+                } else {
+                    // If there are messages, create the chart and table
+                    createChart('#weeklyChart', labels, deliveredData, failedData);
+                    createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
+                }
+
+                return data;
+            })
+            .catch(error => console.error('Error fetching daily stats:', error));
+    };
+
+    const handleDropdownChange = function(event) {
+        const selectedValue = event.target.value;
+        const subTitle = document.querySelector(`#activityChartContainer .chart-subtitle`);
+        const selectElement = document.getElementById('options');
+        const selectedText = selectElement.options[selectElement.selectedIndex].text;
+
+        subTitle.textContent = `${selectedText} - last 7 days`;
+        fetchData(selectedValue);
+
+        // Update ARIA live region
+        const liveRegion = document.getElementById('aria-live-account');
+        liveRegion.textContent = `Data updated for ${selectedText} - last 7 days`;
+
+        // Switch tables based on dropdown selection
+        const selectedTable = selectedValue === "individual" ? "table1" : "table2";
+        const tables = document.querySelectorAll('.table-overflow-x-auto');
+        tables.forEach(function(table) {
+            table.classList.add('hidden'); // Hide all tables by adding the hidden class
+            table.classList.remove('visible'); // Ensure they are not visible
+        });
+        const tableToShow = document.getElementById(selectedTable);
+        tableToShow.classList.remove('hidden'); // Remove hidden class
+        tableToShow.classList.add('visible'); // Add visible class
+    };
+
+    document.addEventListener('DOMContentLoaded', function() {
+        // Initialize activityChart chart and table with service data by default
+        fetchData('service');
+
+        // Add event listener to the dropdown
+        const dropdown = document.getElementById('options');
+        dropdown.addEventListener('change', handleDropdownChange);
+    });
+
+        // Resize chart on window resize
+        window.addEventListener('resize', function() {
+            if (labels.length > 0 && deliveredData.length > 0 && failedData.length > 0) {
+                createChart('#weeklyChart', labels, deliveredData, failedData);
+                createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
+            }
+        });
+
+        // Export functions for testing
+        window.createChart = createChart;
+        window.createTable = createTable;
+        window.handleDropdownChange = handleDropdownChange;
+        window.fetchData = fetchData;
+    }
+
+})(window);

app/assets/javascripts/sampleChartDashboard.js

@@ -1,67 +0,0 @@
-(function (window) {
-
-    function initializeChartAndSocket() {
-        var ctx = document.getElementById('myChart');
-        if (!ctx) {
-            return;
-        }
-
-        var myBarChart = new Chart(ctx.getContext('2d'), {
-            type: 'bar',
-            data: {
-                labels: [],
-                datasets: [
-                    {
-                        label: 'Delivered',
-                        data: [],
-                        backgroundColor: '#0076d6',
-                        stack: 'Stack 0'
-                    },
-                ]
-            },
-            options: {
-                scales: {
-                    y: {
-                        beginAtZero: true
-                    }
-                }
-            }
-        });
-
-        var socket = io();
-
-        socket.on('connect', function() {
-            socket.emit('fetch_daily_stats_by_user');
-        });
-
-        socket.on('daily_stats_by_user_update', function(data) {
-            // console.log('Data received:', data);
-            var labels = [];
-            var deliveredData = [];
-
-            for (var date in data) {
-                labels.push(date);
-                deliveredData.push(data[date].sms.delivered);
-            }
-
-            myBarChart.data.labels = labels;
-            myBarChart.data.datasets[0].data = deliveredData;
-            myBarChart.update();
-        });
-
-        socket.on('error', function(data) {
-            // console.log('Error:', data);
-        });
-
-        var sevenDaysButton = document.getElementById('sevenDaysButton');
-        if (sevenDaysButton) {
-            sevenDaysButton.addEventListener('click', function() {
-                socket.emit('fetch_daily_stats_by_user');
-                // console.log('clicked');
-            });
-        }
-    }
-
-    document.addEventListener('DOMContentLoaded', initializeChartAndSocket);
-
-})(window);

app/assets/javascripts/totalMessagesChart.js

@@ -0,0 +1,150 @@
+(function (window) {
+    function createTotalMessagesChart() {
+        var chartContainer = document.getElementById('totalMessageChartContainer');
+        if (!chartContainer) return;
+
+        var chartTitle = document.getElementById('chartTitle').textContent;
+
+        // Access data attributes from the HTML
+        var sms_sent = parseInt(chartContainer.getAttribute('data-sms-sent'));
+        var sms_remaining_messages = parseInt(chartContainer.getAttribute('data-sms-allowance-remaining'));
+        var totalMessages = sms_sent + sms_remaining_messages;
+
+        // Update the message below the chart
+        document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`;
+
+        // Calculate minimum width for "Messages Sent" as 1% of the total chart width
+        var minSentPercentage = (sms_sent === 0) ? 0 : 0.02;
+        var minSentValue = totalMessages * minSentPercentage;
+        var displaySent = Math.max(sms_sent, minSentValue);
+        var displayRemaining = totalMessages - displaySent;
+
+        var svg = d3.select("#totalMessageChart");
+        var width = chartContainer.clientWidth;
+        var height = 48;
+
+        // Ensure the width is set correctly
+        if (width === 0) {
+            console.error('Chart container width is 0, cannot set SVG width.');
+            return;
+        }
+
+        svg.attr("width", width).attr("height", height);
+
+        var x = d3.scaleLinear()
+            .domain([0, totalMessages])
+            .range([0, width]);
+
+        // Create tooltip dynamically
+        var tooltip = d3.select("body").append("div")
+            .attr("id", "tooltip");
+
+        // Create the initial bars
+        var sentBar = svg.append("rect")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("height", height)
+            .attr("fill", '#0076d6')
+            .attr("width", 0) // Start with width 0 for animation
+            .on('mouseover', function(event) {
+                tooltip.style('display', 'block')
+                    .html(`Messages Sent: ${sms_sent.toLocaleString()}`);
+            })
+            .on('mousemove', function(event) {
+                tooltip.style('left', `${event.pageX + 10}px`)
+                    .style('top', `${event.pageY - 20}px`);
+            })
+            .on('mouseout', function() {
+                tooltip.style('display', 'none');
+            });
+
+        var remainingBar = svg.append("rect")
+            .attr("x", 0) // Initially set to 0, will be updated during animation
+            .attr("y", 0)
+            .attr("height", height)
+            .attr("fill", '#C7CACE')
+            .attr("width", 0) // Start with width 0 for animation
+            .on('mouseover', function(event) {
+                tooltip.style('display', 'block')
+                    .html(`Remaining: ${sms_remaining_messages.toLocaleString()}`);
+            })
+            .on('mousemove', function(event) {
+                tooltip.style('left', `${event.pageX + 10}px`)
+                    .style('top', `${event.pageY - 20}px`);
+            })
+            .on('mouseout', function() {
+                tooltip.style('display', 'none');
+            });
+
+        // Animate the bars together as a single cohesive line
+        svg.transition()
+            .duration(1000)  // Total animation duration
+            .attr("width", width)
+            .tween("resize", function() {
+                var interpolator = d3.interpolate(0, width);
+                return function(t) {
+                    var newWidth = interpolator(t);
+                    var sentWidth = x(displaySent) / width * newWidth;
+                    var remainingWidth = x(displayRemaining) / width * newWidth;
+                    sentBar.attr("width", sentWidth);
+                    remainingBar.attr("x", sentWidth).attr("width", remainingWidth);
+                };
+            });
+
+        // Create and populate the accessible table
+        var tableContainer = document.getElementById('totalMessageTable');
+        var table = document.createElement('table');
+        table.className = 'usa-sr-only usa-table';
+
+        var caption = document.createElement('caption');
+        caption.textContent = chartTitle;
+        table.appendChild(caption);
+
+        var thead = document.createElement('thead'); // Ensure thead is created
+        var theadRow = document.createElement('tr');
+        var thMessagesSent = document.createElement('th');
+        thMessagesSent.textContent = 'Messages Sent'; // First column header
+        var thRemaining = document.createElement('th');
+        thRemaining.textContent = 'Remaining'; // Second column header
+        theadRow.appendChild(thMessagesSent);
+        theadRow.appendChild(thRemaining);
+        thead.appendChild(theadRow); // Append theadRow to the thead
+        table.appendChild(thead);
+
+        var tbody = document.createElement('tbody');
+        var tbodyRow = document.createElement('tr');
+
+        var tdMessagesSent = document.createElement('td');
+        tdMessagesSent.textContent = sms_sent.toLocaleString(); // Value for Messages Sent
+        var tdRemaining = document.createElement('td');
+        tdRemaining.textContent = sms_remaining_messages.toLocaleString(); // Value for Remaining
+
+        tbodyRow.appendChild(tdMessagesSent);
+        tbodyRow.appendChild(tdRemaining);
+        tbody.appendChild(tbodyRow);
+
+        table.appendChild(tbody);
+        tableContainer.appendChild(table);
+
+        table.appendChild(tbody);
+        tableContainer.appendChild(table);
+
+        // Ensure the chart resizes correctly on window resize
+        window.addEventListener('resize', function () {
+            width = chartContainer.clientWidth;
+            x.range([0, width]);
+            svg.attr("width", width);
+            sentBar.attr("width", x(displaySent));
+            remainingBar.attr("x", x(displaySent)).attr("width", x(displayRemaining));
+        });
+    }
+
+    // Initialize total messages chart if the container exists
+    document.addEventListener('DOMContentLoaded', function() {
+        createTotalMessagesChart();
+    });
+
+    // Export function for testing
+    window.createTotalMessagesChart = createTotalMessagesChart;
+
+})(window);

app/assets/js/setTimezone.js

@@ -0,0 +1,4 @@
+document.addEventListener('DOMContentLoaded', function() {
+    var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    document.cookie = `timezone=${timeZone}; path=/`;
+})

app/assets/sass/uswds/_data-visualization.scss

@@ -0,0 +1,159 @@
+@use "uswds-core" as *;
+
+$delivered: color('blue-50v');
+$pending: color('green-cool-40v');
+$failed: color('gray-cool-20');
+
+.chart-container {
+  display: flex;
+  &.usage {
+    height: units(4);
+  }
+  svg {
+    overflow: visible;
+  }
+}
+
+#totalMessageChartContainer {
+  max-width: 600px;
+}
+
+.bar {
+  border-radius: units(0.5);
+  &.delivered, &.usage {
+    background-color: $delivered;
+    margin-right: 1px;
+  }
+  &.pending{
+    background-color: $pending;
+    margin-right: 1px;
+  }
+  &.failed, &.remaining {
+    background-color: $failed;
+  }
+}
+
+.legend {
+  display: flex;
+  margin: units(1) 0;
+  .legend-item {
+    display: flex;
+    align-items: flex-start;
+    margin-right: units(2);
+  }
+  .legend-color {
+    width: units(3);
+    height: units(3);
+    margin-right: 0;
+    padding: 0;
+    border-radius: 2px;
+    background-color: $delivered;
+    &.pending {
+      background-color: $pending;
+    }
+    &.failed, &.remaining {
+      background-color: $failed;
+    }
+  }
+  .legend-value {
+    margin: 0 units(1);
+  }
+}
+
+.usa-tooltip {
+  line-height: 1;
+  .usa-tooltip__body {
+    width: units(mobile);
+      font-size: size("body", 2);
+    height: auto;
+    white-space: wrap;
+    line-height: units(1);
+  }
+}
+
+.progress-bar {
+  width: 300px;
+  height: 20px;
+  background-color: #eee;
+  border-radius: 5px;
+  margin-bottom: 10px;
+}
+
+.progress-bar-inner {
+  height: 100%;
+  background-color: #007bff;
+  border-radius: inherit;
+}
+
+.chart {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: units(1) units(1) 0;
+}
+
+.chart-subtitle {
+  font-size: size("body", 6);
+  font-weight: bold;
+  text-align: left;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.axis text {
+  font-size: size("body", 1);
+}
+
+.axis line,
+.axis path {
+  shape-rendering: crispEdges;
+  stroke: #000;
+  fill: none;
+}
+
+.bar {
+  fill-opacity: 0.8;
+}
+
+.chart-container {
+  width: 100%;
+  position: relative;
+}
+
+.chart-legend {
+    display: flex;
+    align-items: center;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    margin-right: units(2);
+    .legend-rect {
+      width: units(2);
+      height: units(2);
+      margin-right: units(1);
+  }
+}
+
+#tooltip {
+  position: absolute;
+  display: none;
+  background: color('ink');
+  color: #FFF;
+  border: 1px solid #ccc;
+  padding: units(1);
+  border-radius: units(1);
+  pointer-events: none;
+  z-index: 100;
+  font-size: size("body", 3);
+  line-height: 1.3;
+}

app/assets/sass/uswds/_legacy-styles.scss

@@ -344,11 +344,3 @@ h2.recipient-list {
     }
   }
 }
-
-.js-focus-style {
-  outline: 3px solid color("blue-40v");
-  box-shadow: 0 0 0 7px color("blue-40v");
-  *:focus {
-    outline: none;
-  }
-}

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -22,9 +22,8 @@ i.e.
 
 @use "uswds-core" as *;
 
-iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
-    outline: units(1px) dotted color('blue-40v');
-    outline: units(1px) auto color('blue-40v');
+iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus, button:not([disabled]):focus {
+    outline: units(2px) solid color('blue-40v');
     outline-offset: 0.3rem;
 }
 
@@ -277,6 +276,12 @@ td.table-empty-message {
    display: block;
 }
 
+.usa-table {
+   th {
+      border-bottom: 0 !important;
+   }
+}
+
 .js-stick-at-bottom-when-scrolling {
    display: flex;
    align-items: flex-end;
@@ -327,6 +332,22 @@ td.table-empty-message {
    bottom: 0;
 }
 
+.table-overflow-x-auto {
+   &.hidden {
+      display: none;
+   }
+}
+
+@media (max-width: units('desktop-lg')) {
+   .table-overflow-x-auto {
+      overflow-x: auto;
+      table {
+         min-width: 768px;
+      }
+   }
+}
+
+
 // Dashboard
 
 .dashboard {
@@ -376,9 +397,6 @@ td.table-empty-message {
          background-image: url(../img/material-icons/description.svg);
       }
    }
-   .table-wrapper {
-      overflow-x: scroll;
-   }
 }
 
 .dashboard-table {
@@ -402,6 +420,30 @@ td.table-empty-message {
    }
 }
 
+.job-status-table {
+   table-layout: fixed;
+
+   thead tr th {
+      border-bottom: 0;
+   }
+
+   thead,
+   tbody,
+   tr {
+     width: 100%;
+   }
+
+   th:first-child,
+   td:first-child {
+     width: 75%;
+   }
+
+   th:nth-child(2),R
+   td:nth-child(2) {
+     width: 25%;
+   }
+}
+
 .usage-table {
    ul {
       list-style: none;
@@ -421,27 +463,51 @@ td.table-empty-message {
       width: 25%;
       overflow-wrap: anywhere;
    }
+   td.jobid {
+      width: 5%;
+   }
    td.template {
-      width: 20%;
+      width: 25%;
    }
    td.time-sent {
-      width: 20%;
+      width: 15%;
    }
    td.sender {
-      width: 15%;
+      width: 20%;
+      overflow-wrap: break-word;
    }
    td.count-of-recipients {
       width: 5%;
    }
    td.report {
-      width: 5%;
+      width: 2%;
+      text-align: center;
+   }
+   td.delivered {
+      width: 2%;
+      text-align: center;
+   }
+   td.failed {
+      width: 2%;
+      text-align: center;
+   }
+   td.report img {
+      padding-top: 5px;
    }
    th {
       padding: 0.5rem 1rem
    }
-   td {
-      padding: 0.5rem 1rem
-  }
+}
+
+@media (max-width: 768px) {
+   .usa-table-container--scrollable-mobile {
+      margin: 0;
+      overflow-y:hidden;
+   }
+}
+
+.usa-table th[data-sortable][aria-sort=ascending], .usa-table th[data-sortable][aria-sort=descending] {
+   background-color: #a1d3ff;
 }
 
 #template-list {
@@ -456,6 +522,10 @@ td.table-empty-message {
    }
 }
 
+.usa-prose > p.max-width-full {
+   max-width: 100%;
+}
+
 // Tabs
 
 .tabs {

app/assets/sass/uswds/_uswds-theme.scss

@@ -13,5 +13,6 @@ in the form $setting: value,
    $theme-banner-max-width: "desktop-lg",
    $theme-grid-container-max-width: "desktop-lg",
    $theme-footer-max-width: "desktop-lg",
-   $theme-header-max-width: "desktop-lg"
+   $theme-header-max-width: "desktop-lg",
+   $theme-identifier-max-width: "desktop-lg"
 );

app/assets/sass/uswds/styles.scss

@@ -1,4 +1,5 @@
 @forward "uswds-theme";
 @forward "uswds";
 @forward "uswds-theme-custom-styles";
-@forward "legacy-styles";
+@forward "legacy-styles";
+@forward "data-visualization";

app/config.py

@@ -8,6 +8,7 @@ from notifications_utils import DAILY_MESSAGE_LIMIT
 
 
 class Config(object):
+    SIMULATED_SMS_NUMBERS = ("+14254147755", "+14254147167")
     NOTIFY_APP_NAME = "admin"
     NOTIFY_ENVIRONMENT = getenv("NOTIFY_ENVIRONMENT", "development")
     API_HOST_NAME = getenv("API_HOST_NAME", "localhost")

app/formatters.py

@@ -231,6 +231,11 @@ def naturaltime_without_indefinite_article(date):
     )
 
 
+def convert_time_unixtimestamp(date_string):
+    dt = datetime.fromisoformat(date_string)
+    return int(dt.timestamp())
+
+
 def format_delta(date):
     # This method assumes that date is in UTC
     date = parse_naive_dt(date)

app/main/__init__.py

@@ -3,6 +3,7 @@ from flask import Blueprint
 main = Blueprint("main", __name__)
 
 from app.main.views import (  # noqa isort:skip
+    activity,
     add_service,
     api_keys,
     choose_account,

app/main/forms.py

@@ -50,6 +50,7 @@ from app.main.validators import (
     CommonlyUsedPassword,
     CsvFileValidator,
     DoesNotStartWithDoubleZero,
+    FieldCannotContainComma,
     LettersNumbersSingleQuotesFullStopsAndUnderscoresOnly,
     MustContainAlphanumericCharacters,
     NoCommasInPlaceHolders,
@@ -1650,7 +1651,11 @@ def get_placeholder_form_instance(
             )  # TODO: replace with us_mobile_number
     else:
         field = GovukTextInputField(
-            placeholder_name, validators=[DataRequired(message="Cannot be empty")]
+            placeholder_name,
+            validators=[
+                DataRequired(message="Cannot be empty"),
+                FieldCannotContainComma(),
+            ],
         )
 
     PlaceholderForm.placeholder_value = field

app/main/validators.py

@@ -161,6 +161,15 @@ class DoesNotStartWithDoubleZero:
             raise ValidationError(self.message)
 
 
+class FieldCannotContainComma:
+    def __init__(self, message="Cannot contain a comma"):
+        self.message = message
+
+    def __call__(self, form, field):
+        if field.data and "," in field.data:
+            raise ValidationError(self.message)
+
+
 class MustContainAlphanumericCharacters:
     regex = re.compile(r".*[a-zA-Z0-9].*[a-zA-Z0-9].*")
 

app/main/views/activity.py

@@ -0,0 +1,124 @@
+from flask import abort, render_template, request, url_for
+
+from app import current_service, job_api_client
+from app.formatters import convert_time_unixtimestamp, get_time_left
+from app.main import main
+from app.utils.pagination import (
+    generate_next_dict,
+    generate_pagination_pages,
+    generate_previous_dict,
+    get_page_from_request,
+)
+from app.utils.user import user_has_permissions
+
+
+@main.route("/activity/services/<uuid:service_id>")
+@user_has_permissions("view_activity")
+def all_jobs_activity(service_id):
+    service_data_retention_days = 7
+    page = get_page_from_request()
+    jobs = job_api_client.get_page_of_jobs(service_id, page=page)
+    all_jobs_dict = generate_job_dict(jobs)
+    prev_page, next_page, pagination = handle_pagination(jobs, service_id, page)
+    message_type = ("sms",)
+    return render_template(
+        "views/activity/all-activity.html",
+        all_jobs_dict=all_jobs_dict,
+        service_data_retention_days=service_data_retention_days,
+        next_page=next_page,
+        prev_page=prev_page,
+        pagination=pagination,
+        download_link_one_day=url_for(
+            ".download_notifications_csv",
+            service_id=current_service.id,
+            message_type=message_type,
+            status=request.args.get("status"),
+            number_of_days="one_day",
+        ),
+        download_link_three_day=url_for(
+            ".download_notifications_csv",
+            service_id=current_service.id,
+            message_type=message_type,
+            status=request.args.get("status"),
+            number_of_days="three_day",
+        ),
+        download_link_five_day=url_for(
+            ".download_notifications_csv",
+            service_id=current_service.id,
+            message_type=message_type,
+            status=request.args.get("status"),
+            number_of_days="five_day",
+        ),
+        download_link_seven_day=url_for(
+            ".download_notifications_csv",
+            service_id=current_service.id,
+            message_type=message_type,
+            status=request.args.get("status"),
+            number_of_days="seven_day",
+        ),
+    )
+
+
+def handle_pagination(jobs, service_id, page):
+    if page is None:
+        abort(404, "Invalid page argument ({}).".format(request.args.get("page")))
+    prev_page = (
+        generate_previous_dict("main.all_jobs_activity", service_id, page)
+        if page > 1
+        else None
+    )
+    next_page = (
+        generate_next_dict("main.all_jobs_activity", service_id, page)
+        if jobs.get("links", {}).get("next")
+        else None
+    )
+    pagination = generate_pagination_pages(
+        jobs.get("total", {}), jobs.get("page_size", {}), page
+    )
+    return prev_page, next_page, pagination
+
+
+def generate_job_dict(jobs):
+    return [
+        {
+            "job_id": job["id"],
+            "time_left": get_time_left(job["created_at"]),
+            "download_link": url_for(
+                ".view_job_csv", service_id=current_service.id, job_id=job["id"]
+            ),
+            "view_job_link": url_for(
+                ".view_job", service_id=current_service.id, job_id=job["id"]
+            ),
+            "created_at": job["created_at"],
+            "time_sent_data_value": convert_time_unixtimestamp(
+                job["processing_finished"]
+                if job["processing_finished"]
+                else (
+                    job["processing_started"]
+                    if job["processing_started"]
+                    else job["created_at"]
+                )
+            ),
+            "processing_finished": job["processing_finished"],
+            "processing_started": job["processing_started"],
+            "created_by": job["created_by"],
+            "template_name": job["template_name"],
+            "delivered_count": next(
+                (
+                    stat["count"]
+                    for stat in job.get("statistics", [])
+                    if stat["status"] == "delivered"
+                ),
+                None,
+            ),
+            "failed_count": next(
+                (
+                    stat["count"]
+                    for stat in job.get("statistics", [])
+                    if stat["status"] == "failed"
+                ),
+                None,
+            ),
+        }
+        for job in jobs["data"]
+    ]

app/main/views/dashboard.py

@@ -1,25 +1,22 @@
 import calendar
-from collections import defaultdict
 from datetime import datetime
 from functools import partial
 from itertools import groupby
 
 from flask import Response, abort, jsonify, render_template, request, session, url_for
 from flask_login import current_user
-from flask_socketio import emit
 from werkzeug.utils import redirect
 
 from app import (
     billing_api_client,
     current_service,
     job_api_client,
-    notification_api_client,
     service_api_client,
-    socketio,
     template_statistics_client,
 )
 from app.formatters import format_date_numeric, format_datetime_numeric, get_time_left
 from app.main import main
+from app.main.views.user_profile import set_timezone
 from app.statistics_utils import get_formatted_percentage
 from app.utils import (
     DELIVERED_STATUSES,
@@ -34,38 +31,6 @@ from app.utils.user import user_has_permissions
 from notifications_utils.recipients import format_phone_number_human_readable
 
 
-@socketio.on("fetch_daily_stats")
-def handle_fetch_daily_stats():
-    service_id = session.get('service_id')
-    if service_id:
-        date_range = get_stats_date_range()
-        daily_stats = service_api_client.get_service_notification_statistics_by_day(
-            service_id, start_date=date_range["start_date"], days=date_range["days"]
-        )
-        emit("daily_stats_update", daily_stats)
-    else:
-        emit("error", {"error": "No service_id provided"})
-
-
-@socketio.on("fetch_daily_stats_by_user")
-def handle_fetch_daily_stats_by_user():
-    service_id = session.get("service_id")
-    user_id = session.get("user_id")
-    if service_id and user_id:
-        date_range = get_stats_date_range()
-        daily_stats_by_user = (
-            service_api_client.get_user_service_notification_statistics_by_day(
-                service_id,
-                user_id,
-                start_date=date_range["start_date"],
-                days=date_range["days"],
-            )
-        )
-        emit("daily_stats_by_user_update", daily_stats_by_user)
-    else:
-        emit("error", {"error": "No service_id or user_id provided"})
-
-
 @main.route("/services/<uuid:service_id>/dashboard")
 @user_has_permissions("view_activity", "send_messages")
 def old_service_dashboard(service_id):
@@ -75,6 +40,7 @@ def old_service_dashboard(service_id):
 @main.route("/services/<uuid:service_id>")
 @user_has_permissions()
 def service_dashboard(service_id):
+
     if session.get("invited_user_id"):
         session.pop("invited_user_id", None)
         session["service_id"] = service_id
@@ -82,19 +48,21 @@ def service_dashboard(service_id):
     if not current_user.has_permissions("view_activity"):
         return redirect(url_for("main.choose_template", service_id=service_id))
 
+    yearly_usage = billing_api_client.get_annual_usage_for_service(
+        service_id,
+        get_current_financial_year(),
+    )
+    free_sms_allowance = billing_api_client.get_free_sms_fragment_limit_for_year(
+        current_service.id,
+    )
+    usage_data = get_annual_usage_breakdown(yearly_usage, free_sms_allowance)
+    sms_sent = usage_data["sms_sent"]
+    sms_allowance_remaining = usage_data["sms_allowance_remaining"]
+
     job_response = job_api_client.get_jobs(service_id)["data"]
-    notifications_response = notification_api_client.get_notifications_for_service(
-        service_id
-    )["notifications"]
     service_data_retention_days = 7
 
-    aggregate_notifications_by_job = defaultdict(list)
-    for notification in notifications_response:
-        job_id = notification.get("job", {}).get("id", None)
-        if job_id:
-            aggregate_notifications_by_job[job_id].append(notification)
-
-    job_and_notifications = [
+    jobs = [
         {
             "job_id": job["id"],
             "time_left": get_time_left(job["created_at"]),
@@ -105,22 +73,52 @@ def service_dashboard(service_id):
                 ".view_job", service_id=current_service.id, job_id=job["id"]
             ),
             "created_at": job["created_at"],
+            "processing_finished": job.get("processing_finished"),
+            "processing_started": job.get("processing_started"),
             "notification_count": job["notification_count"],
             "created_by": job["created_by"],
-            "notifications": aggregate_notifications_by_job.get(job["id"], []),
+            "template_name": job["template_name"],
+            "original_file_name": job["original_file_name"],
         }
         for job in job_response
-        if aggregate_notifications_by_job.get(job["id"], [])
+        if job["job_status"] != "cancelled"
     ]
     return render_template(
         "views/dashboard/dashboard.html",
         updates_url=url_for(".service_dashboard_updates", service_id=service_id),
         partials=get_dashboard_partials(service_id),
-        job_and_notifications=job_and_notifications,
+        jobs=jobs,
         service_data_retention_days=service_data_retention_days,
+        sms_sent=sms_sent,
+        sms_allowance_remaining=sms_allowance_remaining,
     )
 
 
+@main.route("/daily_stats.json")
+def get_daily_stats():
+    service_id = session.get("service_id")
+    date_range = get_stats_date_range()
+
+    stats = service_api_client.get_service_notification_statistics_by_day(
+        service_id, start_date=date_range["start_date"], days=date_range["days"]
+    )
+    return jsonify(stats)
+
+
+@main.route("/daily_stats_by_user.json")
+def get_daily_stats_by_user():
+    service_id = session.get("service_id")
+    date_range = get_stats_date_range()
+    user_id = current_user.id
+    stats = service_api_client.get_user_service_notification_statistics_by_day(
+        service_id,
+        user_id,
+        start_date=date_range["start_date"],
+        days=date_range["days"],
+    )
+    return jsonify(stats)
+
+
 @main.route("/services/<uuid:service_id>/dashboard.json")
 @user_has_permissions("view_activity")
 def service_dashboard_updates(service_id):
@@ -327,13 +325,19 @@ def aggregate_template_usage(template_statistics, sort_key="count"):
         key=lambda x: x["template_id"],
     ):
         template_stats = list(v)
-
+        first_stat = template_stats[0] if template_stats else None
         templates.append(
             {
                 "template_id": k,
-                "template_name": template_stats[0]["template_name"],
-                "template_type": template_stats[0]["template_type"],
+                "template_name": first_stat.get("template_name"),
+                "template_type": first_stat.get("template_type"),
                 "count": sum(s["count"] for s in template_stats),
+                "created_by": first_stat.get("created_by"),
+                "created_by_id": first_stat.get("created_by_id"),
+                "last_used": first_stat.get("last_used"),
+                "status": first_stat.get("status"),
+                "template_folder": first_stat.get("template_folder"),
+                "template_folder_id": first_stat.get("template_folder_id"),
             }
         )
 
@@ -406,11 +410,13 @@ def get_dashboard_partials(service_id):
 
 
 def get_dashboard_totals(statistics):
+
     for msg_type in statistics.values():
         msg_type["failed_percentage"] = get_formatted_percentage(
             msg_type["failed"], msg_type["requested"]
         )
         msg_type["show_warning"] = float(msg_type["failed_percentage"]) > 3
+
     return statistics
 
 
@@ -469,6 +475,8 @@ def get_months_for_financial_year(year, time_format="%B"):
 
 
 def get_current_month_for_financial_year(year):
+    # Setting the timezone here because we need to set it somewhere.
+    set_timezone()
     current_month = datetime.now().month
     return current_month
 

app/main/views/jobs.py

@@ -312,7 +312,7 @@ def get_status_filters(service, message_type, statistics):
     filters = [
         # key, label, option
         ("requested", "total", "sending,delivered,failed"),
-        ("pending", "pending", "pending"),
+        ("pending", "pending", "sending,pending"),
         ("delivered", "delivered", "delivered"),
         ("failed", "failed", "failed"),
     ]

app/main/views/platform_admin.py

@@ -1,9 +1,20 @@
+import csv
 import itertools
 import json
 from collections import OrderedDict
 from datetime import datetime
+from io import StringIO
 
-from flask import abort, flash, render_template, request, url_for
+from flask import (
+    Response,
+    abort,
+    current_app,
+    flash,
+    render_template,
+    request,
+    session,
+    url_for,
+)
 from notifications_python_client.errors import HTTPError
 
 from app import (
@@ -23,6 +34,7 @@ from app.main.forms import (
     DateFilterForm,
     RequiredDateFilterForm,
 )
+from app.main.views.send import _send_notification
 from app.statistics_utils import (
     get_formatted_percentage,
     get_formatted_percentage_two_dp,
@@ -70,6 +82,40 @@ def platform_admin():
     )
 
 
+@main.route("/platform-admin/download-all-users")
+@user_is_platform_admin
+def download_all_users():
+
+    # Create a CSV string from the user data
+    users = user_api_client.get_all_users_detailed()
+
+    if len(users) == 0:
+        return "No data to download."
+
+    output = StringIO()
+    header = ["Name", "Email Address", "Phone Number", "Service"]
+    fieldnames = ["name", "email_address", "mobile_number", "service"]
+    writer = csv.DictWriter(
+        output,
+        fieldnames=fieldnames,
+        delimiter=",",
+    )
+    # Write custom header
+    writer.writerow(dict(zip(fieldnames, header)))
+    for user in users:
+        user_no_commas = {key: value.replace(",", "") for key, value in user.items()}
+        if user_no_commas["name"].startswith("e2e"):
+            continue
+        writer.writerow(user_no_commas)
+    csv_data = output.getvalue()
+
+    # Create a direct download response with the CSV data and appropriate headers
+    response = Response(csv_data, content_type="text/csv; charset=utf-8")
+    response.headers["Content-Disposition"] = "attachment; filename=users.csv"
+
+    return response
+
+
 def is_over_threshold(number, total, threshold):
     percentage = number / total * 100 if total else 0
     return percentage > threshold
@@ -735,3 +781,80 @@ def _get_user_row(r):
     row.append(r["password_changed_at"])
     row.append(r["state"])
     return row
+
+
+@main.route(
+    "/platform-admin/load-test",
+    methods=["POST", "GET"],
+)
+@user_is_platform_admin
+def load_test():
+    """
+    The load test assumes that a service called 'Test service' exists.  It will make
+    the platform admin a member of this service if the platform is not already. All
+    messagese will be sent in this service.
+    """
+    service = _find_load_test_service()
+    _prepare_load_test_service(service)
+    example_template = _find_example_template(service)
+
+    # Simulated success
+    for _ in range(0, 250):
+        session["recipient"] = current_app.config["SIMULATED_SMS_NUMBERS"][0]
+        session["placeholders"] = {
+            "day of week": "Monday",
+            "color": "blue",
+            "phone number": current_app.config["SIMULATED_SMS_NUMBERS"][0],
+        }
+        _send_notification(service["id"], example_template["id"])
+    # Simulated failure
+    for _ in range(0, 250):
+        session["recipient"] = current_app.config["SIMULATED_SMS_NUMBERS"][1]
+        session["placeholders"] = {
+            "day of week": "Wednesday",
+            "color": "orange",
+            "phone number": current_app.config["SIMULATED_SMS_NUMBERS"][1],
+        }
+        _send_notification(service["id"], example_template["id"])
+
+    # For now, just redirect to the splash page so we know it's done
+    return render_template(
+        "views/platform-admin/splash-page.html",
+    )
+
+
+def _find_example_template(service):
+    templates = service_api_client.get_service_templates(service["id"])
+    templates = templates["data"]
+    for template in templates:
+        # template = json.loads(template)
+        if template["name"] == "Example text message template":
+            return template
+
+    raise Exception("Could not find example template for load test")
+
+
+def _find_load_test_service():
+    services = service_api_client.find_services_by_name("Test service")
+    services = services["data"]
+
+    for service in services:
+        if service["name"] == "Test service":
+            return service
+
+    raise Exception("Could not find 'Test service' for load test")
+
+
+def _prepare_load_test_service(service):
+    users = user_api_client.get_all_users()
+    for user in users:
+        if user["platform_admin"] == "t":
+            try:
+                user_api_client.add_user_to_service(
+                    service["id"], user["id"], ["send messages"]
+                )
+            except Exception:
+                current_app.logger.exception(
+                    "Couldnt add user, may already be part of service"
+                )
+                pass

app/main/views/register.py

@@ -230,7 +230,12 @@ def set_up_your_profile():
         debug_msg(
             f"Added user {usr.email_address} to service {invite_data['service_id']}"
         )
-        return redirect(url_for("main.show_accounts_or_dashboard"))
+        # notify-admin-1766
+        # redirect new users to templates area of new service instead of dashboard
+        service_id = invite_data["service_id"]
+        url = url_for(".service_dashboard", service_id=service_id)
+        url = f"{url}/templates"
+        return redirect(url)
 
     elif login_gov_error:
         current_app.logger.error(f"login.gov error: {login_gov_error}")

app/main/views/send.py

@@ -1,3 +1,4 @@
+import os
 import time
 import uuid
 from string import ascii_uppercase
@@ -33,6 +34,7 @@ from app.main.forms import (
     SetSenderForm,
     get_placeholder_form_instance,
 )
+from app.main.views.user_profile import set_timezone
 from app.models.user import Users
 from app.s3_client.s3_csv_client import (
     get_csv_metadata,
@@ -941,8 +943,8 @@ def preview_notification(service_id, template_id):
 )
 @user_has_permissions("send_messages", restrict_admin_usage=True)
 def send_notification(service_id, template_id):
-    scheduled_for = session.pop("scheduled_for", "")
     recipient = get_recipient()
+
     if not recipient:
         return redirect(
             url_for(
@@ -951,53 +953,10 @@ def send_notification(service_id, template_id):
                 template_id=template_id,
             )
         )
+    upload_id = _send_notification(service_id, template_id)
 
-    keys = []
-    values = []
-    for k, v in session["placeholders"].items():
-        keys.append(k)
-        values.append(v)
-
-    data = ",".join(keys)
-    vals = ",".join(values)
-    data = f"{data}\r\n{vals}"
-
-    filename = (
-        f"one-off-{uuid.uuid4()}.csv"  # {current_user.name} removed from filename
-    )
-    my_data = {"filename": filename, "template_id": template_id, "data": data}
-    upload_id = s3upload(service_id, my_data)
-
-    # To debug messages that the user reports have not been sent, we log
-    # the csv filename and the job id.  The user will give us the file name,
-    # so we can search on that to obtain the job id, which we can use elsewhere
-    # on the API side to find out what happens to the message.
-    current_app.logger.info(
-        hilite(
-            f"One-off file: {filename} job_id: {upload_id} s3 location: service-{service_id}-notify/{upload_id}.csv"
-        )
-    )
-
-    form = CsvUploadForm()
-    form.file.data = my_data
-    form.file.name = filename
-
-    check_message_output = check_messages(service_id, template_id, upload_id, 2)
-    if "You cannot send to" in check_message_output:
-        return check_messages(service_id, template_id, upload_id, 2)
-
-    job_api_client.create_job(
-        upload_id,
-        service_id,
-        scheduled_for=scheduled_for,
-        template_id=template_id,
-        original_file_name=filename,
-        notification_count=1,
-        valid="True",
-    )
-
-    session.pop("recipient")
-    session.pop("placeholders")
+    session.pop("recipient", "")
+    session.pop("placeholders", "")
 
     # We have to wait for the job to run and create the notification in the database
     time.sleep(0.1)
@@ -1045,6 +1004,56 @@ def send_notification(service_id, template_id):
     )
 
 
+def _send_notification(service_id, template_id):
+    scheduled_for = session.pop("scheduled_for", "")
+
+    keys = []
+    values = []
+    for k, v in session["placeholders"].items():
+        keys.append(k)
+        values.append(v)
+
+    data = ",".join(keys)
+    vals = ",".join(values)
+    data = f"{data}\r\n{vals}"
+    filename = (
+        f"one-off-{uuid.uuid4()}.csv"  # {current_user.name} removed from filename
+    )
+    my_data = {"filename": filename, "template_id": template_id, "data": data}
+    upload_id = s3upload(service_id, my_data)
+    # To debug messages that the user reports have not been sent, we log
+    # the csv filename and the job id.  The user will give us the file name,
+    # so we can search on that to obtain the job id, which we can use elsewhere
+    # on the API side to find out what happens to the message.
+    current_app.logger.info(
+        hilite(
+            f"One-off file: {filename} job_id: {upload_id} s3 location: service-{service_id}-notify/{upload_id}.csv"
+        )
+    )
+
+    # For load testing we want to skip these checks.  They are doing some fine-grained
+    # comparison about what is in the preview, but the load test just blast messages
+    # and doesn't care about the preview.
+    if os.getenv("NOTIFY_ENVIRONMENT") not in ("development", "staging", "demo"):
+        form = CsvUploadForm()
+        form.file.data = my_data
+        form.file.name = filename
+        check_message_output = check_messages(service_id, template_id, upload_id, 2)
+        if "You cannot send to" in check_message_output:
+            return check_messages(service_id, template_id, upload_id, 2)
+
+    job_api_client.create_job(
+        upload_id,
+        service_id,
+        scheduled_for=scheduled_for,
+        template_id=template_id,
+        original_file_name=filename,
+        notification_count=1,
+        valid="True",
+    )
+    return upload_id
+
+
 def get_email_reply_to_address_from_session():
     if session.get("sender_id"):
         return current_service.get_email_reply_to_address(session["sender_id"])[
@@ -1053,8 +1062,13 @@ def get_email_reply_to_address_from_session():
 
 
 def get_sms_sender_from_session():
-    if session.get("sender_id"):
-        return current_service.get_sms_sender(session["sender_id"])["sms_sender"]
+    sender_id = session.get("sender_id")
+    if sender_id:
+        sms_sender = current_service.get_sms_sender(session["sender_id"])["sms_sender"]
+        current_app.logger.info(f"SMS Sender ({sender_id}) #: {sms_sender}")
+        return sms_sender
+    else:
+        current_app.logger.error("No SMS Sender!!!!!!")
 
 
 def get_spreadsheet_column_headings_from_template(template):
@@ -1070,6 +1084,7 @@ def get_spreadsheet_column_headings_from_template(template):
 
 
 def get_recipient():
+    set_timezone()
     if {"recipient", "placeholders"} - set(session.keys()):
         return None
 

app/main/views/sign_in.py

@@ -29,14 +29,11 @@ from notifications_utils.url_safe_token import generate_token
 
 
 def _reformat_keystring(orig):
-    new_keystring = orig.replace("-----BEGIN PRIVATE KEY-----", "")
-    new_keystring = new_keystring.replace("-----END PRIVATE KEY-----", "")
-    new_keystring = new_keystring.strip()
-    new_keystring = new_keystring.replace(" ", "\n")
-    new_keystring = "\n".join(
-        ["-----BEGIN PRIVATE KEY-----", new_keystring, "-----END PRIVATE KEY-----"]
-    )
-    new_keystring = f"{new_keystring}\n"
+    arr = orig.split("-----")
+    begin = arr[1]
+    end = arr[3]
+    middle = arr[2].strip()
+    new_keystring = f"-----{begin}-----\n{middle}\n-----{end}-----\n"
     return new_keystring
 
 
@@ -65,7 +62,9 @@ def _get_access_token(code, state):
     response = requests.post(url, headers=headers)
     if response.json().get("access_token") is None:
         # Capture the response json here so it hopefully shows up in error reports
-        current_app.logger.error(f"Error when getting access token {response.json()}")
+        current_app.logger.error(
+            f"Error when getting access token {response.json()} #notify-admin-1505"
+        )
         raise KeyError(f"'access_token' {response.json()}")
     access_token = response.json()["access_token"]
     return access_token
@@ -90,7 +89,9 @@ def _do_login_dot_gov():
     login_gov_error = request.args.get("error")
 
     if login_gov_error:
-        current_app.logger.error(f"login.gov error: {login_gov_error}")
+        current_app.logger.error(
+            f"login.gov error: {login_gov_error} #notify-admin-1505"
+        )
         raise Exception(f"Could not login with login.gov {login_gov_error}")
     elif code and state:
 
@@ -100,12 +101,15 @@ def _do_login_dot_gov():
             user_email, user_uuid = _get_user_email_and_uuid(access_token)
             if not is_gov_user(user_email):
                 current_app.logger.error(
-                    "invited user has a non-government email address."
+                    "invited user has a non-government email address. #notify-admin-1505"
                 )
                 flash("You must use a government email address.")
                 abort(403)
             redirect_url = request.args.get("next")
             user = user_api_client.get_user_by_uuid_or_email(user_uuid, user_email)
+            current_app.logger.info(
+                f"Retrieved user {user['id']} from db #notify-admin-1505"
+            )
 
             # Check if the email needs to be revalidated
             is_fresh_email = is_less_than_days_ago(
@@ -115,9 +119,10 @@ def _do_login_dot_gov():
                 return verify_email(user, redirect_url)
 
             usr = User.from_email_address(user["email_address"])
+            current_app.logger.info(f"activating user {usr.id} #notify-admin-1505")
             activate_user(usr.id)
         except BaseException as be:  # noqa B036
-            current_app.logger.error(be)
+            current_app.logger.error(f"Error signing in: {be} #notify-admin-1505 ")
             error(401)
         return redirect(url_for("main.show_accounts_or_dashboard", next=redirect_url))
 
@@ -134,18 +139,34 @@ def verify_email(user, redirect_url):
 
 
 def _handle_e2e_tests(redirect_url):
-    current_app.logger.warning("E2E TESTS ARE ENABLED.")
-    current_app.logger.warning(
-        "If you are getting a 404 on signin, comment out E2E vars in .env file!"
-    )
-    user = user_api_client.get_user_by_email(os.getenv("NOTIFY_E2E_TEST_EMAIL"))
-    activate_user(user["id"])
-    return redirect(url_for("main.show_accounts_or_dashboard", next=redirect_url))
+    try:
+        current_app.logger.warning("E2E TESTS ARE ENABLED.")
+        current_app.logger.warning(
+            "If you are getting a 404 on signin, comment out E2E vars in .env file!"
+        )
+        user = user_api_client.get_user_by_email(os.getenv("NOTIFY_E2E_TEST_EMAIL"))
+        activate_user(user["id"])
+        return redirect(
+            url_for(
+                "main.show_accounts_or_dashboard",
+                next="EMAIL_IS_OK",
+            )
+        )
+    except Exception as e:
+        stre = str(e)
+        stre = stre.replace(" ", "_")
+        # Trying to get a message back to playwright somehow since we can't see the admin logs
+        return redirect(url_for(f"https://{stre}"))
 
 
 @main.route("/sign-in", methods=(["GET", "POST"]))
 @hide_from_search_engines
 def sign_in():
+    redirect_url = request.args.get("next")
+
+    if os.getenv("NOTIFY_E2E_TEST_EMAIL"):
+        return _handle_e2e_tests(None)
+
     # If we have to revalidated the email, send the message
     # via email and redirect to the "verify your email page"
     # and don't proceed further with login
@@ -157,11 +178,6 @@ def sign_in():
     ):
         return email_verify_template
 
-    redirect_url = request.args.get("next")
-
-    if os.getenv("NOTIFY_E2E_TEST_EMAIL"):
-        return _handle_e2e_tests(redirect_url)
-
     if current_user and current_user.is_authenticated:
         if redirect_url and is_safe_redirect_url(redirect_url):
             return redirect(redirect_url)

app/main/views/sign_out.py

@@ -1,7 +1,7 @@
 import os
 
 import requests
-from flask import current_app, redirect, url_for
+from flask import current_app, redirect, session, url_for
 from flask_login import current_user
 
 from app.main import main
@@ -25,12 +25,16 @@ def _sign_out_at_login_dot_gov():
 
 @main.route("/sign-out", methods=(["GET", "POST"]))
 def sign_out():
-    # An AnonymousUser does not have an id
-    current_app.logger.info("HIT THE REGULAR SIGN OUT")
+
     if current_user.is_authenticated:
-        # TODO This doesn't work yet, due to problems above.
+        current_user.deactivate()
+        session.clear()
         current_user.sign_out()
+
+        session.permanent = False
+
         login_dot_gov_logout_url = os.getenv("LOGIN_DOT_GOV_LOGOUT_URL")
         if login_dot_gov_logout_url:
+            current_app.config["SESSION_PERMANENT"] = False
             return redirect(login_dot_gov_logout_url)
     return redirect(url_for("main.index"))

app/main/views/user_profile.py

@@ -29,6 +29,7 @@ from app.main.forms import (
     TwoFactorForm,
 )
 from app.models.user import User
+from app.utils import hilite
 from app.utils.user import user_is_gov_user, user_is_logged_in
 from notifications_utils.url_safe_token import check_token
 
@@ -189,32 +190,19 @@ def user_profile_mobile_number_delete():
 @main.route("/user-profile/mobile-number/authenticate", methods=["GET", "POST"])
 @user_is_logged_in
 def user_profile_mobile_number_authenticate():
-    # Validate password for form
-    def _check_password(pwd):
-        return user_api_client.verify_password(current_user.id, pwd)
-
-    form = ConfirmPasswordForm(_check_password)
 
     if NEW_MOBILE not in session:
         return redirect(url_for(".user_profile_mobile_number"))
 
-    if form.validate_on_submit():
-        session[NEW_MOBILE_PASSWORD_CONFIRMED] = True
-        current_user.send_verify_code(to=session[NEW_MOBILE])
-        create_mobile_number_change_event(
-            user_id=current_user.id,
-            updated_by_id=current_user.id,
-            original_mobile_number=current_user.mobile_number,
-            new_mobile_number=session[NEW_MOBILE],
-        )
-        return redirect(url_for(".user_profile_mobile_number_confirm"))
-
-    return render_template(
-        "views/user-profile/authenticate.html",
-        thing="mobile number",
-        form=form,
-        back_link=url_for(".user_profile_mobile_number_confirm"),
+    session[NEW_MOBILE_PASSWORD_CONFIRMED] = True
+    current_user.send_verify_code(to=session[NEW_MOBILE])
+    create_mobile_number_change_event(
+        user_id=current_user.id,
+        updated_by_id=current_user.id,
+        original_mobile_number=current_user.mobile_number,
+        new_mobile_number=session[NEW_MOBILE],
     )
+    return redirect(url_for(".user_profile_mobile_number_confirm"))
 
 
 @main.route("/user-profile/mobile-number/confirm", methods=["GET", "POST"])
@@ -288,3 +276,15 @@ def user_profile_disable_platform_admin_view():
     return render_template(
         "views/user-profile/disable-platform-admin-view.html", form=form
     )
+
+
+def set_timezone():
+    # Cookie is set in dashboard.html on page load
+    try:
+        timezone = request.cookies.get("timezone", "US/Eastern")
+        current_app.logger.debug(hilite(f"User's timezone is {timezone}"))
+        serialized_user = current_user.serialize()
+        if serialized_user["preferred_timezone"] is not timezone:
+            current_user.update(preferred_timezone=timezone)
+    except Exception:
+        current_app.logger.exception(hilite("Can't get timezone"))

app/main/views/verify.py

@@ -38,6 +38,7 @@ def verify_email(token):
             current_app.config["EMAIL_EXPIRY_SECONDS"],
         )
     except SignatureExpired:
+        current_app.logger.error("Email link expired #notify-admin-1505")
         flash(
             "The link in the email we sent you has expired. We've sent you a new one."
         )
@@ -50,6 +51,9 @@ def verify_email(token):
         abort(404)
 
     if user.is_active:
+        current_app.logger.error(
+            f"User is using an invite link but is already logged in {user.id} #notify-admin-1505"
+        )
         flash("That verification link has expired.")
         return redirect(url_for("main.sign_in"))
 
@@ -59,6 +63,7 @@ def verify_email(token):
 
     user.send_verify_code()
     session["user_details"] = {"email": user.email_address, "id": user.id}
+    current_app.logger.info(f"Email verified for user {user.id} #notify-admin-1505")
     return redirect(url_for("main.verify"))
 
 
@@ -78,6 +83,7 @@ def activate_user(user_id):
         return redirect(url_for("main.organization_dashboard", org_id=organization_id))
     else:
         activated_user = user.activate()
+        current_app.logger.info(f"Activated user {user.id} #notify-admin-1505")
         activated_user.login()
-
+        current_app.logger.info(f"Logged in user {user.id} #notify-admin-1505")
         return redirect(url_for("main.add_service", first="first"))

app/models/user.py

@@ -1,3 +1,4 @@
+import os
 from datetime import datetime
 
 from flask import abort, current_app, request, session
@@ -24,11 +25,15 @@ from app.utils.user_permissions import (
 
 
 def _get_service_id_from_view_args():
-    return str(request.view_args.get("service_id", "")) or None
+    if request and request.view_args:
+        return str(request.view_args.get("service_id", ""))
+    return None
 
 
 def _get_org_id_from_view_args():
-    return str(request.view_args.get("org_id", "")) or None
+    if request and request.view_args:
+        return str(request.view_args.get("org_id", ""))
+    return None
 
 
 class User(JSONModel, UserMixin):
@@ -54,6 +59,7 @@ class User(JSONModel, UserMixin):
         super().__init__(_dict)
         self.permissions = _dict.get("permissions", {})
         self._platform_admin = _dict["platform_admin"]
+        self.preferred_timezone = _dict.get("preferred_timezone", "America/New_York")
 
     @classmethod
     def from_id(cls, user_id):
@@ -147,6 +153,13 @@ class User(JSONModel, UserMixin):
         else:
             return self
 
+    def deactivate(self):
+        if self.is_active:
+            user_data = user_api_client.deactivate_user(self.id)
+            return self.__class__(user_data["data"])
+        else:
+            return self
+
     def login(self):
         login_user(self)
         session["user_id"] = self.id
@@ -207,6 +220,14 @@ class User(JSONModel, UserMixin):
     def has_permissions(
         self, *permissions, restrict_admin_usage=False, allow_org_user=False
     ):
+        # TODO need this for load test, but breaks unit tests
+        if self.platform_admin and os.getenv("NOTIFY_ENVIRONMENT") in (
+            "development",
+            "staging",
+            "demo",
+        ):
+            return True
+
         unknown_permissions = set(permissions) - all_ui_permissions
         if unknown_permissions:
             raise TypeError(
@@ -220,7 +241,9 @@ class User(JSONModel, UserMixin):
         if not service_id and not org_id:
             # we shouldn't have any pages that require permissions, but don't specify a service or organization.
             # use @user_is_platform_admin for platform admin only pages
-            raise NotImplementedError
+            # raise NotImplementedError
+            current_app.logger.warn(f"VIEW ARGS ARE {request.view_args}")
+            pass
 
         log_msg = f"has_permissions user: {self.id} service: {service_id}"
         # platform admins should be able to do most things (except eg send messages, or create api keys)

app/navigation.py

@@ -123,6 +123,7 @@ class HeaderNavigation(Navigation):
             "get_billing_report",
             "get_users_report",
             "get_daily_volumes",
+            "download_all_users",
             "get_daily_sms_provider_volumes",
             "get_volumes_by_service",
             "organizations",
@@ -153,6 +154,9 @@ class HeaderNavigation(Navigation):
 
 class MainNavigation(Navigation):
     mapping = {
+        "activity": {
+            "all_jobs_activity",
+        },
         "dashboard": {
             "conversation",
             "inbox",

app/notify_client/__init__.py

@@ -1,4 +1,6 @@
-from flask import abort, has_request_context, request
+import os
+
+from flask import abort, current_app, has_request_context, request
 from flask_login import current_user
 from notifications_python_client import __version__
 from notifications_python_client.base import BaseAPIClient
@@ -54,16 +56,47 @@ class NotifyAdminAPIClient(BaseAPIClient):
         ):
             abort(403)
 
+    def is_calling_signin_url(self, arg):
+        return arg.startswith("('/user")
+
+    def check_inactive_user(self, *args):
+        still_signing_in = False
+
+        # TODO clean up and add testing etc.
+        # We really should be checking for exact matches
+        # and we only want to check the first arg
+        for arg in args:
+            arg = str(arg)
+            if self.is_calling_signin_url(arg):
+                still_signing_in = True
+
+            # This seems to be a weird edge case that happens intermittently with invites
+            if str(arg) == "()":
+                still_signing_in = True
+        # TODO:  Update this once E2E tests are managed by a feature flag or some other main config option.
+        if os.getenv("NOTIFY_E2E_TEST_EMAIL"):
+            # allow end-to-end tests to skip check
+            pass
+        elif still_signing_in is True:
+            # we are not full signed in yet
+            pass
+        elif not current_user or not current_user.is_active:
+            current_app.logger.error(f"Unauthorized URL #notify-compliance-46 {args}")
+            abort(403)
+
     def post(self, *args, **kwargs):
         self.check_inactive_service()
+        self.check_inactive_user(args)
         return super().post(*args, **kwargs)
 
     def put(self, *args, **kwargs):
         self.check_inactive_service()
+        self.check_inactive_user()
         return super().put(*args, **kwargs)
 
     def delete(self, *args, **kwargs):
         self.check_inactive_service()
+        self.check_inactive_user()
         return super().delete(*args, **kwargs)
 
 

app/notify_client/job_api_client.py

@@ -27,9 +27,7 @@ class JobApiClient(NotifyAdminAPIClient):
 
     def get_job(self, service_id, job_id):
         params = {}
-        job = self.get(
-            url="/service/{}/job/{}".format(service_id, job_id), params=params
-        )
+        job = self.get(url=f"/service/{service_id}/job/{job_id}", params=params)
 
         return job
 
@@ -40,13 +38,14 @@ class JobApiClient(NotifyAdminAPIClient):
         if statuses is not None:
             params["statuses"] = ",".join(statuses)
 
-        return self.get(url="/service/{}/job".format(service_id), params=params)
+        job = self.get(url=f"/service/{service_id}/job", params=params)
+        return job
 
     def get_uploads(self, service_id, limit_days=None, page=1):
         params = {"page": page}
         if limit_days is not None:
             params["limit_days"] = limit_days
-        return self.get(url="/service/{}/upload".format(service_id), params=params)
+        return self.get(url=f"/service/{service_id}/upload", params=params)
 
     def has_sent_previously(
         self, service_id, template_id, template_version, original_file_name

app/notify_client/user_api_client.py

@@ -2,6 +2,7 @@ from flask import current_app
 from notifications_python_client.errors import HTTPError
 
 from app.notify_client import NotifyAdminAPIClient, cache
+from app.utils import hilite
 from app.utils.user_permissions import translate_permissions_from_ui_to_db
 
 ALLOWED_ATTRIBUTES = {
@@ -109,13 +110,14 @@ class UserApiClient(NotifyAdminAPIClient):
             raise
 
     def send_verify_code(self, user_id, code_type, to, next_string=None):
+
         data = {"to": to}
         if next_string:
             data["next"] = next_string
         if code_type == "email":
             data["email_auth_link_host"] = self.admin_url
         endpoint = "/user/{0}/{1}-code".format(user_id, code_type)
-        current_app.logger.warn(f"Sending verify_code {code_type} to {user_id}")
+        current_app.logger.warn(hilite(f"Sending verify_code {code_type} to {user_id}"))
         self.post(endpoint, data=data)
 
     def send_verify_email(self, user_id, to):
@@ -157,6 +159,10 @@ class UserApiClient(NotifyAdminAPIClient):
         endpoint = "/user"
         return self.get(endpoint)["data"]
 
+    def get_all_users_detailed(self):
+        endpoint = "/user/report-all-users"
+        return self.get(endpoint)["data"]
+
     @cache.delete("service-{service_id}")
     @cache.delete("service-{service_id}-template-folders")
     @cache.delete("user-{user_id}")
@@ -217,6 +223,10 @@ class UserApiClient(NotifyAdminAPIClient):
     def activate_user(self, user_id):
         return self.post("/user/{}/activate".format(user_id), data=None)
 
+    @cache.delete("user-{user_id}")
+    def deactivate_user(self, user_id):
+        return self.post("/user/{}/deactivate".format(user_id), data=None)
+
     def send_change_email_verification(self, user_id, new_email):
         endpoint = "/user/{}/change-email-verification".format(user_id)
         data = {"email": new_email}

app/templates/base.html

@@ -10,7 +10,7 @@
         {% block per_page_title %}{% endblock %} – Notify.gov
       {% endblock %}
     </title>
-    {% include "new/components/head.html" %}
+    {% include "components/head.html" %}
   </head>
   <body class="usa-template__body {{ bodyClasses }}">
     <script nonce="{{ csp_nonce() }}">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
@@ -32,8 +32,8 @@
 
 
     {% block header %}
-      {% include 'new/components/usa_banner.html' %}
-      {% include 'new/components/header.html' %}
+      {% include 'components/usa_banner.html' %}
+      {% include 'components/header.html' %}
     {% endblock %}
 
     {% block main %}
@@ -47,7 +47,7 @@
       {% endblock %}
         {% block content %}
           {% block flash_messages %}
-            {% include 'new/components/flash_messages.html' %}
+            {% include 'components/flash_messages.html' %}
           {% endblock %}
           {% block maincolumn_content %}
               <div class="grid-row">
@@ -78,7 +78,7 @@
         {% set meta_suffix = "Built by the " + long_link + commit_hash %}
       {% endif %}
 
-      {% include "new/components/footer.html" %}
+      {% include "components/footer.html" %}
 
       {% if current_user.is_authenticated %}
         {% block sessionUserWarning %}

app/templates/components/components/footer/README.md

@@ -1,15 +0,0 @@
-# Footer
-
-## Installation
-
-See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
-
-## Guidance and Examples
-
-Find out when to use the footer component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/footer).
-
-## Component options
-
-Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
-
-See [options table](https://design-system.service.gov.uk/components/footer/#options-example-default) for details.

app/templates/components/components/footer/macro-options.json

@@ -1,115 +0,0 @@
-[
-    {
-        "name": "meta",
-        "type": "object",
-        "required": false,
-        "description": "Object containing options for the meta navigation.",
-        "params": [
-            {
-                "name": "visuallyHiddenTitle",
-                "type": "string",
-                "description": "Title for a meta item section, which defaults to Support links"
-            },
-            {
-                "name": "html",
-                "type": "string",
-                "description": "HTML to add to the meta section of the footer, which will appear below any links specified using meta.items."
-            },
-            {
-                "name": "text",
-                "type": "string",
-                "description": "Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored."
-            },
-            {
-                "name": "items",
-                "type": "array",
-                "required": false,
-                "description": "Array of items for use in the meta section of the footer.",
-                "params": [
-                    {
-                        "name": "text",
-                        "type": "string",
-                        "required": false,
-                        "description": "List item text in the meta section of the footer."
-                    },
-                    {
-                        "name": "href",
-                        "type": "string",
-                        "required": false,
-                        "description": "List item href attribute in the meta section of the footer."
-                    },
-                    {
-                        "name": "attributes",
-                        "type": "object",
-                        "required": false,
-                        "description": "HTML attributes (for example data attributes) to add to the anchor in the footer meta section."
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        "name": "navigation",
-        "type": "array",
-        "required": false,
-        "description": "Array of items for use in the navigation section of the footer.",
-        "params": [
-            {
-                "name": "title",
-                "type": "string",
-                "required": false,
-                "description": "Title for a section"
-            },
-            {
-                "name": "columns",
-                "type": "integer",
-                "required": false,
-                "description": "Amount of columns to display items in navigation section of the footer."
-            },
-            {
-                "name": "items",
-                "type": "array",
-                "required": false,
-                "description": "Array of items to display in the list in navigation section of the footer.",
-                "params": [
-                    {
-                        "name": "text",
-                        "type": "string",
-                        "required": false,
-                        "description": "List item text in the navigation section of the footer."
-                    },
-                    {
-                        "name": "href",
-                        "type": "string",
-                        "required": false,
-                        "description": "List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link."
-                    },
-                    {
-                        "name": "attributes",
-                        "type": "object",
-                        "required": false,
-                        "description": "HTML attributes (for example data attributes) to add to the anchor in the footer navigation section."
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        "name": "containerClasses",
-        "type": "string",
-        "required": false,
-        "description": "Classes that can be added to the inner container, useful if you want to make the footer full width."
-    },
-    {
-        "name": "classes",
-        "type": "string",
-        "required": false,
-        "description": "Classes to add to the footer component container."
-    },
-    {
-        "name": "attributes",
-        "type": "object",
-        "required": false,
-        "description": "HTML attributes (for example data attributes) to add to the footer component container."
-    }
-]

app/templates/components/components/footer/macro.njk

@@ -1,3 +0,0 @@
-{% macro usaFooter(params) %}
-  {%- include "./template.njk" -%}
-{% endmacro %}

app/templates/components/components/footer/template.njk

@@ -1,85 +0,0 @@
-<footer class="usa-footer usa-footer--big">
-  {# <div class="grid-container usa-footer__return-to-top">
-    <a href="#">Return to top</a>
-  </div> #}
-  <div class="usa-footer__primary-section">
-    <div class="grid-container">
-      <div class="padding-y-1">
-          {% if params.meta %}
-          <h2 class="usa-sr-only">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
-          {% if params.meta.items %}
-            {% for item in params.meta.items %}
-              <a class="usa-footer__link" href="{{ item.href }}" {% for attribute, value in item.attributes %}
-                {{attribute}}="{{value}}" {% endfor %}>
-                {{ item.text }}
-              </a>
-            {% endfor %}
-          {% endif %}
-          {% if params.meta.text or params.meta.html %}
-          <div>
-            {{ params.meta.html | safe if params.meta.html else params.meta.text }}
-          </div>
-          {% endif %}
-          {% endif %}
-        </div>
-      </div>
-    </div>
-  </div>
-</footer>
-
-<div class="usa-identifier site-identifier">
-  <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier,,,,,,">
-    <div class="usa-identifier__container">
-      <div class="usa-identifier__logos"><a href="javascript:void(0);" class="usa-identifier__logo">
-          <img class="usa-identifier__logo-img" src="{{ params.assetsPath | default('/static/images') }}/gsa-logo.svg"  alt="GSA Logo" role="img" width="48"
-            height="48">
-        </a></div>
-      <section class="usa-identifier__identity" aria-label="Agency description">
-        <p class="usa-identifier__identity-domain">beta.notify.gov</p>
-        <p class="usa-identifier__identity-disclaimer">An official website of the <a href="https://gsa.gov">General
-            Services Administration</a></p>
-      </section>
-    </div>
-  </section>
-  <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links">
-    <div class="usa-identifier__container">
-      <ul class="usa-identifier__required-links-list">
-        <li class="usa-identifier__required-links-item">
-          <a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link">About GSA</a>
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="https://www.gsa.gov/website-information/accessibility-aids"
-            class="usa-identifier__required-link">Accessibility support</a>
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia"
-            class="usa-identifier__required-link">FOIA requests</a>
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002"
-            class="usa-identifier__required-link">No FEAR Act data</a>
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="https://www.gsaig.gov/" class="usa-identifier__required-link">Office of the Inspector General</a>
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="https://www.gsa.gov/reference/reports/budget-performance"
-            class="usa-identifier__required-link">Performance reports</a>
-        </li>
-        <li class="usa-identifier__required-links-item">
-          <a href="https://www.gsa.gov/website-information/website-policies"
-            class="usa-identifier__required-link">Privacy policy</a>
-        </li>
-      </ul>
-    </div>
-  </nav>
-  <section class="usa-identifier__section usa-identifier__section--usagov"
-    aria-label="Government information and services">
-    <div class="usa-identifier__container">
-      <div class="usa-identifier__usagov-description">
-        Looking for U.S. government information and services?
-      </div>
-      <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
-    </div>
-  </section>
-</div>

app/templates/components/components/header/README.md

@@ -1,15 +0,0 @@
-# Header
-
-## Installation
-
-See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
-
-## Guidance and Examples
-
-Find out when to use the header component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/header).
-
-## Component options
-
-Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
-
-See [options table](https://design-system.service.gov.uk/components/header/#options-example-default) for details.

app/templates/components/components/header/macro-options.json

@@ -1,88 +0,0 @@
-[
-    {
-        "name": "homepageUrl",
-        "type": "string",
-        "required": false,
-        "description": "The url of the homepage. Defaults to /"
-    },
-    {
-        "name": "assetsPath",
-        "type": "string",
-        "required": false,
-        "description": "The public path for the assets folder. If not provided it defaults to /assets/images"
-    },
-    {
-        "name": "productName",
-        "type": "string",
-        "required": false,
-        "description": "Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify)"
-    },
-    {
-        "name": "serviceName",
-        "type": "string",
-        "required": false,
-        "description": "Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify)"
-    },
-    {
-        "name": "serviceUrl",
-        "type": "string",
-        "required": false,
-        "description": "Url for the service name anchor."
-    },
-    {
-        "name": "navigation",
-        "type": "array",
-        "required": false,
-        "description": "An array of navigation item objects.",
-        "params": [
-            {
-                "name": "text",
-                "type": "string",
-                "required": false,
-                "description": "Text of the navigation item."
-            },
-            {
-                "name": "href",
-                "type": "string",
-                "required": false,
-                "description": "Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item."
-            },
-            {
-                "name": "active",
-                "type": "boolean",
-                "required": false,
-                "description": "Flag to mark the navigation item as active or not."
-            },
-            {
-                "name": "attributes",
-                "type": "object",
-                "required": false,
-                "description": "HTML attributes (for example data attributes) to add to the navigation item anchor."
-            }
-        ]
-    },
-    {
-        "name": "navigationClasses",
-        "type": "string",
-        "required": false,
-        "description": "Classes for the navigation section of the header."
-    },
-    {
-        "name": "containerClasses",
-        "type": "string",
-        "required": false,
-        "description": "Classes for the container, useful if you want to make the header fixed width."
-    },
-    {
-        "name": "classes",
-        "type": "string",
-        "required": false,
-        "description": "Classes to add to the header container."
-    },
-    {
-        "name": "attributes",
-        "type": "object",
-        "required": false,
-        "description": "HTML attributes (for example data attributes) to add to the header container."
-    }
-]

app/templates/components/components/header/macro.njk

@@ -1,3 +0,0 @@
-{% macro usaHeader(params) %}
-  {%- include "./template.njk" -%}
-{% endmacro %}

app/templates/components/components/header/template.njk

@@ -1,105 +0,0 @@
-<!-- usa banner -->
-<section class="usa-banner site-banner" aria-label="Official website of the United States government,,,,,,">
-  <div class="usa-accordion">
-    <header class="usa-banner__header">
-      <div class="usa-banner__inner">
-        <div class="grid-col-auto">
-          <img aria-hidden="true" class="usa-banner__header-flag" src="/static/img/us_flag_small.png" alt="" />
-        </div>
-        <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
-          <p class="usa-banner__header-text">An official website of the United States government</p>
-          <p class="usa-banner__header-action">Here’s how you know</p>
-        </div>
-        <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
-          <span class="usa-banner__button-text">Here’s how you know</span>
-        </button>
-      </div>
-    </header>
-    <div class="usa-banner__content usa-accordion__content" id="gov-banner" hidden="">
-      <div class="grid-row grid-gap-lg">
-        <div class="usa-banner__guidance tablet:grid-col-6">
-          <img class="usa-banner__icon usa-media-block__img" src="/static/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
-          <div class="usa-media-block__body">
-            <p>
-              <strong>Official websites use .gov</strong>
-              <br>
-              A <strong>.gov</strong> website belongs to an official government organization in the United States.
-            </p>
-          </div>
-        </div>
-        <div class="usa-banner__guidance tablet:grid-col-6">
-          <img class="usa-banner__icon usa-media-block__img" src="/static/img/icon-https.svg" role="img" alt="" aria-hidden="true">
-          <div class="usa-media-block__body">
-            <p>
-              <strong>Secure .gov websites use HTTPS</strong>
-              <br>
-              A <strong>lock</strong> ( <span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description" focusable="false"><title id="banner-lock-title">Lock</title><desc id="banner-lock-description">Locked padlock</desc><path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"></path></svg></span> ) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- usa header -->
-<header class="usa-header usa-header--extended">
-  <div class="usa-nav-container">
-    <div class="usa-navbar">
-      <div class="usa-logo display-flex flex-align-center flex-justify" id="-logo">
-        <div class="logo-img display-flex">
-          <a href="/">
-            <span class="usa-sr-only">Notify.gov logo</span>
-            <image src="{{ params.assetsPath | default('/static/images') }}/notify-logo.png" alt="Notify.gov logo" xlink:href=""
-              class="usa-flag-logo margin-right-1"></image>
-          </a>
-        </div>
-        {% if params.navigation %}
-          <button type="button" class="usa-menu-btn">Menu</button>
-        {% endif %}
-      </div>
-    </div>
-    <nav aria-label="Primary navigation" class="usa-nav">
-      <div class="usa-nav__inner">
-        <button type="button" class="usa-nav__close">
-          <img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
-        </button>
-        <ul class="usa-nav__primary usa-accordion margin-right-1">
-          {% for item in params.navigation %}
-            {% if item.href and item.text %}
-            <li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
-              <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
-                item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
-                <span>{{ item.text }}</span>
-              </a>
-            </li>
-            {% endif %}
-          {% endfor %}
-        </ul>
-        <div class="usa-nav__secondary margin-bottom-6">
-          <ul class="usa-nav__secondary-links">
-            {% for item in params.secondaryNavigation %}
-              {% if item.href and item.text %}
-                <li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
-                  <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
-                    item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
-                    <span>{{ item.text }}</span>
-                  </a>
-                </li>
-            {% endif %}
-          {% endfor %}
-          </ul>
-          <!-- <section aria-label="Search component">
-            <form class="usa-search usa-search--small margin-bottom-2" role="search">
-              <label class="usa-sr-only" for="search-field">Search</label>
-              <input class="usa-input" id="search-field" type="search" name="search" />
-              <button class="usa-button" type="submit">
-                <img src="/static/images/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" />
-              </button>
-            </form>
-          </section> -->
-        </div>
-      </div>
-    </nav>
-  </div>
-</header>

app/templates/components/footer.html

@@ -58,6 +58,20 @@
         </ul>
       </div>
     </nav>
+    <section class="usa-identifier__section usa-identifier__section--usagov"
+      aria-label="Github Repos">
+      <div class="usa-identifier__container">
+        <div class="usa-identifier__required-links-item">
+          Find us on Github:
+        </div>
+        <ul>
+          <li><a href="https://github.com/gsa/notifications-admin" class="usa-identifier__required-link">Notify.gov Admin repo</a></li>
+        <li><a href="https://github.com/gsa/notifications-api" class="usa-identifier__required-link">Notify.gov API repo</a></li>
+      </ul>
+
+      </div>
+    </section>
+
     <section class="usa-identifier__section usa-identifier__section--usagov"
       aria-label="Government information and services">
       <div class="usa-identifier__container">

app/templates/components/head.html

@@ -11,17 +11,16 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
 
-    <link rel="shortcut icon" href="{{ assetPath | default('/assets') }}/images/favicon.ico" />
-    <link rel="icon" type="image/png" sizes="32x32" href="{{ assetPath | default('/assets') }}/images/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="{{ assetPath | default('/assets') }}/images/favicon-16x16.png" />
-    <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/safari-pinned-tab.svg" color="#5bbad5">
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
-    <link rel="manifest" href="/site.webmanifest">
+    <link rel="shortcut icon" href="{{ assetPath | default('/static') }}/images/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ assetPath | default('/static') }}/images/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ assetPath | default('/static') }}/images/favicon-16x16.png" />
+    <link rel="mask-icon" href="{{ assetPath | default('/static') }}/images/safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/static') }}/images/apple-touch-icon.png">
+    <link rel="manifest" href="{{ asset_url('images/site.webmanifest') }}">
     <meta name="msapplication-TileColor" content="#da532c">
-    <link href="{{ assetPath | default('/assets') }}/images/notify-dark-favicon.png" rel="icon" media="(prefers-color-scheme: dark)">
+    <link href="{{ assetPath | default('/static') }}/images/notify-dark-favicon.png" rel="icon" media="(prefers-color-scheme: dark)">
     <meta name="theme-color" content="#ffffff">
 
-
     <link rel="stylesheet" media="screen" href="{{ asset_url('css/styles.css') }}" />
     {% block extra_stylesheets %}{% endblock %}
 
@@ -31,7 +30,7 @@
     <meta property="og:image" content="/static/images/notify-og-image.png">
     {# google #}
     <script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script>
-    <meta name="google-site-verification" content="niWnSqImOWz6mVQTYqNb5tFK8HaKSB4b3ED4Z9gtUQ0" />
+    <meta name="google-site-verification" content="niWnSqImOWz6mVQTYqNb5tFK8HaKSB4b3ED4Z9gtUQ0" /> {# pragma: allowlist secret #}
     {% if g.hide_from_search_engines %}
     <meta name="robots" content="noindex" />
     {% endif %}

app/templates/components/header.html

@@ -1,4 +1,3 @@
-{# setting navigation and secondarynavigation #}
 {% if current_user.is_authenticated %}
   {% set navigation = [
     {"href": url_for("main.show_accounts_or_dashboard"), "text": "Current service", "active": header_navigation.is_selected('accounts-or-dashboard')},
@@ -14,16 +13,22 @@
   {% endif %}
 
   {% if current_service %}
-    {% set secondaryNavigation = [
-        {"href": url_for('main.service_settings', service_id=current_service.id), "text": "Settings", "active": secondary_navigation.is_selected('settings')},
+    {% if current_user.has_permissions('manage_service') %}
+      {% set secondaryNavigation = [
+          {"href": url_for('main.service_settings', service_id=current_service.id), "text": "Settings", "active": secondary_navigation.is_selected('settings')},
+          {"href": url_for('main.sign_out'), "text": "Sign out"}
+      ] %}
+    {% else %}
+      {% set secondaryNavigation = [
         {"href": url_for('main.sign_out'), "text": "Sign out"}
-    ] %}
+      ] %}
+
+    {% endif %}
   {% else %}
     {% set secondaryNavigation = [{"href": url_for('main.sign_out'), "text": "Sign out"}] %}
   {% endif %}
 {% endif %}
 
-{# usa header #}
 <header class="usa-header usa-header--extended">
   <div class="usa-nav-container">
     <div class="usa-navbar">
@@ -31,7 +36,7 @@
         <div class="logo-img display-flex">
           <a href="/">
             <span class="usa-sr-only">Notify.gov logo</span>
-            <img src="{{ (asset_path | default('/static')) + 'images/notify-logo.png' }}" alt="Notify.gov logo" class="usa-flag-logo margin-right-1">
+            <img src="{{ (asset_path | default('/static')) + 'images/notify-logo.svg' }}" alt="Notify.gov logo" class="usa-flag-logo margin-right-1">
 
           </a>
         </div>
@@ -43,7 +48,7 @@
     <nav aria-label="Primary navigation" class="usa-nav">
       <div class="usa-nav__inner">
         <button type="button" class="usa-nav__close">
-          <img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
+          <img src="{{ asset_url('img/usa-icons/close.svg') }}" role="img" alt="Close" />
         </button>
         <ul class="usa-nav__primary usa-accordion margin-right-1">
           {% for item in navigation %}

app/templates/components/main_nav.html

@@ -8,19 +8,11 @@
   {% if current_user.has_permissions() %}
     {% if current_user.has_permissions('view_activity') %}
       <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('dashboard') }}" href="{{ url_for('.service_dashboard', service_id=current_service.id) }}">Dashboard</a></li>
+      <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('activity') }}" href="{{ url_for('.all_jobs_activity', service_id=current_service.id) }}">Activity</a></li>
     {% endif %}
     {% if not current_user.has_permissions('view_activity') %}
       <li class="usa-sidenav__item"><a class="{{ casework_navigation.is_selected('sent-messages') }}" href="{{ url_for('.view_notifications', service_id=current_service.id, status='sending,delivered,failed') }}">Sent messages</a></li>
     {% endif %}
-    {% if current_user.has_permissions('manage_service', allow_org_user=True) %}
-      {# <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li> #}
-    {% endif %}
-    <!-- {% if current_user.has_permissions('manage_api_keys', 'manage_service') %}
-      <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('settings') }}" href="{{ url_for('.service_settings', service_id=current_service.id) }}">Settings</a></li>
-    {% endif %} -->
-    {% if current_user.has_permissions('manage_api_keys') %}
-      <!-- <li><a class="usa-link{{ main_navigation.is_selected('api-integration') }}" href="{{ url_for('.api_integration', service_id=current_service.id) }}">API integration</a></li> -->
-    {% endif %}
   {% elif current_user.has_permissions(allow_org_user=True) %}
     <li class="usa-sidenav__item"><a class="usa-link{{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li>
     <li class="usa-sidenav__item"><a class="usa-link{{ main_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>

app/templates/components/table.html

@@ -6,7 +6,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 %}" width="{% if equal_length %}{{ (100 / field_headings|length)|int }}%{% endif %}">
+          <th 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 %}
@@ -79,9 +79,9 @@
 {%- endmacro %}
 
 {% macro row_heading() -%}
-  <th class="table-field">
+  <td>
     {{ caller() }}
-  </th>
+  </td>
 {%- endmacro %}
 
 {% macro index_field(text=None, rowspan=None) -%}

app/templates/components/usa_banner.html

@@ -1,5 +1,3 @@
-
-{# usa banner #}
 <section class="usa-banner site-banner" aria-label="Official website of the United States government,,,,,,">
   <div class="usa-accordion">
     <header class="usa-banner__header">

app/templates/old/admin_template.html

@@ -1,302 +0,0 @@
-{% extends "main_template.html" %}
-{% from "components/banner.html" import banner %}
-
-{% block headIcons %}
-  <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
-  <link rel="mask-icon" href="{{ asset_url('images/usa-mask-icon.svg') }}" color="{{ themeColor | default('#F0F0F0') }}">
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ asset_url('images/apple-touch-icon.png') }}">
-  <link rel="apple-touch-icon" href="{{ asset_url('images/apple-touch-icon.png') }}">
-{% endblock %}
-
-{% block head %}
-  <link rel="stylesheet" media="screen" href="{{ asset_url('css/styles.css') }}" />
-  {% block extra_stylesheets %}
-  {% endblock %}
-  {% if g.hide_from_search_engines %}
-    <meta name="robots" content="noindex" />
-  {% endif %}
-  <meta name="google-site-verification" content="niWnSqImOWz6mVQTYqNb5tFK8HaKSB4b3ED4Z9gtUQ0" />
-  {% block meta_format_detection %}
-    <meta name="format-detection" content="telephone=no">
-  {% endblock %}
-  {% block meta %}
-    <meta property="og:site_name" content="Notify.gov">
-    <meta property="og:image" content="{{ asset_url('images/notify-og-image.png') }}">
-  {% endblock %}
-  <script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script>
-{% endblock %}
-
-{% block pageTitle %}
-   {% block per_page_title %}{% endblock %} – Notify.gov
-{% endblock %}
-
-{% block bodyStart %}
-  {% block extra_javascripts_before_body %}
-  <!-- Google Tag Manager (noscript) -->
-  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WX5NGWF"
-  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-  <!-- End Google Tag Manager (noscript) -->
-  {% endblock %}
-{% endblock %}
-
-{% block header %}
-  {% if current_user.is_authenticated %}
-    {% if current_user.platform_admin %}
-      {% set navigation = [
-        {
-          "href": url_for("main.show_accounts_or_dashboard"),
-          "text": "Current service",
-          "active": header_navigation.is_selected('accounts-or-dashboard')
-        },
-        {
-          "href": url_for('main.get_started'),
-          "text": "Using Notify",
-          "active": header_navigation.is_selected('using_notify')
-        },
-        {
-          "href": url_for('main.features'),
-          "text": "Features",
-          "active": header_navigation.is_selected('features')
-        },
-        {
-          "href": url_for('main.platform_admin_splash_page'),
-          "text": "Platform admin",
-          "active": header_navigation.is_selected('platform-admin')
-        },
-        {
-          "href": url_for('main.support'),
-          "text": "Contact us",
-          "active": header_navigation.is_selected('support')
-        }
-      ] %}
-      {% if current_service %}
-        {% set secondaryNavigation = [
-          {
-            "href": url_for('main.service_settings', service_id=current_service.id),
-            "text": "Settings",
-            "active": secondary_navigation.is_selected('settings')
-          },
-          {
-            "href": url_for('main.sign_out'),
-            "text": "Sign out"
-          }
-      ] %}
-      {% else %}
-        {% set secondaryNavigation = [
-          {
-            "href": url_for('main.sign_out'),
-            "text": "Sign out"
-          }
-        ] %}
-      {% endif %}
-    {% else %}
-      {% set navigation = [
-        {
-          "href": url_for("main.show_accounts_or_dashboard"),
-          "text": "Current service",
-          "active": header_navigation.is_selected('accounts-or-dashboard')
-        },
-        {
-          "href": url_for('main.get_started'),
-          "text": "Using Notify",
-          "active": header_navigation.is_selected('using_notify')
-        },
-        {
-          "href": url_for('main.features'),
-          "text": "Features",
-          "active": header_navigation.is_selected('features')
-        },
-        {
-          "href": url_for('main.support'),
-          "text": "Contact us",
-          "active": header_navigation.is_selected('support')
-        },
-        {
-          "href": url_for('main.user_profile'),
-          "text": "User profile",
-          "active": header_navigation.is_selected('user-profile')
-        }
-      ] %}
-      {% if current_service %}
-        {% set secondaryNavigation = [
-          {
-            "href": url_for('main.service_settings', service_id=current_service.id),
-            "text": "Settings",
-            "active": secondary_navigation.is_selected('settings')
-          },
-          {
-            "href": url_for('main.sign_out'),
-            "text": "Sign out"
-          }
-        ] %}
-        {% else %}
-          {% set secondaryNavigation = [
-            {
-            "href": url_for('main.sign_out'),
-            "text": "Sign out"
-            }
-          ] %}
-        {% endif %}
-      {% endif %}
-  {% else %}
-  <!-- Add navigation back after pilot -->
-    {# {% set navigation = [
-      {
-        "href": url_for('main.get_started'),
-        "text": "Using Notify",
-        "active": header_navigation.is_selected('using_notify')
-      },
-      {
-        "href": url_for('main.features'),
-        "text": "Features",
-        "active": header_navigation.is_selected('features')
-      },
-      {
-        "href": url_for('main.support'),
-        "text": "Contact us",
-        "active": header_navigation.is_selected('support')
-      },
-      {
-        "href": url_for('main.sign_in'),
-        "text": "Sign in",
-        "active": header_navigation.is_selected('sign-in')
-      }
-    ] %} #}
-  {% endif %}
-
-  {{ usaHeader({
-    "homepageUrl": url_for('main.show_accounts_or_dashboard'),
-    "productName": "Notify",
-    "navigation": navigation,
-    "navigationClasses": "govuk-header__navigation--end",
-    "secondaryNavigation": secondaryNavigation,
-    "assetsPath": asset_path + "images"
-  }) }}
-{% endblock %}
-
-{% block footer %}
-  <!-- lines 179 - 251 can all be deleted and replaced with {% include "new/components/footer.html" %} -->
-  {% if current_service and current_service.research_mode %}
-    {% set meta_suffix = 'Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a><span id="research-mode" class="research-mode">research mode</span>' %}
-  {% else %}
-    {% set commit_hash = ", Latest version: " + config['COMMIT_HASH'] %}
-    {% set long_link = '<a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="usa-link">Technology Transformation Services</a>' %}
-    {% set meta_suffix = "Built by the " + long_link + commit_hash %}
-  {% endif %}
-
-  {{ usaFooter({
-    "classes": "js-footer",
-    "navigation": [
-      {
-        "title": "About Notify",
-        "columns": 1,
-        "items": [
-          {
-            "href": url_for("main.features"),
-            "text": "Features"
-          },
-          {
-            "href": url_for("main.roadmap"),
-            "text": "Roadmap"
-          },
-          {
-            "href": url_for("main.security"),
-            "text": "Security"
-          },
-        ]
-      },
-      {
-        "title": "Using Notify",
-        "columns": 1,
-        "items": [
-          {
-            "href": url_for("main.get_started"),
-            "text": "Get started"
-          },
-          {
-            "href": url_for("main.pricing"),
-            "text": "Pricing"
-          },
-          {
-            "href": url_for("main.trial_mode_new"),
-            "text": "Trial mode"
-          },
-          {
-            "href": url_for("main.message_status"),
-            "text": "Delivery status"
-          },
-          {
-            "href": url_for("main.guidance_index"),
-            "text": "Guidance"
-          },
-          {
-            "href": url_for("main.documentation"),
-            "text": "API documentation"
-          }
-        ]
-      },
-      {
-        "title": "Support",
-        "columns": 1,
-        "items": [
-          {
-            "href": url_for('main.support'),
-            "text": "Contact us"
-          }
-        ]
-      },
-    ],
-    "meta": {
-      "items": meta_items,
-      "html": meta_suffix
-    }
-  }) }}
-  {% if current_user.is_authenticated %}
-    {% block sessionUserWarning %}
-    <dialog class="usa-modal" id="sessionTimer" aria-labelledby="sessionTimerHeading" aria-describedby="timerWarning">
-      <div class="usa-modal__content">
-        <div class="usa-modal__main">
-          <h2 class="usa-modal__heading" id="sessionTimerHeading">
-            Your session will end soon.
-            <span class="usa-sr-only">Please choose to extend your session or sign out. Your session will expire in 5 minutes or less.</span>
-          </h2>
-          <div class="usa-prose">
-            <p>You have been inactive for too long.
-              Your session will expire in <span id="timeLeft" role="timer"></span>.
-            </p>
-          </div>
-          <div class="usa-modal__footer">
-            <ul class="usa-button-group">
-              <li class="usa-button-group__item">
-                <button type="button" class="usa-button" id="extendSessionTimer" data-close-modal>
-                  Extend Session
-                </button>
-              </li>
-              <li class="usa-button-group__item">
-                <button type="button" class="usa-button usa-button--unstyled padding-105 text-center" id="logOutTimer"
-                  data-close-modal>
-                  Sign out
-                </button>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </dialog>
-    {% endblock %}
-  {% endif %}
-
-{% endblock %}
-
-
-{% block bodyEnd %}
-  {% block extra_javascripts %}
-
-  {% endblock %}
-  <!--[if gt IE 8]><!-->
-  <script type="text/javascript" src="{{ asset_url('javascripts/all.js') }}"></script>
-  <script type="text/javascript" src="{{ asset_url('js/uswds.min.js') }}"></script>
-
-  <!--<![endif]-->
-
-{% endblock %}

app/templates/old/content_template.html

@@ -1,28 +0,0 @@
-{% extends "base.html" %}
-{% from "components/sub-navigation.html" import sub_navigation %}
-{% from "components/page-header.html" import page_header %}
-
-{% block per_page_title %}
-  {{ content_page_title }}
-{% endblock %}
-
-{% block maincolumn_content %}
-
-  <div class="grid-row">
-
-    {% if navigation_links %}
-      <div class="tablet:grid-col-2 margin-bottom-4">
-        {{ sub_navigation(navigation_links) }}
-      </div>
-      <div class="tablet:grid-col-10 tablet:padding-left-4 usa-prose site-prose">
-    {% else %}
-      <div class="tablet:grid-col-10">
-    {% endif %}
-
-    {% block content_column_content %}
-    {% endblock %}
-
-    </div>
-  </div>
-
-{% endblock %}

app/templates/old/main_nav.html

@@ -1,32 +0,0 @@
-{# This template is an old version #}
-{% if help %}
-  {% include 'partials/tour.html' %}
-{% else %}
-<nav class="nav margin-bottom-4">
-  <a class="usa-button margin-top-1 margin-bottom-5 width-full"
-    href="{{ url_for('.choose_template', service_id=current_service.id) }}">Send messages</a>
-  <ul class="usa-sidenav">
-  {% if current_user.has_permissions() %}
-    {% if current_user.has_permissions('view_activity') %}
-      <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('dashboard') }}" href="{{ url_for('.service_dashboard', service_id=current_service.id) }}">Dashboard</a></li>
-    {% endif %}
-      {# <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('templates') }}" href="{{ url_for('.choose_template', service_id=current_service.id) }}">Send messages</a></li> #}
-    {% if not current_user.has_permissions('view_activity') %}
-      <li class="usa-sidenav__item"><a class="{{ casework_navigation.is_selected('sent-messages') }}" href="{{ url_for('.view_notifications', service_id=current_service.id, status='sending,delivered,failed') }}">Sent messages</a></li>
-    {% endif %}
-    {% if current_user.has_permissions('manage_service', allow_org_user=True) %}
-      {# <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li> #}
-    {% endif %}
-    <!-- {% if current_user.has_permissions('manage_api_keys', 'manage_service') %}
-      <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('settings') }}" href="{{ url_for('.service_settings', service_id=current_service.id) }}">Settings</a></li>
-    {% endif %} -->
-    {% if current_user.has_permissions('manage_api_keys') %}
-      <!-- <li><a class="usa-link{{ main_navigation.is_selected('api-integration') }}" href="{{ url_for('.api_integration', service_id=current_service.id) }}">API integration</a></li> -->
-    {% endif %}
-  {% elif current_user.has_permissions(allow_org_user=True) %}
-    <li class="usa-sidenav__item"><a class="usa-link{{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li>
-    <li class="usa-sidenav__item"><a class="usa-link{{ main_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
-  {% endif %}
-  </ul>
-</nav>
-{% endif %}

app/templates/old/main_template.html

@@ -1,70 +0,0 @@
-{% from "./components/components/skip-link/macro.njk" import usaSkipLink -%}
-{% from "./components/components/header/macro.njk" import usaHeader -%}
-{% from "./components/components/footer/macro.njk" import usaFooter -%}
-{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
-{%- set assetUrl = assetUrl | default(assetPath) -%}
-<!DOCTYPE html>
-<html lang="{{ htmlLang | default('en') }}" class="{{ htmlClasses }}">
-  <head>
-    <meta charset="utf-8" />
-    <title>{% block pageTitle %}Notify.gov{% endblock %}</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="f0f0f0" />
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="1b1b1b" />
-    {% if config['NR_MONITOR_ON'] %}
-      {% include "partials/newrelic.html" -%}
-    {% endif %}
-
-    {# Ensure that older IE versions always render with the correct rendering engine #}
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
-    {% block headIcons %}
-      <link rel="shortcut icon" href="{{ assetPath | default('/assets') }}/images/favicon.ico" />
-      <link rel="icon" type="image/png" sizes="32x32"href="{{ assetPath | default('/assets') }}/images/favicon-32x32.png"/>
-      <link rel="icon" type="image/png" sizes="16x16" href="{{ assetPath | default('/assets') }}/images/favicon-16x16.png" />
-      <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/safari-pinned-tab.svg" color="#5bbad5">
-      <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
-      <link rel="manifest" href="/site.webmanifest">
-      <meta name="msapplication-TileColor" content="#da532c">
-      <link href="{{ assetPath | default('/assets') }}/images/notify-dark-favicon.png" rel="icon" media="(prefers-color-scheme: dark)">
-      <meta name="theme-color" content="#ffffff">
-    {% endblock %}
-
-    {% block head %}{% endblock %}
-    {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
-    {% block meta %}
-      <meta property="og:site_name" content="Notify.gov">
-      <meta property="og:image" content="{{ asset_url('images/notify-og-image.png') }}">
-    {% endblock %}
-  </head>
-  <body class="usa-template__body {{ bodyClasses }}">
-    <script nonce="{{ csp_nonce() }}">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
-    {% block bodyStart %}{% endblock %}
-
-    {% block skipLink %}
-      {{ usaSkipLink({
-        "href": '#main-content',
-        "text": 'Skip to main content'
-      }) }}
-    {% endblock %}
-
-    {% block header %}
-      {{ usaHeader({}) }}
-    {% endblock %}
-
-    {% block main %}
-      <div class="grid-container">
-        {% block beforeContent %}{% endblock %}
-        <main class="{{ mainClasses }}" id="main-content" role="main">
-          {% block content %}{% endblock %}
-        </main>
-      </div>
-    {% endblock %}
-
-    {% block footer %}
-      {{ usaFooter({}) }}
-    {% endblock %}
-
-    {% block bodyEnd %}{% endblock %}
-  </body>
-</html>

app/templates/old/org_nav.html

@@ -1,12 +0,0 @@
-{# This template is an old version #}
-<nav class="navigation">
-  <ul>
-    <li><a class="usa-link{{ org_navigation.is_selected('dashboard') }}" href="{{ url_for('.organization_dashboard', org_id=current_org.id) }}">Usage</a></li>
-    <li><a class="usa-link{{ org_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_org_users', org_id=current_org.id) }}">Team members</a></li>
-    {% if current_user.platform_admin %}
-    <li><a class="usa-link{{ org_navigation.is_selected('settings') }}" href="{{ url_for('.organization_settings', org_id=current_org.id) }}">Settings</a></li>
-    <li><a class="usa-link{{ org_navigation.is_selected('trial-services') }}" href="{{ url_for('.organization_trial_mode_services', org_id=current_org.id) }}">Trial mode services</a></li>
-    <li><a class="usa-link{{ org_navigation.is_selected('billing') }}" href="{{ url_for('.organization_billing', org_id=current_org.id) }}">Billing</a></li>
-    {% endif %}
-  </ul>
-</nav>

app/templates/old/org_template.html

@@ -1,35 +0,0 @@
-{% extends "base.html" %}
-
-{% block per_page_title %}
-  {% block org_page_title %}{% endblock %} – {{ current_org.name }}
-{% endblock %}
-
-{% block main %}
-  <div class="grid-container">
-    <div class="navigation-service usa-breadcrumb">
-      {% if current_user.platform_admin %}
-        <a href="{{ url_for('.organizations') }}" class="usa-link navigation-organization-link">Organizations</a>
-      {% endif %}
-      <div class="navigation-service">
-        {{ current_org.name }}
-      </div>
-      <a href="{{ url_for('main.choose_account') }}" class="usa-link navigation-service">Switch service</a>
-    </div>
-    <div class="grid-row">
-      <div class="grid-col-3">
-        {% include "org_nav.html" %}
-      </div>
-      <div class="grid-col-9">
-        {% block beforeContent %}
-          {% block backLink %}{% endblock %}
-        {% endblock %}
-        <main class="main" id="main-content" role="main" >
-          {% block content %}
-            {% include 'flash_messages.html' %}
-            {% block maincolumn_content %}{% endblock %}
-          {% endblock %}
-        </main>
-      </div>
-    </div>
-  </div>
-{% endblock %}

app/templates/old/service_navigation.html

@@ -1,20 +0,0 @@
-{# This template is an old version #}
-{% macro navigation_service_name(service) %}
-  <div class="font-body-2xl text-bold">
-    {{ service.name }}
-    {% if not service.active %}
-      <span class="navigation-service-name navigation-service-type--suspended">Suspended</span>
-    {% endif %}
-  </div>
-{% endmacro %}
-
-<div class="navigation-service margin-top-5 display-flex flex-align-end flex-justify border-bottom padding-bottom-1">
-  {% if current_service.organization_id %}
-    {% if current_user.platform_admin or
-      (current_user.belongs_to_organization(current_service.organization_id) and current_service.live) %}
-      <a href="{{ url_for('.organization_dashboard', org_id=current_service.organization_id) }}" class="usa-link navigation-organization-link">{{ current_service.organization_name }}</a>
-    {% endif %}
-  {% endif %}
-  {{ navigation_service_name(current_service) }}
-  <a href="{{ url_for('main.choose_account') }}" class="usa-link">Switch service</a>
-</div>

app/templates/old/settings_nav.html

@@ -1,17 +0,0 @@
-{# This template is an old version #}
-{% if help %}
-{% include 'partials/tour.html' %}
-{% else %}
-<nav class="nav">
-  <ul class="usa-sidenav">
-    {# {% if current_user.has_permissions() %} #}
-    <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('settings') }}"
-      href="{{ url_for('main.service_settings', service_id=current_service.id) }}">General</a></li>
-    <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('user-profile') }}"
-      href="{{ url_for('main.user_profile', service_id=current_service.id) }}">User profile</a></li>
-    <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('team-members') }}"
-        href="{{ url_for('main.manage_users', service_id=current_service.id) }}">Team members</a></li>
-    {# {% endif %} #}
-  </ul>
-</nav>
-{% endif %}

app/templates/old/settings_template.html

@@ -1,35 +0,0 @@
-{# This template is an old version #}
-{% extends "admin_template.html" %}
-
-{% block per_page_title %}
-  {% block service_page_title %}{% endblock %} – {{ current_service.name }}
-{% endblock %}
-
-{% block main %}
-  <div class="grid-container">
-    <div class="grid-row margin-top-5">
-      {% if help %}
-        <div class="tablet:grid-col-3">
-      {% else %}
-        <div class="tablet:grid-col-3 margin-bottom-4">
-      {% endif %}
-          {% include "settings_nav.html" %}
-        </div>
-      {% if help %}
-        <div class="tablet:grid-col-8">
-      {% else %}
-        <div class="tablet:grid-col-9 tablet:padding-left-4">
-      {% endif %}
-        {% block beforeContent %}
-          {% block backLink %}{% endblock %}
-        {% endblock %}
-        <main id="main-content" role="main" class="usa-prose site-prose margin-bottom-10">
-        {% block content %}
-          {% include 'flash_messages.html' %}
-          {% block maincolumn_content %}{% endblock %}
-        {% endblock %}
-        </main>
-      </div>
-    </div>
-  </div>
-{% endblock %}

app/templates/old/withnav_template.html

@@ -1,36 +0,0 @@
-{# This template is an old version #}
-{% extends "admin_template.html" %}
-
-{% block per_page_title %}
-  {% block service_page_title %}{% endblock %} – {{ current_service.name }}
-{% endblock %}
-
-{% block main %}
-  <div class="grid-container">
-    {% include "service_navigation.html" %}
-    <div class="grid-row margin-top-5">
-      {% if help %}
-        <div class="tablet:grid-col-3">
-      {% else %}
-        <div class="tablet:grid-col-3">
-      {% endif %}
-          {% include "main_nav.html" %}
-        </div>
-      {% if help %}
-        <div class="grid-col-8">
-      {% else %}
-        <div class="tablet:grid-col-9 tablet:padding-left-4">
-      {% endif %}
-        {% block beforeContent %}
-          {% block backLink %}{% endblock %}
-        {% endblock %}
-        <main id="main-content" role="main" class="usa-prose site-prose margin-bottom-10">
-        {% block content %}
-          {% include 'flash_messages.html' %}
-          {% block maincolumn_content %}{% endblock %}
-        {% endblock %}
-        </main>
-      </div>
-    </div>
-  </div>
-{% endblock %}

app/templates/old/withoutnav_template.html

@@ -1,17 +0,0 @@
-{% extends "base.html" %}
-
-{% set mainClasses = "margin-top-5 padding-bottom-5" %}
-
-{% block beforeContent %}
-    {% if current_service and current_service.active and current_user.is_authenticated and current_user.belongs_to_service(current_service.id) %}
-    <!-- <div class="navigation-service usa-breadcrumb">
-      <a href="{{ url_for('main.show_accounts_or_dashboard') }}" class="usa-link usa-breadcrumb__link usa-breadcrumb-back-to">Back to {{ current_service.name }}</a>
-    </div> -->
-    {% endif %}
-    {% block backLink %}{% endblock %}
-{% endblock %}
-
-{% block content %}
-    {% include 'flash_messages.html' %}
-    {% block maincolumn_content %}{% endblock %}
-{% endblock %}

app/templates/partials/jobs/notifications.html

@@ -22,7 +22,7 @@
   {% else %}
 
     {% if notifications %}
-      <div class="dashboard-table bottom-gutter-3-2">
+      <div class="dashboard-table job-status-table table-overflow-x-auto">
     {% endif %}
       {% if job.still_processing %}
         <p class="bottom-gutter hint">
@@ -40,15 +40,16 @@
         notifications,
         caption=uploaded_file_name,
         caption_visible=False,
+        border_visible=True,
         empty_message='No messages to show yet…' if job.awaiting_processing_or_recently_processed else 'These messages have been deleted because they were sent more than {} days ago'.format(service_data_retention_days),
         field_headings=[
           'Recipient',
-          'Status'
+          'Message status'
         ],
         field_headings_visible=False
       ) %}
         {% call row_heading() %}
-          <a class="usa-link file-list-filename" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id, from_job=job.id) }}">{{ item.to }}</a>
+          <a class="usa-link file-list-filename" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id, from_job=job.id) }}">{{ item.to | format_phone_number_human_readable }}</a>
           <p class="file-list-hint">
             {{ item.preview_of_content }}
           </p>

app/templates/partials/jobs/status.html

@@ -37,7 +37,9 @@
           <div class="usa-alert__body">
             <h4 class="usa-alert__heading">Your text has been sent</h4>
             <p class="usa-alert__text">
-              {{ job.template_name }} - {{ current_service.name }} was sent on {{ job.created_at|format_datetime_normal }} by {{ job.created_by.name }}
+              {{ job.template_name }} - {{ current_service.name }} was sent on {% if job.processing_started %}
+              {{ job.processing_started|format_datetime_table }} {% else %}
+              {{ job.created_at|format_datetime_table }} {% endif %} by {{ job.created_by.name }}
             </p>
           </div>
         </div>

app/templates/partials/notifications/notifications.html

@@ -1,8 +1,8 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %}
 {% from "components/page-footer.html" import page_footer %}
 
-<div class="ajax-block-container table-wrapper" aria-labelledby='pill-selected-item'>
-  <div class="dashboard-table bottom-gutter-3-2">
+<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
+  <div class="dashboard-table table-overflow-x-auto">
 
   {% call(item, row_number) list_table(
     [notification],

app/templates/views/activity/all-activity.html

@@ -0,0 +1,143 @@
+{% extends "withnav_template.html" %}
+
+{% block service_page_title %}
+  All activity
+{% endblock %}
+
+{% set show_pagination %}
+  {% if prev_page or next_page %}
+  <nav aria-label="Pagination" class="usa-pagination">
+    <ul class="usa-pagination__list">
+      {% if prev_page %}
+      <li class="usa-pagination__item usa-pagination__arrow">
+        <a
+          href="{{prev_page['url']}}"
+          class="usa-pagination__link usa-pagination__previous-page"
+          aria-label="Previous page"
+          >
+          <img src="{{ asset_url('img/usa-icons/navigate_before.svg') }}" alt="arrow">
+          <span class="usa-pagination__link-text">Previous</span></a
+        >
+      </li>
+      {% endif %}
+      {% if pagination %}
+        {% for page in pagination.pages %}
+          {% if page == pagination.current %}
+          <li class="usa-pagination__item usa-pagination__page-no">
+            <span class="usa-pagination__button usa-current" aria-label="Page {{ page }}" aria-current="true">
+              {{ page }}
+            </span>
+          </li>
+          {% else %}
+            <li class="usa-pagination__item">
+              <a class="usa-pagination__button" href="?page={{ page }}">
+                {{ page }}
+              </a>
+            </li>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+      {% if next_page %}
+      <li class="usa-pagination__item usa-pagination__arrow">
+        <a
+          href="{{ next_page['url'] }}"
+          class="usa-pagination__link usa-pagination__next-page"
+          aria-label="Next page"
+        >
+          <span class="usa-pagination__link-text">Next </span>
+          <img src="{{ asset_url('img/usa-icons/navigate_next.svg') }}" alt="arrow">
+        </a>
+      </li>
+      {% endif %}
+    </ul>
+  </nav>
+  {% endif %}
+{% endset %}
+{% block maincolumn_content %}
+  <div class="margin-bottom-8">
+    <h1 class="usa-sr-only">All activity</h1>
+    <h2 class="font-body-2xl line-height-sans-2 margin-0">All activity</h2>
+    <h2 class="margin-top-4 margin-bottom-1">Sent jobs</h2>
+    <div class="usa-table-container--scrollable-mobile">
+      <table class="usa-table usa-table--compact job-table">
+        <caption></caption>
+        <thead class="table-field-headings">
+          <tr>
+            <th scope="col" role="columnheader" class="table-field-heading-first" id="jobId">
+              <span>Job ID#</span>
+            </th>
+            <th data-sortable scope="col" role="columnheader" class="table-field-heading">
+              <span>Template</span>
+            </th>
+            <th data-sortable scope="col" role="columnheader" class="table-field-heading">
+              <span>Time sent</span>
+            </th>
+            <th data-sortable scope="col" role="columnheader" class="table-field-heading">
+              <span>Sender</span>
+            </th>
+            <th data-sortable scope="col" role="columnheader" class="table-field-heading">
+              <span>Report</span>
+            </th>
+            <th data-sortable scope="col" role="columnheader" class="table-field-heading">
+              <span>Delivered</span>
+            </th>
+            <th data-sortable scope="col" role="columnheader" class="table-field-heading">
+              <span>Failed</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {% if all_jobs_dict %}
+            {% for job in all_jobs_dict %}
+              <tr class="table-row">
+                <td class="table-field jobid" scope="row" role="rowheader">
+                  <a class="usa-link" href="{{ job.view_job_link }}">
+                    {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
+                  </a>
+                </td>
+                <td class="table-field template">{{ job.template_name }}</td>
+                <td data-sort-value="{{job.time_sent_data_value}}" class="table-field time-sent">
+                  {{ (job.processing_finished if job.processing_finished else job.processing_started
+                    if job.processing_started else job.created_at)|format_datetime_table }}
+                </td>
+                <td class="table-field sender">{{ job.created_by.name }}</td>
+                <td class="table-field report">
+                  {% if job.time_left != "Data no longer available" %}
+                    <a href="{{ job.download_link }}"><img src="{{ url_for('static', filename='img/material-icons/file_download.svg') }}" alt="File Download Icon"></a>
+                  {% else %}
+                    <span>N/A</span>
+                  {% endif %}
+                </td>
+                <td class="table-field delivered">{{ job.delivered_count if job.delivered_count is not none else '0' }}</td>
+                <td class="table-field failed">{{ job.failed_count if job.failed_count is not none else '0' }}</td>
+              </tr>
+            {% endfor %}
+          {% else %}
+            <tr class="table-row">
+              <td class="table-empty-message" colspan="10">No messages found</td>
+            </tr>
+          {% endif %}
+        </tbody>
+      </table>
+      <div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
+      <p><b>Note: </b>Report data is only available for 7 days after your message has been sent</p>
+    </div>
+    {{show_pagination}}
+    {% if current_user.has_permissions('view_activity') %}
+      <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">Download recent reports</h2>
+      <p class="font-body-sm">
+        <a href="{{ download_link_one_day }}" download="download" class="usa-link">Download all data last 24 hours (<abbr title="Comma separated values">CSV</abbr>)</a>
+      </p>
+      <p class="font-body-sm">
+        <a href="{{ download_link_three_day }}" download="download" class="usa-link">Download all data last 3 days (<abbr title="Comma separated values">CSV</abbr>)</a>
+        &emsp;
+      </p>
+      <p class="font-body-sm">
+        <a href="{{ download_link_five_day }}" download="download" class="usa-link">Download all data last 5 days (<abbr title="Comma separated values">CSV</abbr>)</a>
+      </p>
+      <p class="font-body-sm">
+        <a href="{{ download_link_seven_day }}" download="download" class="usa-link">Download all data last 7 days (<abbr title="Comma separated values">CSV</abbr>)</a>
+      </p>
+    {% endif %}
+  </div>
+{% endblock %}

app/templates/views/activity/notifications.html

@@ -5,7 +5,7 @@
 <div class="ajax-block-container" id='pill-selected-item'>
 
   {% if notifications %}
-  <div class="table-wrapper">
+  <div class="table-overflow-x-auto">
     <div class='dashboard-table'>
   {% endif %}
     {% call(item, row_number) list_table(

app/templates/views/api/callbacks.html

@@ -14,8 +14,8 @@
 
 {% block maincolumn_content %}
   {{ page_header('Callbacks') }}
-	<div class="table-wrapper">
-		<div class="bottom-gutter-3-2 dashboard-table body-copy-table">
+	<div class="table-overflow-x-auto">
+		<div class="bottom-gutter-3-2 dashboard-table body-copy-table table-overflow-x-auto">
 				{% call mapping_table(
 				caption='General',
 				field_headings=['Label', 'Value', 'Action'],

app/templates/views/check/preview.html

@@ -41,7 +41,7 @@
       </li>
     </ul>
   </div>
-  <div class="usa-table-container--scrollable" tabindex="0">
+  <div class="usa-table-container--scrollable table-overflow-x-auto" tabindex="0">
     <table class="usa-table usa-table--borderless width-full">
       <caption class="font-body-lg table-heading">
         Note: Only the first 5 rows are displayed here.

app/templates/views/dashboard/_jobs.html

@@ -1,6 +1,6 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
 
-<div class="table-wrapper">
+<div class="table-overflow-x-auto">
   <div class='dashboard-table ajax-block-container'>
     {% call(item, row_number) list_table(
       jobs,

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

@@ -28,7 +28,7 @@
           No messages sent
         </p>
       {% else %}
-        <div class='template-statistics-table'>
+        <div class='template-statistics-table table-overflow-x-auto'>
           {% call(item, row_number) list_table(
             month.templates_used,
             caption=month.name,

app/templates/views/dashboard/dashboard.html

@@ -1,3 +1,5 @@
+
+
 {% 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 %}
@@ -8,8 +10,10 @@
 {% endblock %}
 
 {% block maincolumn_content %}
+  <script type="text/javascript" src="{{ asset_url('js/setTimezone.js') }}"></script>
 
-  <div class="dashboard margin-bottom-8">
+
+  <div class="dashboard margin-bottom-2">
 
     <h1 class="usa-sr-only">Dashboard</h1>
     {% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
@@ -18,96 +22,122 @@
 
     {{ ajax_block(partials, updates_url, 'upcoming') }}
 
-    <h2 class="font-body-2xl line-height-sans-2 margin-0">
-      Messages sent
-    </h2>
+    <h2 class="font-body-xl margin-top-0">{{ current_service.name }} Dashboard</h2>
 
-    <!-- <button id="sevenDaysButton">7 Days</button>
-    <canvas id="myChart"></canvas> -->
     {{ 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[: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 id="totalMessageChartContainer" data-sms-sent="{{ sms_sent }}" data-sms-allowance-remaining="{{ sms_allowance_remaining }}">
+      <h2 id="chartTitle">Total messages</h2>
+      <svg id="totalMessageChart"></svg>
+      <div id="message"></div>
     </div>
+    <div id="totalMessageTable" class="margin-0"></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 %}
+    <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">Recent activity</h2>
+    <div id="activityChartContainer">
+      <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="activityChart">
+        <div class="chart-header">
+          <div class="chart-subtitle">{{ current_service.name }} - last 7 days</div>
+          <div class="chart-legend" aria-label="Legend"></div>
+        </div>
+        <div class="chart-container" id="weeklyChart"></div>
+        <table id="weeklyTable" class="usa-sr-only usa-table"></table>
+      </div>
+    </div>
+    <div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
+
+    {% if current_user.has_permissions('manage_service') %}{% endif %}
+
+    <div class="table-container">
+      <div id="table1" class="table-overflow-x-auto hidden">
+        <h2 class="margin-top-4 margin-bottom-1">My activity</h2>
+        <table class="usa-table job-table">
+          <thead class="table-field-headings">
+            <tr>
+              <th scope="col" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>
+              <th data-sortable scope="col" class="table-field-heading"><span>Template</span></th>
+              <th data-sortable scope="col" class="table-field-heading"><span>Job status</span></th>
+              <th data-sortable scope="col" class="table-field-heading"><span># of Recipients</span></th>
+            </tr>
+          </thead>
+          <tbody>
+            {% if jobs %}
+              {% for job in jobs[:5] %}
+                {% if job.created_by.name == current_user.name %}
+                  {% set notification = job.notifications[0] %}
+                  <tr id="{{ job.job_id }}">
+                    <td class="table-field jobid" scope="row" role="rowheader">
+                      <a class="usa-link" href="{{ job.view_job_link }}">
+                        {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
+                      </a>
+                    </td>
+                    <td class="table-field template">{{ job.template_name }}</td>
+                    <td class="table-field time-sent">Sent on
+                      {{ (job.processing_finished if job.processing_finished else job.processing_started
+                        if job.processing_started else job.created_at)|format_datetime_table }}
+                    </td>
+                    <td class="table-field count-of-recipients">{{ job.notification_count }}</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>
+
+      <div id="table2" class="table-overflow-x-auto visible">
+        <h2 class="margin-top-4 margin-bottom-1">Service activity</h2>
+        <table class="usa-table job-table">
+          <thead class="table-field-headings">
+            <tr>
+              <th scope="col" role="columnheader" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>
+              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Template</span></th>
+              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Job status</span></th>
+              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Sender</span></th>
+              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span># of Recipients</span></th>
+            </tr>
+          </thead>
+          <tbody>
+            {% if jobs %}
+              {% for job in jobs[:5] %}
+                {% set notification = job.notifications[0] %}
+                <tr id="{{ job.job_id }}">
+                  <td class="table-field jobid" scope="row" role="rowheader">
+                    <a class="usa-link" href="{{ job.view_job_link }}">
+                      {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
+                    </a>
+                  </td>
+                  <td class="table-field template">{{ job.template_name }}</td>
+                  <td class="table-field time-sent">Sent on
+                    {{ (job.processing_finished if job.processing_finished else job.processing_started
+                      if job.processing_started else job.created_at)|format_datetime_table }}
+                  </td>
+                  <td class="table-field sender">{{ job.created_by.name }}</td>
+                  <td class="table-field count-of-recipients">{{ job.notification_count }}</td>
+                </tr>
+              {% 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>
+    </div>
+    {{ ajax_block(partials, updates_url, 'template-statistics') }}
   </div>
 
 {% endblock %}

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

@@ -1,33 +1,45 @@
-{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, spark_bar_field %}
-
 <div class="ajax-block-container">
   {% if template_statistics|length > 1 %}
-    <div class='template-statistics-table'>
-      {% call(item, row_number) list_table(
-        template_statistics,
-        caption="Messages sent by template",
-        caption_visible=True,
-        empty_message='',
-        field_headings=[
-          'Template',
-          'Messages sent'
-        ],
-        field_headings_visible=False
-      ) %}
-
-        {% call row_heading() %}
-          <a class="usa-link template-statistics-table-template-name" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template_id) }}">{{ item.template_name }}</a>
-          <span class="template-statistics-table-hint">
-            {{ 1|message_count_label(item.template_type, suffix='template')|capitalize }}
-          </span>
-        {% endcall %}
-
-        {{ spark_bar_field(item.count, most_used_template_count, id=item.template_id) }}
-      {% endcall %}
-      <a
-        href="{{ url_for('.template_usage', service_id=current_service.id) }}"
-        class="usa-link show-more-no-border"
-      ><span>See templates used by month</span></a>
+  <h2 class="margin-top-4 margin-bottom-1">Most Used Templates</h2>
+    <div class="template-statistics-table table-overflow-x-auto">
+      <table class="usa-table width-full">
+        <caption class="font-body-lg table-heading usa-sr-only">
+          Messages sent by template
+        </caption>
+        <thead class="table-field-headings">
+          <tr>
+            <th class="table-field-heading-first" width="">
+              <span>Template name</span>
+            </th>
+            <th class="table-field-heading" width="">
+              <span>Folder</span>
+            </th>
+            <th class="table-field-heading" width="">
+              <span>Last used</span>
+            </th>
+            <th class="table-field-heading" width="">
+              <span>Created by</span>
+            </th>
+            <th class="table-field-heading" width="">
+              <span># Times used</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for item in template_statistics[:8] %}
+            <tr class="table-row">
+              <td>
+                <a class="usa-link template-statistics-table-template-name" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template_id) }}">{{ item.template_name }}</a>
+              </td>
+              <td><p>{{ item.template_folder }}</p></td>
+              <td><p>{{ item.last_used|format_datetime_table}}</p></td>
+              <td><p>{{ item.created_by }}</p></td>
+              <td><p>{{ item.count }}</p></td>
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+        <a href="/services/78409625-0c0a-485e-b82c-b19c8f4b1bdb/template-usage" class="usa-link show-more-no-border"><span>See templates by month</span></a>
     </div>
   {% endif %}
 </div>

app/templates/views/features.html

@@ -24,6 +24,10 @@
 <p class="usa-body">To send a text with Notify, you need to create a reusable message template first.</p>
 <p class="usa-body">Templates let you send the same thing to lots of people, as often as you need to, without writing a new message each time.</p>
 
+<h2 class="heading-medium" id="organizing-content">Organizing your content</h2>
+<p class="usa-body">You can organize your content by grouping templates, and putting them into folders.</p>
+<p class="usa-body">Set up folders within the Send message section of Notify, where you find templates. You can choose to create a Folder before or after a template is made. If you want to change a user’s ability to view or edit folders, you may control this through their individual team member permissions.</p>
+
 <h2 class="heading-medium" id="personalised-messages">Personalized content</h2>
 <p class="usa-body">Notify makes it easy to send personalized messages from a single template.</p>
 <p class="usa-body">See <a class="usa-link" href="{{ url_for('.guidance_index', _anchor='personalized-content') }}">how to personalize your content</a>.</p>
@@ -44,7 +48,6 @@
 <p class="usa-body">Notify lets you:</p>
 <ul class="list list-bullet">
   <li>set different permission levels for each team member</li>
-  <li>invite team members who do not have a government email address</li>
   <li>choose who else can manage team members</li>
 </ul>
 

app/templates/views/guidance/index.html

@@ -162,55 +162,57 @@
   location, the flag to receive the content needs to be captured in its own column with a Yes or No (Y/N) flag.</p>
 
   <h3>Example</h3>
-  <table class="usa-table">
-    <caption class="usa-sr-only">
-      Example
-    </caption>
-    <thead>
-      <tr>
-        <th scope="col">Phone number</th>
-        <th scope="col">First name</th>
-        <th scope="col">Last name</th>
-        <th scope="col">Spanish</th>
-        <th scope="col">English</th>
-        <th scope="col">Date</th>
-        <th scope="col">Time</th>
-        <th scope="col">Location</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>123-456-7890</td>
-        <td>Lulu</td>
-        <td>Praether</td>
-        <td>N</td>
-        <td>Y</td>
-        <td>November 2, 2023</td>
-        <td>3:25</td>
-        <td>123 Ford Rd.</td>
-      </tr>
-      <tr>
-        <td>234-567-8901</td>
-        <td>Sela</td>
-        <td>Appel</td>
-        <td>Y</td>
-        <td>N</td>
-        <td>November 2, 2023</td>
-        <td>4:00</td>
-        <td>123 Ford Rd.</td>
-      </tr>
-      <tr>
-        <td>123-456-7890</td>
-        <td>Dexter</td>
-        <td>Moseley</td>
-        <td>N</td>
-        <td>Y</td>
-        <td>November 2, 2023</td>
-        <td>2:00</td>
-        <td>123 Ford Rd.</td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="table-overflow-x-auto">
+    <table class="usa-table">
+      <caption class="usa-sr-only">
+        Example
+      </caption>
+      <thead>
+        <tr>
+          <th scope="col">Phone number</th>
+          <th scope="col">First name</th>
+          <th scope="col">Last name</th>
+          <th scope="col">Spanish</th>
+          <th scope="col">English</th>
+          <th scope="col">Date</th>
+          <th scope="col">Time</th>
+          <th scope="col">Location</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>123-456-7890</td>
+          <td>Lulu</td>
+          <td>Praether</td>
+          <td>N</td>
+          <td>Y</td>
+          <td>November 2, 2023</td>
+          <td>3:25</td>
+          <td>123 Ford Rd.</td>
+        </tr>
+        <tr>
+          <td>234-567-8901</td>
+          <td>Sela</td>
+          <td>Appel</td>
+          <td>Y</td>
+          <td>N</td>
+          <td>November 2, 2023</td>
+          <td>4:00</td>
+          <td>123 Ford Rd.</td>
+        </tr>
+        <tr>
+          <td>123-456-7890</td>
+          <td>Dexter</td>
+          <td>Moseley</td>
+          <td>N</td>
+          <td>Y</td>
+          <td>November 2, 2023</td>
+          <td>2:00</td>
+          <td>123 Ford Rd.</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 
   {# Preventing fraud #}
   <h2 class="padding-top-1" id="prevent-fraud">Preventing fraud</h2>

app/templates/views/inbound-sms-admin.html

@@ -23,36 +23,34 @@ Inbound SMS
   <h1 class="font-body-2xl">
     Inbound SMS
   </h1>
-
-  <table class="usa-table usa-table--borderless inbound">
-          <thread>
-              <tr>
-                <th>{{table_headings.field_headings[0]}}</th>
-                <th>{{table_headings.field_headings[1]}}</th>
-                <th>{{table_headings.field_headings[2]}}</th>
-              </tr>
-          </thread>
-          <tbody>
-
-          {% for value in inbound_num_list.data: %}
+  <div class="table-overflow-x-auto">
+    <table class="usa-table usa-table--borderless inbound width-full">
+      <thead>
           <tr>
-              <td>{{value.number}}</td>
-              <td>
-
-              {% if value.active %}
-                Active
-              {% elif not value.service.name  %}
-                  Not used
-              {% else %}
-                Inactive
-              {% endif %}
-              </td>
-              <td>
-                  <a href="{{ url_for('main.service_dashboard', service_id=value.service.id) }}" class="usa-link bold">{{ value.service.name }}</a>
-              </td>
+            <th>{{table_headings.field_headings[0]}}</th>
+            <th>{{table_headings.field_headings[1]}}</th>
+            <th>{{table_headings.field_headings[2]}}</th>
           </tr>
-          {% endfor %}
-          </tbody>
-  </table>
-
+      </thead>
+      <tbody>
+      {% for value in inbound_num_list.data: %}
+      <tr>
+          <td>{{value.number}}</td>
+          <td>
+          {% if value.active %}
+            Active
+          {% elif not value.service.name  %}
+              Not used
+          {% else %}
+            Inactive
+          {% endif %}
+          </td>
+          <td>
+              <a href="{{ url_for('main.service_dashboard', service_id=value.service.id) }}" class="usa-link bold">{{ value.service.name }}</a>
+          </td>
+      </tr>
+      {% endfor %}
+      </tbody>
+    </table>
+  </div>
 {% endblock %}

app/templates/views/invite-user.html

@@ -15,7 +15,7 @@
 {% block maincolumn_content %}
 
   {{ page_header('Invite {}'.format(user_to_invite.name if user_to_invite else 'a team member')) }}
-
+  <a href="#permissions">Learn more about user permissions.</a>
   {% call form_wrapper() %}
 
     {% if user_to_invite %}
@@ -36,5 +36,99 @@
     {{ page_footer('Send invitation email') }}
 
   {% endcall %}
+  <h2 id="permissions">Set up user permissions</h2>
+  <p>Setting the right digital control is one of many aspects to keep content and information on a need to know basis. Permissions allow you to do this. Give team members access to important views related to their responsibilities.</p>
+  <h3 class="site-preview-heading">Permissions</h3>
 
+  <div class="usa-accordion usa-accordion--bordered margin-top-1">
+    <h4 class="usa-accordion__heading">
+      <button
+        type="button"
+        class="usa-accordion__button"
+        aria-expanded="true"
+        aria-controls="b-a1"
+      >
+      See dashboard
+      </button>
+    </h4>
+    <div id="b-a1" class="usa-accordion__content usa-prose">
+      <p>Allows users to view the dashboard but not have access to any other functions on the site.
+        Dashboard viewers can see: Weekly message quantity</p>
+        <ul>
+          <li>Message templates used</li>
+          <li>Recent batches of sent messages</li>
+        </ul>
+        <p>This also gives access to:</p>
+        <ul>
+          <li>List of templates used by month</li>
+          <li>Batch details with message status</li>
+        </ul>
+    </div>
+    <h4 class="usa-accordion__heading">
+      <button
+        type="button"
+        class="usa-accordion__button"
+        aria-expanded="false"
+        aria-controls="b-a2"
+      >
+      Send messages
+      </button>
+    </h4>
+    <div id="b-a2" class="usa-accordion__content usa-prose">
+      <p>
+        Allows users to view, select and send approved messages, but restricts users from editing templates
+        and/or folders. Team members responsible for sending message batches can use templates to prepare
+        and schedule texts. Actions they take in this section:
+      </p>
+      <ul>
+        <li>View and use templates</li>
+        <li>Enter personalized message field content</li>
+        <li>Schedule messages for sending</li>
+        <li>Send messages</li>
+      </ul>
+    </div>
+    <h4 class="usa-accordion__heading">
+      <button
+        type="button"
+        class="usa-accordion__button"
+        aria-expanded="false"
+        aria-controls="b-a3"
+      >
+      Add and edit templates
+      </button>
+    </h4>
+    <div id="b-a3" class="usa-accordion__content usa-prose">
+      <p>
+        Allows users to view, create or edit, and more or delete templates and folders. They will set up real
+        messages, but are restricted from uploading data or sending or seeing previous versions. Some actions
+        they can take:
+      </p>
+      <ul>
+        <li>Create a new template</li>
+        <li>Create a new folder</li>
+        <li>Move (or organize) folders and templates</li>
+        <li>Delete templates and/or folders</li>
+      </ul>
+    </div>
+    <h4 class="usa-accordion__heading">
+      <button
+        type="button"
+        class="usa-accordion__button"
+        aria-expanded="false"
+        aria-controls="b-a4"
+      >
+      Manage settings and team
+      </button>
+    </h4>
+    <div id="b-a4" class="usa-accordion__content usa-prose">
+      <p>Leads with service management responsibility may do so in Settings. Managed within Settings:</p>
+      <ul>
+        <li>Change service name</li>
+        <li>Invite team members</li>
+        <li>Remove unnecessary team members</li>
+        <li>Turn off the ability to send text messages</li>
+        <li>Turn off the ability to send service name with text message</li>
+      </ul>
+    </div>
+  </div>
 {% endblock %}

app/templates/views/jobs/job.html

@@ -25,8 +25,8 @@
       </div>
     {% endif %}
 
-    <p class="notification-status">
-      Messages will remain in pending state until carrier status is received, typically 5 minutes.
+    <p class="notification-status max-width-full">
+      Messages are sent immediately to the cell phone carrier, but will remain in "pending" status until we hear back from the carrier they have received it and attempted deliver. More information on <a class="usa-link" href="{{ url_for('main.message_status') }}">delivery status</a>.
     </p>
     {% if not job.processing_finished %}
       <div

app/templates/views/manage-users.html

@@ -10,7 +10,7 @@
 {% block serviceNavigation %}{% endblock %}
 
 {% block sideNavigation %}
-  {% include "/new/components/settings_nav.html" %}
+  {% include "components/settings_nav.html" %}
 {% endblock %}
 
 {% block maincolumn_content %}

app/templates/views/message-status.html

@@ -49,7 +49,7 @@
   <p>Notify cannot tell you if your users open an email or click on the links in an email. We do not track open rates and click-throughs because there are privacy issues. Tracking emails without asking permission from users could breach General Data Protection Regulations (GDPR).</p> -->
 
   <h2 id="text-message-statuses" class="heading-medium">Text messages</h2>
-  <div class="margin-bottom-8">
+  <div class="margin-bottom-8 table-overflow-x-auto">
     {% call mapping_table(
       caption='Message statuses – text messages',
       field_headings=['Status', 'Description'],

app/templates/views/performance.html

@@ -44,33 +44,31 @@
     </div>
   </div>
 
-  <div class="table-wrapper">
-    <div class="dashboard-table">
-      {% call(item, row_number) list_table(
-        notifications_by_type|reverse,
-        caption='Messages sent since May 2023',
-        caption_visible=False,
-        field_headings=[
-          'Date',
-          99|message_count_noun('email')|capitalize,
-          99|message_count_noun('sms')|capitalize,
-        ],
-        empty_message='No data to show'
-      ) %}
-        {% call field() %}
-          {{ item.date | format_date_normal }}
-        {% endcall %}
-        {% call field() %}
-          {{ item.emails|format_thousands }}
-        {% endcall %}
-        {% call field() %}
-          {{ item.sms|format_thousands }}
-        {% endcall %}
+  <div class="dashboard-table table-overflow-x-auto">
+    {% call(item, row_number) list_table(
+      notifications_by_type|reverse,
+      caption='Messages sent since May 2023',
+      caption_visible=False,
+      field_headings=[
+        'Date',
+        99|message_count_noun('email')|capitalize,
+        99|message_count_noun('sms')|capitalize,
+      ],
+      empty_message='No data to show'
+    ) %}
+      {% call field() %}
+        {{ item.date | format_date_normal }}
       {% endcall %}
-      <p class="table-show-more-link">
-        Only showing the last {{ notifications_by_type|length }} days
-      </p>
-    </div>
+      {% call field() %}
+        {{ item.emails|format_thousands }}
+      {% endcall %}
+      {% call field() %}
+        {{ item.sms|format_thousands }}
+      {% endcall %}
+    {% endcall %}
+    <p class="table-show-more-link">
+      Only showing the last {{ notifications_by_type|length }} days
+    </p>
   </div>
 
   <h2 class="govuk-heading-m">
@@ -84,7 +82,7 @@
       ) }}
     </div>
   </div>
-  <div class="table-wrapper">
+  <div class="table-overflow-x-auto">
     <div class="dashboard-table">
       {% call(item, row_number) list_table(
         processing_time | reverse,
@@ -124,7 +122,7 @@
       <span class="usa-sr-only">using Notify.</span>
     </div>
   </div>
-  <div class="table-wrapper">
+  <div class="table-overflow-x-auto">
     <div class="dashboard-table">
       {% call(item, row_number) list_table(
         organizations_using_notify,

app/templates/views/platform-admin/_base_template.html

@@ -16,7 +16,7 @@
       </ol>
     </nav>
     <div class="grid-row margin-bottom-10">
-      <div class="tablet:grid-col-3 margin-top-4">
+      <div class="tablet:grid-col-2 margin-top-4">
         <nav class="navigation">
           <ul class="usa-sidenav">
 
@@ -41,11 +41,11 @@
           </ul>
         </nav>
       </div>
-      <div class="grid-col-9 tablet:grid-col-9 padding-left-4 sub-content">
+      <div class="grid-col-10 tablet:grid-col-10 padding-left-4 sub-content">
       {% block backLink %}{% endblock %}
         <main id="main-content" role="main">
           {% block content %}
-            {% include 'new/components/flash_messages.html' %}
+            {% include 'components/flash_messages.html' %}
             {% block platform_admin_content %}{% endblock %}
           {% endblock %}
         </main>

app/templates/views/platform-admin/complaints.html

@@ -13,26 +13,26 @@
     Email complaints
   </h1>
 
+  <div class="table-overflow-x-auto">
+    {% call(item, row_number) list_table(
+        complaints,
+        caption="Complaints",
+        caption_visible=False,
+        empty_message='No complaints',
+        field_headings=['Notification Id', 'Service', 'Complaint type', 'Complaint Date'],
+        field_headings_visible=True
+    ) %}
 
-  {% call(item, row_number) list_table(
-      complaints,
-      caption="Complaints",
-      caption_visible=False,
-      empty_message='No complaints',
-      field_headings=['Notification Id', 'Service', 'Complaint type', 'Complaint Date'],
-      field_headings_visible=True
-  ) %}
+        {{ link_field(item.notification_id, url_for('main.view_notification', service_id=item.service_id, notification_id=item.notification_id)) }}
 
-      {{ link_field(item.notification_id, url_for('main.view_notification', service_id=item.service_id, notification_id=item.notification_id)) }}
+        {{ link_field(item.service_name, url_for('main.service_dashboard', service_id=item.service_id)) }}
 
-      {{ link_field(item.service_name, url_for('main.service_dashboard', service_id=item.service_id)) }}
+        {{ text_field(item.complaint_type) }}
 
-      {{ text_field(item.complaint_type) }}
-
-      {{ text_field(item.complaint_date|format_datetime_table if item.complaint_date else None) }}
-
-  {% endcall %}
+        {{ text_field(item.complaint_date|format_datetime_table if item.complaint_date else None) }}
 
+    {% endcall %}
+  </div>
   {{ previous_next_navigation(prev_page, next_page) }}
 
 {% endblock %}

app/templates/views/platform-admin/reports.html

@@ -31,4 +31,8 @@
 <p>
   <a class="usa-link" href="{{ url_for('main.get_users_report') }}">Users Report</a>
 </p>
+<p>
+  <a class="usa-link" href="{{ url_for('main.download_all_users') }}">Download All Users</a>
+</p>
+
 {% endblock %}

app/templates/views/platform-admin/services.html

@@ -7,6 +7,7 @@
 {% from "components/components/details/macro.njk" import usaDetails %}
 
 {% macro services_table(services, caption) %}
+<div class="table-overflow-x-auto">
   {% call(item, row_number) mapping_table(
     caption=caption,
     caption_visible=False,
@@ -27,6 +28,10 @@
             {% if not service['active'] %}
               <span class="heading-medium hint">&ensp;Archived</span>
             {% endif %}
+            {% if service['name'] == 'Test service' %}
+              <a class="usa-link" href="{{ url_for('main.load_test') }}">Load Test</a>
+            {% endif %}
+
           {% endcall %}
 
         {% endcall %}
@@ -48,6 +53,7 @@
     {% endfor %}
 
   {% endcall %}
+</div>
 {% endmacro %}
 
 

app/templates/views/pricing/index.html

@@ -35,7 +35,7 @@ part.</p>
 
 <h4>Calculation of message parts without special characters</h4>
 
-<div class="bottom-gutter-3-2">
+<div class="table-overflow-x-auto">
   {% call mapping_table(
   caption='Text message pricing',
   field_headings=['Message length', 'Charge'],
@@ -86,7 +86,7 @@ recipient’s preferred language, but we are aware that, rarely, a phone carrier
 to be calculated as detailed below.<p>
 <h4>Calculation of message parts with special characters or non-romanized scripts</h4>
   {% set accentedChars %}
-<div class="bottom-gutter-3-2">
+<div class="table-overflow-x-auto">
   {% call mapping_table(
   caption='Accented characters that affect text message charges',
   field_headings=['Character', 'Description'],
@@ -151,7 +151,7 @@ to be calculated as detailed below.<p>
 "html": accentedChars
 }) }}
 
-<div class="bottom-gutter-3-2">
+<div class="table-overflow-x-auto">
   {% call mapping_table(
   caption='Pricing for text messages containing accented characters that affect the charges',
   field_headings=['Message length', 'Charge'],

app/templates/views/send.html

@@ -4,6 +4,7 @@
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/table.html" import list_table, text_field, index_field, index_field_heading %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
+<script type="text/javascript" src="{{ asset_url('js/setTimezone.js') }}"></script>
 
 {% block service_page_title %}
   Upload a list of {{ 999|recipient_count_label(template.template_type) }}

app/templates/views/service-settings.html

@@ -9,14 +9,14 @@
 {% block serviceNavigation %}{% endblock %}
 
 {% block sideNavigation %}
-  {% include "/new/components/settings_nav.html" %}
+  {% include "components/settings_nav.html" %}
 {% endblock %}
 
 {% block maincolumn_content %}
 
     <h1 class="font-body-lg">Settings</h1>
 
-    <div class="bottom-gutter-3-2 settings-table body-copy-table">
+    <div class="bottom-gutter-3-2 settings-table body-copy-table table-overflow-x-auto">
 
       {% call mapping_table(
         caption='General',

app/templates/views/signedout.html

@@ -20,7 +20,7 @@ Notify.gov
             <div class="desktop:grid-col-7 tablet:grid-col-12">
               <h1 class="font-serif-2xl usa-hero__heading">Reach people where they are with government-powered text messages</h1>
               <p class="font-sans-lg">Notify.gov is a text message service that helps federal, state, local, tribal and territorial governments more effectively communicate with the people they serve.</p>
-              <div class="usa-button-group margin-bottom-5">
+              <div class="usa-button-group margin-bottom-5 flex-align-center">
                 <a class="usa-button usa-button login-button login-button--primary margin-right-2" href="{{ initial_signin_url }}">Sign in with <img src="{{ asset_url('images/logo-login.svg') }}" alt="Login.gov logo">
                 </a>
                 if you are an existing pilot partner

app/templates/views/usage.html

@@ -70,8 +70,7 @@
       </div> #}
 
       {% if months %}
-      <div class="table-wrapper">
-        <div class="dashboard-table usage-table body-copy-table margin-top-4">
+        <div class="dashboard-table usage-table body-copy-table table-overflow-x-auto margin-top-4">
           {% call(item, row_index) list_table(
             months,
             caption="Total spend",
@@ -122,7 +121,6 @@
 
           {% endcall %}
         </div>
-      </div>
       {% endif %}
     </div>
 

app/templates/views/user-profile.html

@@ -9,7 +9,7 @@
 {% block serviceNavigation %}{% endblock %}
 
 {% block sideNavigation %}
-  {% include "/new/components/settings_nav.html" %}
+  {% include "components/settings_nav.html" %}
 {% endblock %}
 
 {% block maincolumn_content %}
@@ -45,14 +45,9 @@
       {% endcall %}
 
       {% call row() %}
-        {{ text_field('Preferred Timezone') }}
+        {{ text_field('Preferred timezone') }}
         {{ optional_text_field(current_user.preferred_timezone) }}
-        {{ edit_field(
-            'Change',
-            url_for('.user_profile_preferred_timezone'),
-            suffix='preferred timezone'
-          )
-        }}
+        {{ text_field('Set automatically') }}
       {% endcall %}
 
       {% if current_user.platform_admin or session.get('disable_platform_admin_view') %}

app/templates/withnav_template.html

@@ -13,44 +13,29 @@
     {% block serviceNavigation %}
       {% if current_org.name %}
       {% else %}
-          {% include "new/components/service_nav.html" %}
+          {% include "components/service_nav.html" %}
       {% endif %}
     {% endblock %}
-    {#
-      The withnav_template can serve as a replacement for both settings_template and org_template.html.
-
-      The file service_navigation.html is included only in withnav_template. It's not used in settings_template. That is one out of the two differences between settings template and withnav template. As a result, when other templates extend settings_template, they include the serviceNavigation block but keep it empty. The settings_template.html is specifically used for these pages in the app: manage-users.html, service-settings.html, and user-profile.html.
-
-      In addition, serviceNavigation should be empty on templates that previously extended org_template. For templates that previously extended org_template.html, there's an addition of the orgNavBreadcrumb block.
-      {% block orgNavBreadcrumb %}
-        {% include "/new/components/org_nav_breadcrumb.html" %}
-      {% endblock %}
-    #}
     {% if current_org.name %}
-      {% block orgNavBreadcrumb %}{% include "/new/components/org_nav_breadcrumb.html" %}{% endblock %}
+      {% block orgNavBreadcrumb %}{% include "components/org_nav_breadcrumb.html" %}{% endblock %}
     {% endif %}
     <div class="grid-row margin-top-5">
-      <div class="tablet:grid-col-3">
+      <div class="tablet:grid-col-2">
         {% block sideNavigation %}
           {% if current_org.name %}
-            {% include "/new/components/org_nav.html" %}
+            {% include "components/org_nav.html" %}
           {% else %}
-            {% include "/new/components/main_nav.html" %}
+            {% include "components/main_nav.html" %}
           {% endif %}
-          {#
-          Include settings_nav.html for child templates that previously extended settings_template.
-
-          Include "org_nav.html" for child templates that previously extended org_template html
-          #}
         {% endblock %}
       </div>
-      <div class="tablet:grid-col-9 tablet:padding-left-4">
+      <div class="tablet:grid-col-10 tablet:padding-left-4">
         {% block beforeContent %}
           {% block backLink %}{% endblock %}
         {% endblock %}
         <main id="main-content" role="main" class="usa-prose site-prose margin-bottom-10">
         {% block content %}
-          {% include 'new/components/flash_messages.html' %}
+          {% include 'components/flash_messages.html' %}
           {% block maincolumn_content %}{% endblock %}
         {% endblock %}
         </main>

app/utils/pagination.py

@@ -29,3 +29,15 @@ def generate_previous_next_dict(view, service_id, page, title, url_args):
         "title": title,
         "label": "page {}".format(page),
     }
+
+
+def generate_pagination_pages(total_items, page_size, current_page):
+    total_pages = (total_items + page_size - 1) // page_size
+    pagination = {"current": current_page, "pages": [], "last": total_pages}
+    if total_pages <= 9:
+        pagination["pages"] = list(range(1, total_pages + 1))
+    else:
+        start_page = max(1, min(current_page - 4, total_pages - 8))
+        end_page = min(start_page + 8, total_pages)
+        pagination["pages"] = list(range(start_page, end_page + 1))
+    return pagination