feat: automated replacement

app/templates/yearly_overview/fragments/account_data.html

@@ -1,13 +1,13 @@
 {% load tools %}
 {% load i18n %}
-<div class="row row-cols-1 g-4 mb-3">
+<div class="tw:grid tw:grid-cols-1 tw:gap-4 tw:mb-3">
   {% for account_id, account in totals.items %}
-    <div class="col">
+    <div>
       <c-ui.account_card :account="account" :account_id="account_id"
                          :percentages="percentages"></c-ui.account_card>
     </div>
   {% empty %}
-    <div class="col">
+    <div>
       <c-msg.empty
           title="{% translate "No information to display" %}"></c-msg.empty>
     </div>

app/templates/yearly_overview/fragments/currency_data.html

@@ -1,13 +1,13 @@
 {% load tools %}
 {% load i18n %}
-<div class="row row-cols-1 g-4 mb-3">
+<div class="tw:grid tw:grid-cols-1 tw:gap-4 tw:mb-3">
   {% for currency_id, currency in totals.items %}
-    <div class="col">
+    <div>
       <c-ui.currency_card :currency="currency" :currency_id="currency_id"
                           :percentages="percentages"></c-ui.currency_card>
     </div>
   {% empty %}
-    <div class="col">
+    <div>
       <c-msg.empty
           title="{% translate "No information to display" %}"></c-msg.empty>
     </div>

app/templates/yearly_overview/pages/overview_by_account.html

@@ -1,135 +1,55 @@
-{% extends "layouts/base.html" %}
+{% extends "yearly_overview/pages/yearly_overview_base.html" %}
 {% load i18n %}
-{% load month_name %}
-{% load static %}
-{% load webpack_loader %}
 
-{% block title %}{% translate 'Yearly Overview' %} :: {% translate "By account" %} :: {{ year }}{% endblock %}
+{% block overview_type_title %}{% translate "By account" %}{% endblock %}
 
-{% block body_hyperscript %}
-  on keyup[code is 'ArrowLeft' and target.nodeName is 'BODY'] from body trigger 'previous_year' end
-  on keyup[code is 'ArrowRight' and target.nodeName is 'BODY'] from body trigger 'next_year' end
+{% block previous_year_url %}{% url 'yearly_overview_account' year=previous_year %}{% endblock %}
+
+{% block next_year_url %}{% url 'yearly_overview_account' year=next_year %}{% endblock %}
+
+{% block data_url %}{% url 'yearly_overview_account_data' year=year %}{% endblock %}
+
+{% block hx_include %}[name='account'], [name='month']{% endblock %}
+
+{% block month_data_url %}{% url 'yearly_overview_account_data' year=year %}{% endblock %}
+
+{% block month_hx_include %}[name='account'], [name='month']{% endblock %}
+
+{% block filter_pills %}
+  <input type="hidden" name="account" value="">
+  <div class="tw:join tw:join-vertical tw:flex-col" id="filter-pills" role="tablist"
+       hx-indicator="#data-content">
+    <button class="tw:btn tw:btn-outline tw:btn-primary tw:btn-active tw:justify-start tw:join-item"
+            role="tab"
+            hx-get="{% url 'yearly_overview_account_data' year=year %}"
+            hx-target="#data-content"
+            hx-trigger="click"
+            hx-include="[name='account'], [name='month']"
+            hx-swap="innerHTML"
+            onclick="document.querySelector('[name=account]').value = ''"
+            _="on click
+               remove .tw:btn-active from <button/> in #filter-pills
+               add .tw:btn-active to me">
+      {% translate 'All' %}
+    </button>
+    {% for account in accounts %}
+      <button class="tw:btn tw:btn-outline tw:btn-primary tw:justify-start tw:join-item"
+              role="tab"
+              hx-get="{% url 'yearly_overview_account_data' year=year %}"
+              hx-target="#data-content"
+              hx-trigger="click"
+              hx-include="[name='account'], [name='month']"
+              hx-swap="innerHTML"
+              onclick="document.querySelector('[name=account]').value = '{{ account.id }}'"
+              _="on click
+                 remove .tw:btn-active from <button/> in #filter-pills
+                 add .tw:btn-active to me">
+        {% if account.group.name %}<span class="tw:badge tw:badge-secondary tw:me-2">{{ account.group.name }}</span>{% endif %} {{ account.name }}
+      </button>
+    {% endfor %}
+  </div>
 {% endblock %}
 
-{% block content %}
-  <div class="h-100 text-center mb-4 pt-2">
-    <div class="btn-group gap-3" role="group">
-      <a href="{% url 'yearly_overview_currency' year=year %}" class="btn {% if type != 'currency' %}btn-outline-primary{% else %}btn-primary{% endif %} rounded-5" hx-boost>
-        <i class="fa-solid fa-solid fa-coins fa-fw me-2"></i>{% trans 'Currency' %}
-      </a>
+{% block content_data_url %}{% url 'yearly_overview_account_data' year=year %}{% endblock %}
 
-      <a href="{% url 'yearly_overview_account' year=year %}" class="btn {% if type != 'account' %}btn-outline-primary{% else %}btn-primary{% endif %} rounded-5" hx-boost>
-        <i class="fa-solid fa-wallet fa-fw me-2"></i>{% trans 'Account' %}
-      </a>
-    </div>
-  </div>
-  <div class="container px-md-3 py-3 column-gap-5" id="yearly-content">
-    <div class="row mb-3 gx-xl-4 gy-3 mb-4">
-      {#    Date picker#}
-      <div class="col-12 col-xl-2 flex-row align-items-center d-flex">
-        <div class="tw:text-base h-100 align-items-center d-flex">
-          <a role="button"
-             class="pe-4 py-2"
-             hx-boost="true"
-             hx-trigger="click, previous_year from:window"
-             href="{% url 'yearly_overview_account' year=previous_year %}">
-            <i class="fa-solid fa-chevron-left"></i></a>
-        </div>
-        <div class="tw:text-3xl fw-bold font-monospace tw:w-full text-center">
-          {{ year }}
-        </div>
-        <div class="tw:text-base mx-2 h-100 align-items-center d-flex">
-          <a role="button"
-             class="ps-3 py-2"
-             hx-boost="true"
-             hx-trigger="click, next_year from:window"
-             href="{% url 'yearly_overview_account' year=next_year %}">
-            <i class="fa-solid fa-chevron-right"></i>
-          </a>
-        </div>
-      </div>
-      {#    Action buttons#}
-      <div class="col-12 col-xl-10">
-        {#      <c-ui.quick-transactions-buttons#}
-        {#        :year="year"#}
-        {#        :month="month"#}
-        {#      ></c-ui.quick-transactions-buttons>#}
-      </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"
-             hx-indicator="#data-content">
-          <input type="hidden" name="month" value="">
-          <button class="nav-link active"
-                  role="tab"
-                  data-bs-toggle="pill"
-                  hx-get="{% url 'yearly_overview_account_data' year=year %}"
-                  hx-target="#data-content"
-                  hx-trigger="click"
-                  hx-include="[name='account'], [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_account_data' year=year %}"
-                    hx-target="#data-content"
-                    hx-trigger="click"
-                    hx-include="[name='account'], [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"
-             hx-indicator="#data-content">
-          <input type="hidden" name="account" value="">
-          <button class="nav-link active"
-                  role="tab"
-                  data-bs-toggle="pill"
-                  hx-get="{% url 'yearly_overview_account_data' year=year %}"
-                  hx-target="#data-content"
-                  hx-trigger="click"
-                  hx-include="[name='account'], [name='month']"
-                  hx-swap="innerHTML"
-                  onclick="document.querySelector('[name=account]').value = ''">
-            {% translate 'All' %}
-          </button>
-          {% for account in accounts %}
-            <button class="nav-link"
-                    role="tab"
-                    data-bs-toggle="pill"
-                    hx-get="{% url 'yearly_overview_account_data' year=year %}"
-                    hx-target="#data-content"
-                    hx-trigger="click"
-                    hx-include="[name='account'], [name='month']"
-                    hx-swap="innerHTML"
-                    onclick="document.querySelector('[name=account]').value = '{{ account.id }}'">
-              <span class="badge text-bg-primary me-2">{{ account.group.name }}</span>{{ account.name }}
-            </button>
-          {% endfor %}
-        </div>
-      </div>
-
-      <div class="col-lg-7">
-        <div id="data-content"
-             class="show-loading"
-             hx-get="{% url 'yearly_overview_account_data' year=year %}"
-             hx-trigger="load, every 10m, updated from:window"
-             hx-include="[name='account'], [name='month']"
-             hx-swap="innerHTML">
-        </div>
-      </div>
-    </div>
-  </div>
-  <c-ui.transactions_fab></c-ui.transactions_fab>
-{% endblock %}
+{% block content_hx_include %}[name='account'], [name='month']{% endblock %}

app/templates/yearly_overview/pages/overview_by_currency.html

@@ -1,137 +1,57 @@
-{% extends "layouts/base.html" %}
+{% extends "yearly_overview/pages/yearly_overview_base.html" %}
 {% load currency_display %}
 {% load crispy_forms_tags %}
 {% load i18n %}
-{% load month_name %}
-{% load static %}
-{% load webpack_loader %}
 
-{% block title %}{% translate 'Yearly Overview' %} :: {% translate 'By currency' %} :: {{ year }}{% endblock %}
+{% block overview_type_title %}{% translate 'By currency' %}{% endblock %}
 
-{% block body_hyperscript %}
-  on keyup[code is 'ArrowLeft' and target.nodeName is 'BODY'] from body trigger 'previous_year' end
-  on keyup[code is 'ArrowRight' and target.nodeName is 'BODY'] from body trigger 'next_year' end
+{% block previous_year_url %}{% url 'yearly_overview_currency' year=previous_year %}{% endblock %}
+
+{% block next_year_url %}{% url 'yearly_overview_currency' year=next_year %}{% endblock %}
+
+{% block data_url %}{% url 'yearly_overview_currency_data' year=year %}{% endblock %}
+
+{% block hx_include %}[name='currency'], [name='month']{% endblock %}
+
+{% block month_data_url %}{% url 'yearly_overview_currency_data' year=year %}{% endblock %}
+
+{% block month_hx_include %}[name='currency'], [name='month']{% endblock %}
+
+{% block filter_pills %}
+  <input type="hidden" name="currency" value="">
+  <div class="tw:join tw:join-vertical tw:flex-col" id="filter-pills" role="tablist"
+       hx-indicator="#data-content">
+    <button class="tw:btn tw:btn-outline tw:btn-primary tw:btn-active tw:justify-start tw:join-item"
+            role="tab"
+            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 = ''"
+            _="on click
+               remove .tw:btn-active from <button/> in #filter-pills
+               add .tw:btn-active to me">
+      {% translate 'All' %}
+    </button>
+    {% for currency in currencies %}
+      <button class="tw:btn tw:btn-outline tw:btn-primary tw:justify-start tw:join-item"
+              role="tab"
+              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 }}'"
+              _="on click
+                 remove .tw:btn-active from <button/> in #filter-pills
+                 add .tw:btn-active to me">
+        {{ currency.name }}
+      </button>
+    {% endfor %}
+  </div>
 {% endblock %}
 
-{% block content %}
-  <div class="h-100 text-center mb-4 pt-2">
-    <div class="btn-group gap-3" role="group">
-      <a href="{% url 'yearly_overview_currency' year=year %}" class="btn {% if type != 'currency' %}btn-outline-primary{% else %}btn-primary{% endif %} rounded-5" hx-boost>
-        <i class="fa-solid fa-solid fa-coins fa-fw me-2"></i>{% trans 'Currency' %}
-      </a>
+{% block content_data_url %}{% url 'yearly_overview_currency_data' year=year %}{% endblock %}
 
-      <a href="{% url 'yearly_overview_account' year=year %}" class="btn {% if type != 'account' %}btn-outline-primary{% else %}btn-primary{% endif %} rounded-5" hx-boost>
-        <i class="fa-solid fa-wallet fa-fw me-2"></i>{% trans 'Account' %}
-      </a>
-    </div>
-  </div>
-  <div class="container px-md-3 py-3 column-gap-5" id="yearly-content">
-    <div class="row mb-3 gx-xl-4 gy-3 mb-4">
-      {#    Date picker#}
-      <div class="col-12 col-xl-2 flex-row align-items-center d-flex">
-        <div class="tw:text-base h-100 align-items-center d-flex">
-          <a role="button"
-             class="pe-4 py-2"
-             hx-boost="true"
-             hx-trigger="click, previous_year from:window"
-             href="{% url 'yearly_overview_currency' year=previous_year %}">
-            <i class="fa-solid fa-chevron-left"></i></a>
-        </div>
-        <div class="tw:text-3xl fw-bold font-monospace tw:w-full text-center">
-          {{ year }}
-        </div>
-        <div class="tw:text-base mx-2 h-100 align-items-center d-flex">
-          <a role="button"
-             class="ps-3 py-2"
-             hx-boost="true"
-             hx-trigger="click, next_year from:window"
-             href="{% url 'yearly_overview_currency' year=next_year %}">
-            <i class="fa-solid fa-chevron-right"></i>
-          </a>
-        </div>
-      </div>
-      {#    Action buttons#}
-      <div class="col-12 col-xl-10">
-        {#      <c-ui.quick-transactions-buttons#}
-        {#        :year="year"#}
-        {#        :month="month"#}
-        {#      ></c-ui.quick-transactions-buttons>#}
-      </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"
-             hx-indicator="#data-content">
-          <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"
-             hx-indicator="#data-content">
-          <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, every 10m, updated from:window"
-             hx-include="[name='currency'], [name='month']"
-             hx-swap="innerHTML">
-        </div>
-      </div>
-    </div>
-  </div>
-  <c-ui.transactions_fab></c-ui.transactions_fab>
-{% endblock %}
+{% block content_hx_include %}[name='currency'], [name='month']{% endblock %}

app/templates/yearly_overview/pages/yearly_overview_base.html

@@ -0,0 +1,107 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+{% load month_name %}
+{% load static %}
+
+{% block title %}{% translate 'Yearly Overview' %} :: {% block overview_type_title %}{% endblock %} :: {{ year }}{% endblock %}
+
+{% block body_hyperscript %}
+  on keyup[code is 'ArrowLeft' and target.nodeName is 'BODY'] from body trigger 'previous_year' end
+  on keyup[code is 'ArrowRight' and target.nodeName is 'BODY'] from body trigger 'next_year' end
+{% endblock %}
+
+{% block content %}
+  <div class="tw:h-full tw:text-center tw:mb-4 tw:pt-2">
+    <div class="tw:btn-group tw:gap-3" role="group">
+      <a href="{% url 'yearly_overview_currency' year=year %}" class="tw:btn {% if type != 'currency' %}tw:btn-outline tw:btn-primary{% else %}tw:btn-primary{% endif %} tw:rounded-full" hx-boost>
+        <i class="fa-solid fa-solid fa-coins fa-fw tw:me-2"></i>{% trans 'Currency' %}
+      </a>
+
+      <a href="{% url 'yearly_overview_account' year=year %}" class="tw:btn {% if type != 'account' %}tw:btn-outline tw:btn-primary{% else %}tw:btn-primary{% endif %} tw:rounded-full" hx-boost>
+        <i class="fa-solid fa-wallet fa-fw tw:me-2"></i>{% trans 'Account' %}
+      </a>
+    </div>
+  </div>
+  <div class="tw:container tw:px-md-3 tw:py-3 tw:gap-x-5" id="yearly-content">
+    <div class="tw:flex tw:flex-wrap tw:mb-4 tw:gap-x-xl-4 tw:gap-y-3">
+      {#    Date picker#}
+      <div class="tw:w-full tw:xl:w-auto tw:flex-row tw:items-center tw:flex">
+        <div class="tw:text-base tw:h-full tw:items-center tw:flex">
+          <a role="button"
+             class="tw:pe-4 tw:py-2"
+             hx-boost="true"
+             hx-trigger="click, previous_year from:window"
+             href="{% block previous_year_url %}{% endblock %}">
+            <i class="fa-solid fa-chevron-left"></i></a>
+        </div>
+        <div class="tw:text-3xl tw:font-bold tw:font-mono tw:w-full tw:text-center">
+          {{ year }}
+        </div>
+        <div class="tw:text-base tw:mx-2 tw:h-full tw:items-center tw:flex">
+          <a role="button"
+             class="tw:ps-3 tw:py-2"
+             hx-boost="true"
+             hx-trigger="click, next_year from:window"
+             href="{% block next_year_url %}{% endblock %}">
+            <i class="fa-solid fa-chevron-right"></i>
+          </a>
+        </div>
+      </div>
+      {#    Action buttons#}
+      <div class="tw:w-full tw:xl:flex-1">
+      </div>
+    </div>
+    <div class="tw:flex tw:flex-wrap">
+      <div class="tw:w-full tw:lg:w-2/12">
+        <input type="hidden" name="month" value="">
+        <div class="tw:flex-col tw:join tw:join-vertical" id="month-pills" role="tablist"
+             hx-indicator="#data-content">
+          <button class="tw:btn tw:btn-outline tw:btn-primary tw:btn-active tw:justify-start tw:join-item"
+                  role="tab"
+                  hx-get="{% block data_url %}{% endblock %}"
+                  hx-target="#data-content"
+                  hx-trigger="click"
+                  hx-include="{% block hx_include %}{% endblock %}"
+                  hx-swap="innerHTML"
+                  onclick="document.querySelector('[name=month]').value = ''"
+                  _="on click
+                       remove .tw:btn-active from <button/> in #month-pills
+                       add .tw:btn-active to me">
+            {% translate 'Year' %}
+          </button>
+          {% for month in months %}
+            <button class="tw:btn tw:btn-outline tw:btn-primary tw:justify-start tw:join-item"
+                    role="tab"
+                    hx-get="{% block month_data_url %}{% endblock %}"
+                    hx-target="#data-content"
+                    hx-trigger="click"
+                    hx-include="{% block month_hx_include %}{% endblock %}"
+                    hx-swap="innerHTML"
+                    onclick="document.querySelector('[name=month]').value = '{{ month }}'"
+                    _="on click
+                       remove .tw:btn-active from <button/> in #month-pills
+                       add .tw:btn-active to me">
+              {{ month|month_name }}
+            </button>
+          {% endfor %}
+        </div>
+      </div>
+
+      <hr class="tw:my-4 tw:block tw:lg:hidden">
+      <div class="tw:w-full tw:lg:w-3/12">
+        {% block filter_pills %}{% endblock %}
+      </div>
+
+      <div class="tw:w-full tw:lg:w-7/12">
+        <div id="data-content"
+             class="show-loading"
+             hx-get="{% block content_data_url %}{% endblock %}"
+             hx-trigger="load, every 10m, updated from:window"
+             hx-include="{% block content_hx_include %}{% endblock %}"
+             hx-swap="innerHTML">
+        </div>
+      </div>
+    </div>
+  </div>
+  <c-ui.transactions_fab></c-ui.transactions_fab>
+{% endblock %}