Rafał MiczekandCursor
da85370936
continuous-integration/drone/push Build is passing
Replace placeholder admin pages with the design system, add analytics/customers/categories/inventory/settings, channel pricing and order sources, plus skeleton loaders and clean motion. Co-authored-by: Cursor <cursoragent@cursor.com>
292 lines
14 KiB
HTML
292 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Dashboard — iLED Admin</title>
|
|
<link rel="stylesheet" href="assets/admin-k.css" />
|
|
</head>
|
|
<body>
|
|
<div class="sidebar-backdrop" data-menu-close></div>
|
|
<div class="app">
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-brand">
|
|
<span class="mark"><svg class="ico" aria-hidden="true"><use href="#i-bulb"></use></svg></span>
|
|
<span>iLED Admin</span>
|
|
</div>
|
|
<nav class="sidebar-nav" aria-label="Main">
|
|
<div class="nav-group">
|
|
<div class="nav-group-label">Ops</div>
|
|
<a class="nav-link is-active" href="02-dashboard.html"><svg class="ico" aria-hidden="true"><use href="#i-dashboard"></use></svg> Dashboard</a>
|
|
<a class="nav-link" href="05-orders.html"><svg class="ico" aria-hidden="true"><use href="#i-orders"></use></svg> Orders</a>
|
|
<a class="nav-link" href="12-inventory.html"><svg class="ico" aria-hidden="true"><use href="#i-inventory"></use></svg> Inventory</a>
|
|
</div>
|
|
<div class="nav-group">
|
|
<div class="nav-group-label">Catalog</div>
|
|
<a class="nav-link" href="03-products.html"><svg class="ico" aria-hidden="true"><use href="#i-products"></use></svg> Products</a>
|
|
<a class="nav-link" href="11-categories.html"><svg class="ico" aria-hidden="true"><use href="#i-categories"></use></svg> Categories</a>
|
|
</div>
|
|
<div class="nav-group">
|
|
<div class="nav-group-label">People</div>
|
|
<a class="nav-link" href="10-customers.html"><svg class="ico" aria-hidden="true"><use href="#i-customers"></use></svg> Customers</a>
|
|
</div>
|
|
<div class="nav-group">
|
|
<div class="nav-group-label">Marketing</div>
|
|
<a class="nav-link" href="07-promotions.html"><svg class="ico" aria-hidden="true"><use href="#i-promotions"></use></svg> Promotions</a>
|
|
<a class="nav-link" href="08-newsletter.html"><svg class="ico" aria-hidden="true"><use href="#i-newsletter"></use></svg> Newsletter</a>
|
|
<a class="nav-link" href="09-reviews.html"><svg class="ico" aria-hidden="true"><use href="#i-reviews"></use></svg> Reviews</a>
|
|
</div>
|
|
<div class="nav-group">
|
|
<div class="nav-group-label">System</div>
|
|
<a class="nav-link" href="13-settings.html"><svg class="ico" aria-hidden="true"><use href="#i-settings"></use></svg> Settings</a>
|
|
</div>
|
|
</nav>
|
|
<div class="sidebar-foot"><a class="btn btn-secondary w-full" href="01-login.html">Log out</a></div>
|
|
</aside>
|
|
|
|
<div class="main">
|
|
<header class="topbar">
|
|
<div class="topbar-left">
|
|
<button type="button" class="menu-btn" data-menu-toggle aria-label="Open menu"><svg class="ico" aria-hidden="true"><use href="#i-menu"></use></svg></button>
|
|
<a href="index.html" class="muted" style="font-size: 12.5px; font-weight: 600">Mocks</a>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<div class="locale" aria-label="Locale">
|
|
<button type="button" class="is-active">PL</button>
|
|
<button type="button">EN</button>
|
|
<button type="button">DE</button>
|
|
<button type="button">CS</button>
|
|
</div>
|
|
<div class="admin-chip"><span class="avatar">AK</span> Anna K.</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<div class="page-header">
|
|
<div>
|
|
<h1>Dashboard</h1>
|
|
<p class="page-purpose">What needs attention today — orders, stock, and reviews.</p>
|
|
</div>
|
|
<div class="page-actions">
|
|
<a class="btn btn-secondary" href="05-orders.html">View orders</a>
|
|
<a class="btn btn-primary" href="05-orders.html">Open pick list</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-pad hidden" data-demo-loading>
|
|
<div class="stack">
|
|
<div class="skeleton" style="width: 40%"></div>
|
|
<div class="skeleton" style="width: 70%"></div>
|
|
<div class="skeleton" style="width: 55%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="state-box card hidden" data-demo-empty>
|
|
<strong>All clear</strong>
|
|
No alerts right now. New orders and stock issues will appear here.
|
|
</div>
|
|
|
|
<div data-demo-content>
|
|
<div class="alert-strip">
|
|
<a class="alert-pill danger" href="12-inventory.html">
|
|
<span class="dot" style="background: var(--danger)"></span>
|
|
3 low-stock SKUs
|
|
</a>
|
|
<a class="alert-pill warn" href="05-orders.html">
|
|
<span class="dot" style="background: var(--warning)"></span>
|
|
5 awaiting payment
|
|
</a>
|
|
<a class="alert-pill info" href="09-reviews.html">
|
|
<span class="dot" style="background: var(--info)"></span>
|
|
4 reviews to moderate
|
|
</a>
|
|
<a class="alert-pill warn" href="05-orders.html">
|
|
<span class="dot" style="background: var(--warning)"></span>
|
|
2 labels not generated
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-4 mb-16">
|
|
<a class="card kpi" href="05-orders.html">
|
|
<div class="kpi-label">Orders today</div>
|
|
<div class="kpi-value">12</div>
|
|
<div class="kpi-meta">+3 vs yesterday</div>
|
|
</a>
|
|
<div class="card kpi">
|
|
<div class="kpi-label">Revenue today</div>
|
|
<div class="kpi-value">4 280 zł</div>
|
|
<div class="kpi-meta">AOV 356,67 zł</div>
|
|
</div>
|
|
<a class="card kpi" href="05-orders.html">
|
|
<div class="kpi-label">Pending fulfillment</div>
|
|
<div class="kpi-value">7</div>
|
|
<div class="kpi-meta">Paid · ready to pick</div>
|
|
</a>
|
|
<a class="card kpi" href="12-inventory.html">
|
|
<div class="kpi-label">Low stock</div>
|
|
<div class="kpi-value">3</div>
|
|
<div class="kpi-meta">Threshold ≤ 5</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-2 mb-16">
|
|
<div class="card">
|
|
<div class="card-head">
|
|
<h2>Needs action — orders</h2>
|
|
<a class="btn btn-ghost btn-sm" href="05-orders.html">All</a>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table class="data">
|
|
<thead>
|
|
<tr>
|
|
<th>Order</th>
|
|
<th>Status</th>
|
|
<th>Handled by</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="cell-strong">#ILED-1042</td>
|
|
<td><span class="badge badge-warning">Pending payment</span></td>
|
|
<td class="cell-muted">—</td>
|
|
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cell-strong">#ILED-1041</td>
|
|
<td><span class="badge badge-info">Paid · pick</span></td>
|
|
<td>
|
|
<span class="handled-by">
|
|
<span class="avatar avatar-sm">AK</span>
|
|
<span class="name">Anna K.</span>
|
|
</span>
|
|
</td>
|
|
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cell-strong">#ILED-1039</td>
|
|
<td><span class="badge badge-accent">Label missing</span></td>
|
|
<td>
|
|
<span class="handled-by">
|
|
<span class="avatar avatar-sm avatar-muted">MW</span>
|
|
<span class="name">Marek W.</span>
|
|
</span>
|
|
</td>
|
|
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cell-strong">#ILED-1037</td>
|
|
<td><span class="badge badge-info">Processing</span></td>
|
|
<td>
|
|
<span class="handled-by">
|
|
<span class="avatar avatar-sm">AK</span>
|
|
<span class="name">Anna K.</span>
|
|
</span>
|
|
</td>
|
|
<td class="text-right"><a class="btn btn-secondary btn-sm" href="06-order-detail.html">Open</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-head">
|
|
<h2>Low stock</h2>
|
|
<a class="btn btn-ghost btn-sm" href="12-inventory.html">Inventory</a>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table class="data">
|
|
<thead>
|
|
<tr>
|
|
<th>SKU</th>
|
|
<th>Qty</th>
|
|
<th>Threshold</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="cell-strong">Lampa LED Black</div>
|
|
<div class="cell-muted">LED-BLK-01</div>
|
|
</td>
|
|
<td><span class="badge badge-danger">2</span></td>
|
|
<td class="cell-muted">5</td>
|
|
<td class="text-right"><a class="btn btn-secondary btn-sm" href="12-inventory.html">Restock</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="cell-strong">Lampa LED Gold</div>
|
|
<div class="cell-muted">LED-GLD-01</div>
|
|
</td>
|
|
<td><span class="badge badge-warning">4</span></td>
|
|
<td class="cell-muted">5</td>
|
|
<td class="text-right"><a class="btn btn-secondary btn-sm" href="12-inventory.html">Restock</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="cell-strong">LED Strip 5m</div>
|
|
<div class="cell-muted">LED-STR-5</div>
|
|
</td>
|
|
<td><span class="badge badge-danger">1</span></td>
|
|
<td class="cell-muted">5</td>
|
|
<td class="text-right"><a class="btn btn-secondary btn-sm" href="12-inventory.html">Restock</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-2">
|
|
<div class="card">
|
|
<div class="card-head">
|
|
<h2>Orders — last 14 days</h2>
|
|
<span class="cell-muted">Count</span>
|
|
</div>
|
|
<div class="card-pad">
|
|
<div class="chart-canvas-wrap">
|
|
<canvas id="ordersChart" aria-label="Orders last 14 days"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-head">
|
|
<h2>Pending reviews</h2>
|
|
<a class="btn btn-ghost btn-sm" href="09-reviews.html">Moderate</a>
|
|
</div>
|
|
<div class="section-block">
|
|
<div class="flex gap-12 items-center">
|
|
<div class="thumb"></div>
|
|
<div style="flex: 1; min-width: 0">
|
|
<div class="cell-strong">Lampa LED Black</div>
|
|
<div class="stars">★★★★☆</div>
|
|
<div class="cell-muted">“Światło jest świetne, montaż łatwy…”</div>
|
|
</div>
|
|
<a class="btn btn-primary btn-sm" href="09-reviews.html">Review</a>
|
|
</div>
|
|
</div>
|
|
<div class="section-block">
|
|
<div class="flex gap-12 items-center">
|
|
<div class="thumb"></div>
|
|
<div style="flex: 1; min-width: 0">
|
|
<div class="cell-strong">LED Strip 5m</div>
|
|
<div class="stars">★★★☆☆</div>
|
|
<div class="cell-muted">“Kolory OK, instrukcja mogłaby…”</div>
|
|
</div>
|
|
<a class="btn btn-primary btn-sm" href="09-reviews.html">Review</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
|
<script src="assets/admin-k.js"></script>
|
|
</body>
|
|
</html>
|