252 lines
14 KiB
HTML
252 lines
14 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 A — Linear Reader · 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; }
|
||
.timeline-line::before { content:''; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:#e2e8f0; }
|
||
</style>
|
||
</head>
|
||
<body class="bg-slate-100 min-h-screen pb-28 md:pb-10">
|
||
|
||
<!-- Sticky minimal top bar -->
|
||
<header class="sticky top-0 z-30 bg-white/90 backdrop-blur border-b border-slate-200">
|
||
<div class="max-w-3xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between gap-3">
|
||
<div class="flex items-center gap-2 min-w-0">
|
||
<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="text-xs text-slate-400 hidden sm:inline">Cases</span>
|
||
<span class="text-xs text-slate-400 hidden sm:inline">/</span>
|
||
<span class="font-bold text-slate-800 text-sm truncate">CMP-2025-NOV-8842</span>
|
||
</div>
|
||
<div class="flex items-center gap-2 shrink-0">
|
||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-blue-light text-navy">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-navy animate-pulse"></span> In Progress
|
||
</span>
|
||
<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>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="max-w-3xl mx-auto px-4 sm:px-6 py-6 space-y-5">
|
||
|
||
<!-- Title + meta -->
|
||
<section>
|
||
<div class="flex items-center gap-2 text-xs font-semibold text-slate-500 mb-2 flex-wrap">
|
||
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-slate-100 text-slate-600"><i data-lucide="globe" class="w-3 h-3"></i> MOH Tawasul</span>
|
||
<span class="text-red-600 font-bold inline-flex items-center gap-1"><i data-lucide="alert-octagon" class="w-3 h-3"></i> High severity</span>
|
||
</div>
|
||
<h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 leading-tight">ER Admission Delay & Poor Communication</h1>
|
||
<p class="text-sm text-slate-500 mt-1.5">Created 12 Nov 2025, 09:14 AM · Due 14 Nov 2025, 08:00 AM</p>
|
||
</section>
|
||
|
||
<!-- Description -->
|
||
<section class="bg-white rounded-2xl border border-slate-200 p-5">
|
||
<div class="border-l-4 border-navy pl-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>
|
||
</section>
|
||
|
||
<!-- Key facts grid -->
|
||
<section class="bg-white rounded-2xl border border-slate-200 divide-y divide-slate-100">
|
||
<div class="grid grid-cols-2 sm:grid-cols-3">
|
||
<div class="p-4">
|
||
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wide">Location</p>
|
||
<p class="text-sm font-bold text-slate-800 mt-1">Emergency Room</p>
|
||
<p class="text-xs text-slate-500">Ground Floor · Zone B</p>
|
||
</div>
|
||
<div class="p-4">
|
||
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wide">Assigned to</p>
|
||
<div class="flex items-center gap-2 mt-1">
|
||
<span class="w-6 h-6 rounded-full bg-navy text-white text-[10px] font-bold flex items-center justify-center">SM</span>
|
||
<p class="text-sm font-bold text-slate-800">Dr. Sara Mansoor</p>
|
||
</div>
|
||
<p class="text-xs text-slate-500">Patient Experience</p>
|
||
</div>
|
||
<div class="p-4">
|
||
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wide">Patient</p>
|
||
<p class="text-sm font-bold text-slate-800 mt-1">Ahmed Al-Rashid</p>
|
||
<p class="text-xs text-slate-500">MRN: H-29481</p>
|
||
</div>
|
||
<div class="p-4">
|
||
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wide">Taxonomy</p>
|
||
<p class="text-sm font-bold text-slate-800 mt-1">Clinical Care</p>
|
||
<p class="text-xs text-slate-500">Emergency › Wait Time</p>
|
||
</div>
|
||
<div class="p-4">
|
||
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wide">Patient contact</p>
|
||
<p class="text-sm font-bold text-emerald-600 mt-1 inline-flex items-center gap-1"><i data-lucide="phone" class="w-3.5 h-3.5"></i> Contacted</p>
|
||
<p class="text-xs text-slate-500">Nov 12, 02:15 PM</p>
|
||
</div>
|
||
<div class="p-4">
|
||
<p class="text-xs font-semibold text-slate-400 uppercase tracking-wide">Departments</p>
|
||
<p class="text-sm font-bold text-slate-800 mt-1">2 involved</p>
|
||
<p class="text-xs text-slate-500">Emergency · Nursing</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Activity (always visible) -->
|
||
<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="activity" class="w-4 h-4 text-navy"></i> Activity</h2>
|
||
<div class="relative timeline-line pl-10 space-y-5">
|
||
<div class="relative">
|
||
<span class="absolute -left-[26px] top-0.5 w-3.5 h-3.5 rounded-full bg-white border-[3px] border-navy"></span>
|
||
<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 class="relative">
|
||
<span class="absolute -left-[26px] top-0.5 w-3.5 h-3.5 rounded-full bg-white border-[3px] border-emerald-500"></span>
|
||
<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 class="relative">
|
||
<span class="absolute -left-[26px] top-0.5 w-3.5 h-3.5 rounded-full bg-white border-[3px] border-orange-500"></span>
|
||
<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 class="relative">
|
||
<span class="absolute -left-[26px] top-0.5 w-3.5 h-3.5 rounded-full bg-white border-[3px] border-blue"></span>
|
||
<p class="text-sm font-semibold text-slate-800">Assigned to Dr. Sara Mansoor (PX)</p>
|
||
<p class="text-xs text-slate-400">Nov 12, 10:02 AM</p>
|
||
</div>
|
||
<div class="relative">
|
||
<span class="absolute -left-[26px] top-0.5 w-3.5 h-3.5 rounded-full bg-white border-[3px] border-slate-300"></span>
|
||
<p class="text-sm font-semibold text-slate-800">Complaint received via MOH Tawasul</p>
|
||
<p class="text-xs text-slate-400">Nov 12, 09:14 AM</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Collapsible sections (no tabs) -->
|
||
<section class="bg-white rounded-2xl border border-slate-200 divide-y divide-slate-100">
|
||
<details class="group">
|
||
<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="users" class="w-4 h-4 text-navy"></i> Departments & Staff</span>
|
||
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 group-open:rotate-180 transition"></i>
|
||
</summary>
|
||
<div class="px-5 pb-5 space-y-3">
|
||
<div class="flex items-center justify-between p-3 rounded-xl bg-slate-50">
|
||
<div>
|
||
<p class="text-sm font-bold text-slate-800">Emergency Medicine <span class="text-[10px] font-bold text-navy bg-blue-light px-1.5 py-0.5 rounded ml-1">PRIMARY</span></p>
|
||
<p class="text-xs text-slate-500">Response received · accepted</p>
|
||
</div>
|
||
<i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-500"></i>
|
||
</div>
|
||
<div class="flex items-center justify-between p-3 rounded-xl bg-slate-50">
|
||
<div>
|
||
<p class="text-sm font-bold text-slate-800">Nursing Services</p>
|
||
<p class="text-xs text-amber-600">Awaiting response</p>
|
||
</div>
|
||
<i data-lucide="clock" class="w-5 h-5 text-amber-500"></i>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
<details class="group">
|
||
<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="sparkles" class="w-4 h-4 text-navy"></i> AI Summary</span>
|
||
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 group-open:rotate-180 transition"></i>
|
||
</summary>
|
||
<div class="px-5 pb-5 text-sm text-slate-600 leading-relaxed">
|
||
Communication breakdown during high-acuity ER triage. Recurrence risk: medium. Suggested actions: nursing handover protocol refresh & real-time patient-status board.
|
||
</div>
|
||
</details>
|
||
<details class="group">
|
||
<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="file-text" class="w-4 h-4 text-navy"></i> Resolution & PDF</span>
|
||
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 group-open:rotate-180 transition"></i>
|
||
</summary>
|
||
<div class="px-5 pb-5 text-sm text-slate-500">Resolution notes will appear here once the case is resolved. A formal PDF report can be generated for MOH submission.</div>
|
||
</details>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- Sticky bottom action bar (mobile-first) -->
|
||
<div class="fixed bottom-0 inset-x-0 z-30 md:hidden">
|
||
<div class="bg-white/95 backdrop-blur border-t border-slate-200 px-4 py-3 flex items-center gap-2">
|
||
<button class="flex-1 bg-navy text-white font-bold text-sm rounded-xl py-3 flex items-center justify-center gap-2">
|
||
<i data-lucide="check-circle-2" class="w-4 h-4"></i> Resolve
|
||
</button>
|
||
<button class="px-3 py-3 border border-slate-200 rounded-xl text-slate-600"><i data-lucide="user-plus" class="w-4 h-4"></i></button>
|
||
<button class="px-3 py-3 border border-red-200 bg-red-50 rounded-xl text-red-600"><i data-lucide="alert-triangle" class="w-4 h-4"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Desktop floating action cluster -->
|
||
<div class="hidden md:flex fixed bottom-6 right-6 z-30 items-center gap-2">
|
||
<div class="relative">
|
||
<button id="moreBtn" onclick="toggleMenu('moreMenu')" class="w-12 h-12 bg-white border border-slate-200 rounded-full shadow-sm hover:bg-slate-50 flex items-center justify-center text-slate-600">
|
||
<i data-lucide="more-horizontal" class="w-5 h-5"></i>
|
||
</button>
|
||
<div id="moreMenu" class="hidden absolute bottom-14 right-0 w-52 bg-white rounded-xl shadow-xl border border-slate-200 py-1.5">
|
||
<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>
|
||
<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>
|
||
<button class="px-4 h-12 border border-slate-200 bg-white rounded-full shadow-sm hover:bg-slate-50 font-semibold text-sm text-slate-700 flex items-center gap-2"><i data-lucide="user-plus" class="w-4 h-4"></i> Assign</button>
|
||
<button class="px-4 h-12 border border-red-200 bg-white rounded-full shadow-sm hover:bg-red-50 font-semibold text-sm text-red-600 flex items-center gap-2"><i data-lucide="alert-triangle" class="w-4 h-4"></i> Escalate</button>
|
||
<button class="px-6 h-12 bg-navy text-white rounded-full shadow-lg hover:bg-blue font-bold text-sm flex items-center gap-2"><i data-lucide="check-circle-2" class="w-5 h-5"></i> Resolve Case</button>
|
||
</div>
|
||
|
||
<script>
|
||
lucide.createIcons();
|
||
|
||
// Live SLA countdown (target ~18h from load so it always looks real)
|
||
(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'; pill.className = pill.className.replace('amber', 'red'); return; }
|
||
var h = Math.floor(diff / 3600000);
|
||
var m = Math.floor((diff % 3600000) / 60000);
|
||
txt.textContent = h + 'h ' + m + 'm left';
|
||
if (diff < 3600000) pill.className = pill.className.replace(/amber-50|amber-200|amber-700/g, function(m){return m.replace('amber','red')});
|
||
}
|
||
tick(); setInterval(tick, 30000);
|
||
})();
|
||
|
||
function toggleMenu(id) {
|
||
var el = document.getElementById(id);
|
||
el.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');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|