feat: implement django-cotton

app/WYGIWYH/settings.py

@@ -68,6 +68,7 @@ INSTALLED_APPS = [
     "cachalot",
     "rest_framework",
     "drf_spectacular",
+    "django_cotton",
 ]
 
 MIDDLEWARE = [

app/apps/transactions/templatetags/currency_display.py

@@ -16,26 +16,6 @@ def _format_string(prefix, amount, decimal_places, suffix):
         return f"{prefix}{formatted_amount}{suffix}"
 
 
-@register.simple_tag(name="transaction_amount")
-def transaction_currency(transaction: Transaction):
-    prefix = transaction.account.currency.prefix
-    amount = transaction.amount
-    decimal_places = transaction.account.currency.decimal_places
-    suffix = transaction.account.currency.suffix
-
-    return _format_string(prefix, amount, decimal_places, suffix)
-
-
-@register.simple_tag(name="entry_amount")
-def entry_currency(entry):
-    prefix = entry["prefix"]
-    amount = entry["amount"]
-    decimal_places = entry["decimal_places"]
-    suffix = entry["suffix"]
-
-    return _format_string(prefix, amount, decimal_places, suffix)
-
-
 @register.simple_tag(name="currency_display")
 def currency_display(amount, prefix, suffix, decimal_places):
     return _format_string(prefix, amount, decimal_places, suffix)

app/apps/yearly_overview/views.py

@@ -20,229 +20,79 @@ def index(request):
     return redirect(to="yearly_overview", year=now.year)
 
 
-# def yearly_overview(request, year: int):
-#     transactions = Transaction.objects.filter(date__year=year)
-#
-#     monthly_data = (
-#         transactions.annotate(month=TruncMonth("date"))
-#         .values(
-#             "month",
-#             "account__id",
-#             "account__name",
-#             "account__group__name",
-#             "account__currency__code",
-#             "account__currency__suffix",
-#             "account__currency__prefix",
-#             "account__currency__decimal_places",
-#         )
-#         .annotate(
-#             income_paid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             type=Transaction.Type.INCOME, is_paid=True, then=F("amount")
-#                         ),
-#                         default=Value(Decimal("0")),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(Decimal("0")),
-#                 output_field=DecimalField(),
-#             ),
-#             expense_paid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             type=Transaction.Type.EXPENSE,
-#                             is_paid=True,
-#                             then=F("amount"),
-#                         ),
-#                         default=Value(Decimal("0")),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(Decimal("0")),
-#                 output_field=DecimalField(),
-#             ),
-#             income_unpaid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             type=Transaction.Type.INCOME,
-#                             is_paid=False,
-#                             then=F("amount"),
-#                         ),
-#                         default=Value(Decimal("0")),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(Decimal("0")),
-#                 output_field=DecimalField(),
-#             ),
-#             expense_unpaid=Coalesce(
-#                 Sum(
-#                     Case(
-#                         When(
-#                             type=Transaction.Type.EXPENSE,
-#                             is_paid=False,
-#                             then=F("amount"),
-#                         ),
-#                         default=Value(Decimal("0")),
-#                         output_field=DecimalField(),
-#                     )
-#                 ),
-#                 Value(Decimal("0")),
-#                 output_field=DecimalField(),
-#             ),
-#         )
-#         .annotate(
-#             balance_unpaid=F("income_unpaid") - F("expense_unpaid"),
-#             balance_paid=F("income_paid") - F("expense_paid"),
-#             balance_total=F("income_paid")
-#             + F("income_unpaid")
-#             - F("expense_paid")
-#             - F("expense_unpaid"),
-#         )
-#         .order_by("month", "account__group__name")
-#     )
-#
-#     # Create a list of all months in the year
-#     all_months = [date(year, month, 1) for month in range(1, 13)]
-#
-#     # Create a dictionary to store the final result
-#     result = {
-#         month: {
-#             "income_paid": [],
-#             "expense_paid": [],
-#             "income_unpaid": [],
-#             "expense_unpaid": [],
-#             "balance_unpaid": [],
-#             "balance_paid": [],
-#             "balance_total": [],
-#         }
-#         for month in all_months
-#     }
-#
-#     # Fill in the data
-#     for entry in monthly_data:
-#         month = entry["month"]
-#         account_info = {
-#             "id": entry["account__id"],
-#             "name": entry["account__name"],
-#             "currency": entry["account__currency__code"],
-#             "suffix": entry["account__currency__suffix"],
-#             "prefix": entry["account__currency__prefix"],
-#             "decimal_places": entry["account__currency__decimal_places"],
-#             "group": entry["account__group__name"],
-#         }
-#
-#         for field in [
-#             "income_paid",
-#             "expense_paid",
-#             "income_unpaid",
-#             "expense_unpaid",
-#             "balance_unpaid",
-#             "balance_paid",
-#             "balance_total",
-#         ]:
-#             result[month][field].append(
-#                 {"account": account_info, "amount": entry[field]}
-#             )
-#
-#     # Fill in missing months with empty lists
-#     for month in all_months:
-#         if not any(result[month].values()):
-#             result[month] = {
-#                 "income_paid": [],
-#                 "expense_paid": [],
-#                 "income_unpaid": [],
-#                 "expense_unpaid": [],
-#                 "balance_unpaid": [],
-#                 "balance_paid": [],
-#                 "balance_total": [],
-#             }
-#
-#     from pprint import pprint
-#
-#     pprint(result)
-#
-#     return render(
-#         request,
-#         "yearly_overview/pages/overview2.html",
-#         context={
-#             "year": year,
-#             # "next_month": next_month,
-#             # "next_year": next_year,
-#             # "previous_month": previous_month,
-#             # "previous_year": previous_year,
-#             "data": result,
-#         },
-#     )
-
-
 def yearly_overview(request, year: int):
-    # First, let's create a base queryset for the given year
-    base_queryset = Transaction.objects.filter(date__year=year)
+    transactions = Transaction.objects.filter(date__year=year)
 
-    # Create a list of all months in the year
-    months = [f"{year}-{month:02d}-01" for month in range(1, 13)]
-
-    # Create the queryset with all the required annotations
-    queryset = (
-        base_queryset.annotate(month=TruncMonth("date"))
-        .values("month", "account__group__name")
+    monthly_data = (
+        transactions.annotate(month=TruncMonth("date"))
+        .values(
+            "month",
+            "account__id",
+            "account__name",
+            "account__group__name",
+            "account__currency__code",
+            "account__currency__suffix",
+            "account__currency__prefix",
+            "account__currency__decimal_places",
+        )
         .annotate(
             income_paid=Coalesce(
                 Sum(
                     Case(
                         When(
-                            Q(type=Transaction.Type.INCOME, is_paid=True),
-                            then=F("amount"),
+                            type=Transaction.Type.INCOME, is_paid=True, then=F("amount")
                         ),
-                        default=Value(0),
+                        default=Value(Decimal("0")),
                         output_field=DecimalField(),
                     )
                 ),
-                Value(0, output_field=DecimalField()),
+                Value(Decimal("0")),
+                output_field=DecimalField(),
             ),
             expense_paid=Coalesce(
                 Sum(
                     Case(
                         When(
-                            Q(type=Transaction.Type.EXPENSE, is_paid=True),
+                            type=Transaction.Type.EXPENSE,
+                            is_paid=True,
                             then=F("amount"),
                         ),
-                        default=Value(0),
+                        default=Value(Decimal("0")),
                         output_field=DecimalField(),
                     )
                 ),
-                Value(0, output_field=DecimalField()),
+                Value(Decimal("0")),
+                output_field=DecimalField(),
             ),
             income_unpaid=Coalesce(
                 Sum(
                     Case(
                         When(
-                            Q(type=Transaction.Type.INCOME, is_paid=False),
+                            type=Transaction.Type.INCOME,
+                            is_paid=False,
                             then=F("amount"),
                         ),
-                        default=Value(0),
+                        default=Value(Decimal("0")),
                         output_field=DecimalField(),
                     )
                 ),
-                Value(0, output_field=DecimalField()),
+                Value(Decimal("0")),
+                output_field=DecimalField(),
             ),
             expense_unpaid=Coalesce(
                 Sum(
                     Case(
                         When(
-                            Q(type=Transaction.Type.EXPENSE, is_paid=False),
+                            type=Transaction.Type.EXPENSE,
+                            is_paid=False,
                             then=F("amount"),
                         ),
-                        default=Value(0),
+                        default=Value(Decimal("0")),
                         output_field=DecimalField(),
                     )
                 ),
-                Value(0, output_field=DecimalField()),
+                Value(Decimal("0")),
+                output_field=DecimalField(),
             ),
         )
         .annotate(
@@ -256,45 +106,65 @@ def yearly_overview(request, year: int):
         .order_by("month", "account__group__name")
     )
 
-    # Create a dictionary to store results
-    results = {month: {} for month in months}
+    # Create a list of all months in the year
+    all_months = [date(year, month, 1) for month in range(1, 13)]
 
-    # Populate the results dictionary
-    for entry in queryset:
+    # Create a dictionary to store the final result
+    result = {
+        month: {
+            "income_paid": [],
+            "expense_paid": [],
+            "income_unpaid": [],
+            "expense_unpaid": [],
+            "balance_unpaid": [],
+            "balance_paid": [],
+            "balance_total": [],
+        }
+        for month in all_months
+    }
+
+    # Fill in the data
+    for entry in monthly_data:
         month = entry["month"]
-        account_group = entry["account__group__name"]
+        account_info = {
+            "id": entry["account__id"],
+            "name": entry["account__name"],
+            "currency": entry["account__currency__code"],
+            "suffix": entry["account__currency__suffix"],
+            "prefix": entry["account__currency__prefix"],
+            "decimal_places": entry["account__currency__decimal_places"],
+            "group": entry["account__group__name"],
+        }
 
-        if account_group not in results[month]:
-            results[month][account_group] = {
-                "income_paid": entry["income_paid"],
-                "expense_paid": entry["expense_paid"],
-                "income_unpaid": entry["income_unpaid"],
-                "expense_unpaid": entry["expense_unpaid"],
-                "balance_unpaid": entry["balance_unpaid"],
-                "balance_paid": entry["balance_paid"],
-                "balance_total": entry["balance_total"],
+        for field in [
+            "income_paid",
+            "expense_paid",
+            "income_unpaid",
+            "expense_unpaid",
+            "balance_unpaid",
+            "balance_paid",
+            "balance_total",
+        ]:
+            result[month][field].append(
+                {"account": account_info, "amount": entry[field]}
+            )
+
+    # Fill in missing months with empty lists
+    for month in all_months:
+        if not any(result[month].values()):
+            result[month] = {
+                "income_paid": [],
+                "expense_paid": [],
+                "income_unpaid": [],
+                "expense_unpaid": [],
+                "balance_unpaid": [],
+                "balance_paid": [],
+                "balance_total": [],
             }
-        else:
-            # If the account group already exists, update the values
-            for key in [
-                "income_paid",
-                "expense_paid",
-                "income_unpaid",
-                "expense_unpaid",
-                "balance_unpaid",
-                "balance_paid",
-                "balance_total",
-            ]:
-                results[month][account_group][key] += entry[key]
-
-    # Replace empty months with "-"
-    for month in results:
-        if not results[month]:
-            results[month] = "-"
 
     from pprint import pprint
 
-    pprint(results)
+    pprint(result)
 
     return render(
         request,
@@ -305,11 +175,142 @@ def yearly_overview(request, year: int):
             # "next_year": next_year,
             # "previous_month": previous_month,
             # "previous_year": previous_year,
-            "data": results,
+            "data": result,
         },
     )
 
 
+# def yearly_overview(request, year: int):
+#     # First, let's create a base queryset for the given year
+#     base_queryset = Transaction.objects.filter(date__year=year)
+#
+#     # Create a list of all months in the year
+#     months = [month for month in range(1, 13)]
+#
+#     # Create the queryset with all the required annotations
+#     queryset = (
+#         base_queryset.annotate(month=TruncMonth("date"))
+#         .values("month", "account__group__name")
+#         .annotate(
+#             income_paid=Coalesce(
+#                 Sum(
+#                     Case(
+#                         When(
+#                             Q(type=Transaction.Type.INCOME, is_paid=True),
+#                             then=F("amount"),
+#                         ),
+#                         default=Value(0),
+#                         output_field=DecimalField(),
+#                     )
+#                 ),
+#                 Value(0, output_field=DecimalField()),
+#             ),
+#             expense_paid=Coalesce(
+#                 Sum(
+#                     Case(
+#                         When(
+#                             Q(type=Transaction.Type.EXPENSE, is_paid=True),
+#                             then=F("amount"),
+#                         ),
+#                         default=Value(0),
+#                         output_field=DecimalField(),
+#                     )
+#                 ),
+#                 Value(0, output_field=DecimalField()),
+#             ),
+#             income_unpaid=Coalesce(
+#                 Sum(
+#                     Case(
+#                         When(
+#                             Q(type=Transaction.Type.INCOME, is_paid=False),
+#                             then=F("amount"),
+#                         ),
+#                         default=Value(0),
+#                         output_field=DecimalField(),
+#                     )
+#                 ),
+#                 Value(0, output_field=DecimalField()),
+#             ),
+#             expense_unpaid=Coalesce(
+#                 Sum(
+#                     Case(
+#                         When(
+#                             Q(type=Transaction.Type.EXPENSE, is_paid=False),
+#                             then=F("amount"),
+#                         ),
+#                         default=Value(0),
+#                         output_field=DecimalField(),
+#                     )
+#                 ),
+#                 Value(0, output_field=DecimalField()),
+#             ),
+#         )
+#         .annotate(
+#             balance_unpaid=F("income_unpaid") - F("expense_unpaid"),
+#             balance_paid=F("income_paid") - F("expense_paid"),
+#             balance_total=F("income_paid")
+#             + F("income_unpaid")
+#             - F("expense_paid")
+#             - F("expense_unpaid"),
+#         )
+#         .order_by("month", "account__group__name")
+#     )
+#
+#     # Create a dictionary to store results
+#     results = {month: {} for month in months}
+#     print(results)
+#
+#     # Populate the results dictionary
+#     for entry in queryset:
+#         month = int(entry["month"].strftime("%m"))
+#         account_group = entry["account__group__name"]
+#
+#         if account_group not in results[month]:
+#             results[month][account_group] = {
+#                 "income_paid": entry["income_paid"],
+#                 "expense_paid": entry["expense_paid"],
+#                 "income_unpaid": entry["income_unpaid"],
+#                 "expense_unpaid": entry["expense_unpaid"],
+#                 "balance_unpaid": entry["balance_unpaid"],
+#                 "balance_paid": entry["balance_paid"],
+#                 "balance_total": entry["balance_total"],
+#             }
+#         else:
+#             # If the account group already exists, update the values
+#             for key in [
+#                 "income_paid",
+#                 "expense_paid",
+#                 "income_unpaid",
+#                 "expense_unpaid",
+#                 "balance_unpaid",
+#                 "balance_paid",
+#                 "balance_total",
+#             ]:
+#                 results[month][account_group][key] += entry[key]
+#
+#     # Replace empty months with "-"
+#     for month in results:
+#         if not results[month]:
+#             results[month] = "-"
+#
+#     from pprint import pprint
+#
+#     pprint(results)
+#
+#     return render(
+#         request,
+#         "yearly_overview/pages/overview2.html",
+#         context={
+#             "year": year,
+#             # "next_month": next_month,
+#             # "next_year": next_year,
+#             # "previous_month": previous_month,
+#             # "previous_year": previous_year,
+#             "data": results,
+#         },
+#     )
+
+
 # def yearly_overview(request, year: int):
 #     transactions = Transaction.objects.filter(reference_date__year=year)
 #

app/templates/cotton/amount/display.html

@@ -0,0 +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 %}"
+       data-original-value="{% currency_display amount=amount prefix=prefix suffix=suffix decimal_places=decimal_places %}">
+  </div>
+</div>

app/templates/monthly_overview/fragments/monthly_summary.html

@@ -16,7 +16,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.daily_spending_allowance %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -40,7 +44,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.paid_income %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -53,7 +61,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.projected_income %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -77,7 +89,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.paid_expenses %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -90,7 +106,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.projected_expenses %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -114,7 +134,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.total_current %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -126,7 +150,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.total_projected %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -136,7 +164,11 @@
         <div class="d-flex justify-content-end">
           <div class="text-end font-monospace">
             {% for entry in totals.total_final %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}

app/templates/net_worth/net_worth.html

@@ -26,7 +26,12 @@
                 <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="amount text-end font-monospace" data-original-value="{% currency_display amount=currency.amount prefix=currency.prefix suffix=currency.suffix decimal_places=currency.decimal_places %}"></div>
+                    <c-amount.display
+                          :amount="currency.amount"
+                          :prefix="currency.prefix"
+                          :suffix="currency.suffix"
+                          :decimal_places="currency.decimal_places"
+                          text-end></c-amount.display>
                 </div>
             </div>
             {% endfor %}
@@ -56,12 +61,21 @@
                         <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="amount" data-original-value="{% currency_display amount=account_data.balance prefix=account_data.currency.prefix suffix=account_data.currency.suffix decimal_places=account_data.currency.decimal_places%}"></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>
                     </div>
                   </div>
                   {% if account_data.exchange %}
-                    <div class="amount text-end tw-text-gray-400" data-original-value=
-                        "{% currency_display amount=account_data.exchange.amount prefix=account_data.exchange.prefix suffix=account_data.exchange.suffix decimal_places=account_data.exchange.decimal_places%}"></div>
+                    <c-amount.display
+                          :amount="account_data.exchange.amount"
+                          :prefix="account_data.exchange.prefix"
+                          :suffix="account_data.exchange.suffix"
+                          :decimal_places="account_data.exchange.decimal_places"
+                          color="grey"
+                          text-end></c-amount.display>
                   {% endif %}
                 {% endfor %}
               {% else %}
@@ -70,13 +84,22 @@
                     <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="amount" data-original-value="{% currency_display amount=account_data.balance prefix=account_data.currency.prefix suffix=account_data.currency.suffix decimal_places=account_data.currency.decimal_places%}"></div>
-                        {% if account_data.exchange %}
-                        <div class="amount text-end tw-text-gray-400" data-original-value=
-                            "{% currency_display amount=account_data.balance prefix=account_data.currency.prefix suffix=account_data.currency.suffix decimal_places=account_data.currency.decimal_places%}"></div>
-                        {% endif %}
+                        <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>
                     </div>
                 </div>
+                {% if account_data.exchange %}
+                      <c-amount.display
+                        :amount="account_data.exchange.amount"
+                        :prefix="account_data.exchange.prefix"
+                        :suffix="account_data.exchange.suffix"
+                        :decimal_places="account_data.exchange.decimal_places"
+                        color="grey"
+                        text-end></c-amount.display>
+                {% endif %}
                 {% endfor %}
               {% endif %}
               {% endfor %}

app/templates/transactions/fragments/item.html

@@ -66,15 +66,23 @@
       </div>
     </div>
     <div class="col-lg-3 col-12 text-lg-end align-self-end">
-        <div class="{% if transaction.type == "EX" %}tw-text-red-400{% else %}tw-text-green-400{% endif %}">
-          <div class="amount" data-original-value="{% transaction_amount transaction %}"></div>
-        </div>
+        <c-amount.display 
+            :amount="transaction.amount"
+            :prefix="transaction.account.currency.prefix"
+            :suffix="transaction.account.currency.suffix"
+            :decimal_places="transaction.account.currency.decimal_places"
+            color="{% if transaction.type == "EX" %}red{% else %}green{% endif %}"
+            text-end></c-amount.display>
         {#    Exchange Rate#}
         {% with exchanged=transaction.exchanged_amount %}
         {% if exchanged %}
-        <div class="tw-text-gray-500 amount"
-             data-original-value="{% currency_display amount=exchanged.amount prefix=exchanged.prefix suffix=exchanged.suffix decimal_places=exchanged.decimal_places %}">
-        </div>
+        <c-amount.display 
+            :amount="exchanged.amount"
+            :prefix="exchanged.prefix"
+            :suffix="exchanged.suffix"
+            :decimal_places="exchanged.decimal_places"
+            color="grey"
+            text-end></c-amount.display>
         {% endif %}
         {% endwith %}
         <div>{{ transaction.account.name }}</div>

app/templates/yearly_overview/fragments/monthly_summary.html

@@ -16,7 +16,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.daily_spending_allowance %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -40,7 +44,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.paid_income %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -53,7 +61,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.projected_income %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -77,7 +89,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.paid_expenses %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -90,7 +106,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.projected_expenses %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -114,7 +134,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.total_current %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -126,7 +150,11 @@
           </div>
           <div class="text-end font-monospace">
             {% for entry in totals.total_projected %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}
@@ -136,7 +164,11 @@
         <div class="d-flex justify-content-end">
           <div class="text-end font-monospace">
             {% for entry in totals.total_final %}
-              <div class="amount" data-original-value="{% entry_amount entry %}"></div>
+              <c-amount.display
+                          :amount="entry.amount"
+                          :prefix="entry.prefix"
+                          :suffix="entry.suffix"
+                          :decimal_places="entry.decimal_places"></c-amount.display>
             {% empty %}
               <div>-</div>
             {% endfor %}

app/templates/yearly_overview/pages/overview2.html

@@ -15,6 +15,34 @@
 
 {% block content %}
 <div class="container px-md-3 py-3 column-gap-5">
+<div class="card" style="width: 18rem;">
+            <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card image">
+            <div class="card-body">
+                <h5 class="card-title">Card Title</h5>
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+            </div>
+            <div class="card-footer">
+                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#expandableContent1" aria-expanded="false" aria-controls="expandableContent1">
+                    Expand Section 1
+                </button>
+                <div class="collapse" id="expandableContent1">
+                    <div class="mt-3">
+                        <p>This is the expandable content for section 1. You can add any additional information or elements here.</p>
+                    </div>
+                </div>
+
+                <hr>
+
+                <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#expandableContent2" aria-expanded="false" aria-controls="expandableContent2">
+                    Expand Section 2
+                </button>
+                <div class="collapse" id="expandableContent2">
+                    <div class="mt-3">
+                        <p>This is the expandable content for section 2. You can add different information or elements here.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
 {#  <div class="row mb-3 gx-xl-4 gy-3 mb-4">#}
 {#    Date picker#}
 {#    <div class="col-12 col-xl-4 flex-row align-items-center d-flex">#}

requirements.txt

@@ -11,6 +11,7 @@ django-filter==24.3
 django-anymail[sendinblue]==10.2
 django-debug-toolbar==4.3.0
 django-cachalot~=2.6.3
+django-cotton~=1.2.1
 
 djangorestframework~=3.15.2
 drf-spectacular~=0.27.2