Cartzen — E-commerce Admin Dashboard

<div class="cz-shell">
  <button class="cz-burger" data-cz-toggle aria-label="Toggle navigation" aria-expanded="false"><span></span><span></span><span></span></button>
  <div class="cz-overlay" data-cz-overlay hidden></div>

  <aside class="cz-side" data-cz-side aria-label="Primary">
    <a class="cz-logo" href="#"><span class="cz-logo-mark" aria-hidden="true">🛒</span> Cartzen</a>
    <nav class="cz-nav" aria-label="Main navigation">
      <a href="#" aria-current="page"><i aria-hidden="true">▦</i> Dashboard</a>
      <a href="#"><i aria-hidden="true">🧾</i> Orders <span class="cz-pill">18</span></a>
      <a href="#"><i aria-hidden="true">📦</i> Products</a>
      <a href="#"><i aria-hidden="true">👥</i> Customers</a>
      <a href="#"><i aria-hidden="true">📣</i> Marketing</a>
      <a href="#"><i aria-hidden="true">⚙</i> Settings</a>
    </nav>
    <footer class="cz-side-foot">Dashboard template by <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></footer>
  </aside>

  <main class="cz-main">
    <header class="cz-top">
      <div><h1>Store overview</h1><p class="cz-sub">Cartzen · cartzen.shop — last 30 days</p></div>
      <div class="cz-top-actions">
        <label class="cz-search"><span class="visually-hidden">Search orders</span><i aria-hidden="true">⌕</i><input type="search" placeholder="Search orders, products…"></label>
        <select class="cz-range" aria-label="Date range"><option>Last 30 days</option><option>Last 7 days</option><option>This quarter</option></select>
        <button class="cz-icon-btn" aria-label="Notifications"><i aria-hidden="true">🔔</i><span class="cz-dot" aria-hidden="true"></span></button>
        <span class="cz-avatar" aria-hidden="true">SK</span>
      </div>
    </header>

    <div class="cz-kpis">
      <article class="cz-kpi"><span class="cz-kpi-ico" style="--c:#16a34a" aria-hidden="true">$</span><div><span class="cz-kpi-label">Revenue</span><b>$84,920</b><i class="cz-up">▲ 14.2%</i></div></article>
      <article class="cz-kpi"><span class="cz-kpi-ico" style="--c:#2563eb" aria-hidden="true">🧾</span><div><span class="cz-kpi-label">Orders today</span><b>312</b><i class="cz-up">▲ 6.4%</i></div></article>
      <article class="cz-kpi"><span class="cz-kpi-ico" style="--c:#7c3aed" aria-hidden="true">⤢</span><div><span class="cz-kpi-label">Conversion</span><b>3.8%</b><i class="cz-up">▲ 0.5%</i></div></article>
      <article class="cz-kpi"><span class="cz-kpi-ico" style="--c:#f59e0b" aria-hidden="true">⌀</span><div><span class="cz-kpi-label">Avg order value</span><b>$72.40</b><i class="cz-down">▼ 1.1%</i></div></article>
    </div>

    <div class="cz-grid">
      <section class="cz-card cz-col-2">
        <div class="cz-card-head"><h2>Sales overview</h2><div class="cz-seg" role="group" aria-label="Range"><button class="is-active" type="button">Revenue</button><button type="button">Orders</button></div></div>
        <div class="cz-chart">
          <svg viewBox="0 0 600 200" preserveAspectRatio="none" role="img" aria-label="Daily sales bars trending upward">
            <g fill="#22c55e">
              <rect x="8" y="120" width="34" height="80" rx="5"/><rect x="56" y="96" width="34" height="104" rx="5"/><rect x="104" y="132" width="34" height="68" rx="5"/><rect x="152" y="80" width="34" height="120" rx="5"/><rect x="200" y="104" width="34" height="96" rx="5"/><rect x="248" y="60" width="34" height="140" rx="5"/><rect x="296" y="88" width="34" height="112" rx="5"/><rect x="344" y="48" width="34" height="152" rx="5"/><rect x="392" y="72" width="34" height="128" rx="5"/><rect x="440" y="36" width="34" height="164" rx="5"/><rect x="488" y="64" width="34" height="136" rx="5"/><rect x="536" y="24" width="34" height="176" rx="5"/>
            </g>
          </svg>
          <div class="cz-x-labels"><span>Wk1</span><span>Wk2</span><span>Wk3</span><span>Wk4</span></div>
        </div>
      </section>
      <section class="cz-card">
        <div class="cz-card-head"><h2>Customer segments</h2></div>
        <div class="cz-donut-wrap">
          <svg class="cz-donut" viewBox="0 0 42 42" role="img" aria-label="Returning 48 percent, new 34 percent, wholesale 18 percent">
            <circle cx="21" cy="21" r="15.9" fill="none" stroke="#eef2f7" stroke-width="6"/>
            <circle cx="21" cy="21" r="15.9" fill="none" stroke="#2563eb" stroke-width="6" stroke-dasharray="48 52" stroke-dashoffset="25"/>
            <circle cx="21" cy="21" r="15.9" fill="none" stroke="#16a34a" stroke-width="6" stroke-dasharray="34 66" stroke-dashoffset="-23"/>
            <circle cx="21" cy="21" r="15.9" fill="none" stroke="#f59e0b" stroke-width="6" stroke-dasharray="18 82" stroke-dashoffset="-57"/>
          </svg>
        </div>
        <ul class="cz-legend">
          <li><span style="background:#2563eb"></span> Returning <b>48%</b></li>
          <li><span style="background:#16a34a"></span> New <b>34%</b></li>
          <li><span style="background:#f59e0b"></span> Wholesale <b>18%</b></li>
        </ul>
      </section>
    </div>

    <div class="cz-grid">
      <section class="cz-card cz-col-2">
        <div class="cz-card-head"><h2>Recent orders</h2><a class="cz-link" href="#">View all</a></div>
        <div class="cz-table-wrap">
          <table class="cz-table">
            <thead><tr><th>Order</th><th>Customer</th><th>Total</th><th>Fulfillment</th><th>Status</th></tr></thead>
            <tbody>
              <tr><td class="cz-mono">#CZ-7841</td><td>Hannah Brooks</td><td>$128.00</td><td>Shipped</td><td><span class="cz-badge cz-b-green">Paid</span></td></tr>
              <tr><td class="cz-mono">#CZ-7840</td><td>Marcus Lee</td><td>$54.90</td><td>Packing</td><td><span class="cz-badge cz-b-amber">Pending</span></td></tr>
              <tr><td class="cz-mono">#CZ-7839</td><td>Elena Costa</td><td>$210.50</td><td>Delivered</td><td><span class="cz-badge cz-b-green">Paid</span></td></tr>
              <tr><td class="cz-mono">#CZ-7838</td><td>Toby Nguyen</td><td>$36.00</td><td>—</td><td><span class="cz-badge cz-b-red">Refunded</span></td></tr>
              <tr><td class="cz-mono">#CZ-7837</td><td>Priya Shah</td><td>$89.99</td><td>Shipped</td><td><span class="cz-badge cz-b-green">Paid</span></td></tr>
            </tbody>
          </table>
        </div>
      </section>
      <section class="cz-card">
        <div class="cz-card-head"><h2>Inventory alerts</h2><span class="cz-badge cz-b-red">4 low</span></div>
        <ul class="cz-alerts">
          <li><span class="cz-alert-led" aria-hidden="true"></span><div><b>Wireless Earbuds Pro</b><i>3 left · reorder soon</i></div></li>
          <li><span class="cz-alert-led" aria-hidden="true"></span><div><b>Linen Tote Bag — Sand</b><i>5 left · reorder soon</i></div></li>
          <li><span class="cz-alert-led cz-led-out" aria-hidden="true"></span><div><b>Ceramic Mug Set</b><i>Out of stock</i></div></li>
          <li><span class="cz-alert-led" aria-hidden="true"></span><div><b>Desk Lamp — Matte</b><i>6 left · reorder soon</i></div></li>
        </ul>
        <a class="cz-block-link" href="#">Manage inventory →</a>
      </section>
    </div>

    <div class="cz-grid">
      <section class="cz-card cz-col-2">
        <div class="cz-card-head"><h2>Top selling products</h2><a class="cz-link" href="#">Full report</a></div>
        <ul class="cz-products">
          <li><span class="cz-prod-img" style="--c:#2563eb" aria-hidden="true">🎧</span><div class="cz-prod-info"><b>Wireless Earbuds Pro</b><i>Electronics</i></div><div class="cz-prod-bar"><div class="cz-mini-bar"><i style="width:92%;background:#2563eb"></i></div></div><b class="cz-prod-num">1,284</b></li>
          <li><span class="cz-prod-img" style="--c:#16a34a" aria-hidden="true">👟</span><div class="cz-prod-info"><b>Trail Runner Sneakers</b><i>Footwear</i></div><div class="cz-prod-bar"><div class="cz-mini-bar"><i style="width:74%;background:#16a34a"></i></div></div><b class="cz-prod-num">986</b></li>
          <li><span class="cz-prod-img" style="--c:#f59e0b" aria-hidden="true">🕯</span><div class="cz-prod-info"><b>Soy Candle — Amber</b><i>Home</i></div><div class="cz-prod-bar"><div class="cz-mini-bar"><i style="width:58%;background:#f59e0b"></i></div></div><b class="cz-prod-num">742</b></li>
          <li><span class="cz-prod-img" style="--c:#7c3aed" aria-hidden="true">👜</span><div class="cz-prod-info"><b>Linen Tote Bag</b><i>Accessories</i></div><div class="cz-prod-bar"><div class="cz-mini-bar"><i style="width:41%;background:#7c3aed"></i></div></div><b class="cz-prod-num">523</b></li>
        </ul>
      </section>
      <section class="cz-card">
        <div class="cz-card-head"><h2>This month</h2></div>
        <div class="cz-mini-grid">
          <div class="cz-mini-stat"><span>Returns</span><b>2.1%</b><i class="cz-down">▼ 0.4%</i></div>
          <div class="cz-mini-stat"><span>Refunded</span><b>$1,240</b><i class="cz-down">▼ $90</i></div>
        </div>
        <div class="cz-campaign">
          <div class="cz-camp-head"><b>📣 Summer Sale</b><span class="cz-badge cz-b-blue">Live</span></div>
          <p>Email + social campaign · ends in 6 days</p>
          <div class="cz-mini-bar"><i style="width:67%;background:#2563eb"></i></div>
          <div class="cz-camp-meta"><span>Budget $2,000</span><span>67% spent</span></div>
        </div>
      </section>
    </div>
  </main>
</div>

*{box-sizing:border-box}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cz-shell{--cz-bg:#f4f6fa;--cz-card:#ffffff;--cz-border:#e6eaf1;--cz-text:#16202e;--cz-soft:#67768c;--cz-accent:#2563eb;min-height:100vh;display:flex;background:var(--cz-bg);color:var(--cz-text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.cz-side{width:236px;flex:none;background:var(--cz-card);border-right:1px solid var(--cz-border);display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}
.cz-logo{display:flex;align-items:center;gap:10px;color:var(--cz-text);text-decoration:none;font-weight:800;font-size:1.18rem;margin-bottom:22px;padding:0 8px;font-family:'Sora',sans-serif}
.cz-logo-mark{font-size:1.3rem}
.cz-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.cz-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;color:var(--cz-soft);text-decoration:none;font-size:.9rem;font-weight:600;transition:background .15s,color .15s}
.cz-nav a i{font-style:normal;width:18px;text-align:center}
.cz-nav a:hover{background:#f0f4fa;color:var(--cz-text)}
.cz-nav a[aria-current=page]{background:#eaf1ff;color:var(--cz-accent)}
.cz-nav a:focus-visible{outline:2px solid var(--cz-accent);outline-offset:2px}
.cz-pill{margin-left:auto;font-size:.7rem;font-weight:700;background:#2563eb;color:#fff;border-radius:999px;padding:2px 8px}
.cz-side-foot{margin-top:14px;font-size:.74rem;color:#9aa7ba;padding:0 8px}
.cz-side-foot a{color:var(--cz-accent);text-decoration:none;font-weight:600}.cz-side-foot a:hover{text-decoration:underline}
.cz-main{flex:1;min-width:0;padding:24px 28px 40px}
.cz-top{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.cz-top h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;margin:0}
.cz-sub{color:var(--cz-soft);font-size:.9rem;margin:3px 0 0}
.cz-top-actions{display:flex;align-items:center;gap:11px}
.cz-search{position:relative;display:flex;align-items:center}
.cz-search i{position:absolute;left:12px;color:var(--cz-soft)}
.cz-search input{padding:10px 14px 10px 34px;border-radius:11px;border:1px solid var(--cz-border);background:#fff;color:var(--cz-text);font:inherit;font-size:.88rem;width:230px}
.cz-search input:focus{outline:none;border-color:var(--cz-accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.cz-range{padding:10px 12px;border-radius:11px;border:1px solid var(--cz-border);background:#fff;color:var(--cz-text);font:inherit;font-size:.85rem;cursor:pointer}
.cz-range:focus{outline:none;border-color:var(--cz-accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.cz-icon-btn{position:relative;width:42px;height:42px;border-radius:11px;border:1px solid var(--cz-border);background:#fff;font-size:1.05rem;cursor:pointer}
.cz-icon-btn:focus-visible{outline:2px solid var(--cz-accent);outline-offset:2px}
.cz-dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:#ef4444;border:2px solid #fff}
.cz-avatar{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:.82rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#2563eb,#06b6d4)}
.cz-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.cz-kpi{background:var(--cz-card);border:1px solid var(--cz-border);border-radius:15px;padding:18px;display:flex;align-items:center;gap:14px;box-shadow:0 1px 2px rgba(16,32,46,.04)}
.cz-kpi-ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.1rem;flex:none;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.cz-kpi-label{font-size:.82rem;color:var(--cz-soft);display:block}
.cz-kpi b{font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:800;display:block;line-height:1.2}
.cz-kpi i{font-style:normal;font-size:.76rem;font-weight:700}
.cz-up{color:#16a34a}.cz-down{color:#dc2626}
.cz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.cz-col-2{grid-column:span 2}
.cz-card{background:var(--cz-card);border:1px solid var(--cz-border);border-radius:15px;padding:18px;min-width:0;box-shadow:0 1px 2px rgba(16,32,46,.04)}
.cz-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.cz-card-head h2{font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:700;margin:0}
.cz-link{font-size:.82rem;color:var(--cz-accent);text-decoration:none;font-weight:600}.cz-link:hover{text-decoration:underline}
.cz-seg{display:flex;gap:4px;background:#f0f4fa;border-radius:9px;padding:3px}
.cz-seg button{border:0;background:transparent;color:var(--cz-soft);font:inherit;font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:7px;cursor:pointer}
.cz-seg button.is-active{background:#fff;color:var(--cz-accent);box-shadow:0 1px 3px rgba(16,32,46,.1)}
.cz-seg button:focus-visible{outline:2px solid var(--cz-accent);outline-offset:1px}
.cz-chart svg{width:100%;height:190px;display:block}
.cz-x-labels{display:flex;justify-content:space-around;margin-top:6px;font-size:.72rem;color:var(--cz-soft)}
.cz-donut-wrap{width:150px;margin:4px auto 14px}
.cz-donut{width:150px;height:150px;transform:rotate(-90deg)}
.cz-legend{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.cz-legend li{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--cz-soft)}
.cz-legend li b{margin-left:auto;color:var(--cz-text)}
.cz-legend span{width:11px;height:11px;border-radius:3px;flex:none}
.cz-table-wrap{overflow-x:auto}
.cz-table{width:100%;border-collapse:collapse;min-width:480px}
.cz-table th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cz-soft);font-weight:600;padding:0 12px 12px}
.cz-table td{padding:12px;border-top:1px solid var(--cz-border);font-size:.88rem}
.cz-mono{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--cz-soft)}
.cz-badge{font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.cz-b-green{color:#16a34a;background:#dcfce7}
.cz-b-amber{color:#b45309;background:#fef3c7}
.cz-b-red{color:#dc2626;background:#fee2e2}
.cz-b-blue{color:#2563eb;background:#dbeafe}
.cz-alerts{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:13px}
.cz-alerts li{display:flex;gap:10px;align-items:center}
.cz-alert-led{width:9px;height:9px;border-radius:50%;background:#f59e0b;flex:none}
.cz-led-out{background:#dc2626}
.cz-alerts b{font-size:.88rem;display:block}
.cz-alerts i{font-style:normal;font-size:.78rem;color:var(--cz-soft)}
.cz-block-link{font-size:.84rem;color:var(--cz-accent);text-decoration:none;font-weight:600}.cz-block-link:hover{text-decoration:underline}
.cz-products{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.cz-products li{display:flex;align-items:center;gap:12px}
.cz-prod-img{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.15rem;flex:none;background:color-mix(in srgb,var(--c) 14%,transparent)}
.cz-prod-info{min-width:120px}
.cz-prod-info b{font-size:.88rem;display:block}
.cz-prod-info i{font-style:normal;font-size:.76rem;color:var(--cz-soft)}
.cz-prod-bar{flex:1;min-width:60px}
.cz-prod-num{font-family:'Sora',sans-serif;font-weight:700;font-size:.92rem}
.cz-mini-bar{height:8px;border-radius:99px;background:#eef2f7;overflow:hidden}
.cz-mini-bar i{display:block;height:100%;border-radius:99px}
.cz-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.cz-mini-stat{background:#f7f9fc;border:1px solid var(--cz-border);border-radius:12px;padding:13px}
.cz-mini-stat span{font-size:.78rem;color:var(--cz-soft)}
.cz-mini-stat b{font-family:'Sora',sans-serif;font-size:1.2rem;font-weight:800;display:block;margin:2px 0}
.cz-mini-stat i{font-style:normal;font-size:.74rem;font-weight:700}
.cz-campaign{background:#f7f9fc;border:1px solid var(--cz-border);border-radius:13px;padding:15px}
.cz-camp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cz-camp-head b{font-size:.92rem}
.cz-campaign p{font-size:.8rem;color:var(--cz-soft);margin:0 0 10px}
.cz-camp-meta{display:flex;justify-content:space-between;font-size:.76rem;color:var(--cz-soft);margin-top:8px}
.cz-burger{display:none;position:fixed;top:16px;left:16px;z-index:60;width:44px;height:44px;border-radius:11px;border:1px solid var(--cz-border);background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.cz-burger span{width:18px;height:2px;background:var(--cz-text);border-radius:2px}
.cz-overlay{position:fixed;inset:0;background:rgba(16,32,46,.4);z-index:40;border:0}
@media(max-width:1080px){.cz-kpis{grid-template-columns:repeat(2,1fr)}.cz-grid{grid-template-columns:1fr}.cz-col-2{grid-column:span 1}}
@media(max-width:760px){
  .cz-burger{display:flex}
  .cz-side{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);transition:transform .25s ease}
  .cz-side.is-open{transform:translateX(0)}
  .cz-main{padding:72px 16px 32px}
  .cz-top-actions{width:100%;flex-wrap:wrap}
  .cz-search{flex:1}.cz-search input{width:100%}
  .cz-kpis{grid-template-columns:1fr}
  .cz-mini-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.cz-side{transition:none}.cz-nav a{transition:none}}

(function(){
  var side=document.querySelector('[data-cz-side]');
  var btn=document.querySelector('[data-cz-toggle]');
  var ov=document.querySelector('[data-cz-overlay]');
  if(!side||!btn)return;
  function open(o){side.classList.toggle('is-open',o);btn.setAttribute('aria-expanded',o?'true':'false');if(ov)ov.hidden=!o;}
  btn.addEventListener('click',function(){open(!side.classList.contains('is-open'));});
  if(ov)ov.addEventListener('click',function(){open(false);});
  document.querySelectorAll('.cz-seg button').forEach(function(b){b.addEventListener('click',function(){b.parentNode.querySelectorAll('button').forEach(function(x){x.classList.remove('is-active');});b.classList.add('is-active');});});
})();