235 lines
17 KiB
HTML
235 lines
17 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 Management System</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>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
|
|
.sidebar-active { background-color: #ffffff20; border-left: 4px solid #fff; }
|
|
.status-resolved { background-color: #dcfce7; color: #166534; }
|
|
.status-pending { background-color: #fef9c3; color: #854d0e; }
|
|
.status-investigation { background-color: #e0f2fe; color: #075985; }
|
|
.status-escalated { background-color: #fee2e2; color: #991b1b; }
|
|
</style>
|
|
</head>
|
|
<body class="flex h-screen overflow-hidden">
|
|
|
|
<aside class="w-64 bg-navy text-white flex flex-col shadow-2xl z-20">
|
|
<div class="p-6 flex items-center gap-3 border-b border-white/10">
|
|
<div class="bg-white p-2 rounded-xl"><i data-lucide="activity" class="text-navy w-6 h-6"></i></div>
|
|
<div>
|
|
<h1 class="text-xl font-black tracking-tighter">PX360</h1>
|
|
<p class="text-[8px] font-bold text-blue-200 tracking-widest uppercase">Analytics Platform</p>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="flex-1 px-4 py-6 space-y-2">
|
|
<div class="sidebar-item flex items-center gap-3 p-3 rounded-lg opacity-70 hover:opacity-100 cursor-pointer transition">
|
|
<i data-lucide="layout-dashboard" class="w-5 h-5"></i>
|
|
<span class="text-sm font-semibold">Dashboard</span>
|
|
</div>
|
|
<div class="sidebar-active flex items-center gap-3 p-3 rounded-lg cursor-pointer transition">
|
|
<i data-lucide="file-text" class="w-5 h-5"></i>
|
|
<span class="text-sm font-semibold">Complaints List</span>
|
|
</div>
|
|
<div class="sidebar-item flex items-center gap-3 p-3 rounded-lg opacity-70 hover:opacity-100 cursor-pointer transition">
|
|
<i data-lucide="bar-chart-3" class="w-5 h-5"></i>
|
|
<span class="text-sm font-semibold">KPI Reports</span>
|
|
</div>
|
|
<div class="sidebar-item flex items-center gap-3 p-3 rounded-lg opacity-70 hover:opacity-100 cursor-pointer transition">
|
|
<i data-lucide="users" class="w-5 h-5"></i>
|
|
<span class="text-sm font-semibold">Staff Directory</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="p-4 border-t border-white/10">
|
|
<div class="flex items-center gap-3 p-2">
|
|
<div class="w-8 h-8 rounded-full bg-blue border-2 border-white/20 flex items-center justify-center font-bold text-xs">AA</div>
|
|
<div class="flex-1 overflow-hidden">
|
|
<p class="text-xs font-bold truncate">Atheer Alqahtani</p>
|
|
<p class="text-[10px] text-white/50 truncate">Coordinator</p>
|
|
</div>
|
|
<i data-lucide="log-out" class="w-4 h-4 text-white/40 cursor-pointer"></i>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden">
|
|
|
|
<header class="h-20 bg-white border-b px-8 flex items-center justify-between shadow-sm z-10">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-navy">Complaints Registry</h2>
|
|
<p class="text-xs text-slate font-medium">Manage and monitor patient feedback in real-time</p>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative group">
|
|
<i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate group-focus-within:text-navy"></i>
|
|
<input type="text" placeholder="Search ID, Name or Dept..." class="pl-10 pr-4 py-2 bg-slate-100 border-transparent border focus:border-blue/30 focus:bg-white rounded-xl text-sm outline-none w-64 transition-all">
|
|
</div>
|
|
<button class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
|
|
<i data-lucide="plus" class="w-4 h-4"></i> New Case
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-4 gap-6 px-8 py-6 bg-slate-50/50 border-b">
|
|
<div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
|
|
<div class="p-3 bg-blue/10 rounded-xl"><i data-lucide="layers" class="text-blue w-5 h-5"></i></div>
|
|
<div><p class="text-[10px] font-bold text-slate uppercase tracking-wider">Total Received</p><p class="text-xl font-black text-navy leading-tight">689</p></div>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
|
|
<div class="p-3 bg-green-50 rounded-xl"><i data-lucide="check-circle" class="text-green-600 w-5 h-5"></i></div>
|
|
<div><p class="text-[10px] font-bold text-slate uppercase tracking-wider">Resolved</p><p class="text-xl font-black text-navy leading-tight">678 <span class="text-xs text-green-600">(98.4%)</span></p></div>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
|
|
<div class="p-3 bg-yellow-50 rounded-xl"><i data-lucide="clock" class="text-yellow-600 w-5 h-5"></i></div>
|
|
<div><p class="text-[10px] font-bold text-slate uppercase tracking-wider">Pending</p><p class="text-xl font-black text-navy leading-tight">11</p></div>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-2xl border shadow-sm flex items-center gap-4">
|
|
<div class="p-3 bg-red-50 rounded-xl"><i data-lucide="alert-triangle" class="text-red-500 w-5 h-5"></i></div>
|
|
<div><p class="text-[10px] font-bold text-slate uppercase tracking-wider">TAT Alert</p><p class="text-xl font-black text-navy leading-tight">3 <span class="text-[10px] font-normal text-slate">Over 72h</span></p></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-8 py-4 bg-white flex items-center justify-between border-b">
|
|
<div class="flex items-center gap-3">
|
|
<button class="px-4 py-1.5 rounded-full bg-navy text-white text-xs font-bold">All Cases</button>
|
|
<button class="px-4 py-1.5 rounded-full border text-slate text-xs font-semibold hover:bg-slate-50">Pending</button>
|
|
<button class="px-4 py-1.5 rounded-full border text-slate text-xs font-semibold hover:bg-slate-50">Escalated</button>
|
|
<button class="px-4 py-1.5 rounded-full border text-slate text-xs font-semibold hover:bg-slate-50">Resolved</button>
|
|
<div class="h-4 w-[1px] bg-slate-200 mx-2"></div>
|
|
<button class="flex items-center gap-2 text-xs font-bold text-blue uppercase tracking-tight"><i data-lucide="filter" class="w-3 h-3"></i> Advanced Filters</button>
|
|
</div>
|
|
<p class="text-[10px] font-bold text-slate uppercase">Showing: <span class="text-navy">1-10 of 689</span></p>
|
|
</div>
|
|
|
|
<main class="flex-1 overflow-y-auto p-8">
|
|
<div class="bg-white rounded-2xl shadow-sm border overflow-hidden">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="bg-slate-50 border-b uppercase text-[10px] font-bold text-slate tracking-wider">
|
|
<tr>
|
|
<th class="px-6 py-4">Complaint ID</th>
|
|
<th class="px-6 py-4">Patient Name</th>
|
|
<th class="px-6 py-4">Source</th>
|
|
<th class="px-6 py-4">Department</th>
|
|
<th class="px-6 py-4">Status</th>
|
|
<th class="px-6 py-4 text-center">Priority</th>
|
|
<th class="px-6 py-4 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm divide-y divide-slate-100">
|
|
<tr class="hover:bg-light/30 transition-colors cursor-pointer group">
|
|
<td class="px-6 py-4 font-bold text-navy">#8842</td>
|
|
<td class="px-6 py-4">
|
|
<div class="font-semibold text-slate-800">Mohammad Al-Otaibi</div>
|
|
<div class="text-[10px] text-slate font-medium">Patient Ref: PX-9921</div>
|
|
</td>
|
|
<td class="px-6 py-4"><span class="bg-slate-100 px-2 py-0.5 rounded text-[10px] font-bold text-slate-600">MOH TAWASUL</span></td>
|
|
<td class="px-6 py-4 text-slate-600">Emergency Room (ER)</td>
|
|
<td class="px-6 py-4">
|
|
<span class="status-investigation px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">Investigating</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex justify-center"><span class="w-2 h-2 rounded-full bg-orange-500 shadow-sm shadow-orange-200"></span></div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 text-navy hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="eye" class="w-4 h-4"></i></button>
|
|
<button class="p-1.5 text-blue hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="user-plus" class="w-4 h-4"></i></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-light/30 transition-colors cursor-pointer group">
|
|
<td class="px-6 py-4 font-bold text-navy">#8841</td>
|
|
<td class="px-6 py-4">
|
|
<div class="font-semibold text-slate-800">Sarah Johnson</div>
|
|
<div class="text-[10px] text-slate font-medium">Relative (Daughter)</div>
|
|
</td>
|
|
<td class="px-6 py-4"><span class="bg-blue/5 px-2 py-0.5 rounded text-[10px] font-bold text-blue">CHI</span></td>
|
|
<td class="px-6 py-4 text-slate-600">Billing & Approvals</td>
|
|
<td class="px-6 py-4">
|
|
<span class="status-resolved px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">Resolved</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex justify-center"><span class="w-2 h-2 rounded-full bg-green-500"></span></div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 text-navy hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="eye" class="w-4 h-4"></i></button>
|
|
<button class="p-1.5 text-blue hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="user-plus" class="w-4 h-4"></i></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-light/30 transition-colors cursor-pointer group">
|
|
<td class="px-6 py-4 font-bold text-navy">#8839</td>
|
|
<td class="px-6 py-4">
|
|
<div class="font-semibold text-slate-800">Abdullah Al-Dosari</div>
|
|
<div class="text-[10px] text-slate font-medium">Patient Ref: PX-4412</div>
|
|
</td>
|
|
<td class="px-6 py-4"><span class="bg-slate-100 px-2 py-0.5 rounded text-[10px] font-bold text-slate-600">HOSPITAL APP</span></td>
|
|
<td class="px-6 py-4 text-slate-600">Internal Medicine</td>
|
|
<td class="px-6 py-4">
|
|
<span class="status-pending px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">New</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex justify-center"><span class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span></div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 text-navy hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="eye" class="w-4 h-4"></i></button>
|
|
<button class="p-1.5 text-blue hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="user-plus" class="w-4 h-4"></i></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-light/30 transition-colors cursor-pointer group">
|
|
<td class="px-6 py-4 font-bold text-navy">#8835</td>
|
|
<td class="px-6 py-4">
|
|
<div class="font-semibold text-slate-800">Mariam Shahad</div>
|
|
<div class="text-[10px] text-slate font-medium">Patient Ref: PX-2201</div>
|
|
</td>
|
|
<td class="px-6 py-4"><span class="bg-slate-100 px-2 py-0.5 rounded text-[10px] font-bold text-slate-600">WALK-IN</span></td>
|
|
<td class="px-6 py-4 text-slate-600">OPD Reception</td>
|
|
<td class="px-6 py-4">
|
|
<span class="status-escalated px-2.5 py-1 rounded-full text-[10px] font-bold uppercase">Escalated</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex justify-center"><span class="w-2 h-2 rounded-full bg-red-500"></span></div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 text-navy hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="eye" class="w-4 h-4"></i></button>
|
|
<button class="p-1.5 text-blue hover:bg-white rounded border border-transparent hover:border-slate-200"><i data-lucide="user-plus" class="w-4 h-4"></i></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="bg-slate-50 px-8 py-4 flex items-center justify-between border-t">
|
|
<span class="text-xs text-slate font-medium">Showing <span class="font-bold text-navy">10</span> of <span class="font-bold text-navy">689</span> entries</span>
|
|
<div class="flex gap-2">
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 transition"><i data-lucide="chevron-left" class="w-4 h-4 text-slate"></i></button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-navy text-white text-xs font-bold">1</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 text-xs font-bold text-slate transition">2</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 text-xs font-bold text-slate transition">3</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg border bg-white hover:bg-slate-50 transition"><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html> |