Add green-bean inventory and cupping features

Ports inventory management and SCA-style cupping scoring from
hope_roaster: lot tracking with audit-logged consumption, cupping
sessions with server-authoritative scoring and a live radar chart,
and links from the planner (draw-from-lot, open-cupping-session).

Also fixes the Blend/Single-origin toggle layout, replaces tooltips
with an in-context "why" teaching layer, and stages the planner UI
into pre-roast vs. post-roast phases.
This commit is contained in:
2026-07-30 14:47:15 -04:00
parent 9f0a3dbc74
commit 59645e59b5
43 changed files with 7582 additions and 566 deletions
+191 -13
View File
@@ -3,22 +3,200 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Roast Planner Admin</title>
<title>Admin — Roast Planner</title>
<link rel="stylesheet" href="/app.css" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<meta name="theme-color" content="#A8481A" />
</head>
<body>
<main class="auth-page">
<section class="panel-card auth-card">
<a href="/app">← Plans</a>
<h1>Administration</h1>
<label><input id="signup" type="checkbox" /> Allow new signups</label
><button id="save" class="primary-btn">Save setting</button>
<h2>Users</h2>
<ul id="users"></ul>
<h2>Recent roast plans</h2>
<ul id="plans"></ul>
</section>
</main>
<div class="app-shell">
<nav class="side-nav" id="side-nav" aria-label="Main navigation">
<div class="side-nav-brand">
<span class="brand-mark" aria-hidden="true"></span>
<span class="brand-name">Roast Planner</span>
</div>
<div class="nav-group">
<a class="nav-item" href="/app"
><span class="nav-icon" aria-hidden="true"></span
><span class="nav-label">Planner</span></a
>
<a class="nav-item" href="#plans"
><span class="nav-icon" aria-hidden="true"></span
><span class="nav-label">Plans</span></a
>
<a class="nav-item" href="/inventory"
><span class="nav-icon" aria-hidden="true"></span
><span class="nav-label">Inventory</span></a
>
<a class="nav-item" href="/cupping"
><span class="nav-icon" aria-hidden="true"></span
><span class="nav-label">Cupping</span></a
>
<a class="nav-item" href="/account"
><span class="nav-icon" aria-hidden="true"></span
><span class="nav-label">Account</span></a
>
<a class="nav-item" href="/admin" aria-current="page"
><span class="nav-icon" aria-hidden="true"></span
><span class="nav-label">Admin</span></a
>
</div>
<div class="nav-spacer"></div>
<button
class="icon-btn nav-collapse-toggle"
type="button"
id="nav-collapse"
aria-label="Collapse navigation"
title="Collapse navigation"
>
«
</button>
<div class="nav-user">
<div class="nav-user-avatar" id="nav-user-avatar" aria-hidden="true"></div>
<div class="nav-user-detail">
<span class="nav-user-email" id="account-email"></span>
<button class="nav-user-logout" type="button" id="btn-logout">
Log out
</button>
</div>
</div>
</nav>
<div class="app-workspace" id="app-workspace">
<header class="app-header">
<div class="header-row-top">
<button
class="icon-btn nav-hamburger"
type="button"
id="nav-hamburger"
aria-label="Open navigation"
aria-expanded="false"
>
</button>
<div class="brand">
<div class="brand-text">
<h1>Administration</h1>
<p class="brand-sub">Users, plans, and app settings</p>
</div>
</div>
</div>
</header>
<div class="drawer-overlay hidden" id="drawer-overlay"></div>
<main class="page-content wide">
<section class="stat-grid" id="metrics" aria-label="Metrics"></section>
<section class="panel-card" id="reset-links-card" hidden>
<div class="panel-head"><h2>Pending password resets</h2></div>
<div class="panel-body">
<p class="muted">
No outgoing email is configured for this deployment
(<code>SMTP_URL</code>). Hand these links to the user
directly.
</p>
<div class="table-wrap">
<table class="data-table" id="resets-table">
<thead>
<tr>
<th>Email</th>
<th>Link</th>
<th>Expires</th>
</tr>
</thead>
<tbody id="resets-body"></tbody>
</table>
</div>
</div>
</section>
<section class="panel-card">
<div class="panel-head"><h2>Signups</h2></div>
<div class="panel-body">
<label
style="display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)"
><span class="switch"
><input type="checkbox" id="signup-toggle" /><span
class="switch-track"
></span></span
>Allow new signups</label
>
</div>
</section>
<section class="panel-card" id="users">
<div class="panel-head">
<h2>Users</h2>
<input
class="text-input"
id="user-search"
placeholder="Search by email…"
style="max-width:220px"
/>
</div>
<div class="panel-body">
<div class="table-wrap">
<table class="data-table" id="users-table">
<thead>
<tr>
<th>Email</th>
<th>Role</th>
<th>Status</th>
<th class="num">Plans</th>
<th>Joined</th>
<th></th>
</tr>
</thead>
<tbody id="users-body"></tbody>
</table>
</div>
</div>
</section>
<section class="panel-card" id="plans">
<div class="panel-head">
<h2>Roast plans</h2>
<button class="ghost-btn small hidden" id="clear-plan-filter">
Clear filter
</button>
</div>
<div class="panel-body">
<div class="table-wrap">
<table class="data-table" id="plans-table">
<thead>
<tr>
<th>Owner</th>
<th>Title</th>
<th>Updated</th>
</tr>
</thead>
<tbody id="plans-body"></tbody>
</table>
</div>
</div>
</section>
<section class="panel-card" id="activity">
<div class="panel-head"><h2>Recent activity</h2></div>
<div class="panel-body">
<div class="table-wrap">
<table class="data-table" id="audit-table">
<thead>
<tr>
<th>When</th>
<th>Actor</th>
<th>Action</th>
<th>Target</th>
</tr>
</thead>
<tbody id="audit-body"></tbody>
</table>
</div>
</div>
</section>
</main>
</div>
</div>
<script type="module" src="/js/admin.js"></script>
</body>
</html>