병원 예약 관리 대시보드

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">64건</strong>
      <span class="text-xs font-black text-emerald-600">+8건</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">5.8%</strong>
      <span class="text-xs font-black text-orange-600">-0.9%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">12명</strong>
      <span class="text-xs font-black text-sky-600">보통</span>
    </article>
  </div>
  <div class="mt-5 h-64">
    <canvas id="clinic-reservation-dashboard-chart"></canvas>
  </div>
</section>

<script>
  const ctx = document.getElementById("clinic-reservation-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>