Dashboard Chart

<section class="ws-dashboard bg-[var(--ws-dashboard-bg)] py-8">
  <div class="mx-auto max-w-3xl px-6">
    <div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] shadow-sm">
      <!-- Header -->
      <div class="flex items-center justify-between border-b border-[var(--ws-dashboard-border)] px-6 py-4">
        <div>
          <h3 class="text-base font-semibold text-[var(--ws-dashboard-text)]">Revenue Overview</h3>
          <p class="mt-0.5 text-sm text-[var(--ws-dashboard-text-muted)]">Monthly performance breakdown</p>
        </div>
        <div class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--ws-dashboard-border)] bg-black/5 px-3 py-1.5 text-sm font-medium text-[var(--ws-dashboard-text-soft)]">
          Last 7 months
          <svg class="h-4 w-4 text-[var(--ws-dashboard-text-muted)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
        </div>
      </div>

      <!-- Chart Area -->
      <div class="px-6 pt-6 pb-4">
        <div class="flex items-end justify-between gap-3" style="height: 200px;">
          <!-- Bar 1 -->
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="relative w-full flex justify-center">
              <div class="w-full max-w-[40px] rounded-t-md bg-[var(--ws-dashboard-accent)]" style="height: 100px;"></div>
            </div>
            <span class="text-xs font-medium text-[var(--ws-dashboard-text-muted)]">Jan</span>
          </div>
          <!-- Bar 2 -->
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="relative w-full flex justify-center">
              <div class="w-full max-w-[40px] rounded-t-md bg-[var(--ws-dashboard-accent)]" style="height: 140px;"></div>
            </div>
            <span class="text-xs font-medium text-[var(--ws-dashboard-text-muted)]">Feb</span>
          </div>
          <!-- Bar 3 -->
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="relative w-full flex justify-center">
              <div class="w-full max-w-[40px] rounded-t-md bg-[var(--ws-dashboard-accent)]" style="height: 80px;"></div>
            </div>
            <span class="text-xs font-medium text-[var(--ws-dashboard-text-muted)]">Mar</span>
          </div>
          <!-- Bar 4 -->
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="relative w-full flex justify-center">
              <div class="w-full max-w-[40px] rounded-t-md bg-[var(--ws-dashboard-accent)]" style="height: 170px;"></div>
            </div>
            <span class="text-xs font-medium text-[var(--ws-dashboard-text-muted)]">Apr</span>
          </div>
          <!-- Bar 5 -->
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="relative w-full flex justify-center">
              <div class="w-full max-w-[40px] rounded-t-md bg-emerald-500" style="height: 190px;"></div>
            </div>
            <span class="text-xs font-medium text-[var(--ws-dashboard-text-muted)]">May</span>
          </div>
          <!-- Bar 6 -->
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="relative w-full flex justify-center">
              <div class="w-full max-w-[40px] rounded-t-md bg-[var(--ws-dashboard-accent)]" style="height: 120px;"></div>
            </div>
            <span class="text-xs font-medium text-[var(--ws-dashboard-text-muted)]">Jun</span>
          </div>
          <!-- Bar 7 -->
          <div class="flex flex-1 flex-col items-center gap-2">
            <div class="relative w-full flex justify-center">
              <div class="w-full max-w-[40px] rounded-t-md bg-[var(--ws-dashboard-accent)]" style="height: 150px;"></div>
            </div>
            <span class="text-xs font-medium text-[var(--ws-dashboard-text-muted)]">Jul</span>
          </div>
        </div>
      </div>

      <!-- Legend -->
      <div class="flex items-center justify-center gap-6 px-6 pb-4">
        <div class="flex items-center gap-2">
          <span class="inline-block h-3 w-3 rounded-sm bg-[var(--ws-dashboard-accent)]"></span>
          <span class="text-xs font-medium text-[var(--ws-dashboard-text-soft)]">Revenue</span>
        </div>
        <div class="flex items-center gap-2">
          <span class="inline-block h-3 w-3 rounded-sm bg-emerald-500"></span>
          <span class="text-xs font-medium text-[var(--ws-dashboard-text-soft)]">Best Month</span>
        </div>
      </div>

      <!-- Stats Summary -->
      <div class="grid grid-cols-3 divide-x divide-[var(--ws-dashboard-border)] border-t border-[var(--ws-dashboard-border)]">
        <div class="px-6 py-4 text-center">
          <p class="text-xs font-medium text-[var(--ws-dashboard-text-muted)]">Total</p>
          <p class="mt-1 text-lg font-bold text-[var(--ws-dashboard-text)]">$135,420</p>
        </div>
        <div class="px-6 py-4 text-center">
          <p class="text-xs font-medium text-[var(--ws-dashboard-text-muted)]">Average</p>
          <p class="mt-1 text-lg font-bold text-[var(--ws-dashboard-text)]">$19,346</p>
        </div>
        <div class="px-6 py-4 text-center">
          <p class="text-xs font-medium text-[var(--ws-dashboard-text-muted)]">Peak</p>
          <p class="mt-1 text-lg font-bold text-[var(--ws-dashboard-text)]">$28,500</p>
        </div>
      </div>
    </div>
  </div>
</section>