// OEE Tracking System — live machine monitoring, downtime truth, and the // real OEE math for small and mid-sized plants. Console style; decisions // and entries persist via the App State Store. import React, { useEffect, useMemo, useState } from "react"; import { ResponsiveContainer, ComposedChart, Bar, Line, XAxis, YAxis, Tooltip, Legend, Cell } from "recharts"; import { obl, loadState, saveState } from "./obl"; import { C, S, MONO } from "./ui"; import { PLANT, AREAS, LINES, MACHINES, SHIFTS, PRODUCTS, PLANNED_MIN, DT_CATEGORIES, DT_REASONS, DEPTS, SCRAP_REASONS, buildSample, adaptRealMachines, adaptRealDowntime } from "./data"; import { pct, oeeOfRun, aggregate, groupOee, trend, DIMENSIONS, downtimePareto, mtbfMttr, buildAlerts, validateCounts, validateDowntime } from "./engine"; const NS = "oee-tracker"; const day = 86400_000; const iso = t => new Date(t).toISOString().slice(0, 10); const EMPTY_DELTA = { runs: [], downtime: [], dtPatch: {}, changeovers: [], scrapEntries: [], hourly: {}, statusPatch: {}, targets: {}, config: {}, log: [] }; const STATUSES = ["Running", "Down", "Idle", "Setup", "Changeover", "Planned Stop", "Maintenance", "Offline"]; const STATUS_COLORS = { Running: C.green, Down: C.red, Idle: C.dim, Setup: C.sky, Changeover: C.purple, "Planned Stop": C.amber, Maintenance: C.amber, Offline: C.dim }; const NAV_SECTIONS = [ { label: "Overview", color: "#2563EB", items: [["live", "📡", "Live Monitoring"], ["alerts", "🔔", "Alerts"], ["reports", "📋", "Reports"]] }, { label: "Production", color: "#16A34A", items: [["runs", "🏁", "Production Runs"], ["hourly", "⏱️", "Hourly Tracking"], ["scrap", "♻️", "Scrap"], ["changeovers", "🔄", "Changeovers"]] }, { label: "Analysis", color: "#D97706", items: [["oee", "📊", "OEE Analysis"], ["downtime", "📉", "Downtime Analysis"]] }, { label: "Plant Assets", color: "#7C3AED", items: [["structure", "🏭", "Plant Structure"], ["products", "📦", "Products & Cycle Times"], ["shifts", "🕐", "Shifts"]] }, { label: "Admin & Settings", color: "#EC4899", items: [["targets", "🎯", "Targets"], ["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("live"); 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 [tick, setTick] = useState(0); const [showWelcome, setShowWelcome] = useState(true); const [showHelp, setShowHelp] = useState(false); const [showChecklist, setShowChecklist] = useState(false); useEffect(() => { (async () => { try { const [machines, lines, dts] = await Promise.all([ obl("/machines").catch(() => null), obl("/lines").catch(() => null), obl("/downtime").catch(() => null) ]); const isDemoPlant = (machines ?? []).some(m => /^m-(weld|press|torque|vision|conv|booth|oven|robot)/.test(m.id ?? "")); const looksReal = Array.isArray(machines) && machines.length > 0 && !isDemoPlant && !machines.some(m => /^M-\d{3}$/.test(m.id ?? "")); if (looksReal) { adaptRealMachines(machines, lines); setBase({ runs: [], downtime: adaptRealDowntime(dts), changeovers: [], live: Object.fromEntries(machines.map(m => [m.id ?? m.name, m.status === "down" ? "Down" : m.status === "running" ? "Running" : "Idle"])) }); 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"); } })(); }, []); // live board heartbeat — counts derive from clock, so the board moves useEffect(() => { const t = setInterval(() => setTick(x => x + 1), 5000); return () => clearInterval(t); }, []); 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 dt = [...base.downtime, ...delta.downtime].map(e => delta.dtPatch[e.id] ? { ...e, ...delta.dtPatch[e.id] } : e); return { runs: [...base.runs, ...delta.runs], downtime: dt, changeovers: [...base.changeovers, ...delta.changeovers], live: { ...base.live, ...delta.statusPatch }, scrapEntries: delta.scrapEntries }; }, [base, delta]); const targets = { oee: 75, availability: 85, performance: 90, quality: 99, downtimeAlertMin: 20, ...(delta.targets ?? {}) }; // apply product patches (cycle time / target edits) onto the shared PRODUCTS objects useEffect(() => { const pp = delta.config?.productPatch ?? {}; for (const [id, patch] of Object.entries(pp)) { const p = PRODUCTS.find(x => x.id === id); if (p) Object.assign(p, patch); } }, [delta.config]); if (!world) return

Opening the plant…

; const V = { live: LiveBoard, alerts: Alerts, reports: Reports, runs: Runs, hourly: Hourly, scrap: Scrap, changeovers: Changeovers, oee: OeeAnalysis, downtime: DowntimeView, structure: Structure, products: Products, shifts: Shifts, targets: Targets, settings: Settings, audit: Audit, wizard: Wizard, objects: DataObjects, readiness: Readiness, integrations: Integrations }[view]; return (

OEE

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

OEE Tracking 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 ---------- */ 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 tt = { background: C.card, border: `1px solid ${C.line}`, color: C.text, fontSize: 12, borderRadius: 8 }; const oeeColor = (v, t) => v == null ? C.dim : v * 100 >= t ? C.green : v * 100 >= t - 10 ? C.amber : C.red; /* ---------- data banner / welcome / checklist / help ---------- */ function DataBanner({ dataMode, setDataMode, setBase, setView }) { if (dataMode === "sample") return (

Exploring with sample data — one plant, 4 lines, 10 machines, 14 days of runs and downtime. Every number is simulated.

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

Ready for your plant

The Setup Wizard walks you through machines, products, cycle times, and history — then enter runs live or import them.

); 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
OEE Tracking System

You're looking at a fully working OEE system loaded with realistic sample data — 4 lines, 10 machines, 3 shifts, 14 days of runs and downtime. Explore everything. When you're ready, connect your own plant and the sample disappears.

{[["1", "Explore", "Watch the live board move, drill into OEE by machine and shift, classify downtime — everything works."], ["2", "Connect your data", "Go to Data Management → Setup Wizard. Download CSV templates, fill from your records, upload. The AI maps your columns."], ["3", "Configure & go live", "Set your targets and cycle times under Admin. Operators enter runs 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: "Watch the live board", done: true, hint: "You're here" }, { label: "Classify an unclassified downtime event", done: Object.keys(delta.dtPatch).length > 0, hint: "Analysis → Downtime", go: "downtime" }, { label: "Enter a production run", done: delta.runs.length > 0, hint: "Production → Production Runs", go: "runs" }, { label: "Log hourly counts", done: Object.keys(delta.hourly).length > 0, hint: "Production → Hourly Tracking", go: "hourly" }, { label: "Set your OEE targets", done: Object.keys(delta.targets).length > 0, hint: "Admin → Targets", go: "targets" }, { label: "Review products & cycle times", done: !!delta.config?.productPatch, hint: "Plant Assets → Products", go: "products" }, { label: "Connect your plant 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 = { live: "The live board: every machine's current status, today's output vs target, live OEE, and elapsed time on any active downtime. Change a machine's status here — setting it to Down opens a downtime event automatically.", alerts: "Everything below target or out of pattern: OEE misses, availability/quality below target, unclassified downtime, long changeovers, excessive scrap. Each alert says where to act.", reports: "One-click CSV exports: OEE summary, downtime, Pareto, scrap, production, changeovers, comparisons.", runs: "The production run log — every run with its counts and its computed A/P/Q/OEE. Enter completed runs manually here; validation prevents impossible counts (good can't exceed total).", hourly: "Hour-by-hour plan vs actual for a machine's shift: enter good/scrap/rework per hour, see variance and cumulative, flag missed hours, add comments.", scrap: "Scrap by reason with a Pareto — record scrap entries against machine, product, and run; administrators can add custom reasons in Settings.", changeovers: "Changeover events: previous product, next product, target vs actual duration, delay reasons. Long changeovers surface in Alerts.", oee: "The core analysis: OEE = Availability × Performance × Quality, sliced by machine, line, product, shift, or day, over 7/14 days or everything. Colors compare against your targets. The trend chart shows all three components.", downtime: "Downtime truth: the Pareto ranks categories by total duration or event count, with average duration, MTBF, and MTTR. Classify unclassified events here — unclassified downtime is invisible downtime.", structure: "Plant → areas → lines → machines, with active flags. The live board and all analysis follow this structure.", products: "Products with ideal cycle times and per-shift targets — the denominators of Performance. Edit inline; the math updates immediately.", shifts: "Shift definitions with start/end, planned breaks, and overnight support. Planned production time = shift length minus breaks.", targets: "OEE, availability, performance, and quality targets. Every analysis screen colors against these.", settings: "Downtime alert threshold and custom scrap reasons.", audit: "Every entry, edit, and classification — timestamped.", wizard: "Plain-language setup: machines, products, cycle times, history.", objects: "Data objects with required fields and downloadable CSV templates.", readiness: "Which features are live with your current data.", integrations: "What's live (file upload, manual entry) and what's on the roadmap (machine APIs, PLC/MES feeds)." }; function HelpPanel({ view, close }) { return (

❓ What am I looking at?

{HELP[view] ?? ""}

); } /* ---------- Live Monitoring ---------- */ function currentShift() { const h = new Date().getHours(); return h >= 6 && h < 14 ? SHIFTS[0] : h >= 14 && h < 22 ? SHIFTS[1] : SHIFTS[2]; } function shiftElapsedMin() { const now = new Date(); const sh = currentShift(); const [hh, mm] = sh.start.split(":").map(Number); let start = new Date(now); start.setHours(hh, mm, 0, 0); if (start > now) start = new Date(start.getTime() - day); return Math.min(Math.max((now - start) / 60000, 0), 480); } function LiveBoard({ world, delta, act, targets, dataMode, tick }) { const sh = currentShift(); const elapsed = shiftElapsedMin(); const setStatus = (m, status) => { const patch = { statusPatch: { ...delta.statusPatch, [m.id]: status } }; if (status === "Down") { patch.downtime = [...delta.downtime, { id: "DT-L" + Date.now(), date: iso(Date.now()), machineId: m.id, lineId: m.lineId, shiftId: sh.id, runId: null, startTs: Date.now(), startMin: Math.round(elapsed), endMin: null, durationMin: 0, category: null, reason: null, planned: false, dept: "Production", comment: "" }]; act(patch, `${m.name} set to DOWN — downtime event opened (classify it on the Downtime screen)`); } else { // close any open event for this machine const open = [...world.downtime].find(e => e.machineId === m.id && e.endMin == null); if (open) { const dur = Math.max(Math.round((Date.now() - (open.startTs ?? Date.now())) / 60000), 1); patch.dtPatch = { ...delta.dtPatch, [open.id]: { endMin: (open.startMin ?? 0) + dur, durationMin: dur } }; } act(patch, `${m.name} → ${status}`); } }; return ( <> (world.live[m.id] ?? "Idle") === "Running").length} of ${MACHINES.filter(m => m.active).length} machines running · ${sh.name} · ${Math.round(elapsed)} min elapsed.`} why="OEE starts with truth about right now — status, output, and open downtime with a clock on it." impact="Every minute of unlogged downtime is availability loss nobody will ever explain." doNow="Down machines: classify the event. Running machines: watch actual track the target line." ifNot="The end-of-shift numbers become archaeology instead of a record." />

{MACHINES.filter(m => m.active).map(m => { const status = world.live[m.id] ?? "Idle"; const col = STATUS_COLORS[status] ?? C.dim; const prods = PRODUCTS.filter(p => p.machines.includes(m.id)); const prod = prods[0]; const prof = (world && dataMode === "sample") ? { perf: 0.85 } : { perf: 0 }; const rate = prod ? (60 / prod.idealCycleSec) : 0; const running = status === "Running"; const actual = dataMode === "sample" && running && prod ? Math.round(elapsed * rate * 0.85) : null; const target = prod ? Math.round((elapsed / 450) * prod.targetPerShift) : null; const openDt = world.downtime.find(e => e.machineId === m.id && e.endMin == null); const dtElapsed = openDt ? Math.max(Math.round((Date.now() - (openDt.startTs ?? Date.now())) / 60000), 0) : null; const liveOee = actual != null && target > 0 ? Math.min(actual / (elapsed * rate || 1), 1) * (elapsed > 0 ? Math.min(1, 0.97) : 1) : null; return (

{m.name}

{LINES.find(l => l.id === m.lineId)?.name ?? m.lineId} · {prod ? prod.name : "no product assigned"}

Output

{actual ?? "—"}

Target

{target ?? "—"}

Pace

0 ? (actual >= target ? C.green : C.amber) : C.dim }}>{actual != null && target > 0 ? Math.round((actual / target) * 100) + "%" : "—"}

{openDt && (

▼ DOWN {dtElapsed} min {openDt.category ?? "⚠ unclassified — go to Downtime"}

)} setStatus(m, v)} options={STATUSES.map(s2 => [s2, "Set: " + s2])} w={999} />

); })}

{dataMode === "sample" ? "Sample mode: output counts derive from the clock and refresh every 5 seconds — the board moves like a real one. " : ""} Setting a machine to Down opens a downtime event with a running clock; setting it back closes and times the event.

); } /* ---------- Production Runs ---------- */ function Runs({ world, delta, act, targets }) { const [f, setF] = useState({ machineId: MACHINES[0]?.id ?? "", productId: "", shiftId: "A", date: iso(Date.now()), plannedMin: PLANNED_MIN, runMin: 400, total: 0, good: 0, scrap: 0, rework: 0 }); const [err, setErr] = useState(null); const prods = PRODUCTS.filter(p => p.machines.includes(f.machineId)); useEffect(() => { if (!prods.find(p => p.id === f.productId)) setF(x => ({ ...x, productId: prods[0]?.id ?? "" })); }, [f.machineId]); // eslint-disable-line const addRun = () => { const v = validateCounts(f) ?? (f.runMin > f.plannedMin ? "Run time can't exceed planned time." : null) ?? (!f.productId ? "Pick a product." : null); if (v) { setErr(v); return; } setErr(null); const m = MACHINES.find(x => x.id === f.machineId); act({ runs: [...delta.runs, { id: "RUN-U" + Date.now(), date: f.date, shiftId: f.shiftId, machineId: f.machineId, lineId: m?.lineId ?? "", productId: f.productId, plannedMin: Number(f.plannedMin), runMin: Number(f.runMin), plannedQty: prods.find(p => p.id === f.productId)?.targetPerShift ?? 0, total: Number(f.total), good: Number(f.good), scrap: Number(f.scrap), rework: Number(f.rework), status: "Closed", scrapReasons: [] }] }, `Run entered: ${f.total} pcs (${f.good} good) on ${m?.name} ${f.date} ${f.shiftId}`); }; const rows = world.runs.slice().sort((a, b) => b.date.localeCompare(a.date)).slice(0, 40); return ( <>

Enter a completed run

setF({ ...f, machineId: v })} options={MACHINES.filter(m => m.active).map(m => [m.id, m.name])} /> setF({ ...f, productId: v })} options={prods.map(p => [p.id, p.name])} /> setF({ ...f, shiftId: v })} options={SHIFTS.map(s2 => [s2.id, s2.name])} w={110} /> setF({ ...f, date: e.target.value })} /> setF({ ...f, plannedMin: Number(e.target.value) })} style={{ width: 90 }} /> setF({ ...f, runMin: Number(e.target.value) })} style={{ width: 90 }} /> setF({ ...f, total: Number(e.target.value) })} style={{ width: 80 }} /> setF({ ...f, good: Number(e.target.value) })} style={{ width: 80 }} /> setF({ ...f, scrap: Number(e.target.value) })} style={{ width: 80 }} /> setF({ ...f, rework: Number(e.target.value) })} style={{ width: 80 }} />

{err &&

{err}

}

{rows.map(r => { const o = oeeOfRun(r); return ( {r.date} · {r.shiftId} {MACHINES.find(m => m.id === r.machineId)?.name ?? r.machineId} {PRODUCTS.find(p => p.id === r.productId)?.name ?? r.productId} {r.plannedMin} / {r.runMin} {r.total.toLocaleString()} {r.good.toLocaleString()} {r.scrap} {pct(o.a)} {pct(o.p)} {pct(o.q)} {pct(o.oee)} ); })} ); } const L = ({ l, children }) => {l}
{children}; /* ---------- Hourly ---------- */ function Hourly({ world, delta, act }) { const [machineId, setMachineId] = useState(MACHINES[0]?.id ?? ""); const sh = currentShift(); const date = iso(Date.now()); const prod = PRODUCTS.find(p => p.machines.includes(machineId)); const planPerHour = prod ? Math.round(prod.targetPerShift / 8) : 0; const hours = [...Array(8)].map((_, h) => h); const key = h => `${date}|${machineId}|${h}`; const entry = h => delta.hourly[key(h)] ?? {}; const setEntry = (h, patch) => { const cur = { good: 0, scrap: 0, rework: 0, comment: "", ...entry(h), ...patch }; const v = validateCounts({ total: cur.good + cur.scrap + cur.rework, ...cur }); act({ hourly: { ...delta.hourly, [key(h)]: cur } }, v ? null : `Hourly ${machineId} h${h + 1}: ${cur.good} good / ${cur.scrap} scrap`); }; let cumPlan = 0, cumAct = 0; return ( <>

m.active).map(m => [m.id, m.name])} /> {sh.name} · {date} · plan {planPerHour}/hr {prod ? "(" + prod.name + ")" : ""}

{hours.map(h => { const e = entry(h); const actual = (e.good ?? 0) + (e.rework ?? 0); cumPlan += planPerHour; cumAct += actual; const varc = actual - planPerHour; const entered = e.good != null; return ( H{h + 1} {planPerHour} setEntry(h, { good: Math.max(Number(ev.target.value), 0) })} style={{ width: 70, padding: "4px 8px" }} /> setEntry(h, { scrap: Math.max(Number(ev.target.value), 0) })} style={{ width: 70, padding: "4px 8px" }} /> setEntry(h, { rework: Math.max(Number(ev.target.value), 0) })} style={{ width: 70, padding: "4px 8px" }} /> {entered ? actual : "—"} = 0 ? C.green : C.red }}>{entered ? (varc >= 0 ? "+" : "") + varc : "—"} {cumPlan} {cumAct} setEntry(h, { comment: ev.target.value })} placeholder="…" style={{ width: 140, padding: "4px 8px" }} /> {entered && varc < 0 && } ); })}

Entries save as you type and survive refresh. Negative values are clamped; missed hours are flagged automatically.

); } /* ---------- Scrap ---------- */ function Scrap({ world, delta, act }) { const reasons = [...SCRAP_REASONS, ...(delta.config?.customScrapReasons ?? [])]; const [f, setF] = useState({ machineId: MACHINES[0]?.id ?? "", productId: PRODUCTS[0]?.id ?? "", reason: reasons[0], qty: 1 }); const addEntry = () => { if (!(f.qty > 0)) return; act({ scrapEntries: [...delta.scrapEntries, { ...f, id: "SC-" + Date.now(), date: iso(Date.now()) }] }, `Scrap: ${f.qty}× ${f.productId} (${f.reason}) on ${f.machineId}`); }; // pareto across sample run scrapReasons + user entries const byReason = {}; for (const r of world.runs) for (const sr of r.scrapReasons ?? []) { byReason[sr.reason] = (byReason[sr.reason] ?? 0) + sr.qty; } for (const e of world.scrapEntries) byReason[e.reason] = (byReason[e.reason] ?? 0) + Number(e.qty); const pareto = Object.entries(byReason).map(([reason, qty]) => ({ reason, qty })).sort((a, b) => b.qty - a.qty); const total = pareto.reduce((s, p) => s + p.qty, 0) || 1; return ( <>

setF({ ...f, machineId: v })} options={MACHINES.map(m => [m.id, m.name])} /> setF({ ...f, productId: v })} options={PRODUCTS.map(p => [p.id, p.name])} /> setF({ ...f, reason: v })} options={reasons.map(r => [r, r])} /> setF({ ...f, qty: Number(e.target.value) })} style={{ width: 80 }} />

Scrap Pareto — {total.toLocaleString()} pcs total

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

); } /* ---------- Changeovers ---------- */ function Changeovers({ world, delta, act }) { const [f, setF] = useState({ machineId: MACHINES[0]?.id ?? "", fromProduct: PRODUCTS[0]?.id ?? "", toProduct: PRODUCTS[1]?.id ?? "", targetMin: 20, actualMin: 25, delayReason: "" }); const addCo = () => act({ changeovers: [...delta.changeovers, { ...f, id: "CO-U" + Date.now(), date: iso(Date.now()), shiftId: currentShift().id }] }, `Changeover on ${f.machineId}: ${f.fromProduct} → ${f.toProduct}, ${f.actualMin}min vs ${f.targetMin} target`); const rows = world.changeovers.slice().sort((a, b) => b.date.localeCompare(a.date)).slice(0, 30); const avg = rows.length ? Math.round(rows.reduce((s, c) => s + c.actualMin, 0) / rows.length) : null; return ( <>

c.actualMin > c.targetMin * 1.5).length} tone={C.amber} />

setF({ ...f, machineId: v })} options={MACHINES.map(m => [m.id, m.name])} /> setF({ ...f, fromProduct: v })} options={PRODUCTS.map(p => [p.id, p.id])} w={120} /> setF({ ...f, toProduct: v })} options={PRODUCTS.map(p => [p.id, p.id])} w={120} /> setF({ ...f, targetMin: Number(e.target.value) })} style={{ width: 80 }} /> setF({ ...f, actualMin: Number(e.target.value) })} style={{ width: 80 }} /> setF({ ...f, delayReason: e.target.value })} style={{ width: 170 }} placeholder="if over target" />

{rows.map(co => ( {co.date} {MACHINES.find(m => m.id === co.machineId)?.name ?? co.machineId} {co.fromProduct} → {co.toProduct} {co.targetMin}m {co.actualMin}m {co.actualMin - co.targetMin >= 0 ? "+" : ""}{co.actualMin - co.targetMin}m {co.delayReason || "—"} ))} ); } /* ---------- OEE Analysis ---------- */ function OeeAnalysis({ world, targets }) { const [dim, setDim] = useState("machine"); const [range, setRange] = useState("7"); const cutoff = range === "all" ? "0000" : iso(Date.now() - Number(range) * day); const runs = world.runs.filter(r => r.date >= cutoff); const groups = groupOee(runs, dim); const tr = trend(world.runs); const overall = aggregate(runs); return ( <>

[k, "By " + v.label])} w={150} />

14-day trend — OEE with components

{tr.map((d, i) => )}

{groups.map(g => ( {g.name} {g.runs} {g.total.toLocaleString()} {g.good.toLocaleString()} {g.scrap} {pct(g.a)} {pct(g.p)} {pct(g.q)} {pct(g.oee)} ))} ); } /* ---------- Downtime ---------- */ function DowntimeView({ world, delta, act, targets }) { const [by, setBy] = useState("duration"); const [showUncl, setShowUncl] = useState(false); const events = world.downtime; const pareto = downtimePareto(events, by); const mm = mtbfMttr(world.runs, events); const uncl = events.filter(e => !e.category); const classify = (e, patch) => act({ dtPatch: { ...delta.dtPatch, [e.id]: { ...(delta.dtPatch[e.id] ?? {}), ...patch } } }, patch.category ? `Downtime ${e.id} classified: ${patch.category}` : null); const list = (showUncl ? uncl : events.slice().sort((a, b) => b.date.localeCompare(a.date))).slice(0, 25); return ( <>

s + e.durationMin, 0) / 60) + " h"} /> setShowUncl(!showUncl)} />

Downtime Pareto

{pareto.slice(0, 8).map((g, i) => )}

Avg duration per category: {pareto.slice(0, 4).map(g => `${g.category} ${g.avg}m`).join(" · ")}

{showUncl ? "Unclassified events — classify them" : "Recent events"}

{list.map(e => ( {e.date} {MACHINES.find(m => m.id === e.machineId)?.name ?? e.machineId} {e.endMin == null ? "⏱ open" : e.durationMin + "m"} classify(e, { category: v, reason: (DT_REASONS[v] ?? [""])[0] })} options={[["", "⚠ classify…"], ...DT_CATEGORIES.map(c2 => [c2, c2])]} w={170} /> classify(e, { reason: v })} options={[["", "—"], ...((DT_REASONS[e.category] ?? []).map(r2 => [r2, r2]))]} w={160} /> classify(e, { dept: v })} options={DEPTS.map(d2 => [d2, d2])} w={120} /> {e.planned ? : } classify(e, { comment: ev.target.value })} placeholder="…" style={{ width: 130, padding: "4px 8px" }} /> ))} ); } /* ---------- Alerts / Reports ---------- */ function Alerts({ world, targets, setView }) { const list = buildAlerts(world.runs, world.downtime, world.changeovers, targets, {}); const SEVC = { critical: C.red, high: C.amber, medium: C.sky }; const GOTO = { "OEE below target": "oee", "Availability below target": "downtime", "Quality below target": "scrap", "Unclassified downtime": "downtime", "Machine down now": "live", "Long changeover": "changeovers", "Excessive scrap": "scrap" }; return ( <> {list.length === 0 &&

Nothing below target. Frame this screen.

} {list.map(a => (

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

))} ); } function Reports({ world, targets }) { const runs = world.runs; const R = [ ["OEE summary by machine", () => csvOut("oee-by-machine", ["Machine", "Runs", "Total", "Good", "Scrap", "A%", "P%", "Q%", "OEE%"], groupOee(runs, "machine").map(g => [g.name, g.runs, g.total, g.good, g.scrap, pct(g.a), pct(g.p), pct(g.q), pct(g.oee)]))], ["OEE by product", () => csvOut("oee-by-product", ["Product", "Runs", "Total", "Good", "OEE%"], groupOee(runs, "product").map(g => [g.name, g.runs, g.total, g.good, pct(g.oee)]))], ["Shift comparison", () => csvOut("oee-by-shift", ["Shift", "Runs", "Total", "Good", "A%", "P%", "Q%", "OEE%"], groupOee(runs, "shift").map(g => [g.name, g.runs, g.total, g.good, pct(g.a), pct(g.p), pct(g.q), pct(g.oee)]))], ["Daily trend", () => csvOut("oee-trend", ["Date", "OEE%", "A%", "P%", "Q%"], trend(runs, 99).map(d => [d.date, d.oee, d.a, d.p, d.q]))], ["Downtime events", () => csvOut("downtime-events", ["Date", "Machine", "Duration min", "Category", "Reason", "Dept", "Planned"], world.downtime.map(e => [e.date, e.machineId, e.durationMin, e.category ?? "UNCLASSIFIED", e.reason ?? "", e.dept, e.planned ? "Y" : "N"]))], ["Downtime Pareto", () => csvOut("downtime-pareto", ["Category", "Total min", "Events", "Avg min", "Cum %"], downtimePareto(world.downtime).map(g => [g.category, g.duration, g.count, g.avg, g.cumPct]))], ["Production report", () => csvOut("production", ["Date", "Shift", "Machine", "Product", "Planned min", "Run min", "Total", "Good", "Scrap", "Rework"], runs.map(r => [r.date, r.shiftId, r.machineId, r.productId, r.plannedMin, r.runMin, r.total, r.good, r.scrap, r.rework ?? 0]))], ["Changeover report", () => csvOut("changeovers", ["Date", "Machine", "From", "To", "Target min", "Actual min", "Delay reason"], world.changeovers.map(c => [c.date, c.machineId, c.fromProduct, c.toProduct, c.targetMin, c.actualMin, c.delayReason ?? ""]))] ]; return (

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

{name}

))}

); } /* ---------- Plant assets ---------- */ function Structure({ world }) { return ( <> {AREAS.map(a => (

{a.name}

{LINES.filter(l => l.areaId === a.id || !LINES.some(x => x.areaId === a.id)).filter(l => l.areaId === a.id).map(l => (

{l.name}

{MACHINES.filter(m => m.lineId === l.id).map(m => { const status = world.live[m.id] ?? "Idle"; return (

{m.name} {m.id} {!m.active && }

); })}

))}

Plant structure loads from your machine master when connected (Data Management → Data Objects). In sample mode it's the demo plant.

); } function Products({ delta, act, world }) { const patch = (id, field, val) => act({ config: { ...delta.config, productPatch: { ...(delta.config?.productPatch ?? {}), [id]: { ...((delta.config?.productPatch ?? {})[id] ?? {}), [field]: val } } } }, `Product ${id}: ${field} → ${val}`); return ( <> {PRODUCTS.map(p => ( {p.id}

{p.name}

Number(e.target.value) !== p.idealCycleSec && patch(p.id, "idealCycleSec", Number(e.target.value))} style={{ width: 80 }} /> {Math.round(3600 / p.idealCycleSec)} Number(e.target.value) !== p.targetPerShift && patch(p.id, "targetPerShift", Number(e.target.value))} style={{ width: 90 }} /> {p.machines.join(", ")} ))} ); } function Shifts() { return ( {SHIFTS.map(sh => ( {sh.name} {sh.start} {sh.end} {sh.breakMin} min {480 - sh.breakMin} min {sh.overnight ? : "—"} ))} ); } /* ---------- Admin ---------- */ function Targets({ delta, act, targets }) { const set = (k, v) => act({ targets: { ...delta.targets, [k]: v } }, `Target ${k} → ${v}%`); const F = [["oee", "OEE target", "World class is 85; most plants live between 55 and 75. Set it honest, not aspirational."], ["availability", "Availability target", "Run time / planned time. Downtime is the enemy here."], ["performance", "Performance target", "Actual rate vs ideal cycle. Speed losses and micro-stops live here."], ["quality", "Quality target", "First-pass good / total. Scrap and rework live here."]]; return (

{F.map(([k, label, help]) => (

{label}

{help}

Number(e.target.value) !== targets[k] && set(k, Number(e.target.value))} style={{ width: 80, textAlign: "right", fontWeight: 700, fontFamily: MONO }} /> %

))}

); } function Settings({ delta, act, targets }) { const [reason, setReason] = useState(""); const custom = delta.config?.customScrapReasons ?? []; return (

Downtime alert threshold

Open downtime longer than this raises a critical alert.

act({ targets: { ...delta.targets, downtimeAlertMin: Number(e.target.value) } }, `Downtime alert threshold → ${e.target.value} min`)} style={{ width: 80, textAlign: "right", fontFamily: MONO, fontWeight: 700 }} /> min

Custom scrap reasons

Added reasons appear in the Scrap screen dropdown.

setReason(e.target.value)} placeholder="e.g. Paint run" style={{ flex: 1 }} />

{custom.map(r2 => )}

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

No actions yet — runs, classifications, and settings changes land here.

) : (

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

{l.ts}{l.text}

))}

); } /* ---------- Data Management ---------- */ const DATA_OBJECTS = [ { id: "machines", name: "Machines & Lines", req: ["Machine ID", "Machine Name", "Line"], opt: ["Area", "Active"], sample: [["M-101", "Press 400T", "Stamping Line 1", "Stamping", "Y"]], unlocks: "Live board, plant structure, all analysis grouping." }, { id: "products", name: "Products & Cycle Times", req: ["Product ID", "Name", "Ideal Cycle Seconds"], opt: ["Target Per Shift", "Machines"], sample: [["P-25BE", "Bracket 25BE", "12", "2000", "M-101;M-102"]], unlocks: "Performance math — the heart of OEE." }, { id: "shifts", name: "Shifts", req: ["Shift ID", "Start", "End"], opt: ["Break Minutes", "Overnight"], sample: [["A", "06:00", "14:00", "30", "N"]], unlocks: "Planned production time and shift comparisons." }, { id: "runs", name: "Historical Production", req: ["Date", "Machine", "Product", "Shift", "Run Minutes", "Total", "Good"], opt: ["Planned Minutes", "Scrap", "Rework"], sample: [["2026-07-01", "M-101", "P-25BE", "A", "410", "1840", "1812", "450", "22", "6"]], unlocks: "Trends, baselines, comparisons from day one." }, { id: "downtime", name: "Historical Downtime", req: ["Date", "Machine", "Duration Minutes"], opt: ["Category", "Reason", "Shift", "Planned"], sample: [["2026-07-01", "M-101", "35", "Equipment Failure", "Hydraulic fault", "A", "N"]], unlocks: "Pareto, MTBF/MTTR, availability truth." } ]; function Wizard({ setView }) { const [step, setStep] = useState(0); const steps = [ { q: "How is OEE tracked today?", opts: ["Clipboard + end-of-shift spreadsheet", "Whiteboard only", "An old system nobody trusts", "It isn't"] }, { q: "Do you know your ideal cycle times?", opts: ["Yes, documented", "Roughly, in people's heads", "Only nameplate speeds", "No"] }, { q: "Is downtime written down when it happens?", opts: ["Yes, with reasons", "Sometimes", "Only big ones", "No"] } ]; const s = steps[step]; return (

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

)}

{step < steps.length ? (

{s.q}

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

{step > 0 && }

) : (

Load in this order

Machines first, then products with honest cycle times — that alone lights up the live board and the OEE math. History is optional but 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}

)}

Upload via the platform Data page (top nav) — the AI maps your columns. The app picks it up on next load.

)} ); } function Readiness({ dataMode }) { const F = [["Live board & plant structure", ["machines"]], ["OEE math & analysis", ["machines", "products", "runs"]], ["Downtime Pareto & MTBF/MTTR", ["machines", "downtime"]], ["Hourly tracking", ["machines", "products", "shifts"]], ["Trends & comparisons", ["runs"]]]; 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", "Machines, products, shifts, and history through the platform Data page — AI maps your columns."], ["Manual entry", "Runs, hourly counts, downtime, scrap, and changeovers entered from any browser."], ["Downloadable templates", "Every data object ships a template with headers and sample rows."]]; const PLAN = [["Machine status API", "PLC/MES pushes status changes; downtime events open and close themselves."], ["Production count API", "Automatic counts from sensors — no operator entry."], ["Run start/stop events", "Machine signals drive run boundaries automatically."], ["Andon / display mode", "Full-screen live board for the shop-floor TV."]]; return ( <> {LIVE.map(([n, d]) => (

{n}

{d}

))}

Roadmap

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

{n}

{d}

))} ); }