Refactor templates to externalize JavaScript: Moved inline scripts to separate JS files and added JSON data attributes for better maintainability and performance. Updated consumption, costs, equipment, maintenance, production, reporting, and simulations templates accordingly.

templates/reporting.html

@@ -33,138 +33,9 @@ block content %}
   </div>
 </section>
 
-<script>
-  const reportingSummaries = {{ report_summaries | tojson | safe }};
-  const REPORT_FIELDS = [
-    { key: "iterations", label: "Iterations", decimals: 0 },
-    { key: "mean", label: "Mean Result", decimals: 2 },
-    { key: "variance", label: "Variance", decimals: 2 },
-    { key: "std_dev", label: "Std. Dev", decimals: 2 },
-    { key: "percentile_5", label: "Percentile 5", decimals: 2 },
-    { key: "percentile_95", label: "Percentile 95", decimals: 2 },
-    { key: "value_at_risk_95", label: "Value at Risk (95%)", decimals: 2 },
-    { key: "expected_shortfall_95", label: "Expected Shortfall (95%)", decimals: 2 },
-  ];
-
-  const tableWrapper = document.getElementById("reporting-table-wrapper");
-  const tableBody = document.getElementById("reporting-table-body");
-  const emptyState = document.getElementById("reporting-empty");
-  const refreshButton = document.getElementById("report-refresh");
-  const feedbackEl = document.getElementById("report-feedback");
-
-  function formatNumber(value, decimals = 2) {
-    if (value === null || value === undefined || Number.isNaN(Number(value))) {
-      return "—";
-    }
-    return Number(value).toLocaleString(undefined, {
-      minimumFractionDigits: decimals,
-      maximumFractionDigits: decimals,
-    });
-  }
-
-  function showFeedback(message, type = "success") {
-    if (!feedbackEl) {
-      return;
-    }
-    feedbackEl.textContent = message;
-    feedbackEl.classList.remove("hidden", "success", "error");
-    feedbackEl.classList.add(type);
-  }
-
-  function hideFeedback() {
-    if (!feedbackEl) {
-      return;
-    }
-    feedbackEl.classList.add("hidden");
-    feedbackEl.textContent = "";
-  }
-
-  function renderReportingTable(summaryData) {
-    if (!tableBody || !tableWrapper || !emptyState) {
-      return;
-    }
-
-    tableBody.innerHTML = "";
-
-    if (!summaryData.length) {
-      emptyState.classList.remove("hidden");
-      tableWrapper.classList.add("hidden");
-      return;
-    }
-
-    emptyState.classList.add("hidden");
-    tableWrapper.classList.remove("hidden");
-
-    summaryData.forEach((entry) => {
-      const row = document.createElement("tr");
-      const scenarioCell = document.createElement("td");
-      scenarioCell.textContent = entry.scenario_name;
-      row.appendChild(scenarioCell);
-
-      REPORT_FIELDS.forEach((field) => {
-        const cell = document.createElement("td");
-        const source = field.key === "iterations" ? entry : entry.summary || {};
-        cell.textContent = formatNumber(source[field.key], field.decimals);
-        row.appendChild(cell);
-      });
-
-      tableBody.appendChild(row);
-    });
-  }
-
-  async function refreshMetrics() {
-    hideFeedback();
-    showFeedback("Refreshing metrics…", "success");
-
-    try {
-      const response = await fetch("/ui/reporting", {
-        method: "GET",
-        headers: {
-          "X-Requested-With": "XMLHttpRequest",
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error("Unable to refresh reporting data.");
-      }
-
-      const text = await response.text();
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(text, "text/html");
-      const newTable = doc.querySelector("#reporting-table-wrapper");
-      const newFeedback = doc.querySelector("#report-feedback");
-
-      if (!newTable) {
-        throw new Error("Unexpected response while refreshing.");
-      }
-
-      const newEmptyState = doc.querySelector("#reporting-empty");
-
-      if (emptyState && newEmptyState) {
-        emptyState.className = newEmptyState.className;
-        emptyState.textContent = newEmptyState.textContent;
-      }
-
-      if (tableWrapper) {
-        tableWrapper.className = newTable.className;
-        tableWrapper.innerHTML = newTable.innerHTML;
-      }
-
-      if (newFeedback && feedbackEl) {
-        feedbackEl.className = newFeedback.className;
-        feedbackEl.textContent = newFeedback.textContent;
-      }
-
-      showFeedback("Metrics refreshed.", "success");
-    } catch (error) {
-      showFeedback(error.message || "An unexpected error occurred.", "error");
-    }
-  }
-
-  renderReportingTable(reportingSummaries);
-
-  if (refreshButton) {
-    refreshButton.addEventListener("click", refreshMetrics);
-  }
+{% endblock %} {% block scripts %} {{ super() }}
+<script id="reporting-data" type="application/json">
+  {{ report_summaries | tojson }}
 </script>
+<script src="/static/js/reporting.js"></script>
 {% endblock %}