64 lines
3.5 KiB
TypeScript
64 lines
3.5 KiB
TypeScript
import { addKitComponent, buildAssembly } from "@/lib/actions";
|
|
import { getAssembliesWithComponents, getParts } from "@/lib/repository";
|
|
|
|
export default function AssembliesPage() {
|
|
const parts = getParts();
|
|
const assemblies = parts.filter((part) => part.kind === "assembly");
|
|
const components = parts.filter((part) => part.kind === "part");
|
|
const kitRows = getAssembliesWithComponents();
|
|
|
|
return (
|
|
<div className="grid">
|
|
<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>
|
|
<form action={addKitComponent} className="form-grid">
|
|
<div className="form-row">
|
|
<label htmlFor="assemblySku">Assembly SKU</label>
|
|
<select className="select" id="assemblySku" name="assemblySku">{assemblies.map((assembly) => <option key={assembly.id} value={assembly.sku}>{assembly.sku} - {assembly.name}</option>)}</select>
|
|
</div>
|
|
<div className="form-row">
|
|
<label htmlFor="componentSku">Component SKU</label>
|
|
<select className="select" id="componentSku" name="componentSku">{components.map((component) => <option key={component.id} value={component.sku}>{component.sku} - {component.name}</option>)}</select>
|
|
</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">Save Component</button>
|
|
</form>
|
|
</article>
|
|
<article className="panel">
|
|
<h2 className="section-title">Build Assembly</h2>
|
|
<p className="section-copy">Consume component stock and create finished kit inventory in one transaction flow.</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">{assemblies.map((assembly) => <option key={assembly.id} value={assembly.sku}>{assembly.sku} - {assembly.name}</option>)}</select>
|
|
</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">Build Now</button>
|
|
</form>
|
|
</article>
|
|
</section>
|
|
<section className="panel">
|
|
<h2 className="section-title">Current Assemblies</h2>
|
|
<div className="table-wrap">
|
|
<table className="table">
|
|
<thead><tr><th>Assembly</th><th>Name</th><th>Component</th><th>Component Name</th><th>Qty Per</th></tr></thead>
|
|
<tbody>
|
|
{kitRows.length === 0 ? (
|
|
<tr><td colSpan={5} className="muted">Add an assembly on the Parts page, then define its bill of materials here.</td></tr>
|
|
) : (
|
|
kitRows.map((row, index) => (
|
|
<tr key={`${row.assemblySku}-${row.componentSku}-${index}`}>
|
|
<td>{row.assemblySku}</td><td>{row.assemblyName}</td><td>{row.componentSku}</td><td>{row.componentName}</td><td>{row.quantity}</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|