Composants UI Moyen
Clinic — Lab Order Sheet
A clinician lab-order sheet pairing a searchable, category-grouped test catalog with a live order panel. Typing filters Hematology, Chemistry, Endocrine and Micro tests in real time; checking a test adds a removable chip to the selected list and updates the running count. A Routine/STAT priority toggle, an auto-deriving fasting flag, specimen notes and an ICD-10 reason feed an order summary, and Sign and send validates the selection before showing a signed confirmation state.
Ouvrir dans Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--teal: #129c93;
--teal-d: #0c7a73;
--teal-700: #0a655f;
--teal-50: #e7f5f3;
--coral: #ff7a66;
--coral-soft: #ffe6df;
--ink: #16322f;
--ink-2: #3a534f;
--muted: #6b827e;
--bg: #f1f7f6;
--white: #ffffff;
--line: rgba(16, 50, 47, 0.1);
--line-2: rgba(16, 50, 47, 0.18);
--ok: #2f9e6f;
--warn: #d98a2b;
--danger: #d4503e;
--font: "Inter", system-ui, -apple-system, sans-serif;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--shadow-1: 0 1px 2px rgba(16, 50, 47, 0.05), 0 4px 14px rgba(16, 50, 47, 0.06);
--shadow-2: 0 16px 40px rgba(12, 122, 115, 0.16);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
}
button,
input,
textarea {
font: inherit;
}
:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
border-radius: 4px;
}
/* ── Layout ── */
.order {
max-width: 980px;
margin: 0 auto;
padding: 32px 20px 64px;
display: flex;
flex-direction: column;
gap: 22px;
}
.order-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.eyebrow {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--teal-d);
}
.order-head h1 {
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -0.025em;
margin-top: 4px;
}
.patient {
display: flex;
align-items: center;
gap: 12px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 10px 16px 10px 10px;
box-shadow: var(--shadow-1);
}
.avatar {
width: 42px;
height: 42px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(150deg, var(--teal), var(--teal-700));
color: #fff;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.patient-name {
font-weight: 700;
font-size: 0.96rem;
letter-spacing: -0.01em;
}
.patient-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--muted);
flex-wrap: wrap;
}
.patient-meta .dot {
opacity: 0.6;
}
/* ── Grid ── */
.grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 22px;
align-items: start;
}
/* ── Catalog ── */
.catalog {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-1);
overflow: hidden;
}
.search {
position: relative;
display: flex;
align-items: center;
padding: 16px 18px;
border-bottom: 1px solid var(--line);
}
.search-ic {
position: absolute;
left: 32px;
width: 18px;
height: 18px;
fill: none;
stroke: var(--muted);
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.search input {
flex: 1;
border: 1px solid var(--line-2);
border-radius: 999px;
padding: 11px 40px 11px 42px;
background: var(--bg);
color: var(--ink);
font-size: 0.92rem;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.search input::placeholder {
color: var(--muted);
}
.search input:focus {
outline: none;
border-color: var(--teal);
background: var(--white);
box-shadow: 0 0 0 4px rgba(18, 156, 147, 0.12);
}
.clear {
position: absolute;
right: 30px;
width: 24px;
height: 24px;
border: none;
border-radius: 50%;
background: var(--line);
color: var(--ink-2);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: background 0.15s;
}
.clear:hover {
background: var(--line-2);
}
.catalog-body {
padding: 8px 8px 14px;
max-height: 540px;
overflow-y: auto;
}
.cat-group {
padding: 8px 10px 4px;
}
.cat-group[hidden] {
display: none;
}
.cat-title {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--muted);
padding: 8px 8px 6px;
}
.test-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
}
.test[hidden] {
display: none;
}
.test label {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 12px;
border-radius: var(--r-sm);
cursor: pointer;
transition: background 0.13s;
}
.test label:hover {
background: var(--teal-50);
}
.test input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.check {
width: 20px;
height: 20px;
border-radius: 6px;
border: 2px solid var(--line-2);
flex-shrink: 0;
display: grid;
place-items: center;
transition: background 0.15s, border-color 0.15s;
}
.check::after {
content: "";
width: 11px;
height: 6px;
border-left: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(-45deg) scale(0);
margin-top: -2px;
transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.test input:checked + .check {
background: var(--teal);
border-color: var(--teal);
}
.test input:checked + .check::after {
transform: rotate(-45deg) scale(1);
}
.test input:focus-visible + .check {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
.test-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.test-name {
font-size: 0.91rem;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
}
.test-sub {
font-size: 0.78rem;
color: var(--muted);
display: flex;
align-items: center;
gap: 7px;
}
.fast-tag {
font-style: normal;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--warn);
background: rgba(217, 138, 43, 0.14);
padding: 1px 7px;
border-radius: 999px;
}
.no-results {
padding: 26px 18px;
text-align: center;
color: var(--muted);
font-size: 0.9rem;
}
.no-results strong {
color: var(--ink-2);
}
/* ── Order panel ── */
.panel {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-1);
position: sticky;
top: 24px;
}
.panel form {
display: flex;
flex-direction: column;
}
.panel-block {
padding: 18px;
border-bottom: 1px solid var(--line);
}
.block-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.block-head h2 {
font-size: 0.84rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-2);
}
.pill {
display: inline-grid;
place-items: center;
min-width: 24px;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: var(--teal-50);
color: var(--teal-d);
font-size: 0.78rem;
font-weight: 700;
}
.pill.has {
background: var(--teal-d);
color: #fff;
}
/* selected list */
.selected-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.selected-list:empty {
display: none;
}
.selected-item {
display: flex;
align-items: center;
gap: 10px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 9px 10px 9px 12px;
animation: pop 0.18s ease;
}
@keyframes pop {
from {
opacity: 0;
transform: translateY(-4px);
}
}
.selected-item .si-text {
flex: 1;
min-width: 0;
}
.selected-item .si-name {
font-size: 0.86rem;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.selected-item .si-code {
font-size: 0.72rem;
color: var(--muted);
font-weight: 600;
}
.si-remove {
width: 24px;
height: 24px;
border: none;
border-radius: 50%;
background: transparent;
color: var(--muted);
font-size: 1.15rem;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
display: grid;
place-items: center;
transition: background 0.13s, color 0.13s;
}
.si-remove:hover {
background: rgba(212, 80, 62, 0.12);
color: var(--danger);
}
.empty {
font-size: 0.84rem;
color: var(--muted);
line-height: 1.45;
}
/* segmented priority */
.seg {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px;
}
.seg-btn {
border: none;
background: transparent;
border-radius: 999px;
padding: 9px 12px;
font-weight: 600;
font-size: 0.86rem;
color: var(--muted);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.seg-btn:hover {
color: var(--ink-2);
}
.seg-btn.is-active {
background: var(--teal-d);
color: #fff;
}
.seg-btn[data-priority="stat"].is-active {
background: var(--danger);
}
.stat-note {
margin-top: 10px;
font-size: 0.8rem;
font-weight: 600;
color: var(--danger);
display: flex;
align-items: center;
gap: 6px;
}
.stat-note::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--danger);
animation: blink 1.1s infinite;
}
@keyframes blink {
50% {
opacity: 0.3;
}
}
/* switch */
.switch {
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
}
.switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.track {
width: 44px;
height: 26px;
border-radius: 999px;
background: var(--line-2);
flex-shrink: 0;
padding: 3px;
transition: background 0.18s;
}
.knob {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.switch input:checked + .track {
background: var(--teal);
}
.switch input:checked + .track .knob {
transform: translateX(18px);
}
.switch input:focus-visible + .track {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
.switch-text {
display: flex;
flex-direction: column;
}
.switch-label {
font-size: 0.9rem;
font-weight: 600;
}
.switch-sub {
font-size: 0.78rem;
color: var(--muted);
}
/* text fields */
.field-label {
display: block;
font-size: 0.84rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-2);
margin-bottom: 8px;
}
.text-input {
width: 100%;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
padding: 10px 12px;
background: var(--bg);
color: var(--ink);
font-size: 0.9rem;
resize: vertical;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.text-input::placeholder {
color: var(--muted);
}
.text-input:focus {
outline: none;
border-color: var(--teal);
background: var(--white);
box-shadow: 0 0 0 4px rgba(18, 156, 147, 0.12);
}
/* summary */
.summary {
padding: 16px 18px;
background: linear-gradient(160deg, var(--teal-50), #eef7f5);
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 8px;
}
.summary-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.86rem;
color: var(--ink-2);
}
.summary-row strong {
font-weight: 700;
color: var(--ink);
}
.summary-row strong.stat {
color: var(--danger);
}
/* error */
.form-error {
margin: 14px 18px 0;
padding: 10px 12px;
background: rgba(212, 80, 62, 0.08);
border: 1px solid rgba(212, 80, 62, 0.28);
border-radius: var(--r-sm);
color: var(--danger);
font-size: 0.82rem;
font-weight: 600;
}
/* sign button */
.sign-btn {
margin: 16px 18px 18px;
border: none;
border-radius: var(--r-md);
padding: 14px 18px;
background: var(--teal-d);
color: #fff;
font-weight: 700;
font-size: 0.96rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 6px 18px rgba(12, 122, 115, 0.28);
transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.sign-btn:hover {
background: var(--teal-700);
box-shadow: 0 8px 22px rgba(12, 122, 115, 0.34);
}
.sign-btn:active {
transform: translateY(1px);
}
.sign-ic {
width: 18px;
height: 18px;
fill: none;
stroke: #fff;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* signed state */
.signed {
margin: 16px 18px 18px;
display: flex;
align-items: center;
gap: 12px;
background: rgba(47, 158, 111, 0.1);
border: 1px solid rgba(47, 158, 111, 0.32);
border-radius: var(--r-md);
padding: 14px 14px 14px 16px;
animation: pop 0.22s ease;
}
.signed-ic {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--ok);
display: grid;
place-items: center;
flex-shrink: 0;
}
.signed-ic svg {
width: 18px;
height: 18px;
fill: none;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.signed-text {
flex: 1;
min-width: 0;
}
.signed-title {
font-weight: 700;
font-size: 0.92rem;
color: var(--teal-700);
}
.signed-sub {
font-size: 0.78rem;
color: var(--ink-2);
}
.btn-amend {
border: 1px solid var(--line-2);
background: var(--white);
color: var(--ink-2);
border-radius: var(--r-sm);
padding: 7px 13px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s;
}
.btn-amend:hover {
background: var(--teal-50);
border-color: var(--teal);
color: var(--teal-d);
}
.is-locked .test label,
.is-locked .seg-btn,
.is-locked .switch,
.is-locked .text-input,
.is-locked .si-remove {
pointer-events: none;
opacity: 0.6;
}
/* ── Toast ── */
.toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translateX(-50%);
background: var(--ink);
color: #fff;
padding: 13px 20px;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 500;
box-shadow: var(--shadow-2);
z-index: 50;
max-width: 90vw;
}
/* ── Responsive ── */
@media (max-width: 820px) {
.grid {
grid-template-columns: 1fr;
}
.panel {
position: static;
}
.catalog-body {
max-height: none;
}
}
@media (max-width: 520px) {
.order {
padding: 24px 14px 56px;
}
.order-head h1 {
font-size: 1.45rem;
}
.patient {
width: 100%;
}
.search {
padding: 14px;
}
.search-ic {
left: 28px;
}
.clear {
right: 26px;
}
.signed {
flex-wrap: wrap;
}
.btn-amend {
margin-left: auto;
}
}// ── Toast ──────────────────────────────────────────────────────────────────
const toast = document.getElementById("toast");
function showToast(msg) {
toast.textContent = msg;
toast.hidden = false;
clearTimeout(showToast._t);
showToast._t = setTimeout(() => (toast.hidden = true), 2800);
}
// ── Elements ─────────────────────────────────────────────────────────────────
const form = document.getElementById("order-form");
const catalog = document.getElementById("catalog-body");
const selectedList = document.getElementById("selected-list");
const selectedEmpty = document.getElementById("selected-empty");
const selectedPill = document.getElementById("selected-pill");
const sumCount = document.getElementById("sum-count");
const sumPriority = document.getElementById("sum-priority");
const sumFasting = document.getElementById("sum-fasting");
const fastingInput = document.getElementById("fasting");
const fastingSub = document.getElementById("fasting-sub");
const statNote = document.getElementById("stat-note");
const formError = document.getElementById("form-error");
const signBtn = document.getElementById("sign-btn");
const signed = document.getElementById("signed");
const signedSub = document.getElementById("signed-sub");
const filter = document.getElementById("filter");
const clearFilter = document.getElementById("clear-filter");
const noResults = document.getElementById("no-results");
const noResultsTerm = document.getElementById("no-results-term");
let priority = "routine";
let fastingManual = false; // true once the clinician overrides the auto flag
// ── Selected tests sync ──────────────────────────────────────────────────────
function checkedTests() {
return [...catalog.querySelectorAll("[data-test]:checked")].map((box) => {
const li = box.closest(".test");
return {
box,
name: li.dataset.name,
code: li.dataset.code,
fasting: li.dataset.fasting === "1",
};
});
}
function renderSelected() {
const tests = checkedTests();
selectedList.innerHTML = "";
tests.forEach((t) => {
const item = document.createElement("li");
item.className = "selected-item";
item.innerHTML =
'<span class="si-text">' +
'<span class="si-name">' +
t.name +
"</span> " +
'<span class="si-code">' +
t.code +
"</span>" +
"</span>" +
'<button type="button" class="si-remove" aria-label="Remove ' +
t.name +
'">×</button>';
item.querySelector(".si-remove").addEventListener("click", () => {
t.box.checked = false;
renderSelected();
});
selectedList.appendChild(item);
});
const n = tests.length;
selectedEmpty.hidden = n > 0;
selectedPill.textContent = n;
selectedPill.classList.toggle("has", n > 0);
sumCount.textContent = n;
// Auto-derive fasting flag from selection unless clinician overrode it.
const anyFasting = tests.some((t) => t.fasting);
if (!fastingManual) {
fastingInput.checked = anyFasting;
}
updateFasting();
}
// ── Fasting flag ─────────────────────────────────────────────────────────────
function updateFasting() {
const on = fastingInput.checked;
sumFasting.textContent = on ? "Required" : "Not required";
const anyFasting = checkedTests().some((t) => t.fasting);
if (on && anyFasting) {
fastingSub.textContent = "Selection includes fasting tests — patient must fast 8–12 h.";
} else if (on) {
fastingSub.textContent = "Fasting requested for this order.";
} else {
fastingSub.textContent = "No fasting needed for current selection.";
}
}
fastingInput.addEventListener("change", () => {
fastingManual = true;
updateFasting();
});
// ── Priority toggle ──────────────────────────────────────────────────────────
const segButtons = form.querySelectorAll(".seg-btn");
segButtons.forEach((btn) => {
btn.addEventListener("click", () => {
priority = btn.dataset.priority;
segButtons.forEach((b) => {
const active = b === btn;
b.classList.toggle("is-active", active);
b.setAttribute("aria-checked", String(active));
});
const isStat = priority === "stat";
statNote.hidden = !isStat;
sumPriority.textContent = isStat ? "STAT" : "Routine";
sumPriority.classList.toggle("stat", isStat);
});
});
// ── Live filter ──────────────────────────────────────────────────────────────
filter.addEventListener("input", () => {
const term = filter.value.trim().toLowerCase();
clearFilter.hidden = term.length === 0;
let total = 0;
catalog.querySelectorAll(".cat-group").forEach((group) => {
let visible = 0;
group.querySelectorAll(".test").forEach((test) => {
const hay = (test.dataset.name + " " + test.dataset.code).toLowerCase();
const match = hay.includes(term);
test.hidden = !match;
if (match) visible++;
});
group.hidden = visible === 0;
total += visible;
});
noResults.hidden = total > 0;
noResultsTerm.textContent = filter.value.trim();
});
clearFilter.addEventListener("click", () => {
filter.value = "";
filter.dispatchEvent(new Event("input"));
filter.focus();
});
// ── Checkbox changes ─────────────────────────────────────────────────────────
catalog.addEventListener("change", (e) => {
if (e.target.matches("[data-test]")) {
formError.hidden = true;
renderSelected();
}
});
// ── Sign & send ──────────────────────────────────────────────────────────────
form.addEventListener("submit", (e) => {
e.preventDefault();
const tests = checkedTests();
if (tests.length === 0) {
formError.hidden = false;
showToast("Add at least one test before signing.");
return;
}
formError.hidden = true;
signBtn.hidden = true;
signed.hidden = false;
form.classList.add("is-locked");
const label = priority === "stat" ? "STAT" : "Routine";
signedSub.textContent =
"Dr. Lena Okafor · " + tests.length + " test" + (tests.length === 1 ? "" : "s") + " · " + label;
showToast(label + " order signed — sent to Northpoint Lab.");
});
// ── Amend (unlock) ───────────────────────────────────────────────────────────
document.getElementById("amend").addEventListener("click", () => {
signed.hidden = true;
signBtn.hidden = false;
form.classList.remove("is-locked");
showToast("Order reopened for editing.");
});
// ── Init ─────────────────────────────────────────────────────────────────────
renderSelected();<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
/>
<link rel="stylesheet" href="style.css" />
<title>Lab Order Sheet · Northpoint Clinic</title>
</head>
<body>
<main class="order" aria-labelledby="order-title">
<header class="order-head">
<div class="head-text">
<p class="eyebrow">Northpoint Clinic · Laboratory</p>
<h1 id="order-title">Lab order sheet</h1>
</div>
<div class="patient" aria-label="Patient">
<div class="avatar" aria-hidden="true">AM</div>
<div class="patient-info">
<p class="patient-name">Amara Mensah</p>
<p class="patient-meta">
<span>MRN 48-201-77</span>
<span class="dot" aria-hidden="true">·</span>
<span>34 y</span>
<span class="dot" aria-hidden="true">·</span>
<span>Dr. Lena Okafor</span>
</p>
</div>
</div>
</header>
<div class="grid">
<!-- ── Test catalog ─────────────────────────────────────── -->
<section class="catalog" aria-label="Test catalog">
<div class="search">
<svg class="search-ic" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="11" cy="11" r="7"></circle>
<line x1="16.5" y1="16.5" x2="21" y2="21"></line>
</svg>
<input
type="search"
id="filter"
placeholder="Search tests — e.g. CBC, TSH, glucose…"
aria-label="Search tests"
autocomplete="off"
/>
<button class="clear" id="clear-filter" type="button" aria-label="Clear search" hidden>
×
</button>
</div>
<div class="catalog-body" id="catalog-body" role="group" aria-label="Available tests">
<!-- Hematology -->
<div class="cat-group" data-category="Hematology">
<h2 class="cat-title">Hematology</h2>
<ul class="test-list">
<li class="test" data-name="Complete Blood Count (CBC)" data-code="CBC">
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Complete Blood Count (CBC)</span>
<span class="test-sub">EDTA · whole blood</span>
</span>
</label>
</li>
<li class="test" data-name="Peripheral Smear" data-code="SMEAR">
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Peripheral Smear</span>
<span class="test-sub">Manual differential</span>
</span>
</label>
</li>
<li class="test" data-name="Reticulocyte Count" data-code="RETIC">
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Reticulocyte Count</span>
<span class="test-sub">EDTA · whole blood</span>
</span>
</label>
</li>
<li class="test" data-name="Erythrocyte Sedimentation Rate (ESR)" data-code="ESR">
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Erythrocyte Sedimentation Rate (ESR)</span>
<span class="test-sub">Citrate · whole blood</span>
</span>
</label>
</li>
</ul>
</div>
<!-- Chemistry -->
<div class="cat-group" data-category="Chemistry">
<h2 class="cat-title">Chemistry</h2>
<ul class="test-list">
<li
class="test"
data-name="Basic Metabolic Panel (BMP)"
data-code="BMP"
data-fasting="1"
>
<label>
<input type="checkbox" data-test data-fasting="1" />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Basic Metabolic Panel (BMP)</span>
<span class="test-sub">Serum <em class="fast-tag">Fasting</em></span>
</span>
</label>
</li>
<li
class="test"
data-name="Lipid Panel"
data-code="LIPID"
data-fasting="1"
>
<label>
<input type="checkbox" data-test data-fasting="1" />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Lipid Panel</span>
<span class="test-sub">Serum <em class="fast-tag">Fasting</em></span>
</span>
</label>
</li>
<li
class="test"
data-name="Liver Function Tests (LFT)"
data-code="LFT"
>
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Liver Function Tests (LFT)</span>
<span class="test-sub">Serum</span>
</span>
</label>
</li>
<li
class="test"
data-name="Hemoglobin A1c"
data-code="HBA1C"
>
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Hemoglobin A1c</span>
<span class="test-sub">EDTA · whole blood</span>
</span>
</label>
</li>
<li
class="test"
data-name="C-Reactive Protein (CRP)"
data-code="CRP"
>
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">C-Reactive Protein (CRP)</span>
<span class="test-sub">Serum</span>
</span>
</label>
</li>
</ul>
</div>
<!-- Endocrine -->
<div class="cat-group" data-category="Endocrine">
<h2 class="cat-title">Endocrine</h2>
<ul class="test-list">
<li class="test" data-name="Thyroid Stimulating Hormone (TSH)" data-code="TSH">
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Thyroid Stimulating Hormone (TSH)</span>
<span class="test-sub">Serum</span>
</span>
</label>
</li>
<li class="test" data-name="Free Thyroxine (Free T4)" data-code="FT4">
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Free Thyroxine (Free T4)</span>
<span class="test-sub">Serum</span>
</span>
</label>
</li>
<li
class="test"
data-name="Fasting Insulin"
data-code="INS"
data-fasting="1"
>
<label>
<input type="checkbox" data-test data-fasting="1" />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Fasting Insulin</span>
<span class="test-sub">Serum <em class="fast-tag">Fasting</em></span>
</span>
</label>
</li>
<li class="test" data-name="Cortisol (AM)" data-code="CORT">
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Cortisol (AM)</span>
<span class="test-sub">Serum · draw 7–9 AM</span>
</span>
</label>
</li>
</ul>
</div>
<!-- Micro -->
<div class="cat-group" data-category="Micro">
<h2 class="cat-title">Microbiology</h2>
<ul class="test-list">
<li class="test" data-name="Urine Culture" data-code="UCULT">
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Urine Culture</span>
<span class="test-sub">Mid-stream · sterile cup</span>
</span>
</label>
</li>
<li class="test" data-name="Blood Culture (×2)" data-code="BCULT">
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Blood Culture (×2)</span>
<span class="test-sub">Aerobic + anaerobic bottles</span>
</span>
</label>
</li>
<li class="test" data-name="Throat Swab Culture" data-code="THRT">
<label>
<input type="checkbox" data-test />
<span class="check" aria-hidden="true"></span>
<span class="test-text">
<span class="test-name">Throat Swab Culture</span>
<span class="test-sub">Transport swab</span>
</span>
</label>
</li>
</ul>
</div>
<p class="no-results" id="no-results" hidden>
No tests match <strong id="no-results-term"></strong>.
</p>
</div>
</section>
<!-- ── Order panel ──────────────────────────────────────── -->
<aside class="panel" aria-label="Order details">
<form id="order-form" novalidate>
<div class="panel-block">
<div class="block-head">
<h2>Selected tests</h2>
<span class="pill" id="selected-pill">0</span>
</div>
<ul class="selected-list" id="selected-list" aria-live="polite"></ul>
<p class="empty" id="selected-empty">
No tests selected yet. Choose from the catalog to build the order.
</p>
</div>
<div class="panel-block">
<div class="block-head">
<h2>Priority</h2>
</div>
<div class="seg" role="radiogroup" aria-label="Order priority">
<button
type="button"
class="seg-btn is-active"
role="radio"
aria-checked="true"
data-priority="routine"
>
Routine
</button>
<button
type="button"
class="seg-btn"
role="radio"
aria-checked="false"
data-priority="stat"
>
STAT
</button>
</div>
<p class="stat-note" id="stat-note" hidden>
STAT — lab notified for immediate processing.
</p>
</div>
<div class="panel-block">
<label class="switch">
<input type="checkbox" id="fasting" />
<span class="track" aria-hidden="true"><span class="knob"></span></span>
<span class="switch-text">
<span class="switch-label">Fasting required</span>
<span class="switch-sub" id="fasting-sub">No fasting needed for current selection.</span>
</span>
</label>
</div>
<div class="panel-block">
<label class="field-label" for="icd">ICD-10 reason for order</label>
<input
type="text"
id="icd"
class="text-input"
placeholder="e.g. E11.9 — Type 2 diabetes"
autocomplete="off"
/>
</div>
<div class="panel-block">
<label class="field-label" for="notes">Specimen notes</label>
<textarea
id="notes"
class="text-input"
rows="3"
placeholder="Collection instructions, difficult draw, handling notes…"
></textarea>
</div>
<div class="summary" id="summary">
<div class="summary-row">
<span>Tests ordered</span>
<strong id="sum-count">0</strong>
</div>
<div class="summary-row">
<span>Priority</span>
<strong id="sum-priority">Routine</strong>
</div>
<div class="summary-row">
<span>Fasting</span>
<strong id="sum-fasting">Not required</strong>
</div>
</div>
<p class="form-error" id="form-error" hidden role="alert">
Add at least one test before signing the order.
</p>
<button type="submit" class="sign-btn" id="sign-btn">
<svg viewBox="0 0 24 24" aria-hidden="true" class="sign-ic">
<path d="M5 12l4 4L19 6"></path>
</svg>
Sign & send order
</button>
<div class="signed" id="signed" hidden role="status">
<div class="signed-ic" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"></path></svg>
</div>
<div class="signed-text">
<p class="signed-title">Order signed & sent</p>
<p class="signed-sub" id="signed-sub">
Dr. Lena Okafor · sent to Northpoint Lab
</p>
</div>
<button type="button" class="btn-amend" id="amend">Amend</button>
</div>
</form>
</aside>
</div>
</main>
<div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Lab Order Sheet
A focused two-pane sheet for placing a laboratory order against a patient chart. On the left, a searchable catalog groups common tests into Hematology, Chemistry, Endocrine and Microbiology, each row carrying its specimen requirement and a Fasting tag where relevant. Typing in the search box filters the catalog live, hiding empty categories and surfacing a clear no-results message when nothing matches.
On the right, a sticky order panel keeps the clinician oriented. Checking a test drops a removable chip into the Selected tests list and bumps a running count; a segmented Routine / STAT toggle switches priority — STAT turning the control coral and posting a live processing note. A fasting switch auto-derives from the chosen tests but yields to a manual override, and free-text fields capture specimen notes and an ICD-10 reason. An order summary tallies count, priority and fasting at a glance.
Sign & send order validates that at least one test is selected, then locks the sheet into a signed confirmation showing the ordering clinician and destination lab, with an Amend action to reopen it. Everything runs on vanilla JS with accessible controls, keyboard-friendly checkboxes and a small toast helper for feedback.
Illustrative UI only — not intended for real medical use.