Mission 1, 1 day clinic

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

@@ -49,3 +49,12 @@
 
 }
 
+.app-table-column-status {
+  width: 15%;
+}
+.app-table-column-actions {
+  width: 7%;
+}
+.app-table-cell-actions > .nhsuk-button {
+  margin: -4px 0;
+}

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

@@ -0,0 +1,58 @@
+@use "nhsuk-frontend/dist/nhsuk/core" as *;
+
+.slot {
+  background-color: nhsuk-colour("white");
+  border: 1px solid $nhsuk-input-border-colour;
+  padding-left: nhsuk-spacing(2);
+  user-select: none;
+  @include nhsuk-responsive-margin(2, "bottom");
+  min-height: nhsuk-px-to-rem(46px);
+}
+
+.slot-end {
+  @include nhsuk-font-size(16);
+  margin-right: 1rem;
+}
+.slot-tag { margin-left: 1rem; }
+
+.slot.is-hold {}
+
+.slot.is-staff-break {
+  background: repeating-linear-gradient(130deg, nhsuk-colour("grey-4"), nhsuk-colour("grey-4") 1px, transparent 1px, transparent 12px);
+  border-color: $nhsuk-border-colour;
+}
+
+.slot.is-special-appointment {}
+
+.slot.is-merged {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+.slot.is-merged-child  {
+  border-top: 1px dashed #212b32;
+  height: 42px;
+}
+.slot.is-merged-child > .nhsuk-checkboxes__item,
+.slot.is-merged-child > div { 
+  display: none;
+}
+.slot.is-merged-last-child { 
+  border-bottom: 1px solid #212b32;
+  margin-bottom: 12px;
+}
+
+.slot.is-staff-break.is-merged-last-child {
+  border-bottom-style: dashed;
+}
+
+.slot.is-merged-child > .slot-time,
+.slot.is-merged-child > .slot-end {
+  display: none;
+}
+
+.slot .nhsuk-checkboxes__label {
+  width: 100%;
+}
+
+.panel-item { display: block; cursor: pointer; }
+.panel-item.disabled { opacity: 0.38; cursor: default; pointer-events: none; }

app/assets/sass/main.scss

@@ -20,8 +20,6 @@
   $nhsuk-gutter: 24px,
 
   // Reduce layout spacing points (5–9). Points 0–4 stay at NHS defaults.
-  // Checkbox and radio geometry is fixed in px rather than driven by the spacing scale,
-  // and _compact.scss applies the --small variant to all checkboxes/radios.
   $nhsuk-spacing-points: (
       0: 0,
       1: 4px,
@@ -94,38 +92,18 @@
 @forward "components/participant-table";
 //@forward "components/participant-search";
 @forward "components/progress-bar";
+@forward "components/session-slots";
 @forward "components/template-card";
 @forward "components/template-preview-dialog";
 @forward "components/workflow";
 
 //{% set containerClasses = "nhsuk-width-container-fluid" %}
 // Add your custom CSS/Sass styles below.
-.app-width-extended {
-  width: 1280px;
-}
 
 a {
   @extend .nhsuk-link--no-visited-state;
 }
 
-// Makes a <button> look and behave like the .panel-item links it sits alongside
-.app-link-button {
-  display: block;
-  width: 100%;
-  padding: 0;
-  border: 0;
-  background: none;
-  text-align: left;
-  font: inherit;
-  color: $nhsuk-link-colour;
-  cursor: pointer;
-
-  &:hover {
-    color: nhsuk-shade($nhsuk-link-colour, 20%);
-    text-decoration: underline;
-  }
-}
-
 .app-card-editable {
   display: flex;
   justify-content: space-between;
@@ -230,4 +208,7 @@ a {
 }
 .app-tag--attached {
   margin-right: -1px;
+}
+.app-nowrap {
+  white-space: nowrap;
 }

app/data/session-data-defaults.js

@@ -14,6 +14,7 @@ module.exports = {
   clinicCapacityPercentBooked: "0",
   clinicCapacityAvailable: "10",
   clinicCapacityTotal: "10",
+  missionOne: {},
   createCapacityFromZero: {
     schedules: [],
     selectedDays: [],