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

{% load i18n %}
{% load currency_display %}

<div class="row row-cols-1 g-4 mb-3">
  {#  Daily Spending#}
  <div class="col">
    <div class="card tw-relative h-100 shadow">
      <div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-yellow-300 tw-text-yellow-800 text-center
      align-items-center d-flex justify-content-center rounded-2">
        <i class="fa-solid fa-calendar-day"></i>
      </div>
      <div class="card-body">
        <h5 class="tw-text-yellow-400 fw-bold">{% translate 'Daily Spending Allowance' %}{% include 'includes/help_icon.html' with content=_('This is the final total divided by the remaining days in the month') %}</h5>
        <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>
      </div>
    </div>
  </div>
{#  Income#}
  <div class="col">
    <div class="card tw-relative h-100 shadow">
      <div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-green-300 tw-text-green-800 text-center
      align-items-center d-flex justify-content-center rounded-2">
        <i class="fa-solid fa-arrow-right-to-bracket"></i>
      </div>
      <div class="card-body">
        <h5 class="tw-text-green-400 fw-bold">{% translate 'Income' %}</h5>
        <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>
      </div>
    </div>
  </div>
{#  Expenses#}
  <div class="col">
    <div class="card tw-relative h-100 shadow">
      <div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-red-300 tw-text-red-800 text-center
      align-items-center d-flex justify-content-center rounded-2">
        <i class="fa-solid fa-arrow-right-from-bracket"></i>
      </div>
      <div class="card-body">
        <h5 class="tw-text-red-400 fw-bold">{% translate 'Expenses' %}</h5>
        <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>
      </div>
    </div>
  </div>
{#  Total#}
  <div class="col">
    <div class="card tw-relative h-100 shadow">
      <div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-blue-300 tw-text-blue-800 text-center
      align-items-center d-flex justify-content-center rounded-2">
        <i class="fa-solid fa-scale-balanced"></i>
      </div>
      <div class="card-body">
        <h5 class="tw-text-blue-400 fw-bold">{% translate 'Total' %}</h5>
        <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>
      </div>
    </div>
  </div>
</div>
{% for p in percentages.values %}
<div class="progress-stacked mt-3">
  <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Income' %} ({{ p.percentages.income_projected|floatformat:2 }}%)" aria-valuenow="{{ p.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ p.percentages.income_projected|floatformat:0 }}%">
    <div class="progress-bar progress-bar-striped !tw-bg-green-400"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
         title="{% trans 'Projected Income' %} ({{ p.percentages.income_projected|floatformat:2 }}%)">
    </div>
  </div>
  <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Current Income' %} ({{ p.percentages.income_current|floatformat:2 }}%)" aria-valuenow="{{ p.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ p.percentages.income_current|floatformat:0 }}%">
    <div class="progress-bar !tw-bg-green-400"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
         title="{% trans 'Current Income' %} ({{ p.percentages.income_current|floatformat:2 }}%)">
    </div>
  </div>
  <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Expenses' %} ({{ p.percentages.expense_projected|floatformat:2 }}%)" aria-valuenow="{{ p.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ p.percentages.expense_projected|floatformat:0 }}%">
    <div class="progress-bar progress-bar-striped !tw-bg-red-400"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
         title="{% trans 'Projected Expenses' %} ({{ p.percentages.expense_projected|floatformat:2 }}%)">
    </div>
  </div>
  <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Current Expenses' %} ({{ p.percentages.expense_current|floatformat:2 }}%)" aria-valuenow="{{ p.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ p.percentages.expense_current|floatformat:0 }}%">
    <div class="progress-bar !tw-bg-red-400"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
         title="{% trans 'Current Expenses' %} ({{ p.percentages.expense_current|floatformat:2 }}%)">
    </div>
  </div>
</div>
{% endfor %}