Initial Plast Track MVP

frontend/src/App.tsx

@@ -0,0 +1,857 @@
+import { FormEvent, ReactNode, useEffect, useRef, useState } from "react";
+
+import CycleBarChart from "./components/CycleBarChart";
+import KpiBlock from "./components/KpiBlock";
+import MachineCard from "./components/MachineCard";
+import Panel from "./components/Panel";
+import StatusBadge from "./components/StatusBadge";
+import { fetchJson, patchJson, postJson, WS_URL } from "./lib/api";
+import { Cycle, DailyOee, DashboardSnapshot, Downtime, MachineEvent, ProductionOrder, ReferenceData, Scrap } from "./lib/types";
+
+type DetailState = {
+  events: MachineEvent[];
+  cycles: Cycle[];
+  downtimes: Downtime[];
+};
+
+type ToastKey = "config" | "order" | "downtime" | "scrap";
+type ModuleKey = "atelier" | "machine" | "trs" | "orders" | "downtimes" | "scrap" | "config";
+type FormErrors = Record<ToastKey, Record<string, string>>;
+type FormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+const today = new Date().toISOString().slice(0, 10);
+const initialFormErrors: FormErrors = {
+  config: {},
+  order: {},
+  downtime: {},
+  scrap: {},
+};
+
+const moduleTabs: Array<{ key: ModuleKey; label: string; description: string }> = [
+  { key: "atelier", label: "Atelier", description: "Vue machines" },
+  { key: "machine", label: "Machine", description: "Cycles et evenements" },
+  { key: "trs", label: "TRS", description: "Performance jour" },
+  { key: "orders", label: "OF", description: "Ordres fabrication" },
+  { key: "downtimes", label: "Arrets", description: "Qualification" },
+  { key: "scrap", label: "Rebuts", description: "Declaration" },
+  { key: "config", label: "Config", description: "Parametrage signal" },
+];
+
+export default function App() {
+  const [dashboard, setDashboard] = useState<DashboardSnapshot | null>(null);
+  const [orders, setOrders] = useState<ProductionOrder[]>([]);
+  const [openDowntimes, setOpenDowntimes] = useState<Downtime[]>([]);
+  const [scraps, setScraps] = useState<Scrap[]>([]);
+  const [references, setReferences] = useState<ReferenceData | null>(null);
+  const [dailyOee, setDailyOee] = useState<DailyOee | null>(null);
+  const [selectedMachineId, setSelectedMachineId] = useState<number | null>(null);
+  const [activeModule, setActiveModule] = useState<ModuleKey>("atelier");
+  const [machineFilter, setMachineFilter] = useState("all");
+  const [machineSort, setMachineSort] = useState("code");
+  const [isWorkshopMode, setIsWorkshopMode] = useState(false);
+  const [nowMs, setNowMs] = useState(Date.now());
+  const [detail, setDetail] = useState<DetailState>({ events: [], cycles: [], downtimes: [] });
+  const [connectionStatus, setConnectionStatus] = useState("Connecting");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [formErrors, setFormErrors] = useState<FormErrors>(initialFormErrors);
+  const [actionErrors, setActionErrors] = useState<Record<ToastKey, string | null>>({
+    config: null,
+    order: null,
+    downtime: null,
+    scrap: null,
+  });
+  const [toasts, setToasts] = useState<Record<ToastKey, string | null>>({
+    config: null,
+    order: null,
+    downtime: null,
+    scrap: null,
+  });
+  const refreshTimer = useRef<number | null>(null);
+  const toastTimers = useRef<Record<string, number>>({});
+
+  async function loadDashboard() {
+    const snapshot = await fetchJson<DashboardSnapshot>("/api/dashboard");
+    setDashboard(snapshot);
+    if (selectedMachineId === null && snapshot.machines.length > 0) {
+      setSelectedMachineId(snapshot.machines[0].id);
+    }
+  }
+
+  async function loadCollections() {
+    const [loadedOrders, loadedOpenDowntimes, loadedScraps, loadedReferences, loadedDailyOee] = await Promise.all([
+      fetchJson<ProductionOrder[]>("/api/production-orders"),
+      fetchJson<Downtime[]>("/api/downtimes/open"),
+      fetchJson<Scrap[]>("/api/scraps"),
+      fetchJson<ReferenceData>("/api/reference-data"),
+      fetchJson<DailyOee>(`/api/oee/daily?date=${today}`),
+    ]);
+
+    setOrders(loadedOrders);
+    setOpenDowntimes(loadedOpenDowntimes);
+    setScraps(loadedScraps);
+    setReferences(loadedReferences);
+    setDailyOee(loadedDailyOee);
+  }
+
+  async function loadDetail(machineId: number) {
+    const [events, cycles, downtimes] = await Promise.all([
+      fetchJson<MachineEvent[]>(`/api/machines/${machineId}/events`),
+      fetchJson<Cycle[]>(`/api/machines/${machineId}/cycles`),
+      fetchJson<Downtime[]>(`/api/machines/${machineId}/downtimes`),
+    ]);
+
+    setDetail({ events, cycles, downtimes });
+  }
+
+  async function loadAll() {
+    setErrorMessage(null);
+    await Promise.all([loadDashboard(), loadCollections()]);
+  }
+
+  function showToast(key: ToastKey, message: string) {
+    window.clearTimeout(toastTimers.current[key]);
+    setToasts((current) => ({ ...current, [key]: message }));
+    toastTimers.current[key] = window.setTimeout(() => {
+      setToasts((current) => ({ ...current, [key]: null }));
+    }, 3000);
+  }
+
+  useEffect(() => {
+    loadAll().catch((error: Error) => {
+      setErrorMessage(error.message);
+      setConnectionStatus("Load failed");
+    });
+  }, []);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setNowMs(Date.now()), 30000);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    if (selectedMachineId === null) {
+      return;
+    }
+    loadDetail(selectedMachineId).catch((error: Error) => setErrorMessage(error.message));
+  }, [selectedMachineId]);
+
+  useEffect(() => {
+    let socket: WebSocket | null = null;
+    let reconnectTimer: number | null = null;
+    let attempt = 0;
+    let isDisposed = false;
+
+    function connect() {
+      socket = new WebSocket(WS_URL);
+      socket.onopen = () => {
+        attempt = 0;
+        setConnectionStatus("Live");
+      };
+      socket.onclose = () => {
+        if (isDisposed) {
+          return;
+        }
+        setConnectionStatus("Reconnecting");
+        const delayMs = Math.min(30000, 1000 * 2 ** attempt);
+        attempt += 1;
+        reconnectTimer = window.setTimeout(connect, delayMs);
+      };
+      socket.onerror = () => setConnectionStatus("Reconnecting");
+      socket.onmessage = (event) => {
+        const message = JSON.parse(event.data) as { type: string; data?: DashboardSnapshot };
+        if (message.type === "snapshot" && message.data) {
+          setDashboard(message.data);
+          return;
+        }
+
+        if (refreshTimer.current) {
+          window.clearTimeout(refreshTimer.current);
+        }
+        refreshTimer.current = window.setTimeout(() => {
+          loadAll().catch((error: Error) => setErrorMessage(error.message));
+          if (selectedMachineId !== null) {
+            loadDetail(selectedMachineId).catch((error: Error) => setErrorMessage(error.message));
+          }
+        }, 300);
+      };
+    }
+
+    connect();
+
+    return () => {
+      isDisposed = true;
+      if (refreshTimer.current) {
+        window.clearTimeout(refreshTimer.current);
+      }
+      if (reconnectTimer) {
+        window.clearTimeout(reconnectTimer);
+      }
+      socket?.close();
+    };
+  }, [selectedMachineId]);
+
+  const selectedMachine = dashboard?.machines.find((machine) => machine.id === selectedMachineId) ?? null;
+  const machines = dashboard?.machines ?? [];
+  const summaryMetrics = {
+    production: machines.filter((machine) => machine.status === "production").length,
+    openDowntimes: openDowntimes.length,
+    producedQty: machines.reduce((total, machine) => total + machine.produced_qty, 0),
+    scrapQty: machines.reduce((total, machine) => total + machine.scrap_qty, 0),
+    oee: Math.round((dailyOee?.overall.oee ?? 0) * 100),
+  };
+  const machineStatuses = Array.from(new Set(machines.map((machine) => machine.status))).sort();
+  const visibleMachines = [...machines]
+    .filter((machine) => machineFilter === "all" || machine.status === machineFilter)
+    .sort((left, right) => {
+      if (machineSort === "oee") {
+        return right.today_oee.oee - left.today_oee.oee;
+      }
+      if (machineSort === "stops") {
+        return Number(Boolean(right.open_downtime)) - Number(Boolean(left.open_downtime));
+      }
+      return left.code.localeCompare(right.code);
+    });
+
+  function getFormControls(form: HTMLFormElement) {
+    return Array.from(form.elements).filter((element): element is FormControl => {
+      return element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement;
+    });
+  }
+
+  function validateForm(form: HTMLFormElement, key: ToastKey) {
+    const nextErrors: Record<string, string> = {};
+    getFormControls(form).forEach((control) => {
+      if (!control.name || control.disabled || control.type === "submit" || control.type === "button") {
+        return;
+      }
+      if (!control.checkValidity()) {
+        nextErrors[control.name] = control.validationMessage || "Invalid value.";
+      }
+    });
+    setFormErrors((current) => ({ ...current, [key]: nextErrors }));
+    return Object.keys(nextErrors).length === 0;
+  }
+
+  function handleFormBlur(key: ToastKey, form: HTMLFormElement) {
+    validateForm(form, key);
+  }
+
+  function fieldError(key: ToastKey, name: string) {
+    const message = formErrors[key][name];
+    return message ? <span className="field-error">{message}</span> : null;
+  }
+
+  function actionError(key: ToastKey) {
+    return actionErrors[key] ? <div className="inline-error">{actionErrors[key]}</div> : null;
+  }
+
+  async function submitOrder(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = event.currentTarget;
+    if (!validateForm(form, "order")) {
+      return;
+    }
+    const formData = new FormData(form);
+
+    try {
+      setActionErrors((current) => ({ ...current, order: null }));
+      await postJson("/api/production-orders", {
+        order_number: formData.get("order_number"),
+        machine_id: Number(formData.get("machine_id")),
+        article_ref: formData.get("article_ref"),
+        article_name: formData.get("article_name"),
+        mold_ref: formData.get("mold_ref"),
+        material_ref: formData.get("material_ref"),
+        planned_qty: Number(formData.get("planned_qty")),
+        cavities: Number(formData.get("cavities")),
+        theoretical_cycle_time_sec: Number(formData.get("theoretical_cycle_time_sec")),
+      });
+
+      form.reset();
+      setFormErrors((current) => ({ ...current, order: {} }));
+      showToast("order", "Production order created.");
+      await loadAll();
+    } catch (error) {
+      setActionErrors((current) => ({ ...current, order: error instanceof Error ? error.message : "Order creation failed." }));
+    }
+  }
+
+  async function submitDowntimeQualification(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = event.currentTarget;
+    if (!validateForm(form, "downtime")) {
+      return;
+    }
+    const formData = new FormData(form);
+
+    try {
+      setActionErrors((current) => ({ ...current, downtime: null }));
+      await postJson(`/api/downtimes/${formData.get("downtime_id")}/qualify`, {
+        reason_code: formData.get("reason_code"),
+        comment: formData.get("comment"),
+        qualified_by: formData.get("qualified_by"),
+      });
+
+      form.reset();
+      setFormErrors((current) => ({ ...current, downtime: {} }));
+      showToast("downtime", "Downtime qualified.");
+      await loadAll();
+      if (selectedMachineId !== null) {
+        await loadDetail(selectedMachineId);
+      }
+    } catch (error) {
+      setActionErrors((current) => ({ ...current, downtime: error instanceof Error ? error.message : "Downtime qualification failed." }));
+    }
+  }
+
+  async function submitScrap(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!selectedMachine) {
+      setActionErrors((current) => ({ ...current, scrap: "Select a machine before declaring scrap." }));
+      return;
+    }
+    const form = event.currentTarget;
+    if (!validateForm(form, "scrap")) {
+      return;
+    }
+    const formData = new FormData(form);
+
+    try {
+      setActionErrors((current) => ({ ...current, scrap: null }));
+      await postJson("/api/scraps", {
+        machine_id: selectedMachine.code,
+        production_order_id: selectedMachine.active_order?.id ?? null,
+        quantity: Number(formData.get("quantity")),
+        reason_code: formData.get("reason_code"),
+        comment: formData.get("comment"),
+        operator_name: formData.get("operator_name"),
+      });
+
+      form.reset();
+      setFormErrors((current) => ({ ...current, scrap: {} }));
+      showToast("scrap", "Scrap declaration recorded.");
+      await loadAll();
+    } catch (error) {
+      setActionErrors((current) => ({ ...current, scrap: error instanceof Error ? error.message : "Scrap declaration failed." }));
+    }
+  }
+
+  async function changeOrderStatus(orderId: number, action: "start" | "pause" | "close") {
+    try {
+      setActionErrors((current) => ({ ...current, order: null }));
+      await postJson(`/api/production-orders/${orderId}/${action}`);
+      await loadAll();
+    } catch (error) {
+      setActionErrors((current) => ({ ...current, order: error instanceof Error ? error.message : "Order status change failed." }));
+    }
+  }
+
+  async function submitMachineConfig(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!selectedMachine) {
+      setActionErrors((current) => ({ ...current, config: "Select a machine before saving configuration." }));
+      return;
+    }
+
+    const form = event.currentTarget;
+    if (!validateForm(form, "config")) {
+      return;
+    }
+
+    const formData = new FormData(form);
+    try {
+      setActionErrors((current) => ({ ...current, config: null }));
+      await patchJson(`/api/machines/${selectedMachine.id}/config`, {
+        name: formData.get("name"),
+        brand: formData.get("brand"),
+        model: formData.get("model"),
+        is_active: formData.get("is_active") === "on",
+        cycle_signal_edge: formData.get("cycle_signal_edge"),
+        debounce_ms: Number(formData.get("debounce_ms")),
+        min_cycle_time_sec: Number(formData.get("min_cycle_time_sec")),
+        max_cycle_time_sec: Number(formData.get("max_cycle_time_sec")),
+        stop_detection_delay_sec: Number(formData.get("stop_detection_delay_sec")),
+      });
+
+      setFormErrors((current) => ({ ...current, config: {} }));
+      showToast("config", "Machine configuration saved.");
+      await loadAll();
+      await loadDetail(selectedMachine.id);
+    } catch (error) {
+      setActionErrors((current) => ({ ...current, config: error instanceof Error ? error.message : "Machine configuration failed." }));
+    }
+  }
+
+  function selectMachine(machineId: number, module: ModuleKey = activeModule) {
+    setSelectedMachineId(machineId);
+    setActiveModule(module);
+    if (module !== "atelier") {
+      setIsWorkshopMode(false);
+    }
+  }
+
+  function renderEventLabel(item: MachineEvent) {
+    if (item.event_type !== "digital_input_changed") {
+      return item.event_type;
+    }
+    const inputName = String(item.payload.input_name ?? "input");
+    const inputValue = String(item.payload.input_value ?? "");
+    return `${inputName} -> ${inputValue}`;
+  }
+
+  function toast(key: ToastKey) {
+    return toasts[key] ? <div className="inline-toast">{toasts[key]}</div> : null;
+  }
+
+  function renderModule(): ReactNode {
+    if (activeModule === "atelier") {
+      return (
+        <Panel
+          title="Dashboard Atelier"
+          subtitle="Machine status"
+          actions={
+            <div className="panel-actions">
+              <select value={machineFilter} onChange={(event) => setMachineFilter(event.target.value)} aria-label="Filter machines by status">
+                <option value="all">All statuses</option>
+                {machineStatuses.map((status) => (
+                  <option key={status} value={status}>
+                    {status}
+                  </option>
+                ))}
+              </select>
+              <select value={machineSort} onChange={(event) => setMachineSort(event.target.value)} aria-label="Sort machines">
+                <option value="code">Sort by code</option>
+                <option value="oee">Sort by OEE</option>
+                <option value="stops">Stops first</option>
+              </select>
+              <button type="button" onClick={() => setIsWorkshopMode((current) => !current)}>
+                {isWorkshopMode ? "Exit fullscreen" : "Fullscreen atelier"}
+              </button>
+            </div>
+          }
+        >
+          <div className="machine-grid">
+            {visibleMachines.map((machine) => (
+              <MachineCard
+                key={machine.id}
+                machine={machine}
+                selected={machine.id === selectedMachineId}
+                nowMs={nowMs}
+                onSelect={() => selectMachine(machine.id, "machine")}
+                onCreateOrder={() => selectMachine(machine.id, "orders")}
+                onDeclareScrap={() => selectMachine(machine.id, "scrap")}
+                onQualifyDowntime={() => selectMachine(machine.id, "downtimes")}
+              />
+            ))}
+          </div>
+          {visibleMachines.length === 0 ? <div className="empty-state">No machines match the current filter.</div> : null}
+        </Panel>
+      );
+    }
+
+    if (activeModule === "machine") {
+      return (
+        <Panel title="Detail Machine" subtitle={selectedMachine ? selectedMachine.code : "Select a machine"}>
+          {selectedMachine ? (
+            <div className="detail-stack">
+              <div className="metric-row">
+                <KpiBlock label="Status" value={<StatusBadge status={selectedMachine.status} />} />
+                <KpiBlock label="Current order" value={selectedMachine.active_order?.order_number ?? "None"} />
+                <KpiBlock label="Avg. cycle" value={`${selectedMachine.cycle_real_avg_sec.toFixed(1)} s`} />
+                <KpiBlock label="Daily OEE" value={`${Math.round(selectedMachine.today_oee.oee * 100)}%`} />
+              </div>
+
+              <div className="machine-context">
+                <div>
+                  <span className="meta-label">Machine</span>
+                  <strong>
+                    {selectedMachine.brand} {selectedMachine.model}
+                  </strong>
+                </div>
+                <div>
+                  <span className="meta-label">Signal setup</span>
+                  <strong>
+                    {selectedMachine.config.cycle_signal_edge} edge / {selectedMachine.config.debounce_ms} ms /{" "}
+                    {selectedMachine.config.stop_detection_delay_sec} s
+                  </strong>
+                </div>
+                <div>
+                  <span className="meta-label">Good parts</span>
+                  <strong>{selectedMachine.produced_qty - selectedMachine.scrap_qty}</strong>
+                </div>
+              </div>
+
+              <section className="cycle-panel">
+                <div className="cycle-panel__header">
+                  <h3>Recent cycles</h3>
+                  <span>{detail.cycles.length} samples</span>
+                </div>
+                <CycleBarChart cycles={detail.cycles} theoreticalCycleTimeSec={selectedMachine.active_order?.theoretical_cycle_time_sec ?? 0} />
+              </section>
+
+              <div className="detail-columns">
+                <div>
+                  <h3>Recent events</h3>
+                  <ul className="list">
+                    {detail.events.slice(0, 8).map((item) => (
+                      <li key={item.id}>
+                        <strong>{renderEventLabel(item)}</strong>
+                        <span>{new Date(item.timestamp).toLocaleString()}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div>
+                  <h3>Downtime history</h3>
+                  <ul className="list">
+                    {detail.downtimes.slice(0, 8).map((item) => (
+                      <li key={item.id}>
+                        <strong>{item.reason_code ?? "Waiting qualification"}</strong>
+                        <span>{new Date(item.start_time).toLocaleString()}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <p>No machine selected.</p>
+          )}
+        </Panel>
+      );
+    }
+
+    if (activeModule === "trs") {
+      return (
+        <Panel title="Vue TRS Journalier" subtitle={today}>
+          {dailyOee ? (
+            <div className="module-grid module-grid--split">
+              <div className="oee-grid">
+                <KpiBlock label="OEE" value={`${Math.round(dailyOee.overall.oee * 100)}%`} tone="dark" />
+                <KpiBlock label="Availability" value={`${Math.round(dailyOee.overall.availability * 100)}%`} />
+                <KpiBlock label="Performance" value={`${Math.round(dailyOee.overall.performance * 100)}%`} />
+                <KpiBlock label="Quality" value={`${Math.round(dailyOee.overall.quality * 100)}%`} />
+              </div>
+              <div className="oee-mini-list">
+                {machines.map((machine) => (
+                  <button key={machine.id} type="button" className="oee-mini-list__item" onClick={() => selectMachine(machine.id, "machine")}>
+                    <span>{machine.code}</span>
+                    <strong>{Math.round(machine.today_oee.oee * 100)}%</strong>
+                  </button>
+                ))}
+              </div>
+            </div>
+          ) : null}
+        </Panel>
+      );
+    }
+
+    if (activeModule === "orders") {
+      return (
+        <Panel title="Ordres de Fabrication" subtitle="Create and manage production orders">
+          <div className="module-grid module-grid--form-table">
+            <form
+              className="form-grid module-form"
+              onSubmit={submitOrder}
+              onBlurCapture={(event) => handleFormBlur("order", event.currentTarget)}
+              onInputCapture={(event) => validateForm(event.currentTarget, "order")}
+              onChangeCapture={(event) => validateForm(event.currentTarget, "order")}
+              noValidate
+            >
+              <input name="order_number" placeholder="OF number" required />
+              {fieldError("order", "order_number")}
+              <select name="machine_id" required defaultValue={selectedMachine?.id ?? ""}>
+                <option value="" disabled>
+                  Machine
+                </option>
+                {machines.map((machine) => (
+                  <option key={machine.id} value={machine.id}>
+                    {machine.code}
+                  </option>
+                ))}
+              </select>
+              {fieldError("order", "machine_id")}
+              <input name="article_ref" placeholder="Article ref" required />
+              {fieldError("order", "article_ref")}
+              <input name="article_name" placeholder="Article name" required />
+              {fieldError("order", "article_name")}
+              <input name="mold_ref" placeholder="Mold ref" />
+              <input name="material_ref" placeholder="Material ref" />
+              <input name="planned_qty" type="number" min="1" placeholder="Planned qty" required />
+              {fieldError("order", "planned_qty")}
+              <input name="cavities" type="number" min="1" defaultValue="1" placeholder="Cavities" required />
+              {fieldError("order", "cavities")}
+              <input name="theoretical_cycle_time_sec" type="number" min="1" step="0.1" placeholder="Theoretical cycle" required />
+              {fieldError("order", "theoretical_cycle_time_sec")}
+              <button type="submit" className="primary-button" disabled={Object.keys(formErrors.order).length > 0}>
+                Create
+              </button>
+              {actionError("order")}
+              {toast("order")}
+            </form>
+
+            <div className="table-wrap">
+              <table>
+                <thead>
+                  <tr>
+                    <th>OF</th>
+                    <th>Machine</th>
+                    <th>Article</th>
+                    <th>Status</th>
+                    <th>Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {orders.map((order) => (
+                    <tr key={order.id}>
+                      <td>{order.order_number}</td>
+                      <td>{order.machine_id}</td>
+                      <td>{order.article_name}</td>
+                      <td>{order.status}</td>
+                      <td className="table-actions">
+                        <button type="button" onClick={() => changeOrderStatus(order.id, "start")}>
+                          Start
+                        </button>
+                        <button type="button" onClick={() => changeOrderStatus(order.id, "pause")}>
+                          Pause
+                        </button>
+                        <button type="button" onClick={() => changeOrderStatus(order.id, "close")}>
+                          Close
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </Panel>
+      );
+    }
+
+    if (activeModule === "downtimes") {
+      return (
+        <Panel title="Qualification Arret" subtitle={`${openDowntimes.length} open downtime(s)`}>
+          <div className="module-grid module-grid--form-table">
+            <form
+              className="form-grid module-form"
+              onSubmit={submitDowntimeQualification}
+              onBlurCapture={(event) => handleFormBlur("downtime", event.currentTarget)}
+              onInputCapture={(event) => validateForm(event.currentTarget, "downtime")}
+              onChangeCapture={(event) => validateForm(event.currentTarget, "downtime")}
+              noValidate
+            >
+              <select name="downtime_id" required defaultValue="">
+                <option value="" disabled>
+                  Open downtime
+                </option>
+                {openDowntimes.map((downtime) => (
+                  <option key={downtime.id} value={downtime.id}>
+                    #{downtime.id} machine {downtime.machine_id}
+                  </option>
+                ))}
+              </select>
+              {fieldError("downtime", "downtime_id")}
+              <select name="reason_code" required defaultValue="">
+                <option value="" disabled>
+                  Reason
+                </option>
+                {references?.downtime_reasons.map((reason) => (
+                  <option key={reason.code} value={reason.code}>
+                    {reason.label}
+                  </option>
+                ))}
+              </select>
+              {fieldError("downtime", "reason_code")}
+              <input name="qualified_by" placeholder="Operator" required />
+              {fieldError("downtime", "qualified_by")}
+              <textarea name="comment" placeholder="Comment" rows={3} />
+              <button type="submit" className="primary-button" disabled={Object.keys(formErrors.downtime).length > 0}>
+                Qualify
+              </button>
+              {actionError("downtime")}
+              {toast("downtime")}
+            </form>
+
+            <ul className="timeline-list">
+              {openDowntimes.map((item) => (
+                <li key={item.id}>
+                  <div>
+                    <strong>Machine {item.machine_id}</strong>
+                    <span>Waiting qualification</span>
+                  </div>
+                  <time>{new Date(item.start_time).toLocaleString()}</time>
+                </li>
+              ))}
+            </ul>
+            {openDowntimes.length === 0 ? <div className="empty-state">No open downtime currently needs qualification.</div> : null}
+          </div>
+        </Panel>
+      );
+    }
+
+    if (activeModule === "scrap") {
+      return (
+        <Panel title="Saisie Rebut" subtitle={selectedMachine?.code ?? "Select machine"}>
+          <div className="module-grid module-grid--form-table">
+            <form
+              className="form-grid module-form"
+              onSubmit={submitScrap}
+              onBlurCapture={(event) => handleFormBlur("scrap", event.currentTarget)}
+              onInputCapture={(event) => validateForm(event.currentTarget, "scrap")}
+              onChangeCapture={(event) => validateForm(event.currentTarget, "scrap")}
+              noValidate
+            >
+              <input name="operator_name" placeholder="Operator" required />
+              {fieldError("scrap", "operator_name")}
+              <input name="quantity" type="number" min="1" placeholder="Quantity" required />
+              {fieldError("scrap", "quantity")}
+              <select name="reason_code" required defaultValue="">
+                <option value="" disabled>
+                  Scrap reason
+                </option>
+                {references?.scrap_reasons.map((reason) => (
+                  <option key={reason.code} value={reason.code}>
+                    {reason.label}
+                  </option>
+                ))}
+              </select>
+              {fieldError("scrap", "reason_code")}
+              <textarea name="comment" placeholder="Comment" rows={3} />
+              <button type="submit" className="primary-button" disabled={!selectedMachine || Object.keys(formErrors.scrap).length > 0}>
+                Record
+              </button>
+              {actionError("scrap")}
+              {toast("scrap")}
+            </form>
+
+            <ul className="list">
+              {scraps.slice(0, 12).map((scrap) => (
+                <li key={scrap.id}>
+                  <strong>
+                    {scrap.quantity} pcs / {scrap.reason_code}
+                  </strong>
+                  <span>{new Date(scrap.timestamp).toLocaleString()}</span>
+                </li>
+              ))}
+            </ul>
+            {scraps.length === 0 ? <div className="empty-state">No scrap has been declared yet.</div> : null}
+          </div>
+        </Panel>
+      );
+    }
+
+    return (
+      <Panel title="Config Machine" subtitle={selectedMachine?.code ?? "No machine selected"}>
+        {selectedMachine ? (
+          <form
+            className="form-grid config-form"
+            onSubmit={submitMachineConfig}
+            onBlurCapture={(event) => handleFormBlur("config", event.currentTarget)}
+            onInputCapture={(event) => validateForm(event.currentTarget, "config")}
+            onChangeCapture={(event) => validateForm(event.currentTarget, "config")}
+            key={selectedMachine.id}
+            noValidate
+          >
+            <input name="name" placeholder="Display name" defaultValue={selectedMachine.config.name} required />
+            {fieldError("config", "name")}
+            <input name="brand" placeholder="Brand" defaultValue={selectedMachine.config.brand ?? ""} />
+            <input name="model" placeholder="Model" defaultValue={selectedMachine.config.model ?? ""} />
+            <label className="checkbox-field">
+              <input name="is_active" type="checkbox" defaultChecked={selectedMachine.config.is_active} />
+              <span>Active on dashboard</span>
+            </label>
+            <select name="cycle_signal_edge" defaultValue={selectedMachine.config.cycle_signal_edge}>
+              <option value="rising">Rising edge</option>
+              <option value="falling">Falling edge</option>
+            </select>
+            <input name="debounce_ms" type="number" min="0" defaultValue={selectedMachine.config.debounce_ms} placeholder="Debounce ms" required />
+            {fieldError("config", "debounce_ms")}
+            <input
+              name="min_cycle_time_sec"
+              type="number"
+              min="1"
+              defaultValue={selectedMachine.config.min_cycle_time_sec}
+              placeholder="Min cycle sec"
+              required
+            />
+            {fieldError("config", "min_cycle_time_sec")}
+            <input
+              name="max_cycle_time_sec"
+              type="number"
+              min="1"
+              defaultValue={selectedMachine.config.max_cycle_time_sec}
+              placeholder="Max cycle sec"
+              required
+            />
+            {fieldError("config", "max_cycle_time_sec")}
+            <input
+              name="stop_detection_delay_sec"
+              type="number"
+              min="1"
+              defaultValue={selectedMachine.config.stop_detection_delay_sec}
+              placeholder="Stop delay sec"
+              required
+            />
+            {fieldError("config", "stop_detection_delay_sec")}
+            <button type="submit" className="primary-button" disabled={Object.keys(formErrors.config).length > 0}>
+              Save
+            </button>
+            {actionError("config")}
+            {toast("config")}
+          </form>
+        ) : (
+          <p>No machine selected.</p>
+        )}
+      </Panel>
+    );
+  }
+
+  return (
+    <div className={`app-shell ${isWorkshopMode && activeModule === "atelier" ? "app-shell--workshop" : ""}`}>
+      <main className="workspace">
+        <header className="hero">
+          <div>
+            <p className="eyebrow">Plast Track MVP</p>
+            <h1>Workshop supervision</h1>
+          </div>
+          <div className="hero__status">
+            <span className="hero__dot" aria-hidden="true" />
+            <strong>{connectionStatus}</strong>
+            {errorMessage ? <p>{errorMessage}</p> : null}
+          </div>
+        </header>
+
+        {connectionStatus === "Reconnecting" ? <div className="connection-banner">Reconnecting...</div> : null}
+
+        <section className="summary-ribbon" aria-label="Workshop summary">
+          <KpiBlock label="Global OEE" value={`${summaryMetrics.oee}%`} subLabel="Daily aggregate" tone="dark" />
+          <KpiBlock label="Production" value={summaryMetrics.production} subLabel={`${machines.length} machines monitored`} />
+          <KpiBlock label="Open stops" value={summaryMetrics.openDowntimes} subLabel="Awaiting qualification" />
+          <KpiBlock label="Output / scrap" value={`${summaryMetrics.producedQty} / ${summaryMetrics.scrapQty}`} subLabel="Pieces today" />
+        </section>
+
+        <nav className="module-tabs" aria-label="Modules">
+          {moduleTabs.map((tab) => (
+            <button
+              key={tab.key}
+              type="button"
+              className={`module-tabs__button ${activeModule === tab.key ? "is-active" : ""}`}
+              onClick={() => {
+                setActiveModule(tab.key);
+                if (tab.key !== "atelier") {
+                  setIsWorkshopMode(false);
+                }
+              }}
+            >
+              <span>{tab.label}</span>
+              <small>{tab.description}</small>
+            </button>
+          ))}
+        </nav>
+
+        <section className="module-view">{renderModule()}</section>
+      </main>
+    </div>
+  );
+}