// MRP for Small Manufacturers — replaces production spreadsheets. // Planning, purchasing, inventory, and execution in one place. Every number // traces to the engine; every decision persists via the App State Store. import React, { useEffect, useMemo, useState } from "react"; import { obl, loadState, saveState } from "./obl"; import { C, S } from "./ui"; import { WORK_CENTERS, CUSTOMERS, SUPPLIERS, buildSample, adaptRealItems } from "./data"; import { money, invRow, onHand, available, whereUsed, explode, runMRP, shortages, dashboardStats, PO_FLOW, WO_FLOW, poNext, pickList, globalSearch } from "./engine"; const NS = "mrp-lite"; const day = 86400_000; const iso = t => new Date(t).toISOString().slice(0, 10); const EMPTY_DELTA = { sos: [], pos: [], wos: [], txns: [], forecast: [], mrpDecisions: {}, poPatch: {}, woPatch: {}, soPatch: {}, itemPatch: {}, config: {}, log: [] }; const NAV_SECTIONS = [ { label: "Overview", color: "#3B82F6", items: [["dashboard", "📊", "Dashboard"], ["search", "🔍", "Global Search"], ["reports", "📋", "Reports"]] }, { label: "Master Data", color: "#10B981", items: [["items", "📦", "Item Master"], ["boms", "🌳", "Bills of Materials"], ["routings", "🏭", "Routings & Work Centers"], ["customers", "👥", "Customers"], ["suppliers", "🚚", "Suppliers"]] }, { label: "Planning", color: "#F59E0B", items: [["demand", "🧾", "Sales Orders & Forecast"], ["mrp", "⚡", "MRP Engine"]] }, { label: "Execution", color: "#8B5CF6", items: [["pos", "🛒", "Purchase Orders"], ["receiving", "📥", "Receiving"], ["wos", "🔧", "Work Orders"], ["picking", "📤", "Material Picking"], ["shopfloor", "🖥️", "Shop Floor"]] }, { label: "Admin & Settings", color: "#EC4899", items: [["settings", "⚙️", "Plant Settings"], ["approvals", "✋", "Approval Matrix"], ["audit", "📜", "Activity Log"]] }, { label: "Data Management", color: "#6B7280", items: [["wizard", "🧭", "Setup Wizard"], ["objects", "📁", "Data Objects"], ["readiness", "🚦", "Readiness Score"], ["integrations", "🔗", "Integrations"]] } ]; export default function App() { const [view, setView] = useState("dashboard"); const [delta, setDelta] = useState(EMPTY_DELTA); const [version, setVersion] = useState(0); const [save, setSave] = useState("idle"); const [dataMode, setDataMode] = useState("loading"); const [base, setBase] = useState(null); const [showWelcome, setShowWelcome] = useState(true); const [showHelp, setShowHelp] = useState(false); const [showChecklist, setShowChecklist] = useState(false); useEffect(() => { (async () => { try { const items = await obl("/inventory/items").catch(() => null); const looksReal = Array.isArray(items) && items.length > 0 && !items.some(i => /^(RM|WIP|FG|MRO)-\d{3}$/.test(i.id ?? "")); if (looksReal) { setBase({ ...buildSample(), items: adaptRealItems(items), sos: [], pos: [], wos: [], txns: [], forecast: [], bomList: [] }); setDataMode("real"); } else { setBase(buildSample()); setDataMode("sample"); } } catch { setBase(buildSample()); setDataMode("sample"); } try { const st = await loadState(NS); if (st?.data) { setDelta({ ...EMPTY_DELTA, ...st.data }); setVersion(st.version); setSave("saved"); } else if (st === null) setSave("demo"); } catch { setSave("offline"); } })(); }, []); const persist = async next => { setDelta(next); if (save === "demo") return; setSave("saving"); const res = await saveState(NS, next, version); if (res.ok) { setVersion(res.version); setSave("saved"); } else if (res.conflict) { if (res.data) { setDelta({ ...EMPTY_DELTA, ...res.data }); setVersion(res.version); } setSave("saved"); } else setSave(res.demo ? "demo" : "offline"); }; const act = (patch, logLine) => persist({ ...delta, ...patch, log: logLine ? [{ ts: new Date().toLocaleString(), text: logLine }, ...delta.log].slice(0, 300) : delta.log }); // materialized world = base + delta const world = useMemo(() => { if (!base) return null; const patchArr = (arr, patches) => arr.map(x => patches[x.id] ? { ...x, ...patches[x.id] } : x); return { items: patchArr(base.items, delta.itemPatch), bomList: base.bomList, routings: base.routings, locations: base.locations, customersList: CUSTOMERS, suppliersList: SUPPLIERS, sos: [...patchArr(base.sos, delta.soPatch), ...delta.sos], pos: [...patchArr(base.pos, delta.poPatch), ...patchArr(delta.pos, delta.poPatch)], wos: [...patchArr(base.wos, delta.woPatch), ...patchArr(delta.wos, delta.woPatch)], txns: [...base.txns, ...delta.txns], forecast: [...(base.forecast ?? []), ...delta.forecast] }; }, [base, delta]); const config = { planningHorizonDays: 90, workingDaysPerWeek: 5, currency: "$", companyName: "Your Company", approvalRequired: { mrpAccept: true, poApprove: true, woRelease: false, adjust: false }, ...(delta.config ?? {}) }; if (!world) return

Opening MRP…

; const V = { dashboard: Dashboard, search: SearchView, reports: Reports, items: Items, boms: Boms, routings: Routings, customers: Customers, suppliers: Suppliers, demand: Demand, mrp: Mrp, pos: Pos, receiving: Receiving, wos: Wos, picking: Picking, shopfloor: ShopFloor, settings: Settings, approvals: Approvals, audit: Audit, wizard: Wizard, objects: DataObjects, readiness: Readiness, integrations: Integrations }[view]; return (

MRP

for Small Shops

{save === "saving" ? "● saving…" : save === "saved" ? "✓ saved" : save === "demo" ? "demo mode" : save === "offline" ? "⚠ offline" : ""}

{NAV_SECTIONS.map(sec => (

{sec.label}

{sec.items.map(([id, icon, label]) => { const active = view === id; return ( ); })}

))}

setShowChecklist(!showChecklist)}>🚀 Setup progress setShowHelp(!showHelp)}>❓ Help & guide window.print()}>🖨️ Print this screen

{(() => { const cur = NAV_SECTIONS.flatMap(sc => sc.items).find(i => i[0] === view); return (

{cur?.[2] ?? ""}

MRP for Small Manufacturers · Plan · Buy · Build

{dataMode === "real" ? "● LIVE DATA" : dataMode === "empty" ? "AWAITING DATA" : "SAMPLE DATA"}

); })()} {showWelcome && dataMode === "sample" && setShowWelcome(false)} goWizard={() => { setShowWelcome(false); setView("wizard"); }} />} {showChecklist && setShowChecklist(false) }} />} {showHelp && setShowHelp(false)} />}

); } /* ---------- shared ---------- */ const FooterBtn = ({ onClick, children }) => ( ); const btn = (bg, fg) => ({ background: bg, color: fg ?? "#FFFFFF", border: "none", borderRadius: 8, padding: "7px 14px", fontWeight: 600, cursor: "pointer", fontSize: 12 }); const Kpi = ({ label, value, tone, sub, onClick }) => (

{label}

{value ?? "—"}

{sub &&

{sub}

}

); const Badge = ({ text, color }) => {text}; const Doctrine = ({ what, why, impact, doNow, ifNot }) => (

{[["What's happening", what, C.text], ["Why", why, C.sub], ["Business impact", impact, C.red], ["Do now", doNow, C.text], ["If nothing changes", ifNot, C.sub]].map(([h, t, c]) => (

{h}

{t}

))}

); const T = ({ head, children }) => (

{head.map(h => )}{children}

{h}

); const Inp = props => ; const Sel = ({ value, onChange, options, w }) => ( ); const csvOut = (name, header, rowsOut) => { const text = [header.join(","), ...rowsOut.map(r => r.map(c => `"${String(c ?? "").replace(/"/g, '""')}"`).join(","))].join("\n"); const a = document.createElement("a"); a.href = "data:text/csv;charset=utf-8," + encodeURIComponent(text); a.download = name + ".csv"; a.click(); }; const STATUS_TONE = { Open: C.blue, Draft: C.dim, Approved: C.sky, Sent: C.blue, "Partially Received": C.amber, Closed: C.dim, Planned: C.dim, Released: C.sky, "In Progress": C.amber, Complete: C.green }; /* ---------- data banner / welcome / checklist / help ---------- */ function DataBanner({ dataMode, setDataMode, setBase, setView }) { if (dataMode === "sample") return (

Exploring with sample data — a 60-item small shop with live BOMs, orders, and history. Every number is simulated.

); if (dataMode === "empty") return (

Ready for your data

Open the Setup Wizard for the loading order, download templates from Data Objects, and upload through the platform Data page.

); if (dataMode === "real") return (

✓ Running on your item data. BOMs, sales orders, and routings load next — see the Readiness screen for what each unlocks.

); return null; } function Welcome({ onClose, goWizard }) { return (

e.stopPropagation()} style={{ background: C.card, borderRadius: 20, padding: "30px 34px", maxWidth: 520, width: "92%", boxShadow: "0 24px 60px rgba(0,0,0,0.2)" }}>

Your spreadsheet's
replacement is ready

This is a working MRP loaded with a realistic 60-item sample shop: multi-level BOMs, open orders, inventory history. Run the MRP engine, release work orders, receive POs — everything works. Connect your own data when ready.

{[["1", "Explore", "Run the MRP Engine and watch it recommend exactly what to buy and build, and when."], ["2", "Connect your data", "Setup Wizard → download templates → upload. The AI maps your columns."], ["3", "Run your shop", "Plan Monday morning from the dashboard instead of six spreadsheets."]].map(([n, t, d]) => (

{n}

{t}

{d}

))}

Free to explore · Your data stays yours · No credit card needed

); } function Checklist({ delta, dataMode, setView, close }) { const steps = [ { label: "Explore the dashboard", done: true, hint: "You're here" }, { label: "Run the MRP engine", done: Object.keys(delta.mrpDecisions).length > 0, hint: "Planning → MRP Engine", go: "mrp" }, { label: "Accept a recommendation into a PO or WO", done: Object.values(delta.mrpDecisions).some(d => d.status === "accepted"), hint: "Planning → MRP Engine", go: "mrp" }, { label: "Receive a purchase order", done: delta.txns.some(t => t.type === "Receive"), hint: "Execution → Receiving", go: "receiving" }, { label: "Issue materials to a work order", done: delta.txns.some(t => t.type === "Issue"), hint: "Execution → Material Picking", go: "picking" }, { label: "Configure plant settings", done: Object.keys(delta.config).length > 0, hint: "Admin → Plant Settings", go: "settings" }, { label: "Upload your own data", done: dataMode === "real", hint: "Data Management → Setup Wizard", go: "wizard" } ]; return (

🚀 Setup checklist — {steps.filter(s => s.done).length} of {steps.length} done

{steps.map((st, i) => (

st.go && setView(st.go)} style={{ display: "flex", gap: 12, alignItems: "center", padding: "8px 12px", marginBottom: 3, borderRadius: 10, background: st.done ? `${C.green}08` : C.well, cursor: st.go ? "pointer" : "default" }}>

{st.done ? "✓" : i + 1}

{st.label}

{st.hint}

{st.go && !st.done && Go →}

))}

); } const HELP = { dashboard: "Your morning read: shortages, POs awaiting receipt, work orders due and late, inventory value, and recent activity. Click any card to jump to the screen where you act on it.", search: "One search box across parts, customers, suppliers, POs, work orders, and sales orders. Type at least two characters.", reports: "One-click CSV exports: inventory valuation, aging, transactions, open POs/WOs, shortages, supplier performance.", items: "Every part in your system with its planning rules — lead time, reorder point, safety stock, MOQ, lot size. Click a row to see the full record, where it's used, and to adjust planning fields.", boms: "Multi-level bills of materials. Pick a parent to see its tree with quantities and scrap. Where-used answers 'what breaks if this part changes?'", routings: "Operations per manufactured item — work center, setup and run times — plus the work center master with shift hours and efficiency.", customers: "Basic customer master feeding sales orders.", suppliers: "Supplier master with lead times and contacts. Lead times here drive MRP purchase timing.", demand: "Open sales orders plus manual forecast — the independent demand that drives MRP. Add orders here and re-run the engine.", mrp: "The heart of the system. The engine nets demand against on-hand, allocated, and on-order inventory, offsets by lead time, applies lot sizing — then recommends POs and WOs. Accept, modify, or reject each line. Accepted lines become draft POs / planned WOs in Execution.", pos: "Purchase order lifecycle: Draft → Approved → Sent → Partially Received → Closed. Advance status here; receive against them on the Receiving screen.", receiving: "Receive open PO lines — full or partial, with optional inspection hold. Receipts post inventory transactions instantly.", wos: "Work order lifecycle: Planned → Released → In Progress → Complete. Releasing reserves materials; completing receives finished goods into stock.", picking: "Pick lists per released work order: what to pull, how much is already issued, what's available. Issuing posts inventory transactions.", shopfloor: "The operator view: jobs at each work center with start/complete per operation and quantity/scrap entry. Big buttons, no clutter.", settings: "Company, calendar, planning horizon, and currency. These drive the MRP engine's assumptions.", approvals: "Which actions need a second set of eyes — MRP acceptance, PO approval, WO release, inventory adjustments.", audit: "Every action taken in this MRP — orders created, status changes, receipts, issues, adjustments — timestamped.", wizard: "Plain-language guided setup: what data to load, in what order, and why.", objects: "Every data object with required/optional fields, sample rows, and downloadable CSV templates.", readiness: "Which features are fully functional with your current data, and what to load next to unlock more.", integrations: "What's live today (file upload, AI mapping) and what's on the roadmap (API, connectors, scheduled refresh)." }; function HelpPanel({ view, close }) { return (

❓ What am I looking at?

{HELP[view] ?? "Pick a screen from the left."}

); } /* ---------- Dashboard ---------- */ function Dashboard({ world, delta, setView }) { const st = dashboardStats(world); const shortRows = shortages(world).slice(0, 8); return ( <>

setView("mrp")} /> setView("items")} /> setView("receiving")} /> setView("wos")} /> setView("wos")} /> setView("wos")} /> setView("demand")} />

Material shortages — worst first

{shortRows.length === 0 ?

No items below safety stock. Enjoy it while it lasts.

: shortRows.map(r => (

{r.id}{r.desc} {r.available} avail SS {r.safetyStock}

))}

Recent activity

{(delta.log.length ? delta.log : [{ ts: "—", text: "No actions yet — run the MRP engine or receive a PO and it lands here." }]).slice(0, 8).map((l, i) => (

{l.ts}{l.text}

))}

); } /* ---------- Items ---------- */ function Items({ world, delta, act }) { const [q, setQ] = useState(""); const [type, setType] = useState("all"); const [sel, setSel] = useState(null); const rows = world.items.map(i => invRow(i, world)) .filter(r => (type === "all" || r.type === type) && (!q || (r.id + " " + r.desc).toLowerCase().includes(q.toLowerCase()))); const item = sel ? rows.find(r => r.id === sel) : null; const patch = (field, val) => act({ itemPatch: { ...delta.itemPatch, [sel]: { ...(delta.itemPatch[sel] ?? {}), [field]: val } } }, `Item ${sel}: ${field} → ${val}`); return ( <>

setQ(e.target.value)} placeholder="Search item number or description…" style={{ flex: 1, maxWidth: 320 }} /> [t, t])]} />

{item && (

{item.id} — {item.desc} rev {item.rev}

{[["Type", item.type], ["UOM", item.uom], ["Std cost", "$" + item.stdCost], ["On hand", item.oh], ["Allocated", item.allocated], ["Available", item.available], ["On order (PO)", item.onOrderPo], ["In production (WO)", item.onOrderWo], ["Default supplier", world.suppliersList.find(s => s.id === item.defaultSupplier)?.name ?? "—"], ["Where used", whereUsed(item.id, world).join(", ") || "—"]].map(([l, v]) => (

{l}: {v}

))}

Planning rules — edit inline, MRP uses these immediately

{[["leadDays", "Lead time (days)"], ["reorderPoint", "Reorder point"], ["safetyStock", "Safety stock"], ["preferredQty", "Preferred qty"], ["moq", "MOQ"], ["lotSize", "Lot size"]].map(([f, l]) => ( {l}
Number(e.target.value) !== item[f] && patch(f, Number(e.target.value))} style={{ width: 100, marginTop: 2 }} /> ))}

)} {rows.slice(0, 60).map(r => ( setSel(r.id)} style={{ cursor: "pointer", background: r.short ? `${C.red}06` : r.low ? `${C.amber}06` : "transparent" }}> {r.id}

{r.desc}

{r.type} {r.oh} {r.allocated || "—"} {r.available} {r.onOrderPo + r.onOrderWo || "—"} {r.reorderPoint} / {r.safetyStock} {r.leadDays}d ${r.stdCost} {r.short ? : r.low ? : } ))}

Showing {Math.min(rows.length, 60)} of {rows.length}. Click a row for the full record and inline planning-rule editing.

); } /* ---------- BOMs ---------- */ function Boms({ world }) { const parents = world.bomList.map(b => b.parent); const [sel, setSel] = useState(parents[0] ?? null); const [wu, setWu] = useState(""); const tree = sel ? explode(sel, 1, world) : []; const bom = world.bomList.find(b => b.parent === sel); return ( <>

[p, p + " — " + (world.items.find(i => i.id === p)?.desc ?? "")])} w={340} /> setWu(e.target.value)} placeholder="Where-used: type an item id…" style={{ width: 220 }} /> {wu && Used in: {whereUsed(wu.toUpperCase(), world).join(", ") || "nothing"}}

{bom && (

{sel} · rev {bom.rev} · effective {bom.effectiveFrom} — {tree.length} lines through all levels

{["Level", "Component", "Qty per", "Scrap %", "Extended need (per 1)", "UOM", "Type"].map(h => )} {tree.map((n, i) => { const it = world.items.find(x => x.id === n.itemId); return ( ); })}

{h}
{"·".repeat(n.depth)} L{n.depth}	{n.itemId} {it?.desc}	{n.qtyPer}	{n.scrapPct \|\| "—"}	{n.need}	{it?.uom}	{it?.type}

)} ); } /* ---------- Routings & Work Centers ---------- */ function Routings({ world }) { const routed = Object.keys(world.routings ?? {}); const [sel, setSel] = useState(routed[0] ?? null); const ops = sel ? world.routings[sel] ?? [] : []; return ( <>

[p, p + " — " + (world.items.find(i => i.id === p)?.desc ?? "")])} w={340} />

{ops.map(o => ( {o.seq} {WORK_CENTERS.find(w => w.id === o.workCenter)?.name ?? o.workCenter} {o.setupMin} {o.runMinPer} {o.outside ? : "—"} ))}

Work centers

{WORK_CENTERS.map(w => ( {w.name}

{w.id}

{w.shiftHours} {Math.round(w.efficiency * 100)}% {Math.round(w.shiftHours * w.efficiency * 10) / 10} ))}

); } /* ---------- Customers / Suppliers ---------- */ function Customers({ world }) { return ( {world.customersList.map(c => ( {c.name}

{c.id}

{c.contact}{c.email} {world.sos.filter(s => s.customer === c.id && s.status === "Open").length} ))} ); } function Suppliers({ world }) { const today = iso(Date.now()); return ( {world.suppliersList.map(sp => { const open = world.pos.filter(p => p.supplier === sp.id && !["Closed", "Draft"].includes(p.status)); return ( {sp.name}

{sp.email} · {sp.phone}

{sp.leadDays}{sp.currency}{sp.contact} {open.length} p.due < today) ? C.red : C.sub }}>{open.filter(p => p.due < today).length} ); })} ); } /* ---------- Demand (SOs + forecast) ---------- */ function Demand({ world, delta, act }) { const fgs = world.items.filter(i => i.type === "Finished Good"); const [itemId, setItemId] = useState(fgs[0]?.id ?? ""); const [cust, setCust] = useState(world.customersList[0]?.id ?? ""); const [qty, setQty] = useState(5); const [due, setDue] = useState(iso(Date.now() + 21 * day)); const addSO = () => { if (!itemId || !(qty > 0)) return; const id = "SO-" + (6000 + delta.sos.length); act({ sos: [...delta.sos, { id, customer: cust, itemId, qty: Math.round(qty), due, status: "Open", notes: "" }] }, `${id} created: ${qty}× ${itemId} due ${due}`); }; const closeSO = so => act({ soPatch: { ...delta.soPatch, [so.id]: { status: "Closed" } } }, `${so.id} closed`); return ( <> s.status === "Open").length} open sales orders and ${world.forecast.length} forecast entries drive all planning.`} why="MRP is only as good as the demand you feed it — orders it doesn't know about are shortages it can't prevent." impact="Every order added here flows through BOM explosion into material and capacity needs." doNow="Enter orders as they're won; add forecast for what sales expects. Then run the MRP Engine." ifNot="Purchasing finds out about big orders when the shortage hits the floor." />

Item
[f.id, f.id + " — " + f.desc])} w={280} /> Customer
[c.id, c.name])} /> Qty
setQty(Number(e.target.value))} style={{ width: 80 }} /> Due
setDue(e.target.value)} />

{world.sos.slice().sort((a, b) => a.due.localeCompare(b.due)).map(so => ( {so.id} {world.customersList.find(c => c.id === so.customer)?.name ?? so.customer} {so.itemId} {world.items.find(i => i.id === so.itemId)?.desc} {so.qty} {so.due} {so.status === "Open" && } ))}

Manual forecast

{world.forecast.map((f, i) => ( {f.itemId}{f.month}{f.qty} ))} ); } /* ---------- MRP Engine ---------- */ function Mrp({ world, delta, act, config }) { const [ran, setRan] = useState(false); const planned = useMemo(() => ran ? runMRP(world, config) : [], [ran, world, config]); const key = p => `${p.kind}:${p.itemId}:${p.due}`; const decision = p => delta.mrpDecisions[key(p)]; const accept = (p, qty) => { const d = { ...delta.mrpDecisions, [key(p)]: { status: "accepted", qty } }; if (p.kind === "PO") { const id = "PO-" + (9500 + delta.pos.length); act({ mrpDecisions: d, pos: [...delta.pos, { id, supplier: p.supplier ?? "SUP-200", lines: [{ itemId: p.itemId, qty, received: 0 }], due: p.due, status: "Draft", createdAt: iso(Date.now()) }] }, `MRP accepted → ${id} draft: ${qty}× ${p.itemId} due ${p.due}`); } else { const id = "WO-" + (7500 + delta.wos.length); act({ mrpDecisions: d, wos: [...delta.wos, { id, itemId: p.itemId, qty, due: p.due, status: "Planned", issued: {}, opsDone: [], qtyComplete: 0, scrap: 0, createdAt: iso(Date.now()) }] }, `MRP accepted → ${id} planned: ${qty}× ${p.itemId} due ${p.due}`); } }; const reject = p => act({ mrpDecisions: { ...delta.mrpDecisions, [key(p)]: { status: "rejected" } } }, `MRP rejected: ${p.kind} ${p.itemId} due ${p.due}`); const open = planned.filter(p => !decision(p)); const buyCost = open.filter(p => p.kind === "PO").reduce((s, p) => s + p.cost, 0); return ( <> p.kind === "PO").length} purchase, ${planned.filter(p => p.kind === "WO").length} build — ${open.length} awaiting your decision.` : "The engine nets every demand against inventory, open orders, lead times, and lot rules."} why="Time-phased netting level by level: independent demand explodes through BOMs into dependent demand, offset by lead time." impact={ran ? `${money(buyCost)} of purchasing is recommended; late-flagged lines should have been released already.` : "One click replaces the Monday-morning spreadsheet session."} doNow={ran ? "Work top-down — late lines first. Accept creates a draft PO or planned WO; modify the qty inline if you know better." : "Run the engine."} ifNot="The shortages arrive on the dates printed below." /> {!ran ? (

Ready to plan

Nets {world.sos.filter(s => s.status === "Open").length} open sales orders + {world.forecast.length} forecast entries against {world.items.length} items over a {config.planningHorizonDays}-day horizon.

) : ( <>

{open.length} open · {planned.length - open.length} decided

{planned.slice(0, 40).map(p => { const d = decision(p); return ( {p.late && } {p.itemId}

{p.desc}

{d?.qty ?? p.qty} {p.release} {p.due} {p.reason} {d ? : ( { if (e.key === "Enter" && Number(e.target.value) > 0) accept(p, Number(e.target.value)); }} /> )} ); })} {planned.length === 0 &&

No net requirements — inventory and open orders cover all demand in the horizon. Rare and beautiful.

} )} ); } /* ---------- Purchase Orders ---------- */ function Pos({ world, delta, act }) { const advance = po => { const next = poNext(po.status); if (!next) return; act({ poPatch: { ...delta.poPatch, [po.id]: { ...(delta.poPatch[po.id] ?? {}), status: next } } }, `${po.id} → ${next}`); }; return ( <> !["Closed"].includes(p.status)).length} purchase orders in flight.`} why="Draft → Approved → Sent → Received is the lifecycle; each stage is a control point." impact="POs stuck in Draft are shortages with a countdown; late Sent POs need supplier calls today." doNow="Advance drafts, print/export what needs sending, and receive on the Receiving screen." ifNot="Materials arrive when suppliers feel like it instead of when production needs them." /> {world.pos.slice().sort((a, b) => a.due.localeCompare(b.due)).map(po => { const val = po.lines.reduce((s, l) => s + l.qty * (world.items.find(i => i.id === l.itemId)?.stdCost ?? 0), 0); const next = poNext(po.status); return ( {po.id}

{po.createdAt}

{world.suppliersList.find(s => s.id === po.supplier)?.name ?? po.supplier} {po.lines.map(l => `${l.itemId} ×${l.qty}${l.received ? ` (${l.received} recd)` : ""}`).join(", ")} {money(val)} {po.due} {next && } {po.status === "Sent" && } ); })} ); } /* ---------- Receiving ---------- */ function Receiving({ world, delta, act }) { const open = world.pos.filter(p => ["Approved", "Sent", "Partially Received"].includes(p.status)); const receive = (po, line, qty, hold) => { if (!(qty > 0)) return; const newRecd = (line.received ?? 0) + qty; const lines = po.lines.map(l => l === line ? { ...l, received: newRecd } : l); const allDone = lines.every(l => (l.received ?? 0) >= l.qty); act({ txns: [...delta.txns, { id: "TX-R" + Date.now(), ts: iso(Date.now()), type: "Receive", itemId: line.itemId, qty, loc: hold ? "INSPECTION" : "MAIN", ref: po.id, note: hold ? "Inspection hold" : "", user: "you" }], poPatch: { ...delta.poPatch, [po.id]: { lines, status: allDone ? "Closed" : "Partially Received" } } }, `Received ${qty}× ${line.itemId} on ${po.id}${hold ? " (inspection hold)" : ""}${allDone ? " — PO closed" : ""}`); }; return ( <> {open.length === 0 &&

Nothing inbound. POs appear here once Approved or Sent.

} {open.map(po => (

{po.id}{world.suppliersList.find(s => s.id === po.supplier)?.name} due {po.due}

{po.lines.map((l, li) => { const remaining = l.qty - (l.received ?? 0); return ( i.id === l.itemId)?.desc} onReceive={(qty, hold) => receive(po, l, qty, hold)} /> ); })}

))} ); } function RecvLine({ line, remaining, desc, onReceive }) { const [qty, setQty] = useState(remaining); const [hold, setHold] = useState(false); useEffect(() => setQty(remaining), [remaining]); return (

{line.itemId} {desc} {line.received ?? 0} / {line.qty} received {remaining > 0 ? ( <> setQty(Number(e.target.value))} style={{ width: 80 }} /> setHold(e.target.checked)} /> hold ) : }

); } /* ---------- Work Orders ---------- */ function Wos({ world, delta, act, setView }) { const advance = wo => { const flow = { Planned: "Released", Released: "In Progress", "In Progress": "Complete", Complete: "Closed" }; const next = flow[wo.status]; if (!next) return; if (next === "Complete") { act({ woPatch: { ...delta.woPatch, [wo.id]: { ...(delta.woPatch[wo.id] ?? {}), status: next, qtyComplete: wo.qty } }, txns: [...delta.txns, { id: "TX-W" + Date.now(), ts: iso(Date.now()), type: "Receive", itemId: wo.itemId, qty: wo.qty, loc: "FG-STOCK", ref: wo.id, note: "Production receipt", user: "you" }] }, `${wo.id} complete — +${wo.qty} ${wo.itemId} to stock`); } else { act({ woPatch: { ...delta.woPatch, [wo.id]: { ...(delta.woPatch[wo.id] ?? {}), status: next } } }, `${wo.id} → ${next}`); } }; return ( <> !["Complete", "Closed"].includes(w.status)).length} open work orders.`} why="Release reserves materials; Complete receives finished goods. The statuses aren't decoration — each one moves inventory." impact="Released WOs allocate components (visible on Item Master); completing posts production into stock." doNow="Release what's due, pick materials on the Picking screen, complete what's finished." ifNot="The shop builds from memory, and inventory has no idea what happened." /> {world.wos.slice().sort((a, b) => a.due.localeCompare(b.due)).map(wo => { const picks = pickList(wo, world); const issued = picks.filter(p => p.remaining === 0).length; const ops = world.routings?.[wo.itemId] ?? []; const flow = { Planned: "Release", Released: "Start", "In Progress": "Complete", Complete: "Close" }; return ( {wo.id}

{wo.createdAt}

{wo.itemId}

{world.items.find(i => i.id === wo.itemId)?.desc}

{wo.qty} {wo.due} {issued}/{picks.length} issued {wo.status === "Released" && issued < picks.length && } {(wo.opsDone ?? []).length}/{ops.length} {flow[wo.status] && } ); })} ); } /* ---------- Picking ---------- */ function Picking({ world, delta, act }) { const releasable = world.wos.filter(w => ["Released", "In Progress"].includes(w.status)); const [sel, setSel] = useState(releasable[0]?.id ?? ""); const wo = world.wos.find(w => w.id === sel); const picks = wo ? pickList(wo, world) : []; const issue = (p, qty) => { if (!(qty > 0)) return; const issued = { ...(wo.issued ?? {}), [p.itemId]: (wo.issued?.[p.itemId] ?? 0) + qty }; act({ txns: [...delta.txns, { id: "TX-I" + Date.now(), ts: iso(Date.now()), type: "Issue", itemId: p.itemId, qty: -qty, loc: "MAIN", ref: wo.id, note: "Material issue", user: "you" }], woPatch: { ...delta.woPatch, [wo.id]: { ...(delta.woPatch[wo.id] ?? {}), issued } } }, `Issued ${qty}× ${p.itemId} to ${wo.id}`); }; return ( <> p.remaining > 0).length} lines still to pull.` : "Release a work order to generate its pick list."} why="Issuing materials is the moment allocated inventory becomes consumed inventory." impact="Short picks show immediately — available vs needed is on every line." doNow="Pull the material, enter what you actually issued (partials fine), post it." ifNot="The floor takes what it needs anyway, and the system finds out at cycle count." />

[w.id, `${w.id} — ${w.qty}× ${w.itemId}`]) : [["", "No released work orders"]]} w={300} />

{wo && ( {picks.map((p, i) => ( issue(p, qty)} /> ))} )} ); } function PickLine({ p, onIssue }) { const [qty, setQty] = useState(p.remaining); useEffect(() => setQty(p.remaining), [p.remaining]); const short = p.available < p.remaining; return ( 0 ? `${C.red}06` : "transparent" }}> {p.itemId}

{p.desc}

{p.need} {p.uom} {p.issued} {p.remaining} {p.available}{short && p.remaining > 0 ? " — SHORT" : ""} {p.remaining > 0 ? ( setQty(Number(e.target.value))} style={{ width: 70, padding: "4px 6px" }} /> ) : } ); } /* ---------- Shop Floor ---------- */ function ShopFloor({ world, delta, act }) { const jobs = world.wos.filter(w => ["Released", "In Progress"].includes(w.status)); const completeOp = (wo, seq) => { const opsDone = [...(wo.opsDone ?? []), seq]; act({ woPatch: { ...delta.woPatch, [wo.id]: { ...(delta.woPatch[wo.id] ?? {}), opsDone, status: "In Progress" } } }, `${wo.id} op ${seq} complete`); }; return ( <>

{jobs.length === 0 &&

No released jobs. Release a work order first.

} {jobs.map(wo => { const ops = world.routings?.[wo.itemId] ?? []; const done = wo.opsDone ?? []; return (

{wo.id}

{wo.qty}× {wo.itemId}

{world.items.find(i => i.id === wo.itemId)?.desc} · due {wo.due}

{ops.map(op => { const isDone = done.includes(op.seq); const isNext = !isDone && ops.filter(o => o.seq < op.seq).every(o => done.includes(o.seq)); return (

{isDone ? "✓" : op.seq / 10} {WORK_CENTERS.find(w => w.id === op.workCenter)?.name ?? op.workCenter} {op.setupMin}+{op.runMinPer}m/u {isNext && }

); })}

); } /* ---------- Search / Reports ---------- */ function SearchView({ world, setView }) { const [q, setQ] = useState(""); const hits = globalSearch(q, world); return ( <> setQ(e.target.value)} placeholder="Search parts, customers, suppliers, POs, WOs, SOs…" style={{ width: "100%", maxWidth: 480, fontSize: 15, padding: "12px 16px", marginBottom: 14 }} /> {hits.map((h, i) => (

setView(h.view)} style={{ ...S.panel, marginBottom: 6, padding: "10px 16px", display: "flex", gap: 12, alignItems: "center", cursor: "pointer" }}> {h.id}{h.label} open →

))} {q.length >= 2 && hits.length === 0 &&

No matches for “{q}”.

} ); } function Reports({ world }) { const rows = world.items.map(i => invRow(i, world)); const today = iso(Date.now()); const R = [ ["Inventory valuation", () => csvOut("inventory-valuation", ["Item", "Desc", "Type", "On hand", "Std cost", "Value"], rows.map(r => [r.id, r.desc, r.type, r.oh, r.stdCost, Math.round(r.value)]))], ["Inventory transactions", () => csvOut("inventory-transactions", ["Date", "Type", "Item", "Qty", "Location", "Ref", "User"], world.txns.map(t => [t.ts, t.type, t.itemId, t.qty, t.loc, t.ref, t.user]))], ["Material shortages", () => csvOut("material-shortages", ["Item", "Desc", "Available", "Safety stock", "Reorder point"], shortages(world).map(r => [r.id, r.desc, r.available, r.safetyStock, r.reorderPoint]))], ["Open purchase orders", () => csvOut("open-pos", ["PO", "Supplier", "Item", "Qty", "Received", "Due", "Status"], world.pos.filter(p => p.status !== "Closed").flatMap(p => p.lines.map(l => [p.id, p.supplier, l.itemId, l.qty, l.received ?? 0, p.due, p.status])))], ["Open work orders", () => csvOut("open-wos", ["WO", "Item", "Qty", "Due", "Status"], world.wos.filter(w => !["Closed"].includes(w.status)).map(w => [w.id, w.itemId, w.qty, w.due, w.status]))], ["Late orders", () => csvOut("late-orders", ["Kind", "ID", "Item", "Due", "Status"], [ ...world.pos.filter(p => p.due < today && !["Closed", "Draft"].includes(p.status)).map(p => ["PO", p.id, p.lines.map(l => l.itemId).join(" "), p.due, p.status]), ...world.wos.filter(w => w.due < today && !["Complete", "Closed"].includes(w.status)).map(w => ["WO", w.id, w.itemId, w.due, w.status]) ])], ["Production schedule", () => csvOut("production-schedule", ["WO", "Item", "Qty", "Due", "Status", "Ops done"], world.wos.slice().sort((a, b) => a.due.localeCompare(b.due)).map(w => [w.id, w.itemId, w.qty, w.due, w.status, (w.opsDone ?? []).length]))], ["Item master", () => csvOut("item-master", ["Item", "Desc", "Type", "UOM", "Cost", "Lead", "ROP", "SS", "MOQ", "Lot"], world.items.map(i => [i.id, i.desc, i.type, i.uom, i.stdCost, i.leadDays, i.reorderPoint, i.safetyStock, i.moq, i.lotSize]))] ]; return (

{R.map(([name, fn]) => (

{name}

))}

); } /* ---------- Admin ---------- */ function Settings({ delta, act, config }) { const set = (k, v) => act({ config: { ...delta.config, [k]: v } }, `Setting ${k} → ${v}`); const F = ({ label, help, k, type, suffix }) => (

{label}

{help}

set(k, type === "text" ? e.target.value : Number(e.target.value))} style={{ width: 130, textAlign: type === "text" ? "left" : "right", fontWeight: 600 }} /> {suffix && {suffix}}

); return ( <>

); } function Approvals({ delta, act, config }) { const appr = config.approvalRequired; const toggle = k => act({ config: { ...delta.config, approvalRequired: { ...appr, [k]: !appr[k] } } }, `Approval ${k} → ${!appr[k] ? "required" : "auto"}`); const W = [ ["mrpAccept", "MRP recommendations", "Planner must accept/reject each engine recommendation before it becomes an order."], ["poApprove", "Purchase order approval", "POs require the Approved step before they can be Sent."], ["woRelease", "Work order release", "WOs require explicit release before materials are reserved."], ["adjust", "Inventory adjustments", "Manual stock adjustments require a reason and appear in the audit log."] ]; return ( <> {W.map(([k, label, desc]) => (

{label}

{desc}

))} ); } function Audit({ delta }) { return ( <> {delta.log.length === 0 ?

No actions yet — everything you do lands here.

: delta.log.map((l, i) => (

{l.ts}{l.text}

))} ); } /* ---------- Data Management ---------- */ const DATA_OBJECTS = [ { id: "item-master", name: "Item Master", req: ["Item Number", "Description", "Item Type", "Unit of Measure"], opt: ["Standard Cost", "Lead Time", "Reorder Point", "Safety Stock", "MOQ", "Lot Size", "Default Supplier"], sample: [["FG-100", "Conveyor Drive Unit", "Finished Good", "ea", "450", "7", "4", "2"]], unlocks: "Everything — this is the foundation." }, { id: "bom", name: "Bills of Materials", req: ["Parent Item", "Component Item", "Quantity Per"], opt: ["Scrap %", "Revision", "Effective Date"], sample: [["FG-100", "SA-200", "1", "2"], ["SA-200", "RM-430", "4", "3"]], unlocks: "MRP explosion, picking, where-used." }, { id: "inventory", name: "Inventory Balances", req: ["Item Number", "Quantity On Hand"], opt: ["Location", "Lot Number"], sample: [["FG-100", "6", "FG-STOCK"]], unlocks: "Dashboard, shortages, MRP netting." }, { id: "sales-orders", name: "Sales Orders", req: ["Order Number", "Item", "Quantity", "Due Date"], opt: ["Customer", "Notes"], sample: [["SO-5001", "FG-100", "8", "2026-08-15", "Acme Industrial"]], unlocks: "Demand for the MRP engine." }, { id: "suppliers", name: "Suppliers", req: ["Supplier ID", "Name"], opt: ["Lead Time", "Currency", "Email", "Phone"], sample: [["SUP-200", "SteelSource Metals", "10", "USD"]], unlocks: "PO routing and lead-time planning." }, { id: "customers", name: "Customers", req: ["Customer ID", "Name"], opt: ["Contact", "Email"], sample: [["CUST-100", "Acme Industrial"]], unlocks: "Sales order entry." }, { id: "open-pos", name: "Open Purchase Orders", req: ["PO Number", "Item", "Quantity", "Due Date"], opt: ["Supplier", "Received Qty", "Status"], sample: [["PO-9001", "RM-400", "500", "2026-07-25", "SUP-200"]], unlocks: "Scheduled receipts in MRP netting." }, { id: "routings", name: "Routings", req: ["Item", "Sequence", "Work Center"], opt: ["Setup Minutes", "Run Minutes Per Unit"], sample: [["FG-100", "10", "WC-ASM", "30", "45"]], unlocks: "Shop floor operations and scheduling." } ]; function Wizard({ setView }) { const [step, setStep] = useState(0); const steps = [ { q: "Where does production planning live today?", opts: ["One big Excel workbook", "Several linked spreadsheets", "Paper + whiteboard", "An old system we hate"] }, { q: "Do you have a parts list with costs and lead times?", opts: ["Yes, exportable to Excel", "Yes, but scattered", "Partially", "Not really"] }, { q: "Are your BOMs written down?", opts: ["Yes, in spreadsheets", "Yes, in CAD/drawings", "In people's heads", "Some of each"] } ]; const s = steps[step]; return (

{steps.map((_, i) =>

)}

{step < steps.length ? (

{s.q}

{s.opts.map(o => )}

{step > 0 && }

) : (

Load in this order

Each object below has a downloadable template. Fill from your spreadsheets, upload through the platform Data page, and the AI maps your columns.

{["item-master", "bom", "inventory", "sales-orders", "suppliers"].map((id, i) => { const o = DATA_OBJECTS.find(x => x.id === id); return (

{i + 1} {o.name}{o.unlocks}

); })}

)}

); } function DataObjects() { const [sel, setSel] = useState(null); const dl = o => { const header = [...o.req, ...o.opt]; csvOut(o.id + "-template", header, o.sample); }; const a = sel ? DATA_OBJECTS.find(o => o.id === sel) : null; return ( <>

{DATA_OBJECTS.map(o => ( ))}

{a && (

{a.name}

Required

{a.req.map(f =>

• {f}

)}

Optional

{a.opt.map(f =>

• {f}

)}

Upload via the platform Data page (top nav) — the AI reads your headers and maps them automatically. This app picks up the data on next load.

)} ); } function Readiness({ dataMode }) { const F = [ ["Dashboard & shortages", ["item-master", "inventory"]], ["MRP Engine", ["item-master", "inventory", "bom", "sales-orders"]], ["Purchase orders & receiving", ["item-master", "suppliers"]], ["Work orders & picking", ["item-master", "bom"]], ["Shop floor", ["item-master", "bom", "routings"]], ["Supplier performance", ["suppliers", "open-pos"]] ]; const ready = dataMode === "real"; return (

{F.map(([name, needs]) => (

{name} Needs: {needs.map(n => DATA_OBJECTS.find(o => o.id === n)?.name ?? n).join(", ")}

))}

); } function Integrations() { const LIVE = [["Excel / CSV upload", "Drop your spreadsheets on the platform Data page — AI maps the columns."], ["Downloadable templates", "Every data object has a template with headers and sample rows."], ["Manual entry", "Add sales orders, receive POs, and issue materials directly in the app."]]; const PLAN = [["REST API push", "ERP pushes items, orders, and inventory automatically."], ["QuickBooks / Xero sync", "Items and POs flow to accounting without re-keying."], ["Scheduled file drop", "A watched folder ingests nightly ERP exports."], ["Barcode scanning", "Receive and issue with a phone camera."]]; return ( <> {LIVE.map(([n, d]) => (

{n}

{d}

))}

Roadmap

{PLAN.map(([n, d]) => (

{n}

{d}

))} ); }