736 lines
30 KiB
HTML
736 lines
30 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{{ report.indicator_title }} - {% trans "KPI Report" %}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Button Styles */
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1.25rem;
|
|
background: linear-gradient(to right, #005696, #007bbd);
|
|
color: white;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
border-radius: 0.75rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 86, 150, 0.2);
|
|
}
|
|
.btn-primary:hover {
|
|
opacity: 0.9;
|
|
box-shadow: 0 6px 8px -1px rgba(0, 86, 150, 0.3);
|
|
}
|
|
.btn-primary:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1.25rem;
|
|
background: white;
|
|
color: #475569;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
border-radius: 0.75rem;
|
|
border: 1px solid #e2e8f0;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-secondary:hover {
|
|
background: #f8fafc;
|
|
border-color: #cbd5e1;
|
|
}
|
|
|
|
/* Card styling */
|
|
.card {
|
|
background: white;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="p-6">
|
|
<!-- Header -->
|
|
<div class="flex flex-wrap justify-between items-start gap-4 mb-6">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<a href="{% url 'analytics:kpi_report_list' %}" class="text-blue hover:text-navy">
|
|
<i data-lucide="arrow-left" class="w-5 h-5"></i>
|
|
</a>
|
|
<span class="px-2 py-1 text-xs font-bold rounded bg-navy text-white">{{ report.kpi_id }}</span>
|
|
<span class="text-slate">|</span>
|
|
<span class="text-slate">{{ report.report_period_display }}</span>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-navy">{{ report.indicator_title }}</h1>
|
|
<p class="text-slate mt-1">
|
|
<i data-lucide="building-2" class="w-4 h-4 inline mr-1"></i>
|
|
{{ report.hospital.name }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<a href="{% url 'analytics:kpi_report_pdf' report.id %}"
|
|
class="btn-secondary flex items-center gap-2">
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
{% trans "Export PDF" %}
|
|
</a>
|
|
<form method="post" action="{% url 'analytics:kpi_report_regenerate' report.id %}"
|
|
onsubmit="return confirm('{% trans "Regenerate this report? Current data will be replaced." %}')">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn-secondary flex items-center gap-2">
|
|
<i data-lucide="refresh-cw" class="w-4 h-4"></i>
|
|
{% trans "Regenerate" %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Table (Excel-style) -->
|
|
<div class="card mb-6 overflow-x-auto">
|
|
<table class="w-full border-collapse min-w-[800px]">
|
|
<!-- Header Row -->
|
|
<thead>
|
|
<tr class="bg-navy text-white">
|
|
<th class="p-3 text-left text-sm font-semibold border border-slate-300">{% trans "KPI ID" %}</th>
|
|
<th class="p-3 text-left text-sm font-semibold border border-slate-300 w-64">{% trans "Indicator Title" %}</th>
|
|
<th class="p-3 text-left text-sm font-semibold border border-slate-300">{% trans "Numerator / Denominator" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Jan" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Feb" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Mar" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Apr" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "May" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Jun" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Jul" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Aug" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Sep" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Oct" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Nov" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Dec" %}</th>
|
|
<th class="p-3 text-center text-sm font-semibold border border-slate-300 bg-blue">{% trans "TOTAL" %}</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<!-- Row 1: Numerator -->
|
|
<tr class="bg-white">
|
|
<td rowspan="3" class="p-3 border border-slate-300 text-center text-blue font-bold align-middle">
|
|
{{ report.kpi_id }}
|
|
</td>
|
|
<td rowspan="3" class="p-3 border border-slate-300 text-left font-bold text-navy align-middle">
|
|
{{ report.indicator_title }}
|
|
</td>
|
|
<td class="p-3 border border-slate-300 text-left bg-slate-50 text-sm">
|
|
{{ report.numerator_label }}
|
|
</td>
|
|
{% for m in monthly_data %}
|
|
<td class="p-3 border border-slate-300 text-center text-sm">{% if m %}{{ m.numerator }}{% else %}-{% endif %}</td>
|
|
{% endfor %}
|
|
<td class="p-3 border border-slate-300 text-center font-bold bg-slate-100">{{ report.total_numerator }}</td>
|
|
</tr>
|
|
|
|
<!-- Row 2: Denominator -->
|
|
<tr class="bg-white">
|
|
<td class="p-3 border border-slate-300 text-left bg-slate-50 text-sm">
|
|
{{ report.denominator_label }}
|
|
</td>
|
|
{% for m in monthly_data %}
|
|
<td class="p-3 border border-slate-300 text-center text-sm">{% if m %}{{ m.denominator }}{% else %}-{% endif %}</td>
|
|
{% endfor %}
|
|
<td class="p-3 border border-slate-300 text-center font-bold bg-slate-100">{{ report.total_denominator }}</td>
|
|
</tr>
|
|
|
|
<!-- Row 3: Result % -->
|
|
<tr class="bg-white font-semibold">
|
|
<td class="p-3 border border-slate-300 text-left text-navy bg-slate-100">
|
|
{% trans "Result (%)" %}
|
|
</td>
|
|
{% for m in monthly_data %}
|
|
<td class="p-3 border border-slate-300 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 border-slate-300 text-center font-bold bg-navy text-white">
|
|
{{ report.overall_result }}%
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Metadata Badges -->
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-2 text-xs bg-light p-4 rounded-lg border border-slate-200 mb-6">
|
|
<div>
|
|
<span class="font-semibold text-navy">{% trans "Category:" %}</span> {{ report.category }}
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-navy">{% trans "Type:" %}</span> {{ report.kpi_type }}
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-navy">{% trans "Risk:" %}</span>
|
|
<span class="px-1.5 py-0.5 rounded text-xs
|
|
{% if report.risk_level == 'High' %}bg-red-100 text-red-800
|
|
{% elif report.risk_level == 'Medium' %}bg-yellow-100 text-yellow-800
|
|
{% else %}bg-green-100 text-green-800{% endif %}">
|
|
{{ report.risk_level }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-navy">{% trans "Data coll.:" %}</span> {{ report.data_collection_method }}
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-navy">{% trans "Method:" %}</span> {{ report.data_collection_frequency }}
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-navy">{% trans "Dimension:" %}</span> {{ report.dimension }}
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-navy">{% trans "Gather freq.:" %}</span> {{ report.data_collection_frequency }}
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-navy">{% trans "Reporting:" %}</span> {{ report.reporting_frequency }}
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-navy">{% trans "Collector:" %}</span> {{ report.collector_name|default:"-" }}
|
|
</div>
|
|
<div>
|
|
<span class="font-semibold text-navy">{% trans "Analyzer:" %}</span> {{ report.analyzer_name|default:"-" }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
|
<!-- Trend Chart -->
|
|
<div class="card lg:col-span-2">
|
|
<h3 class="text-sm font-bold text-navy uppercase mb-4 flex items-center gap-2">
|
|
<i data-lucide="trending-up" class="w-4 h-4"></i>
|
|
{% trans "Monthly Performance Trend (%)" %}
|
|
<span class="text-slate font-normal">[{% trans "Target:" %} {{ report.target_percentage }}%]</span>
|
|
</h3>
|
|
<div id="trendChart" style="height: 300px;"></div>
|
|
</div>
|
|
|
|
<!-- Source Chart -->
|
|
<div class="card">
|
|
<h3 class="text-sm font-bold text-navy uppercase mb-4 flex items-center gap-2">
|
|
<i data-lucide="pie-chart" class="w-4 h-4"></i>
|
|
{% trans "Complaints by Source" %}
|
|
</h3>
|
|
<div id="sourceChart" style="height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department Breakdown -->
|
|
<div class="card mb-6">
|
|
<h3 class="text-sm font-bold text-navy uppercase mb-4 flex items-center gap-2">
|
|
<i data-lucide="building" class="w-4 h-4"></i>
|
|
{% trans "Department Breakdown" %}
|
|
</h3>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{% for dept in department_breakdowns %}
|
|
<div class="border rounded-lg p-4
|
|
{% if dept.department_category == 'medical' %}border-blue-200 bg-blue-50
|
|
{% elif dept.department_category == 'nursing' %}border-slate-200 bg-slate-50
|
|
{% elif dept.department_category == 'admin' %}border-green-200 bg-green-50
|
|
{% else %}border-yellow-200 bg-yellow-50{% endif %}">
|
|
<h4 class="text-xs font-bold px-2 py-1 rounded mb-2 inline-block
|
|
{% if dept.department_category == 'medical' %}bg-blue text-white
|
|
{% elif dept.department_category == 'nursing' %}bg-slate text-white
|
|
{% elif dept.department_category == 'admin' %}bg-green-600 text-white
|
|
{% else %}bg-yellow-600 text-white{% endif %}">
|
|
{{ dept.get_department_category_display }}
|
|
</h4>
|
|
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate">{% trans "Complaints:" %}</span>
|
|
<span class="font-semibold">{{ dept.complaint_count }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate">{% trans "Resolved:" %}</span>
|
|
<span class="font-semibold">{{ dept.resolved_count }}</span>
|
|
</div>
|
|
{% if dept.avg_resolution_days %}
|
|
<div class="flex justify-between">
|
|
<span class="text-slate">{% trans "Avg Days:" %}</span>
|
|
<span class="font-semibold">{{ dept.avg_resolution_days }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if dept.top_areas %}
|
|
<div class="mt-3 pt-3 border-t text-xs text-slate">
|
|
<p class="font-semibold mb-1">{% trans "Top Areas:" %}</p>
|
|
<p class="whitespace-pre-line">{{ dept.top_areas }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Analysis Section -->
|
|
<div class="card mb-6" id="aiAnalysisSection">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-sm font-bold text-navy uppercase flex items-center gap-2">
|
|
<i data-lucide="brain" class="w-4 h-4"></i>
|
|
{% trans "AI-Generated Analysis" %}
|
|
{% if report.ai_analysis_generated_at %}
|
|
<span class="text-xs font-normal text-slate lowercase">
|
|
({% trans "Generated:" %} {{ report.ai_analysis_generated_at|date:"Y-m-d H:i" }})
|
|
</span>
|
|
{% endif %}
|
|
</h3>
|
|
<div class="flex gap-2">
|
|
{% if report.ai_analysis %}
|
|
<button id="editAiAnalysisBtn" class="btn-secondary flex items-center gap-2 text-xs"
|
|
data-report-id="{{ report.id }}">
|
|
<i data-lucide="edit" class="w-4 h-4"></i>
|
|
{% trans "Edit Analysis" %}
|
|
</button>
|
|
{% endif %}
|
|
<button id="generateAiAnalysisBtn" class="btn-primary flex items-center gap-2 text-xs"
|
|
data-report-id="{{ report.id }}">
|
|
<i data-lucide="sparkles" class="w-4 h-4"></i>
|
|
{% if report.ai_analysis %}{% trans "Regenerate" %}{% else %}{% trans "Generate" %}{% endif %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View Mode -->
|
|
<div id="aiAnalysisContent">
|
|
{% if report.ai_analysis %}
|
|
{% with analysis=report.ai_analysis %}
|
|
<!-- Executive Summary -->
|
|
{% if analysis.executive_summary %}
|
|
<div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
|
<h4 class="text-sm font-bold text-blue mb-2">{% trans "Executive Summary" %}</h4>
|
|
<p class="text-sm text-navy">{{ analysis.executive_summary }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Performance Analysis -->
|
|
{% if analysis.performance_analysis %}
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-bold text-navy mb-2">{% trans "Performance Analysis" %}</h4>
|
|
<p class="text-sm text-slate">{{ analysis.performance_analysis }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Key Findings -->
|
|
{% if analysis.key_findings %}
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-bold text-navy mb-2">{% trans "Key Findings" %}</h4>
|
|
<ul class="list-disc list-inside text-sm text-slate space-y-1">
|
|
{% for finding in analysis.key_findings %}
|
|
<li>{{ finding }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Reasons for Delays -->
|
|
{% if analysis.reasons_for_delays %}
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-bold text-navy mb-2">{% trans "Reasons for Delays" %}</h4>
|
|
<ul class="list-disc list-inside text-sm text-slate space-y-1">
|
|
{% for reason in analysis.reasons_for_delays %}
|
|
<li>{{ reason }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Resolution Time Analysis -->
|
|
{% if analysis.resolution_time_analysis %}
|
|
<div class="mb-4">
|
|
<h4 class="text-sm font-bold text-navy mb-2">{% trans "Resolution Time Breakdown" %}</h4>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
|
|
{% if analysis.resolution_time_analysis.within_24h %}
|
|
<div class="p-3 bg-green-50 border border-green-200 rounded text-center">
|
|
<p class="text-xs text-slate">{% trans "Within 24h" %}</p>
|
|
<p class="text-lg font-bold text-green-600">{{ analysis.resolution_time_analysis.within_24h.count }}</p>
|
|
<p class="text-xs text-green-600">{{ analysis.resolution_time_analysis.within_24h.percentage }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if analysis.resolution_time_analysis.within_48h %}
|
|
<div class="p-3 bg-blue-50 border border-blue-200 rounded text-center">
|
|
<p class="text-xs text-slate">{% trans "Within 48h" %}</p>
|
|
<p class="text-lg font-bold text-blue-600">{{ analysis.resolution_time_analysis.within_48h.count }}</p>
|
|
<p class="text-xs text-blue-600">{{ analysis.resolution_time_analysis.within_48h.percentage }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if analysis.resolution_time_analysis.within_72h %}
|
|
<div class="p-3 bg-yellow-50 border border-yellow-200 rounded text-center">
|
|
<p class="text-xs text-slate">{% trans "Within 72h" %}</p>
|
|
<p class="text-lg font-bold text-yellow-600">{{ analysis.resolution_time_analysis.within_72h.count }}</p>
|
|
<p class="text-xs text-yellow-600">{{ analysis.resolution_time_analysis.within_72h.percentage }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if analysis.resolution_time_analysis.over_72h %}
|
|
<div class="p-3 bg-red-50 border border-red-200 rounded text-center">
|
|
<p class="text-xs text-slate">{% trans "Over 72h" %}</p>
|
|
<p class="text-lg font-bold text-red-600">{{ analysis.resolution_time_analysis.over_72h.count }}</p>
|
|
<p class="text-xs text-red-600">{{ analysis.resolution_time_analysis.over_72h.percentage }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Recommendations -->
|
|
{% if analysis.recommendations %}
|
|
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
|
|
<h4 class="text-sm font-bold text-green-800 mb-2">{% trans "Recommendations" %}</h4>
|
|
<ul class="list-disc list-inside text-sm text-green-700 space-y-1">
|
|
{% for rec in analysis.recommendations %}
|
|
<li>{{ rec }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% else %}
|
|
<div class="text-center py-8 text-slate" id="noAnalysisMessage">
|
|
<i data-lucide="sparkles" class="w-12 h-12 mx-auto mb-3 opacity-50"></i>
|
|
<p>{% trans "No AI analysis available yet. Click 'Generate Analysis' to create one." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="aiAnalysisLoading" class="hidden text-center py-8">
|
|
<div class="inline-block w-8 h-8 border-4 border-slate-200 border-t-blue rounded-full animate-spin mb-3"></div>
|
|
<p class="text-slate">{% trans "Generating AI analysis... This may take a moment." %}</p>
|
|
</div>
|
|
|
|
<!-- Edit Mode Form -->
|
|
<div id="aiAnalysisEditForm" class="hidden">
|
|
{% if report.ai_analysis %}
|
|
<div class="space-y-4">
|
|
<!-- Executive Summary -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-navy mb-1">{% trans "Executive Summary" %}</label>
|
|
<textarea id="editExecutiveSummary" rows="3" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-blue">{{ report.ai_analysis.executive_summary|default:"" }}</textarea>
|
|
</div>
|
|
|
|
<!-- Performance Analysis -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-navy mb-1">{% trans "Performance Analysis" %}</label>
|
|
<textarea id="editPerformanceAnalysis" rows="4" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-blue">{{ report.ai_analysis.performance_analysis|default:"" }}</textarea>
|
|
</div>
|
|
|
|
<!-- Key Findings -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-navy mb-1">{% trans "Key Findings (one per line)" %}</label>
|
|
<textarea id="editKeyFindings" rows="4" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-blue">{% if report.ai_analysis.key_findings %}{% for finding in report.ai_analysis.key_findings %}{{ finding }}{% if not forloop.last %}
|
|
{% endif %}{% endfor %}{% endif %}</textarea>
|
|
</div>
|
|
|
|
<!-- Reasons for Delays -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-navy mb-1">{% trans "Reasons for Delays (one per line)" %}</label>
|
|
<textarea id="editReasonsForDelays" rows="4" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-blue">{% if report.ai_analysis.reasons_for_delays %}{% for reason in report.ai_analysis.reasons_for_delays %}{{ reason }}{% if not forloop.last %}
|
|
{% endif %}{% endfor %}{% endif %}</textarea>
|
|
</div>
|
|
|
|
<!-- Recommendations -->
|
|
<div>
|
|
<label class="block text-sm font-bold text-navy mb-1">{% trans "Recommendations (one per line)" %}</label>
|
|
<textarea id="editRecommendations" rows="4" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-blue">{% if report.ai_analysis.recommendations %}{% for rec in report.ai_analysis.recommendations %}{{ rec }}{% if not forloop.last %}
|
|
{% endif %}{% endfor %}{% endif %}</textarea>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex gap-2 pt-4 border-t">
|
|
<button id="saveAiAnalysisBtn" class="btn-primary flex items-center gap-2 text-sm"
|
|
data-report-id="{{ report.id }}">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{% trans "Save Changes" %}
|
|
</button>
|
|
<button id="cancelEditBtn" class="btn-secondary flex items-center gap-2 text-sm">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Info Footer -->
|
|
<div class="text-xs text-slate text-center">
|
|
<p>
|
|
{% trans "Generated" %}: {{ report.generated_at|default:"-" }}
|
|
{% if report.generated_by %}{% trans "by" %} {{ report.generated_by.get_full_name }}{% endif %}
|
|
| {% trans "Status" %}: {{ report.get_status_display }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.45.0/dist/apexcharts.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Lucide icons
|
|
if (typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Parse chart data safely
|
|
let trendData, sourceData;
|
|
try {
|
|
trendData = JSON.parse('{{ trend_chart_data_json|escapejs }}');
|
|
sourceData = JSON.parse('{{ source_chart_data_json|escapejs }}');
|
|
} catch (e) {
|
|
console.error('Error parsing chart data:', e);
|
|
return;
|
|
}
|
|
|
|
// Validate data
|
|
if (!trendData || !trendData.data || !Array.isArray(trendData.data)) {
|
|
console.error('Invalid trend data');
|
|
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 };
|
|
}
|
|
|
|
if (!sourceData || !sourceData.data || !Array.isArray(sourceData.data)) {
|
|
console.error('Invalid source data');
|
|
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: 300,
|
|
fontFamily: 'inherit',
|
|
toolbar: { show: false },
|
|
animations: { enabled: false }
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 3
|
|
},
|
|
colors: ['#005696'],
|
|
xaxis: {
|
|
categories: trendData.labels,
|
|
labels: { style: { fontSize: '11px' } }
|
|
},
|
|
yaxis: {
|
|
max: 100,
|
|
min: 0,
|
|
labels: { formatter: function(val) { return val + '%'; } }
|
|
},
|
|
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' }
|
|
}
|
|
}]
|
|
} : {},
|
|
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: 300,
|
|
fontFamily: 'inherit',
|
|
animations: { enabled: false }
|
|
},
|
|
colors: ['#005696', '#007bbd', '#64748b', '#94a3b8', '#cbd5e1', '#e2e8f0'],
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: '65%'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'bottom',
|
|
fontSize: '11px'
|
|
},
|
|
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);
|
|
}
|
|
}
|
|
|
|
// AI Analysis Generation
|
|
const generateBtn = document.getElementById('generateAiAnalysisBtn');
|
|
if (generateBtn) {
|
|
generateBtn.addEventListener('click', async function() {
|
|
const reportId = this.dataset.reportId;
|
|
const contentDiv = document.getElementById('aiAnalysisContent');
|
|
const loadingDiv = document.getElementById('aiAnalysisLoading');
|
|
|
|
// Show loading, hide content
|
|
contentDiv.classList.add('hidden');
|
|
loadingDiv.classList.remove('hidden');
|
|
generateBtn.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch(`/analytics/api/kpi-reports/${reportId}/ai-analysis/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value ||
|
|
document.cookie.split('; ').find(r => r.startsWith('csrftoken='))?.split('=')[1]
|
|
}
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
// Reload page to show new analysis
|
|
window.location.reload();
|
|
} else {
|
|
alert(data.error || 'Failed to generate analysis');
|
|
contentDiv.classList.remove('hidden');
|
|
loadingDiv.classList.add('hidden');
|
|
generateBtn.disabled = false;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Failed to generate analysis. Please try again.');
|
|
contentDiv.classList.remove('hidden');
|
|
loadingDiv.classList.add('hidden');
|
|
generateBtn.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Edit AI Analysis
|
|
const editBtn = document.getElementById('editAiAnalysisBtn');
|
|
const cancelEditBtn = document.getElementById('cancelEditBtn');
|
|
const saveBtn = document.getElementById('saveAiAnalysisBtn');
|
|
const contentDiv = document.getElementById('aiAnalysisContent');
|
|
const editForm = document.getElementById('aiAnalysisEditForm');
|
|
|
|
if (editBtn && contentDiv && editForm) {
|
|
// Enter edit mode
|
|
editBtn.addEventListener('click', function() {
|
|
contentDiv.classList.add('hidden');
|
|
editForm.classList.remove('hidden');
|
|
editBtn.classList.add('hidden');
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
});
|
|
}
|
|
|
|
if (cancelEditBtn && contentDiv && editForm) {
|
|
// Cancel edit mode
|
|
cancelEditBtn.addEventListener('click', function() {
|
|
editForm.classList.add('hidden');
|
|
contentDiv.classList.remove('hidden');
|
|
editBtn.classList.remove('hidden');
|
|
});
|
|
}
|
|
|
|
if (saveBtn && editForm) {
|
|
// Save edited analysis
|
|
saveBtn.addEventListener('click', async function() {
|
|
const reportId = this.dataset.reportId;
|
|
|
|
// Build analysis object from form fields
|
|
const analysis = {
|
|
executive_summary: document.getElementById('editExecutiveSummary')?.value || '',
|
|
performance_analysis: document.getElementById('editPerformanceAnalysis')?.value || '',
|
|
key_findings: (document.getElementById('editKeyFindings')?.value || '').split('\n').filter(f => f.trim()),
|
|
reasons_for_delays: (document.getElementById('editReasonsForDelays')?.value || '').split('\n').filter(r => r.trim()),
|
|
recommendations: (document.getElementById('editRecommendations')?.value || '').split('\n').filter(r => r.trim()),
|
|
// Preserve existing resolution_time_analysis and other fields
|
|
resolution_time_analysis: {{ report.ai_analysis.resolution_time_analysis|safe|default:"null" }},
|
|
department_analysis: {{ report.ai_analysis.department_analysis|safe|default:"null" }},
|
|
source_analysis: {{ report.ai_analysis.source_analysis|safe|default:"null" }}
|
|
};
|
|
|
|
// Disable button during save
|
|
saveBtn.disabled = true;
|
|
saveBtn.innerHTML = '<span class="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>Saving...';
|
|
|
|
try {
|
|
const response = await fetch(`/analytics/api/kpi-reports/${reportId}/ai-analysis/save/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value ||
|
|
document.cookie.split('; ').find(r => r.startsWith('csrftoken='))?.split('=')[1]
|
|
},
|
|
body: JSON.stringify({ analysis: analysis })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
// Reload page to show updated analysis
|
|
window.location.reload();
|
|
} else {
|
|
alert(data.error || 'Failed to save analysis');
|
|
saveBtn.disabled = false;
|
|
saveBtn.innerHTML = '<i data-lucide="save" class="w-4 h-4"></i> Save Changes';
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Failed to save analysis. Please try again.');
|
|
saveBtn.disabled = false;
|
|
saveBtn.innerHTML = '<i data-lucide="save" class="w-4 h-4"></i> Save Changes';
|
|
if (typeof lucide !== 'undefined') lucide.createIcons();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|