This commit is contained in:
2026-03-23 17:12:35 -05:00
parent 92328713f4
commit d59a0a563d
9 changed files with 346 additions and 40 deletions

View File

@@ -1,7 +1,12 @@
import { addKitComponent, buildAssembly } from "@/lib/actions";
import { getAssembliesWithComponents, getParts } from "@/lib/repository";
export default function AssembliesPage() {
export default async function AssembliesPage({
searchParams
}: {
searchParams?: Promise<{ error?: string; success?: string }>;
}) {
const params = (await searchParams) ?? {};
const parts = getParts();
const assemblies = parts.filter((part) => part.kind === "assembly");
const components = parts.filter((part) => part.kind === "part");
@@ -9,6 +14,8 @@ export default function AssembliesPage() {
return (
<div className="grid">
{params.error ? <section className="panel"><p className="muted" style={{ color: "var(--danger)" }}>{params.error}</p></section> : null}
{params.success ? <section className="panel"><p className="muted" style={{ color: "var(--success)" }}>{params.success}</p></section> : null}
<section className="two-up">
<article className="panel">
<h2 className="section-title">Bill of Materials</h2>
@@ -16,26 +23,26 @@ export default function AssembliesPage() {
<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>
<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>
</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>
<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>
</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>
<button className="button" type="submit" disabled={assemblies.length === 0 || components.length === 0}>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>
<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">{assemblies.map((assembly) => <option key={assembly.id} value={assembly.sku}>{assembly.sku} - {assembly.name}</option>)}</select>
<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>
</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>
<button className="button secondary" type="submit" disabled={assemblies.length === 0}>Build Now</button>
</form>
</article>
</section>

View File

@@ -1,12 +1,13 @@
import { receivePurchaseOrder } from "@/lib/actions";
import { PurchaseOrderFulfillmentForm } from "@/components/purchase-order-fulfillment-form";
import { PurchaseOrderForm } from "@/components/purchase-order-form";
import { formatCurrency, formatDate } from "@/lib/format";
import { getLowStockParts, getOrderItemOptions, getPurchaseOrders, getVendors } from "@/lib/repository";
import { getLowStockParts, getOrderItemOptions, getPurchaseOrderLineDetails, getPurchaseOrders, getVendors } from "@/lib/repository";
export default function PurchaseOrdersPage() {
const vendors = getVendors();
const items = getOrderItemOptions();
const orders = getPurchaseOrders();
const orderLines = getPurchaseOrderLineDetails();
const lowStockParts = getLowStockParts();
return (
@@ -19,7 +20,7 @@ export default function PurchaseOrdersPage() {
</article>
<article className="panel">
<h2 className="section-title">Receiving Flow</h2>
<p className="section-copy">Leave line quantities blank to receive the remaining balance, or enter `SKU,quantity` rows for a partial receipt.</p>
<p className="section-copy">Receive relational order lines directly by entering quantities against the remaining balance on each line.</p>
<div className="table-wrap">
<table className="table">
<thead><tr><th>Order</th><th>Vendor</th><th>Status</th><th>Total</th><th>Qty Progress</th><th>Created</th><th>Action</th></tr></thead>
@@ -39,11 +40,10 @@ export default function PurchaseOrdersPage() {
{order.status === "received" ? (
<span className="muted">Received</span>
) : (
<form action={receivePurchaseOrder} className="form-grid">
<input type="hidden" name="orderId" value={order.id} />
<textarea className="textarea" name="lines" placeholder={"PART-001,4\nPART-002,10"} />
<button className="button secondary" type="submit">Receive</button>
</form>
<PurchaseOrderFulfillmentForm
orderId={order.id}
lines={orderLines.filter((line) => line.purchaseOrderId === order.id && line.remainingQuantity > 0)}
/>
)}
</td>
</tr>

View File

@@ -1,12 +1,13 @@
import { shipSalesOrder } from "@/lib/actions";
import { SalesOrderFulfillmentForm } from "@/components/sales-order-fulfillment-form";
import { SalesOrderForm } from "@/components/sales-order-form";
import { formatCurrency, formatDate } from "@/lib/format";
import { getCustomers, getOrderItemOptions, getSalesOrders } from "@/lib/repository";
import { getCustomers, getOrderItemOptions, getSalesOrderLineDetails, getSalesOrders } from "@/lib/repository";
export default function SalesOrdersPage() {
const customers = getCustomers();
const items = getOrderItemOptions();
const orders = getSalesOrders();
const orderLines = getSalesOrderLineDetails();
return (
<div className="grid">
@@ -18,7 +19,7 @@ export default function SalesOrdersPage() {
</article>
<article className="panel">
<h2 className="section-title">Shipping Flow</h2>
<p className="section-copy">Leave line quantities blank to ship the remaining balance, or enter `SKU,quantity` rows for a partial shipment.</p>
<p className="section-copy">Ship relational order lines directly by choosing quantities from the remaining balance on each line.</p>
<div className="table-wrap">
<table className="table">
<thead><tr><th>Order</th><th>Customer</th><th>Status</th><th>Total</th><th>Qty Progress</th><th>Created</th><th>Action</th></tr></thead>
@@ -38,11 +39,10 @@ export default function SalesOrdersPage() {
{order.status === "shipped" ? (
<span className="muted">Shipped</span>
) : (
<form action={shipSalesOrder} className="form-grid">
<input type="hidden" name="orderId" value={order.id} />
<textarea className="textarea" name="lines" placeholder={"PART-001,1\nKIT-100,2"} />
<button className="button secondary" type="submit">Ship</button>
</form>
<SalesOrderFulfillmentForm
orderId={order.id}
lines={orderLines.filter((line) => line.salesOrderId === order.id && line.remainingQuantity > 0)}
/>
)}
</td>
</tr>