<!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>
    <link rel="stylesheet" href="/static/dist/css/tailwind.css">
    <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">
    <link rel="stylesheet" href="/static/vendor/fonts/noto-kufi-arabic/arabic.css">
    <style>
        body {
            font-family: 'Inter', 'Noto Kufi Arabic', sans-serif;
            background-color: #0f172a; /* Slate 900 */
            color: #e2e8f0;
        }
        [dir="rtl"] body,
        [dir="rtl"] input,
        [dir="rtl"] textarea,
        [dir="rtl"] select,
        [dir="rtl"] button {
            font-family: 'Noto Kufi Arabic', sans-serif;
        }
        .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>&copy; 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 },
            dataLabels: { enabled: true, style: { fontSize: '11px' } },
            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>