diff --git a/.azad/.locked-paths b/.azad/.locked-paths index 2f75ad9..2c020a4 100644 --- a/.azad/.locked-paths +++ b/.azad/.locked-paths @@ -1,5 +1,6 @@ [ "/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/search-results.html", "/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/create-account/email-verification.html", - "/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/create-account/email-welcome.html" + "/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/create-account/email-welcome.html", + "/Users/davidevans/Documents/Projects/procurement-prototype/app/views/current/search-results-dashboard.html" ] \ No newline at end of file diff --git a/app/assets/sass/components/_cards.scss b/app/assets/sass/components/_cards.scss new file mode 100644 index 0000000..b10de50 --- /dev/null +++ b/app/assets/sass/components/_cards.scss @@ -0,0 +1,116 @@ + + +.app-card { + &--blue { + border-color: nhsuk-tint(nhsuk-colour("blue"), 30%); + color: nhsuk-shade(nhsuk-colour("blue"), 30%); + background-color: nhsuk-tint(nhsuk-colour("blue"), 80%); + + &.nhsuk-card--clickable:active { + border-color: nhsuk-shade(nhsuk-colour("blue"), 30%); + } + } + + &--green { + border-color: nhsuk-tint(nhsuk-colour("green"), 40%); + color: nhsuk-shade(nhsuk-colour("green"), 40%); + background-color: nhsuk-tint(nhsuk-colour("green"), 80%); + + &.nhsuk-card--clickable:active { + border-color: nhsuk-shade(nhsuk-colour("green"), 40%); + } + } + + &--orange { + border-color: nhsuk-shade(nhsuk-colour("warm-yellow"), 10%); + color: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%); + background-color: nhsuk-tint(nhsuk-colour("warm-yellow"), 70%); + + &.nhsuk-card--clickable:active { + border-color: nhsuk-shade(nhsuk-colour("warm-yellow"), 30%); + } + + blockquote { + border-color: nhsuk-colour("warm-yellow"); + } + } + + &--red { + border-color: nhsuk-tint(nhsuk-colour("red"), 50%); + color: nhsuk-shade(nhsuk-colour("red"), 50%); + background-color: nhsuk-tint(nhsuk-colour("red"), 80%); + + &.nhsuk-card--clickable:active { + border-color: nhsuk-shade(nhsuk-colour("red"), 50%); + } + } + + &--blue, + &--green, + &--orange, + &--red, + &--yellow { + .nhsuk-card__link, + .nhsuk-card__link:hover { + color: inherit; + } + } + + &--offset { + background-color: rgba(nhsuk-colour("grey-5"), 0.5); + } +} + +.app-card--compact { + @include nhsuk-responsive-margin(3, "bottom"); + + .nhsuk-card__heading { + @include nhsuk-responsive-margin(2, "bottom"); + } + + .nhsuk-card__content { + @include nhsuk-responsive-padding(4); + } +} + +// Align counts across cards +.nhsuk-card:has(> .nhsuk-card__content > .app-card__data) { + display: flex; + + .nhsuk-card__heading { + line-height: 1.2; + } + + .nhsuk-card__content { + display: flex; + flex: 1; + flex-direction: column; + justify-content: space-between; + } +} + +.app-card__data { + @include nhsuk-font-size(48); + @include nhsuk-typography-weight-bold; +} + +.nhsuk-card--feature > .nhsuk-card__content { + & > .app-card__heading { + &--green { + background-color: nhsuk-colour("green"); + } + + &--grey { + background-color: nhsuk-colour("grey-1"); + } + + &--orange { + color: nhsuk-shade(nhsuk-colour("warm-yellow"), 80%); + background-color: nhsuk-colour("warm-yellow"); + } + + &--red { + background-color: nhsuk-colour("red"); + } + } +} diff --git a/app/assets/sass/components/_dashboard.scss b/app/assets/sass/components/_dashboard.scss new file mode 100644 index 0000000..de9b067 --- /dev/null +++ b/app/assets/sass/components/_dashboard.scss @@ -0,0 +1,146 @@ + + + /* Section heading with coloured underline */ + .compass-section { margin-bottom: 48px; } + .compass-section__heading { + font-size: 22px; font-weight: 700; color: #212b32; + padding-bottom: 12px; border-bottom: 4px solid #003087; + margin-bottom: 4px; display: flex; align-items: center; gap: 10px; + } + .compass-section__subtitle { font-size: 15px; color: #4c6272; margin-bottom: 20px; } + + /* 2-column grid */ + .compass-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } + + /* Stat tile with coloured top border */ + .stat-tile { + background: #fff; border: 1px solid #d8dde0; + border-top: 4px solid #003087; padding: 20px; + } + .stat-tile--green { border-top-color: #007f3b; } + .stat-tile--aqua { border-top-color: #00a9ce; } + .stat-tile--yellow { border-top-color: #ffb81c; } + .stat-tile--red { border-top-color: #da291c; } + .stat-tile--purple { border-top-color: #330072; } + .stat-tile__label { font-size: 13px; font-weight: 600; color: #4c6272; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; } + .stat-tile__value { font-size: 32px; font-weight: 700; color: #212b32; line-height: 1; margin-bottom: 4px; } + .stat-tile__sub { font-size: 14px; color: #4c6272; } + + /* Card label (eyebrow text) */ + .compass-card__label { + font-size: 13px; font-weight: 700; color: #4c6272; + text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; + display: flex; align-items: center; gap: 8px; + } + + /* Horizontal bar chart */ + .bar-chart { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } + .bar-item { display: flex; align-items: center; gap: 12px; } + .bar-label { font-size: 14px; color: #212b32; min-width: 148px; flex-shrink: 0; } + .bar-track { flex: 1; background: #f0f4f5; height: 28px; overflow: hidden; } + .bar-fill { height: 100%; display: flex; align-items: center; padding-left: 10px; font-size: 12px; font-weight: 700; color: #fff; min-width: 20px; } + .bar-count { font-size: 14px; font-weight: 600; min-width: 36px; text-align: right; } + + /* Segmented bar */ + .seg-bar { height: 36px; display: flex; overflow: hidden; margin: 12px 0; } + .seg-bar__seg { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; } + .seg-legend { display: flex; flex-wrap: wrap; gap: 12px; } + .seg-legend__item { display: flex; align-items: center; gap: 6px; font-size: 13px; } + .seg-legend__dot { width: 12px; height: 12px; flex-shrink: 0; } + + /* Timeline chart */ + .timeline-chart { margin-top: 12px; } + .timeline-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } + .timeline-lbl { font-size: 13px; color: #212b32; min-width: 124px; } + .timeline-track { flex: 1; background: #f0f4f5; height: 24px; overflow: hidden; } + .timeline-fill { height: 100%; } + .timeline-num { font-size: 13px; font-weight: 600; min-width: 28px; text-align: right; } + + /* Trust comparison list */ + .trust-list { display: flex; flex-direction: column; } + .trust-item { padding: 12px 0; border-bottom: 1px solid #d8dde0; display: flex; align-items: center; gap: 12px; } + .trust-item:last-child { border-bottom: none; } + .trust-item__rank { + width: 28px; height: 28px; border-radius: 50%; + background: #f0f4f5; display: flex; align-items: center; justify-content: center; + font-size: 12px; font-weight: 700; color: #4c6272; flex-shrink: 0; + } + .trust-item__rank--you { background: #003087; color: #fff; font-size: 11px; } + .trust-item__name { flex: 1; font-size: 14px; font-weight: 600; color: #212b32; } + .trust-item__type { font-size: 12px; color: #768692; font-weight: 400; } + .trust-item__bar { flex: 2; height: 16px; background: #f0f4f5; overflow: hidden; } + .trust-item__bar-fill { height: 100%; } + .trust-item__count { font-size: 14px; font-weight: 700; min-width: 36px; text-align: right; } + + /* Activity feed */ + .activity-feed { display: flex; flex-direction: column; } + .activity-item { padding: 14px 0; border-bottom: 1px solid #d8dde0; display: flex; gap: 12px; align-items: flex-start; } + .activity-item:last-child { border-bottom: none; } + .activity-item__date { margin-left: auto; font-size: 12px; color: #768692; flex-shrink: 0; white-space: nowrap; } + + /* Filter pill bar (no NHS equivalent for toggle pills) */ + .filter-bar { + background: #fff; border: 1px solid #d8dde0; + padding: 16px 20px; margin-bottom: 32px; + display: flex; align-items: center; gap: 12px; flex-wrap: wrap; + } + .filter-bar__label { font-size: 14px; font-weight: 700; color: #4c6272; flex-shrink: 0; } + .filter-pill { + padding: 6px 14px; font-size: 14px; font-family: inherit; + border: 2px solid #d8dde0; background: #f0f4f5; color: #212b32; + border-radius: 100px; cursor: pointer; + } + .filter-pill--active { background: #003087; border-color: #003087; color: #fff; } + .filter-bar__count { margin-left: auto; font-size: 14px; color: #4c6272; } + .filter-bar__count strong { color: #003087; } + + /* Feature comparison table overrides */ + .feature-table th { background: #003087; color: #fff; } + .feature-table th:first-child { background: #f0f4f5; color: #4c6272; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; } + .check { color: #007f3b; font-weight: 700; font-size: 16px; } + .cross { color: #aeb7bd; font-size: 16px; } + + /* ROI positive */ + .roi-positive { color: #007f3b; font-weight: 700; } + + /* Price range bars */ + .price-tier { margin-bottom: 16px; } + .price-tier__header { display: flex; justify-content: space-between; margin-bottom: 6px; } + .price-tier__bar { height: 20px; } + + /* Donut chart */ + .donut-wrap { display: flex; align-items: center; gap: 24px; margin-top: 12px; } + .donut { position: relative; width: 128px; height: 128px; flex-shrink: 0; } + .donut svg { transform: rotate(-90deg); } + .donut__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; } + .donut__center .d-num { font-size: 22px; font-weight: 700; color: #003087; display: block; } + .donut__center .d-lbl { font-size: 11px; color: #4c6272; } + .donut-legend { display: flex; flex-direction: column; gap: 8px; } + .donut-legend__item { display: flex; align-items: center; gap: 8px; font-size: 13px; } + .donut-legend__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } + .donut-legend__val { margin-left: auto; font-weight: 700; padding-left: 16px; } + + /* SME card panel */ + .sme-card { padding: 14px; border: 1px solid #d8dde0; border-left: 4px solid #007f3b; margin-bottom: 10px; } + .sme-card--aqua { border-left-color: #00a9ce; } + + /* Innovation row */ + .innovation-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f0f4f5; margin-bottom: 8px; } + + /* Live pulse dot */ + .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #00a9ce; margin-right: 4px; animation: pulse 2s infinite; } + @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} } + + /* Footnote */ + .compass-footnote { font-size: 13px; color: #768692; margin-top: 12px; padding-top: 12px; border-top: 1px solid #d8dde0; } + + /* CTA panel */ + .cta-panel { background: #003087; color: #fff; padding: 28px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } + .cta-panel h3 { color: #fff; font-size: 20px; margin: 0 0 6px; } + .cta-panel p { opacity: .85; margin: 0; font-size: 15px; } + + @media (max-width: 768px) { + .compass-grid-2 { grid-template-columns: 1fr; } + .trust-banner__stats { display: none; } + .donut-wrap { flex-direction: column; } + } diff --git a/app/assets/sass/components/_data-viz.scss b/app/assets/sass/components/_data-viz.scss new file mode 100644 index 0000000..bee1eb4 --- /dev/null +++ b/app/assets/sass/components/_data-viz.scss @@ -0,0 +1,65 @@ +/* ── Viz bars ─────────────────────────────────────────── */ + .app-bar-track { + background: #f0f4f5; + height: 20px; + margin-top: 2px; + } + .app-bar-fill { + background: #005eb8; + height: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + padding-right: 6px; + } + .app-bar-fill span { + color: #fff; + font-size: 12px; + font-weight: 600; + } + + /* ── Stat panels ──────────────────────────────────────── */ + .app-stat-row { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1px; + background: #d8dde0; + border: 1px solid #d8dde0; + margin-bottom: 24px; + } + .app-stat { + background: #fff; + padding: 16px; + text-align: center; + } + .app-stat__value { + display: block; + font-size: 32px; + font-weight: 700; + line-height: 1; + margin-bottom: 4px; + } + .app-stat__label { + font-size: 14px; + color: #4c6272; + } + + /* ── Legend row ───────────────────────────────────────── */ + .app-legend { + display: flex; + gap: 16px; + flex-wrap: wrap; + margin-top: 12px; + } + .app-legend__item { + display: flex; + align-items: center; + gap: 6px; + font-size: 14px; + } + .app-legend__swatch { + width: 12px; + height: 12px; + border-radius: 2px; + flex-shrink: 0; + } diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index 16e8ed8..f7edb9f 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -12,6 +12,9 @@ @import 'components/hero'; @import 'components/a-z'; @import 'components/category'; +@import 'components/data-viz'; +@import 'components/dashboard'; +@import 'components/cards'; .nhsuk-width-container { diff --git a/app/views/current/search-results-dashboard.html b/app/views/current/search-results-dashboard.html new file mode 100644 index 0000000..7a64466 --- /dev/null +++ b/app/views/current/search-results-dashboard.html @@ -0,0 +1,897 @@ +{% extends prototypeVersion + '/layouts/layout-signed-in.html' %} + +{% set pageName = "Search medical technologies - Compass" %} +{% set serviceHeader = "Compass" %} + +{% block beforeContent %} +{% from "breadcrumb/macro.njk" import breadcrumb %} + +{{ breadcrumb({ +items: [ +{ +href: "/", +text: "Home" +} +], +href: "#", +text: "Search results" +}) }} +{% endblock %} + +{% block content %} +
+ 47 products from 23 suppliers + + +
+12
+ + + + +34
+ + + + +4
+ + + + +How many different products are used at trusts similar to yours, and which are most widely adopted.
+ ++ Products in use — similar trusts + +
+Average across large acute trusts: 16.3 products
+Most used products — large acute trusts
+ +Based on self-reported procurement data from 89 participating trusts.
+Products recently added, updated evaluations, and newly shared peer insights.
+ +Recently added products
+Collagen dressings · + £18.40/unit · 3 trusts evaluating
+Foam dressings · + £4.20/unit · Added by supplier
+Hydrofibre · Clinical + data updated · 12 evaluations
+New evaluation from + Newcastle Hospitals
+Lessons learned shared by + Sheffield Teaching Hospitals
+2 weeks ago
+Activity this month
+New products
+4
+Added to catalogue
+Updated records
+11
+By suppliers
+New evaluations
+7
+From NHS trusts
+Peer contacts
+23
+Facilitated this month
++ Subscribe to category alerts to get notified when new evaluations are published or when a trust like + yours adds a product. +
+How many products are available in each sub-category — a starting point for + understanding the landscape.
+ +Products by sub-category
+ +Total: 47 products across 7 sub-categories on the platform.
+How long products in this category have been on the market — from proven + stalwarts to emerging innovations.
+ +Time on market — all products in category
+Products on the market for 3–5 years are the most + represented, suggesting a maturing category with continued new entrants.
+Innovation vs maturity — trust adoption
+Top innovative products (adopted last 12 months)
+Understand the typical cost range for products in this category to support + budget planning.
+ +Cost per unit — by sub-category (median)
+12 + products · median £4.90
+9 + products · median £3.10
+8 + products · median £9.20
+3 + products · median £22.50
+3 + products · median £62.00 / day of therapy
+Summary stats — all wound care products
+Lowest cost
+£1.60
+per unit (hydrocolloid)
+Highest cost
+£120
+per day (NPWT)
+Category median
+£6.80
+per unit (all types)
+NHS SC listed
+32
+of 47 products
++ Products on the NHS Supply Chain framework typically offer 8–15% savings versus direct + procurement. 32 of 47 products are available on framework. +
+Typical return on investment and value-for-money evidence shared by NHS + trusts to support business cases.
+ +Reported ROI & outcome data — peer evidence from NHS trusts
+| Product | +Compared against | +Healing time | +Cost per healed wound | +Staff time saved | +Reported ROI | +Evidence | +
|---|---|---|---|---|---|---|
| UrgoStart Plus | +Standard foam dressing | ++40% faster | +£420 vs £680 | +32 mins/wound | ++3.2:1 | +RCT | +
| Aquacel Ag+ Extra | +Iodine-based dressing | ++28% faster | +£560 vs £740 | +18 mins/wound | ++2.4:1 | +Trust eval | +
| Mepilex Border Post-Op | +Standard surgical dressing | +- | +£180 vs £290 | +12 mins/change | ++1.8:1 | +Trust eval | +
| ALLEVYN Gentle Border | +Hydrocolloid | ++15% faster | +£390 vs £470 | +8 mins/wound | ++1.5:1 | +Observational | +
| Collagen Pro Matrix | +Foam (complex wounds) | ++52% faster | +£890 vs £1,640 | +45 mins/wound | ++4.1:1 | +Pilot study | +
ROI figures are self-reported by NHS trusts and suppliers. Always review + methodology before use in a business case. Download full evidence summaries + →
+Understand the supplier landscape — from large multinationals to small and + micro-enterprises.
+ +Suppliers by company size
+SME product spotlight
+Products from small and micro + enterprises currently used in NHS trusts.
+ +BioForm Medical Ltd
+Micro enterprise · <10 + staff · Founded 2020
+ Micro + 2 products + 3 trusts evaluating +WoundSeal Technologies
+Small enterprise · 18 staff · + Founded 2018
+ Small + 3 products + NHS SC listed +Kelso Advanced Wound Care
+Small enterprise · 34 staff · + Founded 2015
+ Small + 4 products + 8 trusts using ++ Supply chain resilience: 62% of products in this category have multiple suppliers + offering equivalent or substitute products. +
+18 NHS trusts have experience with this product.
+ + +North West
+ +London
+ +Midlands
+ +South East
+ +Other regions
+ +12 of 18 trusts are happy to share lessons learned
++ Showing 1 to 25 of 143 products +
+ + {# Result 1 - ENHANCED #} ++ MedTech Innovations Ltd +
+ + ++ UK manufactured + SME +
++ Global Medical Supplies plc +
+ + ++ CareTech Solutions +
+ + ++ SME +
++ Pain Management Technologies +
+ + ++ UK manufactured +
++ MedTech Innovations Ltd +
+ + ++ UK manufactured + SME +
++ Pediatric Care Systems +
+ + ++ Disposable Medical Ltd +
+ + ++ SME +
++ Global Medical Supplies plc +
+ + ++ CareTech Solutions +
+ + ++ UK manufactured + SME +
++ MedSupply Direct +
+ + +