856 lines
34 KiB
HTML
856 lines
34 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "PX Command Center" %}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Al Hammadi Theme - Command Center Styles */
|
|
.kpi-card {
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
border-left: 4px solid var(--hh-primary);
|
|
}
|
|
.kpi-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--hh-shadow-lg);
|
|
}
|
|
.kpi-card.border-left-primary { border-left-color: var(--hh-primary); }
|
|
.kpi-card.border-left-warning { border-left-color: var(--hh-warning); }
|
|
.kpi-card.border-left-danger { border-left-color: var(--hh-accent); }
|
|
.kpi-card.border-left-success { border-left-color: var(--hh-success); }
|
|
.kpi-card.border-left-info { border-left-color: var(--hh-primary-light); }
|
|
.kpi-card.border-left-secondary { border-left-color: var(--hh-secondary); }
|
|
|
|
.kpi-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
}
|
|
.kpi-trend-up {
|
|
color: var(--hh-accent);
|
|
}
|
|
.kpi-trend-down {
|
|
color: var(--hh-success);
|
|
}
|
|
.chart-container {
|
|
min-height: 350px;
|
|
}
|
|
.filter-panel {
|
|
background: var(--hh-bg-light);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
}
|
|
.filter-panel.collapsed .filter-content {
|
|
display: none;
|
|
}
|
|
.loading-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(255,255,255,0.9);
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999;
|
|
}
|
|
.loading-overlay.active {
|
|
display: flex;
|
|
}
|
|
.loading-overlay .spinner-border {
|
|
color: var(--hh-primary);
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
.physician-row:hover {
|
|
background-color: var(--hh-primary-bg);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* KPI Text Colors */
|
|
.text-primary { color: var(--hh-primary) !important; }
|
|
.text-warning { color: var(--hh-warning) !important; }
|
|
.text-danger { color: var(--hh-accent) !important; }
|
|
.text-success { color: var(--hh-success) !important; }
|
|
.text-info { color: var(--hh-primary-light) !important; }
|
|
.text-secondary { color: var(--hh-secondary) !important; }
|
|
|
|
/* Card Header Styling */
|
|
.card-header h6 {
|
|
color: var(--hh-text-dark);
|
|
}
|
|
|
|
/* Table Styling */
|
|
.table thead th {
|
|
background: var(--hh-bg-light);
|
|
color: var(--hh-text-dark);
|
|
font-weight: 600;
|
|
border-bottom: 2px solid var(--hh-border);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Loading Overlay -->
|
|
<div class="loading-overlay" id="loadingOverlay">
|
|
<div class="text-center">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">{% trans "Loading..." %}</span>
|
|
</div>
|
|
<p class="mt-2">{% trans "Loading dashboard data..." %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-0">{% trans "PX Command Center" %}</h1>
|
|
<p class="text-muted">{% trans "Comprehensive Patient Experience Analytics Dashboard" %}</p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<!-- Export Buttons -->
|
|
<div class="dropdown">
|
|
<button class="btn btn-success dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown">
|
|
<i class="bi bi-download"></i> {% trans "Export" %}
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="exportDropdown">
|
|
<li><a class="dropdown-item" href="#" onclick="exportDashboard('excel')">
|
|
<i class="bi bi-file-earmark-excel"></i> {% trans "Export to Excel" %}
|
|
</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="exportDashboard('pdf')">
|
|
<i class="bi bi-file-earmark-pdf"></i> {% trans "Export to PDF" %}
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
<button class="btn btn-primary" onclick="refreshDashboard()">
|
|
<i class="bi bi-arrow-clockwise"></i> {% trans "Refresh" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Panel -->
|
|
<div class="card mb-4">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0">
|
|
<i class="bi bi-funnel"></i> {% trans "Filters" %}
|
|
</h6>
|
|
<button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#filterContent">
|
|
<i class="bi bi-chevron-down"></i>
|
|
</button>
|
|
</div>
|
|
<div class="collapse show" id="filterContent">
|
|
<div class="card-body filter-content">
|
|
<form id="filterForm">
|
|
<div class="row g-3">
|
|
<!-- Date Range -->
|
|
<div class="col-md-3">
|
|
<label class="form-label">{% trans "Date Range" %}</label>
|
|
<select class="form-select" name="date_range" id="dateRange" onchange="handleDateRangeChange()">
|
|
<option value="7d" {% if filters.date_range == '7d' %}selected{% endif %}>{% trans "Last 7 Days" %}</option>
|
|
<option value="30d" {% if filters.date_range == '30d' %}selected{% endif %}>{% trans "Last 30 Days" %}</option>
|
|
<option value="90d" {% if filters.date_range == '90d' %}selected{% endif %}>{% trans "Last 90 Days" %}</option>
|
|
<option value="this_month" {% if filters.date_range == 'this_month' %}selected{% endif %}>{% trans "This Month" %}</option>
|
|
<option value="last_month" {% if filters.date_range == 'last_month' %}selected{% endif %}>{% trans "Last Month" %}</option>
|
|
<option value="quarter" {% if filters.date_range == 'quarter' %}selected{% endif %}>{% trans "This Quarter" %}</option>
|
|
<option value="year" {% if filters.date_range == 'year' %}selected{% endif %}>{% trans "This Year" %}</option>
|
|
<option value="custom" {% if filters.date_range == 'custom' %}selected{% endif %}>{% trans "Custom Range" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Custom Date Range -->
|
|
<div class="col-md-3 d-none" id="customDateRange">
|
|
<label class="form-label">{% trans "Custom Range" %}</label>
|
|
<div class="input-group">
|
|
<input type="date" class="form-control" name="custom_start" id="customStart" value="{{ filters.custom_start|default:'' }}">
|
|
<span class="input-group-text">to</span>
|
|
<input type="date" class="form-control" name="custom_end" id="customEnd" value="{{ filters.custom_end|default:'' }}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hospital -->
|
|
<div class="col-md-3">
|
|
<label class="form-label">{% trans "Hospital" %}</label>
|
|
<select class="form-select" name="hospital" id="hospitalFilter" onchange="loadDepartments()">
|
|
<option value="">{% trans "All Hospitals" %}</option>
|
|
{% for hospital in hospitals %}
|
|
<option value="{{ hospital.id }}" {% if filters.hospital == hospital.id|stringformat:"s" %}selected{% endif %}>
|
|
{{ hospital.name_en|default:hospital.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Department -->
|
|
<div class="col-md-3">
|
|
<label class="form-label">{% trans "Department" %}</label>
|
|
<select class="form-select" name="department" id="departmentFilter">
|
|
<option value="">{% trans "All Departments" %}</option>
|
|
{% for department in departments %}
|
|
<option value="{{ department.id }}" {% if filters.department == department.id|stringformat:"s" %}selected{% endif %}>
|
|
{{ department.name_en|default:department.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- KPI Category -->
|
|
<div class="col-md-3">
|
|
<label class="form-label">{% trans "KPI Category" %}</label>
|
|
<select class="form-select" name="kpi_category" id="kpiCategoryFilter">
|
|
<option value="">{% trans "All Categories" %}</option>
|
|
<option value="complaints">{% trans "Complaints" %}</option>
|
|
<option value="surveys">{% trans "Surveys" %}</option>
|
|
<option value="actions">{% trans "Actions" %}</option>
|
|
<option value="physicians">{% trans "Physicians" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Apply/Reset Buttons -->
|
|
<div class="col-md-3 d-flex align-items-end">
|
|
<button type="submit" class="btn btn-primary me-2">
|
|
<i class="bi bi-check-circle"></i> {% trans "Apply Filters" %}
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary" onclick="resetFilters()">
|
|
<i class="bi bi-x-circle"></i> {% trans "Reset" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI Cards Section -->
|
|
<div class="row mb-4" id="kpiSection">
|
|
<!-- Complaints KPIs -->
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-left-primary">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
|
|
{% trans "Total Complaints" %}
|
|
</div>
|
|
<div class="kpi-value text-primary" id="totalComplaints">0</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<small class="text-muted" id="complaintsTrend">
|
|
{% if kpis.complaints_trend.percentage_change > 0 %}
|
|
<span class="kpi-trend-up"><i class="bi bi-arrow-up"></i> {{ kpis.complaints_trend.percentage_change|floatformat:1 }}%</span>
|
|
{% elif kpis.complaints_trend.percentage_change < 0 %}
|
|
<span class="kpi-trend-down"><i class="bi bi-arrow-down"></i> {{ kpis.complaints_trend.percentage_change|floatformat:1 }}%</span>
|
|
{% else %}
|
|
<span class="text-muted"><i class="bi bi-dash"></i> 0%</span>
|
|
{% endif %}
|
|
</small>
|
|
<div class="text-muted small">{% trans "vs last period" %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-left-warning">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
|
|
{% trans "Open Complaints" %}
|
|
</div>
|
|
<div class="kpi-value text-warning" id="openComplaints">0</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="bi bi-exclamation-triangle text-warning fs-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-left-danger">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
|
|
{% trans "Overdue Complaints" %}
|
|
</div>
|
|
<div class="kpi-value text-danger" id="overdueComplaints">0</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="bi bi-clock text-danger fs-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-left-success">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
|
|
{% trans "Resolved Complaints" %}
|
|
</div>
|
|
<div class="kpi-value text-success" id="resolvedComplaints">0</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="bi bi-check-circle text-success fs-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions KPIs -->
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-left-info">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
|
|
{% trans "Total Actions" %}
|
|
</div>
|
|
<div class="kpi-value text-info" id="totalActions">0</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="bi bi-list-task text-info fs-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-left-secondary">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">
|
|
{% trans "Overdue Actions" %}
|
|
</div>
|
|
<div class="kpi-value text-secondary" id="overdueActions">0</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="bi bi-clock-history text-secondary fs-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Surveys KPIs -->
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-left-success">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
|
|
{% trans "Avg Survey Score" %}
|
|
</div>
|
|
<div class="kpi-value text-success" id="avgSurveyScore">0.0</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="bi bi-star text-success fs-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="card kpi-card border-left-danger">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
|
|
{% trans "Negative Surveys" %}
|
|
</div>
|
|
<div class="kpi-value text-danger" id="negativeSurveys">0</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<i class="bi bi-emoji-frown text-danger fs-3"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row 1 -->
|
|
<div class="row mb-4">
|
|
<!-- Complaints Trend Chart -->
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h6 class="m-0 font-weight-bold">{% trans "Complaints Trend" %}</h6>
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-outline-secondary active">Line</button>
|
|
<button type="button" class="btn btn-outline-secondary">Area</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container" id="complaintsTrendChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Complaints by Category Chart -->
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="m-0 font-weight-bold">{% trans "Complaints by Category" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container" id="complaintsByCategoryChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row 2 -->
|
|
<div class="row mb-4">
|
|
<!-- Survey Satisfaction Trend -->
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="m-0 font-weight-bold">{% trans "Survey Satisfaction Trend" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container" id="surveySatisfactionChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Survey Distribution -->
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="m-0 font-weight-bold">{% trans "Survey Distribution" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container" id="surveyDistributionChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row 3 -->
|
|
<div class="row mb-4">
|
|
<!-- Department Performance -->
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="m-0 font-weight-bold">{% trans "Department Performance" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container" id="departmentPerformanceChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Physician Leaderboard -->
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="m-0 font-weight-bold">{% trans "Physician Leaderboard" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container" id="physicianLeaderboardChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tables Section -->
|
|
<div class="row mb-4">
|
|
<!-- Overdue Complaints -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="m-0 font-weight-bold text-danger">
|
|
<i class="bi bi-exclamation-circle"></i> {% trans "Overdue Complaints" %}
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover" id="overdueComplaintsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "ID" %}</th>
|
|
<th>{% trans "Title" %}</th>
|
|
<th>{% trans "Patient" %}</th>
|
|
<th>{% trans "Severity" %}</th>
|
|
<th>{% trans "Hospital" %}</th>
|
|
<th>{% trans "Department" %}</th>
|
|
<th>{% trans "Due Date" %}</th>
|
|
<th>{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Data will be loaded via JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Physician Details Table -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="m-0 font-weight-bold">
|
|
<i class="bi bi-trophy"></i> {% trans "Top Performing Physicians" %}
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover" id="physiciansTable">
|
|
<thead>
|
|
<tr>
|
|
<th>{% 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 "Positive" %}</th>
|
|
<th>{% trans "Neutral" %}</th>
|
|
<th>{% trans "Negative" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Data will be loaded via JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript -->
|
|
<script>
|
|
// Global variables
|
|
let charts = {};
|
|
let currentFilters = {
|
|
date_range: '30d',
|
|
hospital: '',
|
|
department: '',
|
|
kpi_category: '',
|
|
custom_start: '',
|
|
custom_end: ''
|
|
};
|
|
|
|
// Initialize dashboard
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Load initial data
|
|
loadDashboardData();
|
|
|
|
// Handle filter form submission
|
|
document.getElementById('filterForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
updateFilters();
|
|
loadDashboardData();
|
|
});
|
|
});
|
|
|
|
function handleDateRangeChange() {
|
|
const dateRange = document.getElementById('dateRange').value;
|
|
const customDateRange = document.getElementById('customDateRange');
|
|
|
|
if (dateRange === 'custom') {
|
|
customDateRange.classList.remove('d-none');
|
|
} else {
|
|
customDateRange.classList.add('d-none');
|
|
}
|
|
}
|
|
|
|
function updateFilters() {
|
|
currentFilters.date_range = document.getElementById('dateRange').value;
|
|
currentFilters.hospital = document.getElementById('hospitalFilter').value;
|
|
currentFilters.department = document.getElementById('departmentFilter').value;
|
|
currentFilters.kpi_category = document.getElementById('kpiCategoryFilter').value;
|
|
currentFilters.custom_start = document.getElementById('customStart').value;
|
|
currentFilters.custom_end = document.getElementById('customEnd').value;
|
|
}
|
|
|
|
function loadDashboardData() {
|
|
showLoading();
|
|
|
|
// Fetch data via AJAX
|
|
fetch(`/analytics/api/command-center/?${new URLSearchParams(currentFilters)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
updateKPIs(data.kpis);
|
|
updateCharts(data.charts);
|
|
updateTables(data.tables);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading dashboard data:', error);
|
|
showError();
|
|
})
|
|
.finally(() => {
|
|
hideLoading();
|
|
});
|
|
}
|
|
|
|
function updateKPIs(kpis) {
|
|
document.getElementById('totalComplaints').textContent = kpis.total_complaints || 0;
|
|
document.getElementById('openComplaints').textContent = kpis.open_complaints || 0;
|
|
document.getElementById('overdueComplaints').textContent = kpis.overdue_complaints || 0;
|
|
document.getElementById('resolvedComplaints').textContent = kpis.resolved_complaints || 0;
|
|
document.getElementById('totalActions').textContent = kpis.total_actions || 0;
|
|
document.getElementById('overdueActions').textContent = kpis.overdue_actions || 0;
|
|
document.getElementById('avgSurveyScore').textContent = (kpis.avg_survey_score || 0).toFixed(2);
|
|
document.getElementById('negativeSurveys').textContent = kpis.negative_surveys || 0;
|
|
|
|
// Update trend indicator
|
|
if (kpis.complaints_trend) {
|
|
const trendElement = document.getElementById('complaintsTrend');
|
|
const change = kpis.complaints_trend.percentage_change;
|
|
if (change > 0) {
|
|
trendElement.innerHTML = `<span class="kpi-trend-up"><i class="bi bi-arrow-up"></i> ${change.toFixed(1)}%</span>`;
|
|
} else if (change < 0) {
|
|
trendElement.innerHTML = `<span class="kpi-trend-down"><i class="bi bi-arrow-down"></i> ${change.toFixed(1)}%</span>`;
|
|
} else {
|
|
trendElement.innerHTML = `<span class="text-muted"><i class="bi bi-dash"></i> 0%</span>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateCharts(chartData) {
|
|
// Complaints Trend Chart
|
|
if (chartData.complaints_trend) {
|
|
renderChart('complaintsTrendChart', chartData.complaints_trend, 'line');
|
|
}
|
|
|
|
// Complaints by Category Chart
|
|
if (chartData.complaints_by_category) {
|
|
renderChart('complaintsByCategoryChart', chartData.complaints_by_category, 'donut');
|
|
}
|
|
|
|
// Survey Satisfaction Trend
|
|
if (chartData.survey_satisfaction_trend) {
|
|
renderChart('surveySatisfactionChart', chartData.survey_satisfaction_trend, 'line');
|
|
}
|
|
|
|
// Survey Distribution
|
|
if (chartData.survey_distribution) {
|
|
renderChart('surveyDistributionChart', chartData.survey_distribution, 'donut');
|
|
}
|
|
|
|
// Department Performance
|
|
if (chartData.department_performance) {
|
|
renderChart('departmentPerformanceChart', chartData.department_performance, 'bar');
|
|
}
|
|
|
|
// Physician Leaderboard
|
|
if (chartData.physician_leaderboard) {
|
|
renderChart('physicianLeaderboardChart', chartData.physician_leaderboard, 'bar');
|
|
}
|
|
}
|
|
|
|
function renderChart(elementId, chartData, chartType) {
|
|
const element = document.getElementById(elementId);
|
|
if (!element) return;
|
|
|
|
// Destroy existing chart if any
|
|
if (charts[elementId]) {
|
|
charts[elementId].destroy();
|
|
}
|
|
|
|
// Al Hammadi Theme Colors for Charts
|
|
const hhChartColors = ['#0097a7', '#00897b', '#f9a825', '#c62828', '#1a237e', '#4dd0e1'];
|
|
|
|
const options = {
|
|
series: chartData.series || [],
|
|
chart: {
|
|
type: chartType,
|
|
height: 350,
|
|
toolbar: {
|
|
show: true
|
|
},
|
|
fontFamily: 'Open Sans, Cairo, sans-serif'
|
|
},
|
|
labels: chartData.labels || [],
|
|
colors: hhChartColors,
|
|
dataLabels: {
|
|
enabled: chartType === 'donut'
|
|
},
|
|
legend: {
|
|
position: chartType === 'donut' ? 'bottom' : 'top'
|
|
},
|
|
xaxis: {
|
|
categories: chartData.labels
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
forceNiceScale: true
|
|
},
|
|
grid: {
|
|
borderColor: '#e7e7e7',
|
|
strokeDashArray: 5
|
|
},
|
|
tooltip: {
|
|
theme: 'light'
|
|
}
|
|
};
|
|
|
|
if (chartType === 'line') {
|
|
options.stroke = {
|
|
curve: 'smooth',
|
|
width: 3
|
|
};
|
|
options.fill = {
|
|
type: 'solid',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.1,
|
|
}
|
|
};
|
|
}
|
|
|
|
charts[elementId] = new ApexCharts(element, options);
|
|
charts[elementId].render();
|
|
}
|
|
|
|
function updateTables(tableData) {
|
|
// Update Overdue Complaints Table
|
|
if (tableData.overdue_complaints) {
|
|
const tbody = document.querySelector('#overdueComplaintsTable tbody');
|
|
tbody.innerHTML = '';
|
|
|
|
if (tableData.overdue_complaints.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="8" class="text-center text-muted">No overdue complaints</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tableData.overdue_complaints.forEach(complaint => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td><small class="text-muted">${complaint.id.substring(0, 8)}</small></td>
|
|
<td>${complaint.title.substring(0, 50)}${complaint.title.length > 50 ? '...' : ''}</td>
|
|
<td>${complaint.patient_name || 'N/A'}</td>
|
|
<td><span class="badge bg-${getSeverityBadgeClass(complaint.severity)}">${complaint.severity}</span></td>
|
|
<td>${complaint.hospital || 'N/A'}</td>
|
|
<td>${complaint.department || 'N/A'}</td>
|
|
<td class="text-danger">${complaint.due_at}</td>
|
|
<td>
|
|
<a href="/complaints/${complaint.id}/" class="btn btn-sm btn-primary">
|
|
<i class="bi bi-eye"></i>
|
|
</a>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// Update Physicians Table
|
|
if (tableData.physician_leaderboard) {
|
|
const tbody = document.querySelector('#physiciansTable tbody');
|
|
tbody.innerHTML = '';
|
|
|
|
if (tableData.physician_leaderboard.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted">No physician data available</td></tr>';
|
|
return;
|
|
}
|
|
|
|
tableData.physician_leaderboard.forEach((physician, index) => {
|
|
const row = document.createElement('tr');
|
|
row.className = 'physician-row';
|
|
row.onclick = () => window.location.href = `/physicians/${physician.physician_id}/`;
|
|
row.innerHTML = `
|
|
<td><span class="badge bg-primary">${index + 1}</span></td>
|
|
<td><strong>${physician.name}</strong></td>
|
|
<td>${physician.specialization || 'N/A'}</td>
|
|
<td>${physician.department || 'N/A'}</td>
|
|
<td><span class="badge bg-success">${physician.rating.toFixed(2)}</span></td>
|
|
<td>${physician.surveys}</td>
|
|
<td class="text-success">${physician.positive}</td>
|
|
<td class="text-secondary">${physician.neutral}</td>
|
|
<td class="text-danger">${physician.negative}</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
}
|
|
|
|
function getSeverityBadgeClass(severity) {
|
|
const severityMap = {
|
|
'low': 'secondary',
|
|
'medium': 'warning',
|
|
'high': 'danger',
|
|
'critical': 'dark'
|
|
};
|
|
return severityMap[severity] || 'secondary';
|
|
}
|
|
|
|
function showLoading() {
|
|
document.getElementById('loadingOverlay').classList.add('active');
|
|
}
|
|
|
|
function hideLoading() {
|
|
document.getElementById('loadingOverlay').classList.remove('active');
|
|
}
|
|
|
|
function showError() {
|
|
alert('Error loading dashboard data. Please try again.');
|
|
}
|
|
|
|
function refreshDashboard() {
|
|
loadDashboardData();
|
|
}
|
|
|
|
function resetFilters() {
|
|
document.getElementById('dateRange').value = '30d';
|
|
document.getElementById('hospitalFilter').value = '';
|
|
document.getElementById('departmentFilter').value = '';
|
|
document.getElementById('kpiCategoryFilter').value = '';
|
|
document.getElementById('customStart').value = '';
|
|
document.getElementById('customEnd').value = '';
|
|
document.getElementById('customDateRange').classList.add('d-none');
|
|
|
|
updateFilters();
|
|
loadDashboardData();
|
|
}
|
|
|
|
function exportDashboard(format) {
|
|
showLoading();
|
|
|
|
fetch(`/analytics/api/command-center/export/${format}/?${new URLSearchParams(currentFilters)}`)
|
|
.then(response => {
|
|
if (response.ok) {
|
|
return response.blob();
|
|
}
|
|
throw new Error('Export failed');
|
|
})
|
|
.then(blob => {
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `px360_dashboard_${new Date().toISOString().slice(0,10)}.${format === 'excel' ? 'xlsx' : 'pdf'}`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
a.remove();
|
|
})
|
|
.catch(error => {
|
|
console.error('Export error:', error);
|
|
alert('Error exporting dashboard. Please try again.');
|
|
})
|
|
.finally(() => {
|
|
hideLoading();
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|