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

{% load tools %}
{% load i18n %}
{% load currency_display %}
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="currency-tab" data-bs-toggle="tab" data-bs-target="#currency-tab-pane" type="button" role="tab" aria-controls="currency-tab-pane" aria-selected="true">{% trans 'Currencies' %}</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="account-tab" data-bs-toggle="tab" data-bs-target="#account-tab-pane" type="button" role="tab" aria-controls="account-tab-pane" aria-selected="false">{% trans 'Accounts' %}</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="currency-tab-pane" role="tabpanel" aria-labelledby="currency-tab" tabindex="0">
    <div class="row row-cols-1 g-4 mt-2">
      {#  Income#}
      <div class="col">
          <c-ui.info-card color="green" icon="fa-solid fa-arrow-right-to-bracket" title="{% trans 'Income' %}">
            <div class="d-flex justify-content-between mt-3">
              <div class="text-end font-monospace">
                <div class="tw-text-gray-400">{% translate 'current' %}</div>
              </div>
              <div class="text-end font-monospace">
                {% for currency in income_current.values %}
                  <div>
                    <c-amount.display
                                :amount="currency.income_current"
                                :prefix="currency.currency.prefix"
                                :suffix="currency.currency.suffix"
                                :decimal_places="currency.currency.decimal_places"
                                color="green"></c-amount.display>
                  </div>
                  {% if currency.exchanged %}
                  <div>
                    <c-amount.display
                                :amount="currency.exchanged.income_current"
                                :prefix="currency.exchanged.currency.prefix"
                                :suffix="currency.exchanged.currency.suffix"
                                :decimal_places="currency.exchanged.currency.decimal_places"
                                color="gray"></c-amount.display>
                  </div>
                  {% endif %}
                {% empty %}
                  <div>-</div>
                {% endfor %}
              </div>
            </div>
            <hr class="my-1">
            <div class="d-flex justify-content-between">
              <div class="text-end font-monospace">
                <div class="tw-text-gray-400">{% translate 'projected' %}</div>
              </div>
              <div class="text-end font-monospace">
                {% for currency in income_projected.values %}
                  <div>
                    <c-amount.display
                                :amount="currency.income_projected"
                                :prefix="currency.currency.prefix"
                                :suffix="currency.currency.suffix"
                                :decimal_places="currency.currency.decimal_places"
                                color="green"></c-amount.display>
                  </div>
                  {% if currency.exchanged %}
                  <div>
                    <c-amount.display
                                :amount="currency.exchanged.income_projected"
                                :prefix="currency.exchanged.currency.prefix"
                                :suffix="currency.exchanged.currency.suffix"
                                :decimal_places="currency.exchanged.currency.decimal_places"
                                color="gray"></c-amount.display>
                  </div>
                  {% endif %}
                {% empty %}
                  <div>-</div>
                {% endfor %}
              </div>
            </div>
          </c-ui.info-card>
      </div>
      {#  Expenses#}
      <div class="col">
          <c-ui.info-card color="red" icon="fa-solid fa-arrow-right-from-bracket" title="{% trans 'Expenses' %}">
            <div class="d-flex justify-content-between mt-3">
              <div class="text-end font-monospace">
                <div class="tw-text-gray-400">{% translate 'current' %}</div>
              </div>
              <div class="text-end font-monospace">
                {% for currency in expense_current.values %}
                  <div>
                    <c-amount.display
                                :amount="currency.expense_current"
                                :prefix="currency.currency.prefix"
                                :suffix="currency.currency.suffix"
                                :decimal_places="currency.currency.decimal_places"
                                color="red"></c-amount.display>
                  </div>
                  {% if currency.exchanged %}
                  <div>
                    <c-amount.display
                                :amount="currency.exchanged.expense_current"
                                :prefix="currency.exchanged.currency.prefix"
                                :suffix="currency.exchanged.currency.suffix"
                                :decimal_places="currency.exchanged.currency.decimal_places"
                                color="gray"></c-amount.display>
                  </div>
                  {% endif %}
                {% empty %}
                  <div>-</div>
                {% endfor %}
              </div>
            </div>
            <hr class="my-1">
            <div class="d-flex justify-content-between">
              <div class="text-end font-monospace">
                <div class="tw-text-gray-400">{% translate 'projected' %}</div>
              </div>
              <div class="text-end font-monospace">
                {% for currency in expense_projected.values %}
                  <div>
                    <c-amount.display
                                :amount="currency.expense_projected"
                                :prefix="currency.currency.prefix"
                                :suffix="currency.currency.suffix"
                                :decimal_places="currency.currency.decimal_places"
                                color="red"></c-amount.display>
                  </div>
                  {% if currency.exchanged %}
                  <div>
                    <c-amount.display
                                :amount="currency.exchanged.expense_projected"
                                :prefix="currency.exchanged.currency.prefix"
                                :suffix="currency.exchanged.currency.suffix"
                                :decimal_places="currency.exchanged.currency.decimal_places"
                                color="gray"></c-amount.display>
                  </div>
                  {% endif %}
                {% empty %}
                  <div>-</div>
                {% endfor %}
              </div>
            </div>
          </c-ui.info-card>
      </div>
      {#  Total#}
      <div class="col">
        <c-ui.info-card color="blue" icon="fa-solid fa-scale-balanced" title="{% trans 'Total' %}">
            <div class="d-flex justify-content-between mt-3">
              <div class="text-end font-monospace">
                <div class="tw-text-gray-400">{% translate 'current' %}</div>
              </div>
              <div class="text-end font-monospace">
                {% for currency in total_current.values %}
                  <div>
                    <c-amount.display
                                :amount="currency.total_current"
                                :prefix="currency.currency.prefix"
                                :suffix="currency.currency.suffix"
                                :decimal_places="currency.currency.decimal_places"
                                color="{% if currency.total_current > 0 %}green{% elif currency.total_current < 0 %}red{% endif %}"></c-amount.display>
                  </div>
                  {% if currency.exchanged %}
                  <div>
                    <c-amount.display
                                :amount="currency.exchanged.total_current"
                                :prefix="currency.exchanged.currency.prefix"
                                :suffix="currency.exchanged.currency.suffix"
                                :decimal_places="currency.exchanged.currency.decimal_places"
                                color="gray"></c-amount.display>
                  </div>
                  {% endif %}
                {% empty %}
                  <div>-</div>
                {% endfor %}
              </div>
            </div>
            <div class="d-flex justify-content-between mt-3">
              <div class="text-end font-monospace">
                <div class="tw-text-gray-400">{% translate 'projected' %}</div>
              </div>
              <div class="text-end font-monospace">
                {% for currency in total_projected.values %}
                  <div>
                    <c-amount.display
                                :amount="currency.total_projected"
                                :prefix="currency.currency.prefix"
                                :suffix="currency.currency.suffix"
                                :decimal_places="currency.currency.decimal_places"
                                color="{% if currency.total_projected > 0 %}green{% elif currency.total_projected < 0 %}red{% endif %}"></c-amount.display>
                  </div>
                  {% if currency.exchanged %}
                  <div>
                    <c-amount.display
                                :amount="currency.exchanged.total_projected"
                                :prefix="currency.exchanged.currency.prefix"
                                :suffix="currency.exchanged.currency.suffix"
                                :decimal_places="currency.exchanged.currency.decimal_places"
                                color="gray"></c-amount.display>
                  </div>
                  {% endif %}
                {% empty %}
                  <div>-</div>
                {% endfor %}
              </div>
            </div>
            <hr class="my-1">
            <div class="d-flex justify-content-end">
              <div class="text-end font-monospace">
                {% for currency in total_final.values %}
                  <div>
                    <c-amount.display
                                :amount="currency.total_final"
                                :prefix="currency.currency.prefix"
                                :suffix="currency.currency.suffix"
                                :decimal_places="currency.currency.decimal_places"
                                color="{% if currency.total_final > 0 %}green{% elif currency.total_final < 0 %}red{% endif %}"></c-amount.display>
                  </div>
                  {% if currency.exchanged %}
                  <div>
                    <c-amount.display
                                :amount="currency.exchanged.total_final"
                                :prefix="currency.exchanged.currency.prefix"
                                :suffix="currency.exchanged.currency.suffix"
                                :decimal_places="currency.exchanged.currency.decimal_places"
                                color="gray"></c-amount.display>
                  </div>
                  {% endif %}
                {% empty %}
                  <div>-</div>
                {% endfor %}
              </div>
            </div>
        </c-ui.info-card>
      </div>
      <div class="col">
        <c-ui.info-card color="yellow" icon="fa-solid fa-percent" title="{% trans 'Distribution' %}">
          {% for p in currency_percentages.values %}
            <p class="tw-text-gray-400 mb-2 {% if not forloop.first %}mt-3{% endif %}">{{ p.currency.name }} ({{ p.currency.code }})</p>
            <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
          {% endfor %}
        </c-ui.info-card>
      </div>
</div>
  </div>
  <div class="tab-pane fade" id="account-tab-pane" role="tabpanel" aria-labelledby="account-tab" tabindex="0">
    <div class="row row-cols-1 g-4 mt-2">
      <div class="col">
      {% for account_id, account in account_data.items %}
        {% if not single %}
          <div class="tw-text-xl {% if not forloop.first %}mt-4 mb-3{% endif %}">
            {% if account.account.group %}
              <span class="badge text-bg-primary me-2">{{ account.account.group }}</span>{% endif %}{{ account.account.name }}
          </div>
        {% endif %}
        <div class="d-flex justify-content-between align-items-baseline mt-2">
          <div class="text-end font-monospace">
            <div class="tw-text-gray-400">{% translate 'projected income' %}</div>
          </div>
          <div class="dotted-line flex-grow-1"></div>
          <div class="text-end font-monospace tw-text-green-400">
            <c-amount.display
                :amount="account.income_projected"
                :prefix="account.currency.prefix"
                :suffix="account.currency.suffix"
                :decimal_places="account.currency.decimal_places"></c-amount.display>
          </div>
        </div>
        {% if account.exchanged and account.exchanged.income_projected %}
          <div class="text-end font-monospace tw-text-gray-500">
            <c-amount.display
                :amount="account.exchanged.currency.income_projected"
                :prefix="account.exchanged.currency.prefix"
                :suffix="account.exchanged.currency.suffix"
                :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
          </div>
        {% endif %}
        <div class="d-flex justify-content-between align-items-baseline mt-2">
          <div class="text-end font-monospace">
            <div class="tw-text-gray-400">{% translate 'projected expenses' %}</div>
          </div>
          <div class="dotted-line flex-grow-1"></div>
          <div>
            <div class="text-end font-monospace tw-text-red-400">
              <c-amount.display
                  :amount="account.expense_projected"
                  :prefix="account.currency.prefix"
                  :suffix="account.currency.suffix"
                  :decimal_places="account.currency.decimal_places"></c-amount.display>
            </div>
          </div>
        </div>
        {% if account.exchanged and account.exchanged.expense_projected %}
          <div class="text-end font-monospace tw-text-gray-500">
            <c-amount.display
                :amount="account.exchanged.expense_projected"
                :prefix="account.exchanged.currency.prefix"
                :suffix="account.exchanged.currency.suffix"
                :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
          </div>
        {% endif %}
        <div class="d-flex justify-content-between align-items-baseline mt-2">
          <div class="text-end font-monospace">
            <div class="tw-text-gray-400">{% translate 'projected total' %}</div>
          </div>
          <div class="dotted-line flex-grow-1"></div>
          <div
              class="text-end font-monospace">
            <c-amount.display
                :amount="account.total_projected"
                :prefix="account.currency.prefix"
                :suffix="account.currency.suffix"
                :decimal_places="account.currency.decimal_places"
                color="{% if account.total_projected > 0 %}green{% elif account.total_projected < 0 %}red{% endif %}"></c-amount.display>
          </div>
        </div>
        {% if account.exchanged.total_projected and account.exchanged.total_projected %}
          <div class="text-end font-monospace tw-text-gray-500">
            <c-amount.display
                :amount="account.exchanged.total_projected"
                :prefix="account.exchanged.currency.prefix"
                :suffix="account.exchanged.currency.suffix"
                :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
          </div>
        {% endif %}
        <hr class="my-3">
        <div class="d-flex justify-content-between align-items-baseline mt-2">
          <div class="text-end font-monospace">
            <div class="tw-text-gray-400">{% translate 'current income' %}</div>
          </div>
          <div class="dotted-line flex-grow-1"></div>
          <div class="text-end font-monospace tw-text-green-400">
            <c-amount.display
                :amount="account.income_current"
                :prefix="account.currency.prefix"
                :suffix="account.currency.suffix"
                :decimal_places="account.currency.decimal_places"></c-amount.display>
          </div>
        </div>
        {% if account.exchanged and account.exchanged.income_current %}
          <div class="text-end font-monospace tw-text-gray-500">
            <c-amount.display
                :amount="account.exchanged.income_current"
                :prefix="account.exchanged.currency.prefix"
                :suffix="account.exchanged.currency.suffix"
                :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
          </div>
        {% endif %}
        <div class="d-flex justify-content-between align-items-baseline mt-2">
          <div class="text-end font-monospace">
            <div class="tw-text-gray-400">{% translate 'current expenses' %}</div>
          </div>
          <div class="dotted-line flex-grow-1"></div>
          <div class="text-end font-monospace tw-text-red-400">
            <c-amount.display
                :amount="account.expense_current"
                :prefix="account.currency.prefix"
                :suffix="account.currency.suffix"
                :decimal_places="account.currency.decimal_places"></c-amount.display>
          </div>
        </div>
        {% if account.exchanged and account.exchanged.expense_current %}
          <div class="text-end font-monospace tw-text-gray-500">
            <c-amount.display
                :amount="account.exchanged.expense_current"
                :prefix="account.exchanged.currency.prefix"
                :suffix="account.exchanged.currency.suffix"
                :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
          </div>
        {% endif %}
        <div class="d-flex justify-content-between align-items-baseline mt-2">
          <div class="text-end font-monospace">
            <div class="tw-text-gray-400">{% translate 'current total' %}</div>
          </div>
          <div class="dotted-line flex-grow-1"></div>
          <div
              class="text-end font-monospace">
            <c-amount.display
                :amount="account.total_current"
                :prefix="account.currency.prefix"
                :suffix="account.currency.suffix"
                :decimal_places="account.currency.decimal_places"
                color="{% if account.total_current > 0 %}green{% elif account.total_current < 0 %}red{% endif %}"></c-amount.display>
          </div>
        </div>
        {% if account.exchanged and account.exchanged.total_current %}
          <div class="text-end font-monospace tw-text-gray-500">
            <c-amount.display
                :amount="account.exchanged.total_current"
                :prefix="account.exchanged.currency.prefix"
                :suffix="account.exchanged.currency.suffix"
                :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
          </div>
        {% endif %}
        <div>
          <hr class="my-3">
          <div class="d-flex justify-content-between align-items-baseline mt-2">
            <div class="text-end font-monospace">
              <div class="tw-text-gray-400">{% translate 'final total' %}</div>
            </div>
            <div class="dotted-line flex-grow-1"></div>
            <div class="text-end font-monospace">
              <c-amount.display
                  :amount="account.total_final"
                  :prefix="account.currency.prefix"
                  :suffix="account.currency.suffix"
                  :decimal_places="account.currency.decimal_places"
                  color="{% if account.total_final > 0 %}green{% elif account.total_final < 0 %}red{% endif %}"></c-amount.display>
            </div>
          </div>
          {% if account.exchanged and account.exchanged.total_final %}
            <div class="text-end font-monospace tw-text-gray-500">
              <c-amount.display
                  :amount="account.exchanged.total_final"
                  :prefix="account.exchanged.currency.prefix"
                  :suffix="account.exchanged.currency.suffix"
                  :decimal_places="account.exchanged.currency.decimal_places"></c-amount.display>
            </div>
          {% endif %}
        </div>
        {% with p=account_percentages|get_dict_item:account_id %}
        <div class="my-3">
          <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
        </div>
        {% endwith %}
        <hr>
      {% empty %}
        <c-msg.empty
            title="{% translate "No information to display" %}"></c-msg.empty>
      {% endfor %}
    </div>
</div>
  </div>
</div>