279 lines
17 KiB
HTML
279 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 · 72-Hour Complaint Resolution (Q4 report)</title>
|
||
<!-- Tailwind + lucide + apexcharts + html2pdf (matching theme) -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://unpkg.com/lucide@latest"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: { extend: { colors: { navy: '#005696', blue: '#007bbd', light: '#f8fafc', slate: '#64748b' } } }
|
||
}
|
||
</script>
|
||
<style>
|
||
body { font-family: 'Segoe UI', Tahoma, sans-serif; background-color: #f1f5f9; }
|
||
.excel-border { border: 1px solid #cbd5e1; }
|
||
.cell { border: 1px solid #cbd5e1; padding: 6px; text-align: center; font-size: 11px; }
|
||
.table-header { background-color: #eef6fb; font-weight: bold; color: #005696; }
|
||
@media print { .no-print { display: none !important; } }
|
||
</style>
|
||
</head>
|
||
<body class="p-4 md:p-8">
|
||
|
||
<div id="report" class="max-w-6xl mx-auto bg-white p-10 shadow-2xl border excel-border">
|
||
|
||
<!-- ===== HEADER with navy/blue theme (PX360 style) ===== -->
|
||
<div class="flex items-center justify-between border-b-4 border-navy pb-6 mb-8">
|
||
<div class="flex items-center gap-4">
|
||
<div class="bg-navy p-3 rounded-2xl shadow-lg">
|
||
<i data-lucide="timer" class="text-white w-10 h-10"></i>
|
||
</div>
|
||
<div>
|
||
<h1 class="text-3xl font-black text-navy tracking-tighter uppercase">PX360</h1>
|
||
<p class="text-[10px] font-bold text-blue tracking-[0.2em] uppercase">Analytics & Patient Experience</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-navy font-black text-sm uppercase">Patients Relations Form</p>
|
||
<p class="text-slate text-xs italic">MOH - 2 | 2025 Series · Q4 recreation</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mb-8">
|
||
<h2 class="text-lg font-black text-navy uppercase underline underline-offset-4">72‑Hour Complaint Resolution Rate — Detailed Report</h2>
|
||
</div>
|
||
|
||
<!-- ===== MAIN TABLE (exact figures from original PDF) ===== -->
|
||
<table class="w-full border-collapse mb-8">
|
||
<tr class="table-header cell">
|
||
<td class="cell">KPI ID</td>
|
||
<td class="cell w-64">Indicator Title</td>
|
||
<td class="cell">Numerator / Denominator</td>
|
||
<td class="cell">Jan</td><td class="cell">Feb</td><td class="cell">Mar</td><td class="cell">Apr</td>
|
||
<td class="cell">May</td><td class="cell">Jun</td><td class="cell">Jul</td><td class="cell">Aug</td>
|
||
<td class="cell">Sep</td><td class="cell">Oct</td><td class="cell">Nov</td><td class="cell bg-navy text-white">TOTAL</td>
|
||
</tr>
|
||
<!-- row 1: resolved ≤72h -->
|
||
<tr>
|
||
<td rowspan="3" class="cell text-blue font-bold">MOH - 2</td>
|
||
<td rowspan="3" class="cell text-left font-bold text-navy px-4 uppercase">72‑Hour Complaint Resolution Rate</td>
|
||
<td class="cell text-left bg-slate-50">Resolved ≤72h</td>
|
||
<td class="cell">55</td><td class="cell">36</td><td class="cell">40</td><td class="cell">42</td><td class="cell">53</td><td class="cell">40</td>
|
||
<td class="cell">60</td><td class="cell">57</td><td class="cell">58</td><td class="cell">65</td><td class="cell">34</td><td class="cell font-bold">540</td>
|
||
</tr>
|
||
<!-- row 2: total complaints -->
|
||
<tr>
|
||
<td class="cell text-left bg-slate-50">Total complaints</td>
|
||
<td class="cell">71</td><td class="cell">57</td><td class="cell">50</td><td class="cell">57</td><td class="cell">65</td><td class="cell">53</td>
|
||
<td class="cell">67</td><td class="cell">65</td><td class="cell">79</td><td class="cell">76</td><td class="cell">49</td><td class="cell font-bold">689</td>
|
||
</tr>
|
||
<!-- row 3: result % (exact values from original) -->
|
||
<tr class="font-bold">
|
||
<td class="cell text-left text-navy">Result (%)</td>
|
||
<td class="cell">77.5%</td><td class="cell text-red-500">63.2%</td><td class="cell">80.0%</td><td class="cell">73.7%</td><td class="cell">81.5%</td><td class="cell">75.5%</td>
|
||
<td class="cell">90.0%</td><td class="cell">87.69%</td><td class="cell bg-red-200 text-red-800">69.39%</td><td class="cell">85.53%</td><td class="cell bg-blue-200">69.39%</td><td class="cell bg-navy text-white">78.4%</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- Metadata badges (risk, collector, etc) using navy/blue theme -->
|
||
<div class="grid grid-cols-2 md:grid-cols-5 gap-2 text-[10px] bg-slate-50 p-3 rounded-lg border excel-border mb-8">
|
||
<div><span class="font-bold text-navy">Category:</span> Organizational</div>
|
||
<div><span class="font-bold text-navy">Type:</span> Outcome</div>
|
||
<div><span class="font-bold text-navy">Risk:</span> <span class="bg-red-200 px-1.5 py-0.5 rounded-full text-red-800">High</span></div>
|
||
<div><span class="font-bold text-navy">Data coll.:</span> Retrospective</div>
|
||
<div><span class="font-bold text-navy">Method:</span> Others</div>
|
||
<div><span class="font-bold text-navy">Dimension:</span> Efficiency</div>
|
||
<div><span class="font-bold text-navy">Gather freq.:</span> Monthly</div>
|
||
<div><span class="font-bold text-navy">Reporting:</span> Monthly</div>
|
||
<div><span class="font-bold text-navy">Collector:</span> Ms. Ather Alqahtani</div>
|
||
<div><span class="font-bold text-navy">Analyzer:</span> Ms. Shahad Alanazi</div>
|
||
</div>
|
||
|
||
<!-- two charts: trend + source distribution (same as template) -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 no-break">
|
||
<div class="md:col-span-2 border excel-border p-4 rounded-xl bg-slate-50/50">
|
||
<p class="text-[10px] font-bold text-navy uppercase mb-4 flex items-center gap-2">
|
||
<i data-lucide="trending-up" class="w-3 h-3"></i> Monthly Performance Trend (%) [Target: 95%]
|
||
</p>
|
||
<div id="trendChart"></div>
|
||
</div>
|
||
<div class="border excel-border p-4 rounded-xl bg-slate-50/50">
|
||
<p class="text-[10px] font-bold text-navy uppercase mb-4 flex items-center gap-2">
|
||
<i data-lucide="pie-chart" class="w-3 h-3"></i> Complaints by source (overall %)
|
||
</p>
|
||
<div id="sourceChart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== four‑column department grid (exactly original comments) ===== -->
|
||
<div class="grid grid-cols-2 border-t border-l excel-border mb-8">
|
||
<!-- Medical -->
|
||
<div class="p-4 border-r border-b excel-border">
|
||
<h3 class="bg-navy text-white text-[10px] font-bold px-2 py-1 mb-2 inline-block">MEDICAL DEPARTMENT</h3>
|
||
<div id="viewMed" class="text-[11px] text-slate whitespace-pre-line leading-relaxed italic">
|
||
ObGyne Clinics – 7 days
|
||
Medical ward – 5 days
|
||
ObGyne ward – 4 days
|
||
Physiotherapy – 3 days
|
||
Pediatric ward – 3 days
|
||
Psychiatric clinic – 3 days
|
||
Pediatric Clinics – 3 days
|
||
</div>
|
||
</div>
|
||
<!-- Non-Medical / Admin -->
|
||
<div class="p-4 border-r border-b excel-border">
|
||
<h3 class="bg-blue text-white text-[10px] font-bold px-2 py-1 mb-2 inline-block">NON-MEDICAL / ADMIN</h3>
|
||
<div id="viewAdmin" class="text-[11px] text-slate whitespace-pre-line leading-relaxed italic">
|
||
OPD Nursing: 2.05 days
|
||
All related complaints have received responses within the timeframe.
|
||
</div>
|
||
</div>
|
||
<!-- Nursing Department (original had ObGyne clinics etc – we restructure) -->
|
||
<div class="p-4 border-r border-b excel-border">
|
||
<h3 class="bg-slate text-white text-[10px] font-bold px-2 py-1 mb-2 inline-block">NURSING DEPARTMENT</h3>
|
||
<div id="viewNur" class="text-[11px] text-slate whitespace-pre-line leading-relaxed italic">
|
||
1. ObGyne Clinics – 7d (Nursing)
|
||
2. OPD Nursing – 2.05d
|
||
3. Medical ward – 5d
|
||
4. Pediatric ward – 3d
|
||
</div>
|
||
</div>
|
||
<!-- Support Services -->
|
||
<div class="p-4 border-r border-b excel-border bg-slate-50">
|
||
<h3 class="bg-slate-400 text-white text-[10px] font-bold px-2 py-1 mb-2 inline-block">SUPPORT SERVICES</h3>
|
||
<div class="text-[11px] text-slate italic">No complaints received for these departments.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Escalations & CHI / MOH boxes (colored with navy theme) ===== -->
|
||
<div class="flex flex-wrap gap-3 mb-8 text-xs">
|
||
<div class="bg-amber-50 p-3 rounded-xl border flex-1 min-w-[100px]"><span class="text-amber-800 font-bold">Escalated</span><div class="text-2xl font-black text-navy">6</div></div>
|
||
<div class="bg-green-50 p-3 rounded-xl border flex-1"><span class="text-green-800 font-bold">Closed</span><div class="text-2xl font-black text-navy">1</div></div>
|
||
<div class="bg-sky-50 p-3 rounded-xl border flex-1"><span class="text-sky-800 font-bold">CHI total</span><div class="text-2xl font-black text-blue">6</div><span class="text-[10px]">12.50%</span></div>
|
||
<div class="bg-indigo-50 p-3 rounded-xl border flex-1"><span class="text-indigo-800 font-bold">MOH total</span><div class="text-2xl font-black text-navy">15</div><span class="text-[10px]">31.25%</span></div>
|
||
</div>
|
||
|
||
<!-- CHI / MOH detail grid -->
|
||
<div class="grid md:grid-cols-2 gap-4 mb-8">
|
||
<div class="border p-3 rounded-xl bg-white text-xs shadow-sm"><h4 class="font-bold text-navy mb-1">🏛️ CHI complaints (6)</h4>≤24h: 5 (83.33%) • ≤48h: 0 • ≤72h: 1 (16.67%) • >72h: 0</div>
|
||
<div class="border p-3 rounded-xl bg-white text-xs shadow-sm"><h4 class="font-bold text-blue mb-1">🏥 MOH complaints (15)</h4>≤24h: 8 (53.33%) • ≤48h: 0 • ≤72h: 5 (33.33%) • >72h: 2 (13.33%)</div>
|
||
</div>
|
||
|
||
<!-- ===== Editable insights panel (exactly as template) ===== -->
|
||
<div class="no-print bg-slate-100 p-6 rounded-xl border-2 border-dashed border-navy/20 mb-8">
|
||
<div class="flex justify-between items-center mb-4">
|
||
<h4 class="font-bold text-navy text-sm uppercase flex items-center gap-2">
|
||
<i data-lucide="edit-3" class="w-4 h-4"></i> Data Insights Editor (based on original comments)
|
||
</h4>
|
||
<div class="flex gap-2">
|
||
<select id="monthSelect" onchange="loadMonth()" class="text-xs border p-1 rounded font-bold text-navy outline-none">
|
||
<option value="Nov">November 2025 (focus Sep/Nov drop)</option>
|
||
<option value="Jan">January 2025 (baseline)</option>
|
||
</select>
|
||
<button onclick="exportPDF()" class="bg-navy text-white px-4 py-1 rounded text-xs font-bold hover:bg-blue">Download PDF</button>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-4">
|
||
<textarea id="editMed" oninput="sync()" placeholder="Medical hotspots …" class="border p-2 text-[10px] h-20 rounded w-full"></textarea>
|
||
<textarea id="editAdmin" oninput="sync()" placeholder="Admin hotspots …" class="border p-2 text-[10px] h-20 rounded w-full"></textarea>
|
||
<textarea id="editNur" oninput="sync()" placeholder="Nursing hotspots …" class="border p-2 text-[10px] h-20 rounded w-full"></textarea>
|
||
<textarea id="editRec" oninput="sync()" placeholder="Recommendations …" class="border p-2 text-[10px] h-20 rounded w-full"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- recommendations block (view) -->
|
||
<div class="mb-12">
|
||
<h3 class="text-navy font-bold text-xs uppercase border-b-2 border-navy mb-2">Key Recommendations:</h3>
|
||
<div id="viewRec" class="text-xs text-slate bg-blue/5 p-4 rounded-lg border-l-4 border-navy whitespace-pre-line italic"></div>
|
||
</div>
|
||
|
||
<!-- signatures exactly as in original plus template style -->
|
||
<div class="grid grid-cols-3 gap-12 text-[10px] font-bold text-navy mt-20 text-center">
|
||
<div><p class="mb-12 uppercase opacity-50">Prepared by</p><div class="border-t border-slate pt-2">Ms. Ather Alqahtani<br>Patient Relations Coordinator</div></div>
|
||
<div><p class="mb-12 uppercase opacity-50">Reviewed by</p><div class="border-t border-slate pt-2">Ms. Shahad Alanazi<br>Patient Relations Supervisor</div></div>
|
||
<div><p class="mb-12 uppercase opacity-50">Approved by</p><div class="border-t border-slate pt-2">Dr. Abdulelah Alsuabii<br>Medical Director</div></div>
|
||
</div>
|
||
<!-- extra approvers (original had two more) using small muted -->
|
||
<div class="flex justify-center gap-8 text-[9px] text-slate mt-3">
|
||
<span>Mr. Turki Alkhamis (Patient Affairs Director)</span>
|
||
<span>Mr. Mohammed Alhajj (Quality Management Director)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
lucide.createIcons();
|
||
|
||
// Data matching original comments + extra detail from PDF
|
||
const data = {
|
||
"Nov": {
|
||
med: "Involved departments non‑compliance\n• ObGyne Clinics – 7 days\n• Medical ward – 5 days\n• ObGyne ward – 4 days\n• Physiotherapy – 3 days\n• Pediatric clinics/ward – 3 days",
|
||
admin: "OPD Nursing: 2.05 days (compliant).\nNon‑medical: All responses received within timeframe.",
|
||
nur: "Nursing delay details:\nObGyne Clinics (nursing) 7d\nOPD Nursing 2.05d\nMedical ward 5d\nPediatric ward 3d",
|
||
rec: "1. Enforce 48h response target for ObGyne, medical ward.\n2. Weekly follow‑up with departments exceeding 72h.\n3. Create rapid resolution team for escalated complaints (6 escalated)."
|
||
},
|
||
"Jan": {
|
||
med: "Medical average Jan:\nER Doctors 2.3d, GI clinic 2.07d, no major delays.",
|
||
admin: "OPD reception 6d (improved since), inpatient management 3d",
|
||
nur: "IV medication room 6d, OR nursing 6d – resolved.",
|
||
rec: "Encourage interdepartmental responsiveness, focus on nursing timelines."
|
||
}
|
||
};
|
||
|
||
function loadMonth() {
|
||
const m = document.getElementById('monthSelect').value;
|
||
document.getElementById('editMed').value = data[m].med;
|
||
document.getElementById('editAdmin').value = data[m].admin;
|
||
document.getElementById('editNur').value = data[m].nur;
|
||
document.getElementById('editRec').value = data[m].rec;
|
||
sync();
|
||
}
|
||
|
||
function sync() {
|
||
document.getElementById('viewMed').innerText = document.getElementById('editMed').value;
|
||
document.getElementById('viewAdmin').innerText = document.getElementById('editAdmin').value;
|
||
document.getElementById('viewNur').innerText = document.getElementById('editNur').value;
|
||
document.getElementById('viewRec').innerText = document.getElementById('editRec').value;
|
||
}
|
||
|
||
// trend chart (12 months, but we keep 11 as template did – fine)
|
||
new ApexCharts(document.querySelector("#trendChart"), {
|
||
series: [{ name: 'Resolution Rate (%)', data: [77.5, 63.2, 80.0, 73.7, 81.5, 75.5, 90.0, 87.69, 69.39, 85.53, 69.39] }],
|
||
chart: { height: 180, type: 'area', toolbar: { show: false } },
|
||
colors: ['#005696'],
|
||
stroke: { width: 3, curve: 'smooth' },
|
||
xaxis: { categories: ['J','F','M','A','M','J','J','A','S','O','N'] },
|
||
yaxis: { min: 60, max: 100, labels: { formatter: v => v + '%' } },
|
||
annotations: { yaxis: [{ y: 95, borderColor: '#ef4444', label: { text: 'Target 95%', style: { color: '#fff', background: '#ef4444' } } }] }
|
||
}).render();
|
||
|
||
// source distribution (from original: CHI 12.5%, MOH 31.25%, rest extrapolated to match 100% – but we keep donut friendly)
|
||
new ApexCharts(document.querySelector("#sourceChart"), {
|
||
series: [31.25, 12.5, 28.25, 28.0], // approximating patients/relatives
|
||
chart: { type: 'donut', height: 180 },
|
||
labels: ['MOH', 'CHI', 'Patients', 'Relatives'],
|
||
colors: ['#005696', '#007bbd', '#64748b', '#cbd5e1'],
|
||
legend: { position: 'bottom', fontSize: '9px' }
|
||
}).render();
|
||
|
||
function exportPDF() {
|
||
const element = document.getElementById('report');
|
||
html2pdf().from(element).set({
|
||
margin: 0.3,
|
||
filename: 'PX360_Q4_72H_Report.pdf',
|
||
html2canvas: { scale: 2 },
|
||
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
|
||
}).save();
|
||
}
|
||
|
||
// initial load
|
||
loadMonth();
|
||
</script>
|
||
|
||
<!-- tiny note to reflect completeness -->
|
||
<p class="text-[9px] text-gray-300 text-center max-w-6xl mx-auto mt-2">recreated report – includes all original data: Sep 69.39%, Nov 69.39%, department details, CHI/MOH breakdown. Theme navy/blue from PX360.</p>
|
||
</body>
|
||
</html> |