      <!-- Stat Cards -->
      <div class="stat-grid">
        <div class="stat-card">
          <div class="stat-icon" style="background:color-mix(in srgb,var(--color-primary) 12%,transparent);">
            <svg class="w-5 h-5" style="color:var(--color-primary);" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div class="stat-value">Rp 48,2Jt</div>
          <div class="stat-label">Total Pendapatan</div>
          <div class="stat-change stat-up">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
            </svg>
            +12.5% dari bulan lalu
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon" style="background:rgba(34,197,94,.12);">
            <svg class="w-5 h-5" style="color:#22c55e;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
            </svg>
          </div>
          <div class="stat-value">1,482</div>
          <div class="stat-label">Total Pesanan</div>
          <div class="stat-change stat-up">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
            </svg>
            +8.3% dari bulan lalu
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon" style="background:color-mix(in srgb,var(--color-accent) 12%,transparent);">
            <svg class="w-5 h-5" style="color:var(--color-accent);" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <div class="stat-value">8,364</div>
          <div class="stat-label">Total Pelanggan</div>
          <div class="stat-change stat-up">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
            </svg>
            +5.1% dari bulan lalu
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon" style="background:rgba(239,68,68,.1);">
            <svg class="w-5 h-5" style="color:#ef4444;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          </div>
          <div class="stat-value">24</div>
          <div class="stat-label">Pesanan Pending</div>
          <div class="stat-change stat-down">
            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
            </svg>
            -3 dari kemarin
          </div>
        </div>
      </div>

      <!-- Charts -->
      <div class="chart-grid">
        <!-- Bar Chart -->
        <div class="chart-card">
          <div class="chart-title">
            Grafik Penjualan (2026)
            <select
              style="font-size:.7rem;border:1px solid var(--color-border);border-radius:.5rem;padding:.2rem .5rem;background:var(--color-bg);color:var(--color-text);outline:none;">
              <option>Per Bulan</option>
              <option>Per Minggu</option>
            </select>
          </div>
          <div class="chart-placeholder" id="barChart">
            <!-- Bars rendered by JS -->
          </div>
          <div
            style="display:flex;justify-content:space-between;padding:.375rem .25rem 0;font-size:.6rem;opacity:.45;color:var(--color-text);">
            <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>Mei</span><span>Jun</span><span>Jul</span><span>Ags</span><span>Sep</span><span>Okt</span><span>Nov</span><span>Des</span>
          </div>
        </div>
        <!-- Donut Chart -->
        <div class="chart-card">
          <div class="chart-title">Kategori Produk</div>
          <div class="donut-wrap">
            <div class="donut"></div>
            <div class="donut-legends">
              <div class="donut-leg"><span class="donut-dot" style="background:var(--color-primary);"></span> Elektronik
                (45%)</div>
              <div class="donut-leg"><span class="donut-dot" style="background:var(--color-accent);"></span> Fashion
                (23%)</div>
              <div class="donut-leg"><span class="donut-dot" style="background:#22c55e;"></span> Rumah Tangga (16%)
              </div>
              <div class="donut-leg"><span class="donut-dot" style="background:var(--color-border);"></span> Lainnya
                (16%)</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Table -->
      <div class="table-card">
        <div class="table-head">
          <span class="table-title">Pesanan Terbaru</span>
          <div class="table-search">
            <svg class="w-3.5 h-3.5 opacity-40 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
            <input type="text" placeholder="Cari pesanan..." />
          </div>
        </div>
        <div style="overflow-x:auto;">
          <table>
            <thead>
              <tr>
                <th>Invoice</th>
                <th>Pelanggan</th>
                <th>Produk</th>
                <th>Total</th>
                <th>Status</th>
                <th>Tanggal</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td style="font-weight:600;color:var(--color-primary);">#INV-0312</td>
                <td><span class="td-avatar" style="background:#6366f1;">A</span><span class="td-name">Andi Wijaya</span>
                </td>
                <td>Laptop ASUS ROG</td>
                <td style="font-weight:600;">Rp 12.500.000</td>
                <td><span class="badge-status badge-success">Selesai</span></td>
                <td style="opacity:.55;">29 Jul 2026</td>
              </tr>
              <tr>
                <td style="font-weight:600;color:var(--color-primary);">#INV-0311</td>
                <td><span class="td-avatar" style="background:#f59e0b;">S</span><span class="td-name">Siti Rahayu</span>
                </td>
                <td>iPhone 15 Pro</td>
                <td style="font-weight:600;">Rp 18.200.000</td>
                <td><span class="badge-status badge-warning">Proses</span></td>
                <td style="opacity:.55;">29 Jul 2026</td>
              </tr>
              <tr>
                <td style="font-weight:600;color:var(--color-primary);">#INV-0310</td>
                <td><span class="td-avatar" style="background:#10b981;">B</span><span class="td-name">Budi
                    Santoso</span></td>
                <td>Samsung TV 55"</td>
                <td style="font-weight:600;">Rp 8.750.000</td>
                <td><span class="badge-status badge-info">Dikirim</span></td>
                <td style="opacity:.55;">28 Jul 2026</td>
              </tr>
              <tr>
                <td style="font-weight:600;color:var(--color-primary);">#INV-0309</td>
                <td><span class="td-avatar" style="background:#ec4899;">D</span><span class="td-name">Dewi
                    Lestari</span></td>
                <td>Sony Headphone</td>
                <td style="font-weight:600;">Rp 2.350.000</td>
                <td><span class="badge-status badge-danger">Dibatalkan</span></td>
                <td style="opacity:.55;">28 Jul 2026</td>
              </tr>
              <tr>
                <td style="font-weight:600;color:var(--color-primary);">#INV-0308</td>
                <td><span class="td-avatar" style="background:#8b5cf6;">R</span><span class="td-name">Rina
                    Marlina</span></td>
                <td>Macbook Air M3</td>
                <td style="font-weight:600;">Rp 21.000.000</td>
                <td><span class="badge-status badge-success">Selesai</span></td>
                <td style="opacity:.55;">27 Jul 2026</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid var(--color-border);font-size:.75rem;color:var(--color-text);opacity:.55;">
          <span>Menampilkan 1–5 dari 312 pesanan</span>
          <div style="display:flex;gap:.375rem;">
            <button
              style="padding:.3rem .625rem;border:1px solid var(--color-border);border-radius:.5rem;background:var(--color-bg);cursor:pointer;font-size:.7rem;color:var(--color-text);">‹
              Prev</button>
            <button
              style="padding:.3rem .625rem;border:1px solid var(--color-primary);border-radius:.5rem;background:var(--color-primary);cursor:pointer;font-size:.7rem;color:#fff;font-weight:600;">1</button>
            <button
              style="padding:.3rem .625rem;border:1px solid var(--color-border);border-radius:.5rem;background:var(--color-bg);cursor:pointer;font-size:.7rem;color:var(--color-text);">2</button>
            <button
              style="padding:.3rem .625rem;border:1px solid var(--color-border);border-radius:.5rem;background:var(--color-bg);cursor:pointer;font-size:.7rem;color:var(--color-text);">Next
              ›</button>
          </div>
        </div>
      </div>

    </div><!-- /content-area -->
