Building up flat pages for September Test™

app/assets/sass/main.scss

@@ -13,7 +13,7 @@
 .app-card-editable {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: last baseline;
 }
 
 // Batch (for now) view bar charts and legends

app/views/batches/batch-detail-in-progress.html

@@ -31,13 +31,16 @@
 <section>
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-6">
-      <span class="nhsuk-caption-m">HWO-standard-20251212</span>
       <div class="app-card-editable">
         <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-1">
+          <span class="nhsuk-caption-m">HWO-standard-20251212</span>
           Chichester - Parklands
         </h1>
         <p class="nhsuk-u-padding-right-5 nhsuk-u-margin-bottom-1"><a href="#">Edit batch name</a></p>
       </div>
+      <div class="nhsuk-body-s nhsuk-u-secondary-text-colour">
+        Batch imported 11 June 2026 at 15:53 (example content)
+      </div>
     </div>
   </div>
 
@@ -115,7 +118,6 @@ <h2 class="nhsuk-heading-m">Participant breakdown</h2>
           <li><a href="#">16 postal outcodes</a></li>
           <li><a href="#">4 GP practices</a></li>
         </ul>
-        <p>Batch imported 14 December 2025</p>
       {% endcall %}
     </div>
   </div>

app/views/batches/batch-detail.html

@@ -31,13 +31,16 @@
 <section>
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-6">
-      <span class="nhsuk-caption-m">HWO-standard-20251209</span>
       <div class="app-card-editable">
         <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-1">
+          <span class="nhsuk-caption-m">HWO-standard-20251209</span>
           Crawley - Pound Hill
         </h1>
         <p class="nhsuk-u-padding-right-5 nhsuk-u-margin-bottom-1"><a href="#">Edit batch name</a></p>
       </div>
+      <div class="nhsuk-body-s nhsuk-u-secondary-text-colour">
+        Batch imported 11 June 2026 at 15:53 (example content)
+      </div>
     </div>
   </div>
 
@@ -115,7 +118,6 @@ <h2 class="nhsuk-heading-m">Participant breakdown</h2>
           <li><a href="#">16 postal outcodes</a></li>
           <li><a href="#">4 GP practices</a></li>
         </ul>
-        <p>Batch imported 11 December 2025</p>
       {% endcall %}
     </div>
   </div>

app/views/index.html

@@ -89,9 +89,22 @@ <h2 class="nhsuk-heading-m">March 2026</h2>
       <hr>
 
       <h3 class="nhsuk-heading-m">Work for September Test</h3>
+      <h4 class="nhsuk-heading-s">Iteration 1: transactional journey</h4>
       <ol>
         <li>
-          <a href="/z-september-views/single-day-simple">Simple single day slots</a>
+          <a href="/z-september-transactional-journey/upload-a-batch">Upload a batch</a>
+        </li>
+        <li>
+          <a href="/z-september-transactional-journey/batch-detail">Batch detail</a>
+        </li>
+        <li>
+          <a href="/z-september-transactional-journey/pre-appoint-confirm">Pre-appointment confirmation</a>
+        </li>
+        <li>
+          <a href="/z-september-transactional-journey/spinner">[Utility] "appointing" spinner</a>
+        </li>
+        <li>
+          <a href="/z-september-transactional-journey/appointing-complete">Single day of appointments</a>
         </li>
       </ol>
 

app/views/z-september-transactional-journey/_includes/min-primary-navigation.html

@@ -0,0 +1,29 @@
+{% from 'header/macro.njk' import header %}
+
+{% macro primaryNavigation(activeItem, serviceName, bsoName) %}
+  {{ header({
+    account: {
+      items: [
+        {
+          text: "West Sussex BSO"
+        },
+        {
+          href: "#",
+          text: "Thomas Pynchon",
+          icon: true
+        },
+        {
+          href: "/",
+          text: "Log out"
+        }
+      ]
+    },
+    service: {
+      text: "Cohort to clinic",
+      href: "/"
+    },
+    navigation: {
+      items: []
+    }
+  }) }}
+{% endmacro %}

app/views/z-september-views/single-day-simple.html → app/views/z-september-transactional-journey/appointing-complete.html

@@ -1,56 +1,61 @@
 {% extends 'layout.html' %}
 
-{% set pageName = "Day clinic view" %}
+{% set pageName = "" %}
 
-{% from "_includes/primary-navigation.html" import primaryNavigation %}
+{% from "z-september-transactional-journey/_includes/min-primary-navigation.html" import primaryNavigation %}
 {% block header %}
-  {{ primaryNavigation("Clinics", serviceName, bsoName) }}
+  {{ primaryNavigation() }}
 {% endblock %}
 
-{% block beforeContent %}
-{{ breadcrumb({
-  items: [
-    {
-      href: "#",
-      text: "Home"
-    },
-    {
-      href: "/clinics/",
-      text: "Clinics"
-    },
-    {
-      href: "calendar-layout",
-      text: "Worthing C2C test 1"
-    }
-  ]
-}) }}
-{% endblock %}
+{% block beforeContent %}{% endblock %}
 
 {% block content %}
 
+
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-full">
-      <h1 class="nhsuk-heading-m">
-        <span class="nhsuk-caption-m">HWO-NNN-standard-20260501</span>
-        Worthing C2C test
+      {% set html %}
+        <p class="nhsuk-notification-banner__heading">
+          All participants appointed successfully
+        </p>
+      {% endset %}
+      {{ notificationBanner({
+        html: html,
+        type: "success"
+      }) }}
+      <h1 class="nhsuk-heading-m nhsuk-u-margin-bottom-1">
+        <span class="nhsuk-caption-m">CLINC-ID</span>
+        Clinic name
       </h1>
+      <div class="nhsuk-caption-m">
+        Unit name at location name
+      </div>
     </div>
   </div>
 
-  <hr class="nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4">
+  <hr class="nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-4">
 
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-full">
-      <h2 class="nhsuk-heading-l">
-        <span class="nhsuk-caption-m">Day view</span>
-        1 September 2026
-      </h2>
       <div class="app-card-editable">
-        <h4 class="nhsuk-heading-s">
-          <span class="nhsuk-caption-m">Morning session</span>  
-          08:30 to 12:30
-        </h4>
+        <h2 class="nhsuk-heading-l">
+          <span class="nhsuk-caption-m">Day view</span>
+          1 September 2026
+        </h2>
+        {{ actionLink({
+          text: "Download .csv",
+          href: "#"
+        }) }}
       </div>
+    </div>
+  </div>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+      <h3 class="nhsuk-heading-s">
+        <span class="nhsuk-caption-m">Morning session</span>  
+        08:30 to 12:30
+      </h3>
       <details class="nhsuk-details nhsuk-expander">
         <summary class="nhsuk-details__summary">
           <span class="nhsuk-details__summary-text">
@@ -519,3 +524,7 @@ <h4 class="nhsuk-heading-s">
     </div>
   </div>
 {% endblock %}
+
+{% block footer %}
+  {{ footer() }}
+{% endblock %}

app/views/z-september-transactional-journey/batch-detail.html

@@ -0,0 +1,64 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "" %}
+
+{% from "z-september-transactional-journey/_includes/min-primary-navigation.html" import primaryNavigation %}
+{% block header %}
+  {{ primaryNavigation() }}
+{% endblock %}
+
+{% block beforeContent %}{% endblock %}
+
+{% block content %}
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+      {% set html %}
+        <p class="nhsuk-notification-banner__heading">
+          Batch uploaded
+        </p>
+      {% endset %}
+      {{ notificationBanner({
+        html: html,
+        type: "success"
+      }) }}
+      <h1 class="nhsuk-heading-m nhsuk-u-margin-bottom-1">
+        <span class="nhsuk-caption-m">BATCH-ID</span>
+        Batch name
+      </h1>
+      <div class="nhsuk-body-s nhsuk-u-secondary-text-colour">
+        Batch uploaded 11 June 2026 at 15:53
+      </div>
+    </div>
+  </div>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-one-third">
+      <div class="nhsuk-card">
+        <div class="nhsuk-card__content">
+          <h2 class="nhsuk-card__heading nhsuk-u-font-size-36 nhsuk-u-margin-bottom-1">
+            <span role="text">
+              2172
+            </span>
+          </h2>
+          <span class="nhsuk-u-font-size-19">total participants</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+
+      {{ button({
+        text: "Select participants to book"
+      }) }}
+
+    </div>
+  </div>
+
+{% endblock %}
+
+{% block footer %}
+  {{ footer() }}
+{% endblock %}