539 lines
17 KiB
HTML
539 lines
17 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans "Analytics Dashboard" %} - 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;
|
|
--hh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--hh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
--hh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Page Header */
|
|
.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: var(--hh-shadow-lg);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.page-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.75rem;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.page-header p {
|
|
color: rgba(255,255,255,0.9);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* KPI Cards */
|
|
.kpi-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
box-shadow: var(--hh-shadow-md);
|
|
border: 1px solid #e2e8f0;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.kpi-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.kpi-card.primary::before {
|
|
background: linear-gradient(90deg, var(--hh-navy), var(--hh-blue));
|
|
}
|
|
|
|
.kpi-card.danger::before {
|
|
background: linear-gradient(90deg, #dc2626, #ef4444);
|
|
}
|
|
|
|
.kpi-card.warning::before {
|
|
background: linear-gradient(90deg, #d97706, #f59e0b);
|
|
}
|
|
|
|
.kpi-card.success::before {
|
|
background: linear-gradient(90deg, #059669, #10b981);
|
|
}
|
|
|
|
.kpi-card:hover {
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.kpi-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.kpi-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.kpi-card:hover .kpi-icon {
|
|
transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
.kpi-icon.bg-navy {
|
|
background: linear-gradient(135deg, #005696, #007bbd);
|
|
color: white;
|
|
}
|
|
|
|
.kpi-icon.bg-danger {
|
|
background: linear-gradient(135deg, #dc2626, #ef4444);
|
|
color: white;
|
|
}
|
|
|
|
.kpi-icon.bg-warning {
|
|
background: linear-gradient(135deg, #f59e0b, #fbbf24);
|
|
color: white;
|
|
}
|
|
|
|
.kpi-icon.bg-success {
|
|
background: linear-gradient(135deg, #10b981, #34d399);
|
|
color: white;
|
|
}
|
|
|
|
.kpi-value {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
color: #1e293b;
|
|
margin-bottom: 0.25rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.kpi-label {
|
|
color: #64748b;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.kpi-subtitle {
|
|
color: #94a3b8;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Chart Cards */
|
|
.chart-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
border: 1px solid #e2e8f0;
|
|
overflow: hidden;
|
|
box-shadow: var(--hh-shadow-md);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.chart-card:hover {
|
|
box-shadow: var(--hh-shadow-lg);
|
|
}
|
|
|
|
.chart-card .card-header {
|
|
background: linear-gradient(135deg, var(--hh-light), #e0f2fe);
|
|
padding: 1.25rem 1.75rem;
|
|
border-bottom: 1px solid #bae6fd;
|
|
}
|
|
|
|
.chart-card .card-header h5 {
|
|
color: var(--hh-navy);
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 1.1rem;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Form Select - PX360 Style */
|
|
.form-select {
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 0.5rem;
|
|
padding: 0.625rem 0.875rem;
|
|
font-size: 0.875rem;
|
|
transition: all 0.2s;
|
|
background: white;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.form-select:focus {
|
|
border-color: var(--hh-blue);
|
|
box-shadow: 0 0 0 3px rgba(0, 123, 189, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
/* List Items */
|
|
.list-item {
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.list-item:hover {
|
|
background-color: var(--hh-light);
|
|
}
|
|
|
|
.dept-rank {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.rank-badge {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.rank-badge.gold {
|
|
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
|
color: white;
|
|
}
|
|
|
|
.rank-badge.silver {
|
|
background: linear-gradient(135deg, #94a3b8, #64748b);
|
|
color: white;
|
|
}
|
|
|
|
.rank-badge.bronze {
|
|
background: linear-gradient(135deg, #d97706, #b45309);
|
|
color: white;
|
|
}
|
|
|
|
.rank-badge.default {
|
|
background: #e2e8f0;
|
|
color: #64748b;
|
|
}
|
|
|
|
/* Attention Items */
|
|
.attention-item {
|
|
padding: 1rem 1.25rem;
|
|
border-radius: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.attention-item.danger {
|
|
background: linear-gradient(135deg, #fef2f2, #fee2e2);
|
|
border: 1px solid #fecaca;
|
|
}
|
|
|
|
.attention-item.warning {
|
|
background: linear-gradient(135deg, #fffbeb, #fef3c7);
|
|
border: 1px solid #fde68a;
|
|
}
|
|
|
|
.attention-item.success {
|
|
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
|
|
border: 1px solid #bbf7d0;
|
|
}
|
|
|
|
.attention-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.attention-value.text-danger {
|
|
color: #dc2626;
|
|
}
|
|
|
|
.attention-value.text-warning {
|
|
color: #d97706;
|
|
}
|
|
|
|
/* Empty State */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3rem 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-state-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: linear-gradient(135deg, var(--hh-light), #e0f2fe);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--hh-blue);
|
|
}
|
|
|
|
/* Animations */
|
|
@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">
|
|
<h1>
|
|
<i data-lucide="bar-chart-2" class="w-8 h-8 inline-block me-2"></i>
|
|
{% trans "Analytics & KPIs" %}
|
|
</h1>
|
|
<p class="mb-0">{% trans "Monitor key performance indicators and trends" %}</p>
|
|
</div>
|
|
|
|
<!-- Hospital Filter -->
|
|
<div class="flex justify-end mb-4">
|
|
<select class="form-select" onchange="window.location.href='?hospital='+this.value">
|
|
<option value="">{% trans "All Hospitals" %}</option>
|
|
{% for hospital in hospitals %}
|
|
<option value="{{ hospital.id }}" {% if selected_hospital and selected_hospital.id == hospital.id %}selected{% endif %}>
|
|
{{ hospital.name_en }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- KPI Cards -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
<div class="kpi-card primary animate-in">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="kpi-label">{% trans "Total Complaints" %}</p>
|
|
<p class="kpi-value">{{ kpis.total_complaints }}</p>
|
|
<p class="kpi-subtitle">
|
|
<span class="text-green-500 font-semibold">{% trans "Open:" %} {{ kpis.open_complaints }}</span>
|
|
</p>
|
|
</div>
|
|
<div class="kpi-icon bg-navy">
|
|
<i data-lucide="message-square" class="w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kpi-card danger animate-in">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="kpi-label">{% trans "Overdue Complaints" %}</p>
|
|
<p class="kpi-value text-danger">{{ kpis.overdue_complaints }}</p>
|
|
<p class="kpi-subtitle">{% trans "Requires attention" %}</p>
|
|
</div>
|
|
<div class="kpi-icon bg-danger">
|
|
<i data-lucide="alert-circle" class="w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kpi-card warning animate-in">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="kpi-label">{% trans "Total Actions" %}</p>
|
|
<p class="kpi-value">{{ kpis.total_actions }}</p>
|
|
<p class="kpi-subtitle">
|
|
<span class="text-blue-500 font-semibold">{% trans "Open:" %} {{ kpis.open_actions }}</span>
|
|
</p>
|
|
</div>
|
|
<div class="kpi-icon bg-warning">
|
|
<i data-lucide="check-square" class="w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kpi-card success animate-in">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="kpi-label">{% trans "Avg Survey Score" %}</p>
|
|
<p class="kpi-value">{{ kpis.avg_survey_score|floatformat:1 }}<span class="text-lg text-slate-400">/5.0</span></p>
|
|
<p class="kpi-subtitle">
|
|
<span class="text-red-500 font-semibold">{% trans "Negative:" %} {{ kpis.negative_surveys }}</span>
|
|
</p>
|
|
</div>
|
|
<div class="kpi-icon bg-success">
|
|
<i data-lucide="smile" class="w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department Rankings and Attention Areas -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- Top Performing Departments -->
|
|
<div class="chart-card">
|
|
<div class="card-header">
|
|
<h5>
|
|
<i data-lucide="trophy" class="w-5 h-5"></i>
|
|
{% trans "Top Performing Departments" %}
|
|
</h5>
|
|
</div>
|
|
<div class="p-0">
|
|
{% if department_rankings %}
|
|
<div class="divide-y divide-slate-100">
|
|
{% for dept in department_rankings %}
|
|
<div class="list-item">
|
|
<div class="flex items-center justify-between">
|
|
<div class="dept-rank">
|
|
<span class="rank-badge {% if forloop.counter == 1 %}gold{% elif forloop.counter == 2 %}silver{% elif forloop.counter == 3 %}bronze{% else %}default{% endif %}">
|
|
{{ forloop.counter }}
|
|
</span>
|
|
<div>
|
|
<p class="font-semibold text-slate-800">{{ dept.name_en }}</p>
|
|
<p class="text-xs text-slate-500">{% trans "Surveys:" %} {{ dept.survey_count }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-2xl font-bold text-green-600 mb-0">{{ dept.avg_score|floatformat:1 }}</p>
|
|
<p class="text-xs text-slate-500 mb-0">{% trans "Avg Score" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<div class="empty-state-icon">
|
|
<i data-lucide="trophy" class="w-10 h-10"></i>
|
|
</div>
|
|
<p class="text-slate-500 mb-0">{% trans "No data available" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Areas Needing Attention -->
|
|
<div class="chart-card">
|
|
<div class="card-header">
|
|
<h5>
|
|
<i data-lucide="alert-triangle" class="w-5 h-5"></i>
|
|
{% trans "Areas Needing Attention" %}
|
|
</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
{% if kpis.overdue_complaints > 0 or kpis.overdue_actions > 0 or kpis.negative_surveys > 0 %}
|
|
|
|
{% if kpis.overdue_complaints > 0 %}
|
|
<div class="attention-item danger">
|
|
<div>
|
|
<p class="font-bold text-danger mb-1">
|
|
<i data-lucide="clock" class="w-4 h-4 inline-block me-1"></i>
|
|
{% trans "Overdue Complaints" %}
|
|
</p>
|
|
<p class="text-sm text-slate-600 mb-0">{% trans "Requires immediate action" %}</p>
|
|
</div>
|
|
<p class="attention-value text-danger">{{ kpis.overdue_complaints }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if kpis.overdue_actions > 0 %}
|
|
<div class="attention-item warning">
|
|
<div>
|
|
<p class="font-bold text-warning mb-1">
|
|
<i data-lucide="calendar-x" class="w-4 h-4 inline-block me-1"></i>
|
|
{% trans "Overdue Actions" %}
|
|
</p>
|
|
<p class="text-sm text-slate-600 mb-0">{% trans "SLA breached" %}</p>
|
|
</div>
|
|
<p class="attention-value text-warning">{{ kpis.overdue_actions }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if kpis.negative_surveys > 0 %}
|
|
<div class="attention-item danger">
|
|
<div>
|
|
<p class="font-bold text-danger mb-1">
|
|
<i data-lucide="frown" class="w-4 h-4 inline-block me-1"></i>
|
|
{% trans "Negative Surveys" %}
|
|
</p>
|
|
<p class="text-sm text-slate-600 mb-0">{% trans "Low satisfaction scores" %}</p>
|
|
</div>
|
|
<p class="attention-value text-danger">{{ kpis.negative_surveys }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<div class="empty-state-icon" style="background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #10b981;">
|
|
<i data-lucide="check-circle" class="w-10 h-10"></i>
|
|
</div>
|
|
<p class="text-green-600 font-semibold mb-0">{% trans "All metrics on target!" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize Lucide icons on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %}
|