initial release testing

app/assemblies/page.tsx

@@ -0,0 +1,63 @@
+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>
+  );
+}