Dashboard Widget Example¶

A complete stats row + data table widget for the MetrePay merchant portal dashboard.
Live Preview¶

Total collected
$12,450
↑ 12%
Subscriptions
248
↑ 8 new
Pending
14
Review needed
Failed
3
↓ 2 vs last month
Recent payments
Customer	Amount	Date	Status
John Smith	$150.00	May 8, 2026	Paid
Maria García	$75.00	May 7, 2026	Pending
Carlos López	$200.00	May 6, 2026	Failed
Complete HTML¶

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard — MetrePay</title>
  <link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Cabin', sans-serif; background: #F1F1F1; padding: 32px; }

    /* Stats */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }
    @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px)  { .stats-grid { grid-template-columns: 1fr; } }

    .stat-card {
      background: #FFFFFF;
      border-radius: 10px;
      padding: 20px 24px;
      box-shadow: 0px 0px 6px 3px rgba(127, 146, 189, 0.1);
    }
    .stat-label { font-size: 13px; color: #999; margin-bottom: 4px; }
    .stat-value { font-size: 32px; font-weight: 700; color: #333; line-height: 1.1; margin-bottom: 4px; }
    .stat-meta  { font-size: 12px; color: #999; }

    /* Content card */
    .content-card {
      background: #FFFFFF;
      border-radius: 10px;
      box-shadow: 0px 0px 6px 3px rgba(127, 146, 189, 0.1);
      overflow: hidden;
    }
    .card-header {
      padding: 16px 24px;
      border-bottom: 1px solid #E5ECFB;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .card-title { font-size: 16px; font-weight: 600; color: #333; }

    /* Table */
    .data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .data-table th {
      padding: 12px 24px;
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      color: #999;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-bottom: 1px solid #E5ECFB;
      background: #FAFAFA;
    }
    .data-table td { padding: 14px 24px; color: #555; border-bottom: 1px solid #E5ECFB; }
    .data-table tr:last-child td { border-bottom: none; }
    .data-table tr:hover td { background: #FAFAFA; }

    /* Tags */
    .tag {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
    }
    .tag--paid    { background: #d1fae5; color: #065f46; }
    .tag--pending { background: #fef3c7; color: #92400e; }
    .tag--failed  { background: rgba(248,215,218,1); color: #c80000; }

    /* Button */
    .btn-ghost {
      background: #EBF0FF;
      color: #6E96FF;
      border: none;
      border-radius: 8px;
      padding: 0 14px;
      height: 32px;
      font-family: 'Cabin', sans-serif;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <!-- Stats row -->
  <div class="stats-grid">
    <div class="stat-card">
      <p class="stat-label">Total collected</p>
      <p class="stat-value">$12,450</p>
      <p class="stat-meta" style="color:#1a7f4b;">↑ 12% vs last month</p>
    </div>
    <div class="stat-card">
      <p class="stat-label">Active subscriptions</p>
      <p class="stat-value">248</p>
      <p class="stat-meta" style="color:#1a7f4b;">↑ 8 new this week</p>
    </div>
    <div class="stat-card">
      <p class="stat-label">Pending payments</p>
      <p class="stat-value" style="color:#92400e;">14</p>
      <p class="stat-meta" style="color:#92400e;">Requires attention</p>
    </div>
    <div class="stat-card">
      <p class="stat-label">Failed this month</p>
      <p class="stat-value" style="color:#c80000;">3</p>
      <p class="stat-meta">↓ 2 vs last month</p>
    </div>
  </div>

  <!-- Data table -->
  <div class="content-card">
    <div class="card-header">
      <span class="card-title">Recent payments</span>
      <button class="btn-ghost">View all</button>
    </div>
    <table class="data-table">
      <thead>
        <tr>
          <th>Customer</th>
          <th>Amount</th>
          <th>Date</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Smith</td>
          <td style="font-weight:600; color:#333;">$150.00</td>
          <td style="color:#999;">May 8, 2026</td>
          <td><span class="tag tag--paid">Paid</span></td>
        </tr>
        <tr>
          <td>Maria García</td>
          <td style="font-weight:600; color:#333;">$75.00</td>
          <td style="color:#999;">May 7, 2026</td>
          <td><span class="tag tag--pending">Pending</span></td>
        </tr>
        <tr>
          <td>Carlos López</td>
          <td style="font-weight:600; color:#333;">$200.00</td>
          <td style="color:#999;">May 6, 2026</td>
          <td><span class="tag tag--failed">Failed</span></td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
</html>