refactor: move month_year_picker to common and make it more generic

app/templates/monthly_overview/fragments/month_year_picker.html

@@ -1,51 +0,0 @@
-{% extends 'extends/offcanvas.html' %}
-{% load month_name %}
-{% load i18n %}
-
-{% block title %}{% translate 'Pick a month' %}{% endblock %}
-
-{% block body %}
-{% regroup month_year_data by year as years_list %}
-
-<ul class="nav nav-pills nav-fill" id="yearTabs" role="tablist">
-  {% for x in years_list %}
-  <li class="nav-item" role="presentation">
-    <button class="nav-link{% if x.grouper == current_year %} active{% endif %}"
-            id="{{ x.grouper }}"
-            data-bs-toggle="tab"
-            data-bs-target="#{{ x.grouper }}-pane"
-            type="button"
-            role="tab"
-            aria-controls="{{ x.grouper }}-pane"
-            aria-selected="{% if x.grouper == current_year %}true{% else %}false{% endif %}">
-      {{ x.grouper }}
-    </button>
-  </li>
-  {% endfor %}
-</ul>
-<div class="tab-content" id="yearTabsContent" hx-boost="true">
-  {% for x in years_list %}
-  <div class="tab-pane fade{% if x.grouper == current_year %} show active{% endif %} mt-2"
-       id="{{ x.grouper }}-pane"
-       role="tabpanel"
-       aria-labelledby="{{ x.grouper }}"
-       tabindex="0">
-    <ul class="list-group list-group-flush" id="month-year-list">
-      {% for month_data in x.list %}
-      <li class="list-group-item hover:tw-bg-zinc-900
-            {% if month_data.month == current_month and month_data.year == current_year %} disabled bg-primary{% endif %}"
-          {% if month_data.month == current_month and month_data.year == current_year %}aria-disabled="true"{% endif %}>
-        <div class="d-flex justify-content-between">
-          <a class="text-decoration-none stretched-link {% if month_data.month == current_month and month_data.year == current_year %} text-black{% endif %}"
-           href="{% url "monthly_overview" month=month_data.month year=month_data.year %}">
-            {{ month_data.month|month_name }}</a>
-          <span class="badge text-bg-secondary">{{ month_data.transaction_count }}</span>
-        </div>
-          
-      </li>
-      {% endfor %}
-    </ul>
-  </div>
-  {% endfor %}
-</div>
-{% endblock %}

app/templates/monthly_overview/pages/overview.html

@@ -26,10 +26,10 @@
             class="fa-solid fa-chevron-left"></i></a>
       </div>
       <div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center"
-           hx-get="{% url 'available_dates' %}"
+           hx-get="{% url 'month_year_picker' %}"
            hx-target="#generic-offcanvas-left"
            hx-trigger="click, date_picker from:window"
-           hx-vals='{"month": {{ month }}, "year": {{ year }}}' role="button">
+           hx-vals='{"month": {{ month }}, "year": {{ year }}, "for": "monthly_overview", "field": "reference_date"}' role="button">
         {{ month|month_name }} {{ year }}
       </div>
       <div class="tw-text-base mx-2 h-100 align-items-center d-flex">
@@ -97,7 +97,7 @@
   <div class="row gx-xl-4 gy-3">
     <div class="col-12 col-xl-4 order-0 order-xl-2">
       <div id="summary" hx-get="{% url 'monthly_summary' month=month year=year %}" class="show-loading"
-           hx-trigger="load, updated from:window, monthly_summary_update from:window">
+           hx-trigger="load, updated from:window, selective_update from:window">
       </div>
     </div>
     <div class="col-12 col-xl-8 order-2 order-xl-1">