266 lines
15 KiB
HTML
266 lines
15 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 B — Workspace · 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-7xl 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="text-slate-400 hidden sm:inline">Cases</span>
|
||
<span class="text-slate-300 hidden sm:inline">/</span>
|
||
<span class="font-bold text-slate-800 truncate">CMP-2025-NOV-8842</span>
|
||
<span class="ml-1 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>
|
||
</div>
|
||
<button class="text-slate-500 hover:text-navy p-2 rounded-lg hover:bg-slate-100"><i data-lucide="ellipsis-vertical" class="w-5 h-5"></i></button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Page heading -->
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 pt-6">
|
||
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
|
||
<div>
|
||
<h1 class="text-2xl font-extrabold text-slate-900">ER Admission Delay & Poor Communication</h1>
|
||
<p class="text-sm text-slate-500 mt-1">Emergency Room · Ground Floor, Zone B · Created 12 Nov 2025</p>
|
||
</div>
|
||
<div class="flex items-center gap-2 text-xs font-semibold">
|
||
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-red-50 text-red-600"><i data-lucide="alert-octagon" class="w-3 h-3"></i> High</span>
|
||
<span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-slate-100 text-slate-600"><i data-lucide="globe" class="w-3 h-3"></i> MOH Tawasul</span>
|
||
<span id="slaPill" class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-amber-50 text-amber-700 border border-amber-200"><i data-lucide="clock" class="w-3 h-3"></i> <span id="slaText">—</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Body grid -->
|
||
<main class="max-w-7xl mx-auto px-4 sm:px-6 py-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
|
||
<!-- Left column -->
|
||
<div class="lg:col-span-2 space-y-6">
|
||
|
||
<!-- Description card -->
|
||
<section class="bg-white rounded-2xl border border-slate-200 p-5">
|
||
<h2 class="text-xs font-bold uppercase tracking-wide text-slate-400 mb-3">Complaint</h2>
|
||
<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>
|
||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-5 pt-5 border-t border-slate-100">
|
||
<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">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">Due</p>
|
||
<p class="text-sm font-bold text-slate-800">14 Nov, 08:00</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Departments -->
|
||
<section class="bg-white rounded-2xl border border-slate-200">
|
||
<div class="flex items-center justify-between p-5 pb-3">
|
||
<h2 class="text-sm font-bold text-slate-800 flex items-center gap-2"><i data-lucide="building-2" class="w-4 h-4 text-navy"></i> Involved Departments</h2>
|
||
<button class="text-xs font-bold text-navy hover:underline">+ Add</button>
|
||
</div>
|
||
<div class="divide-y divide-slate-100">
|
||
<div class="flex items-center justify-between p-4">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-blue-light flex items-center justify-center"><i data-lucide="stethoscope" class="w-4 h-4 text-navy"></i></div>
|
||
<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>
|
||
</div>
|
||
<span class="inline-flex items-center gap-1 text-xs font-bold text-emerald-600"><i data-lucide="check-circle-2" class="w-4 h-4"></i></span>
|
||
</div>
|
||
<div class="flex items-center justify-between p-4">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-9 h-9 rounded-lg bg-blue-light flex items-center justify-center"><i data-lucide="heart-pulse" class="w-4 h-4 text-navy"></i></div>
|
||
<div>
|
||
<p class="text-sm font-bold text-slate-800">Nursing Services</p>
|
||
<p class="text-xs text-amber-600">Awaiting response · 14h left</p>
|
||
</div>
|
||
</div>
|
||
<span class="inline-flex items-center gap-1 text-xs font-bold text-amber-500"><i data-lucide="clock" class="w-4 h-4"></i></span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Activity -->
|
||
<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>
|
||
<ol class="relative border-l-2 border-slate-100 ml-2 space-y-5">
|
||
<li class="ml-5">
|
||
<span class="absolute -left-[9px] w-4 h-4 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>
|
||
</li>
|
||
<li class="ml-5">
|
||
<span class="absolute -left-[9px] w-4 h-4 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>
|
||
</li>
|
||
<li class="ml-5">
|
||
<span class="absolute -left-[9px] w-4 h-4 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>
|
||
</li>
|
||
<li class="ml-5">
|
||
<span class="absolute -left-[9px] w-4 h-4 rounded-full bg-white border-[3px] border-blue"></span>
|
||
<p class="text-sm font-semibold text-slate-800">Assigned to Dr. Sara Mansoor</p>
|
||
<p class="text-xs text-slate-400">Nov 12, 10:02 AM</p>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Right rail -->
|
||
<aside class="space-y-6">
|
||
|
||
<!-- Next Step (the hero of the rail) -->
|
||
<section class="rounded-2xl bg-navy text-white p-5 shadow-lg shadow-navy/20">
|
||
<div class="flex items-center gap-2 text-blue-light text-xs font-bold uppercase tracking-wide"><i data-lucide="lightbulb" class="w-4 h-4"></i> Next step</div>
|
||
<p class="text-lg font-bold mt-2 leading-snug">Collect Nursing response & resolve</p>
|
||
<p class="text-sm text-white/70 mt-1">Emergency Medicine has responded. Waiting on Nursing Services before you can resolve.</p>
|
||
<div class="flex flex-col gap-2 mt-4">
|
||
<button class="w-full bg-white text-navy font-bold text-sm rounded-xl py-3 flex items-center justify-center gap-2 hover:bg-blue-light transition"><i data-lucide="check-circle-2" class="w-4 h-4"></i> Resolve Case</button>
|
||
<button class="w-full border border-white/30 text-white font-semibold text-sm rounded-xl py-2.5 flex items-center justify-center gap-2 hover:bg-white/10 transition"><i data-lucide="send" class="w-4 h-4"></i> Remind Nursing</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Lifecycle mini-stepper -->
|
||
<section class="bg-white rounded-2xl border border-slate-200 p-5">
|
||
<h2 class="text-xs font-bold uppercase tracking-wide text-slate-400 mb-4">Lifecycle</h2>
|
||
<div class="space-y-0">
|
||
<!-- step -->
|
||
<div class="flex gap-3 items-start">
|
||
<div class="flex flex-col items-center">
|
||
<span class="w-6 h-6 rounded-full bg-emerald-500 text-white flex items-center justify-center"><i data-lucide="check" class="w-3.5 h-3.5"></i></span>
|
||
<span class="w-px flex-1 bg-slate-200 min-h-[20px]"></span>
|
||
</div>
|
||
<div class="pb-4">
|
||
<p class="text-sm font-bold text-slate-800">Received</p>
|
||
<p class="text-xs text-slate-400">Nov 12, 09:14</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-3 items-start">
|
||
<div class="flex flex-col items-center">
|
||
<span class="w-6 h-6 rounded-full bg-emerald-500 text-white flex items-center justify-center"><i data-lucide="check" class="w-3.5 h-3.5"></i></span>
|
||
<span class="w-px flex-1 bg-slate-200 min-h-[20px]"></span>
|
||
</div>
|
||
<div class="pb-4">
|
||
<p class="text-sm font-bold text-slate-800">Assigned</p>
|
||
<p class="text-xs text-slate-400">Dr. Sara Mansoor</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-3 items-start">
|
||
<div class="flex flex-col items-center">
|
||
<span class="w-6 h-6 rounded-full bg-navy text-white flex items-center justify-center ring-4 ring-blue-light"><i data-lucide="search" class="w-3.5 h-3.5"></i></span>
|
||
<span class="w-px flex-1 bg-slate-200 min-h-[20px]"></span>
|
||
</div>
|
||
<div class="pb-4">
|
||
<p class="text-sm font-bold text-navy">Investigating</p>
|
||
<p class="text-xs text-slate-400">In progress</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-3 items-start">
|
||
<div class="flex flex-col items-center">
|
||
<span class="w-6 h-6 rounded-full bg-slate-100 border-2 border-dashed border-slate-300"></span>
|
||
<span class="w-px flex-1 bg-slate-200 min-h-[20px]"></span>
|
||
</div>
|
||
<div class="pb-4">
|
||
<p class="text-sm font-semibold text-slate-400">Resolved</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-3 items-start">
|
||
<div class="flex flex-col items-center">
|
||
<span class="w-6 h-6 rounded-full bg-slate-100 border-2 border-dashed border-slate-300"></span>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-semibold text-slate-400">Closed</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Assignment + tidy actions -->
|
||
<section class="bg-white rounded-2xl border border-slate-200 p-5">
|
||
<div class="flex items-center gap-3 pb-4 border-b border-slate-100">
|
||
<span class="w-10 h-10 rounded-full bg-navy text-white text-sm font-bold flex items-center justify-center">SM</span>
|
||
<div class="min-w-0">
|
||
<p class="text-sm font-bold text-slate-800">Dr. Sara Mansoor</p>
|
||
<p class="text-xs text-slate-500">Patient Experience · Owner</p>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-2 pt-4">
|
||
<button class="px-3 py-2.5 rounded-xl border border-slate-200 hover:bg-slate-50 text-sm font-semibold text-slate-700 flex items-center justify-center gap-2"><i data-lucide="user-plus" class="w-4 h-4"></i> Assign</button>
|
||
<button class="px-3 py-2.5 rounded-xl border border-red-200 bg-red-50 hover:bg-red-100 text-sm font-semibold text-red-600 flex items-center justify-center gap-2"><i data-lucide="alert-triangle" class="w-4 h-4"></i> Escalate</button>
|
||
</div>
|
||
<details class="mt-2 group">
|
||
<summary class="flex items-center justify-center gap-1 px-3 py-2 text-xs font-semibold text-slate-500 hover:text-navy cursor-pointer list-none">
|
||
More actions <i data-lucide="chevron-down" class="w-3.5 h-3.5 group-open:rotate-180 transition"></i>
|
||
</summary>
|
||
<div class="mt-2 space-y-1">
|
||
<button class="w-full text-left px-3 py-2 rounded-lg hover:bg-slate-50 text-sm text-slate-600 flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4"></i> Update patient contact</button>
|
||
<button class="w-full text-left px-3 py-2 rounded-lg hover:bg-slate-50 text-sm text-slate-600 flex items-center gap-2"><i data-lucide="shield-alert" class="w-4 h-4"></i> OVR escalate</button>
|
||
<button class="w-full text-left px-3 py-2 rounded-lg hover:bg-slate-50 text-sm text-slate-600 flex items-center gap-2"><i data-lucide="rotate-ccw" class="w-4 h-4"></i> Reopen</button>
|
||
<button class="w-full text-left px-3 py-2 rounded-lg hover:bg-red-50 text-sm text-red-600 flex items-center gap-2"><i data-lucide="trash-2" class="w-4 h-4"></i> Delete</button>
|
||
</div>
|
||
</details>
|
||
</section>
|
||
</aside>
|
||
</main>
|
||
|
||
<script>
|
||
lucide.createIcons();
|
||
(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>
|