admin/HighCostDrugsDemo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
Andrew Charlwood
2026-02-08 22:41:46 +00:00
parent 1400fe7217
commit b98ab1a5c6
9 changed files with 660 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01_nhs_classic.html
+551
View File
@@ -0,0 +1,551 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HCD Analysis — NHS Classic</title>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<style>
:root {
--nhs-blue: #005EB8;
--nhs-dark-blue: #003087;
--nhs-light-blue: #41B6E6;
--nhs-white: #FFFFFF;
--nhs-pale-grey: #E8EDEE;
--nhs-mid-grey: #768692;
--nhs-dark-grey: #425563;
--nhs-green: #009639;
--nhs-yellow: #FFB81C;
--nhs-red: #DA291C;
--sidebar-w: 240px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Source Sans 3', Arial, sans-serif;
background: #F0F4F5;
color: var(--nhs-dark-grey);
line-height: 1.5;
min-height: 100vh;
}
/* ── Top Header ── */
.top-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
height: 56px;
background: var(--nhs-dark-blue);
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px 0 0;
}
.top-header__brand {
display: flex; align-items: center; gap: 16px;
height: 100%; padding: 0 24px;
background: var(--nhs-blue);
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
padding-right: 40px;
}
.top-header__logo {
width: 40px; height: 40px;
background: var(--nhs-white);
border-radius: 4px;
display: grid; place-items: center;
font-weight: 900; font-size: 11px; color: var(--nhs-blue);
letter-spacing: 0.5px;
line-height: 1;
}
.top-header__title {
color: var(--nhs-white);
font-size: 20px; font-weight: 700;
letter-spacing: -0.01em;
}
.top-header__breadcrumb {
color: rgba(255,255,255,0.7);
font-size: 14px; font-weight: 400;
}
.top-header__breadcrumb strong { color: var(--nhs-white); font-weight: 600; }
.top-header__right {
display: flex; align-items: center; gap: 20px; color: rgba(255,255,255,0.8); font-size: 14px;
}
.top-header__right .status-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--nhs-green);
display: inline-block; margin-right: 4px;
}
/* ── Sidebar ── */
.sidebar {
position: fixed; top: 56px; left: 0; bottom: 0;
width: var(--sidebar-w);
background: var(--nhs-white);
border-right: 1px solid var(--nhs-pale-grey);
overflow-y: auto; z-index: 100;
display: flex; flex-direction: column;
}
.sidebar__section { padding: 16px 0; }
.sidebar__section + .sidebar__section { border-top: 1px solid var(--nhs-pale-grey); }
.sidebar__label {
padding: 0 20px 8px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--nhs-mid-grey);
}
.sidebar__item {
display: flex; align-items: center; gap: 12px;
padding: 10px 20px;
font-size: 15px; font-weight: 400;
color: var(--nhs-dark-grey);
text-decoration: none;
border-left: 4px solid transparent;
transition: background 0.15s, border-color 0.15s;
cursor: pointer;
}
.sidebar__item:hover { background: #F0F4F5; }
.sidebar__item--active {
background: #E8F0FE;
border-left-color: var(--nhs-blue);
color: var(--nhs-blue);
font-weight: 600;
}
.sidebar__item svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar__footer {
margin-top: auto; padding: 16px 20px;
border-top: 1px solid var(--nhs-pale-grey);
font-size: 12px; color: var(--nhs-mid-grey);
}
/* ── Main Content ── */
.main {
margin-left: var(--sidebar-w);
margin-top: 56px;
padding: 24px;
min-height: calc(100vh - 56px);
display: flex; flex-direction: column; gap: 20px;
}
/* ── KPI Row ── */
.kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.kpi-card {
background: var(--nhs-white);
border: 1px solid var(--nhs-pale-grey);
border-top: 4px solid var(--nhs-blue);
padding: 20px;
display: flex; flex-direction: column; gap: 2px;
}
.kpi-card--green { border-top-color: var(--nhs-green); }
.kpi-card__label {
font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--nhs-mid-grey);
}
.kpi-card__value {
font-size: 32px; font-weight: 300;
color: var(--nhs-dark-blue);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.kpi-card__sub {
font-size: 13px; color: var(--nhs-mid-grey); margin-top: 4px;
}
/* ── Filter Bar ── */
.filter-bar {
background: var(--nhs-white);
border: 1px solid var(--nhs-pale-grey);
padding: 12px 20px;
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap;
}
.filter-bar__group {
display: flex; align-items: center; gap: 8px;
}
.filter-bar__divider {
width: 1px; height: 28px; background: var(--nhs-pale-grey);
}
.filter-bar__label {
font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--nhs-mid-grey);
white-space: nowrap;
}
/* Toggle pills */
.toggle-pills {
display: flex; border: 1px solid var(--nhs-pale-grey); overflow: hidden;
}
.toggle-pill {
padding: 6px 16px;
font-size: 14px; font-weight: 600;
color: var(--nhs-dark-grey);
background: var(--nhs-white);
cursor: pointer;
border: none; outline: none;
transition: background 0.15s, color 0.15s;
}
.toggle-pill + .toggle-pill { border-left: 1px solid var(--nhs-pale-grey); }
.toggle-pill--active {
background: var(--nhs-blue);
color: var(--nhs-white);
}
.toggle-pill:hover:not(.toggle-pill--active) { background: #F0F4F5; }
.toggle-pill:focus-visible { box-shadow: 0 0 0 3px var(--nhs-yellow); z-index: 1; }
/* Selects */
.filter-select {
height: 34px; padding: 0 12px;
border: 1px solid var(--nhs-pale-grey);
font-family: inherit; font-size: 14px;
color: var(--nhs-dark-grey);
background: var(--nhs-white);
cursor: pointer;
min-width: 140px;
}
.filter-select:focus { outline: 3px solid var(--nhs-yellow); outline-offset: 0; }
/* ── Chart Area ── */
.chart-card {
background: var(--nhs-white);
border: 1px solid var(--nhs-pale-grey);
flex: 1;
display: flex; flex-direction: column;
}
.chart-card__header {
padding: 16px 20px;
border-bottom: 1px solid var(--nhs-pale-grey);
display: flex; justify-content: space-between; align-items: baseline;
}
.chart-card__title {
font-size: 18px; font-weight: 700;
color: var(--nhs-dark-blue);
}
.chart-card__subtitle {
font-size: 13px; color: var(--nhs-mid-grey);
}
.chart-card__tabs {
display: flex; gap: 0;
border-bottom: 1px solid var(--nhs-pale-grey);
}
.chart-tab {
padding: 10px 24px;
font-size: 14px; font-weight: 600;
color: var(--nhs-mid-grey);
border: none; background: none; cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.chart-tab--active {
color: var(--nhs-blue);
border-bottom-color: var(--nhs-blue);
}
.chart-tab:hover:not(.chart-tab--active) { color: var(--nhs-dark-grey); }
.chart-tab:focus-visible { box-shadow: inset 0 0 0 3px var(--nhs-yellow); }
/* ── Icicle Chart Mock ── */
.icicle {
flex: 1; padding: 20px;
display: flex; flex-direction: column; gap: 3px;
min-height: 420px;
}
.icicle__row {
display: flex; gap: 3px;
flex: 1;
}
.icicle__cell {
display: flex; align-items: center; justify-content: center;
padding: 8px 12px;
color: var(--nhs-white);
font-size: 13px; font-weight: 600;
text-align: center;
position: relative;
overflow: hidden;
transition: filter 0.2s, transform 0.15s;
cursor: pointer;
line-height: 1.2;
}
.icicle__cell:hover { filter: brightness(1.15); transform: scaleY(1.03); z-index: 2; }
.icicle__cell span { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.icicle__cell small {
display: block; font-weight: 400; font-size: 11px; opacity: 0.85;
}
/* Level colors */
.lvl-0 { background: var(--nhs-dark-blue); }
.lvl-1a { background: #005EB8; }
.lvl-1b { background: #0072CE; }
.lvl-1c { background: #41B6E6; }
.lvl-1d { background: #768692; }
.lvl-2a { background: #003D7A; }
.lvl-2b { background: #004F9F; }
.lvl-2c { background: #0066B8; }
.lvl-2d { background: #007CC2; }
.lvl-2e { background: #2D9CDB; }
.lvl-2f { background: #5DADE2; }
.lvl-3a { background: #003060; }
.lvl-3b { background: #003D78; }
.lvl-3c { background: #004A90; }
.lvl-3d { background: #0057A8; }
.lvl-3e { background: #0064C0; }
.lvl-3f { background: #2080D0; }
.lvl-3g { background: #4098D8; }
.lvl-3h { background: #60B0E0; }
/* ── Footer ── */
.page-footer {
background: var(--nhs-pale-grey);
border-top: 1px solid #D0D5D6;
padding: 16px 20px;
font-size: 13px; color: var(--nhs-mid-grey);
text-align: center;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.sidebar { display: none; }
.main { margin-left: 0; }
.kpi-row { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- Top Header -->
<header class="top-header">
<div class="top-header__brand">
<div class="top-header__logo">NHS</div>
<div>
<div class="top-header__title">HCD Analysis</div>
</div>
</div>
<div class="top-header__breadcrumb">
Dashboard &rsaquo; <strong>Pathway Analysis</strong>
</div>
<div class="top-header__right">
<span><span class="status-dot"></span> 656,247 records</span>
<span>Last updated: 2h ago</span>
</div>
</header>
<!-- Sidebar -->
<nav class="sidebar" aria-label="Main navigation">
<div class="sidebar__section">
<div class="sidebar__label">Analysis</div>
<a class="sidebar__item sidebar__item--active" href="#">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
Pathway Overview
</a>
<a class="sidebar__item" href="#">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
Drug Selection
</a>
<a class="sidebar__item" href="#">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
Trust Selection
</a>
<a class="sidebar__item" href="#">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
Directory Selection
</a>
<a class="sidebar__item" href="#">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>
Indications
</a>
</div>
<div class="sidebar__section">
<div class="sidebar__label">Reports</div>
<a class="sidebar__item" href="#">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
Cost Analysis
</a>
<a class="sidebar__item" href="#">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Export Data
</a>
</div>
<div class="sidebar__footer">
NHS Norfolk &amp; Waveney ICB<br>High Cost Drugs Programme
</div>
</nav>
<!-- Main Content -->
<main class="main">
<!-- KPIs -->
<section class="kpi-row" aria-label="Key performance indicators">
<div class="kpi-card">
<div class="kpi-card__label">Unique Patients</div>
<div class="kpi-card__value">37,842</div>
<div class="kpi-card__sub">across all trusts</div>
</div>
<div class="kpi-card">
<div class="kpi-card__label">Drug Types</div>
<div class="kpi-card__value">89</div>
<div class="kpi-card__sub">high-cost drugs tracked</div>
</div>
<div class="kpi-card">
<div class="kpi-card__label">Total Cost</div>
<div class="kpi-card__value">&pound;145.2M</div>
<div class="kpi-card__sub">current period spend</div>
</div>
<div class="kpi-card kpi-card--green">
<div class="kpi-card__label">Indication Match</div>
<div class="kpi-card__value">93%</div>
<div class="kpi-card__sub">GP diagnosis confirmed</div>
</div>
</section>
<!-- Filter Bar -->
<section class="filter-bar" aria-label="Filters">
<div class="filter-bar__group">
<span class="filter-bar__label">View</span>
<div class="toggle-pills" role="radiogroup" aria-label="Chart view type">
<button class="toggle-pill toggle-pill--active" role="radio" aria-checked="true">By Directory</button>
<button class="toggle-pill" role="radio" aria-checked="false">By Indication</button>
</div>
</div>
<div class="filter-bar__divider"></div>
<div class="filter-bar__group">
<span class="filter-bar__label">Initiated</span>
<select class="filter-select" aria-label="Treatment initiated period">
<option selected>All years</option>
<option>Last 2 years</option>
<option>Last 1 year</option>
</select>
</div>
<div class="filter-bar__group">
<span class="filter-bar__label">Last seen</span>
<select class="filter-select" aria-label="Last seen period">
<option selected>Last 6 months</option>
<option>Last 12 months</option>
</select>
</div>
<div class="filter-bar__divider"></div>
<div class="filter-bar__group">
<span class="filter-bar__label">Drugs</span>
<select class="filter-select" aria-label="Drug filter">
<option>All 89 drugs</option>
</select>
</div>
<div class="filter-bar__group">
<span class="filter-bar__label">Directorates</span>
<select class="filter-select" aria-label="Directorate filter">
<option>All 14 directorates</option>
</select>
</div>
</section>
<!-- Chart Card -->
<section class="chart-card" aria-label="Patient pathway chart">
<div class="chart-card__header">
<div>
<div class="chart-card__title">Patient Pathway Visualization</div>
<div class="chart-card__subtitle">Trust &rarr; Directorate &rarr; Drug &rarr; Patient Pathway</div>
</div>
</div>
<div class="chart-card__tabs" role="tablist">
<button class="chart-tab chart-tab--active" role="tab" aria-selected="true">Icicle</button>
<button class="chart-tab" role="tab" aria-selected="false">Sankey</button>
<button class="chart-tab" role="tab" aria-selected="false">Timeline</button>
</div>
<!-- Icicle Chart -->
<div class="icicle" role="img" aria-label="Icicle chart showing patient treatment pathways">
<!-- Level 0: Root -->
<div class="icicle__row" style="flex: 0.8;">
<div class="icicle__cell lvl-0" style="flex: 1;">
<span>NHS Norfolk and Waveney ICB<small>37,842 patients &middot; &pound;145.2M</small></span>
</div>
</div>
<!-- Level 1: Directorates -->
<div class="icicle__row" style="flex: 1;">
<div class="icicle__cell lvl-1a" style="flex: 40;">
<span>Rheumatology<small>15,137 &middot; 40%</small></span>
</div>
<div class="icicle__cell lvl-1b" style="flex: 28;">
<span>Dermatology<small>10,596 &middot; 28%</small></span>
</div>
<div class="icicle__cell lvl-1c" style="flex: 18;">
<span>Gastroenterology<small>6,812 &middot; 18%</small></span>
</div>
<div class="icicle__cell lvl-1d" style="flex: 14;">
<span>Oncology<small>5,297 &middot; 14%</small></span>
</div>
</div>
<!-- Level 2: Drugs -->
<div class="icicle__row" style="flex: 1;">
<!-- Under Rheumatology -->
<div class="icicle__cell lvl-2a" style="flex: 22;"><span>ADALIMUMAB<small>8,325</small></span></div>
<div class="icicle__cell lvl-2b" style="flex: 12;"><span>ETANERCEPT<small>4,541</small></span></div>
<div class="icicle__cell lvl-2c" style="flex: 6;"><span>TOCILIZUMAB<small>2,271</small></span></div>
<!-- Under Dermatology -->
<div class="icicle__cell lvl-2d" style="flex: 16;"><span>SECUKINUMAB<small>6,057</small></span></div>
<div class="icicle__cell lvl-2e" style="flex: 12;"><span>DUPILUMAB<small>4,539</small></span></div>
<!-- Under Gastro -->
<div class="icicle__cell lvl-2c" style="flex: 10;"><span>INFLIXIMAB<small>3,787</small></span></div>
<div class="icicle__cell lvl-2a" style="flex: 8;"><span>VEDOLIZUMAB<small>3,025</small></span></div>
<!-- Under Oncology -->
<div class="icicle__cell lvl-2f" style="flex: 8;"><span>PEMBROLIZUMAB<small>3,025</small></span></div>
<div class="icicle__cell lvl-2b" style="flex: 6;"><span>NIVOLUMAB<small>2,272</small></span></div>
</div>
<!-- Level 3: Pathways -->
<div class="icicle__row" style="flex: 1.2;">
<div class="icicle__cell lvl-3a" style="flex: 14;"><span>ADA&rarr;ADA<small>5,310</small></span></div>
<div class="icicle__cell lvl-3b" style="flex: 8;"><span>ADA&rarr;ETA&rarr;SEC<small>3,015</small></span></div>
<div class="icicle__cell lvl-3c" style="flex: 7;"><span>ETA&rarr;ETA<small>2,648</small></span></div>
<div class="icicle__cell lvl-3d" style="flex: 5;"><span>ETA&rarr;ADA<small>1,893</small></span></div>
<div class="icicle__cell lvl-3e" style="flex: 6;"><span>TOC&rarr;TOC<small>2,271</small></span></div>
<div class="icicle__cell lvl-3f" style="flex: 10;"><span>SEC&rarr;SEC<small>3,785</small></span></div>
<div class="icicle__cell lvl-3a" style="flex: 6;"><span>SEC&rarr;DUP<small>2,272</small></span></div>
<div class="icicle__cell lvl-3g" style="flex: 6;"><span>DUP&rarr;DUP<small>2,267</small></span></div>
<div class="icicle__cell lvl-3h" style="flex: 6;"><span>DUP&rarr;SEC<small>2,272</small></span></div>
<div class="icicle__cell lvl-3c" style="flex: 6;"><span>INF&rarr;INF<small>2,272</small></span></div>
<div class="icicle__cell lvl-3b" style="flex: 4;"><span>INF&rarr;VED<small>1,515</small></span></div>
<div class="icicle__cell lvl-3d" style="flex: 5;"><span>VED&rarr;VED<small>1,893</small></span></div>
<div class="icicle__cell lvl-3e" style="flex: 3;"><span>VED&rarr;INF<small>1,132</small></span></div>
<div class="icicle__cell lvl-3f" style="flex: 5;"><span>PEM&rarr;PEM<small>1,893</small></span></div>
<div class="icicle__cell lvl-3g" style="flex: 3;"><span>PEM&rarr;NIV<small>1,132</small></span></div>
<div class="icicle__cell lvl-3h" style="flex: 4;"><span>NIV&rarr;NIV<small>1,514</small></span></div>
<div class="icicle__cell lvl-3a" style="flex: 2;"><span>NIV&rarr;PEM<small>758</small></span></div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="page-footer">
NHS Norfolk and Waveney ICB &mdash; High Cost Drugs Analysis &middot; Data as of Feb 2026
</footer>
<script>
// Toggle pills interaction
document.querySelectorAll('.toggle-pills').forEach(group => {
group.querySelectorAll('.toggle-pill').forEach(pill => {
pill.addEventListener('click', () => {
group.querySelectorAll('.toggle-pill').forEach(p => {
p.classList.remove('toggle-pill--active');
p.setAttribute('aria-checked', 'false');
});
pill.classList.add('toggle-pill--active');
pill.setAttribute('aria-checked', 'true');
});
});
});
// Chart tabs interaction
document.querySelectorAll('.chart-tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.chart-tab').forEach(t => {
t.classList.remove('chart-tab--active');
t.setAttribute('aria-selected', 'false');
});
tab.classList.add('chart-tab--active');
tab.setAttribute('aria-selected', 'true');
});
});
</script>
</body>
</html>