244 lines
12 KiB
HTML
244 lines
12 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Generate KPI Report" %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-6xl mx-auto">
|
|
<!-- Header -->
|
|
<header class="mb-6">
|
|
<div class="flex items-center gap-2 text-sm text-slate mb-3">
|
|
<a href="{% url 'analytics:kpi_report_list' %}" class="hover:text-navy">{% trans "KPI Reports" %}</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
<span class="font-bold text-navy">{% trans "Generate Report" %}</span>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-navy flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="file-plus" class="w-5 h-5 text-blue"></i>
|
|
</div>
|
|
{% trans "Generate KPI Report" %}
|
|
</h1>
|
|
<p class="text-slate text-sm mt-1">{% trans "Create a new monthly KPI report for a specific hospital and period." %}</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Main Form -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
|
|
<h2 class="font-bold text-navy flex items-center gap-2">
|
|
<i data-lucide="settings" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Report Configuration" %}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<form method="post" action="{% url 'analytics:kpi_report_generate_submit' %}"
|
|
hx-post="{% url 'analytics:kpi_report_generate_submit' %}"
|
|
hx-target="#form-result"
|
|
hx-swap="innerHTML">
|
|
{% csrf_token %}
|
|
|
|
<div class="space-y-6">
|
|
<!-- Report Type -->
|
|
<div>
|
|
<label for="report_type" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
|
|
{% trans "Report Type" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select name="report_type" id="report_type" required
|
|
class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
|
|
<option value="">{% trans "Select Report Type" %}</option>
|
|
{% for type_value, type_label in report_types %}
|
|
<option value="{{ type_value }}">{{ type_label }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<p class="text-xs text-slate mt-1.5 flex items-center gap-1">
|
|
<i data-lucide="info" class="w-3 h-3"></i>
|
|
{% trans "Choose the type of KPI report to generate." %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Hospital -->
|
|
<div>
|
|
<label for="hospital" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
|
|
{% trans "Hospital" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select name="hospital" id="hospital" required
|
|
class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
|
|
<option value="">{% trans "Select Hospital" %}</option>
|
|
{% for hospital in hospitals %}
|
|
<option value="{{ hospital.id }}">{{ hospital.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Year and Month -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="year" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
|
|
{% trans "Year" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select name="year" id="year" required
|
|
class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
|
|
<option value="">{% trans "Select Year" %}</option>
|
|
{% for y in years %}
|
|
<option value="{{ y }}" {% if y == current_year %}selected{% endif %}>{{ y }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="month" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
|
|
{% trans "Month" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select name="month" id="month" required
|
|
class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:border-navy focus:ring-2 focus:ring-navy/10 outline-none transition">
|
|
<option value="">{% trans "Select Month" %}</option>
|
|
{% for m, m_label in months %}
|
|
<option value="{{ m }}" {% if m == current_month %}selected{% endif %}>{{ m_label }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Box -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-2xl p-4">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="info" class="w-5 h-5 text-blue-600"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-bold text-blue-800">{% trans "Report Generation Information" %}</p>
|
|
<p class="text-sm text-blue-700 mt-1 leading-relaxed">
|
|
{% trans "The report will be generated based on data from the selected month. This may take a few moments depending on the amount of data. If a report already exists for this period, it will be regenerated with the latest data." %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result Container -->
|
|
<div id="form-result"></div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="flex gap-3 pt-4 border-t border-slate-100">
|
|
<button type="submit" class="flex-1 px-6 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center justify-center gap-2 shadow-lg shadow-navy/20">
|
|
<i data-lucide="play" class="w-5 h-5"></i>
|
|
{% trans "Generate Report" %}
|
|
</button>
|
|
<a href="{% url 'analytics:kpi_report_list' %}" class="px-6 py-3 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition">
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar - Available Reports -->
|
|
<div class="lg:col-span-1 space-y-6">
|
|
<!-- Report Types Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
|
|
<h3 class="font-bold text-navy flex items-center gap-2">
|
|
<i data-lucide="list" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Available KPI Reports" %}
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="p-6 space-y-4">
|
|
<!-- MOH Reports -->
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-navy rounded-full"></span>
|
|
{% trans "Ministry of Health" %}
|
|
</p>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-3 p-2.5 bg-slate-50 rounded-xl hover:bg-blue-50 transition">
|
|
<span class="px-2.5 py-1 text-xs font-bold bg-navy text-white rounded-lg flex-shrink-0">MOH-2</span>
|
|
<span class="text-sm text-slate flex-1">{% trans "72-Hour Resolution" %}</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 bg-slate-50 rounded-xl hover:bg-blue-50 transition">
|
|
<span class="px-2.5 py-1 text-xs font-bold bg-navy text-white rounded-lg flex-shrink-0">MOH-1</span>
|
|
<span class="text-sm text-slate flex-1">{% trans "Patient Experience" %}</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 bg-slate-50 rounded-xl hover:bg-blue-50 transition">
|
|
<span class="px-2.5 py-1 text-xs font-bold bg-navy text-white rounded-lg flex-shrink-0">MOH-3</span>
|
|
<span class="text-sm text-slate flex-1">{% trans "Resolution Satisfaction" %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department Reports -->
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-blue rounded-full"></span>
|
|
{% trans "Departmental" %}
|
|
</p>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-3 p-2.5 bg-slate-50 rounded-xl hover:bg-blue-50 transition">
|
|
<span class="px-2.5 py-1 text-xs font-bold bg-blue text-white rounded-lg flex-shrink-0">Dep-KPI-4</span>
|
|
<span class="text-sm text-slate flex-1">{% trans "Response Rate" %}</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 bg-slate-50 rounded-xl hover:bg-blue-50 transition">
|
|
<span class="px-2.5 py-1 text-xs font-bold bg-blue text-white rounded-lg flex-shrink-0">KPI-6</span>
|
|
<span class="text-sm text-slate flex-1">{% trans "Activation (2h)" %}</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 p-2.5 bg-slate-50 rounded-xl hover:bg-blue-50 transition">
|
|
<span class="px-2.5 py-1 text-xs font-bold bg-blue text-white rounded-lg flex-shrink-0">KPI-7</span>
|
|
<span class="text-sm text-slate flex-1">{% trans "Unactivated" %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- N-PAD Reports -->
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-navy rounded-full"></span>
|
|
{% trans "N-PAD Standards" %}
|
|
</p>
|
|
<div class="space-y-2">
|
|
<div class="flex items-center gap-3 p-2.5 bg-slate-50 rounded-xl hover:bg-blue-50 transition">
|
|
<span class="px-2.5 py-1 text-xs font-bold bg-navy text-white rounded-lg flex-shrink-0">N-PAD-001</span>
|
|
<span class="text-sm text-slate flex-1">{% trans "Resolution" %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Tips Card -->
|
|
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl border border-green-200 p-6">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<div class="w-8 h-8 bg-green-100 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-green-600"></i>
|
|
</div>
|
|
<h4 class="font-bold text-green-800">{% trans "Quick Tips" %}</h4>
|
|
</div>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start gap-3">
|
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
<span class="text-sm text-green-700">{% trans "Reports are generated automatically every month" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
<span class="text-sm text-green-700">{% trans "You can regenerate any report with latest data" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
<span class="text-sm text-green-700">{% trans "PDF export is available for all reports" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |