438 lines
17 KiB
HTML
438 lines
17 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Complaints Analytics" %} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
:root {
|
|
--hh-navy: #005696;
|
|
--hh-blue: #007bbd;
|
|
--hh-light: #eef6fb;
|
|
--hh-slate: #64748b;
|
|
--hh-success: #10b981;
|
|
--hh-warning: #f59e0b;
|
|
--hh-danger: #ef4444;
|
|
}
|
|
|
|
.page-header {
|
|
background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
|
|
color: white;
|
|
padding: 2rem 2.5rem;
|
|
border-radius: 1rem;
|
|
margin-bottom: 2rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
border: 1px solid #e2e8f0;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
}
|
|
|
|
.stat-card.blue::before { background: linear-gradient(90deg, #3b82f6, #2563eb); }
|
|
.stat-card.orange::before { background: linear-gradient(90deg, #f97316, #ea580c); }
|
|
.stat-card.red::before { background: linear-gradient(90deg, #ef4444, #dc2626); }
|
|
.stat-card.green::before { background: linear-gradient(90deg, #10b981, #059669); }
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stat-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stat-icon.blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
|
|
.stat-icon.orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); }
|
|
.stat-icon.red { background: linear-gradient(135deg, #fee2e2, #fecaca); }
|
|
.stat-icon.green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }
|
|
|
|
.chart-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.chart-card:hover {
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.chart-card .card-header {
|
|
background: linear-gradient(135deg, var(--hh-light), #e0f2fe);
|
|
padding: 1.25rem 1.75rem;
|
|
border-bottom: 1px solid #bae6fd;
|
|
border-radius: 1rem 1rem 0 0;
|
|
}
|
|
|
|
.category-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.category-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.875rem 0;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.category-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.category-badge {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-in {
|
|
animation: fadeIn 0.5s ease-out forwards;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="px-4 py-6">
|
|
<!-- Page Header -->
|
|
<div class="page-header animate-in">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-bold mb-2">
|
|
<i data-lucide="circle-help" class="w-7 h-7 inline-block me-2"></i>
|
|
{% trans "Complaints Analytics" %}
|
|
</h1>
|
|
<p class="text-white/90">{% trans "Comprehensive complaints metrics and insights" %}</p>
|
|
</div>
|
|
<form method="get" class="inline-flex">
|
|
<select name="date_range" class="px-4 py-2.5 bg-white/20 border border-white/30 rounded-xl text-white focus:ring-2 focus:ring-white/50 focus:border-transparent transition" onchange="this.form.submit()">
|
|
<option value="7" {% if date_range == 7 %}selected{% endif %}>{% trans "Last 7 Days" %}</option>
|
|
<option value="30" {% if date_range == 30 %}selected{% endif %}>{% trans "Last 30 Days" %}</option>
|
|
<option value="90" {% if date_range == 90 %}selected{% endif %}>{% trans "Last 90 Days" %}</option>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
|
<div class="stat-card blue animate-in">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="text-xs font-bold text-blue-600 uppercase mb-1">{% trans "Total Complaints" %}</p>
|
|
<p class="text-3xl font-black text-navy mb-2">{{ dashboard_summary.status_counts.total }}</p>
|
|
<div class="flex items-center gap-1 text-sm">
|
|
{% if dashboard_summary.trend.percentage_change > 0 %}
|
|
<i data-lucide="trending-up" class="w-4 h-4 text-red-500"></i>
|
|
<span class="text-red-500 font-bold">+{{ dashboard_summary.trend.percentage_change }}%</span>
|
|
{% elif dashboard_summary.trend.percentage_change < 0 %}
|
|
<i data-lucide="trending-down" class="w-4 h-4 text-green-500"></i>
|
|
<span class="text-green-500 font-bold">{{ dashboard_summary.trend.percentage_change }}%</span>
|
|
{% else %}
|
|
<i data-lucide="minus" class="w-4 h-4 text-slate-400"></i>
|
|
<span class="text-slate-400 font-bold">0%</span>
|
|
{% endif %}
|
|
<span class="text-slate-500">{% trans "vs last period" %}</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-icon blue">
|
|
<i data-lucide="activity" class="text-blue-600 w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card orange animate-in">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="text-xs font-bold text-orange-600 uppercase mb-1">{% trans "Open" %}</p>
|
|
<p class="text-3xl font-black text-navy">{{ dashboard_summary.status_counts.open }}</p>
|
|
</div>
|
|
<div class="stat-icon orange">
|
|
<i data-lucide="folder-open" class="text-orange-600 w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card red animate-in">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="text-xs font-bold text-red-600 uppercase mb-1">{% trans "Overdue" %}</p>
|
|
<p class="text-3xl font-black text-red-500">{{ dashboard_summary.status_counts.overdue }}</p>
|
|
</div>
|
|
<div class="stat-icon red">
|
|
<i data-lucide="alert-triangle" class="text-red-600 w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card green animate-in">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="text-xs font-bold text-green-600 uppercase mb-1">{% trans "Resolved" %}</p>
|
|
<p class="text-3xl font-black text-navy">{{ dashboard_summary.status_counts.resolved }}</p>
|
|
</div>
|
|
<div class="stat-icon green">
|
|
<i data-lucide="check-circle" class="text-green-600 w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
|
<!-- Complaints Trend -->
|
|
<div class="lg:col-span-2 chart-card animate-in">
|
|
<div class="card-header">
|
|
<h3 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
|
|
<i data-lucide="trending-up" class="w-5 h-5"></i>
|
|
{% trans "Complaints Trend" %}
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div id="trendChart" style="min-height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Categories -->
|
|
<div class="chart-card animate-in">
|
|
<div class="card-header">
|
|
<h3 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
|
|
<i data-lucide="pie-chart" class="w-5 h-5"></i>
|
|
{% trans "Top Categories" %}
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<ul class="category-list">
|
|
{% for category in top_categories %}
|
|
<li class="category-item">
|
|
<div class="category-badge bg-blue-100 text-blue-600">
|
|
{{ forloop.counter }}
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="font-semibold text-navy text-sm">{{ category.category__name_en|default:"Uncategorized" }}</p>
|
|
<p class="text-xs text-slate-500">{{ category.count }} complaints</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold text-navy">{{ category.percentage|floatformat:1 }}%</p>
|
|
</div>
|
|
</li>
|
|
{% empty %}
|
|
<li class="text-center py-8 text-slate-500">
|
|
<i data-lucide="pie-chart" class="w-12 h-12 mx-auto mb-2 opacity-30"></i>
|
|
<p>{% trans "No category data available" %}</p>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Second Row -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<!-- Department Distribution -->
|
|
<div class="chart-card animate-in">
|
|
<div class="card-header">
|
|
<h3 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
|
|
<i data-lucide="building" class="w-5 h-5"></i>
|
|
{% trans "Department Distribution" %}
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div id="departmentChart" style="min-height: 250px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Severity Breakdown -->
|
|
<div class="chart-card animate-in">
|
|
<div class="card-header">
|
|
<h3 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
|
|
<i data-lucide="circle-help" class="w-5 h-5"></i>
|
|
{% trans "Severity Breakdown" %}
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div id="severityChart" style="min-height: 250px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hospital Performance -->
|
|
<div class="chart-card animate-in">
|
|
<div class="card-header">
|
|
<h3 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
|
|
<i data-lucide="hospital" class="w-5 h-5"></i>
|
|
{% trans "Hospital Performance" %}
|
|
</h3>
|
|
</div>
|
|
<div class="p-0">
|
|
{% if hospital_performance %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b-2 border-slate-200">
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Hospital" %}</th>
|
|
<th class="text-center py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Total" %}</th>
|
|
<th class="text-center py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Open" %}</th>
|
|
<th class="text-center py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Resolved" %}</th>
|
|
<th class="text-center py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Overdue" %}</th>
|
|
<th class="text-center py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Resolution Rate" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
{% for hospital in hospital_performance %}
|
|
<tr class="hover:bg-slate-50 transition">
|
|
<td class="py-3 px-4">
|
|
<span class="font-semibold text-navy">{{ hospital.hospital__name }}</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-center">
|
|
<span class="font-bold text-navy">{{ hospital.total }}</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-center">
|
|
<span class="px-2.5 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">{{ hospital.open }}</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-center">
|
|
<span class="px-2.5 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold">{{ hospital.resolved }}</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-center">
|
|
<span class="px-2.5 py-1 bg-red-100 text-red-700 rounded-full text-xs font-bold">{{ hospital.overdue }}</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-center">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<div class="w-24 bg-slate-200 rounded-full h-2">
|
|
<div class="bg-green-500 h-2 rounded-full" style="width: {{ hospital.resolution_rate }}%"></div>
|
|
</div>
|
|
<span class="font-bold text-navy text-sm">{{ hospital.resolution_rate|floatformat:1 }}%</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12">
|
|
<div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="hospital" class="w-8 h-8 text-slate-400"></i>
|
|
</div>
|
|
<p class="text-slate font-medium">{% trans "No hospital data available" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ApexCharts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.45.1/dist/apexcharts.min.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
|
|
// Trend Chart
|
|
const trendOptions = {
|
|
series: [{
|
|
name: '{% trans "Complaints" %}',
|
|
data: {{ trend_data|safe }}
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
height: 300,
|
|
fontFamily: 'Inter, sans-serif',
|
|
toolbar: { show: false }
|
|
},
|
|
colors: ['#007bbd'],
|
|
dataLabels: { enabled: false },
|
|
stroke: { curve: 'smooth', width: 3 },
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.1,
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: {{ trend_labels|safe }},
|
|
labels: { style: { fontSize: '12px', colors: '#64748b' } }
|
|
},
|
|
yaxis: {
|
|
labels: { style: { fontSize: '12px', colors: '#64748b' } }
|
|
},
|
|
grid: { borderColor: '#e2e8f0', strokeDashArray: 4 }
|
|
};
|
|
new ApexCharts(document.querySelector("#trendChart"), trendOptions).render();
|
|
|
|
{% if severity_data %}
|
|
// Severity Chart
|
|
const severityOptions = {
|
|
series: {{ severity_data|safe }},
|
|
chart: {
|
|
type: 'donut',
|
|
height: 250,
|
|
fontFamily: 'Inter, sans-serif',
|
|
toolbar: { show: false }
|
|
},
|
|
labels: ['Low', 'Medium', 'High', 'Critical'],
|
|
colors: ['#10b981', '#f59e0b', '#ef4444', '#dc2626'],
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '65%',
|
|
labels: {
|
|
show: true,
|
|
name: { fontSize: '14px', fontWeight: 600 },
|
|
value: { fontSize: '18px', fontWeight: 700 },
|
|
total: {
|
|
show: true,
|
|
label: 'Total',
|
|
formatter: function(w) {
|
|
return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
dataLabels: { enabled: false },
|
|
legend: { position: 'bottom', fontSize: '12px' }
|
|
};
|
|
new ApexCharts(document.querySelector("#severityChart"), severityOptions).render();
|
|
{% endif %}
|
|
});
|
|
</script>
|
|
{% endblock %}
|