Usability tweaks

app/assets/sass/components/_calendar-table.scss

@@ -57,6 +57,7 @@
 
   .--date-selected .calendar-table-date {
     background-color: $nhsuk-focus-colour;
+    outline: 2px solid $nhsuk-input-border-colour;
   }
 
   .--schedule-start {

app/assets/sass/components/_session-slots.scss

@@ -42,6 +42,7 @@
   display: flex;
   align-items: first baseline;
   padding-top: nhsuk-px-to-rem(8px);
+  padding-bottom: nhsuk-px-to-rem(8px);
 }
 
 .slot.is-hold {}

app/data/session-data-defaults.js

@@ -77,6 +77,8 @@ module.exports = {
         duration: '10',
         bookableSlotCount: 36,
         nonBookableSlotCount: 6,
+        standardSlotCount: 0,
+        heldSlotCount: 36,
         bookableBreakdown: [
           {
             label: 'Special appointment',
@@ -175,18 +177,16 @@ module.exports = {
         duration: '10',
         bookableSlotCount: 36,
         nonBookableSlotCount: 6,
+        standardSlotCount: 28,
+        heldSlotCount: 8,
         bookableBreakdown: [
           {
-            label: 'Held for rebooking',
+            label: 'Rebooking',
             count: 4
           },
           {
             label: 'Special appointment',
             count: 4
-          },
-          {
-            label: 'Standard',
-            count: 28
           }
         ],
         nonBookableBreakdown: [

app/routes/clinic-sessions.js

@@ -11,7 +11,7 @@ const {
   combineSlotsHandler,
   divideSlotsHandler
 } = require('./slot-structure-handlers')
-const { deleteSessionMapImage, saveSessionMapImage, sessionMapImageExists } = require('../lib/session-map-svg')
+const { buildSessionMapSvg, deleteSessionMapImage, saveSessionMapImage, sessionMapImageExists } = require('../lib/session-map-svg')
 /*
 
 /app/views/sessions/
@@ -83,6 +83,20 @@ router.post('/sessions/03-slot-structure', function (req, res) {
   res.redirect('/sessions/04-check-template')
 })
 
+router.get('/sessions/04-check-template', function (req, res) {
+  if (!req.session.data.createSessionTemplate) {
+    req.session.data.createSessionTemplate = {}
+  }
+
+  const { svg, description } = buildSessionMapSvg(buildSessionSlots(req.session.data.createSessionTemplate))
+
+  // A data URI keeps the preview out of the image directory, so nothing is left to clean up
+  res.render('sessions/04-check-template', {
+    mapImageSrc: `data:image/svg+xml;base64,${Buffer.from(svg).toString('base64')}`,
+    mapImageAlt: description
+  })
+})
+
 // Saves the draft as a template, overwriting the template being edited if there is one
 router.post('/sessions/save-template', function (req, res) {
   const template = req.session.data.createSessionTemplate || {}
@@ -184,6 +198,8 @@ router.post('/sessions/mark-hold-web-rebooking', holdHandler({ reason: 'online b
 router.post('/sessions/mark-hold-technical-recall', holdHandler({ reason: 'technical recall', ...sessionsSlotStructure }))
 router.post('/sessions/mark-hold-generic', holdHandler(sessionsSlotStructure))
 router.post('/sessions/mark-special-appointment', specialAppointmentHandler(sessionsSlotStructure))
+router.post('/sessions/mark-admin', nonBookableHandler({ reason: 'admin', ...sessionsSlotStructure }))
+router.post('/sessions/mark-downtime', nonBookableHandler({ reason: 'downtime', ...sessionsSlotStructure }))
 router.post('/sessions/mark-non-bookable-generic', nonBookableHandler(sessionsSlotStructure))
 router.post('/sessions/combine-slots', combineSlotsHandler(sessionsSlotStructure))
 router.post('/sessions/divide-slots', divideSlotsHandler(sessionsSlotStructure))

app/routes/slot-structure-handlers.js

@@ -56,11 +56,12 @@ const buildSessionSlots = (sessionData) => {
   const nonBookableSlotCount = sumSpans(slots.filter((slot) => slot.isNonBookable))
   sessionData.bookableSlotCount = bookableSlotCount
   sessionData.nonBookableSlotCount = nonBookableSlotCount
+  sessionData.heldSlotCount = sumSpans(slots.filter((slot) => (slot.isHold || slot.isSpecialAppointment) && !slot.isNonBookable))
 
   const capitalise = (text) => text.charAt(0).toUpperCase() + text.slice(1)
   const slotTypeLabel = (slot) => {
-    if (slot.isNonBookable) return slot.nonBookableReason ? capitalise(slot.nonBookableReason) : 'Non-bookable'
-    if (slot.isHold) return slot.holdReason ? `Held for ${slot.holdReason}` : 'Held'
+    if (slot.isNonBookable) return slot.nonBookableReason ? capitalise(slot.nonBookableReason) : 'Other non-bookable'
+    if (slot.isHold) return slot.holdReason ? `${slot.holdReason}` : 'Other hold'
     if (slot.isSpecialAppointment) return 'Special appointment'
     return 'Standard'
   }
@@ -78,12 +79,14 @@ const buildSessionSlots = (sessionData) => {
     const secondIndex = order.indexOf(second.label)
     return (firstIndex === -1 ? order.length : firstIndex) - (secondIndex === -1 ? order.length : secondIndex)
   })
-  sessionData.bookableBreakdown = breakdown(slots.filter((slot) => !slot.isNonBookable), [
-    'Held for rebooking', 'Held for online booking', 'Held for technical recall',
-    'Special appointment', 'Held', 'Standard'
+  const bookableItems = breakdown(slots.filter((slot) => !slot.isNonBookable), [
+    'Standard', 'Special appointment', 'Rebooking', 'Online booking', 'Technical recall', 'Held'
   ])
+  const standardItem = bookableItems.find((item) => item.label === 'Standard')
+  sessionData.standardSlotCount = standardItem ? standardItem.count : 0
+  sessionData.bookableBreakdown = bookableItems.filter((item) => item.label !== 'Standard')
   sessionData.nonBookableBreakdown = breakdown(slots.filter((slot) => slot.isNonBookable), [
-    'Staff break', 'Staff meeting', 'Non-bookable'
+    'Staff break', 'Staff meeting', 'Admin', 'Downtime', 'Non-bookable'
   ])
 
   return {

app/views/create-capacity-from-zero/clinic-summary.html

@@ -84,17 +84,18 @@
       </div>
 
       <div class="nhsuk-grid-column-one-fifth app-side-panel">
-        <div class="nhsuk-card nhsuk-card--feature app-card--feature-light-grey nhsuk-u-margin-top-8">
+        <h2 class="nhsuk-caption-l">With selected:</h2>
+        <div class="nhsuk-card nhsuk-card--feature app-card--feature-light-grey">
           <div class="nhsuk-card__content">
             <h3 class="nhsuk-card__heading nhsuk-u-font-size-19">
               Availability
             </h3>
             <ul class="nhsuk-list">
               <li>
-                <button type="submit" class="nhsuk-link">Unlock selected</button>
+                <button type="submit" class="nhsuk-link">Unlock</button>
               </li>
               <li>
-                <button type="submit" class="nhsuk-link">Lock selected</button>
+                <button type="submit" class="nhsuk-link">Lock</button>
               </li>
             </ul>
             <!-- <hr class="nhsuk-section-break nhsuk-section-break--m nhsuk-section-break--visible">
@@ -115,8 +116,8 @@ <h3 class="nhsuk-card__heading nhsuk-u-font-size-19">
                   <button type="submit" class="nhsuk-link" formaction="/create-capacity-from-zero/remove-template">Remove template</button>
                 </li>
               </ul>
-              <hr class="nhsuk-section-break nhsuk-section-break--m nhsuk-section-break--visible">
-              <button type="submit" class="nhsuk-link nhsuk-u-font-size-19">Create one-off session</button>
+              <!-- <hr class="nhsuk-section-break nhsuk-section-break--m nhsuk-section-break--visible">
+              <button type="submit" class="nhsuk-link nhsuk-u-font-size-19">Create one-off session</button> -->
             </form>
           </div>
         </div>
@@ -129,9 +130,9 @@ <h3 class="nhsuk-card__heading nhsuk-u-font-size-19">
               <li>
                 <button type="submit" class="nhsuk-link">Edit</button>
               </li>
-              <li>
+              <!-- <li>
                 <button type="submit" class="nhsuk-link">Add new</button>
-              </li>
+              </li> -->
           </div>
         </div>
       </div>
@@ -148,13 +149,23 @@ <h3 class="nhsuk-u-font-size-22 nhsuk-card__heading">
                 <span class="nhsuk-u-visually-hidden">Important: </span>No current schedule
               </span>
             </h3>
-            <p class="nhsuk-card__description">
-              A schedule is a block of confirmed time and capacity (usually agreed as a rota). Each schedule has a start date and an end date, for example a 6 week block.
-            </p>
+            <div class="nhsuk-card__description">
+              <p>
+                There are no schedules in this clinic at the moment. Schedules will appear here when you have created them.
+              </p>
+              <a class="nhsuk-action-link" href="create-schedule">
+                <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
+                  <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
+                </svg>
+                <span class="nhsuk-action-link__text">
+                    Create a schedule
+                </span>
+              </a>
+            </div>
           </div>
         </div>
       {% endif %}
-      <a href="create-schedule" class="nhsuk-button nhsuk-button--secondary-solid">Add a new schedule</a>
+      <a href="create-schedule" class="nhsuk-button nhsuk-button--secondary-solid">Create a schedule</a>
     </div>
   </div>
 

app/views/create-capacity-from-zero/create-clinic.html

@@ -39,7 +39,7 @@
 
     <h1 class="nhsuk-heading-l">Clinic details</h1>
 
-    <div class="nhsuk-form-group nhsuk-u-margin-bottom-3 {% if errors and errors.clinicName %}nhsuk-form-group--error{% endif %}">
+    <div class="nhsuk-form-group {% if errors and errors.clinicName %}nhsuk-form-group--error{% endif %}">
       <label class="nhsuk-label" for="clinic-name">
         Clinic name
       </label>
@@ -51,12 +51,12 @@ <h1 class="nhsuk-heading-l">Clinic details</h1>
       <input class="nhsuk-input {% if errors and errors.clinicName %}nhsuk-input--error{% endif %}" id="clinic-name" name="clinicName" type="text" value="{{ data.createCapacityFromZero.clinicName if data.createCapacityFromZero.clinicName else '' }}">
     </div>
 
-    <div class="nhsuk-form-group">
+    <!-- <div class="nhsuk-form-group">
       <label class="nhsuk-label nhsuk-u-secondary-text-colour" for="clinic-id">
         System generated clinic ID
       </label>
       <input class="nhsuk-input nhsuk-input--width-20" id="clinic-id" name="clinicIdDisplay" type="text" aria-describedby="id-hint-text" value="NNN-NNN-systemid-20260501" disabled>
-    </div>
+    </div> -->
 
   </div>
 

app/views/create-capacity-from-zero/create-schedule.html

@@ -11,7 +11,7 @@
 
 {% block beforeContent %}
   <a class="nhsuk-back-link" href="clinic-summary">
-    Back to clinic: {{ data.createCapacityFromZero.clinicName }}
+    Back to clinic
   </a>
 {% endblock %}
 
@@ -37,16 +37,15 @@
         }) }}
       {% endif %}
 
-      <h1 class="nhsuk-heading-l">Create schedule</h1>
-
-      <!-- <p>
-        Enter start and end dates for your new schedule in clinic "{{ data.createCapacityFromZero.clinicName | lower }}"
-      </p> -->
+      <h1 class="nhsuk-heading-l">
+        <span class="nhsuk-caption-l">{{ data.createCapacityFromZero.clinicName }}</span>
+        Create schedule
+      </h1>
 
       <form method="post">
 
         <div class="nhsuk-form-group {% if errors and errors.scheduleStartDate %}nhsuk-form-group--error{% endif %}">
-          <fieldset class="nhsuk-fieldset nhsuk-u-margin-bottom-4" role="group" aria-describedby="schedule-start-date-hint">
+          <fieldset class="nhsuk-fieldset" role="group" aria-describedby="schedule-start-date-hint">
             <legend class="nhsuk-fieldset__legend nhsuk-label--m">
                 Start date
             </legend>
@@ -130,8 +129,9 @@ <h1 class="nhsuk-heading-l">Create schedule</h1>
           </fieldset>
         </div>
 
-
-        <button class="nhsuk-button" type="submit">Create schedule</button>
+        <div class="nhsuk-form-group">
+          <button class="nhsuk-button" type="submit">Create schedule</button>
+        </div>
 
       </form>
     </div>