340 lines
15 KiB
HTML
340 lines
15 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}PX Command Center - PX360{% endblock %}
|
|
|
|
{% block page_title %}PX Command Center{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Top KPI Cards -->
|
|
{% include 'layouts/partials/stat_cards.html' with stats=stats %}
|
|
|
|
<!-- Charts Row -->
|
|
<div class="row g-3 mb-4">
|
|
<!-- Complaints Trend -->
|
|
<div class="col-lg-8">
|
|
<div class="card table-card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="bi bi-graph-up me-2"></i>{% trans "Complaints Trend (Last 30 Days)" %}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="complaintsTrendChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Survey Satisfaction -->
|
|
<div class="col-lg-4">
|
|
<div class="card table-card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="bi bi-star me-2"></i>{% trans "Survey Satisfaction" %}</h5>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="display-3 text-primary mb-2">{{ chart_data.survey_satisfaction|floatformat:1 }}</div>
|
|
<p class="text-muted">Average Score (Last 30 Days)</p>
|
|
<div class="progress" style="height: 10px;">
|
|
<div class="progress-bar bg-success" role="progressbar"
|
|
style="width: {{ chart_data.survey_satisfaction|floatformat:0 }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Live Feed Row -->
|
|
<div class="row g-3">
|
|
<!-- Latest High Severity Complaints -->
|
|
<div class="col-lg-6">
|
|
<div class="card table-card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0"><i class="bi bi-exclamation-triangle me-2"></i>{% trans "Latest High Severity Complaints" %}</h5>
|
|
<a href="#" class="btn btn-sm btn-primary">{% trans "View All" %}</a>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% if latest_complaints %}
|
|
<div class="list-group list-group-flush">
|
|
{% for complaint in latest_complaints %}
|
|
<div class="list-group-item">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-1">{{ complaint.title }}</h6>
|
|
<p class="mb-1 text-muted small">
|
|
<i class="bi bi-person me-1"></i>{{ complaint.patient.get_full_name }}
|
|
<i class="bi bi-building ms-2 me-1"></i>{{ complaint.hospital.name }}
|
|
</p>
|
|
<small class="text-muted">{{ complaint.created_at|timesince }} ago</small>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-{{ complaint.severity }}">{{ complaint.get_severity_display }}</span>
|
|
{% if complaint.is_overdue %}
|
|
<span class="badge bg-danger ms-1">OVERDUE</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="p-4 text-center text-muted">
|
|
<i class="bi bi-check-circle fs-1"></i>
|
|
<p class="mt-2">No high severity complaints</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Latest Escalated Actions -->
|
|
<div class="col-lg-6">
|
|
<div class="card table-card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0"><i class="bi bi-arrow-up-circle me-2"></i>{% trans "Latest Escalated Actions" %}</h5>
|
|
<a href="#" class="btn btn-sm btn-primary">{% trans "View All" %}</a>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% if latest_actions %}
|
|
<div class="list-group list-group-flush">
|
|
{% for action in latest_actions %}
|
|
<div class="list-group-item">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-1">{{ action.title }}</h6>
|
|
<p class="mb-1 text-muted small">
|
|
<i class="bi bi-building me-1"></i>{{ action.hospital.name }}
|
|
{% if action.assigned_to %}
|
|
<i class="bi bi-person ms-2 me-1"></i>{{ action.assigned_to.get_full_name }}
|
|
{% endif %}
|
|
</p>
|
|
<small class="text-muted">Escalated {{ action.escalated_at|timesince }} ago</small>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-danger">Level {{ action.escalation_level }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="p-4 text-center text-muted">
|
|
<i class="bi bi-check-circle fs-1"></i>
|
|
<p class="mt-2">No escalated actions</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Physicians This Month -->
|
|
<div class="row g-3 mt-3">
|
|
<div class="col-12">
|
|
<div class="card table-card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0"><i class="bi bi-trophy text-warning me-2"></i>{% trans "Top Physicians This Month" %}</h5>
|
|
<a href="{% url 'physicians:leaderboard' %}" class="btn btn-sm btn-primary">{% trans "View Leaderboard" %}</a>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% if top_physicians %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 60px;">{% trans "Rank" %}</th>
|
|
<th>{% trans "Physician" %}</th>
|
|
<th>{% trans "Specialization" %}</th>
|
|
<th>{% trans "Department" %}</th>
|
|
<th>{% trans "Rating" %}</th>
|
|
<th>{% trans "Surveys" %}</th>
|
|
<th>{% trans "Sentiment" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for rating in top_staff %}
|
|
<tr onclick="window.location=''" style="cursor: pointer;">
|
|
<td>
|
|
{% if forloop.counter == 1 %}
|
|
<h4 class="mb-0"><i class="bi bi-trophy-fill text-warning"></i></h4>
|
|
{% elif forloop.counter == 2 %}
|
|
<h4 class="mb-0"><i class="bi bi-trophy-fill text-secondary"></i></h4>
|
|
{% elif forloop.counter == 3 %}
|
|
<h4 class="mb-0"><i class="bi bi-trophy-fill" style="color: #cd7f32;"></i></h4>
|
|
{% else %}
|
|
<strong class="text-muted">#{{ forloop.counter }}</strong>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<strong>{{ rating.staff }}</strong><br>
|
|
<small class="text-muted">{{ rating.staff.license_number }}</small>
|
|
</td>
|
|
<td>{{ rating.staff.specialization }}</td>
|
|
<td>
|
|
{% if rating.staff.department %}
|
|
{{ rating.staff.department.name }}
|
|
{% else %}
|
|
<span class="text-muted">-</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<h5 class="mb-0 text-success">{{ rating.average_rating|floatformat:2 }}</h5>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-light text-dark">{{ rating.total_surveys }}</span>
|
|
</td>
|
|
<td>
|
|
<div class="d-flex gap-1">
|
|
<span class="badge bg-success" title="{% trans 'Positive' %}">{{ rating.positive_count }}</span>
|
|
<span class="badge bg-warning" title="{% trans 'Neutral' %}">{{ rating.neutral_count }}</span>
|
|
<span class="badge bg-danger" title="{% trans 'Negative' %}">{{ rating.negative_count }}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="p-4 text-center text-muted">
|
|
<i class="bi bi-trophy fs-1"></i>
|
|
<p class="mt-2">{% trans "No physician ratings available for this month" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% if physician_stats.total_physicians %}
|
|
<div class="card-footer bg-light">
|
|
<div class="row text-center">
|
|
<div class="col-4">
|
|
<strong>{{ physician_stats.total_physicians }}</strong>
|
|
<br><small class="text-muted">{% trans "Physicians Rated" %}</small>
|
|
</div>
|
|
<div class="col-4">
|
|
<strong>{{ physician_stats.avg_rating|floatformat:2 }}</strong>
|
|
<br><small class="text-muted">{% trans "Average Rating" %}</small>
|
|
</div>
|
|
<div class="col-4">
|
|
<strong>{{ physician_stats.total_surveys }}</strong>
|
|
<br><small class="text-muted">{% trans "Total Surveys" %}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Latest Integration Events -->
|
|
<div class="row g-3 mt-3">
|
|
<div class="col-12">
|
|
<div class="card table-card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0"><i class="bi bi-activity me-2"></i>{% trans "Latest Integration Events" %}</h5>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% if latest_events %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Source" %}</th>
|
|
<th>{% trans "Event Code" %}</th>
|
|
<th>{% trans "Encounter ID" %}</th>
|
|
<th>{% trans "Status" %}</th>
|
|
<th>{% trans "Processed At" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for event in latest_events %}
|
|
<tr>
|
|
<td><span class="badge bg-info">{{ event.get_source_system_display }}</span></td>
|
|
<td><code>{{ event.event_code }}</code></td>
|
|
<td>{{ event.encounter_id }}</td>
|
|
<td><span class="badge bg-success">{{ event.get_status_display }}</span></td>
|
|
<td>{{ event.processed_at|timesince }} ago</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="p-4 text-center text-muted">
|
|
<i class="bi bi-inbox fs-1"></i>
|
|
<p class="mt-2">No recent events</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Complaints Trend Chart - ApexCharts
|
|
const chartElement = document.getElementById('complaintsTrendChart');
|
|
if (chartElement) {
|
|
const trendData = {{ chart_data.complaints_trend|safe }};
|
|
|
|
var options = {
|
|
series: [{
|
|
name: 'Complaints',
|
|
data: trendData.map(d => d.count)
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
height: 320,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 3
|
|
},
|
|
colors: ['#ef4444'],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.1,
|
|
}
|
|
},
|
|
xaxis: {
|
|
categories: trendData.map(d => d.date),
|
|
labels: {
|
|
style: {
|
|
fontSize: '12px'
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
forceNiceScale: true,
|
|
labels: {
|
|
style: {
|
|
fontSize: '12px'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
borderColor: '#e7e7e7',
|
|
strokeDashArray: 5
|
|
},
|
|
tooltip: {
|
|
theme: 'light',
|
|
x: {
|
|
format: 'dd MMM yyyy'
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(chartElement, options);
|
|
chart.render();
|
|
}
|
|
</script>
|
|
{% endblock %}
|