WYGIWYH/app/templates/transactions/fragments/monthly_summary.html

{% load i18n %}
{% load currency_display %}
<div class="text-bg-secondary p-2 rounded-2 shadow tw-text-sm">
  <p class="font-monospace text-light text-uppercase text-center fw-bold m-0 tw-text-base">{% translate "Summary" %}</p>
  <hr class="my-1">
  <div>
    <p class="font-monospace text-uppercase text-center fw-bold m-0">{% translate "Income" %}</p>

    <div class="row">
      <div class="col-6">
        <div class="font-monospace text-primary text-start align-self-end fw-bold m-0">
          {% translate "Current Income" %}</div>
      </div>
      <div class="col-6 text-end font-monospace">
        {% for entry in totals.paid_income %}
          <div>{% entry_amount entry %}</div>
        {% empty %}
          <div>-</div>
        {% endfor %}
      </div>
    </div>
    <div class="my-3"></div>
    <div class="row">
      <div class="col-6">
        <div class="font-monospace text-primary text-start align-self-end fw-bold m-0">
          {% translate "Projected Income" %}
        </div>
      </div>
      <div class="col-6 text-end font-monospace">
        {% for entry in totals.projected_income %}
          <div>{% entry_amount entry %}</div>
        {% empty %}
          <div>-</div>
        {% endfor %}
      </div>
    </div>
  </div>
  <hr class="my-1">
  <div>
    <p class="font-monospace text-uppercase text-center fw-bold m-0">{% translate "Expenses" %}</p>

    <div class="row">
      <div class="col-6">
        <div class="font-monospace text-primary text-start align-self-end fw-bold m-0">
          {% translate "Current Expenses" %}</div>
      </div>
      <div class="col-6 text-end font-monospace">
        {% for entry in totals.paid_expenses %}
          <div>{% entry_amount entry %}</div>
        {% empty %}
          <div>-</div>
        {% endfor %}
      </div>
    </div>
    <div class="my-3"></div>
    <div class="row">
      <div class="col-6">
        <div class="font-monospace text-primary text-start align-self-end fw-bold m-0">
          {% translate "Projected Expenses" %}
        </div>
      </div>
      <div class="col-6 text-end font-monospace">
        {% for entry in totals.projected_expenses %}
          <div>{% entry_amount entry %}</div>
        {% empty %}
          <div>-</div>
        {% endfor %}
      </div>
    </div>
  </div>
  <hr class="my-1">
  <div>
    <p class="font-monospace text-uppercase text-center fw-bold m-0">{% translate "Totals" %}</p>

    <div class="row">
      <div class="col-6">
        <div class="font-monospace text-primary text-start align-self-end fw-bold m-0">
          {% translate "Current Total" %}
        </div>
      </div>
      <div class="col-6 text-end font-monospace">
        {% for entry in totals.total_current %}
          <div>{% entry_amount entry %}</div>
        {% empty %}
          <div>-</div>
        {% endfor %}
      </div>
    </div>
    <div class="my-3"></div>
    <div class="row">
      <div class="col-6">
        <div class="font-monospace text-primary text-start align-self-end fw-bold m-0">
          {% translate "Projected Total" %}
        </div>
      </div>
      <div class="col-6 text-end font-monospace">
        {% for entry in totals.total_projected %}
          <div>{% entry_amount entry %}</div>
        {% empty %}
          <div>-</div>
        {% endfor %}
      </div>
    </div>
    <div class="my-3"></div>
    <div class="row">
      <div class="col-6">
        <div class="font-monospace text-primary text-start align-self-end fw-bold m-0">
          {% translate "Final Total" %}
        </div>
      </div>
      <div class="col-6 text-end font-monospace">
        {% for entry in totals.total_final %}
          <div>{% entry_amount entry %}</div>
        {% empty %}
          <div>-</div>
        {% endfor %}
      </div>
    </div>
  </div>
  <hr class="my-1">
  <div>
    <div class="row">
      <div class="col-6">
        <div class="font-monospace text-primary text-start align-self-end fw-bold m-0">{% translate "Daily Spending Allowance" %}</div>
      </div>
      <div class="col-6 text-end font-monospace">
        {% for entry in totals.daily_spending_allowance %}
          <div>{% entry_amount entry %}</div>
        {% empty %}
          <div>-</div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>