calminer/templates/costs.html

{% extends "base.html" %} {% block title %}Costs · CalMiner{% endblock %} {%
block content %}
<section class="panel">
  <h2>Cost Overview</h2>
  {% if scenarios %}
  <div class="form-grid">
    <label for="costs-scenario-filter">
      Scenario filter
      <select id="costs-scenario-filter">
        <option value="">Select a scenario</option>
        {% for scenario in scenarios %}
        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
        {% endfor %}
      </select>
    </label>
  </div>
  {% else %}
  <p class="empty-state">Create a scenario to review cost information.</p>
  {% endif %}

  <div id="costs-empty" class="empty-state">
    Choose a scenario to review CAPEX and OPEX details.
  </div>

  <div id="costs-data" class="hidden">
    <div class="table-container">
      <h3>Capital Expenditures (CAPEX)</h3>
      <table aria-label="Scenario CAPEX records">
        <thead>
          <tr>
            <th scope="col">Amount</th>
            <th scope="col">Description</th>
          </tr>
        </thead>
        <tbody id="capex-table-body"></tbody>
        <tfoot>
          <tr>
            <th scope="row">Total</th>
            <th id="capex-total">—</th>
          </tr>
        </tfoot>
      </table>
      <p id="capex-empty" class="empty-state hidden">
        No CAPEX records for this scenario yet.
      </p>
    </div>

    <div class="table-container">
      <h3>Operational Expenditures (OPEX)</h3>
      <table aria-label="Scenario OPEX records">
        <thead>
          <tr>
            <th scope="col">Amount</th>
            <th scope="col">Description</th>
          </tr>
        </thead>
        <tbody id="opex-table-body"></tbody>
        <tfoot>
          <tr>
            <th scope="row">Total</th>
            <th id="opex-total">—</th>
          </tr>
        </tfoot>
      </table>
      <p id="opex-empty" class="empty-state hidden">
        No OPEX records for this scenario yet.
      </p>
    </div>
  </div>
</section>

<section class="panel">
  <h2>Add CAPEX Entry</h2>
  {% if scenarios %}
  <form id="capex-form" class="form-grid">
    <label for="capex-form-scenario">
      Scenario
      <select id="capex-form-scenario" name="scenario_id" required>
        <option value="" disabled selected>Select a scenario</option>
        {% for scenario in scenarios %}
        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
        {% endfor %}
      </select>
    </label>
    <label for="capex-form-amount">
      Amount
      <input
        id="capex-form-amount"
        type="number"
        name="amount"
        min="0"
        step="0.01"
        required
      />
    </label>
    <label for="capex-form-description">
      Description (optional)
      <textarea
        id="capex-form-description"
        name="description"
        rows="3"
      ></textarea>
    </label>
    <button type="submit" class="btn primary">Add CAPEX</button>
  </form>
  <p id="capex-feedback" class="feedback hidden" role="status"></p>
  {% else %}
  <p class="empty-state">Create a scenario before adding CAPEX entries.</p>
  {% endif %}
</section>

<section class="panel">
  <h2>Add OPEX Entry</h2>
  {% if scenarios %}
  <form id="opex-form" class="form-grid">
    <label for="opex-form-scenario">
      Scenario
      <select id="opex-form-scenario" name="scenario_id" required>
        <option value="" disabled selected>Select a scenario</option>
        {% for scenario in scenarios %}
        <option value="{{ scenario.id }}">{{ scenario.name }}</option>
        {% endfor %}
      </select>
    </label>
    <label for="opex-form-amount">
      Amount
      <input
        id="opex-form-amount"
        type="number"
        name="amount"
        min="0"
        step="0.01"
        required
      />
    </label>
    <label for="opex-form-description">
      Description (optional)
      <textarea
        id="opex-form-description"
        name="description"
        rows="3"
      ></textarea>
    </label>
    <button type="submit" class="btn primary">Add OPEX</button>
  </form>
  <p id="opex-feedback" class="feedback hidden" role="status"></p>
  {% else %}
  <p class="empty-state">Create a scenario before adding OPEX entries.</p>
  {% endif %}
</section>

<script>
  const scenarios = {{ scenarios | tojson | safe }};
  const capexByScenario = {{ capex_by_scenario | tojson | safe }};
  const opexByScenario = {{ opex_by_scenario | tojson | safe }};

  const filterSelect = document.getElementById("costs-scenario-filter");
  const costsEmptyState = document.getElementById("costs-empty");
  const costsDataWrapper = document.getElementById("costs-data");
  const capexTableBody = document.getElementById("capex-table-body");
  const opexTableBody = document.getElementById("opex-table-body");
  const capexEmpty = document.getElementById("capex-empty");
  const opexEmpty = document.getElementById("opex-empty");
  const capexTotal = document.getElementById("capex-total");
  const opexTotal = document.getElementById("opex-total");
  const capexForm = document.getElementById("capex-form");
  const opexForm = document.getElementById("opex-form");
  const capexFeedback = document.getElementById("capex-feedback");
  const opexFeedback = document.getElementById("opex-feedback");
  const capexFormScenario = document.getElementById("capex-form-scenario");
  const opexFormScenario = document.getElementById("opex-form-scenario");

  function showFeedback(element, message, type = "success") {
    if (!element) {
      return;
    }
    element.textContent = message;
    element.classList.remove("hidden", "success", "error");
    element.classList.add(type);
  }

  function hideFeedback(element) {
    if (!element) {
      return;
    }
    element.classList.add("hidden");
    element.textContent = "";
  }

  function formatAmount(value) {
    return Number(value).toLocaleString(undefined, {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  }

  function sumAmount(records) {
    return records.reduce((total, record) => total + Number(record.amount || 0), 0);
  }

  function renderCostTables(scenarioId) {
    const capexRecords = capexByScenario[String(scenarioId)] || [];
    const opexRecords = opexByScenario[String(scenarioId)] || [];

    capexTableBody.innerHTML = "";
    opexTableBody.innerHTML = "";

    if (!capexRecords.length) {
      capexEmpty.classList.remove("hidden");
    } else {
      capexEmpty.classList.add("hidden");
      capexRecords.forEach((record) => {
        const row = document.createElement("tr");
        row.innerHTML = `
          <td>${formatAmount(record.amount)}</td>
          <td>${record.description || "—"}</td>
        `;
        capexTableBody.appendChild(row);
      });
    }

    if (!opexRecords.length) {
      opexEmpty.classList.remove("hidden");
    } else {
      opexEmpty.classList.add("hidden");
      opexRecords.forEach((record) => {
        const row = document.createElement("tr");
        row.innerHTML = `
          <td>${formatAmount(record.amount)}</td>
          <td>${record.description || "—"}</td>
        `;
        opexTableBody.appendChild(row);
      });
    }

    capexTotal.textContent = formatAmount(sumAmount(capexRecords));
    opexTotal.textContent = formatAmount(sumAmount(opexRecords));
  }

  function toggleCostView(show) {
    if (show) {
      costsEmptyState.classList.add("hidden");
      costsDataWrapper.classList.remove("hidden");
    } else {
      costsEmptyState.classList.remove("hidden");
      costsDataWrapper.classList.add("hidden");
      capexTableBody.innerHTML = "";
      opexTableBody.innerHTML = "";
      capexTotal.textContent = "—";
      opexTotal.textContent = "—";
      capexEmpty.classList.add("hidden");
      opexEmpty.classList.add("hidden");
    }
  }

  function syncFormSelections(value) {
    if (capexFormScenario) {
      capexFormScenario.value = value || "";
    }
    if (opexFormScenario) {
      opexFormScenario.value = value || "";
    }
  }

  if (filterSelect) {
    filterSelect.addEventListener("change", (event) => {
      const value = event.target.value;
      if (!value) {
        toggleCostView(false);
        syncFormSelections("");
        return;
      }
      toggleCostView(true);
      renderCostTables(value);
      syncFormSelections(value);
    });
  }

  async function submitCostEntry(event, targetUrl, storageMap, feedbackEl) {
    event.preventDefault();
    hideFeedback(feedbackEl);

    const formData = new FormData(event.target);
    const scenarioId = formData.get("scenario_id");
    const payload = {
      scenario_id: scenarioId ? Number(scenarioId) : null,
      amount: Number(formData.get("amount")),
      description: formData.get("description") || null,
    };

    if (!payload.scenario_id) {
      showFeedback(feedbackEl, "Select a scenario before submitting.", "error");
      return;
    }

    try {
      const response = await fetch(targetUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(payload),
      });

      if (!response.ok) {
        const errorDetail = await response.json().catch(() => ({}));
        throw new Error(errorDetail.detail || "Unable to save cost entry.");
      }

      const result = await response.json();
      const mapKey = String(result.scenario_id);

      if (!Array.isArray(storageMap[mapKey])) {
        storageMap[mapKey] = [];
      }

      storageMap[mapKey].push(result);

      event.target.reset();
      showFeedback(feedbackEl, "Entry saved successfully.", "success");

      if (filterSelect && filterSelect.value === mapKey) {
        renderCostTables(mapKey);
      }
    } catch (error) {
      showFeedback(feedbackEl, error.message || "An unexpected error occurred.", "error");
    }
  }

  if (capexForm) {
    capexForm.addEventListener("submit", (event) =>
      submitCostEntry(event, "/api/costs/capex", capexByScenario, capexFeedback)
    );
  }

  if (opexForm) {
    opexForm.addEventListener("submit", (event) =>
      submitCostEntry(event, "/api/costs/opex", opexByScenario, opexFeedback)
    );
  }

  if (filterSelect && filterSelect.value) {
    toggleCostView(true);
    renderCostTables(filterSelect.value);
    syncFormSelections(filterSelect.value);
  }
</script>
{% endblock %}