223 lines
8.3 KiB
HTML
223 lines
8.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Inventory — Roast Planner</title>
|
|
<link rel="stylesheet" href="/app.css?v=20260730-release2" />
|
|
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
|
|
<meta name="theme-color" content="#A8481A" />
|
|
</head>
|
|
<body>
|
|
<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="/account#your-plans"
|
|
><span class="nav-icon" aria-hidden="true">▤</span
|
|
><span class="nav-label">Plans</span></a
|
|
>
|
|
<a class="nav-item" href="/inventory" aria-current="page"
|
|
><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 hidden" id="nav-admin" href="/admin"
|
|
><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>Inventory</h1>
|
|
<p class="brand-sub">Green bean lots and remaining stock</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="drawer-overlay hidden" id="drawer-overlay"></div>
|
|
|
|
<main class="page-content">
|
|
<section class="panel-card" id="lots">
|
|
<div class="panel-head">
|
|
<h2>Green bean lots</h2>
|
|
<label
|
|
style="display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)"
|
|
><span class="switch"
|
|
><input type="checkbox" id="show-archived" /><span
|
|
class="switch-track"
|
|
></span></span
|
|
>Show archived</label
|
|
>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="table-wrap">
|
|
<table class="data-table" id="lots-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Lot</th>
|
|
<th>Process</th>
|
|
<th>Remaining</th>
|
|
<th>Purchased</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="lots-body"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel-card" id="lot-form-card">
|
|
<div class="panel-head"><h2 id="lot-form-title">Add a lot</h2></div>
|
|
<div class="panel-body">
|
|
<form id="lot-form">
|
|
<input type="hidden" name="id" />
|
|
<div class="field-grid">
|
|
<label class="field"
|
|
><span class="field-label">Origin *</span
|
|
><input
|
|
class="field-input"
|
|
name="origin"
|
|
required
|
|
placeholder="e.g. Huila, Colombia"
|
|
/></label>
|
|
<label class="field"
|
|
><span class="field-label">Variety</span
|
|
><input class="field-input" name="variety"
|
|
/></label>
|
|
<label class="field"
|
|
><span class="field-label">Process</span
|
|
><input class="field-input" name="process"
|
|
/></label>
|
|
<label class="field"
|
|
><span class="field-label">Producer</span
|
|
><input class="field-input" name="producer"
|
|
/></label>
|
|
<label class="field"
|
|
><span class="field-label">Purchase date</span
|
|
><input class="field-input" type="date" name="purchaseDate"
|
|
/></label>
|
|
<label class="field"
|
|
><span class="field-label">Initial weight *</span>
|
|
<div class="unit-input">
|
|
<input
|
|
class="field-input"
|
|
type="number"
|
|
name="initialWeightG"
|
|
inputmode="decimal"
|
|
min="0"
|
|
step="any"
|
|
required
|
|
/><span class="unit">g</span>
|
|
</div></label
|
|
>
|
|
<label class="field"
|
|
><span class="field-label">Cost</span
|
|
><input
|
|
class="field-input"
|
|
type="number"
|
|
name="costTotal"
|
|
inputmode="decimal"
|
|
min="0"
|
|
step="any"
|
|
/></label>
|
|
<label class="field"
|
|
><span class="field-label">Moisture</span>
|
|
<div class="unit-input">
|
|
<input
|
|
class="field-input"
|
|
type="number"
|
|
name="moisturePct"
|
|
inputmode="decimal"
|
|
min="0"
|
|
step="any"
|
|
/><span class="unit">%</span>
|
|
</div></label
|
|
>
|
|
<label class="field"
|
|
><span class="field-label">Density</span>
|
|
<div class="unit-input">
|
|
<input
|
|
class="field-input"
|
|
type="number"
|
|
name="densityGL"
|
|
inputmode="decimal"
|
|
min="0"
|
|
step="any"
|
|
/><span class="unit">g/L</span>
|
|
</div></label
|
|
>
|
|
</div>
|
|
<label class="field"
|
|
><span class="field-label">Notes</span
|
|
><input class="field-input" name="notes"
|
|
/></label>
|
|
<p class="field-note hidden" id="lot-remaining-note"></p>
|
|
<button class="primary-btn" type="submit" id="lot-form-submit">
|
|
Add lot
|
|
</button>
|
|
<button
|
|
class="ghost-btn hidden"
|
|
type="button"
|
|
id="lot-form-cancel"
|
|
>
|
|
Cancel edit
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/js/inventory.js?v=20260730-release2"></script>
|
|
</body>
|
|
</html>
|