mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-11-13 12:23:44 +01:00
Herculino Trotta
1f9ba8eba8
Replace the note on converted totals with a collapsible per currency, and drop the uppercase labels from the summary cards.
52 lines
4.0 KiB
HTML
52 lines
4.0 KiB
HTML
{% load i18n %}
|
|
{% with c=total.currency %}
|
|
<div class="card bg-base-100 card-border shadow">
|
|
<div class="card-body p-5 gap-4">
|
|
<div class="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
|
|
<div>
|
|
<div class="text-3xl font-bold tabular-nums">
|
|
<c-amount.display :amount="total.market_value" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display>
|
|
</div>
|
|
</div>
|
|
<div class="sm:text-right">
|
|
<div class="text-lg tabular-nums flex items-baseline gap-2 sm:justify-end">
|
|
<c-amount.display :amount="total.total_return" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" color="auto" divless></c-amount.display>
|
|
<span class="text-sm">{% include 'investments/fragments/_mwr.html' with mw=total.money_weighted %}</span>
|
|
<span class="text-sm text-base-content/50">{% translate 'total return' %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-6 gap-y-1 text-sm text-base-content/60">
|
|
<div>{% translate 'Invested' %} <span class="text-base-content tabular-nums"><c-amount.display :amount="total.cost_basis" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display></span></div>
|
|
<div>{% translate 'Income' %} <span class="text-base-content tabular-nums"><c-amount.display :amount="total.income" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" divless></c-amount.display></span></div>
|
|
{% if total.converted_from %}
|
|
{% if total.has_rate_history %}
|
|
<div data-tippy-content="{% translate 'How much of the return came from exchange rates moving since you invested' %}">{% translate 'Currency effect' %} <span class="tabular-nums"><c-amount.display :amount="total.currency_effect" :prefix="c.prefix" :suffix="c.suffix" :decimal_places="c.decimal_places" color="auto" divless></c-amount.display></span></div>
|
|
{% else %}
|
|
<div>{% translate 'Currency effect' %} <i class="fa-solid fa-triangle-exclamation text-warning text-xs" data-tippy-content="{% translate 'Every date is converted with the same rate. Add historical exchange rates (or an automatic rate service) to see how much exchange rates moved your return.' %}"></i></div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
{% if total.breakdown %}
|
|
<div class="flex flex-col gap-1 -mx-2 -mb-2">
|
|
{% for part in total.breakdown %}
|
|
{% with p=part.currency %}
|
|
<details class="collapse collapse-arrow rounded-box">
|
|
<summary class="collapse-title min-h-0 py-2 px-2 pe-10 text-sm flex items-baseline justify-between gap-4">
|
|
<span class="text-base-content/60">{{ p.name }}</span>
|
|
<span class="tabular-nums"><c-amount.display :amount="part.market_value" :prefix="p.prefix" :suffix="p.suffix" :decimal_places="p.decimal_places" divless></c-amount.display></span>
|
|
</summary>
|
|
<div class="collapse-content px-2 text-sm text-base-content/60 flex flex-wrap gap-x-6 gap-y-1">
|
|
<div>{% translate 'Return' %} <span class="tabular-nums"><c-amount.display :amount="part.total_return" :prefix="p.prefix" :suffix="p.suffix" :decimal_places="p.decimal_places" color="auto" divless></c-amount.display></span> {% include 'investments/fragments/_mwr.html' with mw=part.money_weighted %}</div>
|
|
<div>{% translate 'Invested' %} <span class="text-base-content tabular-nums"><c-amount.display :amount="part.cost_basis" :prefix="p.prefix" :suffix="p.suffix" :decimal_places="p.decimal_places" divless></c-amount.display></span></div>
|
|
<div>{% translate 'Income' %} <span class="text-base-content tabular-nums"><c-amount.display :amount="part.income" :prefix="p.prefix" :suffix="p.suffix" :decimal_places="p.decimal_places" divless></c-amount.display></span></div>
|
|
</div>
|
|
</details>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endwith %}
|