Сторінки Складна
Clinic — Clinician Dashboard
A clinician's today-panel: a top app bar and live clock, four KPI stat cards, a schedule timeline whose rows advance patients Waiting → In room → Completed while keeping counts in sync, filter chips, plus a tasks-and-alerts queue and a messages preview.
Відкрити в Lab
MCP
html css vanilla-js
Цілі: JS HTML
Код
: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;
--pending: #6b7280;
--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;
}
/* ── App bar ── */
.appbar {
background: var(--white);
border-bottom: 1px solid var(--line);
padding: 12px 28px;
display: flex;
align-items: center;
gap: 28px;
position: sticky;
top: 0;
z-index: 20;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--ink);
}
.brand-mark {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
background: linear-gradient(150deg, var(--teal), var(--teal-d));
color: #fff;
font-size: 1.1rem;
font-weight: 700;
}
.brand-name {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.brand-name em {
font-style: normal;
color: var(--teal-d);
}
.appbar-nav {
display: flex;
align-items: center;
gap: 4px;
margin-right: auto;
}
.nav-link {
text-decoration: none;
color: var(--ink-2);
font-size: 0.88rem;
font-weight: 600;
padding: 8px 12px;
border-radius: 9px;
transition: background 0.15s, color 0.15s;
}
.nav-link:hover {
background: var(--teal-50);
color: var(--teal-d);
}
.nav-link.is-active {
background: var(--teal-50);
color: var(--teal-d);
}
.appbar-actions {
display: flex;
align-items: center;
gap: 10px;
}
.icon-btn {
position: relative;
width: 40px;
height: 40px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--white);
color: var(--ink-2);
font-size: 1.05rem;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.icon-btn:hover {
background: var(--teal-50);
border-color: var(--teal);
}
.icon-btn .dot {
position: absolute;
top: 8px;
right: 9px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--coral);
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--teal-d);
color: #fff;
font-weight: 700;
font-size: 0.82rem;
cursor: pointer;
}
/* ── Layout ── */
.board {
max-width: 1140px;
margin: 0 auto;
padding: 26px 28px 56px;
display: flex;
flex-direction: column;
gap: 22px;
}
.greeting {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.eyebrow {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--teal-d);
}
.greeting h1 {
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 2px 0;
}
.sub {
color: var(--muted);
font-size: 0.95rem;
}
.clock-pill {
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 999px;
padding: 9px 16px;
font-size: 0.95rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink);
box-shadow: var(--shadow-1);
}
.hp-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 3px rgba(47, 158, 111, 0.18);
}
/* ── Stat cards ── */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.stat {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 18px 18px;
box-shadow: var(--shadow-1);
}
.stat-accent {
background: linear-gradient(135deg, var(--teal-d), var(--teal-700));
border-color: transparent;
color: #fff;
}
.stat-num {
font-size: 1.9rem;
font-weight: 800;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.stat-label {
margin-top: 2px;
font-size: 0.82rem;
font-weight: 500;
color: var(--muted);
}
.stat-accent .stat-label {
color: rgba(255, 255, 255, 0.82);
}
/* ── Columns ── */
.columns {
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: 18px;
align-items: start;
}
.side {
display: flex;
flex-direction: column;
gap: 18px;
}
.panel {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 18px 20px;
}
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.section-h {
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.see-all {
font-size: 0.82rem;
color: var(--teal-d);
text-decoration: none;
font-weight: 600;
}
.see-all:hover {
text-decoration: underline;
}
.count-tag {
font-size: 0.78rem;
font-weight: 600;
color: var(--muted);
background: var(--bg);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px 11px;
}
.badge-count {
min-width: 24px;
height: 24px;
display: inline-grid;
place-items: center;
padding: 0 7px;
border-radius: 999px;
background: var(--coral);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
}
.badge-count.is-zero {
background: rgba(47, 158, 111, 0.16);
color: var(--ok);
}
/* ── Filter chips ── */
.chips {
display: flex;
gap: 8px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.chip {
border: 1px solid var(--line);
background: var(--white);
color: var(--ink-2);
border-radius: 999px;
padding: 6px 14px;
font: inherit;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover {
background: var(--teal-50);
border-color: var(--teal);
}
.chip.is-active {
background: var(--teal-d);
border-color: var(--teal-d);
color: #fff;
}
/* ── Schedule timeline ── */
.timeline {
list-style: none;
position: relative;
display: flex;
flex-direction: column;
}
.appt {
position: relative;
display: flex;
gap: 14px;
padding: 14px 0 14px 4px;
border-bottom: 1px solid var(--line);
}
.appt:last-child {
border-bottom: none;
}
.appt-time {
width: 62px;
flex-shrink: 0;
font-size: 0.82rem;
font-weight: 700;
color: var(--teal-d);
font-variant-numeric: tabular-nums;
padding-top: 1px;
}
.appt-rail {
position: relative;
width: 14px;
flex-shrink: 0;
}
.appt-dot {
position: absolute;
top: 4px;
left: 3px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--white);
border: 3px solid var(--pending);
z-index: 1;
}
.appt-rail::before {
content: "";
position: absolute;
top: 4px;
bottom: -18px;
left: 8px;
width: 2px;
background: var(--line);
}
.appt:last-child .appt-rail::before {
display: none;
}
.appt[data-status="waiting"] .appt-dot {
border-color: var(--warn);
}
.appt[data-status="inroom"] .appt-dot {
border-color: var(--teal);
background: var(--teal);
}
.appt[data-status="done"] .appt-dot {
border-color: var(--ok);
background: var(--ok);
}
.appt[data-status="noshow"] .appt-dot {
border-color: var(--danger);
}
.appt-body {
flex: 1;
min-width: 0;
}
.appt-name {
font-weight: 600;
font-size: 0.94rem;
}
.appt-name span {
color: var(--muted);
font-weight: 500;
font-size: 0.82rem;
}
.appt-reason {
font-size: 0.82rem;
color: var(--muted);
margin-top: 2px;
}
.appt-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.pill {
font-size: 0.72rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.pill.waiting {
background: rgba(217, 138, 43, 0.16);
color: var(--warn);
}
.pill.inroom {
background: rgba(18, 156, 147, 0.14);
color: var(--teal-d);
}
.pill.done {
background: rgba(47, 158, 111, 0.14);
color: var(--ok);
}
.pill.noshow {
background: rgba(212, 80, 62, 0.14);
color: var(--danger);
}
.appt-btn {
border: 1px solid var(--teal);
background: var(--white);
color: var(--teal-d);
border-radius: 9px;
padding: 6px 12px;
font: inherit;
font-weight: 600;
font-size: 0.78rem;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
.appt-btn:hover {
background: var(--teal-50);
}
.appt-btn.is-final {
border-color: var(--line);
background: var(--bg);
color: var(--muted);
cursor: default;
}
.empty {
text-align: center;
color: var(--muted);
font-size: 0.88rem;
padding: 28px 0;
}
/* ── Tasks & alerts ── */
.tasks {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.task {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.task:last-child {
border-bottom: none;
}
.task-ic {
width: 30px;
height: 30px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 9px;
background: var(--teal-50);
color: var(--teal-d);
font-size: 0.95rem;
}
.task-ic.flag {
background: rgba(212, 80, 62, 0.12);
color: var(--danger);
}
.task-ic.refill {
background: var(--coral-soft);
color: var(--coral);
}
.task-body {
flex: 1;
min-width: 0;
}
.task-title {
font-weight: 600;
font-size: 0.9rem;
}
.task-meta {
font-size: 0.8rem;
color: var(--muted);
margin-top: 2px;
}
.task-done {
border: 1px solid var(--teal);
background: var(--white);
color: var(--teal-d);
border-radius: 8px;
padding: 6px 11px;
font: inherit;
font-weight: 600;
font-size: 0.76rem;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
.task-done:hover {
background: var(--teal-50);
}
.task.is-done .task-title,
.task.is-done .task-meta {
text-decoration: line-through;
color: var(--muted);
}
.task.is-done .task-ic {
background: rgba(47, 158, 111, 0.14);
color: var(--ok);
}
.task.is-done .task-done {
border-color: var(--ok);
background: rgba(47, 158, 111, 0.12);
color: var(--ok);
cursor: default;
}
/* ── Messages ── */
.messages {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.msg {
display: flex;
gap: 11px;
padding: 11px 0;
border-bottom: 1px solid var(--line);
align-items: center;
}
.msg:last-child {
border-bottom: none;
}
.msg-avatar {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 700;
font-size: 0.76rem;
background: var(--teal-d);
}
.msg-avatar.c {
background: var(--coral);
}
.msg-avatar.b {
background: #4f7cac;
}
.msg-body {
flex: 1;
min-width: 0;
}
.msg-from {
font-weight: 600;
font-size: 0.88rem;
}
.msg-text {
font-size: 0.8rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msg-unread {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--coral);
flex-shrink: 0;
}
/* ── 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;
}
@media (max-width: 900px) {
.stats {
grid-template-columns: repeat(2, 1fr);
}
.columns {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.appbar-nav {
display: none;
}
}// ── Toast ──────────────────────────────────────────────────────────────────
const toast = document.getElementById("toast");
function showToast(msg) {
toast.textContent = msg;
toast.hidden = false;
clearTimeout(showToast._t);
showToast._t = setTimeout(() => (toast.hidden = true), 2600);
}
// ── Live clock ───────────────────────────────────────────────────────────────
// Illustrative: starts from a fixed 08:42:00 and ticks via a seconds counter.
const clockEl = document.getElementById("clock");
let elapsed = 8 * 3600 + 42 * 60; // seconds since midnight
function renderClock() {
const h = Math.floor(elapsed / 3600) % 24;
const m = Math.floor((elapsed % 3600) / 60);
const s = elapsed % 60;
const pad = (n) => String(n).padStart(2, "0");
clockEl.textContent = `${pad(h)}:${pad(m)}:${pad(s)}`;
elapsed += 1;
}
renderClock();
setInterval(renderClock, 1000);
// ── Data ─────────────────────────────────────────────────────────────────────
const FLOW = ["waiting", "inroom", "done"];
const PILL = { waiting: "Waiting", inroom: "In room", done: "Completed", noshow: "No-show" };
const NEXT_LABEL = { waiting: "Room in", inroom: "Complete" };
const appointments = [
{
id: 1,
time: "9:00",
name: "Marcus Reed",
who: "58 M",
reason: "Post-MI follow-up",
status: "done",
},
{
id: 2,
time: "9:20",
name: "Priya Anand",
who: "44 F",
reason: "Palpitations review",
status: "inroom",
},
{
id: 3,
time: "9:40",
name: "Tom Whitfield",
who: "67 M",
reason: "Hypertension check",
status: "waiting",
},
{
id: 4,
time: "10:00",
name: "Grace Lim",
who: "39 F",
reason: "Echo results",
status: "waiting",
},
{
id: 5,
time: "10:20",
name: "Daniel Cruz",
who: "52 M",
reason: "Chest pain triage",
status: "waiting",
},
{
id: 6,
time: "10:40",
name: "Aisha Bello",
who: "61 F",
reason: "Med titration",
status: "noshow",
},
];
const tasks = [
{
id: "t1",
kind: "lab",
title: "Troponin panel — M. Reed",
meta: "Result ready · review",
done: false,
},
{
id: "t2",
kind: "flag",
title: "Abnormal K+ 5.9 — D. Cruz",
meta: "Critical flag",
done: false,
},
{
id: "t3",
kind: "refill",
title: "Bisoprolol refill — T. Whitfield",
meta: "Pharmacy request",
done: false,
},
{
id: "t4",
kind: "lab",
title: "Lipid panel — G. Lim",
meta: "Result ready · review",
done: false,
},
];
const messages = [
{ from: "Sara Nguyen, RN", text: "Room 3 vitals charted for Anand.", cls: "", unread: true },
{ from: "Dr. Ravi Patel", text: "Can you review Cruz's ECG?", cls: "b", unread: true },
{ from: "Front desk", text: "Bello called — running late.", cls: "c", unread: false },
];
// ── KPI sync ─────────────────────────────────────────────────────────────────
const kpi = {
today: document.getElementById("kpiToday"),
waiting: document.getElementById("kpiWaiting"),
done: document.getElementById("kpiDone"),
msgs: document.getElementById("kpiMsgs"),
};
const schedCount = document.getElementById("schedCount");
function syncKpis() {
kpi.today.textContent = appointments.length;
kpi.waiting.textContent = appointments.filter((a) => a.status === "waiting").length;
kpi.done.textContent = appointments.filter((a) => a.status === "done").length;
kpi.msgs.textContent = messages.filter((m) => m.unread).length;
schedCount.textContent = `${appointments.length} visits`;
}
// ── Schedule render ──────────────────────────────────────────────────────────
const timeline = document.getElementById("timeline");
let activeFilter = "all";
function renderSchedule() {
const visible = appointments.filter((a) => activeFilter === "all" || a.status === activeFilter);
timeline.innerHTML = visible.length
? visible
.map((a) => {
const isFinal = a.status === "done" || a.status === "noshow";
const btn = isFinal
? `<button class="appt-btn is-final" disabled>${a.status === "done" ? "Done ✓" : "No-show"}</button>`
: `<button class="appt-btn" data-id="${a.id}">${NEXT_LABEL[a.status]} →</button>`;
return `<li class="appt" data-status="${a.status}">
<span class="appt-time">${a.time}</span>
<span class="appt-rail"><span class="appt-dot"></span></span>
<div class="appt-body">
<p class="appt-name">${a.name} <span>· ${a.who}</span></p>
<p class="appt-reason">${a.reason}</p>
</div>
<div class="appt-side">
<span class="pill ${a.status}">${PILL[a.status]}</span>
${btn}
</div>
</li>`;
})
.join("")
: `<p class="empty">No patients in this view.</p>`;
}
timeline.addEventListener("click", (e) => {
const btn = e.target.closest(".appt-btn[data-id]");
if (!btn) return;
const appt = appointments.find((a) => a.id === Number(btn.dataset.id));
const next = FLOW[FLOW.indexOf(appt.status) + 1];
if (!next) return;
appt.status = next;
syncKpis();
renderSchedule();
showToast(`${appt.name} → ${PILL[next]}`);
});
// ── Filter chips ─────────────────────────────────────────────────────────────
document.getElementById("chips").addEventListener("click", (e) => {
const chip = e.target.closest(".chip");
if (!chip) return;
activeFilter = chip.dataset.filter;
document.querySelectorAll(".chip").forEach((c) => {
const on = c === chip;
c.classList.toggle("is-active", on);
c.setAttribute("aria-selected", String(on));
});
renderSchedule();
});
// ── Tasks & alerts ───────────────────────────────────────────────────────────
const ICON = { lab: "⌗", flag: "⚠", refill: "℞" };
const tasksEl = document.getElementById("tasks");
const taskBadge = document.getElementById("taskBadge");
function renderTasks() {
tasksEl.innerHTML = tasks
.map(
(t) => `<li class="task ${t.done ? "is-done" : ""}" data-id="${t.id}">
<span class="task-ic ${t.kind}">${ICON[t.kind]}</span>
<div class="task-body">
<p class="task-title">${t.title}</p>
<p class="task-meta">${t.meta}</p>
</div>
<button class="task-done" ${t.done ? "disabled" : ""}>${t.done ? "Done ✓" : "Done"}</button>
</li>`
)
.join("");
const open = tasks.filter((t) => !t.done).length;
taskBadge.textContent = open;
taskBadge.classList.toggle("is-zero", open === 0);
}
tasksEl.addEventListener("click", (e) => {
const btn = e.target.closest(".task-done");
if (!btn) return;
const li = btn.closest(".task");
const task = tasks.find((t) => t.id === li.dataset.id);
if (!task || task.done) return;
task.done = true;
renderTasks();
showToast(`Task cleared: ${task.title}`);
});
// ── Messages ─────────────────────────────────────────────────────────────────
const messagesEl = document.getElementById("messages");
function renderMessages() {
messagesEl.innerHTML = messages
.map((m) => {
const initials = m.from
.split(" ")
.slice(0, 2)
.map((w) => w[0])
.join("");
return `<li class="msg">
<span class="msg-avatar ${m.cls}">${initials}</span>
<div class="msg-body">
<p class="msg-from">${m.from}</p>
<p class="msg-text">${m.text}</p>
</div>
${m.unread ? '<span class="msg-unread"></span>' : ""}
</li>`;
})
.join("");
}
// ── Init ─────────────────────────────────────────────────────────────────────
document.getElementById("todayDate").textContent = "Monday, 8 June";
syncKpis();
renderSchedule();
renderTasks();
renderMessages();<!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>Clinician Dashboard · Northbridge Clinic</title>
</head>
<body>
<header class="appbar">
<a class="brand" href="#">
<span class="brand-mark" aria-hidden="true">✚</span>
<span class="brand-name">Northbridge <em>Health</em></span>
</a>
<nav class="appbar-nav" aria-label="Primary">
<a href="#" class="nav-link is-active">Today</a>
<a href="#" class="nav-link">Patients</a>
<a href="#" class="nav-link">Orders</a>
<a href="#" class="nav-link">Inbox</a>
</nav>
<div class="appbar-actions">
<button class="icon-btn" aria-label="Search">⌕</button>
<button class="icon-btn" aria-label="Notifications">◔<span class="dot"></span></button>
<button class="avatar" aria-label="Account">LO</button>
</div>
</header>
<main class="board">
<section class="greeting">
<div>
<p class="eyebrow" id="todayDate">Monday, 8 June</p>
<h1>Good morning, Dr. Okafor</h1>
<p class="sub">Dr. Lena Okafor · Cardiology · Clinic A</p>
</div>
<div class="clock-pill" aria-label="Current time">
<span class="hp-dot"></span>
<span id="clock" role="status" aria-live="off">--:--:--</span>
</div>
</section>
<section class="stats" aria-label="Today at a glance">
<article class="stat">
<p class="stat-num" id="kpiToday">0</p>
<p class="stat-label">Patients today</p>
</article>
<article class="stat">
<p class="stat-num" id="kpiWaiting">0</p>
<p class="stat-label">In waiting room</p>
</article>
<article class="stat">
<p class="stat-num" id="kpiDone">0</p>
<p class="stat-label">Completed</p>
</article>
<article class="stat stat-accent">
<p class="stat-num" id="kpiMsgs">0</p>
<p class="stat-label">Unread messages</p>
</article>
</section>
<div class="columns">
<section class="panel sched-panel">
<div class="panel-head">
<h3 class="section-h">Today's schedule</h3>
<span class="count-tag" id="schedCount">0 visits</span>
</div>
<div class="chips" id="chips" role="tablist" aria-label="Filter schedule">
<button class="chip is-active" role="tab" aria-selected="true" data-filter="all">All</button>
<button class="chip" role="tab" aria-selected="false" data-filter="waiting">Waiting</button>
<button class="chip" role="tab" aria-selected="false" data-filter="inroom">In room</button>
<button class="chip" role="tab" aria-selected="false" data-filter="done">Completed</button>
</div>
<ol class="timeline" id="timeline"></ol>
</section>
<div class="side">
<section class="panel">
<div class="panel-head">
<h3 class="section-h">Tasks & alerts</h3>
<span class="badge-count" id="taskBadge">0</span>
</div>
<ul class="tasks" id="tasks"></ul>
</section>
<section class="panel">
<div class="panel-head">
<h3 class="section-h">Messages</h3>
<a href="#" class="see-all">Inbox</a>
</div>
<ul class="messages" id="messages"></ul>
</section>
</div>
</div>
</main>
<div class="toast" id="toast" hidden role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Clinician Dashboard
The view a clinician lands on at the start of a shift. A clinical-white layout in teal and soft coral keeps the day legible: a greeting header with specialty and a live clock sits above four KPI cards — patients today, in the waiting room, completed, and unread messages. The left column is today’s schedule as a vertical timeline; each appointment shows time, patient, reason for visit, and a status pill, and its action button advances the patient through Waiting → In room → Completed, re-syncing the KPI counts as it goes. Filter chips narrow the list by status. The right column stacks a tasks & alerts queue — lab results, refill requests, abnormal-value flags — where each item can be marked done (striking it through and decrementing a badge), and a compact messages preview. All interactions are vanilla JS with the data held in plain arrays.
Illustrative UI only — not intended for real medical use.