Mint — E-commerce Admin Dashboard

<nav class="mt-nav py-2 px-3 d-flex flex-wrap align-items-center gap-3 sticky-top">
  <span class="fw-bold fs-5" style="color:#0f5132"><i class="bi bi-leaf-fill me-1"></i>Atlas Commerce</span>
  <div class="d-none d-md-flex gap-1"><a class="nav-link active" href="#">Dashboard</a><a class="nav-link" href="#">Products</a><a class="nav-link" href="#">Orders</a><a class="nav-link" href="#">Customers</a></div>
  <div class="ms-auto d-flex align-items-center gap-2">
    <button class="btn btn-light position-relative rounded-circle" style="width:40px;height:40px"><i class="bi bi-bell"></i><span class="position-absolute top-0 end-0 badge rounded-pill text-bg-danger" style="font-size:.55rem">3</span></button>
    <div class="rounded-circle d-grid text-white fw-bold" style="width:40px;height:40px;place-items:center;background:#0f5132">JS</div>
  </div>
</nav>
<main class="container-xl py-4">
  <div class="mt-hero p-4 mb-3 d-flex flex-wrap justify-content-between align-items-center gap-3">
    <div><h4 class="fw-bold mb-1">ConvertAtlas store performance</h4><p class="opacity-75 mb-0 small">Your store grew <b>+18%</b> this month. Keep it up!</p></div>
    <div class="d-flex gap-4 text-center">
      <div><div class="h4 fw-bold mb-0">$92.4k</div><small class="opacity-75">Revenue</small></div>
      <div><div class="h4 fw-bold mb-0">2,841</div><small class="opacity-75">Orders</small></div>
      <div><div class="h4 fw-bold mb-0">4.8★</div><small class="opacity-75">Rating</small></div>
    </div>
  </div>
  <div class="row g-3">
    <div class="col-lg-8">
      <div class="mt-card p-3 mb-3"><div class="d-flex justify-content-between align-items-center mb-1"><h6 class="fw-bold mb-0">Sales this week</h6><span class="badge rounded-pill" style="background:#e7f3ed;color:#0f5132">Live</span></div><div id="mtBar"></div></div>
      <div class="mt-card p-3">
        <h6 class="fw-bold mb-3">Best sellers</h6>
        <div class="d-flex align-items-center gap-3 mb-3"><div class="mt-prod" style="background:linear-gradient(135deg,#fda085,#f6d365)"></div><div class="flex-fill"><div class="fw-semibold small">Atlas Templates Pack</div><div class="progress mt-1"><div class="progress-bar" style="width:84%;background:#0f5132"></div></div></div><b class="small">$12,400</b></div>
        <div class="d-flex align-items-center gap-3 mb-3"><div class="mt-prod" style="background:linear-gradient(135deg,#a1c4fd,#c2e9fb)"></div><div class="flex-fill"><div class="fw-semibold small">Atlas Pro License</div><div class="progress mt-1"><div class="progress-bar" style="width:61%;background:#1d7a4f"></div></div></div><b class="small">$8,920</b></div>
        <div class="d-flex align-items-center gap-3"><div class="mt-prod" style="background:linear-gradient(135deg,#d4fc79,#96e6a1)"></div><div class="flex-fill"><div class="fw-semibold small">Atlas Snippets Bundle</div><div class="progress mt-1"><div class="progress-bar" style="width:43%;background:#52b788"></div></div></div><b class="small">$5,210</b></div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="mt-card p-3 mb-3"><h6 class="fw-bold mb-1">Order status</h6><div id="mtDonut"></div></div>
      <div class="mt-card p-3">
        <h6 class="fw-bold mb-2">Recent activity</h6>
        <div class="d-flex gap-2 small mb-2"><i class="bi bi-bag-check text-success"></i><div>New order <b>#2841</b> — $96.00<div class="text-secondary" style="font-size:.75rem">2 min ago</div></div></div>
        <div class="d-flex gap-2 small mb-2"><i class="bi bi-star-fill text-warning"></i><div>5★ review on <b>Atlas Pro</b><div class="text-secondary" style="font-size:.75rem">18 min ago</div></div></div>
        <div class="d-flex gap-2 small"><i class="bi bi-truck text-primary"></i><div>Order <b>#2836</b> shipped<div class="text-secondary" style="font-size:.75rem">1 h ago</div></div></div>
      </div>
    </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>

body{background:#f0f6f3;font-family:system-ui,-apple-system,sans-serif}
.mt-nav{background:#fff;border-bottom:1px solid #e3ece7}
.mt-nav .nav-link{color:#5c6f66;font-weight:500;border-radius:10px;padding:8px 14px}
.mt-nav .nav-link.active{background:#0f5132;color:#fff}
.mt-card{background:#fff;border:0;border-radius:18px;box-shadow:0 2px 4px rgba(15,81,50,.04),0 10px 30px rgba(15,81,50,.05)}
.mt-hero{background:linear-gradient(120deg,#0f5132,#1d7a4f);border-radius:18px;color:#fff}
.mt-prod{width:46px;height:46px;border-radius:12px}
.progress{height:8px;border-radius:99px}

new ApexCharts(document.querySelector('#mtBar'),{chart:{type:'bar',height:240,toolbar:{show:false}},series:[{name:'Sales',data:[42,58,49,71,64,88,79]}],xaxis:{categories:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},colors:['#0f5132'],plotOptions:{bar:{borderRadius:8,columnWidth:'52%'}},dataLabels:{enabled:false}}).render();
new ApexCharts(document.querySelector('#mtDonut'),{chart:{type:'donut',height:220},series:[68,22,10],labels:['Delivered','In transit','Returned'],colors:['#0f5132','#52b788','#f59e0b'],legend:{position:'bottom'},dataLabels:{enabled:false}}).render();