January updates after round 3 of usability testing

* Add notification banner
* Show remaining appointments by default
* Update medical information
* Lots of other small changes

Author: edwardhorsford

app/assets/sass/_misc.scss

@@ -9,13 +9,11 @@
   }
 }
 
-
 .app-suppress-link-styles * {
   text-decoration: none;
   color: $nhsuk-secondary-text-color;
 }
 
-
 .app-image-flip-horizontal {
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);

app/assets/sass/components/_notification-banner.scss

@@ -0,0 +1,129 @@
+// Adapted from https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/components/notification-banner/_index.scss
+
+$nhsuk-success-color: $color_nhsuk-green !default;
+
+/// Success link styles
+///
+/// Makes links use the success colour. The link will darken if it's active or a
+/// user hovers their cursor over it.
+///
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-success;
+///   }
+///
+/// @access public
+
+@mixin nhsuk-link-style-success {
+  &:link,
+  &:visited {
+    color: $nhsuk-success-color;
+  }
+
+  &:hover {
+    color: scale-color($nhsuk-success-color, $lightness: -30%);
+  }
+
+  &:active {
+    color: $nhsuk-success-color;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $nhsuk-focus-text-color;
+  }
+}
+
+.app-notification-banner {
+  @include nhsuk-font($size: 19);
+  @include nhsuk-responsive-margin(8, "bottom");
+
+  border: $nhsuk-border-width solid $color_nhsuk-blue;
+
+  background-color: $color_nhsuk-blue;
+
+  &:focus {
+    outline: $nhsuk-focus-width solid $nhsuk-focus-color;
+  }
+}
+
+.app-notification-banner__header {
+  padding: 2px nhsuk-spacing(3) nhsuk-spacing(1);
+
+  // Ensures the notification header appears separate to the notification body
+  // text in high contrast mode
+  border-bottom: 1px solid transparent;
+
+  @include govuk-media-query($from: tablet) {
+    padding: 2px nhsuk-spacing(4) nhsuk-spacing(1);
+  }
+}
+
+.app-notification-banner__title {
+  // Set the size again because this element is a heading and the user agent
+  // font size overrides the inherited font size
+  @include nhsuk-font($size: 19);
+  @include nhsuk-typography-weight-bold;
+  margin: 0;
+  padding: 0;
+  color: $color_nhsuk-white;
+}
+
+.app-notification-banner__content {
+  $padding-tablet: nhsuk-spacing(4);
+  color: $nhsuk-text-color;
+  padding: nhsuk-spacing(3);
+
+  background-color: $color_nhsuk-white;
+
+  @include govuk-media-query($from: tablet) {
+    padding: $padding-tablet;
+  }
+
+  // Wrap content at the same place that a 2/3 grid column ends, to maintain
+  // shorter line-lengths when the notification banner is full width
+  > * {
+    // When elements have their own padding (like lists), include the padding
+    // in the max-width calculation
+    box-sizing: border-box;
+
+    // Calculate the internal width of a two-thirds column...
+    $two-col-width: ($nhsuk-page-width * 2 / 3) - ($nhsuk-gutter * 1 / 3);
+
+    // ...and then factor in the left border and padding
+    $banner-exterior: ($padding-tablet + $nhsuk-border-width);
+    max-width: $two-col-width - $banner-exterior;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.app-notification-banner__heading {
+  @include nhsuk-font($size: 24);
+  @include nhsuk-typography-weight-bold;
+
+  margin: 0 0 nhsuk-spacing(3);
+
+  padding: 0;
+}
+
+.app-notification-banner__link {
+  @include nhsuk-link-style-default;
+  @include nhsuk-link-style-no-visited-state;
+}
+
+.app-notification-banner--success {
+  border-color: $nhsuk-success-color;
+  background-color: $nhsuk-success-color;
+
+  .app-notification-banner__link {
+    @include nhsuk-link-style-success;
+  }
+}

app/assets/sass/components/_status.scss

@@ -0,0 +1,11 @@
+.app-header-with-status {
+  position: relative;
+}
+
+.app-header-with-status__status-tag {
+  position: absolute;
+  top: 10px;
+  right: 0px;
+  text-align: right;
+}
+

app/assets/sass/main.scss

@@ -8,9 +8,12 @@
 @import 'components/header-organisation';
 @import 'components/secondary-navigation';
 @import 'components/count';
+@import 'components/notification-banner';
+@import 'components/status';
+
 @import 'components/overrides';
 
-@import 'pages/events';
+
 
 @import 'misc';
 
@@ -21,4 +24,4 @@
 ///////////////////////////////////////////
 // Add your custom CSS/Sass styles below...
 ///////////////////////////////////////////
-  
+

app/assets/sass/pages/_events.scss

@@ -33,6 +33,22 @@ const formatDate = (dateString, format = 'D MMMM YYYY') => {
   return dayjs(dateString).format(format)
 }
 
+/**
+ * Format a date in UK format with special month abbreviations
+ * For months with 4 letters (June, July), use the full name
+ * For other months, use 3 letter abbreviation
+ * @param {string} dateString - ISO date string
+ * @returns {string} Formatted date string
+ */
+const formatDateShort = (dateString) => {
+  if (!dateString) return ''
+
+  const date = dayjs(dateString)
+  const monthFormat = ['June', 'July'].includes(date.format('MMMM')) ? 'MMMM' : 'MMM'
+
+  return `${date.format('D')} ${date.format(monthFormat)} ${date.format('YYYY')}`
+}
+
 /**
  * Format a time in UK format
  * @param {string} dateString - ISO date string
@@ -44,9 +60,9 @@ const formatTime = (dateString, format = 'H:mm') => {
 }
 
 /**
- * Format a time in 12-hour format
+ * Format a time in 12-hour format with special cases for round hours, midday and midnight
  * @param {string} input - Either a time string (e.g. "17:00") or full date/datetime
- * @returns {string} Formatted time (e.g. "5:00pm")
+ * @returns {string} Formatted time (e.g. "5pm", "5:30pm", "midday", "midnight")
  */
 const formatTimeString = (input) => {
   if (!input) return ''
@@ -56,7 +72,19 @@ const formatTimeString = (input) => {
     ? input
     : `2000-01-01T${input}`
 
-  return dayjs(datetime).format('h:mma')
+  const time = dayjs(datetime)
+  const hour = time.hour()
+  const minute = time.minute()
+
+  // Handle special cases
+  if (minute === 0) {
+    if (hour === 0) return 'midnight'
+    if (hour === 12) return 'midday'
+    return `${time.format('h')}${time.format('a')}`
+  }
+
+  // For non-zero minutes, return full format
+  return time.format('h:mma')
 }
 
 /**
@@ -217,6 +245,7 @@ const getWeekDates = (dateString) => {
 
 module.exports = {
   formatDate,
+  formatDateShort,
   formatTime,
   formatTimeString,
   formatTimeRange,

app/lib/utils/dates.js

@@ -52,6 +52,8 @@ const filterEventsByStatus = (events, filter) => {
       return events.filter(e => e.status === 'event_checked_in')
     case 'complete':
       return events.filter(e => ['event_complete', 'event_partially_screened', 'event_attended_not_screened'].includes(e.status))
+    case 'remaining':
+        return events.filter(e => ['event_scheduled', 'event_checked_in'].includes(e.status))
     default:
       return events
   }

app/lib/utils/status.js

@@ -1,14 +1,16 @@
 // app/lib/utils/strings.js
 
 /**
- * Convert string to sentence case
+ * Convert string to sentence case, removing leading/trailing whitespace
  * @param {string} input - String to convert
- * @returns {string} Sentence case string
+ * @returns {string} Trimmed sentence case string
  */
 const sentenceCase = (input) => {
   if (!input) return ''
   if (typeof input !== 'string') return input
-  return input.charAt(0).toUpperCase() + input.slice(1)
+
+  const trimmed = input.trim()
+  return trimmed.charAt(0).toUpperCase() + trimmed.slice(1)
 }
 
 /**

app/lib/utils/strings.js

@@ -0,0 +1,53 @@
+// app/lib/utils/summary-list.js
+
+const _ = require('lodash')
+
+/**
+ * Check if a value should be considered empty/missing
+ * @param {any} value - Value to check
+ * @returns {boolean} True if value should be considered empty
+ */
+const isEmpty = (value) => {
+  if (_.isString(value)) {
+    return value.trim() === '' || value.toLowerCase() === 'incomplete'
+  }
+  return value === null || value === undefined
+}
+
+/**
+ * Convert value object to "Enter X" link if empty
+ * @param {Object} row - Summary list row
+ * @returns {Object} Modified row with enter link if empty
+ */
+const showMissingInformationLink = (summaryList) => {
+  if (!summaryList?.rows) return summaryList
+
+  const updatedRows = summaryList.rows.map(row => {
+    const value = row.value?.text || row.value?.html
+    if (!isEmpty(value)) return row
+
+    const keyText = row.actions?.items?.[0]?.visuallyHiddenText || row.key.text.toLowerCase()
+    const href = row.actions?.items?.[0]?.href || '#'
+
+
+    return {
+      ...row,
+      value: {
+        html: `<a href="${href}" class="nhsuk-link">Enter ${keyText}</a>`
+        // html: `<a href="${href}" class="nhsuk-link">Enter details</a>`
+      },
+      actions: {
+        items: []
+      }
+    }
+  })
+
+  return {
+    ...summaryList,
+    rows: updatedRows
+  }
+}
+
+module.exports = {
+  showMissingInformationLink
+}

app/lib/utils/summary-list.js

@@ -268,7 +268,7 @@ module.exports = router => {
 
 
   // Single clinic view
-  const VALID_FILTERS = ['scheduled', 'checked-in', 'complete', 'all']
+  const VALID_FILTERS = ['remaining', 'scheduled', 'checked-in', 'complete', 'all']
 
   // Support both /clinics/:id and /clinics/:id/:filter
   router.get(['/clinics/:id', '/clinics/:id/:filter'], (req, res) => {
@@ -279,7 +279,7 @@ module.exports = router => {
     }
 
     // Check filter from either URL param or query string
-    const filter = req.params.filter || req.query.filter || 'all'
+    const filter = req.params.filter || req.query.filter || 'remaining'
 
     // Validate filter
     if (!VALID_FILTERS.includes(filter)) {