changes, fixes and improvements

2026-06-12 09:24:33 +02:00 · 2024-10-16 00:16:48 -03:00
parent d0f4dcc957
commit 07cbfefb95
40 changed files with 1008 additions and 330 deletions
@@ -1,9 +1,4 @@
-{% extends "layouts/base.html" %}
 {% load i18n %}
-
-{% block title %}{% translate 'Accounts' %}{% endblock %}
-
-{% block content %}
 <div class="container px-md-3 py-3 column-gap-5">
  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
    {% spaceless %}
@@ -20,8 +15,8 @@
    {% endspaceless %}
  </div>

-  <div class="border p-3 rounded-3">
-    <table class="table table-hover table-responsive">
+  <div class="border p-3 rounded-3 table-responsive">
+    <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col" class="col-auto"></th>
@@ -32,14 +27,14 @@
      {% for account_group in account_groups %}
      <tr class="account_group">
        <td class="col-auto">
-          <a class="text-decoration-none tw-text-gray-400 p-1 tag-action"
+          <a class="text-decoration-none tw-text-gray-400 p-1"
                role="button"
                data-bs-toggle="tooltip"
                data-bs-title="{% translate "Edit" %}"
                hx-get="{% url 'account_group_edit' pk=account_group.id %}"
                hx-target="#generic-offcanvas">
            <i class="fa-solid fa-pencil fa-fw"></i></a>
-          <a class="text-danger text-decoration-none p-1 tag-action"
+          <a class="text-danger text-decoration-none p-1"
                  role="button"
                  data-bs-toggle="tooltip"
                  data-bs-title="{% translate "Delete" %}"
@@ -57,4 +52,3 @@
  </table>
  </div>
 </div>
-{% endblock %}
@@ -0,0 +1,8 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% translate 'Account Groups' %}{% endblock %}
+
+{% block content %}
+<div hx-get="{% url 'account_groups_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+{% endblock %}
@@ -1,9 +1,4 @@
-{% extends "layouts/base.html" %}
 {% load i18n %}
-
-{% block title %}{% translate 'Accounts' %}{% endblock %}
-
-{% block content %}
 <div class="container px-md-3 py-3 column-gap-5">
  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
    {% spaceless %}
@@ -20,8 +15,8 @@
    {% endspaceless %}
  </div>

-  <div class="border p-3 rounded-3">
-    <table class="table table-hover table-responsive">
+  <div class="border p-3 rounded-3 table-responsive">
+    <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col" class="col-auto"></th>
@@ -33,16 +28,16 @@
    </thead>
    <tbody>
      {% for account in accounts %}
-      <tr class="currency">
+      <tr class="account">
        <td class="col-auto">
-          <a class="text-decoration-none tw-text-gray-400 p-1 tag-action"
+          <a class="text-decoration-none tw-text-gray-400 p-1"
                role="button"
                data-bs-toggle="tooltip"
                data-bs-title="{% translate "Edit" %}"
                hx-get="{% url 'account_edit' pk=account.id %}"
                hx-target="#generic-offcanvas">
            <i class="fa-solid fa-pencil fa-fw"></i></a>
-          <a class="text-danger text-decoration-none p-1 tag-action"
+          <a class="text-danger text-decoration-none p-1"
                  role="button"
                  data-bs-toggle="tooltip"
                  data-bs-title="{% translate "Delete" %}"
@@ -64,4 +59,3 @@
  </table>
  </div>
 </div>
-{% endblock %}
@@ -0,0 +1,8 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% translate 'Accounts' %}{% endblock %}
+
+{% block content %}
+<div hx-get="{% url 'accounts_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+{% endblock %}
@@ -1,9 +1,4 @@
-{% extends "layouts/base.html" %}
 {% load i18n %}
-
-{% block title %}{% translate 'Categories' %}{% endblock %}
-
-{% block content %}
 <div class="container px-md-3 py-3 column-gap-5">
  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
    {% spaceless %}
@@ -20,8 +15,8 @@
    {% endspaceless %}
  </div>

-  <div class="border p-3 rounded-3">
-    <table class="table table-hover table-responsive">
+  <div class="border p-3 rounded-3 table-responsive">
+    <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col" class="col-auto"></th>
@@ -61,4 +56,3 @@
  </table>
  </div>
 </div>
-{% endblock %}
@@ -0,0 +1,8 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% translate 'Categories' %}{% endblock %}
+
+{% block content %}
+<div hx-get="{% url 'categories_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+{% endblock %}
@@ -1,9 +1,4 @@
-{% extends "layouts/base.html" %}
 {% load i18n %}
-
-{% block title %}{% translate 'Currencies' %}{% endblock %}
-
-{% block content %}
 <div class="container px-md-3 py-3 column-gap-5">
  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
    {% spaceless %}
@@ -20,8 +15,8 @@
    {% endspaceless %}
  </div>

-  <div class="border p-3 rounded-3">
-    <table class="table table-hover table-responsive">
+  <div class="border p-3 rounded-3 table-responsive">
+    <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col" class="col-auto"></th>
@@ -33,14 +28,14 @@
      {% for currency in currencies %}
      <tr class="currency">
        <td class="col-auto">
-          <a class="text-decoration-none tw-text-gray-400 p-1 tag-action"
+          <a class="text-decoration-none tw-text-gray-400 p-1"
                role="button"
                data-bs-toggle="tooltip"
                data-bs-title="{% translate "Edit" %}"
                hx-get="{% url 'currency_edit' pk=currency.id %}"
                hx-target="#generic-offcanvas">
            <i class="fa-solid fa-pencil fa-fw"></i></a>
-          <a class="text-danger text-decoration-none p-1 tag-action"
+          <a class="text-danger text-decoration-none p-1"
                  role="button"
                  data-bs-toggle="tooltip"
                  data-bs-title="{% translate "Delete" %}"
@@ -59,4 +54,3 @@
  </table>
  </div>
 </div>
-{% endblock %}
@@ -0,0 +1,8 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% translate 'Currencies' %}{% endblock %}
+
+{% block content %}
+<div hx-get="{% url 'currencies_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+{% endblock %}
@@ -2,68 +2,81 @@
 {% load i18n %}
 {% load active_link %}
 <nav class="navbar navbar-expand-lg border-bottom bg-body-tertiary" hx-boost="true">
-    <div class="container-fluid">
-        <a class="navbar-brand fw-bold text-primary font-base" href="{% url 'monthly_index' %}">
-          <img src="{% static 'img/logo-icon.svg' %}" alt="WYGIWYH Logo" height="40" title="WYGIWYH"/>
-        </a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
-                aria-controls="navbarContent" aria-expanded="false" aria-label={% translate "Toggle navigation" %}>
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarContent">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0 nav-underline" hx-push-url="true">
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle {% active_link views='monthly_overview||yearly_overview' %}"
-                     href="#"
-                     role="button"
-                     data-bs-toggle="dropdown"
-                     aria-expanded="false">
-                    {% translate 'Overview' %}
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li><a class="dropdown-item {% active_link views='monthly_overview' %}" href="{% url 'monthly_index' %}">{%translate 'Monthly' %}</a></li>
-                    <li><a class="dropdown-item {% active_link views='yearly_overview' %}" href="{% url 'yearly_index' %}">{%translate 'Yearly' %}</a></li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link {% active_link views='net_worth' %}"
-                       href="{% url 'net_worth' %}">
-                      {% translate 'Net Worth' %}
-                    </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle {% active_link views='tags_list||categories_list||currencies_list' %}"
-                     href="#" role="button" 
-                     data-bs-toggle="dropdown"
-                     aria-expanded="false">
-                    {% translate 'Management' %}
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li><h6 class="dropdown-header">{% trans 'Transactions' %}</h6></li>
-                    <li><a class="dropdown-item {% active_link views='categories_list' %}" href="{% url 'categories_list' %}">{% translate 'Categories' %}</a></li>
-                    <li><a class="dropdown-item {% active_link views='tags_list' %}" href="{% url 'tags_list' %}">{% translate 'Tags' %}</a></li>
-                    <li><hr class="dropdown-divider"></li>
-                    <li><h6 class="dropdown-header">{% trans 'Accounts' %}</h6></li>
-                    <li><a class="dropdown-item {% active_link views='accounts_list' %}" href="{% url 'accounts_list' %}">{% translate 'Accounts' %}</a></li>
-                    <li><a class="dropdown-item {% active_link views='account_groups_list' %}" href="{% url 'account_groups_list' %}">{% translate 'Account Groups' %}</a></li>
-                    <li><a class="dropdown-item {% active_link views='currencies_list' %}" href="{% url 'currencies_list' %}">{% translate 'Currencies' %}</a></li>
-                    <li><hr class="dropdown-divider"></li>
-                    <li>
-                      <a class="dropdown-item"
-                         href="{% url 'admin:index' %}"
-                         hx-boost="false"
-                         data-bs-placement="right"
-                         data-bs-toggle="tooltip"
-                         data-bs-title="{% translate "Only use this if you know what you're doing" %}">
-                        {% translate 'Django Admin' %}
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-            </ul>
-            <ul class="navbar-nav mt-3 mb-2 mb-lg-0 mt-lg-0">
-              <li class="text-center w-100">{% include 'includes/navbar/user_menu.html' %}</li>
-            </ul>
-        </div>
+  <div class="container-fluid">
+    <a class="navbar-brand fw-bold text-primary font-base" href="{% url 'monthly_index' %}">
+      <img src="{% static 'img/logo-icon.svg' %}" alt="WYGIWYH Logo" height="40" title="WYGIWYH"/>
+    </a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
+            aria-controls="navbarContent" aria-expanded="false" aria-label={% translate "Toggle navigation" %}>
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0 nav-underline" hx-push-url="true">
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle {% active_link views='monthly_overview||yearly_overview' %}"
+             href="#"
+             role="button"
+             data-bs-toggle="dropdown"
+             aria-expanded="false">
+            {% translate 'Overview' %}
+          </a>
+          <ul class="dropdown-menu">
+            <li><a class="dropdown-item {% active_link views='monthly_overview' %}"
+                   href="{% url 'monthly_index' %}">{% translate 'Monthly' %}</a></li>
+            <li><a class="dropdown-item {% active_link views='yearly_overview' %}"
+                   href="{% url 'yearly_index' %}">{% translate 'Yearly' %}</a></li>
+          </ul>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link {% active_link views='net_worth' %}"
+             href="{% url 'net_worth' %}">
+            {% translate 'Net Worth' %}
+          </a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle {% active_link views='tags_index||categories_index||accounts_index||account_groups_index||currencies_index||installment_plans_index' %}"
+             href="#" role="button"
+             data-bs-toggle="dropdown"
+             aria-expanded="false">
+            {% translate 'Management' %}
+          </a>
+          <ul class="dropdown-menu">
+            <li><h6 class="dropdown-header">{% trans 'Transactions' %}</h6></li>
+            <li><a class="dropdown-item {% active_link views='categories_index' %}"
+                   href="{% url 'categories_index' %}">{% translate 'Categories' %}</a></li>
+            <li><a class="dropdown-item {% active_link views='tags_index' %}"
+                   href="{% url 'tags_index' %}">{% translate 'Tags' %}</a></li>
+            <li><a class="dropdown-item {% active_link views='installment_plans_index' %}"
+                   href="{% url 'installment_plans_index' %}">{% translate 'Installment Plans' %}</a></li>
+            <li>
+              <hr class="dropdown-divider">
+            </li>
+            <li><h6 class="dropdown-header">{% trans 'Accounts' %}</h6></li>
+            <li><a class="dropdown-item {% active_link views='accounts_index' %}"
+                   href="{% url 'accounts_index' %}">{% translate 'Accounts' %}</a></li>
+            <li><a class="dropdown-item {% active_link views='account_groups_index' %}"
+                   href="{% url 'account_groups_index' %}">{% translate 'Account Groups' %}</a></li>
+            <li><a class="dropdown-item {% active_link views='currencies_index' %}"
+                   href="{% url 'currencies_index' %}">{% translate 'Currencies' %}</a></li>
+            <li>
+              <hr class="dropdown-divider">
+            </li>
+            <li>
+              <a class="dropdown-item"
+                 href="{% url 'admin:index' %}"
+                 hx-boost="false"
+                 data-bs-placement="right"
+                 data-bs-toggle="tooltip"
+                 data-bs-title="{% translate "Only use this if you know what you're doing" %}">
+                {% translate 'Django Admin' %}
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <ul class="navbar-nav mt-3 mb-2 mb-lg-0 mt-lg-0">
+        <li class="text-center w-100">{% include 'includes/navbar/user_menu.html' %}</li>
+      </ul>
    </div>
+  </div>
 </nav>
@@ -14,3 +14,17 @@
        on htmx:beforeOnLoad[detail.boosted] call bootstrap.Offcanvas.getOrCreateInstance(me).hide()
        on hidden.bs.offcanvas set my innerHTML to '' end">
 </div>
+<div id="persistent-generic-offcanvas" class="offcanvas offcanvas-end offcanvas-size-xl"
+     data-bs-backdrop="static"
+     tabindex="-1"
+     _="on htmx:afterSettle call bootstrap.Offcanvas.getOrCreateInstance(me).show() end
+        on htmx:beforeOnLoad[detail.boosted] call bootstrap.Offcanvas.getOrCreateInstance(me).hide()
+        on hidden.bs.offcanvas set my innerHTML to '' end">
+</div>
+<div id="persistent-generic-offcanvas-left" class="offcanvas offcanvas-start offcanvas-size-xl"
+     data-bs-backdrop="static"
+     tabindex="-1"
+     _="on htmx:afterSettle call bootstrap.Offcanvas.getOrCreateInstance(me).show() end
+        on htmx:beforeOnLoad[detail.boosted] call bootstrap.Offcanvas.getOrCreateInstance(me).hide()
+        on hidden.bs.offcanvas set my innerHTML to '' end">
+</div>
@@ -1,13 +1,13 @@
 <script type="text/hyperscript">
  behavior hide_amounts
-    on load or htmx:afterSwap if I include #settings-hide-amounts
+    on load or htmx:afterSwap if body include #settings-hide-amounts
      set elements to <.amount/> in me
      for el in elements
        set el.textContent to '•••••••••••'
      end
    end

-    on load or htmx:afterSwap if I do not include #settings-hide-amounts
+    on load or htmx:afterSwap if body do not include #settings-hide-amounts
      set elements to <.amount/> in me
      for el in elements
        set el.textContent to el.dataset.originalValue
@@ -1,3 +1,3 @@
 <div id="toasts" hx-get="{% url 'toasts' %}"
-     hx-trigger="load, toast from:window">
+     hx-trigger="load, toast from:window, toasts from:window">
 </div>
@@ -0,0 +1,11 @@
+{% extends 'extends/offcanvas.html' %}
+{% load i18n %}
+{% load crispy_forms_tags %}
+
+{% block title %}{% translate 'Add installment plan' %}{% endblock %}
+
+{% block body %}
+<form hx-post="{% url 'installment_plan_add' %}" hx-target="#generic-offcanvas" novalidate>
+    {% crispy form %}
+</form>
+{% endblock %}
@@ -0,0 +1,13 @@
+{% extends 'extends/offcanvas.html' %}
+{% load i18n %}
+{% load crispy_forms_tags %}
+
+{% block title %}{% translate 'Edit installment plan' %}{% endblock %}
+
+{% block body %}
+<form hx-post="{% url 'installment_plan_edit' installment_plan_id=installment_plan.id %}"
+      hx-target="#generic-offcanvas"
+      novalidate>
+    {% crispy form %}
+</form>
+{% endblock %}
@@ -0,0 +1,74 @@
+{% load i18n %}
+<div class="container px-md-3 py-3 column-gap-5">
+  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+    {% spaceless %}
+    <div>{% translate 'Installment Plans' %}<span>
+      <a class="text-decoration-none tw-text-2xl p-1 category-action"
+                role="button"
+                data-bs-toggle="tooltip"
+                data-bs-title="{% translate "Add" %}"
+                hx-get="{% url 'installment_plan_add' %}"
+                hx-target="#generic-offcanvas"
+                _="">
+            <i class="fa-solid fa-circle-plus fa-fw"></i></a>
+    </span></div>
+    {% endspaceless %}
+  </div>
+
+  <div class="border p-3 rounded-3 table-responsive">
+    <table class="table table-hover">
+    <thead>
+      <tr>
+        <th scope="col" class="col-auto"></th>
+        <th scope="col" class="col">{% translate 'Name' %}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for installment_plan in installment_plans %}
+      <tr class="installment-plan">
+        <td class="col-auto text-center">
+          <a class="text-decoration-none tw-text-gray-400 p-1 category-action"
+                role="button"
+                data-bs-toggle="tooltip"
+                data-bs-title="{% translate "Edit" %}"
+                hx-get="{% url 'installment_plan_edit' installment_plan_id=installment_plan.id %}"
+                hx-target="#generic-offcanvas">
+            <i class="fa-solid fa-pencil fa-fw"></i></a>
+          <a class="text-decoration-none tw-text-gray-400 p-1 category-action"
+                role="button"
+                data-bs-toggle="tooltip"
+                data-bs-title="{% translate "Installments" %}"
+                hx-get="{% url 'installment_plan_transactions' installment_plan_id=installment_plan.id %}"
+                hx-target="#persistent-generic-offcanvas-left">
+            <i class="fa-solid fa-eye fa-fw"></i></a>
+          <a class="text-decoration-none text-info p-1 category-action"
+                role="button"
+                data-bs-toggle="tooltip"
+                data-bs-title="{% translate "Refresh" %}"
+                hx-get="{% url 'installment_plan_refresh' installment_plan_id=installment_plan.id %}"
+                hx-target="#generic-offcanvas"
+                hx-trigger='confirmed'
+                data-bypass-on-ctrl="true"
+                data-title="{% translate "Are you sure?" %}"
+                data-text="{% translate "This will update all transactions associated with this plan and recreate missing ones" %}"
+                data-confirm-text="{% translate "Yes, refresh it!" %}"
+                _="install prompt_swal">
+            <i class="fa-solid fa-arrows-rotate fa-fw"></i></a>
+          <a class="text-danger text-decoration-none p-1 category-action"
+                  role="button"
+                  data-bs-toggle="tooltip"
+                  data-bs-title="{% translate "Delete" %}"
+                  hx-delete="{% url 'installment_plan_delete' installment_plan_id=installment_plan.id %}"
+                  hx-trigger='confirmed'
+                  data-bypass-on-ctrl="true"
+                  data-title="{% translate "Are you sure?" %}"
+                  data-text="{% translate "This will delete the plan and all transactions associated with it" %}"
+                  data-confirm-text="{% translate "Yes, delete it!" %}"
+                  _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a></td>
+        <td class="col">{{ installment_plan.description }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+  </div>
+</div>
@@ -0,0 +1,13 @@
+{% extends 'extends/offcanvas.html' %}
+{% load i18n %}
+{% load crispy_forms_tags %}
+
+{% block title %}{% translate 'Installments' %}{% endblock %}
+
+{% block body %}
+<div hx-get="{% url 'installment_plan_transactions' installment_plan_id=installment_plan.id %}" hx-trigger="updated from:window" hx-vals='{"disable_selection": true}' hx-target="closest .offcanvas" class="show-loading">
+{% for transaction in transactions %}
+  {% include 'transactions/fragments/item.html' with transaction=transaction disable_selection=True %}
+{% endfor %}
+</div>
+{% endblock %}
@@ -0,0 +1,8 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% translate 'Installment Plans' %}{% endblock %}
+
+{% block content %}
+<div hx-get="{% url 'installment_plans_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+{% endblock %}
@@ -22,7 +22,6 @@
    {% block extra_js_head %}{% endblock %}
  </head>
  <body class="font-monospace">
-    
    <div _="install hide_amounts
            install htmx_error_handler
           {% block body_hyperscript %}{% endblock %}">
@@ -37,11 +36,11 @@
      <div id="content">
        {% block content %}{% endblock %}
      </div>
+      
+      {% include 'includes/offcanvas.html' %}
+      {% include 'includes/toasts.html' %}
    </div>
    
-    {% include 'includes/offcanvas.html' %}
-    {% include 'includes/toasts.html' %}
-    
    {% block extra_js_body %}{% endblock %}
  </body>
 </html>
@@ -67,7 +67,7 @@
                {% translate "Expense" %}
        </button>
        <button class="btn btn-sm btn-outline-warning"
-                hx-get="{% url 'installments_add' %}"
+                hx-get="{% url 'installment_plan_add' %}"
                hx-trigger="click, installment from:window"
                hx-target="#generic-offcanvas">
          <i class="fa-solid fa-divide me-2"></i>
@@ -94,7 +94,7 @@
 {#  Monthly summary#}
  <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="sticky-sidebar"
+      <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">
      </div>
    </div>
@@ -117,8 +117,9 @@
          </div>
        </div>
      <div id="transactions"
-         hx-get="{% url 'monthly_transactions_list' month=month year=year %}"
-         hx-trigger="load, updated from:window" hx-include="#filter"></div>
+           class="show-loading"
+           hx-get="{% url 'monthly_transactions_list' month=month year=year %}"
+           hx-trigger="load, updated from:window" hx-include="#filter"></div>
    </div>
  </div>
 </div>
@@ -1,9 +1,4 @@
-{% extends "layouts/base.html" %}
 {% load i18n %}
-
-{% block title %}{% translate 'Tags' %}{% endblock %}
-
-{% block content %}
 <div class="container px-md-3 py-3 column-gap-5">
  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
    {% spaceless %}
@@ -20,8 +15,8 @@
    {% endspaceless %}
  </div>

-  <div class="border p-3 rounded-3">
-    <table class="table table-hover table-responsive">
+  <div class="border p-3 rounded-3 table-responsive">
+    <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col" class="col-auto"></th>
@@ -32,14 +27,14 @@
      {% for tag in tags %}
      <tr class="tag">
        <td class="col-auto">
-          <a class="text-decoration-none tw-text-gray-400 p-1 tag-action"
+          <a class="text-decoration-none tw-text-gray-400 p-1"
                role="button"
                data-bs-toggle="tooltip"
                data-bs-title="{% translate "Edit" %}"
                hx-get="{% url 'tag_edit' tag_id=tag.id %}"
                hx-target="#generic-offcanvas">
            <i class="fa-solid fa-pencil fa-fw"></i></a>
-          <a class="text-danger text-decoration-none p-1 tag-action"
+          <a class="text-danger text-decoration-none p-1"
                  role="button"
                  data-bs-toggle="tooltip"
                  data-bs-title="{% translate "Delete" %}"
@@ -57,4 +52,3 @@
  </table>
  </div>
 </div>
-{% endblock %}
@@ -0,0 +1,8 @@
+{% extends "layouts/base.html" %}
+{% load i18n %}
+
+{% block title %}{% translate 'Tags' %}{% endblock %}
+
+{% block content %}
+<div hx-get="{% url 'tags_list' %}" hx-trigger="load, updated from:window" class="show-loading mx-5"></div>
+{% endblock %}
@@ -5,7 +5,7 @@
 {% block title %}{% translate 'Add Installment Plan' %}{% endblock %}

 {% block body %}
-<form hx-post="{% url 'installments_add' %}" hx-target="#generic-offcanvas" novalidate>
+<form hx-post="{% url 'installment_plan_add' %}" hx-target="#generic-offcanvas" novalidate>
    {% crispy form %}
 </form>
 {% endblock %}
@@ -1,9 +1,11 @@
 {% load i18n %}
 {% load currency_display %}
 <div class="transaction d-flex my-3">
+  {% if not disable_selection %}
  <label class="px-3 d-flex align-items-center justify-content-center">
    <input class="form-check-input" type="checkbox" name="transactions" value="{{ transaction.id }}" aria-label="{% translate 'Select' %}">
  </label>
+  {% endif %}
  <div class="tw-border-s-6 tw-border-e-0 tw-border-t-0 tw-border-b-0 border-bottom
  hover:tw-bg-zinc-900 p-2 {% if transaction.account.is_asset %}tw-border-dashed{% else %}tw-border-solid{% endif %}
  {% if transaction.type == "EX" %}tw-border-red-500{% else %}tw-border-green-500{% endif %} tw-relative
@@ -25,7 +27,14 @@
      {#        Date#}
      <div class="mb-1 tw-text-gray-400">
        <i class="fa-solid fa-calendar fa-fw me-1 fa-xs"></i>{{ transaction.date|date:"SHORT_DATE_FORMAT" }}</div>
-      <div class="mb-1 text-white tw-text-base">{{ transaction.description }}</div>
+      <div class="mb-1 text-white tw-text-base">
+        {% spaceless %}
+        <span>{{ transaction.description }}</span>
+        {% if transaction.installment_plan and transaction.installment_id %}
+        <span class="badge text-bg-secondary ms-2">{{ transaction.installment_id }}/{{ transaction.installment_plan.installment_total_number }}</span>
+        {% endif %}
+        {% endspaceless %}
+      </div>
      <div class="tw-text-gray-400 tw-text-sm">
 {#        Notes#}
        {% if transaction.notes %}
@@ -71,25 +80,27 @@
 {#      Item actions#}
      <div class="transaction-actions !tw-absolute tw-left-2/4 tw--top-6 tw-invisible d-none
      d-xl-flex flex-xl-row tw-text-base card">
-        <a class="text-decoration-none tw-text-gray-400 p-2 transaction-action"
+        <div class="card-body p-1 shadow-lg">
+          <a class="btn btn-secondary btn-sm transaction-action"
                role="button"
                data-bs-toggle="tooltip"
                data-bs-title="{% translate "Edit" %}"
                hx-get="{% url 'transaction_edit' transaction_id=transaction.id %}"
                hx-target="#generic-offcanvas">
          <i class="fa-solid fa-pencil fa-fw"></i></a>
-        <a class="text-danger text-decoration-none p-2 transaction-action"
-                role="button"
-                data-bs-toggle="tooltip"
-                data-bs-title="{% translate "Delete" %}"
-                hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
-                hx-trigger='confirmed'
-                data-bypass-on-ctrl="true"
-                data-title="{% translate "Are you sure?" %}"
-                data-text="{% translate "You won't be able to revert this!" %}"
-                data-confirm-text="{% translate "Yes, delete it!" %}"
-                _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i>
-        </a>
+          <a class="btn btn-secondary btn-sm transaction-action"
+                  role="button"
+                  data-bs-toggle="tooltip"
+                  data-bs-title="{% translate "Delete" %}"
+                  hx-delete="{% url 'transaction_delete' transaction_id=transaction.id %}"
+                  hx-trigger='confirmed'
+                  data-bypass-on-ctrl="true"
+                  data-title="{% translate "Are you sure?" %}"
+                  data-text="{% translate "You won't be able to revert this!" %}"
+                  data-confirm-text="{% translate "Yes, delete it!" %}"
+                  _="install prompt_swal"><i class="fa-solid fa-trash fa-fw text-danger"></i>
+          </a>
+        </div>
      </div>
 {#      Item actions dropdown fallback for mobile#}
      <div class="dropdown !tw-absolute tw-top-0 tw-right-0 xl:tw-invisible">