Clinic listing view

app/assets/sass/main.scss

@@ -114,9 +114,10 @@
 .app-simple-progress-bar {
   width: 100%;
   min-width: 200px;
+  outline: 1px solid #aeb7bd;
 
   &.--thin {
-    height: auto;
+    min-height: 19px;
   }
 
   &.--generic {

app/views/_includes/clinics/clinic-listing-table.html

@@ -0,0 +1,56 @@
+{{ table({
+  firstCellIsHeader: false,
+  head: [
+    {
+      text: 'Clinic'
+    },
+    {
+      text: 'Location'
+    },
+    {
+      text: 'Unit'
+    },
+    {
+      text: 'Timeframe'
+    },
+    {
+      text: 'Capacity'
+    }
+  ],
+  rows: [
+    [
+      {
+        html: '<a href="#">Chichester - standard slots May 2026<br></a><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">HWO-NNN-standard-20260501</span>'
+      },
+      {
+        html: 'Chichester<br><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">St Richard’s Hospital</span>'
+      },
+      {
+        html: 'Alpha van<br><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">HWO-mobile-1</span> '
+      },
+      {
+        html: '1 May 2026 to 31 May 2026<br><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">21 days</span>'
+      },
+      {
+        html: '<div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1 nhsuk-u-margin-bottom-1" style="--percentage: 99%;"></div><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">10 slots available</div>'
+      }
+    ],
+    [
+      {
+        html: '<a href="#">Worthing - special slots May 2026<br></a><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">HWO-NNN-special-20260501</span>'
+      },
+      {
+        html: 'Worthing<br><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">Worthing Hospital</span>'
+      },
+      {
+        html: 'Home base<br><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">HWO-static-1</span> '
+      },
+      {
+        html: '7, 21 May 2026<br><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">2 days</span>'
+      },
+      {
+        html: '<div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1 nhsuk-u-margin-bottom-1" style="--percentage: 60%;"></div><span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">40 slots available</div>'
+      }
+    ]
+  ]
+}) }}

app/views/_includes/primary-navigation.html

@@ -35,7 +35,7 @@
           active: activeItem === "Manage batches"
         },
         {
-          href: "#",
+          href: "/clinics/",
           text: "Manage clinics",
           active: activeItem === "Manage clinics"
         },

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

@@ -242,11 +242,15 @@ <h2 class="nhsuk-heading-s nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-2">Reconci
 
 <section>
   <div class="nhsuk-grid-row">
-    <div class="nhsuk-grid-column-two-thirds">
+    <div class="nhsuk-grid-column-full">
       {% call details({
         summaryHtml: '<h2 class="nhsuk-body-m">Clinics associated with this batch</h2>'
       }) %}
-        <p>No clinics associated with this batch</p>
+
+
+
+        {% include "_includes/clinics/clinic-listing-table.html"%}
+
       {% endcall %}
     </div>
   </div>

app/views/batches/index.html

@@ -37,91 +37,67 @@ <h1 class="nhsuk-heading-l">Manage batches</h1>
       {% set batch_1 %}
         <a href="/batches/batch-detail">
           Crawley - Pound Hill<br>
-          <span class="nhsuk-u-font-size-16 nhsuk-u-font-weight-normal">HWO-standard-20251209</span>
         </a>
+        <span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">HWO-standard-20251209</span>
       {% endset %}
       {% set batch_1_progress %}
-        <div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1" style="--percentage: 0%;">
-          {{ tag({
-            text: "0 of 2172",
-            classes: "nhsuk-tag--blue"
-          }) }}
-        </div>
+        <div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1 nhsuk-u-margin-bottom-1" style="--percentage: 0%;"></div>
+        <span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">0 of 2172 appointed</span>
       {% endset %}
 
       {% set batch_2 %}
         <a href="/batches/batch-detail-in-progress">
           Chichester - Parklands<br>
-          <span class="nhsuk-u-font-size-16 nhsuk-u-font-weight-normal">HWO-standard-20251212</span>
         </a>
+        <span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">HWO-standard-20251212</span>
       {% endset %}
       {% set batch_2_progress %}
-        <div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1" style="--percentage: 97%;">
-          {{ tag({
-            text: "1306 of 1352",
-            classes: "nhsuk-tag--blue"
-          }) }}
-        </div>
+        <div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1 nhsuk-u-margin-bottom-1" style="--percentage: 97%;"></div>
+        <span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">1306 of 1352 appointed</span>
       {% endset %}
 
       {% set failsafe %}
         <a href="#">
           February failsafe<br>
-          <span class="nhsuk-u-font-size-16 nhsuk-u-font-weight-normal">HWO-failsafe-20260115</span>
         </a>
+        <span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">HWO-failsafe-20260115</span>
       {% endset %}
       {% set failsafe_progress %}
-        <div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1" style="--percentage: 0%;">
-          {{ tag({
-            text: "0 of 308",
-            classes: "nhsuk-tag--blue"
-          }) }}
-        </div>
+        <div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1 nhsuk-u-margin-bottom-1" style="--percentage: 0%;"></div>
+        <span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">0 of 308 appointed</span>
       {% endset %}
 
       {% set auto %}
         <a href="#">
           Aged over 71 - slippage 03-Feb-2026 11:00<br>
-          <span class="nhsuk-u-font-size-16 nhsuk-u-font-weight-normal">HWO-auto-slippage-2020203-1100</span>
         </a>
+        <span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">HWO-auto-slippage-2020203-1100</span>
       {% endset %}
       {% set auto_progress %}
-        <div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1" style="--percentage: 0%;">
-          {{ tag({
-            text: "0 of 2",
-            classes: "nhsuk-tag--blue"
-          }) }}
-        </div>
+        <div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1 nhsuk-u-margin-bottom-1" style="--percentage: 0%;"></div>
+        <span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">0 of 2 appointed</span>
       {% endset %}
 
       {% set auto_2 %}
         <a href="#">
           Aged 53 - never invited 03-Feb-2026 11:00<br>
-          <span class="nhsuk-u-font-size-16 nhsuk-u-font-weight-normal">HWO-auto-never-invited-2020203-1100</span>
         </a>
+        <span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">HWO-auto-never-invited-2020203-1100</span>
       {% endset %}
       {% set auto_2_progress %}
-        <div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1" style="--percentage: 0%;">
-          {{ tag({
-            text: "0 of 4",
-            classes: "nhsuk-tag--blue"
-          }) }}
-        </div>
+        <div class="app-simple-progress-bar --generic --thin nhsuk-u-padding-1 nhsuk-u-margin-bottom-1" style="--percentage: 0%;"></div>
+        <span class="nhsuk-u-font-size-16 nhsuk-u-secondary-text-colour">0 of 4 appointed</span>
       {% endset %}
 
       {{ table({
-        firstCellIsHeader: true,
+        firstCellIsHeader: false,
         head: [
           {
             text: "Batch"
           },
           {
             text: "Type"
           },
-          {
-            text: "Participants",
-            format: "numeric"
-          },
           {
             text: "Progress"
           }
@@ -134,10 +110,6 @@ <h1 class="nhsuk-heading-l">Manage batches</h1>
             {
               text: "Failsafe"
             },
-            {
-              text: "308",
-              format: "numeric"
-            },
             {
               html: failsafe_progress
             }
@@ -149,10 +121,6 @@ <h1 class="nhsuk-heading-l">Manage batches</h1>
             {
               text: "Auto"
             },
-            {
-              text: "2",
-              format: "numeric"
-            },
             {
               html: auto_progress
             }
@@ -164,10 +132,6 @@ <h1 class="nhsuk-heading-l">Manage batches</h1>
             {
               text: "Auto"
             },
-            {
-              text: "4",
-              format: "numeric"
-            },
             {
               html: auto_2_progress
             }
@@ -179,10 +143,6 @@ <h1 class="nhsuk-heading-l">Manage batches</h1>
             {
               text: "Standard"
             },
-            {
-              text: "2172",
-              format: "numeric"
-            },
             {
               html: batch_1_progress
             }
@@ -194,10 +154,6 @@ <h1 class="nhsuk-heading-l">Manage batches</h1>
             {
               text: "Standard"
             },
-            {
-              text: "1352",
-              format: "numeric"
-            },
             {
               html: batch_2_progress
             }

app/views/clinics/index.html

@@ -0,0 +1,50 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Manage clinics" %}
+
+{% from "_includes/primary-navigation.html" import primaryNavigation %}
+{% block header %}
+  {{ primaryNavigation("Manage clinics", serviceName, bsoName) }}
+{% endblock %}
+
+{% block beforeContent %}
+
+{{ breadcrumb({
+  items: [
+    {
+      href: "#",
+      text: "Home"
+    }
+  ]
+}) }}
+
+{% endblock %}
+
+{% block content %}
+  <div class="app-card-editable">
+    <h1 class="nhsuk-heading-l">Manage clinics</h1>
+
+    {{ button({
+      text: "Create a new clinic",
+      href: "#",
+      classes: "nhsuk-button--secondary"
+    }) }}
+  </div>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+
+      {% include "_includes/clinics/clinic-listing-table.html"%}
+
+    </div>
+  </div>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+      <h2 class="nhsuk-u-visually-hidden">Completed batches</h2>
+      <p>
+        <a href="#">View completed clinics</a>
+      </p>
+    </div>
+  </div>
+{% endblock %}

app/views/index.html

@@ -37,8 +37,16 @@ <h1 class="nhsuk-heading-xl">
         {{ serviceName }}
       </h1>
 
+      <h2 class="nhsuk-heading-m">Early May 2026</h2>
+      <p>Clinics: first run</p>
+      <ol>
+        <li>
+          <a href="/clinics/">Clinic listing</a>
+        </li>
+      </ol>
+
       <h2 class="nhsuk-heading-m">Mid April 2026</h2>
-      <p>Batches: first run at these fundamental objects</p>
+      <p>Batches: first run</p>
 
       <ol>
         <li>