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>

{% endblock %} {% block scripts %} {{ super() }}
<script id="costs-payload" type="application/json">
  {{ {"capex": capex_by_scenario, "opex": opex_by_scenario} | tojson }}
</script>
<script src="/static/js/costs.js"></script>
{% endblock %}