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

{% load i18n %}
{% load currency_display %}
<div class="row row-cols-1 g-4 mt-1 mb-3">
  {#  Daily Spending#}
  <div class="col">
    <c-ui.info-card color="yellow" icon="fa-solid fa-calendar-day" title="{% trans 'Daily Spending Allowance' %}" help_text={% trans "This is the final total divided by the remaining days in the month" %}>
      <div class="d-flex justify-content-between mt-3">
          <div class="text-end font-monospace">
            <div class="tw-text-gray-400">{% translate 'today' %}</div>
          </div>
          <div class="text-end font-monospace">
            {% for currency in daily_spending_allowance.values %}
              <div>
                <c-amount.display
                            :amount="currency.amount"
                            :prefix="currency.currency.prefix"
                            :suffix="currency.currency.suffix"
                            :decimal_places="currency.currency.decimal_places"></c-amount.display>
              </div>
              {% if currency.exchanged %}
              <div>
                <c-amount.display
                            :amount="currency.exchanged.amount"
                            :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>
{#  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>
  {% if percentages %}
  <div class="col">
    <c-ui.info-card color="yellow" icon="fa-solid fa-percent" title="{% trans 'Distribution' %}">
      {% for p in percentages.values %}
        <p class="tw-text-gray-400 mb-2 {% if not forloop.first %}mt-3{% endif %}">{{ p.currency.name }}</p>
        <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
      {% endfor %}
    </c-ui.info-card>
  </div>
  {% endif %}
</div>