Dashboard

<section class="ws-dashboard min-h-screen bg-[var(--ws-dashboard-bg)]">
  <!-- Top bar -->
  <header class="border-b border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)]">
    <div class="flex items-center justify-between px-6 py-4">
      <h1 class="text-lg font-bold text-[var(--ws-dashboard-text)]">Dashboard</h1>
      <div class="flex items-center gap-3">
        <span class="text-sm text-[var(--ws-dashboard-text-muted)]">Welcome, Admin</span>
        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-600 text-sm font-bold text-white">A</div>
      </div>
    </div>
  </header>

  <div class="mx-auto max-w-7xl px-6 py-8">
    <!-- Stats row -->
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-5">
        <p class="text-sm text-[var(--ws-dashboard-text-muted)]">Total Revenue</p>
        <p class="mt-1 text-2xl font-bold text-[var(--ws-dashboard-text)]">$45,231</p>
        <p class="mt-1 text-xs text-emerald-600">+20.1% from last month</p>
      </div>
      <div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-5">
        <p class="text-sm text-[var(--ws-dashboard-text-muted)]">Subscriptions</p>
        <p class="mt-1 text-2xl font-bold text-[var(--ws-dashboard-text)]">+2,350</p>
        <p class="mt-1 text-xs text-emerald-600">+180 this week</p>
      </div>
      <div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-5">
        <p class="text-sm text-[var(--ws-dashboard-text-muted)]">Active Users</p>
        <p class="mt-1 text-2xl font-bold text-[var(--ws-dashboard-text)]">12,234</p>
        <p class="mt-1 text-xs text-emerald-600">+5.4% from last week</p>
      </div>
      <div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-5">
        <p class="text-sm text-[var(--ws-dashboard-text-muted)]">Bounce Rate</p>
        <p class="mt-1 text-2xl font-bold text-[var(--ws-dashboard-text)]">24.5%</p>
        <p class="mt-1 text-xs text-rose-600">+2.1% from last month</p>
      </div>
    </div>

    <!-- Table -->
    <div class="mt-8 overflow-hidden rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)]">
      <div class="flex items-center justify-between border-b border-[var(--ws-dashboard-border)] px-6 py-4">
        <h2 class="font-semibold text-[var(--ws-dashboard-text)]">Recent Orders</h2>
        <button type="button" class="text-sm font-medium text-[var(--ws-dashboard-accent)] hover:opacity-80">View all</button>
      </div>
      <table class="w-full text-sm">
        <caption class="sr-only">Recent orders and their status</caption>
        <thead class="bg-black/5">
          <tr>
            <th scope="col" class="px-6 py-3 text-left font-medium text-[var(--ws-dashboard-text-muted)]">Order</th>
            <th scope="col" class="px-6 py-3 text-left font-medium text-[var(--ws-dashboard-text-muted)]">Customer</th>
            <th scope="col" class="px-6 py-3 text-left font-medium text-[var(--ws-dashboard-text-muted)]">Status</th>
            <th scope="col" class="px-6 py-3 text-right font-medium text-[var(--ws-dashboard-text-muted)]">Amount</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-[var(--ws-dashboard-border)]">
          <tr>
            <td class="px-6 py-4 font-mono text-[var(--ws-dashboard-text)]">#3210</td>
            <td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">Sarah Kim</td>
            <td class="px-6 py-4"><span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">Completed</span></td>
            <td class="px-6 py-4 text-right font-medium text-[var(--ws-dashboard-text)]">$250.00</td>
          </tr>
          <tr>
            <td class="px-6 py-4 font-mono text-[var(--ws-dashboard-text)]">#3209</td>
            <td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">Marco Rossi</td>
            <td class="px-6 py-4"><span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">Pending</span></td>
            <td class="px-6 py-4 text-right font-medium text-[var(--ws-dashboard-text)]">$125.00</td>
          </tr>
          <tr>
            <td class="px-6 py-4 font-mono text-[var(--ws-dashboard-text)]">#3208</td>
            <td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">Aisha Johnson</td>
            <td class="px-6 py-4"><span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">Completed</span></td>
            <td class="px-6 py-4 text-right font-medium text-[var(--ws-dashboard-text)]">$430.00</td>
          </tr>
          <tr>
            <td class="px-6 py-4 font-mono text-[var(--ws-dashboard-text)]">#3207</td>
            <td class="px-6 py-4 text-[var(--ws-dashboard-text-soft)]">David Lee</td>
            <td class="px-6 py-4"><span class="rounded-full bg-rose-100 px-2 py-0.5 text-xs font-medium text-rose-700">Cancelled</span></td>
            <td class="px-6 py-4 text-right font-medium text-[var(--ws-dashboard-text)]">$89.00</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>