root = Card([header, kpiRow, andonAlerts, lineFocus, sections, maintenanceForm, exportBtn])
header = CardHeader("Factory Floor Supervisor Console", "Live Operations Dashboard · Shift A · 2026-01-15 14:32")
kpiRow = SnippetCardBlock([kpiOee, kpiUnits, kpiSafety, kpiEnergy], "grid", true)
kpiOee = SnippetCardItem("oee", kpiOeeLhs, kpiOeeRhs)
kpiOeeLhs = IconText(kpiOeeIcon, "info", "m", "Overall Equipment Effectiveness", "Availability × Performance × Quality", false, "horizontal")
kpiOeeIcon = Icon("gauge", "automation")
kpiOeeRhs = BoldText("number", "84.7%", "+2.1%", "metric")
kpiUnits = SnippetCardItem("units", kpiUnitsLhs, kpiUnitsRhs)
kpiUnitsLhs = IconText(kpiUnitsIcon, "neutral", "m", "Units Produced Today", "Target: 12,500 | 14:32 elapsed", false, "horizontal")
kpiUnitsIcon = Icon("package", "logistics")
kpiUnitsRhs = BoldText("number", "9,847", "78.8% of target", "metric")
kpiSafety = SnippetCardItem("safety", kpiSafetyLhs, kpiSafetyRhs)
kpiSafetyLhs = IconText(kpiSafetyIcon, "success", "m", "Safety Record", "Incidents this year / Days since last", false, "horizontal")
kpiSafetyIcon = Icon("shield-check", "security")
kpiSafetyRhs = BoldText("text", "3 Incidents", "127 days since last", "text")
kpiEnergy = SnippetCardItem("energy", kpiEnergyLhs, kpiEnergyRhs)
kpiEnergyLhs = IconText(kpiEnergyIcon, "warning", "m", "Energy Use Today", "kWh consumed vs baseline", false, "horizontal")
kpiEnergyIcon = Icon("zap", "energy")
kpiEnergyRhs = BoldText("number", "4,820 kWh", "-3.2% vs avg", "metric")
andonAlerts = SectionBlock([andonSection], false)
andonSection = SectionItem("andon", "🔴 Live Andon Alerts — 3 Active", [andonList])
andonList = ListBlock([alert1, alert2, alert3], "number", "small")
alert1 = ListItem("Line 3 — Machine 3B", "CRITICAL: Temperature excursion +12°C above spec", null, "Acknowledge", { type: "continue_conversation", context: "Acknowledge andon alert for Line 3 Machine 3B temperature excursion" })
alert2 = ListItem("Line 1 — Conveyor 1A", "WARNING: Vibration threshold exceeded (4.2 mm/s)", null, "Acknowledge", { type: "continue_conversation", context: "Acknowledge andon alert for Line 1 Conveyor 1A vibration" })
alert3 = ListItem("Line 5 — Packaging", "INFO: Low packaging film roll — 15 min remaining", null, "Acknowledge", { type: "continue_conversation", context: "Acknowledge andon alert for Line 5 packaging film low" })
lineFocus = InlineHeader("Focus Production Line", "Select a line to filter all views below")
lineSelect = Select("focus-line", lineOptions, "All Lines — Overview", { required: false }, "medium")
lineOptions = [optAll, optL1, optL2, optL3, optL4, optL5]
optAll = SelectItem("all", "All Lines — Overview")
optL1 = SelectItem("line1", "Line 1 — Injection Molding")
optL2 = SelectItem("line2", "Line 2 — Extrusion")
optL3 = SelectItem("line3", "Line 3 — Assembly")
optL4 = SelectItem("line4", "Line 4 — Finishing")
optL5 = SelectItem("line5", "Line 5 — Packaging")
sections = SectionBlock([secLines, secDefects, secDowntime, secMaintenance, secStock, secDeliveries, secShifts, secQuality, secWorkOrders], true)
secLines = SectionItem("lines", "Production Lines — Rate & Status", [linesTable])
linesTable = Table([colLine, colRate, colTarget, colStatus, colOee, colAlerts])
colLine = Col("Line", ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"], "string")
colRate = Col("Rate (units/hr)", [1,240, 980, 1,150, 890, 1,420], "number")
colTarget = Col("Target (units/hr)", [1,300, 1,000, 1,200, 950, 1,500], "number")
colStatus = Col("Status", ["Running", "Running", "⚠ Alert", "Running", "Running"], "string")
colOee = Col("OEE", ["87.2%", "82.5%", "76.8%", "89.1%", "85.4%"], "string")
colAlerts = Col("Active Alerts", [0, 0, 1, 0, 1], "number")
secDefects = SectionItem("defects", "Defect Rate — Past 30 Days", [defectChart])
defectChart = LineChart(defectDates, [defectSeries], "natural", "Date", "Defect Rate (%)")
defectDates = ["Dec 16", "Dec 19", "Dec 22", "Dec 25", "Dec 28", "Dec 31", "Jan 3", "Jan 6", "Jan 9", "Jan 12", "Jan 15"]
defectSeries = Series("Defect Rate %", [2.1, 1.8, 2.4, 1.9, 2.2, 2.0, 1.7, 1.5, 1.8, 1.6, 1.4])
secDowntime = SectionItem("downtime", "Downtime by Cause — This Month", [downtimeChart])
downtimeChart = HorizontalBarChart(downtimeCauses, [downtimeSeries], "grouped", "Hours Lost", "Cause")
downtimeCauses = ["Tooling Failure", "Material Shortage", "Setup/Changeover", "Unplanned Maintenance", "Quality Hold", "Operator Availability", "Power/Utility"]
downtimeSeries = Series("Hours", [48.5, 32.0, 28.5, 24.0, 18.5, 12.0, 8.5])
secMaintenance = SectionItem("maintenance", "Machines Due for Maintenance (Next 7 Days)", [maintTable])
maintTable = Table([colMachine, colLine, colDue, colType, colPriority])
colMachine = Col("Machine", ["1A-Injector", "2C-Extruder", "3B-Assembler", "4A-Polisher", "5B-Sealer"], "string")
colLine = Col("Line", ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"], "string")
colDue = Col("Due Date", ["Jan 16", "Jan 17", "Jan 18", "Jan 20", "Jan 21"], "string")
colType = Col("Type", ["Preventive", "Predictive", "Corrective", "Preventive", "Preventive"], "string")
colPriority = Col("Priority", ["High", "Medium", "Critical", "Low", "Medium"], "string")
secStock = SectionItem("stock", "Raw Material Stock Levels", [stockCards])
stockCards = OverviewCardBlock([stockSteel, stockResin, stockPack], "grid", true)
stockSteel = OverviewCardItem("steel", stockSteelTop, stockSteelMetric)
stockSteelTop = IconText(stockSteelIcon, "neutral", "m", "Steel Coil Inventory", "Cold-rolled, 1.2mm", false, "vertical")
stockSteelIcon = Icon("layers", "manufacturing")
stockSteelMetric = MetricIndicatorInline("28.4 tonnes", "Reorder at 15t", { direction: "down", value: 4.2 })
stockResin = OverviewCardItem("resin", stockResinTop, stockResinMetric)
stockResinTop = IconText(stockResinIcon, "neutral", "m", "Resin Pellets (PP)", "Polypropylene, food-grade", false, "vertical")
stockResinIcon = Icon("droplets", "chemistry")
stockResinMetric = MetricIndicatorInline("12,750 kg", "Reorder at 5,000kg", { direction: "up", value: 1.8 })
stockPack = OverviewCardItem("pack", stockPackTop, stockPackMetric)
stockPackTop = IconText(stockPackIcon, "warning", "m", "Packaging Film", "Stretch wrap, 500mm × 20µm", false, "vertical")
stockPackIcon = Icon("package", "logistics")
stockPackMetric = MetricIndicatorInline("84 rolls", "Reorder at 30 rolls", { direction: "down", value: 12.5 })
secDeliveries = SectionItem("deliveries", "Supplier Deliveries Due This Week", [deliveryTable])
deliveryTable = Table([colSupplier, colMaterial, colQty, colDueDate, colStatus2])
colSupplier = Col("Supplier", ["Apex Metals", "PolySource", "FilmTech", "LogiCore", "Apex Metals"], "string")
colMaterial = Col("Material", ["Steel Coil", "PP Resin", "Stretch Film", "Pallets", "Tooling Inserts"], "string")
colQty = Col("Qty", ["15t", "8,000kg", "120 rolls", "500", "24 pcs"], "string")
colDueDate = Col("Due", ["Jan 16", "Jan 17", "Jan 18", "Jan 19", "Jan 20"], "string")
colStatus2 = Col("Status", ["Confirmed", "Confirmed", "At Risk", "Confirmed", "Pending"], "string")
secShifts = SectionItem("shifts", "Shift Output Comparison — This Week", [shiftChart])
shiftChart = BarChart(shiftDays, [shiftASeries, shiftBSeries, shiftCSeries], "grouped", "Day", "Units Produced")
shiftDays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
shiftASeries = Series("Shift A (06-14)", [3,820, 4,150, 3,980, 4,210, 3,890, 2,100, 0])
shiftBSeries = Series("Shift B (14-22)", [4,010, 3,870, 4,220, 3,950, 4,180, 2,350, 0])
shiftCSeries = Series("Shift C (22-06)", [2,890, 3,120, 2,980, 3,050, 2,760, 1,890, 0])
secQuality = SectionItem("quality", "Batches on Quality Hold", [qualityTable])
qualityTable = Table([colBatch, colLine2, colProduct, colReason, colSince, colDisposition])
colBatch = Col("Batch ID", ["B-20260115-003", "B-20260114-012", "B-20260113-008", "B-20260112-021"], "string")
colLine2 = Col("Line", ["Line 3", "Line 1", "Line 5", "Line 2"], "string")
colProduct = Col("Product", ["Widget-A Pro", "Gadget-X", "Pack-Film-500", "Extrude-Profile"], "string")
colReason = Col("Hold Reason", ["Dimensional OOS", "Surface Defect", "Seal Integrity", "Wall Thickness"], "string")
colSince = Col("Since", ["Jan 15 08:12", "Jan 14 14:30", "Jan 13 22:45", "Jan 12 10:05"], "string")
colDisposition = Col("Disposition", ["Under Review", "Rework Queued", "Awaiting Lab", "Scrap Pending"], "string")
secWorkOrders = SectionItem("workorders", "Open Work Orders", [woTable])
woTable = Table([colWo, colAsset, colDesc, colPriority2, colAssigned, colDue2])
colWo = Col("WO #", ["WO-20260115-047", "WO-20260115-042", "WO-20260114-038", "WO-20260114-035", "WO-20260113-029"], "string")
colAsset = Col("Asset", ["Line 3 / 3B", "Line 1 / 1A", "Line 5 / 5B", "Line 2 / 2C", "Line 4 / 4A"], "string")
colDesc = Col("Description", ["Replace heater band", "Calibrate pressure sensor", "Change seal jaw", "Gearbox oil change", "Align polishing head"], "string")
colPriority2 = Col("Priority", ["Critical", "High", "Medium", "Medium", "Low"], "string")
colAssigned = Col("Assigned To", ["M. Torres", "J. Chen", "R. Patel", "A. Kowalski", "S. Nguyen"], "string")
colDue2 = Col("Due", ["Jan 15 16:00", "Jan 15 18:00", "Jan 16 10:00", "Jan 16 14:00", "Jan 18 08:00"], "string")
maintenanceForm = Form("schedule-maintenance", maintButtons, [fcMachine, fcDate, fcType, fcNotes])
maintButtons = Buttons([btnSchedule, btnCancel], "row")
btnSchedule = Button("Schedule Maintenance", { type: "continue_conversation", context: "Schedule maintenance for selected machine and date" }, "primary")
btnCancel = Button("Clear", { type: "continue_conversation", context: "Clear maintenance scheduling form" }, "tertiary")
fcMachine = FormControl("Machine", machineSelect, "Select the machine requiring maintenance")
machineSelect = Select("maint-machine", machineOptions, "Choose machine...", { required: true })
machineOptions = [mOpt1, mOpt2, mOpt3, mOpt4, mOpt5, mOpt6, mOpt7, mOpt8, mOpt9, mOpt10]
mOpt1 = SelectItem("1A", "Line 1 — 1A Injector")
mOpt2 = SelectItem("1B", "Line 1 — 1B Injector")
mOpt3 = SelectItem("2A", "Line 2 — 2A Extruder")
mOpt4 = SelectItem("2B", "Line 2 — 2B Extruder")
mOpt5 = SelectItem("2C", "Line 2 — 2C Extruder")
mOpt6 = SelectItem("3A", "Line 3 — 3A Assembler")
mOpt7 = SelectItem("3B", "Line 3 — 3B Assembler")
mOpt8 = SelectItem("4A", "Line 4 — 4A Polisher")
mOpt9 = SelectItem("5A", "Line 5 — 5A Packager")
mOpt10 = SelectItem("5B", "Line 5 — 5B Sealer")
fcDate = FormControl("Maintenance Date & Time", datePicker, "Select when maintenance should occur")
datePicker = DatePicker("maint-date", "single", { required: true })
fcType = FormControl("Maintenance Type", typeChips, "Select maintenance category")
typeChips = Chips("maint-type", "single", typeOptions, { required: true })
typeOptions = [chipPrev, chipPred, chipCorr, chipCal]
chipPrev = ChipItem("preventive", "Preventive", chipPrevIcon)
chipPrevIcon = Icon("calendar-check", "time")
chipPred = ChipItem("predictive", "Predictive", chipPredIcon)
chipPredIcon = Icon("brain", "automation")
chipCorr = ChipItem("corrective", "Corrective", chipCorrIcon)
chipCorrIcon = Icon("wrench", "tools")
chipCal = ChipItem("calibration", "Calibration", chipCalIcon)
chipCalIcon = Icon("gauge", "automation")
fcNotes = FormControl("Notes", notesInput, "Parts needed, special instructions, safety permits...")
notesInput = TextArea("maint-notes", "e.g. Replace heater band PN-HEAT-3B, 2-hour window, lockout-tagout required", 3)
exportBtn = Buttons([btnExport], "row")
btnExport = Button("Export Shift Report (PDF)", { type: "continue_conversation", context: "Generate and download the current shift report as PDF" }, "secondary")