예약 서비스 관리자 대시보드

KPI Ingredients

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<section class="rounded-2xl border border-zinc-200 bg-white p-5 text-zinc-950">
  <div class="mb-5 flex items-center justify-between border-b border-zinc-200 pb-4">
    <div>
      <p class="text-xs font-bold uppercase tracking-wide text-orange-600">예약/매칭</p>
      <h2 class="mt-1 text-xl font-extrabold">예약 서비스 관리자 대시보드</h2>
    </div>
    <span class="rounded-lg bg-orange-50 px-3 py-1 text-xs font-bold text-orange-700">초급</span>
  </div>
  <div class="grid gap-3 md:grid-cols-3">
    <article class="rounded-xl border border-zinc-200 p-4">
      <p class="text-xs font-bold text-zinc-500">오늘 예약</p>
      <strong class="mt-1 block text-2xl">86건</strong>
      <span class="text-xs font-black text-emerald-600">+11건</span>
    </article>
    <article class="rounded-xl border border-zinc-200 p-4">
      <p class="text-xs font-bold text-zinc-500">취소율</p>
      <strong class="mt-1 block text-2xl">7.4%</strong>
      <span class="text-xs font-black text-orange-600">-1.2%p</span>
    </article>
    <article class="rounded-xl border border-zinc-200 p-4">
      <p class="text-xs font-bold text-zinc-500">미처리</p>
      <strong class="mt-1 block text-2xl">14건</strong>
      <span class="text-xs font-black text-sky-600">+3건</span>
    </article>
  </div>
  <div class="mt-5 h-64">
    <canvas id="reservation-admin-dashboard-chart"></canvas>
  </div>
</section>

<script>
  const ctx = document.getElementById("reservation-admin-dashboard-chart");
  new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["월", "화", "수", "목", "금"],
      datasets: [{
        label: "예약 상태별 흐름",
        data: [42, 58, 51, 66, 72],
        backgroundColor: "#e84b2a",
        borderRadius: 10
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: { x: { grid: { display: false } }, y: { grid: { color: "rgba(0,0,0,0.08)" } } }
    }
  });
</script>