diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index ad807ef..a6046b9 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -1,5 +1,6 @@ // Import NHS.UK frontend library @forward "nhsuk-frontend/dist/nhsuk/nhsuk"; +@use "nhsuk-frontend/dist/nhsuk/core" as *; // Stolen Manage prototype components :P // https://github.com/NHSDigital/manage-breast-screening-prototype @@ -12,3 +13,99 @@ justify-content: space-between; align-items: baseline; } + +// Batch (for now) view bar charts and legends + +:root { + --generic-chart-hatch: repeating-linear-gradient(45deg, #005eb8, #005eb8 1px, #ccdff1 1px, #ccdff1 12px); + --standard-chart-hatch: repeating-linear-gradient(45deg, #004c23, #004c23 1px, #cce5d8 1px, #cce5d8 12px); + --special-chart-hatch: repeating-linear-gradient(-45deg, #4d3708, #4d3708 1px, #ffdc8e 1px, #ffdc8e 12px); + --vhr-chart-hatch-1: repeating-linear-gradient(-45deg, #6b140e, #6b140e 1px, transparent 1px, transparent 12px); + --vhr-chart-hatch-2: repeating-linear-gradient(45deg, #6b140e, #6b140e 1px, #f7d4d1 1px, #f7d4d1 12px); +} + +.hatching--standard { + background: var(--standard-chart-hatch) +} +.hatching--special { + background: var(--special-chart-hatch), +} +.hatching--high-risk { + background: var(--vhr-chart-hatch-1), var(--vhr-chart-hatch-2) +} + +.app-chart-bar-segmented-horizontal { + margin: 0; + /* Turn the table tbody into a single horizontal bar */ + tbody { + display: flex; + width: 100%; + height: 3rem; + overflow: hidden; + } + /* Each row becomes a segment, sized by its proportion of the total */ + tbody tr { + display: flex; + align-items: center; + justify-content: left; + overflow: hidden; + } +} +.app-chart-bar-segmented-horizontal--legend { + @include nhsuk-media-query($from: tablet) { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1.5rem; + align-items: flex-start; + + li { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 8px; + } + } + .swatch { + display: inline-block; + width: 2rem; + height: 2rem; + flex-shrink: 0; + margin-right: 6px; + vertical-align: middle; + } +} + +.app-batch-overview-sparkline { + background-color: #fff; +} +.app-u-one-left-one-right { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.app-simple-progress-bar { + width: 100%; + min-width: 200px; + height: 3rem; + + &.--thin { + height: auto; + } + + &.--generic { + background: var(--generic-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff; + } + + &.--standard { + background: var(--standard-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff; + } + &.--special { + background: var(--special-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff; + } + &.--vhr { + background: var(--vhr-chart-hatch-1) 0 0 / var(--percentage) 100% no-repeat, var(--vhr-chart-hatch-2) 0 0 / var(--percentage) 100% no-repeat,#fff; + } +} diff --git a/app/views/_includes/primary-navigation.html b/app/views/_includes/primary-navigation.html new file mode 100644 index 0000000..834ab3f --- /dev/null +++ b/app/views/_includes/primary-navigation.html @@ -0,0 +1,55 @@ +{% from 'header/macro.njk' import header %} + +{% macro primaryNavigation(activeItem, serviceName) %} + {{ header({ + account: { + items: [ + { + text: "West Berkshire BSO" + }, + { + href: "#", + text: "Thomas Pynchon", + icon: true + }, + { + href: "/", + text: "Log out" + } + ] + }, + service: { + text: serviceName, + href: "/" + }, + navigation: { + items: [ + { + href: "#", + text: "Dashboard", + active: activeItem === "Dashboard" + }, + { + href: "/batches/", + text: "Manage batches", + active: activeItem === "Manage batches" + }, + { + href: "#", + text: "Manage clinics", + active: activeItem === "Manage clinics" + }, + { + href: "/bso-objects/", + text: "Manage other stuff", + active: activeItem === "Manage other stuff" + }, + { + href: "#", + text: "Reports", + active: activeItem === "Reports" + } + ] + } + }) }} +{% endmacro %} diff --git a/app/views/batches/batch-detail-in-progress.html b/app/views/batches/batch-detail-in-progress.html new file mode 100644 index 0000000..19064fc --- /dev/null +++ b/app/views/batches/batch-detail-in-progress.html @@ -0,0 +1,287 @@ + +{% extends 'layout.html' %} + + +{% set pageName = "West Berks mobile screening unit name" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Manage batches", serviceName) }} +{% endblock %} + +{% block beforeContent %} +{{ breadcrumb({ + items: [ + { + href: "#", + text: "Home" + }, + { + href: "/batches/", + text: "Manage batches" + } + ] +}) }} +{% endblock %} + + + +{% block content %} + +
+
+
+ BDE-NTDD-202601011200 +
+

+ Harrogate Practices Feb-March 2026 Round 13 +

+

Change

+
+ Standard (NTDD) batch imported 1st January 2026 +
+
+ +
+
+
+
+

+ + 1987 + +

+ total participants +
+
+
+ +
+ +
+ +
+ +
+
+
+ +

Participant breakdown

+ +
+
Participant breakdown by type
+ + + + + + + + + + + + + + + + + + + + + + + + +
CategoryCount
+ Standard + + {{ tag({ + text: "1970", + classes: "nhsuk-tag--green nhsuk-u-margin-left-2" + }) }} +
+ Special Requirements + + {{ tag({ + text: "12", + classes: "nhsuk-tag--orange nhsuk-u-margin-left-2" + }) }} +
+ Very High Risk + + {{ tag({ + text: "5", + classes: "nhsuk-tag--red nhsuk-u-margin-left-2" + }) }} +
+ + + +
+
+
+ +
+
+

Participant distribution by next test due date

+
+
+
+
+
+ +
+
+
+ Earliest next test due date: +

+ 28 February 2026 +

+
+
+ Latest: +

+ 31 March 2026 +

+
+
+
+
+
+ +
+ +
+
+
+

Batch progress

+
+ {{ tag({ + text: "1970 of 1987 dealt with", + classes: "nhsuk-tag--blue nhsuk-u-margin-left-2" + }) }} +
+
+
+ +
+
+

Appointed

+ Standard +
+
+
+
+
+ {{ tag({ + text: "100% appointed", + classes: "nhsuk-tag--green nhsuk-u-margin-left-2" + }) }} +
+
+
+

1970 of 1970 appointed

+
+
+ +
+ +
+
+
+
+ {{ tag({ + text: "0% appointed", + classes: "nhsuk-tag--orange nhsuk-u-margin-left-2" + }) }} +
+
+
+

0 of 12 appointed

+
+
+ +
+
+

Reconciled

+ Very high risk (VHR) +
+
+
+
+
+ {{ tag({ + text: "0% reconciled", + classes: "nhsuk-tag--red nhsuk-u-margin-left-2" + }) }} +
+
+
+

0 of 5 reconciled

+
+
+
+ +
+ +
+
+
+ {% call details({ + summaryHtml: '

Clinics associated with this batch

' + }) %} +

No clinics associated with this batch

+ {% endcall %} +
+
+
+ +{% endblock %} diff --git a/app/views/batches/batch-detail.html b/app/views/batches/batch-detail.html new file mode 100644 index 0000000..e974b23 --- /dev/null +++ b/app/views/batches/batch-detail.html @@ -0,0 +1,287 @@ + +{% extends 'layout.html' %} + + +{% set pageName = "West Berks mobile screening unit name" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Manage batches", serviceName) }} +{% endblock %} + +{% block beforeContent %} +{{ breadcrumb({ + items: [ + { + href: "#", + text: "Home" + }, + { + href: "/batches/", + text: "Manage batches" + } + ] +}) }} +{% endblock %} + + + +{% block content %} + +
+
+
+ BDE-NTDD-202601011200 +
+

+ Harrogate Practices Feb-March 2026 Round 13 +

+

Change

+
+ Standard (NTDD) batch imported 1st January 2026 +
+
+ +
+
+
+
+

+ + 1987 + +

+ total participants +
+
+
+ +
+ +
+ +
+ +
+
+
+ +

Participant breakdown

+ +
+
Participant breakdown by type
+ + + + + + + + + + + + + + + + + + + + + + + + +
CategoryCount
+ Standard + + {{ tag({ + text: "1970", + classes: "nhsuk-tag--green nhsuk-u-margin-left-2" + }) }} +
+ Special Requirements + + {{ tag({ + text: "12", + classes: "nhsuk-tag--orange nhsuk-u-margin-left-2" + }) }} +
+ Very High Risk + + {{ tag({ + text: "5", + classes: "nhsuk-tag--red nhsuk-u-margin-left-2" + }) }} +
+ + + +
+
+
+ +
+
+

Participant distribution by next test due date

+
+
+
+
+
+ +
+
+
+ Earliest next test due date: +

+ 28 February 2026 +

+
+
+ Latest: +

+ 31 March 2026 +

+
+
+
+
+
+ +
+ +
+
+
+

Batch progress

+
+ {{ tag({ + text: "0 of 1987 dealt with", + classes: "nhsuk-tag--blue nhsuk-u-margin-left-2" + }) }} +
+
+
+ +
+
+

Appointed

+ Standard +
+
+
+
+
+ {{ tag({ + text: "0% appointed", + classes: "nhsuk-tag--green nhsuk-u-margin-left-2" + }) }} +
+
+
+

0 of 1970 appointed

+
+
+ +
+ +
+
+
+
+ {{ tag({ + text: "0% appointed", + classes: "nhsuk-tag--orange nhsuk-u-margin-left-2" + }) }} +
+
+
+

0 of 12 appointed

+
+
+ +
+
+

Reconciled

+ Very high risk (VHR) +
+
+
+
+
+ {{ tag({ + text: "0% reconciled", + classes: "nhsuk-tag--red nhsuk-u-margin-left-2" + }) }} +
+
+
+

0 of 5 reconciled

+
+
+
+ +
+ +
+
+
+ {% call details({ + summaryHtml: '

Clinics associated with this batch

' + }) %} +

No clinics associated with this batch

+ {% endcall %} +
+
+
+ +{% endblock %} diff --git a/app/views/batches/index.html b/app/views/batches/index.html new file mode 100644 index 0000000..55ea1e8 --- /dev/null +++ b/app/views/batches/index.html @@ -0,0 +1,134 @@ +{% extends 'layout.html' %} + +{% set pageName = "Manage batches" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Manage batches", serviceName) }} +{% endblock %} + +{% block beforeContent %} + +{{ breadcrumb({ + items: [ + { + href: "#", + text: "Home" + } + ] +}) }} + +{% endblock %} + +{% block content %} +
+

Batches in progress

+ + {{ button({ + text: "Import a new batch", + href: "#", + classes: "nhsuk-button--secondary" + }) }} +
+ +
+
+ + + {% set batch %} + + Harrogate Practices Feb-March 2026 Round 13
+ BDE-NTDD-202601011200 +
+ {% endset %} + + {% set progress %} +
+ {{ tag({ + text: "99%", + classes: "nhsuk-tag--blue nhsuk-u-margin-1" + }) }} +
+ {% endset %} + + + {% set batch_new %} + + Harrogate Practices Feb-March 2026 Round 13
+ BDE-NTDD-202601011200 +
+ {% endset %} + + {% set progress_new %} +
+ {{ tag({ + text: "0%", + classes: "nhsuk-tag--blue nhsuk-u-margin-1" + }) }} +
+ {% endset %} + + {{ table({ + firstCellIsHeader: true, + head: [ + { + text: "Batch" + }, + { + text: "Type" + }, + { + text: "Participants", + format: "numeric" + }, + { + text: "Progress" + } + ], + rows: [ + [ + { + html: batch_new + }, + { + text: "Standard (NTDD)" + }, + { + text: "1987", + format: "numeric" + }, + { + html: progress_new + } + ], + [ + { + html: batch + }, + { + text: "Standard (NTDD)" + }, + { + text: "1987", + format: "numeric" + }, + { + html: progress + } + ] + ] + }) }} + + +
+
+ +
+
+

Completed batches

+

+ View completed batches +

+
+
+{% endblock %} diff --git a/app/views/pre-alpha-flats/bso/bso-internal-details.html b/app/views/bso-objects/bso/bso-internal-details.html similarity index 98% rename from app/views/pre-alpha-flats/bso/bso-internal-details.html rename to app/views/bso-objects/bso/bso-internal-details.html index d6b5252..f6d9447 100644 --- a/app/views/pre-alpha-flats/bso/bso-internal-details.html +++ b/app/views/bso-objects/bso/bso-internal-details.html @@ -25,8 +25,9 @@ {% endblock %} +{% from "_includes/primary-navigation.html" import primaryNavigation %} {% block header %} - {% include "pre-alpha-flats/_includes/primary-navigation.html" %} + {{ primaryNavigation("Manage other stuff", serviceName) }} {% endblock %} @@ -39,7 +40,7 @@ text: "Home" }, { - href: "/pre-alpha-flats/", + href: "/bso-objects/", text: "Manage other stuff" } ] diff --git a/app/views/pre-alpha-flats/bso/bso-public-details.html b/app/views/bso-objects/bso/bso-public-details.html similarity index 97% rename from app/views/pre-alpha-flats/bso/bso-public-details.html rename to app/views/bso-objects/bso/bso-public-details.html index 58fc380..7286a1c 100644 --- a/app/views/pre-alpha-flats/bso/bso-public-details.html +++ b/app/views/bso-objects/bso/bso-public-details.html @@ -19,8 +19,9 @@ --> {% set pageName = "West Berkshire Screening Service" %} +{% from "_includes/primary-navigation.html" import primaryNavigation %} {% block header %} - {% include "pre-alpha-flats/_includes/primary-navigation.html" %} + {{ primaryNavigation("Manage other stuff", serviceName) }} {% endblock %} @@ -33,7 +34,7 @@ text: "Home" }, { - href: "/pre-alpha-flats/", + href: "/bso-objects/", text: "Manage other stuff" } ] diff --git a/app/views/pre-alpha-flats/bso/geo-bso-west-berks.js b/app/views/bso-objects/bso/geo-bso-west-berks.js similarity index 100% rename from app/views/pre-alpha-flats/bso/geo-bso-west-berks.js rename to app/views/bso-objects/bso/geo-bso-west-berks.js diff --git a/app/views/pre-alpha-flats/index.html b/app/views/bso-objects/index.html similarity index 88% rename from app/views/pre-alpha-flats/index.html rename to app/views/bso-objects/index.html index f3bab9c..a1d595c 100755 --- a/app/views/pre-alpha-flats/index.html +++ b/app/views/bso-objects/index.html @@ -19,8 +19,9 @@ --> {% set pageName = "Manage other stuff" %} +{% from "_includes/primary-navigation.html" import primaryNavigation %} {% block header %} - {% include "pre-alpha-flats/_includes/primary-navigation.html" %} + {{ primaryNavigation("Manage other stuff", serviceName) }} {% endblock %} @@ -45,7 +46,7 @@
{{ card({ clickable: true, - href: "/pre-alpha-flats/bso/bso-public-details", + href: "/bso-objects/bso/bso-public-details", heading: "Breast screening office (BSO)", headingClasses: "nhsuk-heading-m", description: "Manage your organisation details" @@ -56,7 +57,7 @@
  • {{ card({ clickable: true, - href: "/pre-alpha-flats/unit/unit-listing", + href: "/bso-objects/unit/unit-listing", heading: "Breast screening units", headingClasses: "nhsuk-heading-m", description: "Manage the screening units that make up your BSO" @@ -65,7 +66,7 @@
  • {{ card({ clickable: true, - href: "/pre-alpha-flats/location/location-listing", + href: "/bso-objects/location/location-listing", heading: "Manage locations", headingClasses: "nhsuk-heading-m", description: "Manage the static and mobile locations available to your units" diff --git a/app/views/pre-alpha-flats/location/location-listing.html b/app/views/bso-objects/location/location-listing.html similarity index 87% rename from app/views/pre-alpha-flats/location/location-listing.html rename to app/views/bso-objects/location/location-listing.html index 07f0952..94d63ac 100644 --- a/app/views/pre-alpha-flats/location/location-listing.html +++ b/app/views/bso-objects/location/location-listing.html @@ -19,8 +19,9 @@ --> {% set pageName = "Units" %} +{% from "_includes/primary-navigation.html" import primaryNavigation %} {% block header %} - {% include "pre-alpha-flats/_includes/primary-navigation.html" %} + {{ primaryNavigation("Manage other stuff", serviceName) }} {% endblock %} @@ -33,7 +34,7 @@ text: "Home" }, { - href: "/pre-alpha-flats/", + href: "/bso-objects/", text: "Manage other stuff" } ] @@ -51,7 +52,7 @@

  • {% set cardHeadingHtml %} -

    Camberwell building

    +

    Camberwell building

    {% endset %} {% set cardDescriptionHtml %} diff --git a/app/views/pre-alpha-flats/location/location-location-details.html b/app/views/bso-objects/location/location-location-details.html similarity index 97% rename from app/views/pre-alpha-flats/location/location-location-details.html rename to app/views/bso-objects/location/location-location-details.html index c76e1d9..53c0519 100644 --- a/app/views/pre-alpha-flats/location/location-location-details.html +++ b/app/views/bso-objects/location/location-location-details.html @@ -25,8 +25,9 @@ {% endblock %} +{% from "_includes/primary-navigation.html" import primaryNavigation %} {% block header %} - {% include "pre-alpha-flats/_includes/primary-navigation.html" %} + {{ primaryNavigation("Manage other stuff", serviceName) }} {% endblock %} @@ -39,11 +40,11 @@ text: "Home" }, { - href: "/pre-alpha-flats/", + href: "/bso-objects/", text: "Manage other stuff" }, { - href: "/pre-alpha-flats/location/location-listing", + href: "/bso-objects/location/location-listing", text: "Locations" } ] diff --git a/app/views/pre-alpha-flats/location/location-travel-and-transport.html b/app/views/bso-objects/location/location-travel-and-transport.html similarity index 96% rename from app/views/pre-alpha-flats/location/location-travel-and-transport.html rename to app/views/bso-objects/location/location-travel-and-transport.html index 3cee8c7..1ee0cf8 100644 --- a/app/views/pre-alpha-flats/location/location-travel-and-transport.html +++ b/app/views/bso-objects/location/location-travel-and-transport.html @@ -19,8 +19,9 @@ --> {% set pageName = "Camberwell Building" %} +{% from "_includes/primary-navigation.html" import primaryNavigation %} {% block header %} - {% include "pre-alpha-flats/_includes/primary-navigation.html" %} + {{ primaryNavigation("Manage other stuff", serviceName) }} {% endblock %} @@ -33,11 +34,11 @@ text: "Home" }, { - href: "/pre-alpha-flats/", + href: "/bso-objects/", text: "Manage other stuff" }, { - href: "/pre-alpha-flats/location/location-listing", + href: "/bso-objects/location/location-listing", text: "Locations" } ] diff --git a/app/views/pre-alpha-flats/unit/unit-internal-details.html b/app/views/bso-objects/unit/unit-internal-details.html similarity index 94% rename from app/views/pre-alpha-flats/unit/unit-internal-details.html rename to app/views/bso-objects/unit/unit-internal-details.html index 72dbf9c..89de1b4 100644 --- a/app/views/pre-alpha-flats/unit/unit-internal-details.html +++ b/app/views/bso-objects/unit/unit-internal-details.html @@ -19,8 +19,9 @@ --> {% set pageName = "West Berks mobile screening unit name" %} +{% from "_includes/primary-navigation.html" import primaryNavigation %} {% block header %} - {% include "pre-alpha-flats/_includes/primary-navigation.html" %} + {{ primaryNavigation("Manage other stuff", serviceName) }} {% endblock %} @@ -33,11 +34,11 @@ text: "Home" }, { - href: "/pre-alpha-flats/", + href: "/bso-objects/", text: "Manage other stuff" }, { - href: "/pre-alpha-flats/unit/unit-listing", + href: "/bso-objects/unit/unit-listing", text: "Units" } ] diff --git a/app/views/pre-alpha-flats/unit/unit-listing.html b/app/views/bso-objects/unit/unit-listing.html similarity index 89% rename from app/views/pre-alpha-flats/unit/unit-listing.html rename to app/views/bso-objects/unit/unit-listing.html index ee9a3a1..a66bdef 100644 --- a/app/views/pre-alpha-flats/unit/unit-listing.html +++ b/app/views/bso-objects/unit/unit-listing.html @@ -19,8 +19,9 @@ --> {% set pageName = "Units" %} +{% from "_includes/primary-navigation.html" import primaryNavigation %} {% block header %} - {% include "pre-alpha-flats/_includes/primary-navigation.html" %} + {{ primaryNavigation("Manage other stuff", serviceName) }} {% endblock %} @@ -33,7 +34,7 @@ text: "Home" }, { - href: "/pre-alpha-flats/", + href: "/bso-objects/", text: "Manage other stuff" } ] @@ -52,7 +53,7 @@

    {% set cardHeadingHtml %} Mobile unit: Mandy - AN-SKIT-p33ps -

    West Berks mobile screening unit

    +

    West Berks mobile screening unit

    {% endset %} {% set cardDescriptionHtml %} diff --git a/app/views/pre-alpha-flats/unit/unit-public-details.html b/app/views/bso-objects/unit/unit-public-details.html similarity index 95% rename from app/views/pre-alpha-flats/unit/unit-public-details.html rename to app/views/bso-objects/unit/unit-public-details.html index 777baa1..407bdcf 100644 --- a/app/views/pre-alpha-flats/unit/unit-public-details.html +++ b/app/views/bso-objects/unit/unit-public-details.html @@ -19,8 +19,9 @@ --> {% set pageName = "West Berks mobile screening unit name" %} +{% from "_includes/primary-navigation.html" import primaryNavigation %} {% block header %} - {% include "pre-alpha-flats/_includes/primary-navigation.html" %} + {{ primaryNavigation("Manage other stuff", serviceName) }} {% endblock %} @@ -33,11 +34,11 @@ text: "Home" }, { - href: "/pre-alpha-flats/", + href: "/bso-objects/", text: "Manage other stuff" }, { - href: "/pre-alpha-flats/unit/unit-listing", + href: "/bso-objects/unit/unit-listing", text: "Units" } ] diff --git a/app/views/index.html b/app/views/index.html index 8225aa6..fa3cfab 100755 --- a/app/views/index.html +++ b/app/views/index.html @@ -37,21 +37,36 @@

    {{ serviceName }}

    +

    Mid April 2026

    +

    Batches: first run at these fundamental objects

    + +
      +
    1. + Batch listing +
    2. +
    3. + Brand new batch +
    4. +
    5. + Batch in progress +
    6. +
    +

    Late March 2026

    -

    Mat note: first rounds of flats based on "easy win" building blocks. Cheap sketches to provoke.

    +

    BSO-level building blocks

    1. - Manage organisation, breast screening units, and locations + Manage organisation, breast screening units, and locations
    2. - BSO organisation + BSO organisation
    3. - Breast screening units + Breast screening units
    4. - Locations + Locations
    diff --git a/app/views/pre-alpha-flats/_includes/primary-navigation.html b/app/views/pre-alpha-flats/_includes/primary-navigation.html deleted file mode 100644 index 35021dc..0000000 --- a/app/views/pre-alpha-flats/_includes/primary-navigation.html +++ /dev/null @@ -1,47 +0,0 @@ -{{ header({ - account: { - items: [ - { - text: "West Berkshire BSO" - }, - { - href: "#", - text: "Thomas Pynchon", - icon: true - }, - { - href: "/", - text: "Log out" - } - ] - }, - service: { - text: serviceName, - href: "/" - }, - navigation: { - items: [ - { - href: "#", - text: "Dashboard" - }, - { - href: "#", - text: "Manage batches" - }, - { - href: "#", - text: "Manage clinics" - }, - { - href: "#", - text: "Manage other stuff", - active: true - }, - { - href: "#", - text: "Reports" - } - ] - } -}) }}