From be76ccfdf6f47ad3a4f78e183f409e8a08c1adf9 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Sun, 27 Oct 2024 21:55:32 -0300
Subject: [PATCH] feat: improve config pages listings

---
 app/apps/monthly_overview/views/main.py       | 36 -------
 .../account_groups/fragments/list.html        | 35 ++++---
 app/templates/accounts/fragments/list.html    | 39 ++++----
 app/templates/categories/fragments/list.html  | 41 ++++----
 app/templates/currencies/fragments/list.html  | 35 ++++---
 .../exchange_rates/fragments/table.html       | 43 ++++----
 .../installment_plans/fragments/list.html     | 69 ++++++-------
 .../fragments/list.html                       | 98 ++++++++++---------
 app/templates/rules/fragments/list.html       | 45 ++++-----
 .../fragments/transaction_rule/view.html      |  2 +-
 app/templates/tags/fragments/list.html        | 35 ++++---
 11 files changed, 231 insertions(+), 247 deletions(-)

diff --git a/app/apps/monthly_overview/views/main.py b/app/apps/monthly_overview/views/main.py
index 2c50f18..e71f51e 100644
--- a/app/apps/monthly_overview/views/main.py
+++ b/app/apps/monthly_overview/views/main.py
@@ -263,42 +263,6 @@ def monthly_summary(request, month: int, year: int):
         "daily_spending_allowance": daily_spending_allowance,
     }
 
-    # account_summary = (
-    #     Account.objects.annotate(
-    #         balance=Coalesce(
-    #             Sum(
-    #                 Case(
-    #                     When(
-    #                         transaction__type=Transaction.Type.INCOME,
-    #                         transaction__is_paid=True,
-    #                         transaction__reference_date__year=year,
-    #                         transaction__reference_date__month=month,
-    #                         then=F("transaction__amount"),
-    #                     ),
-    #                     When(
-    #                         transaction__type=Transaction.Type.EXPENSE,
-    #                         transaction__is_paid=True,
-    #                         transaction__reference_date__year=year,
-    #                         transaction__reference_date__month=month,
-    #                         then=-F("transaction__amount"),
-    #                     ),
-    #                     output_field=DecimalField(),
-    #                 )
-    #             ),
-    #             Decimal(0),
-    #         )
-    #     )
-    #     .values(
-    #         "id",
-    #         "name",
-    #         "balance",
-    #         "currency__prefix",
-    #         "currency__suffix",
-    #         "currency__decimal_places",
-    #     )
-    #     .order_by("id")
-    # )
-
     return render(
         request,
         "monthly_overview/fragments/monthly_summary.html",
diff --git a/app/templates/account_groups/fragments/list.html b/app/templates/account_groups/fragments/list.html
index c28ee95..abaeb59 100644
--- a/app/templates/account_groups/fragments/list.html
+++ b/app/templates/account_groups/fragments/list.html
@@ -27,24 +27,27 @@
       {% 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"
-                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"
+          <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
+            <a class="btn btn-secondary btn-sm"
                   role="button"
                   data-bs-toggle="tooltip"
-                  data-bs-title="{% translate "Delete" %}"
-                  hx-delete="{% url 'account_group_delete' pk=account_group.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></td>
+                  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="btn btn-secondary btn-sm text-danger"
+                    role="button"
+                    data-bs-toggle="tooltip"
+                    data-bs-title="{% translate "Delete" %}"
+                    hx-delete="{% url 'account_group_delete' pk=account_group.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>
+          </div>
+        </td>
         <td class="col">{{ account_group.name }}</td>
       </tr>
       {% endfor %}
diff --git a/app/templates/accounts/fragments/list.html b/app/templates/accounts/fragments/list.html
index cad0838..adc7b9c 100644
--- a/app/templates/accounts/fragments/list.html
+++ b/app/templates/accounts/fragments/list.html
@@ -31,27 +31,30 @@
       {% for account in accounts %}
       <tr class="account">
         <td class="col-auto">
-          <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"
+          <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
+            <a class="btn btn-secondary btn-sm"
                   role="button"
                   data-bs-toggle="tooltip"
-                  data-bs-title="{% translate "Delete" %}"
-                  hx-delete="{% url 'account_delete' pk=account.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></td>
+                  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="btn btn-secondary btn-sm text-danger"
+                    role="button"
+                    data-bs-toggle="tooltip"
+                    data-bs-title="{% translate "Delete" %}"
+                    hx-delete="{% url 'account_delete' pk=account.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>
+          </div>
+        </td>
         <td class="col">{{ account.name }}</td>
-        <td class="col-auto">{{ account.currency }} ({{ account.currency.code }})</td>
-        <td class="col-auto">{% if account.exchange_currency %}{{ account.exchange_currency }} (
+        <td class="col">{{ account.currency }} ({{ account.currency.code }})</td>
+        <td class="col">{% if account.exchange_currency %}{{ account.exchange_currency }} (
           {{ account.exchange_currency.code }}){% else %}-{% endif %}</td>
         <td class="col">{% if account.is_asset %}<i class="fa-solid fa-solid fa-check text-success"></i>{% endif %}</td>
         <td class="col">{% if account.is_archived %}<i class="fa-solid fa-solid fa-check text-success"></i>{% endif %}</td>
diff --git a/app/templates/categories/fragments/list.html b/app/templates/categories/fragments/list.html
index 033f75a..6792536 100644
--- a/app/templates/categories/fragments/list.html
+++ b/app/templates/categories/fragments/list.html
@@ -20,36 +20,39 @@
     <thead>
       <tr>
         <th scope="col" class="col-auto"></th>
-        <th scope="col" class="col-auto">{% translate 'Muted' %}</th>
         <th scope="col" class="col">{% translate 'Name' %}</th>
+        <th scope="col" class="col">{% translate 'Muted' %}</th>
       </tr>
     </thead>
     <tbody>
       {% for category in categories %}
       <tr class="category">
         <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 'category_edit' category_id=category.id %}"
-                hx-target="#generic-offcanvas">
-            <i class="fa-solid fa-pencil fa-fw"></i></a>
-          <a class="text-danger text-decoration-none p-1 category-action"
+          <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
+            <a class="btn btn-secondary btn-sm"
                   role="button"
                   data-bs-toggle="tooltip"
-                  data-bs-title="{% translate "Delete" %}"
-                  hx-delete="{% url 'category_delete' category_id=category.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></td>
-        <td class="col-auto text-center">
-          {% if category.mute %}<i class="fa-solid fa-circle text-success"></i>{% endif %}
+                  data-bs-title="{% translate "Edit" %}"
+                  hx-get="{% url 'category_edit' category_id=category.id %}"
+                  hx-target="#generic-offcanvas">
+              <i class="fa-solid fa-pencil fa-fw"></i></a>
+            <a class="btn btn-secondary btn-sm text-danger"
+                    role="button"
+                    data-bs-toggle="tooltip"
+                    data-bs-title="{% translate "Delete" %}"
+                    hx-delete="{% url 'category_delete' category_id=category.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>
+          </div>
         </td>
         <td class="col">{{ category.name }}</td>
+        <td class="col">
+          {% if category.mute %}<i class="fa-solid fa-check text-success"></i>{% endif %}
+        </td>
       </tr>
       {% endfor %}
     </tbody>
diff --git a/app/templates/currencies/fragments/list.html b/app/templates/currencies/fragments/list.html
index 98af3bf..25652ea 100644
--- a/app/templates/currencies/fragments/list.html
+++ b/app/templates/currencies/fragments/list.html
@@ -28,24 +28,27 @@
       {% for currency in currencies %}
       <tr class="currency">
         <td class="col-auto">
-          <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"
+          <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
+            <a class="btn btn-secondary btn-sm"
                   role="button"
                   data-bs-toggle="tooltip"
-                  data-bs-title="{% translate "Delete" %}"
-                  hx-delete="{% url 'currency_delete' pk=currency.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></td>
+                  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="btn btn-secondary btn-sm text-danger"
+                    role="button"
+                    data-bs-toggle="tooltip"
+                    data-bs-title="{% translate "Delete" %}"
+                    hx-delete="{% url 'currency_delete' pk=currency.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>
+          </div>
+        </td>
         <td class="col-auto">{{ currency.code }}</td>
         <td class="col">{{ currency.name }}</td>
       </tr>
diff --git a/app/templates/exchange_rates/fragments/table.html b/app/templates/exchange_rates/fragments/table.html
index 202f645..c05cf4e 100644
--- a/app/templates/exchange_rates/fragments/table.html
+++ b/app/templates/exchange_rates/fragments/table.html
@@ -10,7 +10,7 @@
       <thead>
         <tr>
           <th scope="col" class="col-auto"></th>
-          <th scope="col" class="col-auto">{% translate 'Date' %}</th>
+          <th scope="col" class="col">{% translate 'Date' %}</th>
           <th scope="col" class="col">{% translate 'Pairing' %}</th>
           <th scope="col" class="col">{% translate 'Rate' %}</th>
         </tr>
@@ -19,27 +19,30 @@
         {% for exchange_rate in exchange_rates %}
         <tr class="exchange-rate">
           <td class="col-auto">
-            <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 'exchange_rate_edit' pk=exchange_rate.id %}"
-                  hx-target="#generic-offcanvas"
-                  hx-swap="innerHTML">
-              <i class="fa-solid fa-pencil fa-fw"></i></a>
-            <a class="text-danger text-decoration-none p-1"
+            <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
+              <a class="btn btn-secondary btn-sm"
                     role="button"
                     data-bs-toggle="tooltip"
-                    data-bs-title="{% translate "Delete" %}"
-                    hx-delete="{% url 'exchange_rate_delete' pk=exchange_rate.id %}"
-                    hx-trigger='confirmed'
-                    hx-swap="innerHTML"
-                    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></td>
-          <td class="col-auto">{{ exchange_rate.date|date:"SHORT_DATETIME_FORMAT" }}</td>
+                    data-bs-title="{% translate "Edit" %}"
+                    hx-get="{% url 'exchange_rate_edit' pk=exchange_rate.id %}"
+                    hx-target="#generic-offcanvas"
+                    hx-swap="innerHTML">
+                <i class="fa-solid fa-pencil fa-fw"></i></a>
+              <a class="btn btn-secondary btn-sm text-danger"
+                      role="button"
+                      data-bs-toggle="tooltip"
+                      data-bs-title="{% translate "Delete" %}"
+                      hx-delete="{% url 'exchange_rate_delete' pk=exchange_rate.id %}"
+                      hx-trigger='confirmed'
+                      hx-swap="innerHTML"
+                      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>
+            </div>
+          </td>
+          <td class="col">{{ exchange_rate.date|date:"SHORT_DATETIME_FORMAT" }}</td>
           <td class="col"><span class="badge rounded-pill text-bg-secondary">{{ exchange_rate.from_currency.code }}</span> x <span class="badge rounded-pill text-bg-secondary">{{ exchange_rate.to_currency.code }}</span></td>
           <td class="col">1 {{ exchange_rate.from_currency.code }} ≅ {% currency_display amount=exchange_rate.rate prefix=exchange_rate.to_currency.prefix suffix=exchange_rate.to_currency.suffix decimal_places=exchange_rate.to_currency.decimal_places%}</td>
         </tr>
diff --git a/app/templates/installment_plans/fragments/list.html b/app/templates/installment_plans/fragments/list.html
index 512cf40..06bb3b6 100644
--- a/app/templates/installment_plans/fragments/list.html
+++ b/app/templates/installment_plans/fragments/list.html
@@ -27,44 +27,47 @@
       {% 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"
+          <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
+            <a class="btn btn-secondary btn-sm"
                   role="button"
                   data-bs-toggle="tooltip"
-                  data-bs-title="{% translate "Delete" %}"
-                  hx-delete="{% url 'installment_plan_delete' installment_plan_id=installment_plan.id %}"
+                  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="btn btn-secondary btn-sm"
+                  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="btn btn-secondary btn-sm text-info"
+                  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 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>
+                  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="btn btn-secondary btn-sm text-danger"
+                    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>
+          </div>
+        </td>
         <td class="col">{{ installment_plan.description }}</td>
       </tr>
       {% endfor %}
diff --git a/app/templates/recurring_transactions/fragments/list.html b/app/templates/recurring_transactions/fragments/list.html
index 4979336..a33c123 100644
--- a/app/templates/recurring_transactions/fragments/list.html
+++ b/app/templates/recurring_transactions/fragments/list.html
@@ -27,59 +27,61 @@
       {% for recurring_transaction in recurring_transactions %}
       <tr class="recurring_transaction">
         <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 'recurring_transaction_edit' recurring_transaction_id=recurring_transaction.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 "Transactions" %}"
-                hx-get="{% url 'recurring_transaction_transactions' recurring_transaction_id=recurring_transaction.id %}"
-                hx-target="#persistent-generic-offcanvas-left">
-            <i class="fa-solid fa-eye fa-fw"></i></a>
-          {% if recurring_transaction.paused %}
-          <a class="text-decoration-none text-info p-1 category-action"
-                role="button"
-                data-bs-toggle="tooltip"
-                data-bs-title="{% translate "Unpause" %}"
-                hx-get="{% url 'recurring_transaction_toggle_pause' recurring_transaction_id=recurring_transaction.id %}"
-                hx-target="#generic-offcanvas"
-                hx-trigger='confirmed'
-                data-bypass-on-ctrl="true"
-                data-title="{% translate "Are you sure?" %}"
-                data-text="{% translate "This will start creating new transactions until you pause it" %}"
-                data-confirm-text="{% translate "Yes, unpause it!" %}"
-                _="install prompt_swal"><i class="fa-solid fa-play fa-fw"></i></a>
-          {% else %}
-          <a class="text-decoration-none text-info p-1 category-action"
-                role="button"
-                data-bs-toggle="tooltip"
-                data-bs-title="{% translate "Pause" %}"
-                hx-get="{% url 'recurring_transaction_toggle_pause' recurring_transaction_id=recurring_transaction.id %}"
-                hx-target="#generic-offcanvas"
-                hx-trigger='confirmed'
-                data-bypass-on-ctrl="true"
-                data-title="{% translate "Are you sure?" %}"
-                data-text="{% translate "This will stop the creation of new transactions until you unpause it" %}"
-                data-confirm-text="{% translate "Yes, pause it!" %}"
-                _="install prompt_swal">
-            <i class="fa-solid fa-pause fa-fw"></i></a>
-          {% endif %}
-          <a class="text-danger text-decoration-none p-1 category-action"
+          <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
+            <a class="btn btn-secondary btn-sm"
                   role="button"
                   data-bs-toggle="tooltip"
-                  data-bs-title="{% translate "Delete" %}"
-                  hx-delete="{% url 'recurring_transaction_delete' recurring_transaction_id=recurring_transaction.id %}"
+                  data-bs-title="{% translate "Edit" %}"
+                  hx-get="{% url 'recurring_transaction_edit' recurring_transaction_id=recurring_transaction.id %}"
+                  hx-target="#generic-offcanvas">
+              <i class="fa-solid fa-pencil fa-fw"></i></a>
+            <a class="btn btn-secondary btn-sm "
+                  role="button"
+                  data-bs-toggle="tooltip"
+                  data-bs-title="{% translate "Transactions" %}"
+                  hx-get="{% url 'recurring_transaction_transactions' recurring_transaction_id=recurring_transaction.id %}"
+                  hx-target="#persistent-generic-offcanvas-left">
+              <i class="fa-solid fa-eye fa-fw"></i></a>
+            {% if recurring_transaction.paused %}
+            <a class="btn btn-secondary btn-sm text-info"
+                  role="button"
+                  data-bs-toggle="tooltip"
+                  data-bs-title="{% translate "Unpause" %}"
+                  hx-get="{% url 'recurring_transaction_toggle_pause' recurring_transaction_id=recurring_transaction.id %}"
+                  hx-target="#generic-offcanvas"
                   hx-trigger='confirmed'
                   data-bypass-on-ctrl="true"
                   data-title="{% translate "Are you sure?" %}"
-                  data-text="{% translate "This will delete the recurrence 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>
+                  data-text="{% translate "This will start creating new transactions until you pause it" %}"
+                  data-confirm-text="{% translate "Yes, unpause it!" %}"
+                  _="install prompt_swal"><i class="fa-solid fa-play fa-fw"></i></a>
+            {% else %}
+            <a class="btn btn-secondary btn-sm text-info"
+                  role="button"
+                  data-bs-toggle="tooltip"
+                  data-bs-title="{% translate "Pause" %}"
+                  hx-get="{% url 'recurring_transaction_toggle_pause' recurring_transaction_id=recurring_transaction.id %}"
+                  hx-target="#generic-offcanvas"
+                  hx-trigger='confirmed'
+                  data-bypass-on-ctrl="true"
+                  data-title="{% translate "Are you sure?" %}"
+                  data-text="{% translate "This will stop the creation of new transactions until you unpause it" %}"
+                  data-confirm-text="{% translate "Yes, pause it!" %}"
+                  _="install prompt_swal">
+              <i class="fa-solid fa-pause fa-fw"></i></a>
+            {% endif %}
+            <a class="btn btn-secondary btn-sm text-danger"
+                    role="button"
+                    data-bs-toggle="tooltip"
+                    data-bs-title="{% translate "Delete" %}"
+                    hx-delete="{% url 'recurring_transaction_delete' recurring_transaction_id=recurring_transaction.id %}"
+                    hx-trigger='confirmed'
+                    data-bypass-on-ctrl="true"
+                    data-title="{% translate "Are you sure?" %}"
+                    data-text="{% translate "This will delete the recurrence 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">{{ recurring_transaction.description }}</td>
       </tr>
       {% endfor %}
diff --git a/app/templates/rules/fragments/list.html b/app/templates/rules/fragments/list.html
index 3b7e5e9..4b3f9ee 100644
--- a/app/templates/rules/fragments/list.html
+++ b/app/templates/rules/fragments/list.html
@@ -28,42 +28,39 @@
       {% for rule in transaction_rules %}
       <tr class="transaction_rule">
         <td class="col-auto">
-{#          <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 'transaction_rule_edit' transaction_rule_id=rule.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"
-                role="button"
-                data-bs-toggle="tooltip"
-                data-bs-title="{% translate "View" %}"
-                hx-get="{% url 'transaction_rule_view' transaction_rule_id=rule.id %}"
-                hx-target="#persistent-generic-offcanvas-left">
-            <i class="fa-solid fa-eye fa-fw"></i></a>
-          <a class="text-danger text-decoration-none p-1"
+          <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
+            <a class="btn btn-secondary btn-sm"
                   role="button"
                   data-bs-toggle="tooltip"
-                  data-bs-title="{% translate "Delete" %}"
-                  hx-delete="{% url 'transaction_rule_delete' transaction_rule_id=rule.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>
+                  data-bs-title="{% translate "View" %}"
+                  hx-get="{% url 'transaction_rule_view' transaction_rule_id=rule.id %}"
+                  hx-target="#persistent-generic-offcanvas-left">
+              <i class="fa-solid fa-eye fa-fw"></i></a>
+            <a class="btn btn-secondary btn-sm text-danger"
+                    role="button"
+                    data-bs-toggle="tooltip"
+                    data-bs-title="{% translate "Delete" %}"
+                    hx-delete="{% url 'transaction_rule_delete' transaction_rule_id=rule.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>
+          </div>
         </td>
         <td class="col-auto">
            <a class="text-decoration-none"
                 role="button"
+                data-bs-toggle="tooltip"
+                data-bs-title="{% if rule.active %}{% translate "Deactivate" %}{% else %}{% translate "Activate" %}{% endif %}"
                 hx-get="{% url 'transaction_rule_toggle_activity' transaction_rule_id=rule.id %}">
              {% if rule.active %}<i class="fa-solid fa-toggle-on tw-text-green-400"></i>{% else %}<i class="fa-solid fa-toggle-off tw-text-red-400"></i>{% endif %}
            </a>
         </td>
         <td class="col">
           <div>{{ rule.name }}</div>
-          <div class="tw-text-gray-400 ps-2">{{ rule.description }}</div>
+          <div class="tw-text-gray-400">{{ rule.description }}</div>
         </td>
       </tr>
       {% endfor %}
diff --git a/app/templates/rules/fragments/transaction_rule/view.html b/app/templates/rules/fragments/transaction_rule/view.html
index 0987657..71c27f9 100644
--- a/app/templates/rules/fragments/transaction_rule/view.html
+++ b/app/templates/rules/fragments/transaction_rule/view.html
@@ -7,7 +7,7 @@
 {% block body %}
 <div hx-get="{% url 'transaction_rule_view' transaction_rule_id=transaction_rule.id %}" hx-trigger="updated from:window" hx-target="closest .offcanvas" class="show-loading">
 <div class="tw-text-2xl">{{ transaction_rule.name }}</div>
-<div class="tw-text-base tw-text-gray-400 ps-1">{{ transaction_rule.description }}</div>
+<div class="tw-text-base tw-text-gray-400">{{ transaction_rule.description }}</div>
 <hr>
 <div class="my-3">
   <div class="tw-text-xl">If transaction...</div>
diff --git a/app/templates/tags/fragments/list.html b/app/templates/tags/fragments/list.html
index f3efe09..65e762e 100644
--- a/app/templates/tags/fragments/list.html
+++ b/app/templates/tags/fragments/list.html
@@ -27,24 +27,27 @@
       {% for tag in tags %}
       <tr class="tag">
         <td class="col-auto">
-          <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"
+          <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
+            <a class="btn btn-secondary btn-sm"
                   role="button"
                   data-bs-toggle="tooltip"
-                  data-bs-title="{% translate "Delete" %}"
-                  hx-delete="{% url 'tag_delete' tag_id=tag.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></td>
+                  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="btn btn-secondary btn-sm text-danger"
+                    role="button"
+                    data-bs-toggle="tooltip"
+                    data-bs-title="{% translate "Delete" %}"
+                    hx-delete="{% url 'tag_delete' tag_id=tag.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>
+          </div>
+        </td>
         <td class="col">{{ tag.name }}</td>
       </tr>
       {% endfor %}