This commit is contained in:
2026-03-23 17:16:47 -05:00
parent d59a0a563d
commit 6bcf81e39b
2 changed files with 65 additions and 9 deletions

View File

@@ -19,15 +19,45 @@ export default async function AssembliesPage({
<section className="two-up">
<article className="panel">
<h2 className="section-title">Bill of Materials</h2>
<p className="section-copy">Define which stocked parts are consumed to build each assembly.</p>
<p className="section-copy">Define which stocked parts are consumed to build each assembly. Start typing to filter large inventories quickly.</p>
<form action={addKitComponent} className="form-grid">
<div className="form-row">
<label htmlFor="assemblySku">Assembly SKU</label>
<select className="select" id="assemblySku" name="assemblySku" disabled={assemblies.length === 0}>{assemblies.map((assembly) => <option key={assembly.id} value={assembly.sku}>{assembly.sku} - {assembly.name}</option>)}</select>
<label htmlFor="assemblySku">Assembly</label>
<input
className="input"
id="assemblySku"
name="assemblySku"
list="assembly-skus"
placeholder="Type assembly SKU or name"
disabled={assemblies.length === 0}
required
/>
<datalist id="assembly-skus">
{assemblies.map((assembly) => (
<option key={assembly.id} value={assembly.sku}>
{assembly.name}
</option>
))}
</datalist>
</div>
<div className="form-row">
<label htmlFor="componentSku">Component SKU</label>
<select className="select" id="componentSku" name="componentSku" disabled={components.length === 0}>{components.map((component) => <option key={component.id} value={component.sku}>{component.sku} - {component.name}</option>)}</select>
<label htmlFor="componentSku">Component</label>
<input
className="input"
id="componentSku"
name="componentSku"
list="component-skus"
placeholder="Type component SKU or name"
disabled={components.length === 0}
required
/>
<datalist id="component-skus">
{components.map((component) => (
<option key={component.id} value={component.sku}>
{component.name}
</option>
))}
</datalist>
</div>
<div className="form-row"><label htmlFor="component-qty">Quantity Per Assembly</label><input className="input" id="component-qty" name="quantity" type="number" min="0.01" step="0.01" defaultValue="1" /></div>
<button className="button" type="submit" disabled={assemblies.length === 0 || components.length === 0}>Save Component</button>
@@ -38,8 +68,23 @@ export default async function AssembliesPage({
<p className="section-copy">Consume component stock and create finished kit inventory in one transaction flow. This only works after the assembly has a BOM and enough component stock exists.</p>
<form action={buildAssembly} className="form-grid">
<div className="form-row">
<label htmlFor="build-assembly">Assembly SKU</label>
<select className="select" id="build-assembly" name="assemblySku" disabled={assemblies.length === 0}>{assemblies.map((assembly) => <option key={assembly.id} value={assembly.sku}>{assembly.sku} - {assembly.name}</option>)}</select>
<label htmlFor="build-assembly">Assembly</label>
<input
className="input"
id="build-assembly"
name="assemblySku"
list="build-assembly-skus"
placeholder="Type assembly SKU or name"
disabled={assemblies.length === 0}
required
/>
<datalist id="build-assembly-skus">
{assemblies.map((assembly) => (
<option key={assembly.id} value={assembly.sku}>
{assembly.name}
</option>
))}
</datalist>
</div>
<div className="form-row"><label htmlFor="build-qty">Build Quantity</label><input className="input" id="build-qty" name="quantity" type="number" min="1" step="1" defaultValue="1" /></div>
<button className="button secondary" type="submit" disabled={assemblies.length === 0}>Build Now</button>