Nova — Clean SaaS Admin Dashboard

<aside class="nv-side">
  <div class="d-flex align-items-center gap-2 text-white fw-bold fs-5 px-2 mb-4"><span class="d-grid place-items-center rounded-3" style="width:34px;height:34px;background:var(--nv-accent)">CA</span> Atlas Admin</div>
  <a class="active" href="#"><i class="bi bi-grid-1x2-fill"></i> Dashboard</a>
  <a href="#"><i class="bi bi-bar-chart-fill"></i> Analytics</a>
  <a href="#"><i class="bi bi-people-fill"></i> Customers</a>
  <a href="#"><i class="bi bi-box-seam-fill"></i> Products</a>
  <a href="#"><i class="bi bi-receipt"></i> Orders</a>
  <a href="#"><i class="bi bi-gear-fill"></i> Settings</a>
  <hr class="border-secondary opacity-25">
  <a href="#"><i class="bi bi-box-arrow-left"></i> Log out</a>
</aside>
<main class="nv-main">
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
    <div><h4 class="fw-bold mb-0">Good morning, Rihards 👋</h4><span class="text-secondary small">Here's what's happening across ConvertAtlas today.</span></div>
    <div class="d-flex gap-2"><input class="form-control" placeholder="Search…" style="max-width:220px"><button class="btn btn-primary" style="background:var(--nv-accent);border:0"><i class="bi bi-plus-lg"></i> New</button></div>
  </div>
  <div class="row g-3 mb-3">
    <div class="col-6 col-xl-3"><div class="nv-card nv-stat p-3 d-flex align-items-center gap-3"><div class="ico text-white" style="background:#4f6df5"><i class="bi bi-currency-dollar"></i></div><div><div class="text-secondary small">Revenue</div><div class="h5 fw-bold mb-0">$48,210 <span class="small nv-up">+12%</span></div></div></div></div>
    <div class="col-6 col-xl-3"><div class="nv-card nv-stat p-3 d-flex align-items-center gap-3"><div class="ico text-white" style="background:#16a34a"><i class="bi bi-cart-check"></i></div><div><div class="text-secondary small">Orders</div><div class="h5 fw-bold mb-0">1,204 <span class="small nv-up">+5%</span></div></div></div></div>
    <div class="col-6 col-xl-3"><div class="nv-card nv-stat p-3 d-flex align-items-center gap-3"><div class="ico text-white" style="background:#f59e0b"><i class="bi bi-people"></i></div><div><div class="text-secondary small">Customers</div><div class="h5 fw-bold mb-0">8,492 <span class="small nv-up">+9%</span></div></div></div></div>
    <div class="col-6 col-xl-3"><div class="nv-card nv-stat p-3 d-flex align-items-center gap-3"><div class="ico text-white" style="background:#dc2626"><i class="bi bi-arrow-repeat"></i></div><div><div class="text-secondary small">Refunds</div><div class="h5 fw-bold mb-0">23 <span class="small nv-down">+2</span></div></div></div></div>
  </div>
  <div class="row g-3 mb-3">
    <div class="col-lg-8"><div class="nv-card p-3"><div class="d-flex justify-content-between align-items-center mb-1"><h6 class="fw-bold mb-0">Revenue overview</h6><select class="form-select form-select-sm w-auto"><option>Last 7 days</option><option>Last 30 days</option></select></div><div id="nvArea"></div></div></div>
    <div class="col-lg-4"><div class="nv-card p-3"><h6 class="fw-bold mb-1">Sales by channel</h6><div id="nvDonut"></div></div></div>
  </div>
  <div class="nv-card p-3">
    <div class="d-flex justify-content-between align-items-center mb-2"><h6 class="fw-bold mb-0">Recent Pro orders</h6><a href="#" class="small text-decoration-none">View all</a></div>
    <div class="table-responsive"><table class="table table-hover align-middle mb-0">
      <thead class="text-secondary small"><tr><th>Order</th><th>Customer</th><th>Date</th><th>Amount</th><th>Status</th></tr></thead>
      <tbody>
        <tr><td class="fw-semibold">#10421</td><td>convertatlas.org / Pro</td><td>Jun 11</td><td>$240.00</td><td><span class="badge text-bg-success">Paid</span></td></tr>
        <tr><td class="fw-semibold">#10420</td><td>Atlas Templates pack</td><td>Jun 11</td><td>$96.50</td><td><span class="badge text-bg-warning">Pending</span></td></tr>
        <tr><td class="fw-semibold">#10419</td><td>Atlas Team license</td><td>Jun 10</td><td>$1,120.00</td><td><span class="badge text-bg-success">Paid</span></td></tr>
        <tr><td class="fw-semibold">#10418</td><td>Snippets API key</td><td>Jun 10</td><td>$58.00</td><td><span class="badge text-bg-danger">Failed</span></td></tr>
      </tbody>
    </table></div>
  </div>
</main>
<div style="text-align:center;padding:18px 12px;font:500 12px system-ui;opacity:.6">Template by <a href="https://convertatlas.org" style="color:inherit;font-weight:700;text-decoration:none">ConvertAtlas</a> · Developer Tools</div>

:root{--nv-bg:#f5f7fb;--nv-side:#101827;--nv-accent:#4f6df5}
body{background:var(--nv-bg);font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.nv-side{background:var(--nv-side);min-height:100vh;width:240px;position:fixed;inset:0 auto 0 0;padding:20px 14px;z-index:100}
.nv-side a{color:#9aa5b8;text-decoration:none;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:.92rem;margin-bottom:2px;transition:.15s}
.nv-side a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nv-side a.active{color:#fff;background:var(--nv-accent)}
.nv-main{margin-left:240px;padding:24px}
.nv-card{background:#fff;border:0;border-radius:16px;box-shadow:0 1px 2px rgba(16,24,39,.04),0 6px 20px rgba(16,24,39,.05)}
.nv-stat .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.nv-up{color:#16a34a}.nv-down{color:#dc2626}
.table>:not(caption)>*>*{padding:.7rem .75rem}
@media(max-width:991px){.nv-side{display:none}.nv-main{margin-left:0}}

new ApexCharts(document.querySelector('#nvArea'),{chart:{type:'area',height:260,toolbar:{show:false}},series:[{name:'Revenue',data:[4200,5100,4800,6200,5900,7400,6800]},{name:'Costs',data:[2100,2400,2300,2800,2600,3100,2900]}],xaxis:{categories:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},colors:['#4f6df5','#cbd5e1'],fill:{type:'gradient',gradient:{opacityFrom:.4,opacityTo:.05}},stroke:{curve:'smooth',width:3},dataLabels:{enabled:false},legend:{position:'top'}}).render();
new ApexCharts(document.querySelector('#nvDonut'),{chart:{type:'donut',height:260},series:[44,31,25],labels:['Online','Retail','Partners'],colors:['#4f6df5','#16a34a','#f59e0b'],legend:{position:'bottom'},dataLabels:{enabled:false}}).render();