feat: revamp Yearly Overview

app/apps/yearly_overview/urls.py

@@ -11,7 +11,7 @@ urlpatterns = [
         name="yearly_overview_currency",
     ),
     path(
-        "yearly-overview/<int:year>/data/",
+        "yearly-overview/<int:year>/currency/data/",
         views.yearly_overview_by_currency,
         name="yearly_overview_currency_data",
     ),

app/apps/yearly_overview/views.py

@@ -13,6 +13,7 @@ from apps.accounts.models import Account
 from apps.currencies.models import Currency
 from apps.currencies.utils.convert import convert
 from apps.transactions.models import Transaction
+from apps.common.decorators.htmx import only_htmx
 
 
 @login_required
@@ -35,7 +36,9 @@ def index_yearly_overview_by_currency(request, year: int):
     previous_year = year - 1
 
     month_options = range(1, 13)
-    currency_options = Currency.objects.all()
+    currency_options = Currency.objects.filter(
+        accounts__transactions__date__year=year
+    ).distinct()
 
     return render(
         request,
@@ -50,6 +53,7 @@ def index_yearly_overview_by_currency(request, year: int):
     )
 
 
+@only_htmx
 @login_required
 def yearly_overview_by_currency(request, year: int):
     month = request.GET.get("month")
@@ -196,8 +200,6 @@ def yearly_overview_by_currency(request, year: int):
                     }
                 )
 
-    print(result)
-
     return render(
         request,
         "yearly_overview/fragments/currency_data.html",
@@ -208,6 +210,32 @@ def yearly_overview_by_currency(request, year: int):
     )
 
 
+@login_required
+def index_yearly_overview_by_account(request, year: int):
+    next_year = year + 1
+    previous_year = year - 1
+
+    month_options = range(1, 13)
+    account_options = (
+        Account.objects.filter(is_archived=False, transactions__date__year=year)
+        .select_related("group")
+        .distinct()
+    )
+
+    return render(
+        request,
+        "yearly_overview/pages/overview_by_account.html",
+        context={
+            "year": year,
+            "next_year": next_year,
+            "previous_year": previous_year,
+            "months": month_options,
+            "accounts": account_options,
+        },
+    )
+
+
+@only_htmx
 @login_required
 def yearly_overview_by_account(request, year: int):
     month = request.GET.get("month")
@@ -420,7 +448,6 @@ def yearly_overview_by_account(request, year: int):
                     )
 
                     if isinstance(converted_amount, Decimal):
-                        print(converted_amount)
                         result[month][account_id][
                             f"exchange_{field}"
                         ] = converted_amount

app/templates/yearly_overview/pages/overview_by_currency.html

@@ -90,77 +90,77 @@
       </div>
     </div>
   </div>
-    <div class="row">
-      <div class="col-lg-2">
-          <div class="nav flex-column nav-pills" id="month-pills" role="tablist" aria-orientation="vertical">
-              <input type="hidden" name="month" value="">
-              <button class="nav-link active"
-                      role="tab"
-                      data-bs-toggle="pill"
-                      hx-get="{% url 'yearly_overview_currency_data' year=year %}"
-                      hx-target="#data-content"
-                      hx-trigger="click"
-                      hx-include="[name='currency'], [name='month']"
-                      hx-swap="innerHTML"
-                      onclick="document.querySelector('[name=month]').value = ''">
-                  {% translate 'Year' %}
-              </button>
-              {% for month in months %}
-              <button class="nav-link"
-                      role="tab"
-                      data-bs-toggle="pill"
-                      hx-get="{% url 'yearly_overview_currency_data' year=year %}"
-                      hx-target="#data-content"
-                      hx-trigger="click"
-                      hx-include="[name='currency'], [name='month']"
-                      hx-swap="innerHTML"
-                      onclick="document.querySelector('[name=month]').value = '{{ month }}'">
-                  {{ month|month_name }}
-              </button>
-              {% endfor %}
-          </div>
-      </div>
-    
-      <hr class="my-4 d-block d-lg-none">
-      <div class="col-lg-3">
-          <div class="nav flex-column nav-pills" id="currency-pills" role="tablist" aria-orientation="vertical">
-              <input type="hidden" name="currency" value="">
-              <button class="nav-link active"
-                      role="tab"
-                      data-bs-toggle="pill"
-                      hx-get="{% url 'yearly_overview_currency_data' year=year %}"
-                      hx-target="#data-content"
-                      hx-trigger="click"
-                      hx-include="[name='currency'], [name='month']"
-                      hx-swap="innerHTML"
-                      onclick="document.querySelector('[name=currency]').value = ''">
-                  {% translate 'All' %}
-              </button>
-              {% for currency in currencies %}
-              <button class="nav-link"
-                      role="tab"
-                      data-bs-toggle="pill"
-                      hx-get="{% url 'yearly_overview_currency_data' year=year %}"
-                      hx-target="#data-content"
-                      hx-trigger="click"
-                      hx-include="[name='currency'], [name='month']"
-                      hx-swap="innerHTML"
-                      onclick="document.querySelector('[name=currency]').value = '{{ currency.id }}'">
-                  {{ currency.name }}
-              </button>
-              {% endfor %}
-          </div>
-      </div>
+  <div class="row">
+    <div class="col-lg-2">
+        <div class="nav flex-column nav-pills" id="month-pills" role="tablist" aria-orientation="vertical">
+            <input type="hidden" name="month" value="">
+            <button class="nav-link active"
+                    role="tab"
+                    data-bs-toggle="pill"
+                    hx-get="{% url 'yearly_overview_currency_data' year=year %}"
+                    hx-target="#data-content"
+                    hx-trigger="click"
+                    hx-include="[name='currency'], [name='month']"
+                    hx-swap="innerHTML"
+                    onclick="document.querySelector('[name=month]').value = ''">
+                {% translate 'Year' %}
+            </button>
+            {% for month in months %}
+            <button class="nav-link"
+                    role="tab"
+                    data-bs-toggle="pill"
+                    hx-get="{% url 'yearly_overview_currency_data' year=year %}"
+                    hx-target="#data-content"
+                    hx-trigger="click"
+                    hx-include="[name='currency'], [name='month']"
+                    hx-swap="innerHTML"
+                    onclick="document.querySelector('[name=month]').value = '{{ month }}'">
+                {{ month|month_name }}
+            </button>
+            {% endfor %}
+        </div>
+    </div>
+  
+    <hr class="my-4 d-block d-lg-none">
+    <div class="col-lg-3">
+        <div class="nav flex-column nav-pills" id="currency-pills" role="tablist" aria-orientation="vertical">
+            <input type="hidden" name="currency" value="">
+            <button class="nav-link active"
+                    role="tab"
+                    data-bs-toggle="pill"
+                    hx-get="{% url 'yearly_overview_currency_data' year=year %}"
+                    hx-target="#data-content"
+                    hx-trigger="click"
+                    hx-include="[name='currency'], [name='month']"
+                    hx-swap="innerHTML"
+                    onclick="document.querySelector('[name=currency]').value = ''">
+                {% translate 'All' %}
+            </button>
+            {% for currency in currencies %}
+            <button class="nav-link"
+                    role="tab"
+                    data-bs-toggle="pill"
+                    hx-get="{% url 'yearly_overview_currency_data' year=year %}"
+                    hx-target="#data-content"
+                    hx-trigger="click"
+                    hx-include="[name='currency'], [name='month']"
+                    hx-swap="innerHTML"
+                    onclick="document.querySelector('[name=currency]').value = '{{ currency.id }}'">
+                {{ currency.name }}
+            </button>
+            {% endfor %}
+        </div>
+    </div>
 
-      <div class="col-lg-7">
-          <div id="data-content"
-               class="show-loading"
-               hx-get="{% url 'yearly_overview_currency_data' year=year %}"
-               hx-trigger="load"
-               hx-include="[name='currency'], [name='month']"
-               hx-swap="innerHTML">
-          </div>
-      </div>
-</div>
+    <div class="col-lg-7">
+        <div id="data-content"
+             class="show-loading"
+             hx-get="{% url 'yearly_overview_currency_data' year=year %}"
+             hx-trigger="load"
+             hx-include="[name='currency'], [name='month']"
+             hx-swap="innerHTML">
+        </div>
+    </div>
+  </div>
 </div>
 {% endblock %}