import React, { useEffect, useMemo, useState } from "react"; import { ResponsiveContainer, ComposedChart, Bar, Line, XAxis, YAxis, Tooltip, Legend, Cell, ReferenceLine, ScatterChart, Scatter } from "recharts"; import { obl, loadState, saveState } from "./obl"; import { C, S, MONO } from "./ui"; import { PLANT, AREAS, LINES, MACHINES, SHIFTS, PRODUCTS, CHARACTERISTICS, INSPECTION_TYPES, INSPECTION_PLANS, DEFECT_CODES, SUPPLIERS, GAUGES, OPERATORS, buildSample, adaptRealProducts } from "./data"; import { pct, subgroups, xbarR, iMR, capability, weRules, fpy, defectPareto, buildAlerts } from "./engine"; const NS = "qms-spc"; const day = 86400_000; const iso = t => new Date(t).toISOString().slice(0, 10); const EMPTY_DELTA = { measurements: [], inspections: [], ncrs: [], ncrPatch: {}, capas: [], capaPatch: {}, config: {}, log: [] }; const NAV_SECTIONS = [ { label: "Overview", color: "#2563EB", items: [["dashboard", "📊", "Dashboard"], ["alerts", "🔔", "Alerts"], ["reports", "📋", "Reports"]] }, { label: "Inspections", color: "#16A34A", items: [["plans", "📝", "Inspection Plans"], ["execute", "🔬", "Record Inspection"], ["results", "📑", "Inspection Results"]] }, { label: "SPC", color: "#D97706", items: [["charts", "📈", "Control Charts"], ["capability", "🎯", "Process Capability"]] }, { label: "Quality", color: "#DC2626", items: [["ncrs", "⚠️", "Nonconformances"], ["capas", "🔧", "CAPA Tracking"], ["defects", "🔍", "Defect Analysis"]] }, { label: "Plant Assets", color: "#7C3AED", items: [["products", "📦", "Products"], ["chars", "📏", "Characteristics"], ["calibration", "🔧", "Calibration"], ["suppliers", "🏭", "Supplier Quality"]] }, { label: "Admin", color: "#EC4899", items: [["settings", "⚙️", "Settings"], ["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 isDemoPlant = (items ?? []).some(i => /^(RM|WIP|FG|MRO)-\d{3}$/.test(i.id ?? "")); const looksReal = Array.isArray(items) && items.length > 0 && !isDemoPlant; if (looksReal && adaptRealProducts(items)) { setBase({ measurements: [], inspections: [], ncrs: [], capas: [] }); 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 }); const world = useMemo(() => { if (!base) return null; const ncrs = [...base.ncrs, ...delta.ncrs].map(n => delta.ncrPatch[n.id] ? { ...n, ...delta.ncrPatch[n.id] } : n); const capas = [...base.capas, ...delta.capas].map(c => delta.capaPatch[c.id] ? { ...c, ...delta.capaPatch[c.id] } : c); return { measurements: [...base.measurements, ...delta.measurements], inspections: [...base.inspections, ...delta.inspections], ncrs, capas }; }, [base, delta]); const targets = { cpkMin: 1.33, fpyTarget: 95, ...(delta.config?.targets ?? {}) }; if (!world) return

Loading quality data…

; const V = { dashboard: Dashboard, alerts: Alerts, reports: Reports, plans: Plans, execute: Execute, results: Results, charts: Charts, capability: Capability, ncrs: Ncrs, capas: Capas, defects: Defects, products: ProductsMaster, chars: Chars, calibration: Calibration, suppliers: SupplierQuality, settings: Settings, audit: Audit, wizard: Wizard, objects: DataObjects, readiness: Readiness, integrations: Integrations }[view]; return (

Quality &

SPC System

{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] ?? ""}

Quality & SPC System · {PLANT.name}

{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 components ── */ const FooterBtn = ({ onClick, children }) => ; const btn = (bg, fg) => ({ background: bg, color: fg ?? "#FFF", 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 L = ({ l, children }) => {l}
{children}; const csvOut = (name, header, rows) => { const text = [header.join(","), ...rows.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 tt = { background: C.card, border: `1px solid ${C.line}`, color: C.text, fontSize: 12, borderRadius: 8 }; const cpkColor = v => v == null ? C.dim : v >= 1.67 ? C.green : v >= 1.33 ? C.blue : v >= 1.0 ? C.amber : C.red; /* ── Data banner / Welcome / Checklist / Help ── */ function DataBanner({ dataMode, setDataMode, setBase, setView }) { if (dataMode === "sample") return (

Exploring with sample data — 4 products, 8 characteristics, 30 days of SPC measurements, NCRs, and CAPAs. Every number is simulated.

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

Ready for your quality data

The Setup Wizard walks you through products, characteristics, and specs — then record inspections live or import history.

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

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

Welcome to your
Quality & SPC System

You're looking at a fully working quality system with real SPC — 4 products, 8 characteristics with spec limits, 30 days of measurements, control charts with Western Electric rules, and process capability. Explore everything. When you're ready, connect your own data and the sample disappears.

{[["1", "Explore", "Open Control Charts — pick a characteristic and watch the I-MR chart with live control limits and rule violations. Then check Process Capability for Cp/Cpk."], ["2", "Connect your data", "Go to Data Management → Setup Wizard. Define your products, characteristics with USL/LSL, and upload measurement history."], ["3", "Configure & go live", "Set your Cpk targets under Settings. Inspectors record measurements from any browser."]].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 control charts", done: true, hint: "SPC → Control Charts" }, { label: "Record an inspection", done: delta.inspections.length > 0, hint: "Inspections → Record Inspection", go: "execute" }, { label: "Review process capability", done: true, hint: "SPC → Process Capability", go: "capability" }, { label: "Disposition a nonconformance", done: Object.keys(delta.ncrPatch).length > 0, hint: "Quality → Nonconformances", go: "ncrs" }, { label: "Update a CAPA", done: Object.keys(delta.capaPatch).length > 0, hint: "Quality → CAPA Tracking", go: "capas" }, { label: "Set Cpk targets", done: !!delta.config?.targets, hint: "Admin → Settings", go: "settings" }, { label: "Connect your quality 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: 8, 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: "Quality KPIs at a glance: first-pass yield, Cpk by characteristic, open NCRs and CAPAs, defect rate, inspection volume.", alerts: "SPC rule violations, low Cpk, out-of-spec measurements, overdue CAPAs, calibration due. Each alert tells you where to act.", reports: "One-click CSV exports: inspection results, SPC summary, capability, defect Pareto, NCR, CAPA, supplier quality, calibration.", plans: "Inspection plans by product — which characteristics to measure, how often, with what device, against what spec.", execute: "Record measurements against a characteristic. Values are validated against USL/LSL and feed the control charts in real time.", results: "Every inspection with pass/fail, linked measurements, and drill-to-chart. Failed inspections are the intake for NCRs.", charts: "The SPC truth: I-MR or X-bar/R charts with automatic control-limit calculation and Western Electric rule detection. Pick a characteristic; the chart builds from all its measurements.", capability: "Process capability indices: Cp, Cpk (short-term), Pp, Ppk (long-term), sigma level. Color-coded against your Cpk target.", ncrs: "Nonconformance records: defect, quantity affected, containment, disposition, root cause, status. Create NCRs from failed inspections or manually.", capas: "Corrective and preventive actions with 5-Why root cause analysis, owner, due date, verification, and effectiveness review.", defects: "Defect Pareto by quantity affected — which defects are costing the most. Drives NCR and CAPA prioritization.", products: "Product master with revision, customer, drawing. The basis for inspection plans and SPC grouping.", chars: "Quality characteristics with USL/LSL/nominal/target — the spec limits that define in-spec vs out-of-spec and feed capability math.", calibration: "Gauge and measuring equipment status: calibration due dates, intervals, overdue flags.", suppliers: "Supplier quality: approved status, certification expiry, quality rating, material-related NCRs.", settings: "Cpk target, FPY target, custom defect codes.", audit: "Every inspection, NCR, CAPA, and setting change — timestamped.", wizard: "Guided setup: products, characteristics, spec limits, measurement history.", objects: "Data objects with required fields and downloadable CSV templates.", readiness: "Which features are live with your current data.", integrations: "What's live (manual entry, CSV upload) and what's on the roadmap (CMM feeds, digital gauge APIs, MES/ERP)." }; function HelpPanel({ view, close }) { return (

❓ What am I looking at?

{HELP[view] ?? ""}

); } /* ── Dashboard ── */ function Dashboard({ world, targets, setView }) { const fpyVal = fpy(world.inspections); const caps = CHARACTERISTICS.map(ch => ({ ch, cap: capability(world.measurements, ch.id) })).filter(x => x.cap); const minCpk = caps.length ? Math.min(...caps.map(x => x.cap.cpk)) : null; const avgCpk = caps.length ? Math.round(caps.reduce((s, x) => s + x.cap.cpk, 0) / caps.length * 100) / 100 : null; const openNcrs = world.ncrs.filter(n => n.status !== "Closed").length; const openCapas = world.capas.filter(c => c.status !== "Closed").length; const overdueCapas = world.capas.filter(c => c.status !== "Closed" && c.dueDate < iso(Date.now())).length; const last7 = world.inspections.filter(i => i.date >= iso(Date.now() - 7 * day)); const failRate = last7.length ? last7.filter(i => i.result === "Fail").length / last7.length : null; const oos = world.measurements.filter(m => m.date >= iso(Date.now() - 7 * day) && !m.pass).length; const calDue = GAUGES.filter(g => g.calDue <= iso(Date.now())).length; return ( <>

= targets.fpyTarget ? C.green : C.amber} sub={`${world.inspections.length} inspections`} onClick={() => setView("results")} /> setView("capability")} /> x.cap.cpk === minCpk)?.ch.name : ""} onClick={() => setView("capability")} /> 5 ? C.red : C.text} onClick={() => setView("ncrs")} /> setView("capas")} /> 0.05 ? C.red : C.green} sub={`${last7.length} inspections`} /> 10 ? C.red : C.text} onClick={() => setView("charts")} /> setView("calibration")} />

Cpk by characteristic — target {targets.cpkMin}

({ name: x.ch.name.slice(0, 18), cpk: x.cap.cpk }))}> {caps.map((x, i) => )}

); } /* ── Alerts ── */ function Alerts({ world, targets, setView }) { const list = buildAlerts(world.measurements, world.inspections, world.ncrs, world.capas, targets); const SEVC = { critical: C.red, high: C.amber, medium: C.sky }; const GOTO = { "SPC rule violation": "charts", "Low Cpk": "capability", "Out-of-spec measurements": "results", "Open nonconformances": "ncrs", "Overdue CAPAs": "capas", "Calibration due/overdue": "calibration", "Supplier cert expiring": "suppliers" }; return list.length === 0 ?

All clear — no alerts.

: ( <>{list.map(a => (

{a.kind} {a.subject} {a.detail}

))} ); } /* ── Reports ── */ function Reports({ world }) { const R = [ ["Inspection results", () => csvOut("inspections", ["Date", "Shift", "Operator", "Product", "Char", "Type", "Result", "Values"], world.inspections.map(i => [i.date, i.shiftId, i.operator, i.productId, i.charId, i.type, i.result, (i.values ?? []).join(";")] ))], ["SPC measurements", () => csvOut("spc-data", ["Date", "Char", "Product", "Machine", "Operator", "Value", "Pass", "Lot", "Group"], world.measurements.map(m => [m.date, m.charId, m.productId, m.machineId, m.operator, m.value, m.pass ? "Y" : "N", m.lot, m.groupId]))], ["Process capability", () => { const caps = CHARACTERISTICS.map(ch => ({ ch, cap: capability(world.measurements, ch.id) })).filter(x => x.cap); csvOut("capability", ["Char", "N", "Mean", "StdDev", "Cp", "Cpk", "Pp", "Ppk", "Sigma", "OOS"], caps.map(x => [x.ch.name, x.cap.n, x.cap.mean, x.cap.stddev, x.cap.cp, x.cap.cpk, x.cap.pp, x.cap.ppk, x.cap.sigma, x.cap.oosCount])); }], ["Defect Pareto", () => { const dp = defectPareto(world.ncrs); csvOut("defect-pareto", ["Defect", "Events", "Qty affected", "Cum %"], dp.map(d => [d.defect, d.count, d.qty, d.cumPct])); }], ["Nonconformances", () => csvOut("ncrs", ["Date", "Product", "Defect", "Qty", "Severity", "Disposition", "Status"], world.ncrs.map(n => [n.date, n.productId, n.defectCode, n.qtyAffected, n.severity, n.disposition, n.status]))], ["CAPA status", () => csvOut("capas", ["Date", "Product", "Issue", "Root cause", "Corrective", "Owner", "Due", "Status"], world.capas.map(c => [c.date, c.productId, c.issue, c.rootCause, c.corrective, c.owner, c.dueDate, c.status]))], ["Supplier quality", () => csvOut("suppliers", ["Supplier", "Material", "Approved", "Cert expiry", "Rating"], SUPPLIERS.map(s => [s.name, s.material, s.approved ? "Y" : "N", s.certExpiry, s.rating]))], ["Calibration status", () => csvOut("calibration", ["Gauge", "Type", "Serial", "Cal due", "Status", "Last cal"], GAUGES.map(g => [g.name, g.type, g.serial, g.calDue, g.status, g.lastCal]))] ]; return (

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

{name}

))}

); } /* ── Inspection Plans ── */ function Plans() { return ( <> {INSPECTION_PLANS.map(ip => { const prod = PRODUCTS.find(p => p.id === ip.productId); const chars = ip.charIds.map(cid => CHARACTERISTICS.find(c => c.id === cid)).filter(Boolean); return (

{prod?.name ?? ip.productId}

{ip.id} · {ip.frequency}

{ip.instructions}

{chars.map(ch => ( {ch.name} {ch.nominal} {ch.uom} {ch.lsl} {ch.usl} {ch.method} {ch.device} ))}

); })} ); } /* ── Record Inspection ── */ function Execute({ delta, act }) { const [f, setF] = useState({ charId: CHARACTERISTICS[0]?.id ?? "", type: "In-Process", operator: OPERATORS[0], machineId: MACHINES[0]?.id ?? "", lot: "", values: "" }); const ch = CHARACTERISTICS.find(c => c.id === f.charId); const [err, setErr] = useState(null); const submit = () => { if (!ch) { setErr("Pick a characteristic"); return; } const vals = f.values.split(/[,;\s]+/).map(Number).filter(v => !isNaN(v)); if (!vals.length) { setErr("Enter at least one measurement value"); return; } setErr(null); const date = iso(Date.now()); const groupId = "SG-U" + Date.now(); const ms = vals.map((v, i) => ({ id: "MS-U" + Date.now() + "-" + i, charId: ch.id, productId: ch.productId, date, shiftId: new Date().getHours() < 14 ? "A" : "B", operator: f.operator, machineId: f.machineId, lot: f.lot || "LOT-" + date.replace(/-/g, ""), value: v, groupId, groupIndex: i, pass: v >= ch.lsl && v <= ch.usl })); const allPass = ms.every(m => m.pass); const insp = { id: "INS-U" + Date.now(), date, shiftId: ms[0].shiftId, operator: f.operator, machineId: f.machineId, productId: ch.productId, lot: ms[0].lot, type: f.type, charId: ch.id, values: vals, result: allPass ? "Pass" : "Fail", comment: allPass ? "" : "Out-of-spec detected" }; act({ measurements: [...delta.measurements, ...ms], inspections: [...delta.inspections, insp] }, `Inspection ${insp.id}: ${ch.name} ${vals.join(", ")} → ${insp.result}`); setF(x => ({ ...x, values: "" })); }; return (

Record measurements

setF({ ...f, charId: v })} options={CHARACTERISTICS.map(c => [c.id, `${c.name} (${c.productId})`])} w={280} /> setF({ ...f, type: v })} options={INSPECTION_TYPES.map(t => [t, t])} w={140} /> setF({ ...f, operator: v })} options={OPERATORS.map(o => [o, o])} w={140} /> setF({ ...f, machineId: v })} options={MACHINES.map(m => [m.id, m.name])} w={160} /> setF({ ...f, lot: e.target.value })} placeholder="auto" style={{ width: 130 }} />

{ch && (

{ch.name} — nominal {ch.nominal} {ch.uom}, spec [{ch.lsl}, {ch.usl}], sample size {ch.sampleSize}, method: {ch.method}

)} setF({ ...f, values: e.target.value })} placeholder={ch ? `e.g. ${ch.nominal} ${ch.nominal + 0.02} ${ch.nominal - 0.01}` : ""} style={{ width: "100%", marginTop: 4 }} /> {err &&

{err}

}

); } /* ── Inspection Results ── */ function Results({ world, setView }) { const rows = world.inspections.slice().sort((a, b) => b.date.localeCompare(a.date)).slice(0, 40); const passRate = world.inspections.length ? pct(fpy(world.inspections)) : "—"; return ( <>

i.result === "Fail").length} tone={C.red} />

{rows.map(i => ( {i.date} {PRODUCTS.find(p => p.id === i.productId)?.name ?? i.productId} {CHARACTERISTICS.find(c => c.id === i.charId)?.name ?? i.charId} {i.operator} {(i.values ?? []).map(v => v.toFixed(2)).join(", ")} ))} ); } /* ── SPC Control Charts ── */ function Charts({ world }) { const [charId, setCharId] = useState(CHARACTERISTICS[0]?.id ?? ""); const [chartType, setChartType] = useState("imr"); const ch = CHARACTERISTICS.find(c => c.id === charId); const sgs = subgroups(world.measurements, charId); const xbr = xbarR(sgs); const allVals = world.measurements.filter(m => m.charId === charId).sort((a, b) => a.date.localeCompare(b.date) || a.groupId.localeCompare(b.groupId)).map(m => m.value); const imrData = iMR(allVals); const viols = weRules(sgs, xbr); // chart data const iData = allVals.map((v, i) => ({ i: i + 1, value: v })); const mrData = (imrData.mrs ?? []).map((v, i) => ({ i: i + 2, mr: v })); const xbarData = sgs.map((g, i) => ({ i: i + 1, mean: g.mean, label: g.date.slice(5) })); const rData = sgs.map((g, i) => ({ i: i + 1, range: g.range })); return ( <>

[c.id, `${c.name} (${c.productId})`])} w={300} /> {ch && Spec: [{ch.lsl}, {ch.usl}] {ch.uom} · nominal {ch.nominal} · {allVals.length} values · {sgs.length} subgroups}

{viols.length > 0 && (

⚠ SPC rule violations detected — {viols.length} violation(s)

{viols.slice(0, 5).map((v, i) => (

{v.desc} — subgroup {v.index + 1}

))}

)} {chartType === "imr" ? ( <>

Individual values (I chart) — {allVals.length} measurements

{imrData.iUCL != null && } {imrData.iLCL != null && } {imrData.mean != null && } {ch && } {ch && }

Moving Range (MR chart)

{imrData.mrUCL != null && } {imrData.mrMean != null && }

) : ( <>

X-bar chart — {sgs.length} subgroups (n={sgs[0]?.n ?? "?"})

{xbr.xbarUCL != null && } {xbr.xbarLCL != null && } {xbr.xbarMean != null && }

R chart (range)

{xbr.rUCL != null && } {xbr.rMean != null && }

)} ); } /* ── Process Capability ── */ function Capability({ world, targets }) { const caps = CHARACTERISTICS.map(ch => ({ ch, cap: capability(world.measurements, ch.id) })).filter(x => x.cap); return ( <> {caps.sort((a, b) => a.cap.cpk - b.cap.cpk).map(({ ch, cap }) => ( {ch.name} {PRODUCTS.find(p => p.id === ch.productId)?.name ?? ch.productId} [{ch.lsl}, {ch.usl}] {ch.uom} {cap.mean} {cap.sigmaW} {cap.cp} {cap.cpk} {cap.pp} {cap.ppk} {cap.sigma}σ {cap.n} {cap.oosCount} ))} ); } /* ── NCRs ── */ function Ncrs({ world, delta, act }) { const [f, setF] = useState({ productId: PRODUCTS[0]?.id ?? "", defectCode: DEFECT_CODES[0]?.id ?? "", qty: 1, severity: "Major", containment: "", lot: "" }); const addNcr = () => act({ ncrs: [...delta.ncrs, { id: "NCR-U" + Date.now(), date: iso(Date.now()), productId: f.productId, lot: f.lot, machineId: "", charId: "", defectCode: f.defectCode, qtyAffected: Number(f.qty), severity: f.severity, rootCause: "", containment: f.containment, disposition: "", owner: OPERATORS[0], status: "Open", inspectionId: "" }] }, `NCR created: ${f.defectCode} on ${f.productId}, ${f.qty} pcs`); const patch = (ncr, p) => act({ ncrPatch: { ...delta.ncrPatch, [ncr.id]: { ...(delta.ncrPatch[ncr.id] ?? {}), ...p } } }, `NCR ${ncr.id}: ${Object.keys(p).join(", ")} updated`); const rows = world.ncrs.slice().sort((a, b) => b.date.localeCompare(a.date)).slice(0, 30); return ( <>

setF({ ...f, productId: v })} options={PRODUCTS.map(p => [p.id, p.name])} /> setF({ ...f, defectCode: v })} options={DEFECT_CODES.map(d => [d.id, d.name])} w={200} /> setF({ ...f, qty: e.target.value })} style={{ width: 70 }} /> setF({ ...f, severity: v })} options={[["Minor", "Minor"], ["Major", "Major"], ["Critical", "Critical"]]} w={110} /> setF({ ...f, containment: e.target.value })} placeholder="Segregated…" style={{ width: 180 }} /> setF({ ...f, lot: e.target.value })} placeholder="optional" style={{ width: 130 }} />

{rows.map(n => ( {n.date} {PRODUCTS.find(p => p.id === n.productId)?.name ?? n.productId} {DEFECT_CODES.find(d => d.id === n.defectCode)?.name ?? n.defectCode} {n.qtyAffected} patch(n, { disposition: v })} options={[["", "—"], ["Use as-is", "Use as-is"], ["Rework", "Rework"], ["Scrap", "Scrap"], ["Return to supplier", "Return to supplier"]]} w={160} /> patch(n, { status: v })} options={[["Open", "Open"], ["Under review", "Under review"], ["Closed", "Closed"]]} w={130} /> {n.status !== "Closed" && } ))} ); } /* ── CAPA with 5-Why ── */ function Capas({ world, delta, act }) { const patch = (c, p) => act({ capaPatch: { ...delta.capaPatch, [c.id]: { ...(delta.capaPatch[c.id] ?? {}), ...p } } }, `CAPA ${c.id}: ${Object.keys(p).join(", ")} updated`); const [sel, setSel] = useState(null); const rows = world.capas.slice().sort((a, b) => b.date.localeCompare(a.date)); const today = iso(Date.now()); const ca = sel ? rows.find(c => c.id === sel) : null; return ( <>

c.status !== "Closed").length} tone={C.amber} /> c.status !== "Closed" && c.dueDate < today).length} tone={C.red} /> c.status === "Closed").length} tone={C.green} />

{rows.slice(0, 25).map(c => ( {c.date} {PRODUCTS.find(p => p.id === c.productId)?.name ?? c.productId} {c.issue} {c.rootCause || "—"} {c.owner} {c.dueDate} ))} {ca && (

CAPA {ca.id} — 5 Why Analysis

{(ca.whys ?? ["", "", "", "", ""]).map((w, i) => (

Why {i + 1}? { const ws = [...(ca.whys ?? ["", "", "", "", ""])]; ws[i] = e.target.value; patch(ca, { whys: ws }); }} style={{ flex: 1 }} placeholder={i === 0 ? "What happened?" : "Why did that happen?"} />

))}

patch(ca, { rootCause: e.target.value })} style={{ width: "100%" }} /> patch(ca, { corrective: e.target.value })} style={{ width: "100%" }} /> patch(ca, { preventive: e.target.value })} style={{ width: "100%" }} /> patch(ca, { verification: e.target.value })} style={{ width: "100%" }} />

patch(ca, { status: v })} options={[["Open", "Open"], ["In progress", "In progress"], ["Pending verification", "Pending verification"], ["Closed", "Closed"]]} w={180} /> patch(ca, { owner: v })} options={OPERATORS.map(o => [o, o])} w={160} /> patch(ca, { dueDate: e.target.value })} />

)} ); } /* ── Defect Analysis ── */ function Defects({ world }) { const dp = defectPareto(world.ncrs); const total = dp.reduce((s, d) => s + d.qty, 0); return ( <>

Defect Pareto — by quantity affected

{dp.slice(0, 8).map((_, i) => )}

{dp.map(d => ( {d.defect} {d.count} {d.qty} {d.cumPct}% ))} ); } /* ── Plant Assets screens ── */ function ProductsMaster() { return ( {PRODUCTS.map(p => ( {p.id} {p.name} {p.rev} {p.customer} {p.family} {p.drawing} ))} ); } function Chars() { return ( {CHARACTERISTICS.map(ch => ( {ch.id} {ch.name} {ch.productId} {ch.nominal} {ch.lsl} {ch.usl} {ch.uom} {ch.method} {ch.device} {ch.frequency} {ch.sampleSize} ))} ); } function Calibration() { const today = iso(Date.now()); return ( <> g.calDue <= today).length} calibration due or overdue.`} why="An uncalibrated gauge makes every measurement it touches suspect. One overdue calibration can invalidate an entire lot of inspections." impact="Customer quality notifications, containment sorts, and potential warranty claims — all from a missed cal date." doNow="Send overdue gauges to calibration now. Block their use until the cert is current." ifNot="Every inspection since the due date is technically unverified." /> {GAUGES.map(g => ( {g.name} {g.type} {g.serial} {g.calDue} {g.calInterval}d {g.lastCal} ))} ); } function SupplierQuality({ world }) { const today = iso(Date.now()); return ( {SUPPLIERS.map(s => { const matNcrs = world.ncrs.filter(n => { const dc = DEFECT_CODES.find(d => d.id === n.defectCode); return dc?.category === "Material"; }); return ( {s.name} {s.material} {s.certExpiry} = 90 ? C.green : s.rating >= 80 ? C.amber : C.red }}>{s.rating}% {matNcrs.length} ); })} ); } /* ── Admin ── */ function Settings({ delta, act, targets }) { return (

{[["cpkMin", "Minimum Cpk target", "Characteristics below this are flagged. 1.33 is standard; automotive often requires 1.67."], ["fpyTarget", "First Pass Yield target (%)", "Inspection pass rate target. 95% is a common starting point."]].map(([k, label, help]) => (

{label}

{help}

act({ config: { ...delta.config, targets: { ...(delta.config?.targets ?? {}), [k]: Number(e.target.value) } } }, `${k} → ${e.target.value}`)} style={{ width: 90, textAlign: "right", fontWeight: 700, fontFamily: MONO }} />

))}

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

No actions yet — inspections, NCRs, and CAPA updates land here.

: (

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

{l.ts}{l.text}

))}

); } /* ── Data Management ── */ const DATA_OBJECTS = [ { id: "products", name: "Products", req: ["Part Number", "Name", "Rev"], opt: ["Customer", "Family", "Drawing"], sample: [["P-25BE", "Bracket 25BE", "C", "Stellantis", "Brackets", "DWG-25BE-C"]], unlocks: "Product master, inspection plans, SPC grouping." }, { id: "chars", name: "Characteristics", req: ["Char ID", "Name", "Product", "Nominal", "USL", "LSL"], opt: ["UOM", "Method", "Device", "Frequency", "Sample size"], sample: [["CH-001", "Draw-in depth", "P-25BE", "8.00", "9.00", "7.00", "mm", "Caliper", "Mitutoyo", "Every 50", "5"]], unlocks: "Spec limits, SPC charts, capability." }, { id: "measurements", name: "Measurement history", req: ["Date", "Char ID", "Value"], opt: ["Machine", "Operator", "Shift", "Lot"], sample: [["2026-07-01", "CH-001", "8.02", "M-101", "J. Martinez", "A", "LOT-001"]], unlocks: "Control charts, capability, trend analysis from day one." }, { id: "gauges", name: "Gauges & equipment", req: ["Gauge ID", "Name", "Type", "Cal due"], opt: ["Serial", "Interval days", "Last cal"], sample: [["GA-001", "Mitutoyo caliper", "Caliper", "2026-08-15", "MIT-44210", "90", "2026-05-17"]], unlocks: "Calibration tracking and overdue alerts." }, { id: "suppliers", name: "Suppliers", req: ["Supplier ID", "Name", "Material"], opt: ["Approved", "Cert expiry", "Rating"], sample: [["SUP-01", "Midwest Steel", "HSLA 340", "Y", "2027-03-15", "94"]], unlocks: "Supplier quality scoring and certification tracking." } ]; function Wizard({ setView }) { const [step, setStep] = useState(0); const steps = [ { q: "How are inspections recorded today?", opts: ["Paper forms", "Excel spreadsheet", "An old QMS nobody trusts", "They aren't"] }, { q: "Do you have spec limits (USL/LSL) documented?", opts: ["Yes, in control plans", "In drawings only", "In people's heads", "No"] }, { q: "Are you doing SPC today?", opts: ["Yes, in Excel", "Occasionally, by hand", "Only when the customer asks", "No"] } ]; const s = steps[step]; return (

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

)}

{step < steps.length ? (

{s.q}

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

{step > 0 && }

) : (

Load in this order

Products and characteristics first — that alone lights up inspection recording and SPC. Measurement history gives you trends on day one.

{DATA_OBJECTS.map((o, i) => (

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

))}

)}

); } function DataObjects() { const [sel, setSel] = useState(null); 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}

)}

)} ); } function Readiness({ dataMode }) { const F = [["SPC control charts & capability", ["products", "chars", "measurements"]], ["Inspection recording", ["products", "chars"]], ["NCR & CAPA tracking", ["products"]], ["Defect Pareto", ["products"]], ["Calibration management", ["gauges"]], ["Supplier quality", ["suppliers"]]]; 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 = [["Manual measurement entry", "Record values against any characteristic from any browser. Results feed SPC charts immediately."], ["CSV upload", "Products, characteristics, spec limits, and measurement history through the platform Data page."], ["Downloadable templates", "Every data object ships a template with headers and sample rows."]]; const PLAN = [["CMM / coordinate measurement machine", "Automatic measurement import from Zeiss, Hexagon, Mitutoyo CMMs."], ["Digital gauge API", "Bluetooth calipers and micrometers push readings directly."], ["Vision inspection system", "Automated pass/fail from camera-based inspection."], ["MES / ERP integration", "Production orders, lot numbers, and quality holds sync automatically."], ["Document management", "Revision-controlled procedures, work instructions, and control plans attached to products."]]; return ( <> {LIVE.map(([n, d]) => (

{n}

{d}

))}

Roadmap

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

{n}

{d}

))} ); }