// CMMS — Maintenance Management. Replaces the whiteboard: PM plans that // generate their own work orders, checklist-gated completion, parts control, // and the KPIs maintenance managers get judged on. Console style; everything // persists via the App State Store. import React, { useEffect, useMemo, useState } from "react"; import { ResponsiveContainer, ComposedChart, Bar, XAxis, YAxis, Tooltip, Cell } from "recharts"; import { obl, loadState, saveState } from "./obl"; import { C, S, MONO } from "./ui"; import { PLANT, LINES, ASSETS, TECHS, PARTS, PM_PLANS, FAILURE_CODES, LABOR_RATE, buildSample, adaptRealAssets } from "./data"; import { money, WO_FLOW, PRIORITIES, assetName, techName, childrenOf, latestMeter, pmDue, generateDuePMs, kpis, costByAsset, failurePareto, repeatFailures, partStock, checklistComplete, canIssuePart } from "./engine"; const NS = "cmms"; const day = 86400_000; const iso = t => new Date(t).toISOString().slice(0, 10); const EMPTY_DELTA = { wos: [], woPatch: {}, requests: [], reqPatch: {}, meterReadings: [], partTxns: [], pmState: {}, pmPlans: [], checklist: {}, config: {}, log: [] }; const PRI_COLOR = { Low: C.dim, Medium: C.sky, High: C.amber, Emergency: C.red }; const ST_COLOR = { Draft: C.dim, Open: C.blue, Assigned: C.sky, "In Progress": C.amber, "Waiting for Parts": C.purple, "Waiting for Approval": C.purple, Completed: C.green, Closed: C.dim, Cancelled: C.dim }; const NAV_SECTIONS = [ { label: "Overview", color: "#2563EB", items: [["dashboard", "📊", "Dashboard"], ["calendar", "📅", "Maintenance Calendar"], ["alerts", "🔔", "Alerts"], ["reports", "📋", "Reports"]] }, { label: "Maintenance Work", color: "#16A34A", items: [["wos", "🔧", "Work Orders"], ["requests", "📥", "Requests"], ["pm", "🗓️", "PM Plans"]] }, { label: "Assets & Reliability", color: "#D97706", items: [["assets", "🏭", "Asset Registry"], ["meters", "⏲️", "Meter Readings"], ["failures", "🧯", "Failure Analysis"]] }, { label: "Resources", color: "#7C3AED", items: [["techs", "👷", "Technicians"], ["parts", "🧰", "Spare Parts"]] }, { label: "Admin & Settings", 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 [machines, lines] = await Promise.all([obl("/machines").catch(() => null), obl("/lines").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) { adaptRealAssets(machines, lines); setBase({ wos: [], meters: [], pmState: {}, requests: [] }); 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 patchArr = (arr, patches) => arr.map(x => patches[x.id] ? { ...x, ...patches[x.id] } : x); return { wos: [...patchArr(base.wos, delta.woPatch), ...patchArr(delta.wos, delta.woPatch)], requests: [...patchArr(base.requests, delta.reqPatch), ...patchArr(delta.requests, delta.reqPatch)], meters: [...base.meters, ...delta.meterReadings], pmState: { ...base.pmState, ...delta.pmState }, pmPlans: [...(dataMode === "real" ? [] : PM_PLANS), ...delta.pmPlans], parts: partStock(delta.partTxns) }; }, [base, delta, dataMode]); const rate = delta.config?.laborRate ?? LABOR_RATE; if (!world) return

Opening the maintenance office…

; const V = { dashboard: Dashboard, calendar: Calendar, alerts: Alerts, reports: Reports, wos: Wos, requests: Requests, pm: PmPlans, assets: Assets, meters: Meters, failures: Failures, techs: Techs, parts: Parts, settings: Settings, audit: Audit, wizard: Wizard, objects: DataObjects, readiness: Readiness, integrations: Integrations }[view]; return (

CMMS

Maintenance

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

CMMS · {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 L = ({ l, children }) => {l}
{children}; /* ---------- overlays ---------- */ function DataBanner({ dataMode, setDataMode, setBase, setView }) { if (dataMode === "sample") return (

Exploring with sample data — 12 assets, 10 PM plans, 6 technicians, 60 days of maintenance history. Every number is simulated.

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

Ready for your plant

Load your asset list first — then build PM plans in-app and start logging work orders today.

); 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
Maintenance System

You're looking at a fully working CMMS loaded with realistic sample data — 12 assets with hierarchy, 10 PM plans, 6 technicians, 60 days of work order history. Explore everything. When you're ready, connect your own assets and the sample disappears.

{[["1", "Explore", "Generate due PM work orders, walk one through the workflow, issue parts, watch the KPIs move — everything works."], ["2", "Connect your data", "Go to Data Management → Setup Wizard. Download CSV templates, fill from your asset list, upload. The AI maps your columns."], ["3", "Configure & go live", "Set your labor rate and failure codes under Admin. Technicians work orders 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: "Review the dashboard KPIs", done: true, hint: "You're here" }, { label: "Generate due PM work orders", done: delta.wos.some(w => w.id.startsWith("WO-G")), hint: "Maintenance Work → PM Plans", go: "pm" }, { label: "Complete a work order (checklist + hours)", done: Object.values(delta.woPatch).some(p => p.status === "Completed" || p.status === "Closed"), hint: "Maintenance Work → Work Orders", go: "wos" }, { label: "Convert a request into a work order", done: Object.values(delta.reqPatch).some(p => p.status === "Converted"), hint: "Maintenance Work → Requests", go: "requests" }, { label: "Record a meter reading", done: delta.meterReadings.length > 0, hint: "Assets → Meter Readings", go: "meters" }, { label: "Set your labor rate", done: delta.config?.laborRate != null, hint: "Admin → Settings", go: "settings" }, { label: "Load your asset list", 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: "The maintenance manager's morning read: open and overdue work, backlog hours, PM compliance, MTBF/MTTR, planned-vs-unplanned ratio, and where the money went (cost by asset).", calendar: "The next two weeks of scheduled work, day by day. Click a card to jump to the work order board.", alerts: "Everything demanding attention: overdue work orders, PMs past due, spare parts below minimum, open emergencies, and closed corrective work missing a failure code.", reports: "One-click CSV exports for every standard maintenance report.", wos: "The work order board — the full lifecycle from Draft to Closed. Click a row to open it: assign a technician, issue parts (stock is enforced), run the checklist, record actual hours, and complete. Completion is gated: the checklist must be answered and hours recorded.", requests: "Anyone can raise a request. Triage here: convert to a work order (priority carries over).", pm: "Preventive maintenance plans on calendar or meter triggers. The due bar shows how far through each interval a plan is. 'Generate due work orders' turns everything overdue into scheduled work — the button that replaces the whiteboard.", assets: "The registry: hierarchy (parent machines with child assemblies), criticality, warranty, value, and each asset's maintenance history and lifetime cost.", meters: "Runtime readings that drive meter-based PM plans. Enter readings here; the PM screen recalculates due status immediately. Backward readings are rejected.", failures: "Failure codes ranked by frequency, plus repeat offenders — the same asset failing the same way twice is a root-cause candidate, not a coincidence.", techs: "The crew: skills, certifications, shifts, and current workload from assigned work orders.", parts: "Spare parts stock with minimums. Issues happen from inside work orders; adjustments (cycle counts, receipts) happen here with a required reason. Negative stock is blocked.", settings: "Labor rate for cost math and custom failure codes.", audit: "Every action — status changes, completions, part issues, readings — timestamped.", wizard: "Plain-language setup: assets first, then PM plans, then parts.", objects: "Data objects with required fields and downloadable CSV templates.", readiness: "Which features are live with your current data.", integrations: "What's live today and what's on the roadmap (machine runtime feeds, ERP sync, photo attachments)." }; function HelpPanel({ view, close }) { return (

❓ What am I looking at?

{HELP[view] ?? ""}

); } /* ---------- Dashboard ---------- */ function Dashboard({ world, rate, setView }) { const k = kpis(world.wos, world.parts, rate); const costs = costByAsset(world.wos, rate).slice(0, 6); return ( <>

setView("wos")} /> setView("wos")} /> = 90 ? C.green : C.amber} onClick={() => setView("pm")} /> setView("failures")} /> 5 ? C.red : C.text} /> setView("parts")} />

Cost by asset — 60 days (labor @ ${rate}/h + parts, children rolled up to parent)

"$" + (v / 1000).toFixed(0) + "k"} /> money(v)} />

); } /* ---------- Work Orders ---------- */ function Wos({ world, delta, act, rate }) { const [sel, setSel] = useState(null); const [stF, setStF] = useState("open"); const [nf, setNf] = useState({ assetId: ASSETS[0]?.id ?? "", desc: "", priority: "Medium", due: iso(Date.now() + 3 * day) }); const list = world.wos.filter(w => stF === "all" ? true : stF === "open" ? !["Closed", "Completed", "Cancelled"].includes(w.status) : w.status === stF) .sort((a, b) => (PRIORITIES.indexOf(b.priority) - PRIORITIES.indexOf(a.priority)) || String(a.due).localeCompare(String(b.due))); const wo = sel ? world.wos.find(w => w.id === sel) : null; const patch = (id, p, log) => act({ woPatch: { ...delta.woPatch, [id]: { ...(delta.woPatch[id] ?? {}), ...p } } }, log); const addWo = () => { if (!nf.desc.trim() || !nf.assetId) return; const asset = ASSETS.find(a => a.id === nf.assetId); const id = "WO-N" + Date.now(); act({ wos: [...delta.wos, { id, type: nf.priority === "Emergency" ? "Emergency" : "Corrective", status: "Open", priority: nf.priority, assetId: nf.assetId, lineId: asset?.lineId ?? "", desc: nf.desc, planId: null, requested: iso(Date.now()), scheduled: nf.due, due: nf.due, completedAt: null, techId: null, estHours: 2, actualHours: 0, partsUsed: [], downMin: 0, failureCode: null, rootCause: "", notes: "" }] }, `${id} created: ${nf.desc}`); setNf({ ...nf, desc: "" }); }; return ( <>

setNf({ ...nf, assetId: v })} options={ASSETS.filter(a => a.active).map(a => [a.id, a.name])} /> setNf({ ...nf, desc: e.target.value })} style={{ width: 260 }} placeholder="e.g. Hydraulic leak at ram seal" /> setNf({ ...nf, priority: v })} options={PRIORITIES.map(p => [p, p])} w={130} /> setNf({ ...nf, due: e.target.value })} /> [s2, s2])]} w={170} />

{wo && setSel(null) }} />} {list.slice(0, 30).map(w => ( setSel(w.id)} style={{ cursor: "pointer", background: w.due && w.due < iso(Date.now()) && !["Closed", "Completed"].includes(w.status) ? `${C.red}06` : "transparent" }}> {w.id} {assetName(w.assetId)} {w.desc} {w.type} {techName(w.techId)} {w.due ?? "—"} ))} ); } function WoDetail({ wo, world, delta, act, patch, rate, close }) { const plan = wo.planId ? world.pmPlans.find(p => p.id === wo.planId) : null; const results = delta.checklist[wo.id] ?? {}; const [hours, setHours] = useState(wo.actualHours || plan?.estHours || 1); const [partSel, setPartSel] = useState(world.parts[0]?.id ?? ""); const [partQty, setPartQty] = useState(1); const [err, setErr] = useState(null); const NEXT = { Draft: "Open", Open: "Assigned", Assigned: "In Progress", "In Progress": "Completed", "Waiting for Parts": "In Progress", "Waiting for Approval": "In Progress", Completed: "Closed" }; const gateOk = checklistComplete(plan, results); const advance = () => { const next = NEXT[wo.status]; if (!next) return; if (next === "Completed") { if (!gateOk) { setErr("Checklist must be fully answered before completion — that's the point of a checklist."); return; } if (!(hours > 0)) { setErr("Record actual labor hours before completing."); return; } const p = { status: "Completed", completedAt: iso(Date.now()), actualHours: Number(hours) }; const extra = {}; if (wo.planId && plan) { extra.pmState = { ...delta.pmState, [wo.planId]: plan.trigger === "meter" ? { lastMeter: latestMeter(plan.assetId, world.meters) ?? 0 } : { lastDone: iso(Date.now()) } }; } setErr(null); act({ woPatch: { ...delta.woPatch, [wo.id]: { ...(delta.woPatch[wo.id] ?? {}), ...p } }, ...extra }, `${wo.id} completed — ${hours}h${wo.planId ? " · PM interval reset" : ""}`); } else { patch(wo.id, { status: next }, `${wo.id} → ${next}`); } }; const setCheck = (i, result) => act({ checklist: { ...delta.checklist, [wo.id]: { ...results, [i]: { ...(results[i] ?? {}), result } } } }, null); const issuePart = () => { const part = world.parts.find(p => p.id === partSel); const v = part ? canIssuePart(part, partQty) : "Pick a part."; if (v) { setErr(v); return; } setErr(null); act({ partTxns: [...delta.partTxns, { id: "PT-" + Date.now(), partId: partSel, qty: -Math.abs(partQty), woId: wo.id, ts: iso(Date.now()), note: "Issued to " + wo.id }], woPatch: { ...delta.woPatch, [wo.id]: { ...(delta.woPatch[wo.id] ?? {}), partsUsed: [...(wo.partsUsed ?? []), { id: partSel, qty: Math.abs(partQty) }] } } }, `Issued ${partQty}× ${partSel} to ${wo.id}`); }; return (

{wo.id} — {wo.desc}

{assetName(wo.assetId)} · {wo.type} · due {wo.due} · est {wo.estHours}h

patch(wo.id, { techId: v, status: wo.status === "Open" && v ? "Assigned" : wo.status }, `${wo.id} assigned to ${techName(v)}`)} options={[["", "unassigned"], ...TECHS.map(t2 => [t2.id, t2.name + " (" + t2.skills.join("/") + ")"])]} /> {wo.type !== "Preventive" && ( patch(wo.id, { failureCode: v }, `${wo.id} failure code: ${v}`)} options={[["", "—"], ...[...FAILURE_CODES, ...(delta.config?.customFailureCodes ?? [])].map(f => [f, f])]} /> )} setHours(Number(e.target.value))} style={{ width: 90, fontFamily: MONO }} /> [p.id, `${p.name} (${p.qty} on hand)`])} w={230} /> setPartQty(Number(e.target.value))} style={{ width: 60 }} />

{plan && (

Checklist — {plan.checklist.length} items, all required before completion

{plan.checklist.map((item, i) => { const r = results[i]?.result; return (

{item}

); })}

)} {(wo.partsUsed ?? []).length > 0 && (

Parts used: {wo.partsUsed.map(p => `${p.qty}× ${p.id}`).join(", ")} · cost {money(wo.partsUsed.reduce((s, p) => s + (world.parts.find(pp => pp.id === p.id)?.cost ?? 0) * p.qty, 0))}

)} {err &&

{err}

}

{NEXT[wo.status] && } {["Assigned", "In Progress"].includes(wo.status) && } {["In Progress"].includes(wo.status) && } {!["Closed", "Completed", "Cancelled"].includes(wo.status) && }

); } /* ---------- Requests ---------- */ function Requests({ world, delta, act }) { const [f, setF] = useState({ assetId: ASSETS[0]?.id ?? "", problem: "", priority: "Medium", requester: "" }); const addReq = () => { if (!f.problem.trim()) return; act({ requests: [...delta.requests, { ...f, id: "REQ-" + Date.now(), status: "Open", date: iso(Date.now()) }] }, `Request raised: ${f.problem}`); setF({ ...f, problem: "" }); }; const convert = r => { const asset = ASSETS.find(a => a.id === r.assetId); const id = "WO-R" + Date.now(); act({ reqPatch: { ...delta.reqPatch, [r.id]: { status: "Converted" } }, wos: [...delta.wos, { id, type: r.priority === "Emergency" ? "Emergency" : "Corrective", status: "Open", priority: r.priority, assetId: r.assetId, lineId: asset?.lineId ?? "", desc: r.problem, planId: null, requested: r.date, scheduled: iso(Date.now() + 2 * day), due: iso(Date.now() + (r.priority === "High" || r.priority === "Emergency" ? 1 : 5) * day), completedAt: null, techId: null, estHours: 2, actualHours: 0, partsUsed: [], downMin: 0, failureCode: null, rootCause: "", notes: "From " + r.id }] }, `${r.id} converted → ${id}`); }; return ( <>

setF({ ...f, assetId: v })} options={ASSETS.map(a => [a.id, a.name])} /> setF({ ...f, problem: e.target.value })} style={{ width: 260 }} placeholder="What's wrong?" /> setF({ ...f, priority: v })} options={PRIORITIES.map(p => [p, p])} w={130} /> setF({ ...f, requester: e.target.value })} style={{ width: 150 }} placeholder="Name / role" />

{world.requests.slice().sort((a, b) => b.date.localeCompare(a.date)).map(r => ( {r.id} {r.date} {assetName(r.assetId)} {r.problem} {r.requester} {r.status !== "Converted" && } ))} ); } /* ---------- PM Plans ---------- */ function PmPlans({ world, delta, act, setView }) { const due = world.pmPlans.filter(p => p.active && pmDue(p, world.pmState, world.meters).due); const [nf, setNf] = useState({ name: "", assetId: ASSETS[0]?.id ?? "", trigger: "calendar", freqDays: 30, meterEvery: 500, estHours: 1, checklist: "" }); const generate = () => { const gen = generateDuePMs(world.pmPlans, world.wos, world.pmState, world.meters); if (!gen.length) return; act({ wos: [...delta.wos, ...gen] }, `Generated ${gen.length} PM work order${gen.length > 1 ? "s" : ""} from due plans`); }; const addPlan = () => { if (!nf.name.trim() || !nf.assetId) return; const plan = { id: "PM-U" + Date.now(), name: nf.name, assetId: nf.assetId, trigger: nf.trigger, freqDays: Number(nf.freqDays), meterEvery: Number(nf.meterEvery), meterUnit: "run hrs", estHours: Number(nf.estHours), skills: [], parts: [], checklist: nf.checklist.split("\n").map(x => x.trim()).filter(Boolean), active: true }; act({ pmPlans: [...delta.pmPlans, plan], pmState: { ...delta.pmState, [plan.id]: nf.trigger === "calendar" ? { lastDone: iso(Date.now()) } : { lastMeter: latestMeter(nf.assetId, world.meters) ?? 0 } } }, `PM plan created: ${nf.name}`); setNf({ ...nf, name: "", checklist: "" }); }; return ( <> p.active).length} active plans · ${due.length} due right now.`} why="Preventive maintenance only works if due plans become scheduled work automatically — the gap between 'due' and 'scheduled' is where PMs die." impact="Every overdue PM is a breakdown with a countdown; the interval exists because the failure mode does." doNow={due.length ? "Generate the due work orders — one click — then assign them on the Work Orders board." : "Nothing due. Review intervals against failure history quarterly."} ifNot="PM compliance decays, the planned-vs-unplanned ratio flips, and the budget moves from filters to rebuilds." />

{world.pmPlans.map(p => { const d = pmDue(p, world.pmState, world.meters); return ( {p.name}

{p.id}

{assetName(p.assetId)}

75 ? C.amber : C.green }} />

{d.due ? "DUE" + (d.daysOver > 0 ? " +" + d.daysOver + "d" : "") : d.pctElapsed + "%"}

{d.detail}

{p.estHours} {p.checklist.length} items ); })}

New PM plan

setNf({ ...nf, name: e.target.value })} style={{ width: 240 }} placeholder="e.g. Monthly lube route" /> setNf({ ...nf, assetId: v })} options={ASSETS.map(a => [a.id, a.name])} /> setNf({ ...nf, trigger: v })} options={[["calendar", "Calendar"], ["meter", "Meter (run hrs)"]]} w={140} /> {nf.trigger === "calendar" ? setNf({ ...nf, freqDays: e.target.value })} style={{ width: 90 }} /> : setNf({ ...nf, meterEvery: e.target.value })} style={{ width: 100 }} />} setNf({ ...nf, estHours: e.target.value })} style={{ width: 90 }} />

setNf({ ...nf, checklist: e.target.value })} rows={3} style={{ width: "100%", marginTop: 4, background: C.well, color: C.text, border: `1px solid ${C.lineD}`, borderRadius: 8, padding: "8px 10px", fontSize: 13, fontFamily: "inherit", boxSizing: "border-box" }} placeholder={"Lockout/tagout applied\nFilter replaced\nLeak inspection"} /></L>
      </div>
    </>
  );
}

/* ---------- Calendar ---------- */
function Calendar({ world, setView }) {
  const days = [...Array(14)].map((_, i) => iso(Date.now() + i * day));
  return (
    <>
      <div style={{ display: "grid", gap: 8, gridTemplateColumns: "repeat(7, 1fr)" }}>
        {days.map(d => {
          const wos = world.wos.filter(w => w.scheduled === d && !["Closed", "Completed", "Cancelled"].includes(w.status));
          const isToday = d === iso(Date.now());
          return (
            <div key={d} style={{ ...S.panel, padding: 10, minHeight: 110, borderColor: isToday ? C.blue : C.line }}>
              <div style={{ fontSize: 10.5, fontFamily: MONO, color: isToday ? C.blue : C.sub, fontWeight: isToday ? 700 : 400, marginBottom: 6 }}>
                {new Date(d + "T12:00").toLocaleDateString(undefined, { weekday: "short" })} {d.slice(5)}{isToday ? " · TODAY" : ""}
              </div>
              {wos.slice(0, 3).map(w => (
                <div key={w.id} onClick={() => setView("wos")} style={{ fontSize: 10.5, padding: "4px 6px", marginBottom: 3, borderRadius: 6, background: `${PRI_COLOR[w.priority]}10`, borderLeft: `2px solid ${PRI_COLOR[w.priority]}`, cursor: "pointer", lineHeight: 1.3 }}>
                  <b style={{ fontFamily: MONO }}>{w.id}</b><br />{assetName(w.assetId)}
                </div>
              ))}
              {wos.length > 3 && <div style={{ fontSize: 10, color: C.dim }}>+{wos.length - 3} more</div>}
            </div>
          );
        })}
      </div>
      <div style={{ fontSize: 11, color: C.dim, marginTop: 10 }}>Next 14 days of scheduled, unfinished work. Color = priority. Click a card to open the work order board.</div>
    </>
  );
}

/* ---------- Assets ---------- */
function Assets({ world, rate }) {
  const [sel, setSel] = useState(null);
  const roots = ASSETS.filter(a => !a.parentId);
  const a = sel ? ASSETS.find(x => x.id === sel) : null;
  const history = a ? world.wos.filter(w => (w.assetId === a.id || ASSETS.find(x => x.id === w.assetId)?.parentId === a.id) && ["Closed", "Completed"].includes(w.status)).slice(-8).reverse() : [];
  const cost = a ? costByAsset(world.wos, rate).find(c => c.assetId === (a.parentId ?? a.id)) : null;
  return (
    <>
      {a && (
        <div style={{ ...S.panel, marginBottom: 12, borderColor: `${C.blue}50` }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
            <b style={{ fontSize: 15 }}>{a.name} <span style={{ fontFamily: MONO, fontSize: 11, color: C.dim }}>{a.id}</span></b>
            <button onClick={() => setSel(null)} style={{ background: "none", border: "none", color: C.sub, cursor: "pointer" }}>✕</button>
          </div>
          <div style={{ display: "grid", gap: "6px 18px", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", fontSize: 12.5, marginBottom: 10 }}>
            {[["Type", a.type], ["Make / model", (a.mfr + " " + a.model).trim() || "—"], ["Serial", a.serial || "—"], ["Line", LINES.find(l => l.id === a.lineId)?.name ?? a.lineId],
              ["Installed", a.installed || "—"], ["Warranty", a.warrantyEnd ? a.warrantyEnd + (a.warrantyEnd < iso(Date.now()) ? " (expired)" : "") : "—"],
              ["Replacement value", money(a.value)], ["Criticality", a.criticality + "/5"], ["60d maintenance cost", money(cost?.total)],
              ["60d downtime", cost ? Math.round((cost.downMin ?? 0) / 60) + " h" : "—"]].map(([l, v]) => (
              <div key={l}><span style={{ color: C.sub }}>{l}: </span><b>{v}</b></div>
            ))}
          </div>
          <div style={{ ...S.label, fontSize: 10, marginBottom: 4 }}>Recent maintenance history (incl. child assets)</div>
          {history.map(w => (
            <div key={w.id} style={{ display: "flex", gap: 10, fontSize: 12, padding: "4px 0", borderTop: `1px solid ${C.line}` }}>
              <span style={{ fontFamily: MONO, color: C.dim, flexShrink: 0 }}>{w.completedAt}</span>
              <Badge text={w.type.toUpperCase()} color={w.type === "Preventive" ? C.sky : w.type === "Emergency" ? C.red : C.amber} />
              <span style={{ flex: 1, color: C.sub }}>{w.desc}</span>
              <span style={{ fontFamily: MONO }}>{w.actualHours}h</span>
            </div>
          ))}
        </div>
      )}
      {roots.map(root => (
        <div key={root.id} style={{ ...S.panel, marginBottom: 8, padding: "12px 16px" }}>
          <div onClick={() => setSel(root.id)} style={{ display: "flex", gap: 10, alignItems: "center", cursor: "pointer", flexWrap: "wrap" }}>
            <span style={{ width: 8, height: 8, borderRadius: 4, background: root.active ? C.green : C.dim }} />
            <b style={{ fontSize: 13.5 }}>{root.name}</b>
            <span style={{ fontFamily: MONO, fontSize: 10.5, color: C.dim }}>{root.id}</span>
            <Badge text={"CRIT " + root.criticality} color={root.criticality >= 5 ? C.red : root.criticality === 4 ? C.amber : C.dim} />
            {!root.active && <Badge text="INACTIVE" color={C.dim} />}
            <span style={{ marginLeft: "auto", fontSize: 11, color: C.sub }}>{LINES.find(l => l.id === root.lineId)?.name}</span>
          </div>
          {childrenOf(root.id).map(ch => (
            <div key={ch.id} onClick={() => setSel(ch.id)} style={{ display: "flex", gap: 10, alignItems: "center", cursor: "pointer", padding: "5px 0 0 26px", fontSize: 12.5, color: C.sub }}>
              <span style={{ color: C.dim }}>└</span> {ch.name} <span style={{ fontFamily: MONO, fontSize: 10, color: C.dim }}>{ch.id}</span>
            </div>
          ))}
        </div>
      ))}
      {roots.length === 0 && <div style={{ ...S.panel, textAlign: "center", color: C.sub }}>No assets yet — load your asset list via Data Management.</div>}
    </>
  );
}

/* ---------- Meters ---------- */
function Meters({ world, delta, act }) {
  const meterable = Array.from(new Set(world.pmPlans.filter(p => p.trigger === "meter").map(p => p.assetId)));
  const assets = meterable.length ? meterable : ASSETS.filter(a => !a.parentId).map(a => a.id);
  const [f, setF] = useState({ assetId: assets[0] ?? "", value: "" });
  const [err, setErr] = useState(null);
  const addReading = () => {
    const v = Number(f.value);
    const last = latestMeter(f.assetId, world.meters);
    if (!(v > 0)) { setErr("Enter a positive reading."); return; }
    if (last != null && v < last) { setErr(`Reading ${v} is below the last reading (${last}) — meters don't run backward.`); return; }
    setErr(null);
    act({ meterReadings: [...delta.meterReadings, { id: "MR-U" + Date.now(), assetId: f.assetId, date: iso(Date.now()), meter: "run hrs", value: v }] }, `Meter reading: ${assetName(f.assetId)} → ${v} run hrs`);
    setF({ ...f, value: "" });
  };
  const history = world.meters.filter(m => m.assetId === f.assetId).sort((a, b) => b.date.localeCompare(a.date)).slice(0, 10);
  return (
    <>
      <div style={{ ...S.panel, marginBottom: 12 }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "flex-end" }}>
          <L l="Asset"><Sel value={f.assetId} onChange={v => setF({ ...f, assetId: v })} options={assets.map(id => [id, assetName(id)])} /></L>
          <L l="Run hours (cumulative)"><Inp type="number" min="0" value={f.value} onChange={e => setF({ ...f, value: e.target.value })} style={{ width: 130, fontFamily: MONO }} placeholder={String((latestMeter(f.assetId, world.meters) ?? 0) + 80)} /></L>
          <button onClick={addReading} style={btn(C.blue)}>+ Record reading</button>
          <span style={{ fontSize: 12, color: C.sub, alignSelf: "center" }}>Last: <b style={{ fontFamily: MONO }}>{latestMeter(f.assetId, world.meters) ?? "—"}</b> run hrs. Meter-based PM plans recalculate immediately.</span>
        </div>
        {err && <div style={{ color: C.red, fontSize: 12.5, marginTop: 8 }}>{err}</div>}
      </div>
      <T head={["Date", "Asset", "Meter", "Reading"]}>
        {history.map(m => (
          <tr key={m.id}>
            <td style={{ ...S.td, ...S.num }}>{m.date}</td>
            <td style={S.td}><b>{assetName(m.assetId)}</b></td>
            <td style={S.td}>{m.meter}</td>
            <td style={{ ...S.td, ...S.num, fontWeight: 700 }}>{m.value.toLocaleString()}</td>
          </tr>
        ))}
      </T>
    </>
  );
}

/* ---------- Failures ---------- */
function Failures({ world }) {
  const closed = world.wos.filter(w => ["Closed", "Completed"].includes(w.status));
  const pareto = failurePareto(closed);
  const repeats = repeatFailures(closed);
  return (
    <>
      <Doctrine
        what={`${pareto.reduce((s, g) => s + g.count, 0)} coded failures · ${repeats.length} repeat asset/failure pairs.`}
        why="A failure that happens twice isn't bad luck — it's a failure mode without a countermeasure."
        impact="Repeat failures are where MTBF goes to die and where PM plans should be born."
        doNow="Take the top repeat pair, pull its history on the asset screen, and write the PM or the fix."
        ifNot="You keep buying the same repair at emergency prices." />
      <div style={{ ...S.panel, marginBottom: 12 }}>
        <div style={{ ...S.label, marginBottom: 8 }}>Failure Pareto — by event count</div>
        <ResponsiveContainer width="100%" height={200}>
          <ComposedChart data={pareto.slice(0, 8)}>
            <XAxis dataKey="code" stroke={C.sub} fontSize={10} interval={0} angle={-14} textAnchor="end" height={52} />
            <YAxis stroke={C.sub} fontSize={10} />
            <Tooltip contentStyle={tt} />
            <Bar dataKey="count" name="events" radius={[3, 3, 0, 0]}>{pareto.slice(0, 8).map((_, i) => <Cell key={i} fill={i < 2 ? C.red : C.amber} />)}</Bar>
          </ComposedChart>
        </ResponsiveContainer>
      </div>
      <div style={{ ...S.label, marginBottom: 6 }}>Repeat failures — same asset, same code, 2+ times</div>
      <T head={["Asset", "Failure code", "Occurrences", "Last occurrence"]}>
        {repeats.map((r, i) => (
          <tr key={i}>
            <td style={S.td}><b>{assetName(r.assetId)}</b></td>
            <td style={S.td}>{r.code}</td>
            <td style={{ ...S.td, ...S.num, fontWeight: 700, color: r.count >= 3 ? C.red : C.amber }}>{r.count}×</td>
            <td style={{ ...S.td, ...S.num }}>{r.lastDate}</td>
          </tr>
        ))}
      </T>
    </>
  );
}

/* ---------- Techs / Parts ---------- */
function Techs({ world }) {
  return (
    <T head={["Technician", "Skills", "Certifications", "Shift", "Contact", "Open WOs", "Assigned hours"]}>
      {TECHS.map(t2 => {
        const open = world.wos.filter(w => w.techId === t2.id && !["Closed", "Completed", "Cancelled"].includes(w.status));
        return (
          <tr key={t2.id}>
            <td style={S.td}><b>{t2.name}</b></td>
            <td style={S.td}>{t2.skills.join(" · ")}</td>
            <td style={{ ...S.td, fontSize: 12, color: C.sub }}>{t2.certs.join(", ")}</td>
            <td style={{ ...S.td, ...S.num }}>{t2.shift}</td>
            <td style={{ ...S.td, fontSize: 12, fontFamily: MONO }}>{t2.phone}</td>
            <td style={{ ...S.td, ...S.num, fontWeight: 700 }}>{open.length}</td>
            <td style={{ ...S.td, ...S.num }}>{open.reduce((s, w) => s + (w.estHours ?? 0), 0)}h</td>
          </tr>
        );
      })}
    </T>
  );
}
function Parts({ world, delta, act }) {
  const [adj, setAdj] = useState({ partId: world.parts[0]?.id ?? "", qty: 0, note: "" });
  const [err, setErr] = useState(null);
  const apply = () => {
    if (!adj.qty || !adj.note.trim()) { setErr("Quantity and a reason are both required."); return; }
    const part = world.parts.find(p => p.id === adj.partId);
    if (part && part.qty + Number(adj.qty) < 0) { setErr("That adjustment would make stock negative — blocked."); return; }
    setErr(null);
    act({ partTxns: [...delta.partTxns, { id: "PT-A" + Date.now(), partId: adj.partId, qty: Number(adj.qty), woId: null, ts: iso(Date.now()), note: adj.note }] }, `Stock adjust ${adj.qty > 0 ? "+" : ""}${adj.qty}× ${adj.partId} — ${adj.note}`);
    setAdj({ ...adj, qty: 0, note: "" });
  };
  return (
    <>
      <div style={{ ...S.panel, marginBottom: 12 }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "flex-end" }}>
          <L l="Part"><Sel value={adj.partId} onChange={v => setAdj({ ...adj, partId: v })} options={world.parts.map(p => [p.id, p.name])} w={260} /></L>
          <L l="+/- qty"><Inp type="number" value={adj.qty} onChange={e => setAdj({ ...adj, qty: Number(e.target.value) })} style={{ width: 90, fontFamily: MONO }} /></L>
          <L l="Reason (required)"><Inp value={adj.note} onChange={e => setAdj({ ...adj, note: e.target.value })} style={{ width: 220 }} placeholder="cycle count / receipt / damage" /></L>
          <button onClick={apply} style={btn(C.blue)}>Apply adjustment</button>
          <span style={{ marginLeft: "auto", fontSize: 12, color: C.sub, alignSelf: "center" }}>Issues to work orders happen inside the WO itself.</span>
        </div>
        {err && <div style={{ color: C.red, fontSize: 12.5, marginTop: 8 }}>{err}</div>}
      </div>
      <T head={["Part", "On hand", "Min", "Cost", "Supplier", "Location", "Compatible assets", "Status"]}>
        {world.parts.map(p => (
          <tr key={p.id} style={{ background: p.low ? `${C.amber}08` : "transparent" }}>
            <td style={S.td}><b>{p.name}</b><div style={{ fontSize: 10.5, color: C.dim, fontFamily: MONO }}>{p.id}</div></td>
            <td style={{ ...S.td, ...S.num, fontWeight: 700, color: p.low ? C.amber : C.text }}>{p.qty}</td>
            <td style={{ ...S.td, ...S.num, color: C.sub }}>{p.min}</td>
            <td style={{ ...S.td, ...S.num }}>{money(p.cost)}</td>
            <td style={{ ...S.td, fontSize: 12 }}>{p.supplier}</td>
            <td style={{ ...S.td, fontFamily: MONO, fontSize: 11 }}>{p.loc}</td>
            <td style={{ ...S.td, fontSize: 11, color: C.sub }}>{p.assets.length ? p.assets.join(", ") : "universal"}</td>
            <td style={S.td}>{p.low ? <Badge text="REORDER" color={C.amber} /> : <Badge text="OK" color={C.green} />}</td>
          </tr>
        ))}
      </T>
    </>
  );
}

/* ---------- Alerts / Reports ---------- */
function Alerts({ world, setView }) {
  const today = iso(Date.now());
  const out = [];
  for (const w of world.wos.filter(x => !["Closed", "Completed", "Cancelled"].includes(x.status))) {
    if (w.priority === "Emergency") out.push({ sev: "critical", kind: "Emergency open", text: `${w.id} — ${w.desc}`, go: "wos" });
    else if (w.due && w.due < today) out.push({ sev: "high", kind: "Overdue work order", text: `${w.id} — ${assetName(w.assetId)} · due ${w.due}`, go: "wos" });
  }
  for (const p of world.pmPlans.filter(x => x.active)) {
    const d = pmDue(p, world.pmState, world.meters);
    if (d.due) out.push({ sev: d.daysOver > 7 ? "high" : "medium", kind: "PM due", text: `${p.name} — ${d.detail}`, go: "pm" });
  }
  for (const p of world.parts.filter(x => x.low)) out.push({ sev: "medium", kind: "Part below minimum", text: `${p.name} — ${p.qty} on hand, min ${p.min}`, go: "parts" });
  for (const w of world.wos.filter(x => ["Closed", "Completed"].includes(x.status) && x.type !== "Preventive" && !x.failureCode).slice(0, 5))
    out.push({ sev: "medium", kind: "Missing failure code", text: `${w.id} closed without a failure code — invisible in the Pareto`, go: "failures" });
  const rank = { critical: 0, high: 1, medium: 2 };
  const SEVC = { critical: C.red, high: C.amber, medium: C.sky };
  out.sort((a, b) => rank[a.sev] - rank[b.sev]);
  return (
    <>
      {out.length === 0 && <div style={{ ...S.panel, textAlign: "center", color: C.sub }}>Quiet board. Rare. Enjoy it.</div>}
      {out.slice(0, 30).map((a, i) => (
        <div key={i} style={{ ...S.panel, marginBottom: 6, padding: "12px 16px", display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center", borderLeft: `3px solid ${SEVC[a.sev]}` }}>
          <Badge text={a.sev.toUpperCase()} color={SEVC[a.sev]} />
          <b style={{ fontSize: 13 }}>{a.kind}</b>
          <span style={{ fontSize: 12.5, color: C.sub, flex: 1 }}>{a.text}</span>
          <button onClick={() => setView(a.go)} style={btn(C.well, C.blue)}>Open →</button>
        </div>
      ))}
    </>
  );
}
function Reports({ world, delta, rate }) {
  const closed = world.wos.filter(w => ["Closed", "Completed"].includes(w.status));
  const open = world.wos.filter(w => !["Closed", "Completed", "Cancelled"].includes(w.status));
  const R = [
    ["Open work orders", () => csvOut("open-wos", ["WO", "Type", "Priority", "Asset", "Description", "Tech", "Due", "Status"], open.map(w => [w.id, w.type, w.priority, assetName(w.assetId), w.desc, techName(w.techId), w.due, w.status]))],
    ["Completed work orders", () => csvOut("completed-wos", ["WO", "Type", "Asset", "Completed", "Hours", "Failure code"], closed.map(w => [w.id, w.type, assetName(w.assetId), w.completedAt, w.actualHours, w.failureCode ?? ""]))],
    ["PM compliance", () => { const pm = closed.filter(w => w.type === "Preventive"); csvOut("pm-compliance", ["WO", "Plan", "Asset", "Due", "Completed", "On time"], pm.map(w => [w.id, w.planId, assetName(w.assetId), w.due, w.completedAt, w.completedAt <= w.due ? "Y" : "N"])); }],
    ["Technician workload", () => csvOut("tech-workload", ["Technician", "Open WOs", "Assigned hours", "Closed 60d", "Actual hours 60d"], TECHS.map(t2 => { const o = open.filter(w => w.techId === t2.id); const c = closed.filter(w => w.techId === t2.id); return [t2.name, o.length, o.reduce((s, w) => s + w.estHours, 0), c.length, Math.round(c.reduce((s, w) => s + w.actualHours, 0))]; }))],
    ["Maintenance cost by asset", () => csvOut("cost-by-asset", ["Asset", "WOs", "Labor $", "Parts $", "Total $", "Downtime h"], costByAsset(world.wos, rate).map(c => [c.name, c.wos, Math.round(c.labor), Math.round(c.parts), Math.round(c.total), Math.round(c.downMin / 60)]))],
    ["Failure analysis", () => csvOut("failure-analysis", ["Failure code", "Events", "Repair hours", "Downtime min"], failurePareto(closed).map(g => [g.code, g.count, Math.round(g.hours), g.downMin]))],
    ["Spare parts inventory", () => csvOut("spare-parts", ["Part", "Name", "On hand", "Min", "Cost", "Supplier", "Location"], world.parts.map(p => [p.id, p.name, p.qty, p.min, p.cost, p.supplier, p.loc]))],
    ["Parts usage (this org's transactions)", () => csvOut("parts-usage", ["Date", "Part", "Qty", "Work order", "Note"], delta.partTxns.map(t2 => [t2.ts, t2.partId, t2.qty, t2.woId ?? "", t2.note]))]
  ];
  return (
    <div style={{ display: "grid", gap: 10, gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))" }}>
      {R.map(([name, fn]) => (
        <div key={name} style={{ ...S.panel, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
          <span style={{ fontSize: 13, fontWeight: 600 }}>{name}</span>
          <button onClick={fn} style={btn(C.blue)}>CSV</button>
        </div>
      ))}
    </div>
  );
}

/* ---------- Admin ---------- */
function Settings({ delta, act, rate }) {
  const [code, setCode] = useState("");
  const custom = delta.config?.customFailureCodes ?? [];
  return (
    <div style={{ display: "grid", gap: 10, maxWidth: 640 }}>
      <div style={{ ...S.panel, display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center", justifyContent: "space-between" }}>
        <div><div style={{ fontSize: 13.5, fontWeight: 600 }}>Labor rate</div>
          <div style={{ fontSize: 11.5, color: C.sub }}>Used for all cost math — fully burdened hourly rate, not wage.</div></div>
        <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
          <span style={{ fontSize: 13, color: C.sub }}>$</span>
          <Inp type="number" min="1" defaultValue={rate} onBlur={e => Number(e.target.value) !== rate && act({ config: { ...delta.config, laborRate: Number(e.target.value) } }, `Labor rate → $${e.target.value}/h`)} style={{ width: 80, textAlign: "right", fontFamily: MONO, fontWeight: 700 }} />
          <span style={{ fontSize: 13, color: C.sub }}>/h</span>
        </div>
      </div>
      <div style={S.panel}>
        <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 4 }}>Custom failure codes</div>
        <div style={{ fontSize: 11.5, color: C.sub, marginBottom: 10 }}>Added codes appear in work-order failure dropdowns.</div>
        <div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
          <Inp value={code} onChange={e => setCode(e.target.value)} placeholder="e.g. Coolant contamination" style={{ flex: 1 }} />
          <button onClick={() => { if (code.trim()) { act({ config: { ...delta.config, customFailureCodes: [...custom, code.trim()] } }, `Failure code added: ${code.trim()}`); setCode(""); } }} style={btn(C.blue)}>Add</button>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{custom.map(c2 => <Badge key={c2} text={c2} color={C.purple} />)}</div>
      </div>
    </div>
  );
}
function Audit({ delta }) {
  return delta.log.length === 0 ? (
    <div style={{ ...S.panel, textAlign: "center", color: C.sub }}>No actions yet — work orders, completions, issues, and readings land here.</div>
  ) : (
    <div>
      {delta.log.map((l, i) => (
        <div key={i} style={{ ...S.panel, marginBottom: 4, padding: "9px 16px", display: "flex", gap: 14, fontSize: 12.5 }}>
          <span style={{ color: C.dim, flexShrink: 0, fontFamily: MONO }}>{l.ts}</span><span style={{ color: C.sub }}>{l.text}</span>
        </div>
      ))}
    </div>
  );
}

/* ---------- Data Management ---------- */
const DATA_OBJECTS = [
  { id: "assets", name: "Assets & Hierarchy", req: ["Asset ID", "Name", "Line"], opt: ["Parent Asset", "Type", "Manufacturer", "Model", "Serial", "Installed", "Warranty End", "Value", "Criticality"], sample: [["A-1001", "Press 400T", "Stamping Line 1", "", "Press", "Schuler", "PH-400", "S44821", "2016-03-01", "2019-03-01", "850000", "5"]], unlocks: "Everything — the registry is the foundation." },
  { id: "pm-plans", name: "PM Plans", req: ["Plan Name", "Asset ID", "Trigger", "Frequency"], opt: ["Est Hours", "Checklist Items"], sample: [["Hydraulic filter change", "A-1001", "calendar", "30", "2", "Lockout applied;Filter replaced;Leak check"]], unlocks: "Automatic work-order generation and compliance tracking." },
  { id: "parts", name: "Spare Parts", req: ["Part ID", "Name", "Quantity", "Minimum"], opt: ["Cost", "Supplier", "Location", "Compatible Assets"], sample: [["SP-100", "Hydraulic filter HF-6177", "6", "2", "84", "Bosch Rexroth", "MRO-A1", "A-1001"]], unlocks: "Stock control, issue tracking, low-stock alerts." },
  { id: "technicians", name: "Technicians", req: ["Name"], opt: ["Skills", "Certifications", "Shift", "Phone"], sample: [["M. Rivera", "Hydraulics;Mechanical", "Lockout/Tagout", "A", "(555) 201-1101"]], unlocks: "Assignment and workload reporting." },
  { id: "history", name: "Historical Work Orders", req: ["Date", "Asset ID", "Type", "Hours"], opt: ["Description", "Failure Code", "Parts Used", "Downtime Minutes"], sample: [["2026-06-15", "A-1001", "Corrective", "3.5", "Hydraulic leak repair", "Hydraulic leak", "SP-100:1", "120"]], unlocks: "MTBF/MTTR, cost baselines, failure Pareto from day one." },
  { id: "meters", name: "Meter Readings", req: ["Date", "Asset ID", "Value"], opt: ["Meter Type"], sample: [["2026-07-01", "A-9001", "8450", "run hrs"]], unlocks: "Meter-based PM triggers." }
];
function Wizard({ setView }) {
  const [step, setStep] = useState(0);
  const steps = [
    { q: "How is maintenance tracked today?", opts: ["Whiteboard + memory", "Spreadsheet", "Paper work orders", "An old CMMS nobody updates"] },
    { q: "Do you have an equipment list with IDs?", opts: ["Yes, exportable", "Yes, on paper", "Partially", "No"] },
    { q: "Are PM intervals written down anywhere?", opts: ["Yes, documented", "In the manuals somewhere", "In the techs' heads", "No"] }
  ];
  const s = steps[step];
  return (
    <div style={{ maxWidth: 620 }}>
      <div style={{ display: "flex", gap: 6, marginBottom: 14 }}>{steps.map((_, i) => <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: i <= step ? C.blue : C.line }} />)}</div>
      {step < steps.length ? (
        <div style={S.panel}>
          <h2 style={{ fontSize: 17, marginBottom: 12 }}>{s.q}</h2>
          <div style={{ display: "grid", gap: 8 }}>
            {s.opts.map(o => <button key={o} onClick={() => setStep(step + 1)} style={{ ...S.panel, cursor: "pointer", textAlign: "left", fontSize: 13, padding: "11px 14px" }}>{o}</button>)}
          </div>
          {step > 0 && <button onClick={() => setStep(step - 1)} style={{ background: "none", border: "none", color: C.sub, cursor: "pointer", marginTop: 10, fontSize: 12 }}>← Back</button>}
        </div>
      ) : (
        <div style={S.panel}>
          <h2 style={{ fontSize: 17, marginBottom: 8 }}>Load in this order</h2>
          <p style={{ fontSize: 13, color: C.sub, marginBottom: 12 }}>Assets first — that alone lets you raise requests and work orders today. PM plans can also be created directly in-app, one at a time, as you formalize them.</p>
          {DATA_OBJECTS.map((o, i) => (
            <div key={o.id} style={{ display: "flex", gap: 10, alignItems: "center", padding: "8px 0", borderTop: `1px solid ${C.line}` }}>
              <span style={{ fontSize: 14, fontWeight: 800, color: C.blue, width: 20 }}>{i + 1}</span>
              <b style={{ fontSize: 13 }}>{o.name}</b><span style={{ fontSize: 11.5, color: C.sub, flex: 1 }}>{o.unlocks}</span>
            </div>
          ))}
          <button onClick={() => setView("objects")} style={{ ...btn(C.blue), marginTop: 12 }}>Go to Data Objects →</button>
        </div>
      )}
    </div>
  );
}
function DataObjects() {
  const [sel, setSel] = useState(null);
  const a = sel ? DATA_OBJECTS.find(o => o.id === sel) : null;
  return (
    <>
      <div style={{ display: "grid", gap: 8, gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", marginBottom: 12 }}>
        {DATA_OBJECTS.map(o => (
          <button key={o.id} onClick={() => setSel(sel === o.id ? null : o.id)} style={{ ...S.panel, cursor: "pointer", textAlign: "left", borderColor: sel === o.id ? C.blue : C.line }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>{o.name}</div>
            <div style={{ fontSize: 11, color: C.sub, marginTop: 2 }}>{o.unlocks}</div>
            <div style={{ fontSize: 10, color: C.blue, marginTop: 6 }}>{o.req.length} required · {o.opt.length} optional</div>
          </button>
        ))}
      </div>
      {a && (
        <div style={{ ...S.panel, borderColor: `${C.blue}50` }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
            <b>{a.name}</b>
            <button onClick={() => csvOut(a.id + "-template", [...a.req, ...a.opt], a.sample)} style={btn(C.blue)}>Download CSV template</button>
          </div>
          <div style={{ display: "grid", gap: 12, gridTemplateColumns: "1fr 1fr", marginBottom: 10, fontSize: 12.5 }}>
            <div><div style={{ ...S.label, fontSize: 9, marginBottom: 4 }}>Required</div>{a.req.map(f => <div key={f}>• <b>{f}</b></div>)}</div>
            <div><div style={{ ...S.label, fontSize: 9, marginBottom: 4 }}>Optional</div>{a.opt.map(f => <div key={f} style={{ color: C.sub }}>• {f}</div>)}</div>
          </div>
          <div style={{ fontSize: 11.5, color: C.sub }}>Upload via the platform Data page (top nav) — the AI maps your columns. The app picks it up on next load.</div>
        </div>
      )}
    </>
  );
}
function Readiness({ dataMode }) {
  const F = [["Requests & work orders", ["assets"]], ["PM auto-generation", ["assets", "pm-plans"]],
    ["Spare parts control", ["parts"]], ["MTBF / MTTR / cost baselines", ["assets", "history"]],
    ["Meter-based PM triggers", ["assets", "meters"]], ["Technician workload", ["technicians"]]];
  const ready = dataMode === "real";
  return (
    <div style={{ display: "grid", gap: 8 }}>
      {F.map(([name, needs]) => (
        <div key={name} style={{ ...S.panel, display: "flex", gap: 12, alignItems: "center", padding: "12px 16px" }}>
          <Badge text={ready ? "✓ READY" : "SAMPLE"} color={ready ? C.green : C.dim} />
          <b style={{ fontSize: 13 }}>{name}</b>
          <span style={{ fontSize: 11.5, color: C.sub }}>Needs: {needs.map(n => DATA_OBJECTS.find(o => o.id === n)?.name ?? n).join(", ")}</span>
        </div>
      ))}
    </div>
  );
}
function Integrations() {
  const LIVE = [["Excel / CSV upload", "Assets, PM plans, parts, technicians, and history through the platform Data page."],
    ["In-app creation", "Work orders, requests, PM plans, meter readings, and adjustments from any browser."],
    ["Downloadable templates", "Every data object ships a template with headers and sample rows."]];
  const PLAN = [["Machine runtime feed", "Runtime meters update themselves from the OEE tracker or PLC data."],
    ["ERP work order sync", "Two-way sync with your ERP's maintenance module."],
    ["Parts reorder to purchasing", "Below-minimum parts raise POs in the MRP app automatically."],
    ["Photo attachments", "Attach photos to work orders and inspections from a phone."]];
  return (
    <>
      {LIVE.map(([n, d]) => (
        <div key={n} style={{ ...S.panel, marginBottom: 6, display: "flex", gap: 10, alignItems: "center", padding: "12px 16px" }}>
          <Badge text="LIVE" color={C.green} /><div><b style={{ fontSize: 13 }}>{n}</b><div style={{ fontSize: 11.5, color: C.sub }}>{d}</div></div>
        </div>
      ))}
      <div style={{ ...S.label, margin: "12px 0 6px" }}>Roadmap</div>
      {PLAN.map(([n, d]) => (
        <div key={n} style={{ ...S.panel, marginBottom: 6, display: "flex", gap: 10, alignItems: "center", padding: "12px 16px", opacity: 0.65 }}>
          <Badge text="PLANNED" color={C.dim} /><div><b style={{ fontSize: 13 }}>{n}</b><div style={{ fontSize: 11.5, color: C.sub }}>{d}</div></div>
        </div>
      ))}
    </>
  );
}
</article></body></html>