From 77eac770504a0dd5e8be40518e023b730e58cc46 Mon Sep 17 00:00:00 2001
From: masterdev <masterdev@users.noreply.local>
Date: Wed, 17 Jun 2026 03:10:05 +0100
Subject: [PATCH] Add selectable frontend language and form labels

---
 frontend/src/App.tsx                    | 520 ++++++++++++++----------
 frontend/src/components/MachineCard.tsx |  49 +--
 frontend/src/components/StatusBadge.tsx |  21 +-
 frontend/src/styles.css                 |  43 ++
 4 files changed, 377 insertions(+), 256 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3176a7c..6d8b97d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -18,6 +18,7 @@ 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;
+type Language = "en" | "fr";
 
 const today = new Date().toISOString().slice(0, 10);
 const initialFormErrors: FormErrors = {
@@ -27,15 +28,15 @@ const initialFormErrors: FormErrors = {
   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" },
-];
+function FieldLabel({ label, error, children }: { label: string; error?: ReactNode; children: ReactNode }) {
+  return (
+    <label className="form-field">
+      <span className="input-label">{label}</span>
+      {children}
+      {error}
+    </label>
+  );
+}
 
 export default function App() {
   const [dashboard, setDashboard] = useState<DashboardSnapshot | null>(null);
@@ -47,6 +48,7 @@ export default function App() {
   const [dailyOee, setDailyOee] = useState<DailyOee | null>(null);
   const [selectedMachineId, setSelectedMachineId] = useState<number | null>(null);
   const [selectedOrderId, setSelectedOrderId] = useState<number | null>(null);
+  const [language, setLanguage] = useState<Language>(() => (localStorage.getItem("plast-track-language") as Language | null) ?? "en");
   const [activeModule, setActiveModule] = useState<ModuleKey>("atelier");
   const [machineFilter, setMachineFilter] = useState("all");
   const [machineSort, setMachineSort] = useState("code");
@@ -71,6 +73,20 @@ export default function App() {
   const refreshTimer = useRef<number | null>(null);
   const toastTimers = useRef<Record<string, number>>({});
 
+  function t(en: string, fr: string) {
+    return language === "fr" ? fr : en;
+  }
+
+  const moduleTabs: Array<{ key: ModuleKey; label: string; description: string }> = [
+    { key: "atelier", label: t("Workshop", "Atelier"), description: t("Machines view", "Vue machines") },
+    { key: "machine", label: "Machine", description: t("Cycles and events", "Cycles et evenements") },
+    { key: "trs", label: "OEE/TRS", description: t("Daily performance", "Performance jour") },
+    { key: "orders", label: t("Orders", "OF"), description: t("Production orders", "Ordres fabrication") },
+    { key: "downtimes", label: t("Stops", "Arrets"), description: "Qualification" },
+    { key: "scrap", label: t("Scrap", "Rebuts"), description: t("Declaration", "Declaration") },
+    { key: "config", label: "Config", description: t("Signal setup", "Parametrage signal") },
+  ];
+
   async function loadDashboard() {
     const snapshot = await fetchJson<DashboardSnapshot>("/api/dashboard");
     setDashboard(snapshot);
@@ -128,6 +144,10 @@ export default function App() {
     });
   }, []);
 
+  useEffect(() => {
+    localStorage.setItem("plast-track-language", language);
+  }, [language]);
+
   useEffect(() => {
     const timer = window.setInterval(() => setNowMs(Date.now()), 30000);
     return () => window.clearInterval(timer);
@@ -291,17 +311,17 @@ export default function App() {
       form.reset();
       setSelectedOrderId(createdOrder.id);
       setFormErrors((current) => ({ ...current, order: {} }));
-      showToast("order", "Production order created.");
+      showToast("order", t("Production order created.", "Ordre de fabrication cree."));
       await loadAll();
     } catch (error) {
-      setActionErrors((current) => ({ ...current, order: error instanceof Error ? error.message : "Order creation failed." }));
+      setActionErrors((current) => ({ ...current, order: error instanceof Error ? error.message : t("Order creation failed.", "Creation OF echouee.") }));
     }
   }
 
   async function submitOrderUpdate(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (!selectedOrder) {
-      setActionErrors((current) => ({ ...current, order: "Select an OF before updating." }));
+      setActionErrors((current) => ({ ...current, order: t("Select an OF before updating.", "Selectionner un OF avant modification.") }));
       return;
     }
     const form = event.currentTarget;
@@ -325,10 +345,10 @@ export default function App() {
       });
 
       setFormErrors((current) => ({ ...current, order: {} }));
-      showToast("order", "Production order updated.");
+      showToast("order", t("Production order updated.", "Ordre de fabrication modifie."));
       await loadAll();
     } catch (error) {
-      setActionErrors((current) => ({ ...current, order: error instanceof Error ? error.message : "Order update failed." }));
+      setActionErrors((current) => ({ ...current, order: error instanceof Error ? error.message : t("Order update failed.", "Modification OF echouee.") }));
     }
   }
 
@@ -350,20 +370,20 @@ export default function App() {
 
       form.reset();
       setFormErrors((current) => ({ ...current, downtime: {} }));
-      showToast("downtime", "Downtime qualified.");
+      showToast("downtime", t("Downtime qualified.", "Arret qualifie."));
       await loadAll();
       if (selectedMachineId !== null) {
         await loadDetail(selectedMachineId);
       }
     } catch (error) {
-      setActionErrors((current) => ({ ...current, downtime: error instanceof Error ? error.message : "Downtime qualification failed." }));
+      setActionErrors((current) => ({ ...current, downtime: error instanceof Error ? error.message : t("Downtime qualification failed.", "Qualification arret echouee.") }));
     }
   }
 
   async function submitScrap(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (!selectedMachine) {
-      setActionErrors((current) => ({ ...current, scrap: "Select a machine before declaring scrap." }));
+      setActionErrors((current) => ({ ...current, scrap: t("Select a machine before declaring scrap.", "Selectionner une machine avant de declarer le rebut.") }));
       return;
     }
     const form = event.currentTarget;
@@ -385,10 +405,10 @@ export default function App() {
 
       form.reset();
       setFormErrors((current) => ({ ...current, scrap: {} }));
-      showToast("scrap", "Scrap declaration recorded.");
+      showToast("scrap", t("Scrap declaration recorded.", "Declaration rebut enregistree."));
       await loadAll();
     } catch (error) {
-      setActionErrors((current) => ({ ...current, scrap: error instanceof Error ? error.message : "Scrap declaration failed." }));
+      setActionErrors((current) => ({ ...current, scrap: error instanceof Error ? error.message : t("Scrap declaration failed.", "Declaration rebut echouee.") }));
     }
   }
 
@@ -398,14 +418,14 @@ export default function App() {
       await postJson(`/api/production-orders/${orderId}/${action}`);
       await loadAll();
     } catch (error) {
-      setActionErrors((current) => ({ ...current, order: error instanceof Error ? error.message : "Order status change failed." }));
+      setActionErrors((current) => ({ ...current, order: error instanceof Error ? error.message : t("Order status change failed.", "Changement statut OF echoue.") }));
     }
   }
 
   async function submitMachineConfig(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (!selectedMachine) {
-      setActionErrors((current) => ({ ...current, config: "Select a machine before saving configuration." }));
+      setActionErrors((current) => ({ ...current, config: t("Select a machine before saving configuration.", "Selectionner une machine avant d'enregistrer la configuration.") }));
       return;
     }
 
@@ -430,11 +450,11 @@ export default function App() {
       });
 
       setFormErrors((current) => ({ ...current, config: {} }));
-      showToast("config", "Machine configuration saved.");
+      showToast("config", t("Machine configuration saved.", "Configuration machine enregistree."));
       await loadAll();
       await loadDetail(selectedMachine.id);
     } catch (error) {
-      setActionErrors((current) => ({ ...current, config: error instanceof Error ? error.message : "Machine configuration failed." }));
+      setActionErrors((current) => ({ ...current, config: error instanceof Error ? error.message : t("Machine configuration failed.", "Configuration machine echouee.") }));
     }
   }
 
@@ -468,7 +488,7 @@ export default function App() {
   }
 
   function downtimeOptionLabel(downtime: Downtime) {
-    const state = downtime.end_time === null ? "Open" : "Ended";
+    const state = downtime.end_time === null ? t("Open", "Ouvert") : t("Ended", "Termine");
     const parts = [`#${downtime.id}`, state, downtimeMachineLabel(downtime)];
     if (downtime.order_number) {
       parts.push(downtime.order_number);
@@ -480,12 +500,12 @@ export default function App() {
     if (downtime.reason_code) {
       return downtime.reason_code;
     }
-    return downtime.end_time === null ? "Open - waiting qualification" : "Ended - waiting qualification";
+    return downtime.end_time === null ? t("Open - waiting qualification", "Ouvert - en attente de qualification") : t("Ended - waiting qualification", "Termine - en attente de qualification");
   }
 
   function formatDurationSeconds(durationSec: number | null) {
     if (durationSec === null) {
-      return "In progress";
+      return t("In progress", "En cours");
     }
     if (durationSec < 60) {
       return `${durationSec} s`;
@@ -507,29 +527,45 @@ export default function App() {
     return machines.find((machine) => machine.id === order.machine_id)?.code ?? `Machine ${order.machine_id}`;
   }
 
+  function connectionLabel(status: string) {
+    if (status === "Connecting") {
+      return t("Connecting", "Connexion");
+    }
+    if (status === "Load failed") {
+      return t("Load failed", "Chargement echoue");
+    }
+    if (status === "Live") {
+      return t("Live", "Direct");
+    }
+    if (status === "Reconnecting") {
+      return t("Reconnecting", "Reconnexion");
+    }
+    return status;
+  }
+
   function renderModule(): ReactNode {
     if (activeModule === "atelier") {
       return (
         <Panel
-          title="Dashboard Atelier"
-          subtitle="Machine status"
+          title={t("Workshop dashboard", "Tableau atelier")}
+          subtitle={t("Machine status", "Etat machines")}
           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>
+              <select value={machineFilter} onChange={(event) => setMachineFilter(event.target.value)} aria-label={t("Filter machines by status", "Filtrer les machines par etat")}>
+                <option value="all">{t("All statuses", "Tous les etats")}</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 value={machineSort} onChange={(event) => setMachineSort(event.target.value)} aria-label={t("Sort machines", "Trier les machines")}>
+                <option value="code">{t("Sort by code", "Trier par code")}</option>
+                <option value="oee">{t("Sort by OEE", "Trier par TRS")}</option>
+                <option value="stops">{t("Stops first", "Arrets en premier")}</option>
               </select>
               <button type="button" onClick={() => setIsWorkshopMode((current) => !current)}>
-                {isWorkshopMode ? "Exit fullscreen" : "Fullscreen atelier"}
+                {isWorkshopMode ? t("Exit fullscreen", "Quitter plein ecran") : t("Fullscreen workshop", "Atelier plein ecran")}
               </button>
             </div>
           }
@@ -541,6 +577,7 @@ export default function App() {
                 machine={machine}
                 selected={machine.id === selectedMachineId}
                 nowMs={nowMs}
+                language={language}
                 onSelect={() => selectMachine(machine.id, "machine")}
                 onCreateOrder={() => selectMachine(machine.id, "orders")}
                 onDeclareScrap={() => selectMachine(machine.id, "scrap")}
@@ -548,54 +585,54 @@ export default function App() {
               />
             ))}
           </div>
-          {visibleMachines.length === 0 ? <div className="empty-state">No machines match the current filter.</div> : null}
+          {visibleMachines.length === 0 ? <div className="empty-state">{t("No machines match the current filter.", "Aucune machine ne correspond au filtre.")}</div> : null}
         </Panel>
       );
     }
 
     if (activeModule === "machine") {
       return (
-        <Panel title="Detail Machine" subtitle={selectedMachine ? selectedMachine.code : "Select a machine"}>
+        <Panel title={t("Machine detail", "Detail machine")} subtitle={selectedMachine ? selectedMachine.code : t("Select a machine", "Selectionner une 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)}%`} />
+                <KpiBlock label={t("Status", "Etat")} value={<StatusBadge status={selectedMachine.status} language={language} />} />
+                <KpiBlock label={t("Current order", "OF courant")} value={selectedMachine.active_order?.order_number ?? t("None", "Aucun")} />
+                <KpiBlock label={t("Avg. cycle", "Cycle moyen")} value={`${selectedMachine.cycle_real_avg_sec.toFixed(1)} s`} />
+                <KpiBlock label={t("Daily OEE", "TRS jour")} value={`${Math.round(selectedMachine.today_oee.oee * 100)}%`} />
               </div>
 
               <div className="machine-context">
                 <div>
-                  <span className="meta-label">Machine</span>
+                  <span className="meta-label">{t("Machine", "Machine")}</span>
                   <strong>
                     {selectedMachine.brand} {selectedMachine.model}
                   </strong>
                 </div>
                 <div>
-                  <span className="meta-label">Signal setup</span>
+                  <span className="meta-label">{t("Signal setup", "Parametrage signal")}</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>
+                  <span className="meta-label">{t("Good parts", "Pieces bonnes")}</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>
+                  <h3>{t("Recent cycles", "Cycles recents")}</h3>
+                  <span>{detail.cycles.length} {t("samples", "echantillons")}</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>
+                  <h3>{t("Recent events", "Evenements recents")}</h3>
                   <ul className="list">
                     {detail.events.slice(0, 8).map((item) => (
                       <li key={item.id}>
@@ -606,7 +643,7 @@ export default function App() {
                   </ul>
                 </div>
                 <div>
-                  <h3>Downtime history</h3>
+                  <h3>{t("Downtime history", "Historique arrets")}</h3>
                   <ul className="list">
                     {detail.downtimes.slice(0, 8).map((item) => (
                       <li key={item.id}>
@@ -622,7 +659,7 @@ export default function App() {
               </div>
             </div>
           ) : (
-            <p>No machine selected.</p>
+            <p>{t("No machine selected.", "Aucune machine selectionnee.")}</p>
           )}
         </Panel>
       );
@@ -630,14 +667,14 @@ export default function App() {
 
     if (activeModule === "trs") {
       return (
-        <Panel title="Vue TRS Journalier" subtitle={today}>
+        <Panel title={t("Daily OEE view", "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)}%`} />
+                <KpiBlock label={t("Availability", "Disponibilite")} value={`${Math.round(dailyOee.overall.availability * 100)}%`} />
+                <KpiBlock label={t("Performance", "Performance")} value={`${Math.round(dailyOee.overall.performance * 100)}%`} />
+                <KpiBlock label={t("Quality", "Qualite")} value={`${Math.round(dailyOee.overall.quality * 100)}%`} />
               </div>
               <div className="oee-mini-list">
                 {machines.map((machine) => (
@@ -655,7 +692,10 @@ export default function App() {
 
     if (activeModule === "orders") {
       return (
-        <Panel title="Ordres de Fabrication" subtitle={selectedOrder ? `Selected ${selectedOrder.order_number}` : "Create and manage production orders"}>
+        <Panel
+          title={t("Production orders", "Ordres de fabrication")}
+          subtitle={selectedOrder ? `${t("Selected", "Selectionne")} ${selectedOrder.order_number}` : t("Create and manage production orders", "Creer et gerer les ordres de fabrication")}
+        >
           <div className="module-grid module-grid--form-table">
             <form
               className="form-grid module-form"
@@ -665,33 +705,44 @@ export default function App() {
               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}
+              <FieldLabel label={t("OF number", "Numero OF")} error={fieldError("order", "order_number")}>
+                <input name="order_number" placeholder="OF-2001" required />
+              </FieldLabel>
+              <FieldLabel label={t("Machine", "Machine")} error={fieldError("order", "machine_id")}>
+                <select name="machine_id" required defaultValue={selectedMachine?.id ?? ""}>
+                  <option value="" disabled>
+                    {t("Select machine", "Selectionner machine")}
                   </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")}
+                  {machines.map((machine) => (
+                    <option key={machine.id} value={machine.id}>
+                      {machine.code}
+                    </option>
+                  ))}
+                </select>
+              </FieldLabel>
+              <FieldLabel label={t("Article reference", "Reference article")} error={fieldError("order", "article_ref")}>
+                <input name="article_ref" placeholder="ART-001" required />
+              </FieldLabel>
+              <FieldLabel label={t("Article name", "Nom article")} error={fieldError("order", "article_name")}>
+                <input name="article_name" placeholder={t("Part name", "Nom piece")} required />
+              </FieldLabel>
+              <FieldLabel label={t("Mold reference", "Reference moule")}>
+                <input name="mold_ref" placeholder="M-001" />
+              </FieldLabel>
+              <FieldLabel label={t("Material reference", "Reference matiere")}>
+                <input name="material_ref" placeholder="PP" />
+              </FieldLabel>
+              <FieldLabel label={t("Planned quantity", "Quantite prevue")} error={fieldError("order", "planned_qty")}>
+                <input name="planned_qty" type="number" min="1" placeholder="1000" required />
+              </FieldLabel>
+              <FieldLabel label={t("Cavities", "Empreintes")} error={fieldError("order", "cavities")}>
+                <input name="cavities" type="number" min="1" defaultValue="1" required />
+              </FieldLabel>
+              <FieldLabel label={t("Theoretical cycle time", "Temps de cycle theorique")} error={fieldError("order", "theoretical_cycle_time_sec")}>
+                <input name="theoretical_cycle_time_sec" type="number" min="1" step="0.1" placeholder="20" required />
+              </FieldLabel>
               <button type="submit" className="primary-button" disabled={Object.keys(formErrors.order).length > 0}>
-                Create
+                {t("Create", "Creer")}
               </button>
               {actionError("order")}
               {toast("order")}
@@ -701,12 +752,12 @@ export default function App() {
               <table>
                 <thead>
                   <tr>
-                    <th>OF</th>
-                    <th>Machine</th>
-                    <th>Article</th>
-                    <th>Planned</th>
-                    <th>Status</th>
-                    <th>Actions</th>
+                    <th>{t("OF", "OF")}</th>
+                    <th>{t("Machine", "Machine")}</th>
+                    <th>{t("Article", "Article")}</th>
+                    <th>{t("Planned", "Prevu")}</th>
+                    <th>{t("Status", "Etat")}</th>
+                    <th>{t("Actions", "Actions")}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -723,13 +774,13 @@ export default function App() {
                       <td>{order.status}</td>
                       <td className="table-actions">
                         <button type="button" onClick={() => changeOrderStatus(order.id, "start")}>
-                          Start
+                          {t("Start", "Demarrer")}
                         </button>
                         <button type="button" onClick={() => changeOrderStatus(order.id, "pause")}>
-                          Pause
+                          {t("Pause", "Pause")}
                         </button>
                         <button type="button" onClick={() => changeOrderStatus(order.id, "close")}>
-                          Close
+                          {t("Close", "Cloturer")}
                         </button>
                       </td>
                     </tr>
@@ -742,28 +793,28 @@ export default function App() {
               <section className="order-detail">
                 <div className="order-detail__header">
                   <div>
-                    <span className="meta-label">OF detail</span>
+                    <span className="meta-label">{t("OF detail", "Detail OF")}</span>
                     <h3>{selectedOrder.order_number}</h3>
                   </div>
-                  <StatusBadge status={selectedOrder.status} />
+                  <StatusBadge status={selectedOrder.status} language={language} />
                 </div>
                 <div className="order-detail__meta">
                   <div>
-                    <span className="meta-label">Machine</span>
+                    <span className="meta-label">{t("Machine", "Machine")}</span>
                     <strong>{orderMachineLabel(selectedOrder)}</strong>
                   </div>
                   <div>
-                    <span className="meta-label">Article</span>
+                    <span className="meta-label">{t("Article", "Article")}</span>
                     <strong>{selectedOrder.article_ref} / {selectedOrder.article_name}</strong>
                   </div>
                   <div>
-                    <span className="meta-label">Cycle / cavities</span>
+                    <span className="meta-label">{t("Cycle / cavities", "Cycle / empreintes")}</span>
                     <strong>{selectedOrder.theoretical_cycle_time_sec} s / {selectedOrder.cavities}</strong>
                   </div>
                   <div>
-                    <span className="meta-label">Dates</span>
+                    <span className="meta-label">{t("Dates", "Dates")}</span>
                     <strong>
-                      {selectedOrder.started_at ? new Date(selectedOrder.started_at).toLocaleString() : "Not started"}
+                      {selectedOrder.started_at ? new Date(selectedOrder.started_at).toLocaleString() : t("Not started", "Non demarre")}
                       {selectedOrder.ended_at ? ` -> ${new Date(selectedOrder.ended_at).toLocaleString()}` : ""}
                     </strong>
                   </div>
@@ -777,38 +828,48 @@ export default function App() {
                   onChangeCapture={(event) => validateForm(event.currentTarget, "order")}
                   noValidate
                 >
-                  <input name="order_number" defaultValue={selectedOrder.order_number} placeholder="OF number" required />
-                  <select name="machine_id" required defaultValue={selectedOrder.machine_id}>
-                    {machines.map((machine) => (
-                      <option key={machine.id} value={machine.id}>
-                        {machine.code}
-                      </option>
-                    ))}
-                  </select>
-                  <input name="article_ref" defaultValue={selectedOrder.article_ref} placeholder="Article ref" required />
-                  <input name="article_name" defaultValue={selectedOrder.article_name} placeholder="Article name" required />
-                  <input name="mold_ref" defaultValue={selectedOrder.mold_ref ?? ""} placeholder="Mold ref" />
-                  <input name="material_ref" defaultValue={selectedOrder.material_ref ?? ""} placeholder="Material ref" />
-                  <input name="planned_qty" type="number" min="1" defaultValue={selectedOrder.planned_qty} placeholder="Planned qty" required />
-                  <input name="cavities" type="number" min="1" defaultValue={selectedOrder.cavities} placeholder="Cavities" required />
-                  <input
-                    name="theoretical_cycle_time_sec"
-                    type="number"
-                    min="1"
-                    step="0.1"
-                    defaultValue={selectedOrder.theoretical_cycle_time_sec}
-                    placeholder="Theoretical cycle"
-                    required
-                  />
+                  <FieldLabel label={t("OF number", "Numero OF")}>
+                    <input name="order_number" defaultValue={selectedOrder.order_number} required />
+                  </FieldLabel>
+                  <FieldLabel label={t("Machine", "Machine")}>
+                    <select name="machine_id" required defaultValue={selectedOrder.machine_id}>
+                      {machines.map((machine) => (
+                        <option key={machine.id} value={machine.id}>
+                          {machine.code}
+                        </option>
+                      ))}
+                    </select>
+                  </FieldLabel>
+                  <FieldLabel label={t("Article reference", "Reference article")}>
+                    <input name="article_ref" defaultValue={selectedOrder.article_ref} required />
+                  </FieldLabel>
+                  <FieldLabel label={t("Article name", "Nom article")}>
+                    <input name="article_name" defaultValue={selectedOrder.article_name} required />
+                  </FieldLabel>
+                  <FieldLabel label={t("Mold reference", "Reference moule")}>
+                    <input name="mold_ref" defaultValue={selectedOrder.mold_ref ?? ""} />
+                  </FieldLabel>
+                  <FieldLabel label={t("Material reference", "Reference matiere")}>
+                    <input name="material_ref" defaultValue={selectedOrder.material_ref ?? ""} />
+                  </FieldLabel>
+                  <FieldLabel label={t("Planned quantity", "Quantite prevue")}>
+                    <input name="planned_qty" type="number" min="1" defaultValue={selectedOrder.planned_qty} required />
+                  </FieldLabel>
+                  <FieldLabel label={t("Cavities", "Empreintes")}>
+                    <input name="cavities" type="number" min="1" defaultValue={selectedOrder.cavities} required />
+                  </FieldLabel>
+                  <FieldLabel label={t("Theoretical cycle time", "Temps de cycle theorique")}>
+                    <input name="theoretical_cycle_time_sec" type="number" min="1" step="0.1" defaultValue={selectedOrder.theoretical_cycle_time_sec} required />
+                  </FieldLabel>
                   <button type="submit" className="primary-button" disabled={Object.keys(formErrors.order).length > 0}>
-                    Update OF
+                    {t("Update OF", "Modifier OF")}
                   </button>
                   {actionError("order")}
                   {toast("order")}
                 </form>
               </section>
             ) : (
-              <div className="empty-state">Select an OF to see and update details.</div>
+              <div className="empty-state">{t("Select an OF to see and update details.", "Selectionner un OF pour voir et modifier les details.")}</div>
             )}
           </div>
         </Panel>
@@ -818,11 +879,11 @@ export default function App() {
     if (activeModule === "downtimes") {
       return (
         <Panel
-          title="Qualification Arret"
+          title={t("Stop qualification", "Qualification arret")}
           subtitle={
             selectedMachine
-              ? `${selectedMachineUnqualifiedDowntimes.length} unqualified for ${selectedMachine.code} / ${unqualifiedDowntimes.length} total`
-              : `${unqualifiedDowntimes.length} unqualified downtime(s)`
+              ? `${selectedMachineUnqualifiedDowntimes.length} ${t("unqualified for", "non qualifies pour")} ${selectedMachine.code} / ${unqualifiedDowntimes.length} ${t("total", "total")}`
+              : `${unqualifiedDowntimes.length} ${t("unqualified downtime(s)", "arret(s) non qualifies")}`
           }
         >
           <div className="module-grid module-grid--form-table">
@@ -835,33 +896,38 @@ export default function App() {
               onChangeCapture={(event) => validateForm(event.currentTarget, "downtime")}
               noValidate
             >
-              <select name="downtime_id" required defaultValue={selectedMachineUnqualifiedDowntimes[0]?.id ?? ""}>
-                <option value="" disabled>
-                  Downtime to qualify
-                </option>
-                {downtimeOptions.map((downtime) => (
-                  <option key={downtime.id} value={downtime.id}>
-                    {downtimeOptionLabel(downtime)}
+              <FieldLabel label={t("Downtime to qualify", "Arret a qualifier")} error={fieldError("downtime", "downtime_id")}>
+                <select name="downtime_id" required defaultValue={selectedMachineUnqualifiedDowntimes[0]?.id ?? ""}>
+                  <option value="" disabled>
+                    {t("Select downtime", "Selectionner arret")}
                   </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}
+                  {downtimeOptions.map((downtime) => (
+                    <option key={downtime.id} value={downtime.id}>
+                      {downtimeOptionLabel(downtime)}
+                    </option>
+                  ))}
+                </select>
+              </FieldLabel>
+              <FieldLabel label={t("Reason", "Cause")} error={fieldError("downtime", "reason_code")}>
+                <select name="reason_code" required defaultValue="">
+                  <option value="" disabled>
+                    {t("Select reason", "Selectionner cause")}
                   </option>
-                ))}
-              </select>
-              {fieldError("downtime", "reason_code")}
-              <input name="qualified_by" placeholder="Operator" required />
-              {fieldError("downtime", "qualified_by")}
-              <textarea name="comment" placeholder="Comment" rows={3} />
+                  {references?.downtime_reasons.map((reason) => (
+                    <option key={reason.code} value={reason.code}>
+                      {reason.label}
+                    </option>
+                  ))}
+                </select>
+              </FieldLabel>
+              <FieldLabel label={t("Qualified by", "Qualifie par")} error={fieldError("downtime", "qualified_by")}>
+                <input name="qualified_by" placeholder={t("Operator name", "Nom operateur")} required />
+              </FieldLabel>
+              <FieldLabel label={t("Comment", "Commentaire")}>
+                <textarea name="comment" placeholder={t("Optional comment", "Commentaire optionnel")} rows={3} />
+              </FieldLabel>
               <button type="submit" className="primary-button" disabled={Object.keys(formErrors.downtime).length > 0}>
-                Qualify
+                {t("Qualify", "Qualifier")}
               </button>
               {actionError("downtime")}
               {toast("downtime")}
@@ -870,7 +936,7 @@ export default function App() {
             <div className="downtime-board">
               {selectedMachine ? (
                 <section className="downtime-focus">
-                  <span className="meta-label">Selected machine</span>
+                  <span className="meta-label">{t("Selected machine", "Machine selectionnee")}</span>
                   <strong>{selectedMachine.code}</strong>
                   {selectedMachineUnqualifiedDowntimes.length > 0 ? (
                     <ul className="timeline-list timeline-list--compact">
@@ -885,13 +951,13 @@ export default function App() {
                       ))}
                     </ul>
                   ) : (
-                    <div className="empty-state">No unqualified downtime for {selectedMachine.code}.</div>
+                    <div className="empty-state">{t("No unqualified downtime for", "Aucun arret non qualifie pour")} {selectedMachine.code}.</div>
                   )}
                 </section>
               ) : null}
 
               <section>
-                <span className="meta-label">All stops waiting qualification</span>
+                <span className="meta-label">{t("All stops waiting qualification", "Tous les arrets en attente de qualification")}</span>
                 <ul className="timeline-list">
                   {downtimeOptions.map((item) => (
                     <li key={item.id} className={item.machine_id === selectedMachineId ? "is-current-machine" : ""}>
@@ -909,7 +975,7 @@ export default function App() {
               </section>
 
               <section>
-                <span className="meta-label">Qualified stops history</span>
+                <span className="meta-label">{t("Qualified stops history", "Historique arrets qualifies")}</span>
                 <ul className="timeline-list timeline-list--qualified">
                   {qualifiedDowntimes.map((item) => (
                     <li key={item.id} className={item.machine_id === selectedMachineId ? "is-current-machine" : ""}>
@@ -919,7 +985,7 @@ export default function App() {
                         </strong>
                         <span>
                           {item.order_number ? `${item.order_number} / ` : ""}
-                          {item.qualified_by ? `By ${item.qualified_by} / ` : ""}
+                          {item.qualified_by ? `${t("By", "Par")} ${item.qualified_by} / ` : ""}
                           {formatDurationSeconds(item.duration_sec)}
                           {item.comment ? ` / ${item.comment}` : ""}
                         </span>
@@ -931,10 +997,10 @@ export default function App() {
                     </li>
                   ))}
                 </ul>
-                {qualifiedDowntimes.length === 0 ? <div className="empty-state">No qualified downtime history yet.</div> : null}
+                {qualifiedDowntimes.length === 0 ? <div className="empty-state">{t("No qualified downtime history yet.", "Aucun historique d'arret qualifie.")}</div> : null}
               </section>
             </div>
-            {unqualifiedDowntimes.length === 0 ? <div className="empty-state">No downtime currently needs qualification.</div> : null}
+            {unqualifiedDowntimes.length === 0 ? <div className="empty-state">{t("No downtime currently needs qualification.", "Aucun arret a qualifier actuellement.")}</div> : null}
           </div>
         </Panel>
       );
@@ -942,7 +1008,7 @@ export default function App() {
 
     if (activeModule === "scrap") {
       return (
-        <Panel title="Saisie Rebut" subtitle={selectedMachine?.code ?? "Select machine"}>
+        <Panel title={t("Scrap declaration", "Saisie rebut")} subtitle={selectedMachine?.code ?? t("Select machine", "Selectionner machine")}>
           <div className="module-grid module-grid--form-table">
             <form
               className="form-grid module-form"
@@ -952,24 +1018,29 @@ export default function App() {
               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}
+              <FieldLabel label={t("Operator", "Operateur")} error={fieldError("scrap", "operator_name")}>
+                <input name="operator_name" placeholder={t("Operator name", "Nom operateur")} required />
+              </FieldLabel>
+              <FieldLabel label={t("Quantity", "Quantite")} error={fieldError("scrap", "quantity")}>
+                <input name="quantity" type="number" min="1" placeholder="1" required />
+              </FieldLabel>
+              <FieldLabel label={t("Scrap reason", "Cause rebut")} error={fieldError("scrap", "reason_code")}>
+                <select name="reason_code" required defaultValue="">
+                  <option value="" disabled>
+                    {t("Select scrap reason", "Selectionner cause rebut")}
                   </option>
-                ))}
-              </select>
-              {fieldError("scrap", "reason_code")}
-              <textarea name="comment" placeholder="Comment" rows={3} />
+                  {references?.scrap_reasons.map((reason) => (
+                    <option key={reason.code} value={reason.code}>
+                      {reason.label}
+                    </option>
+                  ))}
+                </select>
+              </FieldLabel>
+              <FieldLabel label={t("Comment", "Commentaire")}>
+                <textarea name="comment" placeholder={t("Optional comment", "Commentaire optionnel")} rows={3} />
+              </FieldLabel>
               <button type="submit" className="primary-button" disabled={!selectedMachine || Object.keys(formErrors.scrap).length > 0}>
-                Record
+                {t("Record", "Enregistrer")}
               </button>
               {actionError("scrap")}
               {toast("scrap")}
@@ -985,14 +1056,14 @@ export default function App() {
                 </li>
               ))}
             </ul>
-            {scraps.length === 0 ? <div className="empty-state">No scrap has been declared yet.</div> : null}
+            {scraps.length === 0 ? <div className="empty-state">{t("No scrap has been declared yet.", "Aucun rebut declare pour le moment.")}</div> : null}
           </div>
         </Panel>
       );
     }
 
     return (
-      <Panel title="Config Machine" subtitle={selectedMachine?.code ?? "No machine selected"}>
+      <Panel title={t("Machine config", "Config machine")} subtitle={selectedMachine?.code ?? t("No machine selected", "Aucune machine selectionnee")}>
         {selectedMachine ? (
           <form
             className="form-grid config-form"
@@ -1003,55 +1074,45 @@ export default function App() {
             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 ?? ""} />
+            <FieldLabel label={t("Display name", "Nom affiche")} error={fieldError("config", "name")}>
+              <input name="name" defaultValue={selectedMachine.config.name} required />
+            </FieldLabel>
+            <FieldLabel label={t("Brand", "Marque")}>
+              <input name="brand" defaultValue={selectedMachine.config.brand ?? ""} />
+            </FieldLabel>
+            <FieldLabel label={t("Model", "Modele")}>
+              <input name="model" defaultValue={selectedMachine.config.model ?? ""} />
+            </FieldLabel>
             <label className="checkbox-field">
               <input name="is_active" type="checkbox" defaultChecked={selectedMachine.config.is_active} />
-              <span>Active on dashboard</span>
+              <span>{t("Active on dashboard", "Active sur tableau de bord")}</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")}
+            <FieldLabel label={t("Cycle signal edge", "Front signal cycle")}>
+              <select name="cycle_signal_edge" defaultValue={selectedMachine.config.cycle_signal_edge}>
+                <option value="rising">{t("Rising edge", "Front montant")}</option>
+                <option value="falling">{t("Falling edge", "Front descendant")}</option>
+              </select>
+            </FieldLabel>
+            <FieldLabel label={t("Debounce", "Anti-rebond")} error={fieldError("config", "debounce_ms")}>
+              <input name="debounce_ms" type="number" min="0" defaultValue={selectedMachine.config.debounce_ms} required />
+            </FieldLabel>
+            <FieldLabel label={t("Minimum cycle time", "Temps cycle minimum")} error={fieldError("config", "min_cycle_time_sec")}>
+              <input name="min_cycle_time_sec" type="number" min="1" defaultValue={selectedMachine.config.min_cycle_time_sec} required />
+            </FieldLabel>
+            <FieldLabel label={t("Maximum cycle time", "Temps cycle maximum")} error={fieldError("config", "max_cycle_time_sec")}>
+              <input name="max_cycle_time_sec" type="number" min="1" defaultValue={selectedMachine.config.max_cycle_time_sec} required />
+            </FieldLabel>
+            <FieldLabel label={t("Stop detection delay", "Delai detection arret")} error={fieldError("config", "stop_detection_delay_sec")}>
+              <input name="stop_detection_delay_sec" type="number" min="1" defaultValue={selectedMachine.config.stop_detection_delay_sec} required />
+            </FieldLabel>
             <button type="submit" className="primary-button" disabled={Object.keys(formErrors.config).length > 0}>
-              Save
+              {t("Save", "Enregistrer")}
             </button>
             {actionError("config")}
             {toast("config")}
           </form>
         ) : (
-          <p>No machine selected.</p>
+          <p>{t("No machine selected.", "Aucune machine selectionnee.")}</p>
         )}
       </Panel>
     );
@@ -1063,25 +1124,34 @@ export default function App() {
         <header className="hero">
           <div>
             <p className="eyebrow">Plast Track MVP</p>
-            <h1>Workshop supervision</h1>
+            <h1>{t("Workshop supervision", "Supervision atelier")}</h1>
           </div>
-          <div className="hero__status">
-            <span className="hero__dot" aria-hidden="true" />
-            <strong>{connectionStatus}</strong>
-            {errorMessage ? <p>{errorMessage}</p> : null}
+          <div className="hero__controls">
+            <label className="language-select">
+              <span>{t("Language", "Langue")}</span>
+              <select value={language} onChange={(event) => setLanguage(event.target.value as Language)}>
+                <option value="en">English</option>
+                <option value="fr">Francais</option>
+              </select>
+            </label>
+            <div className="hero__status">
+              <span className="hero__dot" aria-hidden="true" />
+              <strong>{connectionLabel(connectionStatus)}</strong>
+              {errorMessage ? <p>{errorMessage}</p> : null}
+            </div>
           </div>
         </header>
 
-        {connectionStatus === "Reconnecting" ? <div className="connection-banner">Reconnecting...</div> : null}
+        {connectionStatus === "Reconnecting" ? <div className="connection-banner">{t("Reconnecting...", "Reconnexion...")}</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={`${summaryMetrics.unqualifiedDowntimes} unqualified`} />
-          <KpiBlock label="Output / scrap" value={`${summaryMetrics.producedQty} / ${summaryMetrics.scrapQty}`} subLabel="Pieces today" />
+        <section className="summary-ribbon" aria-label={t("Workshop summary", "Resume atelier")}>
+          <KpiBlock label={t("Global OEE", "TRS global")} value={`${summaryMetrics.oee}%`} subLabel={t("Daily aggregate", "Agregat journalier")} tone="dark" />
+          <KpiBlock label={t("Production", "Production")} value={summaryMetrics.production} subLabel={`${machines.length} ${t("machines monitored", "machines supervisees")}`} />
+          <KpiBlock label={t("Open stops", "Arrets ouverts")} value={summaryMetrics.openDowntimes} subLabel={`${summaryMetrics.unqualifiedDowntimes} ${t("unqualified", "non qualifies")}`} />
+          <KpiBlock label={t("Output / scrap", "Production / rebut")} value={`${summaryMetrics.producedQty} / ${summaryMetrics.scrapQty}`} subLabel={t("Pieces today", "Pieces du jour")} />
         </section>
 
-        <nav className="module-tabs" aria-label="Modules">
+        <nav className="module-tabs" aria-label={t("Modules", "Modules")}>
           {moduleTabs.map((tab) => (
             <button
               key={tab.key}
diff --git a/frontend/src/components/MachineCard.tsx b/frontend/src/components/MachineCard.tsx
index f681809..1fe59c5 100644
--- a/frontend/src/components/MachineCard.tsx
+++ b/frontend/src/components/MachineCard.tsx
@@ -5,15 +5,16 @@ type MachineCardProps = {
   machine: MachineCardData;
   selected: boolean;
   nowMs: number;
+  language: "en" | "fr";
   onSelect: () => void;
   onCreateOrder: () => void;
   onDeclareScrap: () => void;
   onQualifyDowntime: () => void;
 };
 
-function formatDurationSince(timestamp: string | null, nowMs: number) {
+function formatDurationSince(timestamp: string | null, nowMs: number, language: "en" | "fr") {
   if (!timestamp) {
-    return "No timestamp";
+    return language === "fr" ? "Sans horodatage" : "No timestamp";
   }
 
   const elapsedMs = Math.max(nowMs - new Date(timestamp).getTime(), 0);
@@ -34,6 +35,7 @@ export default function MachineCard({
   machine,
   selected,
   nowMs,
+  language,
   onSelect,
   onCreateOrder,
   onDeclareScrap,
@@ -41,6 +43,7 @@ export default function MachineCard({
 }: MachineCardProps) {
   const progressPercent = Math.round(machine.order_progress * 100);
   const hasActiveOrder = Boolean(machine.active_order);
+  const t = (en: string, fr: string) => (language === "fr" ? fr : en);
 
   return (
     <article className={`machine-card ${selected ? "is-selected" : ""}`}>
@@ -51,86 +54,86 @@ export default function MachineCard({
             <p className="machine-card__meta">{[machine.brand, machine.model].filter(Boolean).join(" / ")}</p>
           </div>
           <div className="machine-card__status-stack">
-            <StatusBadge status={machine.status} />
-            <span className="duration-badge">{formatDurationSince(machine.status_since, nowMs)}</span>
+            <StatusBadge status={machine.status} language={language} />
+            <span className="duration-badge">{formatDurationSince(machine.status_since, nowMs, language)}</span>
           </div>
         </div>
 
         <div className="machine-card__hero">
           <div>
-            <span className="machine-card__label">Current order</span>
-            <strong>{machine.active_order?.order_number ?? "No active order"}</strong>
+            <span className="machine-card__label">{t("Current order", "OF courant")}</span>
+            <strong>{machine.active_order?.order_number ?? t("No active order", "Aucun OF actif")}</strong>
           </div>
           <div>
-            <span className="machine-card__label">OEE today</span>
+            <span className="machine-card__label">{t("OEE today", "TRS jour")}</span>
             <strong>{Math.round(machine.today_oee.oee * 100)}%</strong>
           </div>
         </div>
 
         {!hasActiveOrder ? (
           <div className="machine-card__empty">
-            <strong>No active OF</strong>
-            <span>Create or start a production order before counting production for this press.</span>
+            <strong>{t("No active OF", "Aucun OF actif")}</strong>
+            <span>{t("Create or start a production order before counting production for this press.", "Creer ou demarrer un OF avant de compter la production sur cette presse.")}</span>
           </div>
         ) : (
           <>
             <div className="machine-card__stats">
               <div>
-                <span>Article</span>
+                <span>{t("Article", "Article")}</span>
                 <strong>{machine.active_order?.article_name ?? "-"}</strong>
               </div>
               <div>
-                <span>Mold</span>
+                <span>{t("Mold", "Moule")}</span>
                 <strong>{machine.active_order?.mold_ref ?? "-"}</strong>
               </div>
               <div>
-                <span>Real cycle</span>
+                <span>{t("Real cycle", "Cycle reel")}</span>
                 <strong>{machine.cycle_real_avg_sec.toFixed(1)} s</strong>
               </div>
               <div>
-                <span>Theoretical</span>
+                <span>{t("Theoretical", "Theorique")}</span>
                 <strong>{machine.active_order?.theoretical_cycle_time_sec ?? 0} s</strong>
               </div>
               <div>
-                <span>Produced</span>
+                <span>{t("Produced", "Produit")}</span>
                 <strong>{machine.produced_qty}</strong>
               </div>
               <div>
-                <span>Scrap</span>
+                <span>{t("Scrap", "Rebut")}</span>
                 <strong>{machine.scrap_qty}</strong>
               </div>
               <div>
-                <span>Last stop</span>
-                <strong>{machine.last_downtime?.reason_code ?? "None"}</strong>
+                <span>{t("Last stop", "Dernier arret")}</span>
+                <strong>{machine.last_downtime?.reason_code ?? t("None", "Aucun")}</strong>
               </div>
               <div className="machine-card__compact-kpi">
-                <span>Quality</span>
+                <span>{t("Quality", "Qualite")}</span>
                 <strong>{Math.round(machine.today_oee.quality * 100)}%</strong>
               </div>
             </div>
 
             <div className="machine-card__progress">
               <div className="machine-card__progress-head">
-                <span>Order progress</span>
+                <span>{t("Order progress", "Avancement OF")}</span>
                 <strong>{progressPercent}%</strong>
               </div>
               <div className="progress-track">
-                <progress value={progressPercent} max={100} aria-label={`Order progress ${progressPercent}%`} />
+                <progress value={progressPercent} max={100} aria-label={`${t("Order progress", "Avancement OF")} ${progressPercent}%`} />
               </div>
             </div>
           </>
         )}
       </button>
 
-      <div className="machine-card__actions" aria-label={`${machine.code} quick actions`}>
+      <div className="machine-card__actions" aria-label={`${machine.code} ${t("quick actions", "actions rapides")}`}>
         <button type="button" onClick={onCreateOrder}>
           OF
         </button>
         <button type="button" onClick={onDeclareScrap} disabled={!hasActiveOrder}>
-          Rebut
+          {t("Scrap", "Rebut")}
         </button>
         <button type="button" onClick={onQualifyDowntime} disabled={!machine.open_downtime}>
-          Arret
+          {t("Stop", "Arret")}
         </button>
       </div>
     </article>
diff --git a/frontend/src/components/StatusBadge.tsx b/frontend/src/components/StatusBadge.tsx
index c3f8ecd..fbbc021 100644
--- a/frontend/src/components/StatusBadge.tsx
+++ b/frontend/src/components/StatusBadge.tsx
@@ -1,15 +1,20 @@
 type StatusBadgeProps = {
   status: string;
+  language?: "en" | "fr";
 };
 
-const labels: Record<string, string> = {
-  production: "Production",
-  arret_non_qualifie: "Arret non qualifie",
-  arret_qualifie: "Arret qualifie",
-  reglage: "Reglage",
-  hors_planning: "Hors planning",
+const labels: Record<string, { en: string; fr: string }> = {
+  production: { en: "Production", fr: "Production" },
+  arret_non_qualifie: { en: "Unqualified stop", fr: "Arret non qualifie" },
+  arret_qualifie: { en: "Qualified stop", fr: "Arret qualifie" },
+  reglage: { en: "Setup", fr: "Reglage" },
+  hors_planning: { en: "Off plan", fr: "Hors planning" },
+  planned: { en: "Planned", fr: "Planifie" },
+  running: { en: "Running", fr: "En cours" },
+  paused: { en: "Paused", fr: "En pause" },
+  closed: { en: "Closed", fr: "Cloture" },
 };
 
-export default function StatusBadge({ status }: StatusBadgeProps) {
-  return <span className={`status-badge status-badge--${status}`}>{(labels[status] ?? status).toUpperCase()}</span>;
+export default function StatusBadge({ status, language = "en" }: StatusBadgeProps) {
+  return <span className={`status-badge status-badge--${status}`}>{(labels[status]?.[language] ?? status).toUpperCase()}</span>;
 }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 060aa39..28c1741 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -836,6 +836,19 @@ th {
   gap: 10px;
 }
 
+.form-field {
+  display: grid;
+  gap: 6px;
+}
+
+.input-label {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
 .form-grid input,
 .form-grid select,
 .form-grid textarea {
@@ -962,6 +975,35 @@ table button {
   overflow-wrap: anywhere;
 }
 
+.hero__controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.language-select {
+  display: grid;
+  gap: 4px;
+  min-width: 130px;
+}
+
+.language-select span {
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.language-select select {
+  min-height: 44px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-panel);
+  color: var(--text-primary);
+}
+
 table {
   width: 100%;
   border-collapse: collapse;
@@ -1024,6 +1066,7 @@ tr.is-selected-row td {
   }
 
   .hero,
+  .hero__controls,
   .machine-card__top,
   .machine-card__hero,
   .machine-card__progress-head,