+
+
+
+
+ Last synchronized 3 sec ago
+ Production Operations
++ Monitor active work orders, line performance, and production exceptions. +
+
+
+ );
+};
+
+export default function DowntimeView() {
+ return (
+
+
+ Root Cause & Correction · {row.id}
+
+
+ Root cause
+ {row.detail.rootCause}
Corrective action
+ {row.detail.correctiveAction}
Parts used
+ {row.detail.parts}
Window
+ {row.start} – {row.end} · {row.machine}
+
+ Classification
+
+
+ {row.durationMin}mDuration
+ {row.category}Category
+ {row.planned ? "Planned" : "Unplanned"}Type
+
+ {/* KPI cards */}
+
+ {downtimeKpis.map((k) => (
+
+
+ ))}
+
+
+ {/* charts */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* top offenders */}
+
+
+
+
+
+ );
+}
diff --git a/projects/manufacturing/src/equipment-view.tsx b/projects/manufacturing/src/equipment-view.tsx
new file mode 100644
index 0000000..ba692d1
--- /dev/null
+++ b/projects/manufacturing/src/equipment-view.tsx
@@ -0,0 +1,246 @@
+import { useState, type ReactNode } from "react";
+import {
+ IgrCard,
+ IgrCardMedia,
+ IgrCardHeader,
+ IgrCardContent,
+ IgrCardActions,
+ IgrButton,
+ IgrDialog,
+} from "igniteui-react";
+import styles from "./production-operations.module.css";
+import { equipment, type Equipment, type MachineArt } from "./data";
+
+/* Themed gradient + line-art glyph used as each equipment card's fallback
+ * "product image" (shown until a real photo exists in /public/equipment). */
+const ART: Record
+
+
+ {k.label}
+ {k.delta}
+
+ {k.value}
+
+ Downtime Pareto · by reason
+
+
+ Downtime by line
+
+
+ Downtime trend · last 12 shifts
+
+
+ Planned vs unplanned
+
+
+
+
+
+ {downtimeSplit.plannedPct}%
+ planned
+
+
+
+ Planned · {downtimeSplit.planned}m
+ Unplanned · {downtimeSplit.unplanned}m
+
+
+ Top offenders
+
+ {offenders.map((o) => (
+
+
+ ))}
+
+
+
+ {/* event log grid */}
+
+
+
+ }.jpg`})
{ ev.currentTarget.style.display = "none"; }} />
+
+ {o.downtimeMin}min
+
+ { ev.currentTarget.style.display = "none"; }} />
+
+ {o.downtimeMin}min
+
+
+
+ {o.id} · {o.type}
+ {o.line} · {o.events} stoppages · top: {o.topReason}
+
+
+ Downtime Event Log
+ Expand a row for root cause & corrective action
+
+
+ }.jpg`})
{ ev.currentTarget.style.display = "none"; }}
+ />
+
+
+
+ {e.status}
+
+
+ );
+}
+
+function EquipmentCard({ e, onView }: { e: Equipment; onView: (e: Equipment) => void }) {
+ const outputPct = Math.min(100, Math.round((e.output / e.target) * 100));
+ return (
+ { ev.currentTarget.style.display = "none"; }}
+ />
+
+
+
+ {e.status}
+
+
+
+
+
+ Utilization{e.utilization}%
+
+
+
+ Output vs target{e.output.toLocaleString()} / {e.target.toLocaleString()}
+
+
+
+ {e.temp}°CSpindle temp
+ {e.nextMaintenance}Next service
+
+
+ )}
+
+
+
+
+ {selected.line} · Operator {selected.operator}
+
+
+
+ {[
+ { label: "OEE", value: `${selected.oee}%` },
+ { label: "Utilization", value: `${selected.utilization}%` },
+ { label: "Output today", value: selected.output.toLocaleString() },
+ { label: "Target", value: selected.target.toLocaleString() },
+ { label: "Spindle temp", value: `${selected.temp}°C` },
+ { label: "Next service", value: selected.nextMaintenance },
+ ].map((s) => (
+
+
+
+ {s.label}
+ {s.value}
+
+ ))}
+
+
+
+ Output vs target
+ {Math.round((selected.output / selected.target) * 100)}%
+
+
+
+
+
+ Close
+ Acknowledge
+
+
+ {numberFmt(row.completed)}
+
+
+
+
+ );
+};
+
+const scrapCell = (ctx: IgrCellTemplateContext) => {
+ const scrap = ctx.cell.value as number;
+ const high = scrap >= 3;
+ return {scrap.toFixed(1)}%;
+};
+
+const statusCell = (ctx: IgrCellTemplateContext) => {
+ const label = ctx.cell.value as string;
+ const tone = STATUS_TONE[label] ?? "running";
+ return (
+
+
+ {label}
+
+ );
+};
+
+/* --------------------- master-detail: measurement + pareto --------------------- */
+const detailTemplate = (ctx: IgrGridMasterDetailContext) => {
+ const row = ctx.implicit as WorkOrder;
+ return (
+
+ {/* measurement results */}
+
+ );
+};
+
+/* ----------------------------- filter dropdown ----------------------------- */
+function FilterDropdown({
+ label,
+ value,
+ options,
+ onSelect,
+}: {
+ label: string;
+ value: string;
+ options: string[];
+ onSelect: (v: string) => void;
+}) {
+ return (
+
+
+
+
+
+
+ {/* defect pareto */}
+
+ Measurement Results · {row.product}
+
+ | Characteristic | +Nominal | +Tolerance | +Measured | +Status | +
|---|---|---|---|---|
| {m.characteristic} | +{m.nominal} | +{m.tolerance} | +{m.measured} | ++ + + {m.pass ? "Pass" : "Fail"} + + | +
+ {row.detail.failed} of {row.detail.sampled} sampled units exceeded specification. Similar + failures occurred in the prior supplier lot. +
+
+
+
+ Defect Pareto · This Lot
+
+
+
+
+ {/* ============ top bar ============ */}
+
+
+
+ {/* ============ content ============ */}
+
+ ) => setActiveTab(e.detail?.label ?? "Work Orders")}
+ >
+ {PAGE_TABS.map((t) => (
+
+
+ {/* ===== Equipment tab ===== */}
+ {activeTab === "Equipment" && Loading shift handoff…
}>
+
+
+
+ NORTHSTAR OPERATIONS
+ MANUFACTURING EXECUTION
+
+
+
+
+
+
+ LIVE
+
+
+
+ {/* KPI row */}
+
+ {kpis.map((kpi) => (
+
+
+ ))}
+
+
+ {/* main two-column area */}
+
+ {/* orders panel */}
+
+
+
+ {/* detail panel */}
+
+
+
+
+
+
+ );
+}
diff --git a/projects/manufacturing/src/shift-handoff-view.tsx b/projects/manufacturing/src/shift-handoff-view.tsx
new file mode 100644
index 0000000..736f0b7
--- /dev/null
+++ b/projects/manufacturing/src/shift-handoff-view.tsx
@@ -0,0 +1,201 @@
+import { useRef } from "react";
+import ApexGanttChart from "./apex-gantt";
+import {
+ IgrGrid,
+ IgrColumn,
+ type IgrCellTemplateContext,
+ type IgrGridMasterDetailContext,
+} from "igniteui-react-grids";
+import { IgrCard } from "igniteui-react";
+import styles from "./production-operations.module.css";
+import { STATUS_TONE } from "./data";
+import {
+ handoffTasks,
+ buildGanttTasks,
+ shiftSummary,
+ STATUS_COLOR,
+ type HandoffTask,
+ type HandoffState,
+} from "./ops-extra-data";
+
+const ganttTasks = buildGanttTasks();
+
+const CheckIcon = ({ on }: { on: boolean }) => (
+
+);
+
+/* ---- grid cell templates ---- */
+const statusCell = (ctx: IgrCellTemplateContext) => {
+ const label = ctx.cell.value as string;
+ const tone = STATUS_TONE[label] ?? "running";
+ return (
+
+
+ {label}
+
+ );
+};
+
+const progressCell = (ctx: IgrCellTemplateContext) => {
+ const pct = ctx.cell.value as number;
+ return (
+
+
+
+ {kpi.label}
+ {kpi.delta}
+
+ {kpi.value}
+
+ ) => onSearch(e.detail)}
+ >
+
+
+ { setLineFilter(v); applyFilter("line", v); }} />
+ { setStatusFilter(v); applyFilter("status", v); }} />
+ { setDueFilter(v); applyFilter("dueWindow", v); }} />
+
+
+
+
+
+ CSV (.csv)
+
+
+
+
+
+ `${v}s`} />
+
+
+
+
+
+ {numberFmt(gridSummary.total)} work orders
+
+ Planned: {numberFmt(gridSummary.planned)}
+
+ Completed: {numberFmt(gridSummary.completed)}
+
+ Weighted scrap: {gridSummary.weightedScrap}
+
+ Expand a row for measurement & defect analysis
+
+
+
+
+
+
+ WO-48192
+Drive Housing · Line 03 · MC-307
+
+ {detailMetrics.map((m) => (
+
+
+
+ {m.label}
+ {m.value}
+
+ ))}
+
+
+
+
+ Spindle vibration · last 30 min
+ 4.2
+
+
+ {sensorStats.map((s) => (
+
+
+
+ {s.value}
+ {s.label}
+
+ ))}
+
+ Recent Events
+
+
+ -
+ {recentEvents.map((ev) => (
+
- + {ev.time} + {ev.text} + {ev.ago} + + ))} +
+ Operator Note
+
+
+ Vibration trending upward after tool change. Maintenance notified for post-shift
+ inspection.
+
+
+ {pct}%
+
+
+
+
+ );
+};
+
+const handoffToneClass: Record
+
+ );
+};
+
+export default function ShiftHandoffView() {
+ const gridRef = useRef
+
+ Handoff Checklist · {row.id}
+ -
+ {row.detail.checklist.map((c) => (
+
-
+
+ {c.label} +
+ ))}
+
+
+ Notes & Open Issues
+ {row.detail.notes}
+ {row.detail.issues.length > 0 ? (
+ -
+ {row.detail.issues.map((i) => (
+
- + {i} + + ))} +
No open issues — clean handoff.
+ )} +
+ {/* summary cards */}
+
+ {[
+ { label: "Units Produced", value: shiftSummary.unitsProduced.toLocaleString(), delta: `Scrap ${shiftSummary.scrap}`, tone: "positive" as const },
+ { label: "Downtime", value: `${shiftSummary.downtimeMin} min`, delta: "this shift", tone: "warning" as const },
+ { label: "To Hand Off", value: `${shiftSummary.toHandoff}`, delta: "crossing shift end", tone: "warning" as const },
+ { label: "Unresolved Issues", value: `${shiftSummary.unresolved}`, delta: "need attention", tone: "negative" as const },
+ ].map((k) => (
+
+
+ ))}
+
+
+ {/* Gantt timeline */}
+
+
+
+ {/* Handoff grid with master-detail */}
+
+
+
+
+
+ );
+}
diff --git a/projects/manufacturing/src/theme.css b/projects/manufacturing/src/theme.css
new file mode 100644
index 0000000..b684273
--- /dev/null
+++ b/projects/manufacturing/src/theme.css
@@ -0,0 +1,90 @@
+/*
+ * Production Operations theme layer.
+ * Base component styles come from the stock Indigo light theme imported in main.tsx.
+ * Here we re-seed the primary ramp to the design's violet, re-seed secondary to the
+ * dark toolbar slate, and expose semantic tokens the custom view chrome consumes.
+ * (Ramps generated via the Ignite UI Theming MCP create_theme tool.)
+ */
+:root {
+ /* Primary → violet #6D4AFF */
+ --ig-primary-50: hsl(from var(--ig-primary-500) h calc(s * 1.23) calc(l * 1.78));
+ --ig-primary-50-contrast: hsla(from color(from var(--ig-primary-50) var(--y-contrast)) h 0 l/1);
+ --ig-primary-100: hsl(from var(--ig-primary-500) h calc(s * 0.8) calc(l * 1.66));
+ --ig-primary-100-contrast: hsla(from color(from var(--ig-primary-100) var(--y-contrast)) h 0 l/1);
+ --ig-primary-200: hsl(from var(--ig-primary-500) h calc(s * 0.64) calc(l * 1.43));
+ --ig-primary-200-contrast: hsla(from color(from var(--ig-primary-200) var(--y-contrast)) h 0 l/1);
+ --ig-primary-300: hsl(from var(--ig-primary-500) h calc(s * 0.73) calc(l * 1.19));
+ --ig-primary-300-contrast: hsla(from color(from var(--ig-primary-300) var(--y-contrast)) h 0 l/1);
+ --ig-primary-400: hsl(from var(--ig-primary-500) h calc(s * 0.875) calc(l * 1.08));
+ --ig-primary-400-contrast: hsla(from color(from var(--ig-primary-400) var(--y-contrast)) h 0 l/1);
+ --ig-primary-500: #6d4aff;
+ --ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1);
+ --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
+ --ig-primary-600-contrast: hsla(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l/1);
+ --ig-primary-700: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.81));
+ --ig-primary-700-contrast: hsla(from color(from var(--ig-primary-700) var(--y-contrast)) h 0 l/1);
+ --ig-primary-800: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.73));
+ --ig-primary-800-contrast: hsla(from color(from var(--ig-primary-800) var(--y-contrast)) h 0 l/1);
+ --ig-primary-900: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.64));
+ --ig-primary-900-contrast: hsla(from color(from var(--ig-primary-900) var(--y-contrast)) h 0 l/1);
+ --ig-primary-seed: #6d4aff;
+
+ /* Secondary → dark slate #22242E (toolbar) */
+ --ig-secondary-500: #22242e;
+ --ig-secondary-500-contrast: #ffffff;
+ --ig-secondary-seed: #22242e;
+
+ /* ---- Semantic tokens for the custom view chrome ---- */
+ --ops-page-bg: #f3f4f7;
+ --ops-topbar-bg: #22242e;
+ --ops-topbar-pill: #2c2f3b;
+ --ops-topbar-border: #3a3d4b;
+ --ops-surface: #ffffff;
+ --ops-border: #e7e9ee;
+ --ops-border-strong: #d9dce3;
+ --ops-text: #24262f;
+ --ops-text-strong: #16181f;
+ --ops-text-muted: #8a909c;
+ --ops-text-faint: #a7adb8;
+
+ --ops-violet: #6d4aff;
+ --ops-violet-soft: #f0ecff;
+
+ --ops-green: #1f9d55;
+ --ops-green-soft: #e6f5ec;
+ --ops-amber: #c98a12;
+ --ops-amber-soft: #fbf1de;
+ --ops-red: #d64545;
+ --ops-red-soft: #fbe9e9;
+ --ops-blue: #2f78d6;
+ --ops-blue-soft: #e7f0fb;
+
+ /* Subtle full-row tints in the grid */
+ --ops-row-selected: #f6f3ff;
+ --ops-row-warn: #fdf7ec;
+ --ops-row-error: #fcefef;
+}
+
+/* ---------------------------------------------------------------------------
+ * Scoped Data Grid theme (generated via Theming MCP create_component_theme:
+ * background #FFFFFF, foreground #2B2F3A, accent #6D4AFF). Trimmed to the tokens
+ * that shape this view; the rest are auto-derived by the framework.
+ * ------------------------------------------------------------------------- */
+igc-grid {
+ --ig-grid-background: #ffffff;
+ --ig-grid-foreground: #2b2f3a;
+ --ig-grid-accent-color: #6d4aff;
+ --ig-grid-header-background: #ffffff;
+ --ig-grid-header-text-color: #8a909c;
+ --ig-grid-header-border-color: var(--ops-border);
+ --ig-grid-row-border-color: var(--ops-border);
+ --ig-grid-grid-border-color: transparent;
+ --ig-grid-content-background: #ffffff;
+ --ig-grid-row-hover-background: #faf9ff;
+ --ig-grid-row-selected-background: var(--ops-row-selected);
+ --ig-grid-row-selected-hover-background: var(--ops-row-selected);
+ --ig-grid-row-selected-text-color: var(--ops-text);
+ --ig-grid-cell-selected-background: transparent;
+ --ig-grid-cell-active-border-color: transparent;
+ --ig-size: var(--ig-size-medium);
+}
diff --git a/projects/manufacturing/src/vite-env.d.ts b/projects/manufacturing/src/vite-env.d.ts
new file mode 100644
index 0000000..cb4800b
--- /dev/null
+++ b/projects/manufacturing/src/vite-env.d.ts
@@ -0,0 +1,6 @@
+///
+
+
+ {k.label}
+ {k.delta}
+
+ {k.value}
+
+
+
+ Shift Schedule · 2–10 PM
+
+ {shiftSummary.outgoingSupervisor} → {shiftSummary.incomingSupervisor} · click a bar to inspect the work order
+
+
+
+ {(["running", "setup", "hold", "stopped"] as const).map((t) => (
+
+
+ {t === "running" ? "Running" : t === "setup" ? "Setup" : t === "hold" ? "Hold" : "Stopped"}
+
+ ))}
+
+
+ {
+ const id = ids[0];
+ if (id) gridRef.current?.selectRows([id], true);
+ }}
+ />
+
+
+ Work Order Handoff
+ Expand a row for the handoff checklist & open issues
+
+