353 lines
24 KiB
HTML
353 lines
24 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 D — Detail + Modals · 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; }
|
||
.modal { display: none; }
|
||
.modal.open { display: flex; }
|
||
.modal-panel { animation: pop .18s ease-out; }
|
||
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
|
||
</style>
|
||
</head>
|
||
<body class="bg-slate-100 min-h-screen pb-28">
|
||
|
||
<!-- Top bar -->
|
||
<header class="bg-white border-b border-slate-200 sticky top-0 z-30">
|
||
<div class="max-w-2xl 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 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-2xl mx-auto px-4 sm:px-6 py-6 space-y-5">
|
||
|
||
<!-- Main details (always on the page) -->
|
||
<section>
|
||
<div class="flex items-center gap-2 text-xs font-semibold mb-2 flex-wrap">
|
||
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-red-50 text-red-600"><i data-lucide="alert-octagon" class="w-3 h-3"></i> High severity</span>
|
||
<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>
|
||
</div>
|
||
<h1 class="text-2xl 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 · 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 (the essentials that live on-page) -->
|
||
<section class="bg-white rounded-2xl border border-slate-200 divide-y divide-slate-100">
|
||
<div class="grid grid-cols-2">
|
||
<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 border-l border-slate-100">
|
||
<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>
|
||
</div>
|
||
<div class="p-4 border-t border-slate-100">
|
||
<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 border-t border-l border-slate-100">
|
||
<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">Emergency</p>
|
||
<p class="text-xs text-slate-500">Clinical › Wait Time</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Modal launchers -->
|
||
<section class="space-y-2.5">
|
||
<h2 class="text-xs font-bold uppercase tracking-wide text-slate-400 px-1">Explore</h2>
|
||
|
||
<button onclick="openModal('mDepartments')" class="w-full bg-white rounded-2xl border border-slate-200 p-4 flex items-center gap-4 hover:border-navy hover:shadow-sm transition text-left">
|
||
<span class="w-10 h-10 rounded-xl bg-blue-light flex items-center justify-center shrink-0"><i data-lucide="building-2" class="w-5 h-5 text-navy"></i></span>
|
||
<span class="flex-1 min-w-0">
|
||
<span class="flex items-center gap-2 text-sm font-bold text-slate-800">Departments & Staff</span>
|
||
<span class="text-xs text-slate-500">2 departments · 1 awaiting response</span>
|
||
</span>
|
||
<span class="inline-flex items-center gap-1 text-xs font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-md">1 pending</span>
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
|
||
</button>
|
||
|
||
<button onclick="openModal('mActivity')" class="w-full bg-white rounded-2xl border border-slate-200 p-4 flex items-center gap-4 hover:border-navy hover:shadow-sm transition text-left">
|
||
<span class="w-10 h-10 rounded-xl bg-blue-light flex items-center justify-center shrink-0"><i data-lucide="activity" class="w-5 h-5 text-navy"></i></span>
|
||
<span class="flex-1 min-w-0">
|
||
<span class="text-sm font-bold text-slate-800">Activity timeline</span>
|
||
<span class="text-xs text-slate-500 block">Last: ER response submitted · Nov 13</span>
|
||
</span>
|
||
<span class="inline-flex items-center gap-1 text-xs font-bold text-slate-500 bg-slate-100 px-2 py-1 rounded-md">5 events</span>
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
|
||
</button>
|
||
|
||
<button onclick="openModal('mAi')" class="w-full bg-white rounded-2xl border border-slate-200 p-4 flex items-center gap-4 hover:border-navy hover:shadow-sm transition text-left">
|
||
<span class="w-10 h-10 rounded-xl bg-blue-light flex items-center justify-center shrink-0"><i data-lucide="sparkles" class="w-5 h-5 text-navy"></i></span>
|
||
<span class="flex-1 min-w-0">
|
||
<span class="text-sm font-bold text-slate-800">AI analysis</span>
|
||
<span class="text-xs text-slate-500 block">Summary, sentiment & suggested actions</span>
|
||
</span>
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
|
||
</button>
|
||
|
||
<button onclick="openModal('mResolution')" class="w-full bg-white rounded-2xl border border-slate-200 p-4 flex items-center gap-4 hover:border-navy hover:shadow-sm transition text-left">
|
||
<span class="w-10 h-10 rounded-xl bg-blue-light flex items-center justify-center shrink-0"><i data-lucide="file-text" class="w-5 h-5 text-navy"></i></span>
|
||
<span class="flex-1 min-w-0">
|
||
<span class="text-sm font-bold text-slate-800">Resolution & PDF report</span>
|
||
<span class="text-xs text-slate-500 block">Add outcome · generate MOH report</span>
|
||
</span>
|
||
<i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
|
||
</button>
|
||
</section>
|
||
|
||
<!-- Secondary actions -->
|
||
<section class="grid grid-cols-3 gap-2.5">
|
||
<button onclick="openModal('mAssign')" class="bg-white border border-slate-200 rounded-xl py-3 flex flex-col items-center gap-1 hover:bg-slate-50 transition">
|
||
<i data-lucide="user-plus" class="w-5 h-5 text-slate-600"></i>
|
||
<span class="text-[11px] font-bold uppercase text-slate-600">Assign</span>
|
||
</button>
|
||
<button onclick="openModal('mEscalate')" class="bg-white border border-red-200 bg-red-50/40 rounded-xl py-3 flex flex-col items-center gap-1 hover:bg-red-50 transition">
|
||
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-500"></i>
|
||
<span class="text-[11px] font-bold uppercase text-red-600">Escalate</span>
|
||
</button>
|
||
<button onclick="openModal('mMore')" class="bg-white border border-slate-200 rounded-xl py-3 flex flex-col items-center gap-1 hover:bg-slate-50 transition">
|
||
<i data-lucide="more-horizontal" class="w-5 h-5 text-slate-600"></i>
|
||
<span class="text-[11px] font-bold uppercase text-slate-600">More</span>
|
||
</button>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- Sticky primary action -->
|
||
<div class="fixed bottom-0 inset-x-0 z-30">
|
||
<div class="max-w-2xl mx-auto px-4 sm:px-6 pb-4">
|
||
<button class="w-full bg-navy text-white font-bold text-base rounded-2xl py-4 flex items-center justify-center gap-2 shadow-lg shadow-navy/25 hover:bg-blue transition">
|
||
<i data-lucide="check-circle-2" class="w-5 h-5"></i> Resolve Case
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ MODALS ============ -->
|
||
|
||
<!-- Departments -->
|
||
<div id="mDepartments" class="modal fixed inset-0 z-50 bg-black/50 items-end sm:items-center justify-center p-0 sm:p-4" onclick="if(event.target===this)closeModal('mDepartments')">
|
||
<div class="modal-panel bg-white w-full sm:max-w-lg rounded-t-3xl sm:rounded-3xl max-h-[90vh] flex flex-col">
|
||
<div class="flex items-center justify-between p-5 border-b border-slate-100">
|
||
<h3 class="font-bold text-slate-800 flex items-center gap-2"><i data-lucide="building-2" class="w-5 h-5 text-navy"></i> Departments & Staff</h3>
|
||
<button onclick="closeModal('mDepartments')" class="p-1.5 rounded-lg hover:bg-slate-100 text-slate-400"><i data-lucide="x" class="w-5 h-5"></i></button>
|
||
</div>
|
||
<div class="p-5 overflow-y-auto space-y-3">
|
||
<div class="flex items-center justify-between p-4 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 mt-0.5">Response received · accepted · Dr. Khalid Ahmed</p>
|
||
</div>
|
||
<i data-lucide="check-circle-2" class="w-6 h-6 text-emerald-500"></i>
|
||
</div>
|
||
<div class="flex items-center justify-between p-4 rounded-xl bg-amber-50 border border-amber-200">
|
||
<div>
|
||
<p class="text-sm font-bold text-slate-800">Nursing Services</p>
|
||
<p class="text-xs text-amber-600 mt-0.5">Awaiting response · 14h left · Nurse Huda Ali</p>
|
||
</div>
|
||
<button class="text-xs font-bold text-navy border border-navy px-3 py-1.5 rounded-lg hover:bg-blue-light">Remind</button>
|
||
</div>
|
||
<button class="w-full mt-2 text-sm font-bold text-navy hover:underline flex items-center justify-center gap-1.5"><i data-lucide="plus" class="w-4 h-4"></i> Add department / staff</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Activity -->
|
||
<div id="mActivity" class="modal fixed inset-0 z-50 bg-black/50 items-end sm:items-center justify-center p-0 sm:p-4" onclick="if(event.target===this)closeModal('mActivity')">
|
||
<div class="modal-panel bg-white w-full sm:max-w-lg rounded-t-3xl sm:rounded-3xl max-h-[90vh] flex flex-col">
|
||
<div class="flex items-center justify-between p-5 border-b border-slate-100">
|
||
<h3 class="font-bold text-slate-800 flex items-center gap-2"><i data-lucide="activity" class="w-5 h-5 text-navy"></i> Activity timeline</h3>
|
||
<button onclick="closeModal('mActivity')" class="p-1.5 rounded-lg hover:bg-slate-100 text-slate-400"><i data-lucide="x" class="w-5 h-5"></i></button>
|
||
</div>
|
||
<div class="p-5 overflow-y-auto">
|
||
<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>
|
||
<li class="ml-5"><span class="absolute -left-[9px] w-4 h-4 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></li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI -->
|
||
<div id="mAi" class="modal fixed inset-0 z-50 bg-black/50 items-end sm:items-center justify-center p-0 sm:p-4" onclick="if(event.target===this)closeModal('mAi')">
|
||
<div class="modal-panel bg-white w-full sm:max-w-lg rounded-t-3xl sm:rounded-3xl max-h-[90vh] flex flex-col">
|
||
<div class="flex items-center justify-between p-5 border-b border-slate-100">
|
||
<h3 class="font-bold text-slate-800 flex items-center gap-2"><i data-lucide="sparkles" class="w-5 h-5 text-navy"></i> AI analysis</h3>
|
||
<button onclick="closeModal('mAi')" class="p-1.5 rounded-lg hover:bg-slate-100 text-slate-400"><i data-lucide="x" class="w-5 h-5"></i></button>
|
||
</div>
|
||
<div class="p-5 overflow-y-auto space-y-4">
|
||
<div class="flex items-center justify-between p-4 rounded-xl bg-gradient-to-br from-blue-light to-white border border-slate-200">
|
||
<div>
|
||
<p class="text-xs font-semibold text-slate-400 uppercase">Sentiment</p>
|
||
<p class="text-sm font-bold text-slate-800">Frustrated · High intensity</p>
|
||
</div>
|
||
<div class="flex gap-1 items-end h-8">
|
||
<span class="w-1.5 h-3 bg-navy/30 rounded-full"></span><span class="w-1.5 h-5 bg-navy/50 rounded-full"></span><span class="w-1.5 h-7 bg-navy/70 rounded-full"></span><span class="w-1.5 h-8 bg-navy rounded-full"></span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs font-semibold text-slate-400 uppercase mb-1.5">Summary</p>
|
||
<p class="text-sm text-slate-700 leading-relaxed">Communication breakdown during high-acuity ER triage. The doctor was unavailable and nursing staff didn't update the family for 45+ minutes. Recurrence risk: medium.</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-xs font-semibold text-slate-400 uppercase mb-1.5">Suggested actions</p>
|
||
<div class="space-y-2">
|
||
<div class="flex items-center gap-2 p-3 rounded-lg bg-slate-50 text-sm text-slate-700"><i data-lucide="check-square" class="w-4 h-4 text-navy shrink-0"></i> Refresh nursing handover protocol</div>
|
||
<div class="flex items-center gap-2 p-3 rounded-lg bg-slate-50 text-sm text-slate-700"><i data-lucide="check-square" class="w-4 h-4 text-navy shrink-0"></i> Deploy real-time patient-status board in ER</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Resolution -->
|
||
<div id="mResolution" class="modal fixed inset-0 z-50 bg-black/50 items-end sm:items-center justify-center p-0 sm:p-4" onclick="if(event.target===this)closeModal('mResolution')">
|
||
<div class="modal-panel bg-white w-full sm:max-w-lg rounded-t-3xl sm:rounded-3xl max-h-[90vh] flex flex-col">
|
||
<div class="flex items-center justify-between p-5 border-b border-slate-100">
|
||
<h3 class="font-bold text-slate-800 flex items-center gap-2"><i data-lucide="file-text" class="w-5 h-5 text-navy"></i> Resolution & PDF</h3>
|
||
<button onclick="closeModal('mResolution')" class="p-1.5 rounded-lg hover:bg-slate-100 text-slate-400"><i data-lucide="x" class="w-5 h-5"></i></button>
|
||
</div>
|
||
<div class="p-5 overflow-y-auto space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-semibold text-slate-700 mb-1.5">Resolution notes</label>
|
||
<textarea rows="4" class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none" placeholder="Describe what was done to resolve this case..."></textarea>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold text-slate-700 mb-1.5">Outcome</label>
|
||
<select class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none"><option>Resolved — process improved</option><option>Resolved — staff coached</option><option>Partially resolved</option></select>
|
||
</div>
|
||
<div class="flex items-center justify-between p-3 rounded-xl bg-slate-50">
|
||
<span class="text-sm text-slate-600 flex items-center gap-2"><i data-lucide="file-down" class="w-4 h-4 text-navy"></i> Generate MOH PDF report</span>
|
||
<button class="text-xs font-bold text-navy border border-navy px-3 py-1.5 rounded-lg hover:bg-blue-light">Generate</button>
|
||
</div>
|
||
</div>
|
||
<div class="p-5 border-t border-slate-100 flex gap-3">
|
||
<button onclick="closeModal('mResolution')" class="flex-1 px-4 py-3 border border-slate-200 rounded-xl font-semibold text-slate-600 hover:bg-slate-50">Cancel</button>
|
||
<button class="flex-1 px-4 py-3 bg-navy text-white rounded-xl font-bold hover:bg-blue flex items-center justify-center gap-2"><i data-lucide="save" class="w-4 h-4"></i> Save</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Assign -->
|
||
<div id="mAssign" class="modal fixed inset-0 z-50 bg-black/50 items-end sm:items-center justify-center p-0 sm:p-4" onclick="if(event.target===this)closeModal('mAssign')">
|
||
<div class="modal-panel bg-white w-full sm:max-w-md rounded-t-3xl sm:rounded-3xl">
|
||
<div class="flex items-center justify-between p-5 border-b border-slate-100">
|
||
<h3 class="font-bold text-slate-800 flex items-center gap-2"><i data-lucide="user-plus" class="w-5 h-5 text-navy"></i> Assign / Reassign</h3>
|
||
<button onclick="closeModal('mAssign')" class="p-1.5 rounded-lg hover:bg-slate-100 text-slate-400"><i data-lucide="x" class="w-5 h-5"></i></button>
|
||
</div>
|
||
<div class="p-5 space-y-2">
|
||
<div class="flex items-center gap-3 p-3 rounded-xl border-2 border-navy bg-blue-light"><span class="w-9 h-9 rounded-full bg-navy text-white text-xs font-bold flex items-center justify-center">SM</span><div><p class="text-sm font-bold text-slate-800">Dr. Sara Mansoor</p><p class="text-xs text-slate-500">Patient Experience · current</p></div><i data-lucide="check-circle-2" class="w-5 h-5 text-navy ml-auto"></i></div>
|
||
<div class="flex items-center gap-3 p-3 rounded-xl border border-slate-200 hover:bg-slate-50"><span class="w-9 h-9 rounded-full bg-slate-200 text-slate-600 text-xs font-bold flex items-center justify-center">KA</span><div><p class="text-sm font-bold text-slate-800">Dr. Khalid Ahmed</p><p class="text-xs text-slate-500">Emergency Medicine</p></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Escalate -->
|
||
<div id="mEscalate" class="modal fixed inset-0 z-50 bg-black/50 items-end sm:items-center justify-center p-0 sm:p-4" onclick="if(event.target===this)closeModal('mEscalate')">
|
||
<div class="modal-panel bg-white w-full sm:max-w-md rounded-t-3xl sm:rounded-3xl">
|
||
<div class="flex items-center justify-between p-5 border-b border-slate-100">
|
||
<h3 class="font-bold text-slate-800 flex items-center gap-2"><i data-lucide="alert-triangle" class="w-5 h-5 text-red-500"></i> Escalate case</h3>
|
||
<button onclick="closeModal('mEscalate')" class="p-1.5 rounded-lg hover:bg-slate-100 text-slate-400"><i data-lucide="x" class="w-5 h-5"></i></button>
|
||
</div>
|
||
<div class="p-5 space-y-4">
|
||
<div>
|
||
<label class="block text-sm font-semibold text-slate-700 mb-1.5">Escalate to</label>
|
||
<select class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none"><option>Dr. Omar (ER Head)</option><option>Huda Ali (Nursing Manager)</option><option>PX Management</option></select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-semibold text-slate-700 mb-1.5">Reason</label>
|
||
<textarea rows="3" class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none" placeholder="Why is this being escalated?"></textarea>
|
||
</div>
|
||
<button class="w-full px-4 py-3 bg-red-500 text-white rounded-xl font-bold hover:bg-red-600 flex items-center justify-center gap-2"><i data-lucide="send" class="w-4 h-4"></i> Send escalation</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- More -->
|
||
<div id="mMore" class="modal fixed inset-0 z-50 bg-black/50 items-end sm:items-center justify-center p-0 sm:p-4" onclick="if(event.target===this)closeModal('mMore')">
|
||
<div class="modal-panel bg-white w-full sm:max-w-sm rounded-t-3xl sm:rounded-3xl p-2">
|
||
<button class="w-full text-left px-4 py-3 rounded-xl hover:bg-slate-50 flex items-center gap-3 text-slate-700"><i data-lucide="phone" class="w-5 h-5 text-slate-500"></i> Update patient contact</button>
|
||
<button class="w-full text-left px-4 py-3 rounded-xl hover:bg-slate-50 flex items-center gap-3 text-slate-700"><i data-lucide="message-square-plus" class="w-5 h-5 text-slate-500"></i> Add note</button>
|
||
<button class="w-full text-left px-4 py-3 rounded-xl hover:bg-slate-50 flex items-center gap-3 text-slate-700"><i data-lucide="shield-alert" class="w-5 h-5 text-slate-500"></i> OVR escalate</button>
|
||
<button class="w-full text-left px-4 py-3 rounded-xl hover:bg-slate-50 flex items-center gap-3 text-slate-700"><i data-lucide="rotate-ccw" class="w-5 h-5 text-slate-500"></i> Reopen case</button>
|
||
<div class="my-1 border-t border-slate-100"></div>
|
||
<button class="w-full text-left px-4 py-3 rounded-xl hover:bg-red-50 flex items-center gap-3 text-red-600"><i data-lucide="trash-2" class="w-5 h-5"></i> Delete case</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
lucide.createIcons();
|
||
function openModal(id) {
|
||
var m = document.getElementById(id);
|
||
m.classList.add('open');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
function closeModal(id) {
|
||
document.getElementById(id).classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
}
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape') {
|
||
document.querySelectorAll('.modal.open').forEach(function (m) { m.classList.remove('open'); });
|
||
document.body.style.overflow = '';
|
||
}
|
||
});
|
||
(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>
|