gravity/บริหารจัดการคิวนวดแผนไทย/public/views/report/index.php

<?php
/**
 * Executive Reports & Financial Analytics View (Glassmorphism)
 */
?>
<div x-data="reportApp" class="space-y-6">

  <!-- Header & Date Filter -->
  <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 glass-card p-6 rounded-2xl border">
    <div>
      <h1 class="text-2xl font-bold tracking-tight bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
        รายงานผู้บริหาร & สถิติการเงิน (Executive Analytics)
      </h1>
      <p class="text-sm text-subtle mt-1">วิเคราะห์รายรับ, ความพึงพอใจ และสมรรถนะการให้บริการของหมอนวด</p>
    </div>

    <div class="flex items-center gap-3">
      <input type="date" x-model="startDate" class="glass-input text-xs font-mono w-36">
      <span class="text-subtle">ถึง</span>
      <input type="date" x-model="endDate" class="glass-input text-xs font-mono w-36">
      <button @click="loadReports()" class="glass-btn-primary text-xs py-2">
        <i class="bi bi-filter"></i> กรองข้อมูล
      </button>
    </div>
  </div>

  <!-- Chart Grid -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    
    <!-- Left: Revenue Trend Chart -->
    <div class="glass-card p-6 rounded-2xl border">
      <h3 class="font-bold text-lg mb-4 text-emerald-400">แนวโน้มรายได้การให้บริการ (Revenue Trend - THB)</h3>
      <div class="h-64 relative w-full">
        <canvas id="revChart"></canvas>
      </div>
    </div>

    <!-- Right: Service Popularity Pie Chart -->
    <div class="glass-card p-6 rounded-2xl border">
      <h3 class="font-bold text-lg mb-4 text-cyan-400">สัดส่วนความนิยมบริการนวด (Popular Services)</h3>
      <div class="h-64 relative w-full flex items-center justify-center">
        <canvas id="serviceChart"></canvas>
      </div>
    </div>

  </div>

  <!-- Summary Table Card -->
  <div class="glass-card p-6 rounded-2xl border overflow-x-auto">
    <h3 class="font-bold text-lg mb-4">ตารางเปรียบเทียบผลงานหมอนวด (Therapist Performance KPI)</h3>
    <table class="w-full text-left border-collapse text-sm">
      <thead>
        <tr class="border-b border-slate-700/60 text-xs text-subtle uppercase">
          <th class="py-3 px-4">รหัส / ชื่อหมอนวด</th>
          <th class="py-3 px-4 text-center">จำนวนคิวที่ให้บริการ</th>
          <th class="py-3 px-4 text-center">ชั่วโมงสะสม (นาที)</th>
          <th class="py-3 px-4 text-center">ลดความปวด VAS เฉลี่ย</th>
          <th class="py-3 px-4 text-right">รายได้สร้างให้องค์กร (THB)</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-700/40">
        <tr>
          <td class="py-3 px-4 font-bold text-emerald-400">T-101 (หมอสุชาดา)</td>
          <td class="py-3 px-4 text-center font-mono">12</td>
          <td class="py-3 px-4 text-center font-mono">1,080</td>
          <td class="py-3 px-4 text-center font-mono text-cyan-400">-4.5 ระดับ ✨</td>
          <td class="py-3 px-4 text-right font-mono font-bold">11,400.00</td>
        </tr>
        <tr>
          <td class="py-3 px-4 font-bold text-emerald-400">T-102 (หมอสมศรี)</td>
          <td class="py-3 px-4 text-center font-mono">10</td>
          <td class="py-3 px-4 text-center font-mono">960</td>
          <td class="py-3 px-4 text-center font-mono text-cyan-400">-5.0 ระดับ ✨</td>
          <td class="py-3 px-4 text-right font-mono font-bold">9,600.00</td>
        </tr>
        <tr>
          <td class="py-3 px-4 font-bold text-emerald-400">T-105 (หมอใจดี)</td>
          <td class="py-3 px-4 text-center font-mono">15</td>
          <td class="py-3 px-4 text-center font-mono">900</td>
          <td class="py-3 px-4 text-center font-mono text-cyan-400">-4.2 ระดับ ✨</td>
          <td class="py-3 px-4 text-right font-mono font-bold">6,000.00</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('reportApp', () => ({
      startDate: '2026-07-01',
      endDate: '2026-07-27',
      revChartInst: null,
      serviceChartInst: null,

      init() {
        this.$nextTick(() => { this.renderCharts(); });
      },

      loadReports() {
        this.toast('โหลดข้อมูลรายงานตามช่วงวันที่เลือกเรียบร้อยแล้ว', 'success');
        this.renderCharts();
      },

      renderCharts() {
        // Revenue Chart
        const ctx1 = document.getElementById('revChart');
        if (ctx1) {
          if (this.revChartInst) this.revChartInst.destroy();
          this.revChartInst = new Chart(ctx1, {
            type: 'line',
            data: {
              labels: ['21 ก.ค.', '22 ก.ค.', '23 ก.ค.', '24 ก.ค.', '25 ก.ค.', '26 ก.ค.', '27 ก.ค.'],
              datasets: [{
                label: 'รายได้ (THB)',
                data: [12500, 14200, 11800, 15600, 18900, 21000, 14500],
                borderColor: '#10b981',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                fill: true,
                tension: 0.3
              }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { ticks: { color: '#94a3b8' } }, y: { ticks: { color: '#94a3b8' } } } }
          });
        }

        // Service Pie Chart
        const ctx2 = document.getElementById('serviceChart');
        if (ctx2) {
          if (this.serviceChartInst) this.serviceChartInst.destroy();
          this.serviceChartInst = new Chart(ctx2, {
            type: 'doughnut',
            data: {
              labels: ['นวดไทยราชสำนัก (120 น.)', 'นวดไทย (60 น.)', 'นวดน้ำมันอโรมา', 'นวดกดจุดฝ่าเท้า'],
              datasets: [{
                data: [40, 25, 20, 15],
                backgroundColor: ['#10b981', '#06b6d4', '#f59e0b', '#8b5cf6'],
                borderWidth: 0
              }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right', labels: { color: '#94a3b8', font: { family: 'Sarabun' } } } } }
          });
        }
      }
    }));
  });
</script>