294 lines
18 KiB
HTML
294 lines
18 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 · Dep-KPI-4 – Department Response Rate (48h)</title>
|
||
<!-- Tailwind + lucide + apexcharts + html2pdf (consistent 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 navy/blue (PX360 identity) ===== -->
|
||
<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="clock" 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">Department Response Rate · 48h KPI</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-navy font-black text-sm uppercase">Dep - KPI - 4</p>
|
||
<p class="text-slate text-xs italic">Target 80% · Threshold 70%</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mb-8">
|
||
<h2 class="text-lg font-black text-navy uppercase underline underline-offset-4">Department Response Rate to Complaints Within 48 Hours – 2025</h2>
|
||
</div>
|
||
|
||
<!-- ===== MAIN TABLE – exact figures from KPI-4 PDF ===== -->
|
||
<table class="w-full border-collapse mb-8">
|
||
<tr class="table-header cell">
|
||
<td class="cell">No.</td>
|
||
<td class="cell">Perf. Indicator ID</td>
|
||
<td class="cell w-64">Indicator Title</td>
|
||
<td class="cell">Target</td>
|
||
<td class="cell">Threshold</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: responses within 48h (numerator) -->
|
||
<tr>
|
||
<td rowspan="3" class="cell font-bold text-blue">5</td>
|
||
<td rowspan="3" class="cell font-bold text-navy">Dep - KPI - 4</td>
|
||
<td rowspan="3" class="cell text-left font-bold text-navy px-2 uppercase">Department Response Rate to Complaints Within 48 Hours</td>
|
||
<td rowspan="3" class="cell">80%</td>
|
||
<td rowspan="3" class="cell">70%</td>
|
||
<td class="cell text-left bg-slate-50">Responses ≤48h</td>
|
||
<td class="cell">47</td><td class="cell">27</td><td class="cell">29</td><td class="cell">44</td><td class="cell">52</td><td class="cell">38</td>
|
||
<td class="cell">58</td><td class="cell">50</td><td class="cell">56</td><td class="cell">62</td><td class="cell">36</td><td class="cell font-bold">499</td>
|
||
</tr>
|
||
<!-- row 2: total complaints received -->
|
||
<tr>
|
||
<td class="cell text-left bg-slate-50">Total complaints received</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">50</td>
|
||
<td class="cell">63</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">682</td>
|
||
</tr>
|
||
<!-- row 3: result % (exact values from PDF) -->
|
||
<tr class="font-bold">
|
||
<td class="cell text-left text-navy">Result (%)</td>
|
||
<td class="cell">66.2%</td><td class="cell">47.4%</td><td class="cell">58.0%</td><td class="cell">77.2%</td><td class="cell">80.0%</td><td class="cell">76.0%</td>
|
||
<td class="cell">92.1%</td><td class="cell">76.9%</td><td class="cell">70.9%</td><td class="cell">81.6%</td><td class="cell">73.5%</td><td class="cell bg-navy text-white">73.2%</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- ===== Definition & metadata ===== -->
|
||
<div class="text-xs text-slate bg-slate-50 p-3 rounded-lg border excel-border mb-6 italic">
|
||
<span class="font-bold text-navy">Definition:</span> Measures the percentage of complaints that receive a response from the relevant department within 48 hours of being forwarded by the Patient Relations Department.
|
||
Target (80%) aim; Threshold (70%) minimum acceptable.
|
||
</div>
|
||
|
||
<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> Special Log/Tool</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 Alqahani</div>
|
||
<div><span class="font-bold text-navy">Analyzer:</span> Ms. Shahad Alanazi</div>
|
||
</div>
|
||
|
||
<!-- ===== two charts: trend + overall compliance donut ===== -->
|
||
<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 Response Rate ≤48h – Target 80%
|
||
</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="check-circle" class="w-3 h-3"></i> Within 48h vs Overdue
|
||
</p>
|
||
<div id="sourceChart"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== ANALYSIS block – with insights based on data ===== -->
|
||
<div class="mb-8 p-5 bg-blue/5 border-l-4 border-navy rounded-xl">
|
||
<h3 class="text-navy font-bold text-sm uppercase flex items-center gap-2 mb-3"><i data-lucide="bar-chart-3" class="w-4 h-4"></i>Analysis</h3>
|
||
<div class="grid md:grid-cols-2 gap-6 text-xs">
|
||
<div>
|
||
<p class="font-semibold text-navy">📊 Monthly performance highlights:</p>
|
||
<ul class="list-disc list-inside text-slate mt-1">
|
||
<li>Best month: <span class="font-bold text-green-700">July 92.1%</span> (exceeded target)</li>
|
||
<li>Above target also in May (80.0%), Oct (81.6%)</li>
|
||
<li>Lowest point: <span class="text-red-600">February 47.4%</span> (well below threshold)</li>
|
||
<li>Annual average: <span class="font-bold">73.2%</span> (above threshold 70%, below target 80%)</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-navy">⚠️ Key observations:</p>
|
||
<ul class="list-disc list-inside text-slate mt-1">
|
||
<li>February drop due to delayed responses from medical & nursing departments.</li>
|
||
<li>Consistent improvement from April onward, but Sep/Nov slightly dipped.</li>
|
||
<li>Total complaints: 682 – responded within 48h: 499 (73.2%).</li>
|
||
<li>183 complaints took longer than 48h (26.8%).</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- Additional insights as per placeholder "Analysis:" -->
|
||
<p class="text-xs text-slate mt-3 italic border-t pt-2">Departments with frequent delays: ObGyne Clinics (7 days in some months), Medical ward, Physiotherapy. Need focused follow-up.</p>
|
||
</div>
|
||
|
||
<!-- ===== Recommendations ===== -->
|
||
<div class="mb-8 p-4 bg-amber-50/70 border-l-4 border-amber-600 rounded-xl">
|
||
<h3 class="text-navy font-bold text-sm uppercase flex items-center gap-2 mb-2"><i data-lucide="message-square" class="w-4 h-4"></i>Recommendations</h3>
|
||
<ul class="text-xs text-slate list-disc list-inside">
|
||
<li>Establish real-time alert for departments exceeding 48h.</li>
|
||
<li>Monthly review with department heads – focus on ObGyne, Medical ward, Physiotherapy.</li>
|
||
<li>Reinforce training on complaint handling urgency; assign department liaisons.</li>
|
||
<li>Aim to push annual average above 80% next year.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- ===== department style quick stats (customised for response rate) ===== -->
|
||
<div class="grid grid-cols-2 border-t border-l excel-border mb-8">
|
||
<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">FASTEST RESPONSE</h3>
|
||
<div id="viewMed" class="text-[11px] text-slate whitespace-pre-line leading-relaxed italic">July 92.1% · May 80.0% · Oct 81.6% · Apr 77.2%</div>
|
||
</div>
|
||
<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">NEEDS IMPROVEMENT</h3>
|
||
<div id="viewAdmin" class="text-[11px] text-slate whitespace-pre-line leading-relaxed italic">Feb 47.4% · Mar 58.0% · Jan 66.2% · Nov 73.5%</div>
|
||
</div>
|
||
<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">DEPARTMENTS (DELAYS)</h3>
|
||
<div id="viewNur" class="text-[11px] text-slate whitespace-pre-line leading-relaxed italic">ObGyne Clinics, Medical ward, Physiotherapy, OPD Nursing (sporadic)</div>
|
||
</div>
|
||
<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">OVERALL</h3>
|
||
<div class="text-[11px] text-slate italic">73.2% annual response rate – above threshold 70%.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== editable insights panel (like template) with preset data ===== -->
|
||
<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 (Dep-KPI-4)
|
||
</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="focus">February (low) / July (high)</option>
|
||
<option value="overview">Annual summary</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="Fastest months …" class="border p-2 text-[10px] h-20 rounded w-full"></textarea>
|
||
<textarea id="editAdmin" oninput="sync()" placeholder="Slowest months …" class="border p-2 text-[10px] h-20 rounded w-full"></textarea>
|
||
<textarea id="editNur" oninput="sync()" placeholder="Problematic depts …" 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">Ongoing recommendations (from editor):</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 (exact match from PDF 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 Alqahani<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. Abdulreh Alsuaibi<br>Medical Director</div></div>
|
||
</div>
|
||
<!-- additional approvers -->
|
||
<div class="flex justify-center gap-8 text-[9px] text-slate mt-3">
|
||
<span>Mr. Turki Alkhamis (Patient Affairs Director)</span>
|
||
<span>Mr. Mohammed Alhajiy (Quality Management Director)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
lucide.createIcons();
|
||
|
||
// contextual data for the editable panels
|
||
const data = {
|
||
focus: {
|
||
med: "Fastest response: July 92.1%, May 80.0%, Oct 81.6%, Apr 77.2%",
|
||
admin: "Slowest months: Feb 47.4% (lowest), Mar 58.0%, Jan 66.2%",
|
||
nur: "Problematic departments: ObGyne Clinics, Medical ward, Physiotherapy (delays >48h)",
|
||
rec: "• Real-time alert for >48h.\n• Monthly review with ObGyne, Medical ward, Physio.\n• Train department liaisons."
|
||
},
|
||
overview: {
|
||
med: "Best performers: Jul (92.1%), May (80.0%), Oct (81.6%)",
|
||
admin: "Worst: Feb (47.4%), Mar (58.0%), Jan (66.2%)",
|
||
nur: "Depts with repeated delays: ObGyne Clinics, Medical ward, Physiotherapy, OPD Nursing.",
|
||
rec: "Establish real-time alert, monthly review with dept heads, assign liaisons. Aim for >80% annual."
|
||
}
|
||
};
|
||
|
||
function loadMonth() {
|
||
const m = document.getElementById('monthSelect').value; // 'focus' or 'overview'
|
||
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 data from PDF)
|
||
new ApexCharts(document.querySelector("#trendChart"), {
|
||
series: [{ name: 'Response ≤48h %', data: [66.2, 47.4, 58.0, 77.2, 80.0, 76.0, 92.1, 76.9, 70.9, 81.6, 73.5, 73.2] }],
|
||
chart: { height: 180, type: 'line', toolbar: { show: false }, dropShadow: { enabled: true, top: 2, left: 2, blur: 2, opacity: 0.2 } },
|
||
colors: ['#005696'],
|
||
stroke: { width: 3, curve: 'smooth' },
|
||
markers: { size: 4, colors: ['#007bbd'], strokeColors: '#fff' },
|
||
xaxis: { categories: ['J','F','M','A','M','J','J','A','S','O','N','D'] },
|
||
yaxis: { min: 40, max: 100, labels: { formatter: v => v + '%' } },
|
||
annotations: { yaxis: [{ y: 80, borderColor: '#16a34a', label: { text: 'Target 80%', style: { color: '#fff', background: '#16a34a' } } }] }
|
||
}).render();
|
||
|
||
// small donut: responded ≤48h (499) vs >48h (183) from totals: 682 total - 499 = 183
|
||
new ApexCharts(document.querySelector("#sourceChart"), {
|
||
series: [499, 183],
|
||
chart: { type: 'donut', height: 160 },
|
||
labels: ['≤48h response', '>48h (overdue)'],
|
||
colors: ['#005696', '#cbd5e1'],
|
||
legend: { position: 'bottom', fontSize: '9px' }
|
||
}).render();
|
||
|
||
function exportPDF() {
|
||
const element = document.getElementById('report');
|
||
html2pdf().from(element).set({
|
||
margin: 0.3,
|
||
filename: 'Dep_KPI4_Response_Rate_2025.pdf',
|
||
html2canvas: { scale: 2 },
|
||
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
|
||
}).save();
|
||
}
|
||
|
||
// initial load (focus on feb/july)
|
||
loadMonth();
|
||
</script>
|
||
|
||
<p class="text-[9px] text-gray-300 text-center max-w-6xl mx-auto mt-2">Dep-KPI-4 – Department Response Rate (48h) – recreated from PDF. Includes all monthly figures, analysis, and PX360 theme.</p>
|
||
</body>
|
||
</html> |