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

static/js/consumption.js

@@ -1,6 +1,6 @@
 document.addEventListener("DOMContentLoaded", () => {
   const dataElement = document.getElementById("consumption-data");
-  let data = { scenarios: [], consumption: {} };
+  let data = { scenarios: [], consumption: {}, unit_options: [] };
 
   if (dataElement) {
     try {
@@ -12,6 +12,9 @@ document.addEventListener("DOMContentLoaded", () => {
             parsed.consumption && typeof parsed.consumption === "object"
               ? parsed.consumption
               : {},
+          unit_options: Array.isArray(parsed.unit_options)
+            ? parsed.unit_options
+            : [],
         };
       }
     } catch (error) {
@@ -26,6 +29,10 @@ document.addEventListener("DOMContentLoaded", () => {
   const emptyState = document.getElementById("consumption-empty");
   const form = document.getElementById("consumption-form");
   const feedbackEl = document.getElementById("consumption-feedback");
+  const unitSelect = document.getElementById("consumption-form-unit");
+  const unitSymbolInput = document.getElementById(
+    "consumption-form-unit-symbol"
+  );
 
   const showFeedback = (message, type = "success") => {
     if (!feedbackEl) {
@@ -50,6 +57,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 renderConsumptionRows = (scenarioId) => {
     if (!tableBody || !tableWrapper || !emptyState) {
       return;
@@ -73,7 +90,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);
@@ -107,10 +128,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 {
@@ -136,6 +161,7 @@ document.addEventListener("DOMContentLoaded", () => {
       consumptionByScenario[mapKey].push(result);
 
       form.reset();
+      syncUnitSelection();
       showFeedback("Consumption record saved.", "success");
 
       if (filterSelect && filterSelect.value === String(result.scenario_id)) {
@@ -150,6 +176,29 @@ document.addEventListener("DOMContentLoaded", () => {
     form.addEventListener("submit", submitConsumption);
   }
 
+  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) {
     renderConsumptionRows(filterSelect.value);
   }