Skip to content

Revisions #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Demotive wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Revisions #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
20e8832
Batch elements made more realistic
Demotive Apr 28, 2026
7e680b2
Getting better BSO fidelity
Demotive Apr 28, 2026
f894a19
Working up units
Demotive Apr 29, 2026
8617ee3
Tidying up
Demotive Apr 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion app/assets/sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
--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);
--ceased-chart-hatch: repeating-linear-gradient(90deg, #354550, #354550 1px, #dbe0e3 1px, #dbe0e3 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);
}
Expand All @@ -28,7 +29,10 @@
background: var(--standard-chart-hatch)
}
.hatching--special {
background: var(--special-chart-hatch),
background: var(--special-chart-hatch)
}
.hatching--ceased {
background: var(--ceased-chart-hatch)
}
.hatching--high-risk {
background: var(--vhr-chart-hatch-1), var(--vhr-chart-hatch-2)
Expand Down Expand Up @@ -125,6 +129,9 @@
&.--special {
background: var(--special-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff;
}
&.--ceased {
background: var(--ceased-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;
}
Expand Down
2 changes: 1 addition & 1 deletion app/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

module.exports = {
// Service name
serviceName: 'Cohort to clinic service name',
serviceName: 'Cohort to clinic prototype',

// Port to run the prototype on locally
port: 3000
Expand Down
3 changes: 1 addition & 2 deletions app/data/session-data-defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// Use this file to set any default data

module.exports = {
}
module.exports = {}
4 changes: 2 additions & 2 deletions app/views/_includes/primary-navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{% from 'header/macro.njk' import header %}

{% macro primaryNavigation(activeItem, serviceName) %}
{% macro primaryNavigation(activeItem, serviceName, bsoName) %}
{{ header({
account: {
items: [
{
text: "West Berkshire BSO"
text: "West Sussex BSO"
},
{
href: "#",
Expand Down
204 changes: 71 additions & 133 deletions app/views/batches/batch-detail-in-progress.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,175 +31,96 @@
<section>
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-6">
<span class="nhsuk-caption-m">BDE-NTDD-20260201</span>
<span class="nhsuk-caption-m">HWO-standard-20251212</span>
<div class="app-card-editable">
<h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-1">
Malton Practices Apr-May 26 NTDD RD 13
Chichester - Parklands
</h1>
<p class="nhsuk-u-padding-right-5 nhsuk-u-margin-bottom-1"><a href="#">Change</a></p>
<p class="nhsuk-u-padding-right-5 nhsuk-u-margin-bottom-1"><a href="#">Edit batch name</a></p>
</div>
<span class="nhsuk-caption-m">Imported 2 February 2026</span>
</div>
</div>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-one-third">
{% call card({
clickable: true,
heading: "715",
headingClasses: "nhsuk-u-font-size-36 nhsuk-u-margin-bottom-1"
}) %}
<p>
<a href="#" class="nhsuk-card__link"><span class="nhsuk-u-visually-hidden">715</span> total participants</a>
</p>
{% endcall %}
</div>
<div class="nhsuk-grid-column-two-thirds">
<ul class="nhsuk-list">
<li>Standard (NTDD) batch</li>
<li><a href="#">8 postal outcodes</a></li>
<li><a href="#">2 GP practices</a></li>
</ul>
<div class="nhsuk-card nhsuk-card--clickable">
<div class="nhsuk-card__content">
<h2 class="nhsuk-card__heading nhsuk-u-font-size-36 nhsuk-u-margin-bottom-1">
<span role="text">
1352
</span>
</h2>
<a href="#" class="nhsuk-card__link nhsuk-u-font-size-19">total participants</a>
</div>
</div>
</div>
</div>

</section>

<hr class="nhsuk-u-margin-0 nhsuk-u-margin-bottom-4">

<section>
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">

<h2 class="nhsuk-heading-l">Participant breakdown</h2>
<!--
<figure class="app-chart-bar-segmented-horizontal">
<figcaption class="nhsuk-u-visually-hidden">Participant breakdown by type</figcaption>

<style>
/* Each row takes up an equal share — adjust flex values to reflect real proportions */
tbody tr:nth-child(1) {
flex: 98;
}
tbody tr:nth-child(2) {
flex: 1;
}
tbody tr:nth-child(3) {
flex: 1;
}
</style>

<table aria-describedby="chart-key" class="nhsuk-u-margin-bottom-4">
<thead class="nhsuk-u-visually-hidden">
<tr>
<th scope="col">Category</th>
<th scope="col">Count</th>
</tr>
</thead>
<tbody>
<tr class="hatching--standard">
<td class="nhsuk-u-visually-hidden">
Standard
</td>
<td class="nhsuk-u-padding-2">
{{ tag({
text: "700",
classes: "nhsuk-tag--green"
}) }}
<span class="nhsuk-u-visually-hidden">700</span>
</td>
</tr>
<tr class="hatching--special">
<td class="nhsuk-u-visually-hidden">
Special Requirements
</td>
<td class="nhsuk-u-padding-2">
{{ tag({
text: "10",
classes: "nhsuk-tag--orange"
}) }}
<span class="nhsuk-u-visually-hidden">10</span>
</td>
</tr>
<tr class="hatching--high-risk">
<td class="nhsuk-u-visually-hidden">
Very High Risk
</td>
<td class="nhsuk-u-padding-2">
{{ tag({
text: "5",
classes: "nhsuk-tag--red"
}) }}
<span class="nhsuk-u-visually-hidden">5</span>
</td>
</tr>
</tbody>
</table>

<ul id="chart-key" aria-label="Chart key" class="nhsuk-list nhsuk-u-margin-0 app-chart-bar-segmented-horizontal--legend">
<li>
<div class="swatch hatching--standard" aria-hidden="true"></div>
<div>
<a href="/batches/participant-breakdown/standard">700 standard</a><br>
<span class="key-label nhsuk-body-s">ready to appoint</span>
</div>
</li>
<li>
<div class="swatch hatching--special" aria-hidden="true"></div>
<div>
<a href="#">10 special requirements</a><br>
<span class="key-label nhsuk-body-s">reasonable adjustments etc.</span>
</div>
</li>
<li>
<div class="swatch hatching--high-risk" aria-hidden="true"></div>
<div>
<a href="#">5 very high risk (VHR)</a><br>
<span class="key-label nhsuk-body-s">ready to reconcile</span>
</div>
</li>
</ul>
</figure>
-->
<h2 class="nhsuk-heading-m">Participant breakdown</h2>
<ul class="nhsuk-grid-row nhsuk-card-group app-segmented-cards">
<li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
<li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
{% call card({
clickable: true
}) %}
<div class="swatch hatching--standard" aria-hidden="true"></div>
<div>
<a href="/batches/participant-breakdown/standard" class="nhsuk-card__link">700 standard</a><br>
<span class="nhsuk-body-s nhsuk-u-margin-bottom-0">ready to appoint</span>
<a href="/batches/participant-breakdown/standard" class="nhsuk-card__link">1330 standard</a>
</div>
{% endcall %}
</li>
<li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
<li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
{% call card({
clickable: true
}) %}
<div class="swatch hatching--special" aria-hidden="true"></div>
<div>
<a href="/batches/participant-breakdown/special-requirements" class="nhsuk-card__link">10 special requirements</a><br>
<span class="nhsuk-body-s nhsuk-u-margin-bottom-0">reasonable adjustments etc.</span>
<a href="/batches/participant-breakdown/special-requirements" class="nhsuk-card__link">12 special requirements</a>
</div>
{% endcall %}
</li>
<li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
{% call card({
clickable: true
}) %}
<div class="swatch hatching--ceased" aria-hidden="true"></div>
<div>
<a href="#" class="nhsuk-card__link">5 ceased</a>
</div>
{% endcall %}
</li>
<li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
<li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
{% call card({
clickable: true
}) %}
<div class="swatch hatching--high-risk" aria-hidden="true"></div>
<div>
<a href="#" class="nhsuk-card__link">5 very high risk (VHR)</a><br>
<span class="nhsuk-body-s nhsuk-u-margin-bottom-0">ready to reconcile</span>
<a href="#" class="nhsuk-card__link">5 very high risk (VHR)</a>
</div>
{% endcall %}
</li>
</ul>
</div>
</div>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
{% call details({
summaryHtml: '<h2 class="nhsuk-body-m">Further batch information</h2>'
}) %}
<p>Participants in this batch represent:</p>
<ul class="nhsuk-list">
<li><a href="#">16 postal outcodes</a></li>
<li><a href="#">4 GP practices</a></li>
</ul>
<p>Batch imported 14 December 2025</p>
{% endcall %}
</div>
</div>

<!--
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h3 class="nhsuk-heading-s">Participant distribution by next test due date</h3>
Expand All @@ -220,29 +141,30 @@ <h3 class="nhsuk-heading-s">Participant distribution by next test due date</h3>
<div>
<span class="nhsuk-caption-s">Earliest next test due date:</span>
<h3 class="nhsuk-heading-xs nhsuk-u-font-weight-normal">
6 April 2026
28 February 2026
</h3>
</div>
<div>
<span class="nhsuk-caption-s">Latest:</span>
<h3 class="nhsuk-heading-xs nhsuk-u-font-weight-normal">
27 May 2026
31 March 2026
</h3>
</div>
</div>
</div>
</div>
-->
</section>

<hr class="nhsuk-u-margin-0 nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-4">
<hr class="nhsuk-u-margin-0 nhsuk-u-margin-bottom-4">

<section>
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h2 class="nhsuk-heading-l">Batch progress</h2>
<div class="app-simple-progress-bar --generic nhsuk-u-padding-2" style="--percentage: 98%;">
<div class="app-simple-progress-bar --generic nhsuk-u-padding-2" style="--percentage: 97%;">
{{ tag({
text: "704 of 715 dealt with",
text: "1306 of 1352 dealt with",
classes: "nhsuk-tag--blue"
}) }}
</div>
Expand All @@ -259,7 +181,7 @@ <h2 class="nhsuk-heading-s nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-2">Appoint
<div class="nhsuk-grid-column-two-thirds">
<div class="app-simple-progress-bar --standard nhsuk-u-padding-2" style="--percentage: 100%;">
{{ tag({
text: "700 of 700 appointed",
text: "1330 of 1330 appointed",
classes: "nhsuk-tag--green"
}) }}
</div>
Expand All @@ -268,14 +190,14 @@ <h2 class="nhsuk-heading-s nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-2">Appoint

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-2">
<a href="/batches/participant-breakdown/special-requirements" class="nhsuk-u-font-size-19">Special requirements</a>
<a href="/batches/participant-breakdown/standard" class="nhsuk-u-font-size-19">Special requirements</a>
</div>
</div>
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<div class="app-simple-progress-bar --special nhsuk-u-padding-2" style="--percentage: 40%;">
<div class="app-simple-progress-bar --special nhsuk-u-padding-2" style="--percentage: 50%;">
{{ tag({
text: "4 of 10 appointed",
text: "6 of 12 appointed",
classes: "nhsuk-tag--orange"
}) }}
</div>
Expand All @@ -285,6 +207,22 @@ <h2 class="nhsuk-heading-s nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-2">Appoint
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-2">
<h2 class="nhsuk-heading-s nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-2">Reconciled</h2>
<a href="#" class="nhsuk-u-font-size-19">Ceased</a>
</div>
</div>
<div class="nhsuk-grid-row nhsuk-u-margin-bottom-3">
<div class="nhsuk-grid-column-two-thirds">
<div class="app-simple-progress-bar --ceased nhsuk-u-padding-2" style="--percentage: 0%;">
{{ tag({
text: "0 of 5 reconciled",
classes: "nhsuk-tag--grey"
}) }}
</div>
</div>
</div>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-2">
<a href="#" class="nhsuk-u-font-size-19">Very high risk (VHR)</a>
</div>
</div>
Expand Down
Loading