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>
249 lines
14 KiB
HTML
249 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>Settings — 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" 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 is-active" 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"><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>Settings</h1>
|
|
<p class="page-purpose">Store ops config — mock until settings APIs exist in Phase 2.</p>
|
|
</div>
|
|
<div class="page-actions">
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="split settings-layout">
|
|
<div class="card">
|
|
<nav class="settings-nav" data-settings-nav aria-label="Settings sections">
|
|
<a href="#store" class="is-active">Store profile</a>
|
|
<a href="#locales">Locales & currency</a>
|
|
<a href="#inventory">Inventory</a>
|
|
<a href="#shipping">Shipping</a>
|
|
<a href="#email">Email</a>
|
|
<a href="#team">Team</a>
|
|
<a href="#account">My account</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="stack" style="gap: 16px">
|
|
<div class="card" id="store" data-settings-section>
|
|
<div class="card-head"><h2>Store profile</h2></div>
|
|
<div class="card-pad stack">
|
|
<div class="field"><label>Store name</label><input class="input" value="iLED" /></div>
|
|
<div class="field"><label>Support email</label><input class="input" value="hello@iled.pl" /></div>
|
|
<div class="field"><label>Storefront URL</label><input class="input" value="https://shop.zea.lt" /></div>
|
|
<div class="field"><label>Legal company name</label><input class="input" value="iLED Sp. z o.o." /></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card hidden" id="locales" data-settings-section>
|
|
<div class="card-head"><h2>Locales & currency</h2></div>
|
|
<div class="card-pad stack">
|
|
<div class="field"><label>Default locale</label><select class="select"><option selected>pl-PL</option><option>en</option><option>de</option><option>cs</option></select></div>
|
|
<div class="field"><label>Currency</label><select class="select"><option selected>PLN</option><option>EUR</option></select></div>
|
|
<div class="field"><label>Enabled locales</label>
|
|
<div class="flex gap-12 mt-16" style="flex-wrap: wrap">
|
|
<label class="flex items-center gap-8"><input type="checkbox" class="check" checked /> PL</label>
|
|
<label class="flex items-center gap-8"><input type="checkbox" class="check" checked /> EN</label>
|
|
<label class="flex items-center gap-8"><input type="checkbox" class="check" checked /> DE</label>
|
|
<label class="flex items-center gap-8"><input type="checkbox" class="check" checked /> CS</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card hidden" id="inventory" data-settings-section>
|
|
<div class="card-head"><h2>Inventory defaults</h2></div>
|
|
<div class="card-pad stack">
|
|
<div class="field" style="max-width: 240px">
|
|
<label>Default low-stock threshold</label>
|
|
<input class="input" type="number" value="5" />
|
|
<span class="field-hint">Used when a product has no override. Drives Dashboard & Inventory alerts.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card hidden" id="shipping" data-settings-section>
|
|
<div class="card-head"><h2>Shipping carriers</h2></div>
|
|
<div class="card-pad">
|
|
<div class="table-wrap">
|
|
<table class="data">
|
|
<thead><tr><th>Carrier</th><th>Enabled</th><th>Mode</th></tr></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="cell-strong">InPost</td>
|
|
<td><input type="checkbox" class="check" checked /></td>
|
|
<td><span class="badge badge-warning">Sandbox</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cell-strong">DHL</td>
|
|
<td><input type="checkbox" class="check" checked /></td>
|
|
<td><span class="badge badge-warning">Sandbox</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="cell-strong">DPD</td>
|
|
<td><input type="checkbox" class="check" checked /></td>
|
|
<td><span class="badge badge-warning">Sandbox</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p class="field-hint" style="margin: 14px 0 0">Credentials stay in server config — this UI only toggles visibility / sandbox flags (Phase 2).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card hidden" id="email" data-settings-section>
|
|
<div class="card-head"><h2>Email / newsletter</h2></div>
|
|
<div class="card-pad stack">
|
|
<div class="field"><label>From name</label><input class="input" value="iLED" /></div>
|
|
<div class="field"><label>From address</label><input class="input" value="newsletter@iled.pl" /></div>
|
|
<div class="field"><label>Reply-to</label><input class="input" value="hello@iled.pl" /></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card hidden" id="team" data-settings-section>
|
|
<div class="card-head">
|
|
<h2>Team · multi-admin</h2>
|
|
<button type="button" class="btn btn-primary btn-sm">Invite admin</button>
|
|
</div>
|
|
<div class="card-pad">
|
|
<p class="field-hint" style="margin: 0 0 14px">
|
|
Every pick, invoice, label, and status change is attributed to the signed-in admin.
|
|
</p>
|
|
<div class="table-wrap">
|
|
<table class="data">
|
|
<thead>
|
|
<tr>
|
|
<th>Admin</th>
|
|
<th>Role</th>
|
|
<th>Last active</th>
|
|
<th>Status</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<span class="handled-by">
|
|
<span class="avatar avatar-sm">AK</span>
|
|
<span>
|
|
<span class="name">Anna Kowalska</span>
|
|
<div class="cell-muted">anna.k@iled.pl</div>
|
|
</span>
|
|
</span>
|
|
</td>
|
|
<td><span class="badge badge-accent">Owner</span></td>
|
|
<td class="cell-muted">Now</td>
|
|
<td><span class="badge badge-success">Active</span></td>
|
|
<td class="text-right"><button type="button" class="btn btn-ghost btn-sm">Edit</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="handled-by">
|
|
<span class="avatar avatar-sm avatar-muted">MW</span>
|
|
<span>
|
|
<span class="name">Marek Wiśniewski</span>
|
|
<div class="cell-muted">marek.w@iled.pl</div>
|
|
</span>
|
|
</span>
|
|
</td>
|
|
<td><span class="badge badge-info">Ops</span></td>
|
|
<td class="cell-muted">16 Oct 18:40</td>
|
|
<td><span class="badge badge-success">Active</span></td>
|
|
<td class="text-right"><button type="button" class="btn btn-ghost btn-sm">Edit</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="handled-by">
|
|
<span class="avatar avatar-sm avatar-muted">OK</span>
|
|
<span>
|
|
<span class="name">Ola Kamińska</span>
|
|
<div class="cell-muted">ola.k@iled.pl</div>
|
|
</span>
|
|
</span>
|
|
</td>
|
|
<td><span class="badge badge-neutral">Marketing</span></td>
|
|
<td class="cell-muted">14 Oct</td>
|
|
<td><span class="badge badge-success">Active</span></td>
|
|
<td class="text-right"><button type="button" class="btn btn-ghost btn-sm">Edit</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card hidden" id="account" data-settings-section>
|
|
<div class="card-head"><h2>My account</h2></div>
|
|
<div class="card-pad stack">
|
|
<div class="field"><label>Display name</label><input class="input" value="Anna Kowalska" /></div>
|
|
<div class="field"><label>Email</label><input class="input" value="anna.k@iled.pl" disabled /></div>
|
|
<div class="field"><label>New password</label><input class="input" type="password" placeholder="••••••••" /></div>
|
|
<div class="field"><label>Confirm password</label><input class="input" type="password" placeholder="••••••••" /></div>
|
|
<span class="field-hint">Your name appears on order activity (pick, invoice, label).</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script src="assets/admin-k.js"></script>
|
|
</body>
|
|
</html>
|