390 lines
16 KiB
HTML
390 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ report.indicator_title }} - {% trans "KPI Report" %}</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<!-- ApexCharts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
|
|
|
<!-- html2pdf.js -->
|
|
<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: '#eef6fb',
|
|
slate: '#64748b',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@media print {
|
|
.no-print { display: none !important; }
|
|
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
|
}
|
|
|
|
.excel-border { border: 1px solid #94a3b8; }
|
|
|
|
.page-break { page-break-after: always; }
|
|
|
|
.no-break { page-break-inside: avoid; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-white text-slate-800">
|
|
<!-- PDF Controls -->
|
|
<div class="no-print fixed top-4 right-4 z-50 flex gap-2">
|
|
<button onclick="generatePDF()" class="bg-navy text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-blue transition-colors shadow-lg">
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
{% trans "Download PDF" %}
|
|
</button>
|
|
<button onclick="window.print()" class="bg-slate text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-slate-600 transition-colors shadow-lg">
|
|
<i data-lucide="printer" class="w-4 h-4"></i>
|
|
{% trans "Print" %}
|
|
</button>
|
|
<a href="{% url 'analytics:kpi_report_detail' report.id %}" class="bg-white text-navy border border-navy px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-light transition-colors shadow-lg">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
{% trans "Back" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Report Container -->
|
|
<div id="report-content" class="max-w-[1200px] mx-auto p-8">
|
|
|
|
<!-- Header with Logo -->
|
|
<div class="flex justify-between items-start mb-8 pb-4 border-b-2 border-navy no-break">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-navy">PX360</h1>
|
|
<p class="text-slate">{% trans "Patient Experience Management System" %}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="px-3 py-1 bg-navy text-white text-sm font-bold rounded inline-block mb-1">
|
|
{{ report.kpi_id }}
|
|
</div>
|
|
<p class="text-sm text-slate">{{ report.report_period_display }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Title -->
|
|
<div class="mb-6 no-break">
|
|
<h2 class="text-2xl font-bold text-navy">{{ report.indicator_title }}</h2>
|
|
<p class="text-slate">
|
|
<i data-lucide="building-2" class="w-4 h-4 inline mr-1"></i>
|
|
{{ report.hospital.name }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Main Data Table -->
|
|
<div class="mb-8 no-break">
|
|
<table class="w-full border-collapse excel-border">
|
|
<!-- Header -->
|
|
<thead>
|
|
<tr class="bg-navy text-white">
|
|
<th class="p-3 text-left text-sm font-semibold border excel-border">{% trans "KPI ID" %}</th>
|
|
<th class="p-3 text-left text-sm font-semibold border excel-border w-56">{% trans "Indicator Title" %}</th>
|
|
<th class="p-3 text-left text-sm font-semibold border excel-border">{% trans "Measure" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "Jan" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "Feb" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "Mar" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "Apr" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "May" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "Jun" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "Jul" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "Aug" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "Sep" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "Oct" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "Nov" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border w-10">{% trans "Dec" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border excel-border bg-blue">{% trans "TOTAL" %}</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<!-- Numerator Row -->
|
|
<tr>
|
|
<td rowspan="3" class="p-3 border excel-border text-center text-blue font-bold align-middle">
|
|
{{ report.kpi_id }}
|
|
</td>
|
|
<td rowspan="3" class="p-3 border excel-border text-left font-bold text-navy align-middle text-sm">
|
|
{{ report.indicator_title }}
|
|
</td>
|
|
<td class="p-3 border excel-border text-left bg-slate-50 text-sm">
|
|
{{ report.numerator_label }}
|
|
</td>
|
|
{% for m in monthly_data %}
|
|
<td class="p-3 border excel-border text-center text-sm">{% if m %}{{ m.numerator }}{% else %}-{% endif %}</td>
|
|
{% endfor %}
|
|
<td class="p-3 border excel-border text-center font-bold bg-slate-100">{{ report.total_numerator }}</td>
|
|
</tr>
|
|
|
|
<!-- Denominator Row -->
|
|
<tr>
|
|
<td class="p-3 border excel-border text-left bg-slate-50 text-sm">
|
|
{{ report.denominator_label }}
|
|
</td>
|
|
{% for m in monthly_data %}
|
|
<td class="p-3 border excel-border text-center text-sm">{% if m %}{{ m.denominator }}{% else %}-{% endif %}</td>
|
|
{% endfor %}
|
|
<td class="p-3 border excel-border text-center font-bold bg-slate-100">{{ report.total_denominator }}</td>
|
|
</tr>
|
|
|
|
<!-- Result Row -->
|
|
<tr class="font-bold">
|
|
<td class="p-3 border excel-border text-left text-navy bg-slate-100">
|
|
{% trans "Result (%)" %}
|
|
</td>
|
|
{% for m in monthly_data %}
|
|
<td class="p-3 border excel-border text-center text-sm
|
|
{% if m and m.is_below_target %}text-red-600 bg-red-50{% elif m %}text-green-600{% endif %}">
|
|
{% if m %}{{ m.percentage }}%{% else %}-{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
<td class="p-3 border excel-border text-center font-bold bg-navy text-white">
|
|
{{ report.overall_result }}%
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Metadata Grid -->
|
|
<div class="grid grid-cols-5 gap-2 text-xs bg-light p-3 rounded-lg border excel-border mb-8 no-break">
|
|
<div><span class="font-bold text-navy">{% trans "Category:" %}</span> {{ report.category }}</div>
|
|
<div><span class="font-bold text-navy">{% trans "Type:" %}</span> {{ report.kpi_type }}</div>
|
|
<div>
|
|
<span class="font-bold text-navy">{% trans "Risk:" %}</span>
|
|
<span class="px-1.5 py-0.5 rounded text-xs
|
|
{% if report.risk_level == 'High' %}bg-red-200 text-red-800
|
|
{% elif report.risk_level == 'Medium' %}bg-yellow-200 text-yellow-800
|
|
{% else %}bg-green-200 text-green-800{% endif %}">
|
|
{{ report.risk_level }}
|
|
</span>
|
|
</div>
|
|
<div><span class="font-bold text-navy">{% trans "Data coll.:" %}</span> {{ report.data_collection_method }}</div>
|
|
<div><span class="font-bold text-navy">{% trans "Method:" %}</span> {{ report.data_collection_frequency }}</div>
|
|
<div><span class="font-bold text-navy">{% trans "Dimension:" %}</span> {{ report.dimension }}</div>
|
|
<div><span class="font-bold text-navy">{% trans "Gather freq.:" %}</span> {{ report.data_collection_frequency }}</div>
|
|
<div><span class="font-bold text-navy">{% trans "Reporting:" %}</span> {{ report.reporting_frequency }}</div>
|
|
<div><span class="font-bold text-navy">{% trans "Collector:" %}</span> {{ report.collector_name|default:"-" }}</div>
|
|
<div><span class="font-bold text-navy">{% trans "Analyzer:" %}</span> {{ report.analyzer_name|default:"-" }}</div>
|
|
</div>
|
|
|
|
<!-- Charts -->
|
|
<div class="grid grid-cols-3 gap-6 mb-8 no-break">
|
|
<!-- Trend Chart -->
|
|
<div class="col-span-2 border excel-border p-4 rounded-lg bg-slate-50/50">
|
|
<p class="text-xs font-bold text-navy uppercase mb-4 flex items-center gap-2">
|
|
<i data-lucide="trending-up" class="w-3 h-3"></i>
|
|
{% trans "Monthly Performance Trend (%)" %}
|
|
<span class="text-slate font-normal">[{% trans "Target:" %} {{ report.target_percentage }}%]</span>
|
|
</p>
|
|
<div id="trendChart" style="height: 250px;"></div>
|
|
</div>
|
|
|
|
<!-- Source Chart -->
|
|
<div class="border excel-border p-4 rounded-lg bg-slate-50/50">
|
|
<p class="text-xs font-bold text-navy uppercase mb-4 flex items-center gap-2">
|
|
<i data-lucide="pie-chart" class="w-3 h-3"></i>
|
|
{% trans "Complaints by Source" %}
|
|
</p>
|
|
<div id="sourceChart" style="height: 250px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department Breakdown -->
|
|
<div class="mb-8 no-break">
|
|
<h3 class="text-xs font-bold text-navy uppercase mb-4 flex items-center gap-2">
|
|
<i data-lucide="building" class="w-3 h-3"></i>
|
|
{% trans "Department Breakdown" %}
|
|
</h3>
|
|
|
|
<div class="grid grid-cols-2 border-t border-l excel-border">
|
|
{% for dept in department_breakdowns %}
|
|
<div class="p-4 border-r border-b excel-border
|
|
{% if dept.department_category == 'support' %}bg-slate-50{% endif %}">
|
|
<h4 class="text-white text-xs font-bold px-2 py-1 mb-2 inline-block
|
|
{% if dept.department_category == 'medical' %}bg-navy
|
|
{% elif dept.department_category == 'nursing' %}bg-slate
|
|
{% elif dept.department_category == 'admin' %}bg-blue
|
|
{% else %}bg-slate-400{% endif %}">
|
|
{{ dept.get_department_category_display }}
|
|
</h4>
|
|
|
|
<div class="text-xs text-slate space-y-1">
|
|
<p><span class="font-semibold">{% trans "Complaints:" %}</span> {{ dept.complaint_count }}</p>
|
|
<p><span class="font-semibold">{% trans "Resolved:" %}</span> {{ dept.resolved_count }}</p>
|
|
{% if dept.avg_resolution_days %}
|
|
<p><span class="font-semibold">{% trans "Avg Resolution:" %}</span> {{ dept.avg_resolution_days }} {% trans "days" %}</p>
|
|
{% endif %}
|
|
{% if dept.top_areas %}
|
|
<p class="mt-2 whitespace-pre-line italic">{{ dept.top_areas }}</p>
|
|
{% else %}
|
|
<p class="italic text-slate-400">{% trans "No complaints received for these departments." %}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="text-xs text-slate text-center border-t pt-4 mt-8">
|
|
<p>
|
|
{% trans "Generated by PX360" %} | {{ report.report_period_display }}
|
|
{% if report.generated_at %}| {{ report.generated_at|date:"Y-m-d H:i" }}{% endif %}
|
|
</p>
|
|
<p class="mt-1">© {% now "Y" %} Al Hammadi Hospitals. {% trans "All rights reserved." %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Parse chart data safely
|
|
let trendData, sourceData;
|
|
try {
|
|
trendData = {{ trend_chart_data_json|safe }};
|
|
sourceData = {{ source_chart_data_json|safe }};
|
|
} catch (e) {
|
|
console.error('Error parsing chart data:', e);
|
|
trendData = { data: [0,0,0,0,0,0,0,0,0,0,0,0], labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], target: 95 };
|
|
sourceData = { data: [100], labels: ['No Data'] };
|
|
}
|
|
|
|
// Trend Chart
|
|
const trendChartEl = document.getElementById("trendChart");
|
|
if (trendChartEl) {
|
|
const trendOptions = {
|
|
series: [{
|
|
name: '{% trans "Performance %" %}',
|
|
data: trendData.data
|
|
}],
|
|
chart: {
|
|
type: 'line',
|
|
height: 250,
|
|
toolbar: { show: false },
|
|
animations: { enabled: false }
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 3
|
|
},
|
|
colors: ['#005696'],
|
|
xaxis: {
|
|
categories: trendData.labels,
|
|
labels: { style: { fontSize: '10px' } }
|
|
},
|
|
yaxis: {
|
|
max: 100,
|
|
labels: { formatter: function(val) { return val + '%'; }, style: { fontSize: '10px' } }
|
|
},
|
|
grid: {
|
|
borderColor: '#e2e8f0',
|
|
strokeDashArray: 4
|
|
},
|
|
annotations: trendData.target ? {
|
|
yaxis: [{
|
|
y: trendData.target,
|
|
borderColor: '#ef4444',
|
|
strokeDashArray: 4,
|
|
label: {
|
|
text: '{% trans "Target" %}: ' + trendData.target + '%',
|
|
style: { color: '#ef4444', background: '#fef2f2', fontSize: '10px' }
|
|
}
|
|
}]
|
|
} : {},
|
|
tooltip: {
|
|
y: { formatter: function(val) { return val + '%'; } }
|
|
}
|
|
};
|
|
|
|
try {
|
|
const trendChart = new ApexCharts(trendChartEl, trendOptions);
|
|
trendChart.render();
|
|
} catch (e) {
|
|
console.error('Error rendering trend chart:', e);
|
|
}
|
|
}
|
|
|
|
// Source Chart
|
|
const sourceChartEl = document.getElementById("sourceChart");
|
|
if (sourceChartEl) {
|
|
const sourceOptions = {
|
|
series: sourceData.data,
|
|
labels: sourceData.labels,
|
|
chart: {
|
|
type: 'donut',
|
|
height: 250,
|
|
animations: { enabled: false }
|
|
},
|
|
colors: ['#005696', '#007bbd', '#64748b', '#94a3b8', '#cbd5e1'],
|
|
legend: {
|
|
position: 'bottom',
|
|
fontSize: '10px'
|
|
},
|
|
tooltip: {
|
|
y: { formatter: function(val) { return val + '%'; } }
|
|
}
|
|
};
|
|
|
|
try {
|
|
const sourceChart = new ApexCharts(sourceChartEl, sourceOptions);
|
|
sourceChart.render();
|
|
} catch (e) {
|
|
console.error('Error rendering source chart:', e);
|
|
}
|
|
}
|
|
|
|
// PDF Generation
|
|
function generatePDF() {
|
|
const element = document.getElementById('report-content');
|
|
const opt = {
|
|
margin: [10, 10, 10, 10],
|
|
filename: '{{ report.kpi_id }}_{{ report.year }}_{{ report.month }}_{{ report.hospital.name|slugify }}.pdf',
|
|
image: { type: 'jpeg', quality: 0.98 },
|
|
html2canvas: {
|
|
scale: 2,
|
|
useCORS: true,
|
|
logging: false
|
|
},
|
|
jsPDF: {
|
|
unit: 'mm',
|
|
format: 'a4',
|
|
orientation: 'landscape'
|
|
}
|
|
};
|
|
|
|
// Show loading
|
|
const btn = document.querySelector('button[onclick="generatePDF()"]');
|
|
const originalText = btn.innerHTML;
|
|
btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> {% trans "Generating..." %}';
|
|
btn.disabled = true;
|
|
lucide.createIcons();
|
|
|
|
html2pdf().set(opt).from(element).save().then(() => {
|
|
btn.innerHTML = originalText;
|
|
btn.disabled = false;
|
|
lucide.createIcons();
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|