feat: Add currency and unit support across models, routes, and templates; enhance UI for consumption, costs, and production

static/js/production.js

@@ -1,6 +1,6 @@
 document.addEventListener("DOMContentLoaded", () => {
   const dataElement = document.getElementById("production-data");
-  let data = { scenarios: [], production: {} };
+  let data = { scenarios: [], production: {}, unit_options: [] };
 
   if (dataElement) {
     try {
@@ -12,6 +12,9 @@ document.addEventListener("DOMContentLoaded", () => {
             parsed.production && typeof parsed.production === "object"
               ? parsed.production
               : {},
+          unit_options: Array.isArray(parsed.unit_options)
+            ? parsed.unit_options
+            : [],
         };
       }
     } catch (error) {
@@ -26,6 +29,8 @@ document.addEventListener("DOMContentLoaded", () => {
   const emptyState = document.getElementById("production-empty");
   const form = document.getElementById("production-form");
   const feedbackEl = document.getElementById("production-feedback");
+  const unitSelect = document.getElementById("production-form-unit");
+  const unitSymbolInput = document.getElementById("production-form-unit-symbol");
 
   const showFeedback = (message, type = "success") => {
     if (!feedbackEl) {
@@ -50,6 +55,16 @@ document.addEventListener("DOMContentLoaded", () => {
       maximumFractionDigits: 2,
     });
 
+  const formatMeasurement = (amount, symbol, name) => {
+    if (symbol) {
+      return `${formatAmount(amount)} ${symbol}`;
+    }
+    if (name) {
+      return `${formatAmount(amount)} ${name}`;
+    }
+    return formatAmount(amount);
+  };
+
   const renderProductionRows = (scenarioId) => {
     if (!tableBody || !tableWrapper || !emptyState) {
       return;
@@ -74,7 +89,11 @@ document.addEventListener("DOMContentLoaded", () => {
     records.forEach((record) => {
       const row = document.createElement("tr");
       row.innerHTML = `
-        <td>${formatAmount(record.amount)}</td>
+        <td>${formatMeasurement(
+          record.amount,
+          record.unit_symbol,
+          record.unit_name
+        )}</td>
         <td>${record.description || "—"}</td>
       `;
       tableBody.appendChild(row);
@@ -108,10 +127,14 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const formData = new FormData(form);
     const scenarioId = formData.get("scenario_id");
+    const unitName = formData.get("unit_name");
+    const unitSymbol = formData.get("unit_symbol");
     const payload = {
       scenario_id: scenarioId ? Number(scenarioId) : null,
       amount: Number(formData.get("amount")),
       description: formData.get("description") || null,
+      unit_name: unitName ? String(unitName) : null,
+      unit_symbol: unitSymbol ? String(unitSymbol) : null,
     };
 
     try {
@@ -137,6 +160,7 @@ document.addEventListener("DOMContentLoaded", () => {
       productionByScenario[mapKey].push(result);
 
       form.reset();
+      syncUnitSelection();
       showFeedback("Production output saved.", "success");
 
       if (filterSelect && filterSelect.value === String(result.scenario_id)) {
@@ -151,6 +175,29 @@ document.addEventListener("DOMContentLoaded", () => {
     form.addEventListener("submit", submitProduction);
   }
 
+  const syncUnitSelection = () => {
+    if (!unitSelect || !unitSymbolInput) {
+      return;
+    }
+    if (!unitSelect.value && unitSelect.options.length > 0) {
+      const firstOption = Array.from(unitSelect.options).find(
+        (option) => option.value
+      );
+      if (firstOption) {
+        firstOption.selected = true;
+      }
+    }
+    const selectedOption = unitSelect.options[unitSelect.selectedIndex];
+    unitSymbolInput.value = selectedOption
+      ? selectedOption.getAttribute("data-symbol") || ""
+      : "";
+  };
+
+  if (unitSelect) {
+    unitSelect.addEventListener("change", syncUnitSelection);
+    syncUnitSelection();
+  }
+
   if (filterSelect && filterSelect.value) {
     renderProductionRows(filterSelect.value);
   }