593 lines
32 KiB
HTML
593 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Patient Experience Analytics Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #0f172a; /* Slate 900 */
|
|
color: #e2e8f0;
|
|
}
|
|
.glass-panel {
|
|
background: rgba(30, 41, 59, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
.gradient-text {
|
|
background: linear-gradient(to right, #38bdf8, #818cf8);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.card-hover {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
|
|
border-color: rgba(56, 189, 248, 0.5);
|
|
}
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #0f172a;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #334155;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #475569;
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.8s ease-out forwards;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.delay-100 { animation-delay: 100ms; }
|
|
.delay-200 { animation-delay: 200ms; }
|
|
.delay-300 { animation-delay: 300ms; }
|
|
</style>
|
|
</head>
|
|
<body class="antialiased min-h-screen pb-20">
|
|
|
|
<!-- Navigation / Header -->
|
|
<nav class="fixed top-0 w-full z-50 glass-panel border-b border-slate-700">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
|
|
<i class="fas fa-chart-pie text-white text-sm"></i>
|
|
</div>
|
|
<span class="font-bold text-xl tracking-tight">PX <span class="text-blue-400">Analytics</span></span>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<div class="ml-10 flex items-baseline space-x-4">
|
|
<a href="#overview" class="hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Overview</a>
|
|
<a href="#complaints" class="hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Complaints</a>
|
|
<a href="#actions" class="hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Actions</a>
|
|
<a href="#surveys" class="hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Surveys</a>
|
|
<a href="#dashboard" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">Live Dashboard</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<div class="relative pt-32 pb-12 sm:pt-40 sm:pb-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mb-6">
|
|
Analytics Opportunities <br>
|
|
<span class="gradient-text">Based on Current Models</span>
|
|
</h1>
|
|
<p class="mt-4 max-w-2xl mx-auto text-xl text-slate-400">
|
|
A comprehensive breakdown of visualizations and insights available from your Patient Experience data architecture.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-24">
|
|
|
|
<!-- 1. Complaints Analytics -->
|
|
<section id="complaints" class="animate-fade-in">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="p-3 bg-red-500/10 rounded-lg border border-red-500/20">
|
|
<i class="fas fa-exclamation-circle text-red-400 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-white">Complaints Analytics</h2>
|
|
<p class="text-slate-400">Tracking status, SLA, and resolution metrics.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
|
<!-- Chart 1: Status Distribution -->
|
|
<div class="glass-panel p-6 rounded-xl card-hover">
|
|
<h3 class="text-lg font-semibold mb-4 text-slate-200">Status Distribution</h3>
|
|
<div id="chart-complaints-status"></div>
|
|
</div>
|
|
<!-- Chart 2: Volume Trend -->
|
|
<div class="glass-panel p-6 rounded-xl lg:col-span-2 card-hover">
|
|
<h3 class="text-lg font-semibold mb-4 text-slate-200">Complaint Volume Trends (Last 6 Months)</h3>
|
|
<div id="chart-complaints-volume"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Table -->
|
|
<div class="glass-panel rounded-xl overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left text-sm text-slate-400">
|
|
<thead class="bg-slate-800/50 text-slate-200 uppercase font-semibold">
|
|
<tr>
|
|
<th class="px-6 py-4">Analytics</th>
|
|
<th class="px-6 py-4">Description</th>
|
|
<th class="px-6 py-4">Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-700/50">
|
|
<tr class="hover:bg-slate-800/30 transition-colors">
|
|
<td class="px-6 py-4 font-medium text-white">📈 Volume Trends</td>
|
|
<td class="px-6 py-4">Complaints per day/week/month</td>
|
|
<td class="px-6 py-4"><span class="px-2 py-1 bg-blue-500/10 text-blue-400 rounded text-xs">Identify Spikes</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-800/30 transition-colors">
|
|
<td class="px-6 py-4 font-medium text-white">⏱️ SLA Performance</td>
|
|
<td class="px-6 py-4">% resolved within SLA, avg resolution time</td>
|
|
<td class="px-6 py-4"><span class="px-2 py-1 bg-green-500/10 text-green-400 rounded text-xs">Compliance</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-800/30 transition-colors">
|
|
<td class="px-6 py-4 font-medium text-white">🏥 Top Departments</td>
|
|
<td class="px-6 py-4">Most complaints by department</td>
|
|
<td class="px-6 py-4"><span class="px-2 py-1 bg-orange-500/10 text-orange-400 rounded text-xs">Focus Areas</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-800/30 transition-colors">
|
|
<td class="px-6 py-4 font-medium text-white">🔴 Severity Mix</td>
|
|
<td class="px-6 py-4">High/Medium/Low severity breakdown</td>
|
|
<td class="px-6 py-4"><span class="px-2 py-1 bg-red-500/10 text-red-400 rounded text-xs">Risk Focus</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. PX Action Center Analytics -->
|
|
<section id="actions" class="animate-fade-in delay-100">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="p-3 bg-blue-500/10 rounded-lg border border-blue-500/20">
|
|
<i class="fas fa-tasks text-blue-400 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-white">PX Action Center Analytics</h2>
|
|
<p class="text-slate-400">Workflow efficiency and completion tracking.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
<div class="glass-panel p-6 rounded-xl card-hover">
|
|
<h3 class="text-lg font-semibold mb-4 text-slate-200">Action Cycle Time</h3>
|
|
<div id="chart-actions-cycle"></div>
|
|
</div>
|
|
<div class="glass-panel p-6 rounded-xl card-hover">
|
|
<h3 class="text-lg font-semibold mb-4 text-slate-200">By Category</h3>
|
|
<div id="chart-actions-category"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass-panel rounded-xl overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left text-sm text-slate-400">
|
|
<thead class="bg-slate-800/50 text-slate-200 uppercase font-semibold">
|
|
<tr>
|
|
<th class="px-6 py-4">Analytics</th>
|
|
<th class="px-6 py-4">Description</th>
|
|
<th class="px-6 py-4">Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-700/50">
|
|
<tr class="hover:bg-slate-800/30 transition-colors">
|
|
<td class="px-6 py-4 font-medium text-white">✅ Completion Rate</td>
|
|
<td class="px-6 py-4">% closed within SLA</td>
|
|
<td class="px-6 py-4"><span class="px-2 py-1 bg-green-500/10 text-green-400 rounded text-xs">Performance</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-800/30 transition-colors">
|
|
<td class="px-6 py-4 font-medium text-white">👤 Assignee Workload</td>
|
|
<td class="px-6 py-4">Actions per staff member</td>
|
|
<td class="px-6 py-4"><span class="px-2 py-1 bg-purple-500/10 text-purple-400 rounded text-xs">Capacity</span></td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-800/30 transition-colors">
|
|
<td class="px-6 py-4 font-medium text-white">🔴 Overdue Actions</td>
|
|
<td class="px-6 py-4">Count and trend of overdue items</td>
|
|
<td class="px-6 py-4"><span class="px-2 py-1 bg-red-500/10 text-red-400 rounded text-xs">Risk Mgmt</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. Surveys Analytics -->
|
|
<section id="surveys" class="animate-fade-in delay-200">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="p-3 bg-purple-500/10 rounded-lg border border-purple-500/20">
|
|
<i class="fas fa-poll text-purple-400 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-white">Surveys Analytics</h2>
|
|
<p class="text-slate-400">Patient satisfaction scores and response rates.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
|
<div class="glass-panel p-6 rounded-xl card-hover flex flex-col justify-center items-center">
|
|
<h3 class="text-lg font-semibold mb-2 text-slate-200">Net Promoter Score</h3>
|
|
<div class="text-5xl font-bold text-purple-400 mb-2">+45</div>
|
|
<div class="text-sm text-slate-400">Industry Avg: +32</div>
|
|
<div class="w-full bg-slate-700 h-2 rounded-full mt-4 overflow-hidden">
|
|
<div class="bg-purple-500 h-full" style="width: 75%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="glass-panel p-6 rounded-xl lg:col-span-2 card-hover">
|
|
<h3 class="text-lg font-semibold mb-4 text-slate-200">Score Trends</h3>
|
|
<div id="chart-surveys-trend"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. Feedback Analytics -->
|
|
<section id="feedback" class="animate-fade-in delay-300">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="p-3 bg-yellow-500/10 rounded-lg border border-yellow-500/20">
|
|
<i class="fas fa-comments text-yellow-400 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-white">Feedback Analytics</h2>
|
|
<p class="text-slate-400">Sentiment analysis and qualitative insights.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div class="glass-panel p-6 rounded-xl card-hover">
|
|
<h3 class="text-lg font-semibold mb-4 text-slate-200">Sentiment Distribution</h3>
|
|
<div id="chart-feedback-sentiment"></div>
|
|
</div>
|
|
<div class="glass-panel p-6 rounded-xl card-hover">
|
|
<h3 class="text-lg font-semibold mb-4 text-slate-200">Feedback Volume</h3>
|
|
<div id="chart-feedback-volume"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. Executive Dashboard Simulation -->
|
|
<section id="dashboard" class="animate-fade-in">
|
|
<div class="border-t border-slate-700 pt-16 mb-12">
|
|
<h2 class="text-3xl font-bold text-white mb-4">Recommended Dashboard Layout</h2>
|
|
<p class="text-slate-400 mb-8">A consolidated view of the key metrics.</p>
|
|
</div>
|
|
|
|
<!-- Dashboard Grid -->
|
|
<div class="glass-panel p-6 rounded-2xl border border-slate-600 shadow-2xl">
|
|
<!-- Header -->
|
|
<div class="flex justify-between items-center mb-6 border-b border-slate-700 pb-4">
|
|
<div class="flex items-center gap-3">
|
|
<i class="fas fa-hospital text-blue-400 text-xl"></i>
|
|
<h3 class="text-xl font-bold text-white">Executive Overview</h3>
|
|
</div>
|
|
<div class="text-sm text-slate-400 bg-slate-800 px-3 py-1 rounded-full">
|
|
<i class="far fa-clock mr-2"></i>Live Data
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top KPI Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
|
|
<div class="text-slate-400 text-sm mb-1">Overall Score</div>
|
|
<div class="text-3xl font-bold text-white">4.2<span class="text-lg text-slate-500">/5</span></div>
|
|
<div class="text-xs text-green-400 mt-2"><i class="fas fa-arrow-up"></i> 0.3 from last month</div>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
|
|
<div class="text-slate-400 text-sm mb-1">NPS</div>
|
|
<div class="text-3xl font-bold text-purple-400">+45</div>
|
|
<div class="text-xs text-green-400 mt-2"><i class="fas fa-arrow-up"></i> 5 pts increase</div>
|
|
</div>
|
|
<div class="bg-slate-800/50 p-4 rounded-xl border border-slate-700">
|
|
<div class="text-slate-400 text-sm mb-1">Complaint Trend</div>
|
|
<div class="text-3xl font-bold text-red-400">↓ 12%</div>
|
|
<div class="text-xs text-slate-400 mt-2">vs previous period</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Middle Section: Charts -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
|
|
<div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700">
|
|
<h4 class="text-sm font-semibold text-slate-300 mb-3">Complaints by Status</h4>
|
|
<div id="dash-chart-1"></div>
|
|
</div>
|
|
<div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700">
|
|
<h4 class="text-sm font-semibold text-slate-300 mb-3">Actions by Status</h4>
|
|
<div id="dash-chart-2"></div>
|
|
</div>
|
|
<div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700">
|
|
<h4 class="text-sm font-semibold text-slate-300 mb-3">Survey Response Rate</h4>
|
|
<div class="flex items-center justify-center h-32">
|
|
<div class="relative w-24 h-24">
|
|
<svg class="w-full h-full" viewBox="0 0 36 36">
|
|
<path class="text-slate-700" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" />
|
|
<path class="text-blue-500" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3" />
|
|
</svg>
|
|
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-white font-bold">75%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Section: Heatmap Table -->
|
|
<div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700">
|
|
<h4 class="text-sm font-semibold text-slate-300 mb-4">Department Performance Heatmap</h4>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm text-left">
|
|
<thead class="text-xs text-slate-400 uppercase bg-slate-900/50">
|
|
<tr>
|
|
<th class="px-4 py-3 rounded-l-lg">Dept</th>
|
|
<th class="px-4 py-3">Complaints</th>
|
|
<th class="px-4 py-3">Actions</th>
|
|
<th class="px-4 py-3">Survey</th>
|
|
<th class="px-4 py-3 rounded-r-lg">Rating</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-700/50">
|
|
<tr>
|
|
<td class="px-4 py-3 font-medium text-white">ED</td>
|
|
<td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-red-500 h-2 rounded-full" style="width: 80%"></div></div> <span class="text-xs text-slate-400">45</span></div></td>
|
|
<td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div></div> <span class="text-xs text-slate-400">12</span></div></td>
|
|
<td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-green-500 h-2 rounded-full" style="width: 82%"></div></div> <span class="text-xs text-slate-400">4.1</span></div></td>
|
|
<td class="px-4 py-3 text-yellow-400 text-xs">★★★☆☆</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 font-medium text-white">IPD</td>
|
|
<td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-red-500 h-2 rounded-full" style="width: 50%"></div></div> <span class="text-xs text-slate-400">32</span></div></td>
|
|
<td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-blue-500 h-2 rounded-full" style="width: 20%"></div></div> <span class="text-xs text-slate-400">8</span></div></td>
|
|
<td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-green-500 h-2 rounded-full" style="width: 90%"></div></div> <span class="text-xs text-slate-400">4.5</span></div></td>
|
|
<td class="px-4 py-3 text-yellow-400 text-xs">★★★★☆</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 font-medium text-white">OPD</td>
|
|
<td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-red-500 h-2 rounded-full" style="width: 30%"></div></div> <span class="text-xs text-slate-400">15</span></div></td>
|
|
<td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-blue-500 h-2 rounded-full" style="width: 15%"></div></div> <span class="text-xs text-slate-400">5</span></div></td>
|
|
<td class="px-4 py-3"><div class="flex items-center gap-2"><div class="w-16 bg-slate-700 h-2 rounded-full"><div class="bg-green-500 h-2 rounded-full" style="width: 88%"></div></div> <span class="text-xs text-slate-400">4.4</span></div></td>
|
|
<td class="px-4 py-3 text-yellow-400 text-xs">★★★★☆</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Priority Recommendations -->
|
|
<section class="pb-12">
|
|
<h2 class="text-2xl font-bold text-white mb-6">🎯 Priority Recommendations</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<!-- Priority Items -->
|
|
<div class="glass-panel p-4 rounded-lg border-l-4 border-red-500">
|
|
<div class="flex justify-between items-start">
|
|
<h4 class="font-bold text-white">1. Complaints Volume</h4>
|
|
<span class="bg-red-500/20 text-red-400 text-xs px-2 py-1 rounded">Core KPI</span>
|
|
</div>
|
|
<p class="text-sm text-slate-400 mt-2">Track volume and resolution time as primary health indicator.</p>
|
|
</div>
|
|
|
|
<div class="glass-panel p-4 rounded-lg border-l-4 border-orange-500">
|
|
<div class="flex justify-between items-start">
|
|
<h4 class="font-bold text-white">2. SLA Compliance</h4>
|
|
<span class="bg-orange-500/20 text-orange-400 text-xs px-2 py-1 rounded">Regulatory</span>
|
|
</div>
|
|
<p class="text-sm text-slate-400 mt-2">Ensure regulatory adherence with real-time SLA tracking.</p>
|
|
</div>
|
|
|
|
<div class="glass-panel p-4 rounded-lg border-l-4 border-blue-500">
|
|
<div class="flex justify-between items-start">
|
|
<h4 class="font-bold text-white">3. Survey Scores</h4>
|
|
<span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">Satisfaction</span>
|
|
</div>
|
|
<p class="text-sm text-slate-400 mt-2">Monitor NPS and satisfaction trends across journey stages.</p>
|
|
</div>
|
|
|
|
<div class="glass-panel p-4 rounded-lg border-l-4 border-purple-500">
|
|
<div class="flex justify-between items-start">
|
|
<h4 class="font-bold text-white">4. Action Completion</h4>
|
|
<span class="bg-purple-500/20 text-purple-400 text-xs px-2 py-1 rounded">闭环</span>
|
|
</div>
|
|
<p class="text-sm text-slate-400 mt-2">Close the loop by tracking action items to completion.</p>
|
|
</div>
|
|
|
|
<div class="glass-panel p-4 rounded-lg border-l-4 border-green-500">
|
|
<div class="flex justify-between items-start">
|
|
<h4 class="font-bold text-white">5. Sentiment Analysis</h4>
|
|
<span class="bg-green-500/20 text-green-400 text-xs px-2 py-1 rounded">Early Warning</span>
|
|
</div>
|
|
<p class="text-sm text-slate-400 mt-2">Use AI to detect negative sentiment before it escalates.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="border-t border-slate-800 bg-slate-900 py-8 mt-12">
|
|
<div class="max-w-7xl mx-auto px-4 text-center text-slate-500 text-sm">
|
|
<p>© 2023 Patient Experience Analytics System. Generated for Data Model Review.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Chart Scripts -->
|
|
<script>
|
|
// Common Chart Options
|
|
const commonOptions = {
|
|
chart: {
|
|
background: 'transparent',
|
|
toolbar: { show: false },
|
|
fontFamily: 'Inter, sans-serif',
|
|
},
|
|
theme: { mode: 'dark' },
|
|
dataLabels: { enabled: false },
|
|
stroke: { curve: 'smooth' },
|
|
grid: {
|
|
borderColor: '#334155',
|
|
strokeDashArray: 4,
|
|
},
|
|
legend: { labels: { colors: '#94a3b8' } }
|
|
};
|
|
|
|
// 1. Complaints Status (Donut)
|
|
new ApexCharts(document.querySelector("#chart-complaints-status"), {
|
|
...commonOptions,
|
|
chart: { ...commonOptions.chart, type: 'donut', height: 300 },
|
|
series: [44, 25, 20, 11],
|
|
labels: ['Open', 'In Progress', 'Resolved', 'Closed'],
|
|
colors: ['#3b82f6', '#f59e0b', '#10b981', '#64748b'],
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
labels: {
|
|
show: true,
|
|
total: {
|
|
show: true,
|
|
label: 'Total',
|
|
color: '#e2e8f0'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}).render();
|
|
|
|
// 2. Complaints Volume (Area)
|
|
new ApexCharts(document.querySelector("#chart-complaints-volume"), {
|
|
...commonOptions,
|
|
chart: { ...commonOptions.chart, type: 'area', height: 300 },
|
|
series: [{
|
|
name: 'Complaints',
|
|
data: [31, 40, 28, 51, 42, 109, 100]
|
|
}],
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
|
labels: { style: { colors: '#94a3b8' } }
|
|
},
|
|
yaxis: { labels: { style: { colors: '#94a3b8' } } },
|
|
colors: ['#ef4444'],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: { shadeIntensity: 1, opacityFrom: 0.7, opacityTo: 0.2, stops: [0, 100] }
|
|
}
|
|
}).render();
|
|
|
|
// 3. Action Cycle Time (Bar)
|
|
new ApexCharts(document.querySelector("#chart-actions-cycle"), {
|
|
...commonOptions,
|
|
chart: { ...commonOptions.chart, type: 'bar', height: 300 },
|
|
series: [{
|
|
name: 'Avg Days',
|
|
data: [4.2, 3.8, 5.5, 2.1, 4.0]
|
|
}],
|
|
xaxis: {
|
|
categories: ['Clinical', 'Safety', 'Service', 'Staff', 'Facility'],
|
|
labels: { style: { colors: '#94a3b8' } }
|
|
},
|
|
yaxis: { labels: { style: { colors: '#94a3b8' } } },
|
|
colors: ['#3b82f6'],
|
|
plotOptions: { bar: { borderRadius: 4 } }
|
|
}).render();
|
|
|
|
// 4. Action Category (Radial)
|
|
new ApexCharts(document.querySelector("#chart-actions-category"), {
|
|
...commonOptions,
|
|
chart: { ...commonOptions.chart, type: 'radialBar', height: 300 },
|
|
series: [70, 50, 80],
|
|
labels: ['Service', 'Safety', 'Clinical'],
|
|
colors: ['#3b82f6', '#ef4444', '#10b981'],
|
|
plotOptions: {
|
|
radialBar: {
|
|
dataLabels: {
|
|
name: { color: '#94a3b8' },
|
|
value: { color: '#e2e8f0' }
|
|
}
|
|
}
|
|
}
|
|
}).render();
|
|
|
|
// 5. Survey Trends (Line)
|
|
new ApexCharts(document.querySelector("#chart-surveys-trend"), {
|
|
...commonOptions,
|
|
chart: { ...commonOptions.chart, type: 'line', height: 300 },
|
|
series: [
|
|
{ name: 'Satisfaction', data: [4.1, 4.0, 4.2, 4.1, 4.3, 4.5, 4.4] },
|
|
{ name: 'Response Rate', data: [60, 65, 70, 68, 72, 75, 78] }
|
|
],
|
|
xaxis: {
|
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
|
labels: { style: { colors: '#94a3b8' } }
|
|
},
|
|
yaxis: [
|
|
{ labels: { style: { colors: '#94a3b8' } }, min: 0, max: 5, title: { text: 'Score', style: {color: '#94a3b8'} } },
|
|
{ opposite: true, labels: { style: { colors: '#94a3b8' } }, min: 0, max: 100, title: { text: '%', style: {color: '#94a3b8'} } }
|
|
],
|
|
colors: ['#a855f7', '#38bdf8']
|
|
}).render();
|
|
|
|
// 6. Feedback Sentiment (Pie)
|
|
new ApexCharts(document.querySelector("#chart-feedback-sentiment"), {
|
|
...commonOptions,
|
|
chart: { ...commonOptions.chart, type: 'pie', height: 300 },
|
|
series: [65, 20, 15],
|
|
labels: ['Positive', 'Neutral', 'Negative'],
|
|
colors: ['#10b981', '#94a3b8', '#ef4444']
|
|
}).render();
|
|
|
|
// 7. Feedback Volume (Column)
|
|
new ApexCharts(document.querySelector("#chart-feedback-volume"), {
|
|
...commonOptions,
|
|
chart: { ...commonOptions.chart, type: 'bar', height: 300, stacked: true },
|
|
series: [
|
|
{ name: 'Compliments', data: [12, 15, 18, 20, 22, 25, 28] },
|
|
{ name: 'Suggestions', data: [8, 10, 12, 11, 14, 15, 18] }
|
|
],
|
|
xaxis: {
|
|
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
labels: { style: { colors: '#94a3b8' } }
|
|
},
|
|
colors: ['#eab308', '#3b82f6']
|
|
}).render();
|
|
|
|
// Dashboard Mini Charts
|
|
new ApexCharts(document.querySelector("#dash-chart-1"), {
|
|
...commonOptions,
|
|
chart: { ...commonOptions.chart, type: 'bar', height: 150, sparkline: { enabled: true } },
|
|
series: [{ data: [10, 15, 12, 25, 18, 20, 22] }],
|
|
colors: ['#ef4444']
|
|
}).render();
|
|
|
|
new ApexCharts(document.querySelector("#dash-chart-2"), {
|
|
...commonOptions,
|
|
chart: { ...commonOptions.chart, type: 'area', height: 150, sparkline: { enabled: true } },
|
|
series: [{ data: [25, 30, 28, 35, 32, 38, 40] }],
|
|
colors: ['#3b82f6']
|
|
}).render();
|
|
|
|
</script>
|
|
</body>
|
|
</html> |