1048 lines
40 KiB
HTML
1048 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Inpatient Satisfaction Survey - Survey Analytics Report</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
||
<style>
|
||
:root {
|
||
--primary-color: #2563eb;
|
||
--success-color: #10b981;
|
||
--warning-color: #f59e0b;
|
||
--danger-color: #ef4444;
|
||
--info-color: #06b6d4;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background-color: #f8fafc;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.navbar {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 1.5rem;
|
||
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.stat-label {
|
||
color: #64748b;
|
||
font-size: 0.875rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.score-excellent { color: var(--success-color); }
|
||
.score-good { color: var(--info-color); }
|
||
.score-average { color: var(--warning-color); }
|
||
.score-poor { color: var(--danger-color); }
|
||
|
||
.question-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
border-left: 4px solid var(--primary-color);
|
||
}
|
||
|
||
.question-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.question-number {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
margin-right: 0.75rem;
|
||
}
|
||
|
||
.chart-container {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.insight-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0.375rem 0.75rem;
|
||
border-radius: 9999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
margin-right: 0.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.insight-positive { background: #d1fae5; color: #065f46; }
|
||
.insight-warning { background: #fef3c7; color: #92400e; }
|
||
.insight-negative { background: #fee2e2; color: #991b1b; }
|
||
.insight-info { background: #dbeafe; color: #1e40af; }
|
||
|
||
.distribution-bar {
|
||
height: 24px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
overflow: hidden;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.distribution-segment {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.trend-indicator {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.trend-up { color: var(--success-color); }
|
||
.trend-down { color: var(--danger-color); }
|
||
.trend-stable { color: #64748b; }
|
||
|
||
.response-sample {
|
||
background: #f8fafc;
|
||
border-radius: 8px;
|
||
padding: 0.75rem;
|
||
margin-bottom: 0.5rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.metric-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 1rem;
|
||
margin: 1.5rem 0;
|
||
}
|
||
|
||
.metric-item {
|
||
background: #f8fafc;
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 0.75rem;
|
||
color: #64748b;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.sticky-sidebar {
|
||
position: sticky;
|
||
top: 20px;
|
||
}
|
||
|
||
.nav-link {
|
||
color: #64748b;
|
||
padding: 0.5rem 0;
|
||
border-left: 3px solid transparent;
|
||
padding-left: 1rem;
|
||
margin-left: -1rem;
|
||
}
|
||
|
||
.nav-link:hover, .nav-link.active {
|
||
color: var(--primary-color);
|
||
border-left-color: var(--primary-color);
|
||
}
|
||
|
||
.comparison-table th,
|
||
.comparison-table td {
|
||
padding: 0.75rem;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.comparison-table th {
|
||
background: #f8fafc;
|
||
font-weight: 600;
|
||
text-align: left;
|
||
}
|
||
|
||
@media print {
|
||
.no-print { display: none !important; }
|
||
.question-card { break-inside: avoid; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav class="navbar navbar-dark no-print">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand" href="index.html">
|
||
<i class="bi bi-arrow-left me-2"></i>Back to Reports Index
|
||
</a>
|
||
<span class="navbar-text text-white">
|
||
Inpatient Satisfaction Survey
|
||
</span>
|
||
<button class="btn btn-light btn-sm" onclick="window.print()">
|
||
<i class="bi bi-printer me-2"></i>Print Report
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container-fluid py-4">
|
||
<div class="row">
|
||
<!-- Sidebar Navigation -->
|
||
<div class="col-lg-2 d-none d-lg-block no-print">
|
||
<div class="sticky-sidebar">
|
||
<h6 class="text-uppercase text-muted mb-3">Report Sections</h6>
|
||
<nav class="nav flex-column">
|
||
<a class="nav-link" href="#overview">Overview</a>
|
||
<a class="nav-link" href="#trends">Trends</a>
|
||
<a class="nav-link" href="#questions">Questions Analysis</a>
|
||
<a class="nav-link" href="#insights">Key Insights</a>
|
||
<a class="nav-link" href="#details">Detailed Metrics</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<div class="col-lg-10">
|
||
<!-- Header -->
|
||
<div class="mb-4">
|
||
<h1 class="display-5 fw-bold">Inpatient Satisfaction Survey</h1>
|
||
<p class="text-muted">
|
||
<i class="bi bi-calendar3 me-2"></i>2025-02-08 to 2026-02-08
|
||
<span class="mx-3">|</span>
|
||
<i class="bi bi-clock me-2"></i>Generated: 2026-02-08T09:35:00
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Overview Stats -->
|
||
<section id="overview" class="mb-5">
|
||
<h2 class="h4 mb-4">Overview</h2>
|
||
<div class="row g-4">
|
||
<div class="col-md-3">
|
||
<div class="stat-card">
|
||
<div class="stat-label">Surveys Sent</div>
|
||
<div class="stat-value">9</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card">
|
||
<div class="stat-label">Completed</div>
|
||
<div class="stat-value">0</div>
|
||
<small class="text-muted">0.0% completion</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card">
|
||
<div class="stat-label">Average Score</div>
|
||
<div class="stat-value score-poor">
|
||
0.0/5.0
|
||
</div>
|
||
<small class="text-muted">σ = 0.0</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card">
|
||
<div class="stat-label">Negative Surveys</div>
|
||
<div class="stat-value text-danger">0</div>
|
||
<small class="text-muted">0% of total</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Score Distribution -->
|
||
<div class="chart-container mt-4">
|
||
<h5 class="mb-3">Score Distribution</h5>
|
||
<div class="distribution-bar">
|
||
<div style="width: 100%; background: #e2e8f0;">No Data</div>
|
||
</div>
|
||
<div class="row mt-3 text-center">
|
||
<div class="col-3">
|
||
<div class="text-success fw-bold">0</div>
|
||
<small class="text-muted">Excellent (0%)</small>
|
||
</div>
|
||
<div class="col-3">
|
||
<div class="text-info fw-bold">0</div>
|
||
<small class="text-muted">Good (0%)</small>
|
||
</div>
|
||
<div class="col-3">
|
||
<div class="text-warning fw-bold">0</div>
|
||
<small class="text-muted">Average (0%)</small>
|
||
</div>
|
||
<div class="col-3">
|
||
<div class="text-danger fw-bold">0</div>
|
||
<small class="text-muted">Poor (0%)</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Monthly Trends -->
|
||
<section id="trends" class="mb-5">
|
||
<h2 class="h4 mb-4">Monthly Trends</h2>
|
||
<div class="chart-container">
|
||
<div id="monthlyTrendsChart" style="height: 400px;"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Questions Analysis -->
|
||
<section id="questions" class="mb-5">
|
||
<h2 class="h4 mb-4">Question-Level Analysis</h2>
|
||
<p class="text-muted mb-4">
|
||
Detailed analysis of 12 questions with statistical metrics,
|
||
score distributions, and performance trends.
|
||
</p>
|
||
|
||
<div class="question-card" id="question_1">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">1</div>
|
||
<div>
|
||
<h5 class="mb-1">Are the Patient Relations Coordinators/ Social Workers approachable and accessible?</h5>
|
||
<p class="text-muted mb-0 small">هل منسقو علاقات المرضى / الأخصائيون الاجتماعيون متاحون وسهل الوصول إليهم؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="question-card" id="question_2">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">2</div>
|
||
<div>
|
||
<h5 class="mb-1">Did the physician give you clear information about your medications?</h5>
|
||
<p class="text-muted mb-0 small">هل قدم الطبيب لك معلومات واضحة عن أدويتك؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="question-card" id="question_3">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">3</div>
|
||
<div>
|
||
<h5 class="mb-1">Did your physician exerted efforts to include you in making the decisions about your treatment?</h5>
|
||
<p class="text-muted mb-0 small">هل بذل طبيبك جهداً لإشراكك في اتخاذ القرارات حول علاجك؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="question-card" id="question_4">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">4</div>
|
||
<div>
|
||
<h5 class="mb-1">Is the cleanliness level of the hospital exceeding your expectations?</h5>
|
||
<p class="text-muted mb-0 small">هل مستوى نظافة المستشفى يتجاوز توقعاتك؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="question-card" id="question_5">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">5</div>
|
||
<div>
|
||
<h5 class="mb-1">Was there a clear explanation given to you regarding your financial coverage and payment responsibility?</h5>
|
||
<p class="text-muted mb-0 small">هل تم تقديم شرح واضح لك بخصوص التغطية المالية ومسؤولية الدفع؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="question-card" id="question_6">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">6</div>
|
||
<div>
|
||
<h5 class="mb-1">Were you satisfied with our admission time and process?</h5>
|
||
<p class="text-muted mb-0 small">هل كنت راضٍ عن وقت وعمليات القبول لدينا؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="question-card" id="question_7">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">7</div>
|
||
<div>
|
||
<h5 class="mb-1">Were you satisfied with our discharge time and process?</h5>
|
||
<p class="text-muted mb-0 small">هل كنت راضٍ عن وقت وعمليات الخروج لدينا؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="question-card" id="question_8">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">8</div>
|
||
<div>
|
||
<h5 class="mb-1">Were you satisfied with the doctor's care?</h5>
|
||
<p class="text-muted mb-0 small">هل كنت راضٍ عن رعاية الطبيب؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="question-card" id="question_9">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">9</div>
|
||
<div>
|
||
<h5 class="mb-1">Were you satisfied with the food services?</h5>
|
||
<p class="text-muted mb-0 small">هل كنت راضٍ عن خدمات الطعام؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="question-card" id="question_10">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">10</div>
|
||
<div>
|
||
<h5 class="mb-1">Were you satisfied with the level of safety at the hospital?</h5>
|
||
<p class="text-muted mb-0 small">هل كنت راضٍ عن مستوى السلامة في المستشفى؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="question-card" id="question_11">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">11</div>
|
||
<div>
|
||
<h5 class="mb-1">Were you satisfied with the nurses' care?</h5>
|
||
<p class="text-muted mb-0 small">هل كنت راضٍ عن رعاية التمريض؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="question-card" id="question_12">
|
||
<div class="question-header">
|
||
<div class="d-flex align-items-start">
|
||
<div class="question-number">12</div>
|
||
<div>
|
||
<h5 class="mb-1">Would you recommend the hospital to your friends and family?</h5>
|
||
<p class="text-muted mb-0 small">هل توصي بالمستشفى لأصدقائك وعائلتك؟</p>
|
||
<div class="mt-2">
|
||
<span class="badge bg-secondary">MULTIPLE_CHOICE</span>
|
||
<span class="badge bg-warning text-dark">Required</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="stat-value score-poor">N/A</div>
|
||
<small class="text-muted">Average Score</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
<div class="col-md-8">
|
||
<h6 class="text-muted">Choice Distribution</h6><table class="table table-sm"><thead><tr><th>Choice</th><th>Count</th><th>Percentage</th></tr></thead><tbody></tbody></table>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="metric-grid" style="margin-top: 0;">
|
||
<div class="metric-item">
|
||
<div class="metric-value">0</div>
|
||
<div class="metric-label">Responses</div>
|
||
</div>
|
||
<div class="metric-item">
|
||
<div class="metric-value">0%</div>
|
||
<div class="metric-label">Response Rate</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- Key Insights -->
|
||
<section id="insights" class="mb-5">
|
||
<h2 class="h4 mb-4">Key Insights & Recommendations</h2>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header bg-white">
|
||
<h6 class="mb-0">Top Performing Questions</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="text-muted">No numeric questions available.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header bg-white">
|
||
<h6 class="mb-0">Questions Needing Attention</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="text-muted">No numeric questions available.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Channel Performance -->
|
||
<section id="details" class="mb-5">
|
||
<h2 class="h4 mb-4">Channel Performance</h2>
|
||
<div class="chart-container">
|
||
<div id="channelChart" style="height: 350px;"></div>
|
||
</div>
|
||
|
||
<div class="row mt-4">
|
||
|
||
<div class="col-md-4">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-phone fs-1 text-primary mb-3"></i>
|
||
<h5>SMS</h5>
|
||
<div class="row mt-3">
|
||
<div class="col-6">
|
||
<div class="text-muted small">Sent</div>
|
||
<div class="fw-bold">0</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="text-muted small">Completed</div>
|
||
<div class="fw-bold">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2">
|
||
<span class="badge bg-success">0% completion</span>
|
||
</div>
|
||
<div class="mt-1">
|
||
<small class="text-muted">Avg Score: 0.0</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-whatsapp fs-1 text-primary mb-3"></i>
|
||
<h5>WHATSAPP</h5>
|
||
<div class="row mt-3">
|
||
<div class="col-6">
|
||
<div class="text-muted small">Sent</div>
|
||
<div class="fw-bold">0</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="text-muted small">Completed</div>
|
||
<div class="fw-bold">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2">
|
||
<span class="badge bg-success">0% completion</span>
|
||
</div>
|
||
<div class="mt-1">
|
||
<small class="text-muted">Avg Score: 0.0</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="col-md-4">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-envelope fs-1 text-primary mb-3"></i>
|
||
<h5>EMAIL</h5>
|
||
<div class="row mt-3">
|
||
<div class="col-6">
|
||
<div class="text-muted small">Sent</div>
|
||
<div class="fw-bold">0</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="text-muted small">Completed</div>
|
||
<div class="fw-bold">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2">
|
||
<span class="badge bg-success">0% completion</span>
|
||
</div>
|
||
<div class="mt-1">
|
||
<small class="text-muted">Avg Score: 0.0</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="text-center text-muted py-4 border-top mt-5">
|
||
<p class="mb-0">PX360 Survey Analytics Report</p>
|
||
<small>Generated on 2026-02-08T09:35:00</small>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
|
||
// Monthly trends for survey
|
||
new ApexCharts(document.querySelector("#monthlyTrendsChart"), {
|
||
series: [
|
||
{ name: 'Average Score', type: 'line', data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0] },
|
||
{ name: 'Survey Count', type: 'column', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] }
|
||
],
|
||
chart: {
|
||
height: 400,
|
||
type: 'line',
|
||
toolbar: { show: true }
|
||
},
|
||
stroke: { width: [3, 0] },
|
||
xaxis: { categories: ['February 2025', 'March 2025', 'April 2025', 'May 2025', 'June 2025', 'July 2025', 'August 2025', 'September 2025', 'October 2025', 'November 2025', 'December 2025', 'January 2026', 'February 2026'] },
|
||
yaxis: [
|
||
{ title: { text: 'Average Score' }, min: 0, max: 5 },
|
||
{ opposite: true, title: { text: 'Count' } }
|
||
],
|
||
colors: ['#2563eb', '#10b981'],
|
||
title: { text: 'Monthly Survey Performance' }
|
||
}).render();
|
||
|
||
|
||
// Channel performance chart
|
||
new ApexCharts(document.querySelector("#channelChart"), {
|
||
series: [
|
||
{ name: 'Completion Rate (%)', data: [0, 0, 0] },
|
||
{ name: 'Average Score', data: [0.0, 0.0, 0.0] }
|
||
],
|
||
chart: {
|
||
type: 'bar',
|
||
height: 350
|
||
},
|
||
xaxis: { categories: ['sms', 'whatsapp', 'email'] },
|
||
colors: ['#2563eb', '#10b981'],
|
||
title: { text: 'Performance by Channel' }
|
||
}).render();
|
||
|
||
|
||
// Smooth scroll for navigation
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
});
|
||
|
||
// Highlight active section in navigation
|
||
const sections = document.querySelectorAll('section[id]');
|
||
const navLinks = document.querySelectorAll('.nav-link');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
let current = '';
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
if (scrollY >= sectionTop - 200) {
|
||
current = section.getAttribute('id');
|
||
}
|
||
});
|
||
|
||
navLinks.forEach(link => {
|
||
link.classList.remove('active');
|
||
if (link.getAttribute('href') === '#' + current) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|