174 lines
10 KiB
HTML
174 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PX360 - Complaint Case #8842</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: { extend: { colors: { navy: '#005696', blue: '#007bbd', light: '#eef6fb', slate: '#64748b' } } }
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
|
|
.tab-active { border-bottom: 3px solid #005696; color: #005696; font-weight: 700; }
|
|
.sidebar-item:hover { background-color: #eef6fb; color: #005696; }
|
|
</style>
|
|
</head>
|
|
<body class="flex h-screen overflow-hidden">
|
|
|
|
<aside class="w-20 bg-navy flex flex-col items-center py-6 gap-8 shadow-xl z-20">
|
|
<div class="bg-white p-2 rounded-xl"><i data-lucide="activity" class="text-navy w-6 h-6"></i></div>
|
|
<nav class="flex flex-col gap-6 text-white/60">
|
|
<i data-lucide="layout-dashboard" class="w-6 h-6 cursor-pointer hover:text-white"></i>
|
|
<i data-lucide="file-text" class="w-6 h-6 cursor-pointer text-white"></i>
|
|
<i data-lucide="users" class="w-6 h-6 cursor-pointer hover:text-white"></i>
|
|
<i data-lucide="settings" class="w-6 h-6 cursor-pointer hover:text-white"></i>
|
|
</nav>
|
|
</aside>
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
|
|
|
<header class="h-16 bg-white border-b px-8 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-slate font-medium">Cases</span>
|
|
<i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i>
|
|
<h1 class="text-navy font-bold">Complaint ID: #2025-NOV-8842</h1>
|
|
<span class="bg-yellow-100 text-yellow-700 text-[10px] font-bold px-2 py-0.5 rounded-full uppercase tracking-wider">Under Investigation</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button onclick="window.print()" class="text-slate hover:text-navy px-3 py-1 text-sm font-semibold flex items-center gap-2 border rounded-lg">
|
|
<i data-lucide="printer" class="w-4 h-4"></i> PDF View
|
|
</button>
|
|
<button class="bg-navy text-white px-4 py-2 rounded-lg text-sm font-bold shadow-md hover:bg-blue transition">
|
|
Resolve Case
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="bg-white px-8 flex gap-8 border-b shadow-sm z-10">
|
|
<button class="py-4 text-sm tab-active">Details</button>
|
|
<button class="py-4 text-sm text-slate font-medium">Timeline (5)</button>
|
|
<button class="py-4 text-sm text-slate font-medium">Departments (0)</button>
|
|
<button class="py-4 text-sm text-slate font-medium">Staff (0)</button>
|
|
<button class="py-4 text-sm text-slate font-medium">Attachments (0)</button>
|
|
<button class="py-4 text-sm text-slate font-medium">PX Actions (0)</button>
|
|
<button class="py-4 text-sm text-blue font-bold flex items-center gap-2">
|
|
<i data-lucide="sparkles" class="w-4 h-4"></i> AI Analysis
|
|
</button>
|
|
</nav>
|
|
|
|
<main class="flex-1 overflow-y-auto p-8 grid grid-cols-12 gap-8">
|
|
|
|
<div class="col-span-8 space-y-8">
|
|
|
|
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h3 class="font-bold text-navy flex items-center gap-2"><i data-lucide="file-warning" class="w-5 h-5 text-blue"></i> Complaint Details</h3>
|
|
<span class="text-[10px] text-slate font-bold uppercase tracking-widest">Source: MOH TAWASUL</span>
|
|
</div>
|
|
<div class="bg-light/40 p-4 rounded-xl mb-6 border-l-4 border-blue">
|
|
<p class="text-sm leading-relaxed text-slate italic">
|
|
"The patient's relative complained about the delay in the ER admission process. They mentioned that the doctor was busy and the nursing staff did not provide updates for over 45 minutes."
|
|
</p>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-6">
|
|
<div class="space-y-1">
|
|
<p class="text-[10px] font-bold text-slate uppercase">Location</p>
|
|
<p class="text-sm font-bold text-navy">Emergency Room (ER)</p>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<p class="text-[10px] font-bold text-slate uppercase">Severity</p>
|
|
<p class="text-sm font-bold text-red-500">Medium Priority</p>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<p class="text-[10px] font-bold text-slate uppercase">Response Deadline</p>
|
|
<p class="text-sm font-bold text-navy">14 Nov 2025, 08:00 AM</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="flex border-b bg-slate-50/50">
|
|
<button class="px-6 py-4 text-sm font-bold text-navy border-b-2 border-navy bg-white">Explanation</button>
|
|
<button class="px-6 py-4 text-sm font-medium text-slate">Resolution Plan</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="space-y-4">
|
|
<h4 class="text-xs font-bold text-navy uppercase">Administrative Explanation</h4>
|
|
<textarea rows="4" class="w-full border rounded-xl p-4 text-sm focus:ring-2 focus:ring-blue/20 outline-none" placeholder="Enter formal explanation for investigation..."></textarea>
|
|
<div class="flex justify-end gap-2">
|
|
<button class="text-xs font-bold text-blue hover:underline">Clear</button>
|
|
<button class="bg-blue text-white px-4 py-2 rounded-lg text-xs font-bold">Save Note</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="col-span-4 space-y-8">
|
|
|
|
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<h3 class="font-bold text-navy mb-4 text-sm">Quick Actions</h3>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<button class="p-3 border rounded-xl hover:bg-light flex flex-col items-center gap-2 group">
|
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-slate group-hover:text-green-600"></i>
|
|
<span class="text-[10px] font-bold uppercase">Resolve</span>
|
|
</button>
|
|
<button class="p-3 border rounded-xl hover:bg-light flex flex-col items-center gap-2 group">
|
|
<i data-lucide="user-plus" class="w-5 h-5 text-slate group-hover:text-blue"></i>
|
|
<span class="text-[10px] font-bold uppercase">Assign</span>
|
|
</button>
|
|
<button class="p-3 border rounded-xl hover:bg-light flex flex-col items-center gap-2 group">
|
|
<i data-lucide="clock" class="w-5 h-5 text-slate group-hover:text-orange-500"></i>
|
|
<span class="text-[10px] font-bold uppercase">Follow Up</span>
|
|
</button>
|
|
<button class="p-3 border-red-100 bg-red-50 rounded-xl hover:bg-red-100 flex flex-col items-center gap-2 group">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-500"></i>
|
|
<span class="text-[10px] font-bold text-red-600 uppercase">Escalate</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<h3 class="font-bold text-navy mb-4 text-sm">Staff Assignment (0)</h3>
|
|
<div class="bg-light/30 border-2 border-dashed border-slate-200 rounded-2xl p-6 text-center">
|
|
<div class="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i data-lucide="user" class="text-slate-400 w-6 h-6"></i>
|
|
</div>
|
|
<p class="text-[11px] text-slate font-medium mb-3 tracking-tight">No staff or responders assigned to this case yet.</p>
|
|
<button class="bg-white border text-blue text-[11px] font-bold px-4 py-2 rounded-lg hover:shadow-sm">Select Staff</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-navy rounded-2xl p-6 shadow-lg text-white">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<i data-lucide="info" class="w-5 h-5 text-blue"></i>
|
|
<h3 class="font-bold text-sm">Assignment Info</h3>
|
|
</div>
|
|
<ul class="space-y-3 text-[11px] opacity-90">
|
|
<li class="flex justify-between border-b border-white/10 pb-2">
|
|
<span>Main Dept:</span>
|
|
<span class="font-bold">Medical / ER</span>
|
|
</li>
|
|
<li class="flex justify-between border-b border-white/10 pb-2">
|
|
<span>TAT Goal:</span>
|
|
<span class="font-bold">72 Hours</span>
|
|
</li>
|
|
<li class="flex justify-between">
|
|
<span>Escalation:</span>
|
|
<span class="font-bold uppercase text-blue">Level 1</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html> |