205 lines
13 KiB
HTML
205 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Option C — Workflow Stepper · CMP-2025-NOV-8842</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Kufi+Arabic:wght@400;500;700&display=swap" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
navy: '#005696',
|
||
blue: { DEFAULT: '#007bbd', light: '#eff6fb' },
|
||
light: '#eef6fb',
|
||
},
|
||
fontFamily: { sans: ['Inter', 'Noto Kufi Arabic', 'sans-serif'] },
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>body{font-family:'Inter','Noto Kufi Arabic',sans-serif;}</style>
|
||
</head>
|
||
<body class="bg-slate-100 min-h-screen">
|
||
|
||
<!-- Top bar -->
|
||
<header class="bg-white border-b border-slate-200 sticky top-0 z-30">
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between">
|
||
<div class="flex items-center gap-2 min-w-0 text-sm">
|
||
<a href="index.html" class="p-1.5 -ml-1.5 rounded-lg hover:bg-slate-100 text-slate-500"><i data-lucide="arrow-left" class="w-5 h-5"></i></a>
|
||
<span class="font-bold text-slate-800 truncate">CMP-2025-NOV-8842</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span id="slaPill" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-amber-50 text-amber-700 border border-amber-200"><i data-lucide="clock" class="w-3.5 h-3.5"></i> <span id="slaText">—</span></span>
|
||
<div class="relative">
|
||
<button id="moreBtn" onclick="toggleMenu('moreMenu')" class="p-2 rounded-lg hover:bg-slate-100 text-slate-500"><i data-lucide="ellipsis-vertical" class="w-5 h-5"></i></button>
|
||
<div id="moreMenu" class="hidden absolute right-0 top-11 w-56 bg-white rounded-xl shadow-xl border border-slate-200 py-1.5 z-40">
|
||
<button class="w-full text-left px-4 py-2 text-sm hover:bg-slate-50 flex items-center gap-2 text-slate-700"><i data-lucide="user-plus" class="w-4 h-4"></i> Assign / Reassign</button>
|
||
<button class="w-full text-left px-4 py-2 text-sm hover:bg-slate-50 flex items-center gap-2 text-slate-700"><i data-lucide="phone" class="w-4 h-4"></i> Update patient contact</button>
|
||
<button class="w-full text-left px-4 py-2 text-sm hover:bg-slate-50 flex items-center gap-2 text-slate-700"><i data-lucide="shield-alert" class="w-4 h-4"></i> OVR escalate</button>
|
||
<button class="w-full text-left px-4 py-2 text-sm hover:bg-slate-50 flex items-center gap-2 text-slate-700"><i data-lucide="file-text" class="w-4 h-4"></i> Generate PDF report</button>
|
||
<div class="my-1 border-t border-slate-100"></div>
|
||
<button class="w-full text-left px-4 py-2 text-sm hover:bg-red-50 flex items-center gap-2 text-red-600"><i data-lucide="trash-2" class="w-4 h-4"></i> Delete</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="max-w-4xl mx-auto px-4 sm:px-6 py-6 space-y-6">
|
||
|
||
<!-- Title -->
|
||
<section>
|
||
<div class="flex items-center gap-2 mb-2 flex-wrap">
|
||
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-light text-navy text-xs font-bold"><span class="w-1.5 h-1.5 rounded-full bg-navy animate-pulse"></span> Stage 3 of 5 · Investigating</span>
|
||
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-red-50 text-red-600 text-xs font-bold"><i data-lucide="alert-octagon" class="w-3 h-3"></i> High</span>
|
||
</div>
|
||
<h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900">ER Admission Delay & Poor Communication</h1>
|
||
<p class="text-sm text-slate-500 mt-1.5">Emergency Room · Ground Floor, Zone B · Created 12 Nov 2025</p>
|
||
</section>
|
||
|
||
<!-- Lifecycle stepper (the hero) -->
|
||
<section class="bg-white rounded-2xl border border-slate-200 p-5 sm:p-6">
|
||
<div class="flex items-center">
|
||
<!-- step 1 done -->
|
||
<div class="flex-1 flex flex-col items-center text-center relative">
|
||
<div class="w-10 h-10 rounded-full bg-emerald-500 text-white flex items-center justify-center shadow-sm shadow-emerald-500/30 z-10"><i data-lucide="check" class="w-5 h-5"></i></div>
|
||
<p class="text-xs font-bold text-slate-700 mt-2">Received</p>
|
||
<p class="text-[10px] text-slate-400">Nov 12</p>
|
||
</div>
|
||
<div class="flex-1 h-1 -mx-1 bg-emerald-500"></div>
|
||
<!-- step 2 done -->
|
||
<div class="flex-1 flex flex-col items-center text-center relative">
|
||
<div class="w-10 h-10 rounded-full bg-emerald-500 text-white flex items-center justify-center shadow-sm shadow-emerald-500/30 z-10"><i data-lucide="check" class="w-5 h-5"></i></div>
|
||
<p class="text-xs font-bold text-slate-700 mt-2">Assigned</p>
|
||
<p class="text-[10px] text-slate-400">Sara Mansoor</p>
|
||
</div>
|
||
<div class="flex-1 h-1 -mx-1 bg-gradient-to-r from-emerald-500 to-navy"></div>
|
||
<!-- step 3 current -->
|
||
<div class="flex-1 flex flex-col items-center text-center relative">
|
||
<div class="w-12 h-12 -my-1 rounded-full bg-navy text-white flex items-center justify-center ring-4 ring-blue-light z-10"><i data-lucide="search" class="w-5 h-5"></i></div>
|
||
<p class="text-xs font-extrabold text-navy mt-2">Investigating</p>
|
||
<p class="text-[10px] text-navy/70">In progress</p>
|
||
</div>
|
||
<div class="flex-1 h-1 -mx-1 bg-slate-200"></div>
|
||
<!-- step 4 -->
|
||
<div class="flex-1 flex flex-col items-center text-center relative">
|
||
<div class="w-10 h-10 rounded-full bg-white border-2 border-dashed border-slate-300 text-slate-300 flex items-center justify-center z-10"><i data-lucide="check-circle-2" class="w-5 h-5"></i></div>
|
||
<p class="text-xs font-semibold text-slate-400 mt-2">Resolved</p>
|
||
<p class="text-[10px] text-slate-300">Pending</p>
|
||
</div>
|
||
<div class="flex-1 h-1 -mx-1 bg-slate-200"></div>
|
||
<!-- step 5 -->
|
||
<div class="flex-1 flex flex-col items-center text-center relative">
|
||
<div class="w-10 h-10 rounded-full bg-white border-2 border-dashed border-slate-300 text-slate-300 flex items-center justify-center z-10"><i data-lucide="lock" class="w-4 h-4"></i></div>
|
||
<p class="text-xs font-semibold text-slate-400 mt-2">Closed</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Current stage context + PRIMARY action -->
|
||
<section class="rounded-2xl border-2 border-navy bg-white overflow-hidden">
|
||
<div class="p-5 sm:p-6">
|
||
<div class="flex items-center gap-2 text-navy text-xs font-bold uppercase tracking-wide"><i data-lucide="lightbulb" class="w-4 h-4"></i> What to do now</div>
|
||
<h2 class="text-xl font-extrabold text-slate-900 mt-2">Gather remaining responses, then resolve</h2>
|
||
<p class="text-sm text-slate-600 mt-1.5 max-w-xl">Emergency Medicine has responded and is accepted. Nursing Services hasn't responded yet. You can nudge them, or resolve now if their input isn't blocking.</p>
|
||
|
||
<div class="grid sm:grid-cols-2 gap-3 mt-5">
|
||
<div class="rounded-xl bg-emerald-50 border border-emerald-200 p-3 flex items-center gap-3">
|
||
<i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-600 shrink-0"></i>
|
||
<div>
|
||
<p class="text-sm font-bold text-slate-800">Emergency Medicine</p>
|
||
<p class="text-xs text-slate-500">Responded · accepted</p>
|
||
</div>
|
||
</div>
|
||
<div class="rounded-xl bg-amber-50 border border-amber-200 p-3 flex items-center gap-3">
|
||
<i data-lucide="clock" class="w-5 h-5 text-amber-600 shrink-0"></i>
|
||
<div>
|
||
<p class="text-sm font-bold text-slate-800">Nursing Services</p>
|
||
<p class="text-xs text-slate-500">No response · 14h left</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-slate-50 border-t border-slate-100 px-5 sm:px-6 py-4 flex flex-col sm:flex-row gap-3">
|
||
<button class="flex-1 bg-navy text-white font-bold text-base rounded-xl py-3.5 flex items-center justify-center gap-2 hover:bg-blue transition shadow-md shadow-navy/20"><i data-lucide="check-circle-2" class="w-5 h-5"></i> Resolve Case</button>
|
||
<div class="flex gap-3">
|
||
<button class="flex-1 sm:flex-none px-4 py-3.5 border border-slate-300 bg-white rounded-xl font-semibold text-sm text-slate-700 hover:bg-slate-50 flex items-center justify-center gap-2"><i data-lucide="send" class="w-4 h-4"></i> Nudge Nursing</button>
|
||
<button class="flex-1 sm:flex-none px-4 py-3.5 border border-red-300 bg-red-50 rounded-xl font-semibold text-sm text-red-600 hover:bg-red-100 flex items-center justify-center gap-2"><i data-lucide="alert-triangle" class="w-4 h-4"></i> Escalate</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Case details (collapsible — secondary) -->
|
||
<section class="bg-white rounded-2xl border border-slate-200">
|
||
<details>
|
||
<summary class="flex items-center justify-between p-5 cursor-pointer list-none">
|
||
<span class="flex items-center gap-2 text-sm font-bold text-slate-800"><i data-lucide="info" class="w-4 h-4 text-navy"></i> Case details</span>
|
||
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400"></i>
|
||
</summary>
|
||
<div class="px-5 pb-5">
|
||
<div class="border-l-4 border-navy pl-4 mb-4">
|
||
<p class="text-[15px] leading-relaxed text-slate-700 italic">"The patient's relative complained about the delay in the ER admission process. The doctor was unavailable and nursing staff did not provide updates for over 45 minutes, causing distress to the family."</p>
|
||
</div>
|
||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||
<div><p class="text-[11px] font-semibold text-slate-400 uppercase">Patient</p><p class="text-sm font-bold text-slate-800">Ahmed Al-Rashid</p><p class="text-xs text-slate-500">MRN: H-29481</p></div>
|
||
<div><p class="text-[11px] font-semibold text-slate-400 uppercase">Severity</p><p class="text-sm font-bold text-red-600">High</p></div>
|
||
<div><p class="text-[11px] font-semibold text-slate-400 uppercase">Source</p><p class="text-sm font-bold text-slate-800">MOH Tawasul</p></div>
|
||
<div><p class="text-[11px] font-semibold text-slate-400 uppercase">Taxonomy</p><p class="text-sm font-bold text-slate-800">Emergency</p><p class="text-xs text-slate-500">Clinical › Wait Time</p></div>
|
||
<div><p class="text-[11px] font-semibold text-slate-400 uppercase">Owner</p><p class="text-sm font-bold text-slate-800">Dr. Sara Mansoor</p></div>
|
||
<div><p class="text-[11px] font-semibold text-slate-400 uppercase">Patient contact</p><p class="text-sm font-bold text-emerald-600">Contacted</p></div>
|
||
<div><p class="text-[11px] font-semibold text-slate-400 uppercase">Created</p><p class="text-sm font-bold text-slate-800">12 Nov, 09:14</p></div>
|
||
<div><p class="text-[11px] font-semibold text-slate-400 uppercase">Due</p><p class="text-sm font-bold text-slate-800">14 Nov, 08:00</p></div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</section>
|
||
|
||
<!-- Recent activity (short) -->
|
||
<section class="bg-white rounded-2xl border border-slate-200 p-5">
|
||
<h2 class="text-sm font-bold text-slate-800 mb-4 flex items-center gap-2"><i data-lucide="history" class="w-4 h-4 text-navy"></i> Recent activity</h2>
|
||
<div class="space-y-3">
|
||
<div class="flex items-start gap-3">
|
||
<span class="mt-0.5 w-2 h-2 rounded-full bg-navy"></span>
|
||
<div><p class="text-sm font-semibold text-slate-800">ER department submitted a response</p><p class="text-xs text-slate-400">Nov 13, 08:45 AM</p></div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<span class="mt-0.5 w-2 h-2 rounded-full bg-emerald-500"></span>
|
||
<div><p class="text-sm font-semibold text-slate-800">Patient contacted by phone</p><p class="text-xs text-slate-400">Nov 12, 02:15 PM</p></div>
|
||
</div>
|
||
<div class="flex items-start gap-3">
|
||
<span class="mt-0.5 w-2 h-2 rounded-full bg-orange-500"></span>
|
||
<div><p class="text-sm font-semibold text-slate-800">Escalated to ER Department Head</p><p class="text-xs text-slate-400">Nov 12, 11:30 AM</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script>
|
||
lucide.createIcons();
|
||
function toggleMenu(id) { document.getElementById(id).classList.toggle('hidden'); }
|
||
document.addEventListener('click', function (e) {
|
||
var m = document.getElementById('moreMenu');
|
||
var b = document.getElementById('moreBtn');
|
||
if (m && !m.contains(e.target) && !b.contains(e.target)) m.classList.add('hidden');
|
||
});
|
||
(function () {
|
||
var due = Date.now() + 18 * 3600 * 1000 + 42 * 60 * 1000;
|
||
var pill = document.getElementById('slaPill');
|
||
var txt = document.getElementById('slaText');
|
||
function tick() {
|
||
var diff = due - Date.now();
|
||
if (diff <= 0) { txt.textContent = 'Overdue'; return; }
|
||
txt.textContent = Math.floor(diff / 3600000) + 'h ' + Math.floor((diff % 3600000) / 60000) + 'm left';
|
||
}
|
||
tick(); setInterval(tick, 30000);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|