Dashboard beta

<div class="k-tpl-dash">
  <aside class="k-tpl-side">
    <div class="k-tpl-brand"><span class="k-tpl-logo"><i></i></span>Acme Studio</div>
    <p class="k-tpl-navlbl">General</p>
    <nav class="k-tpl-nav">
      <a href="#" class="on"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m3 11 9-8 9 8"/><path d="M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5"/></svg><span>Overview</span></a>
      <a href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="M3.5 3.5v17h17"/><path d="m7 14.5 4-4 3.5 3L19 8.5"/></svg><span>Analytics</span></a>
      <a href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><circle cx="9" cy="8.5" r="3.4"/><path d="M2.8 20c.7-3.4 3.2-5.2 6.2-5.2s5.5 1.8 6.2 5.2"/><path d="M16 5.4a3.4 3.4 0 0 1 0 6.4M18.5 15.4c1.5.8 2.5 2.4 2.9 4.6"/></svg><span>Customers</span></a>
      <a href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z"/></svg><span>Products</span></a>
    </nav>
    <p class="k-tpl-navlbl">Workspace</p>
    <nav class="k-tpl-nav">
      <a href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><rect x="2.5" y="5.5" width="19" height="13" rx="2"/><path d="M2.5 10h19"/></svg><span>Billing</span></a>
      <a href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="M3 6h10M17 6h4M3 12h4M11 12h10M3 18h12M19 18h2"/><circle cx="15" cy="6" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="17" cy="18" r="2"/></svg><span>Settings</span></a>
    </nav>
    <div class="k-tpl-user"><span class="k-avatar" data-size="sm">AK</span><span class="k-tpl-uname">Aoi Kimura<small>Admin</small></span></div>
  </aside>
  <div class="k-tpl-main">
    <header class="k-tpl-top">
      <div class="k-tpl-title"><h2>Overview</h2><p>Welcome back — here is what's happening across your studio.</p></div>
      <div class="k-tpl-actions">
        <span class="k-tpl-search"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.5-4.5"/></svg><input class="input" type="search" placeholder="Search orders, customers…" aria-label="Search"></span>
        <button class="btn btn-sec" type="button" aria-label="Notifications"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="M18 16H6c.6-1.2 1-2.6 1-4.5V10a5 5 0 0 1 10 0v1.5c0 1.9.4 3.3 1 4.5Z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg></button>
        <span class="k-avatar" data-size="sm" data-status aria-label="Aoi Kimura, online">AK</span>
      </div>
    </header>
    <section class="k-tpl-stats">
      <div class="k-stat"><div class="k-stat-lbl">Revenue</div><div class="k-stat-val">$48,250</div><span class="k-stat-delta">↑ 12.5% vs last month</span></div>
      <div class="k-stat"><div class="k-stat-lbl">Active users</div><div class="k-stat-val">3,842</div><span class="k-stat-delta">↑ 8.1% vs last month</span></div>
      <div class="k-stat"><div class="k-stat-lbl">Orders</div><div class="k-stat-val">1,204</div><span class="k-stat-delta">↑ 3.4% vs last month</span></div>
      <div class="k-stat"><div class="k-stat-lbl">Conversion</div><div class="k-stat-val">3.2%</div><span class="k-stat-delta" data-dir="down">↓ 0.4 pt vs last month</span></div>
    </section>
    <section class="k-tpl-card">
      <figure class="k-line-chart" role="img" aria-label="Revenue grew steadily across the last twelve months" style="width:100%">
        <figcaption>Revenue <span>Last 12 months, USD</span></figcaption>
        <svg viewBox="0 0 560 190" aria-hidden="true">
          <line x1="0" y1="30" x2="560" y2="30" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="79" x2="560" y2="79" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="128" x2="560" y2="128" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="178" x2="560" y2="178" style="stroke:var(--k-line)" stroke-width="1"/>
          <path d="M0.0,143.2 L50.9,130.6 L101.8,136.9 L152.7,118.0 L203.6,124.3 L254.5,103.7 L305.5,111.6 L356.4,91.1 L407.3,99.0 L458.2,78.5 L509.1,86.4 L560.0,65.8 L560,186 L0,186 Z" style="fill:color-mix(in srgb,var(--k-accent) 13%,transparent)"/>
          <path class="line" pathLength="1" d="M0.0,143.2 L50.9,130.6 L101.8,136.9 L152.7,118.0 L203.6,124.3 L254.5,103.7 L305.5,111.6 L356.4,91.1 L407.3,99.0 L458.2,78.5 L509.1,86.4 L560.0,65.8"/>
          <circle cx="560.0" cy="65.8" r="5.5" style="fill:var(--k-core);stroke:var(--k-bg)" stroke-width="2"/>
        </svg>
        <div class="x"><span>Jan</span><span>Mar</span><span>May</span><span>Jul</span><span>Sep</span><span>Nov</span></div>
      </figure>
    </section>
    <section class="k-tpl-card">
      <div class="k-dt" data-dt>
        <table class="k-dt-t">
          <thead><tr>
            <th>Order</th>
            <th>Customer</th>
            <th>Status</th>
            <th class="num"><button class="k-dt-sort" data-sort="num" data-dir="" type="button">Total <span class="arr"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></button></th>
          </tr></thead>
          <tbody><tr><td style="font-weight:550">ORD-1042</td><td>Aoi Kimura</td><td><span class="badge teal">Paid</span></td><td class="num" data-v="4820">$4,820</td></tr><tr><td style="font-weight:550">ORD-1041</td><td>Ren Sato</td><td><span class="badge teal">Paid</span></td><td class="num" data-v="3950">$3,950</td></tr><tr><td style="font-weight:550">ORD-1040</td><td>Mei Chen</td><td><span class="badge amber">Pending</span></td><td class="num" data-v="1280">$1,280</td></tr><tr><td style="font-weight:550">ORD-1039</td><td>Jonas Berg</td><td><span class="badge teal">Paid</span></td><td class="num" data-v="2715">$2,715</td></tr><tr><td style="font-weight:550">ORD-1038</td><td>Priya Nair</td><td><span class="badge red">Failed</span></td><td class="num" data-v="980">$980</td></tr></tbody>
        </table>
        <div class="k-dt-f">5 orders<span class="pg"><button class="btn btn-sec btn-sm" disabled>Previous</button><button class="btn btn-sec btn-sm">Next</button></span></div>
      </div>
    </section>
  </div>
</div>