feat: show currency exchange rate where needed

app/templates/cotton/amount/display.html

@@ -1,7 +1,7 @@
 {% load currency_display %}
 
 <div class="{% if text_end %}text-end{% elif text_start %}text-start{% endif %}">
-  <div class="amount{% if color == 'grey' %} tw-text-gray-500{% elif color == 'green' %} tw-text-green-400{% elif color == 'red' %} tw-text-red-400{% endif %}"
+  <div class="amount{% if color == 'grey' or color == "gray" %} tw-text-gray-500{% elif color == 'green' %} tw-text-green-400{% elif color == 'red' %} tw-text-red-400{% endif %}"
        data-original-value="{% currency_display amount=amount prefix=prefix suffix=suffix decimal_places=decimal_places %}" data-amount="{{ amount|floatformat:"-40u" }}">
   </div>
 </div>

app/templates/monthly_overview/fragments/monthly_summary.html

@@ -20,7 +20,8 @@
                           :amount="entry.amount"
                           :prefix="entry.prefix"
                           :suffix="entry.suffix"
-                          :decimal_places="entry.decimal_places"></c-amount.display>
+                          :decimal_places="entry.decimal_places"
+                          color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -48,7 +49,8 @@
                           :amount="entry.amount"
                           :prefix="entry.prefix"
                           :suffix="entry.suffix"
-                          :decimal_places="entry.decimal_places"></c-amount.display>
+                          :decimal_places="entry.decimal_places"
+                          color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -65,7 +67,8 @@
                           :amount="entry.amount"
                           :prefix="entry.prefix"
                           :suffix="entry.suffix"
-                          :decimal_places="entry.decimal_places"></c-amount.display>
+                          :decimal_places="entry.decimal_places"
+                          color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -93,7 +96,8 @@
                           :amount="entry.amount"
                           :prefix="entry.prefix"
                           :suffix="entry.suffix"
-                          :decimal_places="entry.decimal_places"></c-amount.display>
+                          :decimal_places="entry.decimal_places"
+                          color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -110,7 +114,8 @@
                           :amount="entry.amount"
                           :prefix="entry.prefix"
                           :suffix="entry.suffix"
-                          :decimal_places="entry.decimal_places"></c-amount.display>
+                          :decimal_places="entry.decimal_places"
+                          color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -138,7 +143,8 @@
                           :amount="entry.amount"
                           :prefix="entry.prefix"
                           :suffix="entry.suffix"
-                          :decimal_places="entry.decimal_places"></c-amount.display>
+                          :decimal_places="entry.decimal_places"
+                          color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -154,7 +160,8 @@
                           :amount="entry.amount"
                           :prefix="entry.prefix"
                           :suffix="entry.suffix"
-                          :decimal_places="entry.decimal_places"></c-amount.display>
+                          :decimal_places="entry.decimal_places"
+                          color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -168,7 +175,8 @@
                           :amount="entry.amount"
                           :prefix="entry.prefix"
                           :suffix="entry.suffix"
-                          :decimal_places="entry.decimal_places"></c-amount.display>
+                          :decimal_places="entry.decimal_places"
+                          color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}

app/templates/net_worth/net_worth.html

@@ -26,16 +26,28 @@
                   <div class="d-flex align-items-baseline w-100">
                       <div class="currency-name text-start font-monospace tw-text-gray-300">{{ currency.name }}</div>
                       <div class="dotted-line flex-grow-1"></div>
-                      <div class="{% if currency.amount > 0 %}tw-text-green-400{% elif currency.amount < 0 %}tw-text-red-400{% endif %}">
+                      <div>
                         <c-amount.display
                               :amount="currency.amount"
                               :prefix="currency.prefix"
                               :suffix="currency.suffix"
                               :decimal_places="currency.decimal_places"
+                              color="{% if currency.amount > 0 %}green{% elif currency.amount < 0 %}red{% endif %}"
                               text-end></c-amount.display>
                       </div>
                   </div>
               </div>
+              {% if currency.exchanged %}
+              <div>
+                <c-amount.display
+                          :amount="currency.exchanged.amount"
+                          :prefix="currency.exchanged.prefix"
+                          :suffix="currency.exchanged.suffix"
+                          :decimal_places="currency.exchanged.decimal_places"
+                          text-end
+                          color="grey"></c-amount.display>
+              </div>
+              {% endif %}
               {% endfor %}
             </div>
           </div>
@@ -62,12 +74,13 @@
                         <div class="text-start font-monospace tw-text-gray-300">
                           <span class="hierarchy-line-icon"></span>{{ account_data.name }}</div>
                         <div class="dotted-line flex-grow-1"></div>
-                        <div class="{% if account_data.balance > 0 %}tw-text-green-400{% elif account_data.balance < 0 %}tw-text-red-400{% endif %}">
+                        <div class="">
                           <c-amount.display
                             :amount="account_data.balance"
                             :prefix="account_data.currency.prefix"
                             :suffix="account_data.currency.suffix"
-                            :decimal_places="account_data.currency.decimal_places"></c-amount.display>
+                            :decimal_places="account_data.currency.decimal_places"
+                            color="{% if account_data.balance > 0 %}green{% elif account_data.balance < 0 %}red{% endif %}"></c-amount.display>
                         </div>
                     </div>
                   </div>
@@ -87,12 +100,13 @@
                     <div class="d-flex align-items-baseline w-100">
                         <div class="currency-name text-start font-monospace tw-text-gray-300">{{ account_data.name }}</div>
                         <div class="dotted-line flex-grow-1"></div>
-                        <div class="{% if account_data.balance > 0 %}tw-text-green-400{% elif account_data.balance < 0 %}tw-text-red-400{% endif %}">
+                        <div>
                           <c-amount.display
                             :amount="account_data.balance"
                             :prefix="account_data.currency.prefix"
                             :suffix="account_data.currency.suffix"
-                            :decimal_places="account_data.currency.decimal_places"></c-amount.display>
+                            :decimal_places="account_data.currency.decimal_places"
+                            color="{% if account_data.balance > 0 %}green{% elif account_data.balance < 0 %}red{% endif %}"></c-amount.display>
                         </div>
                     </div>
                 </div>

app/templates/yearly_overview/fragments/account_data.html

@@ -61,12 +61,13 @@
           </div>
           <div class="dotted-line flex-grow-1"></div>
           <div
-              class="text-end font-monospace {% if account.balance_unpaid > 0 %}tw-text-green-400{% elif account.balance_unpaid < 0 %}tw-text-red-400{% endif %}">
+              class="text-end font-monospace">
             <c-amount.display
                 :amount="account.balance_unpaid"
                 :prefix="account.currency.prefix"
                 :suffix="account.currency.suffix"
-                :decimal_places="account.currency.decimal_places"></c-amount.display>
+                :decimal_places="account.currency.decimal_places"
+                color="{% if account.balance_unpaid > 0 %}green{% elif account.balance_unpaid < 0 %}red{% endif %}"></c-amount.display>
           </div>
         </div>
         {% if account.exchange_currency and account.exchange_balance_unpaid %}
@@ -129,12 +130,13 @@
           </div>
           <div class="dotted-line flex-grow-1"></div>
           <div
-              class="text-end font-monospace {% if account.balance_paid > 0 %}tw-text-green-400{% elif account.balance_paid < 0 %}tw-text-red-400{% endif %}">
+              class="text-end font-monospace">
             <c-amount.display
                 :amount="account.balance_paid"
                 :prefix="account.currency.prefix"
                 :suffix="account.currency.suffix"
-                :decimal_places="account.currency.decimal_places"></c-amount.display>
+                :decimal_places="account.currency.decimal_places"
+                color="{% if account.balance_paid > 0 %}green{% elif account.balance_paid < 0 %}red{% endif %}"></c-amount.display>
           </div>
         </div>
         {% if account.exchange_currency and account.exchange_balance_paid %}
@@ -153,13 +155,13 @@
               <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 {% if account.balance_total > 0 %}tw-text-green-400{% elif account.balance_total < 0 %}tw-text-red-400{% endif %}">
+            <div class="text-end font-monospace">
               <c-amount.display
                   :amount="account.balance_total"
                   :prefix="account.currency.prefix"
                   :suffix="account.currency.suffix"
-                  :decimal_places="account.currency.decimal_places"></c-amount.display>
+                  :decimal_places="account.currency.decimal_places"
+                  color="{% if account.balance_paid > 0 %}green{% elif account.balance_paid < 0 %}red{% endif %}"></c-amount.display>
             </div>
           </div>
           {% if account.exchange_currency and account.exchange_balance_total %}

app/templates/yearly_overview/fragments/currency_data.html

@@ -8,11 +8,23 @@
     <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.income_unpaid %}
-        <c-amount.display
-                    :amount="entry.amount"
-                    :prefix="entry.prefix"
-                    :suffix="entry.suffix"
-                    :decimal_places="entry.decimal_places"></c-amount.display>
+        <div>
+          <c-amount.display
+              :amount="entry.amount"
+              :prefix="entry.prefix"
+              :suffix="entry.suffix"
+              :decimal_places="entry.decimal_places"></c-amount.display>
+        </div>
+        {% if entry.exchanged %}
+        <div>
+          <c-amount.display
+            :amount="entry.exchanged.amount"
+            :prefix="entry.exchanged.prefix"
+            :suffix="entry.exchanged.suffix"
+            :decimal_places="entry.exchanged.decimal_places"
+            color="gray"></c-amount.display>
+        </div>
+        {% endif %}
       {% empty %}
         <div>-</div>
       {% endfor %}
@@ -25,11 +37,23 @@
     <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.expense_unpaid %}
-        <c-amount.display
-                    :amount="entry.amount"
-                    :prefix="entry.prefix"
-                    :suffix="entry.suffix"
-                    :decimal_places="entry.decimal_places"></c-amount.display>
+        <div>
+          <c-amount.display
+              :amount="entry.amount"
+              :prefix="entry.prefix"
+              :suffix="entry.suffix"
+              :decimal_places="entry.decimal_places"></c-amount.display>
+        </div>
+        {% if entry.exchanged %}
+        <div>
+          <c-amount.display
+            :amount="entry.exchanged.amount"
+            :prefix="entry.exchanged.prefix"
+            :suffix="entry.exchanged.suffix"
+            :decimal_places="entry.exchanged.decimal_places"
+            color="gray"></c-amount.display>
+        </div>
+        {% endif %}
       {% empty %}
         <div>-</div>
       {% endfor %}
@@ -42,13 +66,24 @@
     <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.balance_unpaid %}
-        <div class="{% if entry.amount > 0 %}tw-text-green-400{% elif entry.amount < 0 %}tw-text-red-400{% endif %}">
-        <c-amount.display
-                    :amount="entry.amount"
-                    :prefix="entry.prefix"
-                    :suffix="entry.suffix"
-                    :decimal_places="entry.decimal_places"></c-amount.display>
+        <div>
+          <c-amount.display
+              :amount="entry.amount"
+              :prefix="entry.prefix"
+              :suffix="entry.suffix"
+              :decimal_places="entry.decimal_places"
+              color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
         </div>
+        {% if entry.exchanged %}
+        <div>
+          <c-amount.display
+            :amount="entry.exchanged.amount"
+            :prefix="entry.exchanged.prefix"
+            :suffix="entry.exchanged.suffix"
+            :decimal_places="entry.exchanged.decimal_places"
+            color="gray"></c-amount.display>
+        </div>
+        {% endif %}
       {% empty %}
         <div>-</div>
       {% endfor %}
@@ -62,11 +97,23 @@
     <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.income_paid %}
+        <div>
         <c-amount.display
-                    :amount="entry.amount"
-                    :prefix="entry.prefix"
-                    :suffix="entry.suffix"
-                    :decimal_places="entry.decimal_places"></c-amount.display>
+            :amount="entry.amount"
+            :prefix="entry.prefix"
+            :suffix="entry.suffix"
+            :decimal_places="entry.decimal_places"></c-amount.display>
+        </div>
+        {% if entry.exchanged %}
+        <div>
+          <c-amount.display
+            :amount="entry.exchanged.amount"
+            :prefix="entry.exchanged.prefix"
+            :suffix="entry.exchanged.suffix"
+            :decimal_places="entry.exchanged.decimal_places"
+            color="gray"></c-amount.display>
+        </div>
+        {% endif %}
       {% empty %}
         <div>-</div>
       {% endfor %}
@@ -79,11 +126,23 @@
     <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.expense_paid %}
-        <c-amount.display
-                    :amount="entry.amount"
-                    :prefix="entry.prefix"
-                    :suffix="entry.suffix"
-                    :decimal_places="entry.decimal_places"></c-amount.display>
+        <div>
+          <c-amount.display
+              :amount="entry.amount"
+              :prefix="entry.prefix"
+              :suffix="entry.suffix"
+              :decimal_places="entry.decimal_places"></c-amount.display>
+        </div>
+        {% if entry.exchanged %}
+        <div>
+          <c-amount.display
+            :amount="entry.exchanged.amount"
+            :prefix="entry.exchanged.prefix"
+            :suffix="entry.exchanged.suffix"
+            :decimal_places="entry.exchanged.decimal_places"
+            color="gray"></c-amount.display>
+        </div>
+        {% endif %}
       {% empty %}
         <div>-</div>
       {% endfor %}
@@ -96,13 +155,24 @@
     <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace tw-text-yellow-400">
       {% for entry in totals.balance_paid %}
-        <div class="{% if entry.amount > 0 %}tw-text-green-400{% elif entry.amount < 0 %}tw-text-red-400{% endif %}">
-        <c-amount.display
-                    :amount="entry.amount"
-                    :prefix="entry.prefix"
-                    :suffix="entry.suffix"
-                    :decimal_places="entry.decimal_places"></c-amount.display>
+        <div>
+          <c-amount.display
+              :amount="entry.amount"
+              :prefix="entry.prefix"
+              :suffix="entry.suffix"
+              :decimal_places="entry.decimal_places"
+              color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
         </div>
+        {% if entry.exchanged %}
+        <div>
+          <c-amount.display
+            :amount="entry.exchanged.amount"
+            :prefix="entry.exchanged.prefix"
+            :suffix="entry.exchanged.suffix"
+            :decimal_places="entry.exchanged.decimal_places"
+            color="gray"></c-amount.display>
+        </div>
+        {% endif %}
       {% empty %}
         <div>-</div>
       {% endfor %}
@@ -116,16 +186,27 @@
     <div class="dotted-line flex-grow-1"></div>
     <div class="text-end font-monospace">
       {% for entry in totals.balance_total %}
-        <div class="{% if entry.amount > 0 %}tw-text-green-400{% elif entry.amount < 0 %}tw-text-red-400{% endif %}">
-        <c-amount.display
-                    :amount="entry.amount"
-                    :prefix="entry.prefix"
-                    :suffix="entry.suffix"
-                    :decimal_places="entry.decimal_places"></c-amount.display>
+        <div>
+          <c-amount.display
+              :amount="entry.amount"
+              :prefix="entry.prefix"
+              :suffix="entry.suffix"
+              :decimal_places="entry.decimal_places"
+              color="{% if entry.amount > 0 %}green{% elif entry.amount < 0 %}red{% endif %}"></c-amount.display>
         </div>
+        {% if entry.exchanged %}
+        <div>
+          <c-amount.display
+            :amount="entry.exchanged.amount"
+            :prefix="entry.exchanged.prefix"
+            :suffix="entry.exchanged.suffix"
+            :decimal_places="entry.exchanged.decimal_places"
+            color="gray"></c-amount.display>
+        </div>
+        {% endif %}
       {% empty %}
         <div>-</div>
       {% endfor %}
     </div>
   </div>
-  </div>
+</div>