Merge pull request #465 from eitchtee/dev

fix: "lax" deduplication fails if the comparison field has a numeric value

app/WYGIWYH/settings.py

@@ -143,6 +143,9 @@ WSGI_APPLICATION = "WYGIWYH.wsgi.application"
 # Database
 # https://docs.djangoproject.com/en/5.1/ref/settings/#databases
 
+THREADS = int(os.getenv("GUNICORN_THREADS", 1))
+MAX_POOL_SIZE = THREADS + 1
+
 DATABASES = {
     "default": {
         "ENGINE": "django.db.backends.postgresql",
@@ -151,8 +154,16 @@ DATABASES = {
         "PASSWORD": os.getenv("SQL_PASSWORD", "password"),
         "HOST": os.getenv("SQL_HOST", "localhost"),
         "PORT": os.getenv("SQL_PORT", "5432"),
+        "CONN_MAX_AGE": 0,
+        "CONN_HEALTH_CHECKS": True,
         "OPTIONS": {
-            "pool": True,
+            "pool": {
+                "min_size": 1,
+                "max_size": MAX_POOL_SIZE,
+                "timeout": 10,
+                "max_lifetime": 600,
+                "max_idle": 300,
+            },
         },
     }
 }

app/apps/common/tasks.py

@@ -17,7 +17,12 @@ logger = logging.getLogger(__name__)
 
 
 @app.periodic(cron="0 4 * * *")
-@app.task(queueing_lock="remove_old_jobs", pass_context=True, name="remove_old_jobs")
+@app.task(
+    lock="remove_old_jobs",
+    queueing_lock="remove_old_jobs",
+    pass_context=True,
+    name="remove_old_jobs",
+)
 async def remove_old_jobs(context, timestamp):
     try:
         return await builtin_tasks.remove_old_jobs(
@@ -36,7 +41,11 @@ async def remove_old_jobs(context, timestamp):
 
 
 @app.periodic(cron="0 6 1 * *")
-@app.task(queueing_lock="remove_expired_sessions", name="remove_expired_sessions")
+@app.task(
+    lock="remove_expired_sessions",
+    queueing_lock="remove_expired_sessions",
+    name="remove_expired_sessions",
+)
 async def remove_expired_sessions(timestamp=None):
     """Cleanup expired sessions by using Django management command."""
     try:
@@ -49,7 +58,7 @@ async def remove_expired_sessions(timestamp=None):
 
 
 @app.periodic(cron="0 8 * * *")
-@app.task(name="reset_demo_data")
+@app.task(lock="reset_demo_data", name="reset_demo_data")
 def reset_demo_data(timestamp=None):
     """
     Wipes the database and loads fresh demo data if DEMO mode is active.
@@ -86,9 +95,7 @@ def reset_demo_data(timestamp=None):
 
 
 @app.periodic(cron="0 */12 * * *")  # Every 12 hours
-@app.task(
-    name="check_for_updates",
-)
+@app.task(lock="check_for_updates", name="check_for_updates")
 def check_for_updates(timestamp=None):
     if not settings.CHECK_FOR_UPDATES:
         return "CHECK_FOR_UPDATES is disabled"

app/apps/currencies/tasks.py

@@ -8,7 +8,7 @@ logger = logging.getLogger(__name__)
 
 
 @app.periodic(cron="0 * * * *")  # Run every hour
-@app.task(name="automatic_fetch_exchange_rates")
+@app.task(lock="automatic_fetch_exchange_rates", name="automatic_fetch_exchange_rates")
 def automatic_fetch_exchange_rates(timestamp=None):
     """Fetch exchange rates for all due services"""
     fetcher = ExchangeRateFetcher()
@@ -19,7 +19,7 @@ def automatic_fetch_exchange_rates(timestamp=None):
         logger.error(e, exc_info=True)
 
 
-@app.task(name="manual_fetch_exchange_rates")
+@app.task(lock="manual_fetch_exchange_rates", name="manual_fetch_exchange_rates")
 def manual_fetch_exchange_rates(timestamp=None):
     """Fetch exchange rates for all due services"""
     fetcher = ExchangeRateFetcher()

app/apps/import_app/services/v1.py

@@ -459,12 +459,13 @@ class ImportService:
                 # Build query conditions for each field in the rule
                 for field in rule.fields:
                     if field in transaction_data:
-                        if rule.match_type == "strict":
-                            query = query.filter(**{field: transaction_data[field]})
-                        else:  # lax matching
-                            query = query.filter(
-                                **{f"{field}__iexact": transaction_data[field]}
-                            )
+                        value = transaction_data[field]
+                        # Use __iexact only for string fields; non-string types
+                        # (date, Decimal, bool, int, etc.) don't support UPPER()
+                        if rule.match_type == "strict" or not isinstance(value, str):
+                            query = query.filter(**{field: value})
+                        else:  # lax matching for strings only
+                            query = query.filter(**{f"{field}__iexact": value})
 
                 # If we found any matching transaction, it's a duplicate
                 if query.exists():

app/apps/import_app/tests.py

@@ -1,3 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.

app/apps/import_app/tests/test_import_service_v1.py

@@ -0,0 +1,276 @@
+"""
+Tests for ImportService v1, specifically for deduplication logic.
+
+These tests verify that the _check_duplicate_transaction method handles
+different field types correctly, particularly ensuring that __iexact
+is only used for string fields (not dates, decimals, etc.).
+"""
+
+from datetime import date
+from decimal import Decimal
+from unittest.mock import MagicMock, patch
+
+from django.test import TestCase
+
+from apps.accounts.models import Account, AccountGroup
+from apps.currencies.models import Currency
+from apps.import_app.models import ImportProfile, ImportRun
+from apps.import_app.services.v1 import ImportService
+from apps.transactions.models import Transaction
+
+
+class DeduplicationTests(TestCase):
+    """Tests for transaction deduplication during import."""
+
+    def setUp(self):
+        """Set up test data."""
+        self.currency = Currency.objects.create(
+            code="USD", name="US Dollar", decimal_places=2, prefix="$ "
+        )
+        self.account_group = AccountGroup.objects.create(name="Test Group")
+        self.account = Account.objects.create(
+            name="Test Account", group=self.account_group, currency=self.currency
+        )
+
+        # Create an existing transaction for deduplication tests
+        self.existing_transaction = Transaction.objects.create(
+            account=self.account,
+            type=Transaction.Type.EXPENSE,
+            date=date(2024, 1, 15),
+            amount=Decimal("100.00"),
+            description="Existing Transaction",
+            internal_id="ABC123",
+        )
+
+    def _create_import_service_with_deduplication(
+        self, fields: list[str], match_type: str = "lax"
+    ) -> ImportService:
+        """Helper to create an ImportService with specific deduplication rules."""
+        yaml_config = f"""
+settings:
+  file_type: csv
+  importing: transactions
+  trigger_transaction_rules: false
+mapping:
+  date_field:
+    source: date
+    target: date
+    format: "%Y-%m-%d"
+  amount_field:
+    source: amount
+    target: amount
+  description_field:
+    source: description
+    target: description
+  account_field:
+    source: account
+    target: account
+    type: id
+deduplication:
+  - type: compare
+    fields: {fields}
+    match_type: {match_type}
+"""
+        profile = ImportProfile.objects.create(
+            name=f"Test Profile {match_type} {'_'.join(fields)}",
+            yaml_config=yaml_config,
+            version=ImportProfile.Versions.VERSION_1,
+        )
+        import_run = ImportRun.objects.create(
+            profile=profile,
+            file_name="test.csv",
+        )
+        return ImportService(import_run)
+
+    def test_deduplication_with_date_field_strict_match(self):
+        """Test that date fields work with strict matching."""
+        service = self._create_import_service_with_deduplication(
+            fields=["date"], match_type="strict"
+        )
+
+        # Should find duplicate when date matches
+        is_duplicate = service._check_duplicate_transaction({"date": date(2024, 1, 15)})
+        self.assertTrue(is_duplicate)
+
+        # Should not find duplicate when date differs
+        is_duplicate = service._check_duplicate_transaction({"date": date(2024, 2, 20)})
+        self.assertFalse(is_duplicate)
+
+    def test_deduplication_with_date_field_lax_match(self):
+        """
+        Test that date fields use strict matching even when match_type is 'lax'.
+
+        This is the fix for the UPPER(date) PostgreSQL error. Date fields
+        cannot use __iexact, so they should fall back to strict matching.
+        """
+        service = self._create_import_service_with_deduplication(
+            fields=["date"], match_type="lax"
+        )
+
+        # Should find duplicate when date matches (using strict comparison)
+        is_duplicate = service._check_duplicate_transaction({"date": date(2024, 1, 15)})
+        self.assertTrue(is_duplicate)
+
+        # Should not find duplicate when date differs
+        is_duplicate = service._check_duplicate_transaction({"date": date(2024, 2, 20)})
+        self.assertFalse(is_duplicate)
+
+    def test_deduplication_with_amount_field_lax_match(self):
+        """
+        Test that Decimal fields use strict matching even when match_type is 'lax'.
+
+        Decimal fields cannot use __iexact, so they should fall back to strict matching.
+        """
+        service = self._create_import_service_with_deduplication(
+            fields=["amount"], match_type="lax"
+        )
+
+        # Should find duplicate when amount matches
+        is_duplicate = service._check_duplicate_transaction(
+            {"amount": Decimal("100.00")}
+        )
+        self.assertTrue(is_duplicate)
+
+        # Should not find duplicate when amount differs
+        is_duplicate = service._check_duplicate_transaction(
+            {"amount": Decimal("200.00")}
+        )
+        self.assertFalse(is_duplicate)
+
+    def test_deduplication_with_string_field_lax_match(self):
+        """
+        Test that string fields use case-insensitive matching with match_type 'lax'.
+        """
+        service = self._create_import_service_with_deduplication(
+            fields=["description"], match_type="lax"
+        )
+
+        # Should find duplicate with case-insensitive match
+        is_duplicate = service._check_duplicate_transaction(
+            {"description": "EXISTING TRANSACTION"}
+        )
+        self.assertTrue(is_duplicate)
+
+        # Should find duplicate with exact case match
+        is_duplicate = service._check_duplicate_transaction(
+            {"description": "Existing Transaction"}
+        )
+        self.assertTrue(is_duplicate)
+
+        # Should not find duplicate when description differs
+        is_duplicate = service._check_duplicate_transaction(
+            {"description": "Different Transaction"}
+        )
+        self.assertFalse(is_duplicate)
+
+    def test_deduplication_with_string_field_strict_match(self):
+        """
+        Test that string fields use case-sensitive matching with match_type 'strict'.
+        """
+        service = self._create_import_service_with_deduplication(
+            fields=["description"], match_type="strict"
+        )
+
+        # Should NOT find duplicate with different case (strict matching)
+        is_duplicate = service._check_duplicate_transaction(
+            {"description": "EXISTING TRANSACTION"}
+        )
+        self.assertFalse(is_duplicate)
+
+        # Should find duplicate with exact case match
+        is_duplicate = service._check_duplicate_transaction(
+            {"description": "Existing Transaction"}
+        )
+        self.assertTrue(is_duplicate)
+
+    def test_deduplication_with_multiple_fields_mixed_types(self):
+        """
+        Test deduplication with multiple fields of different types.
+
+        Verifies that string fields use __iexact while non-string fields
+        use strict matching, all in the same deduplication rule.
+        """
+        service = self._create_import_service_with_deduplication(
+            fields=["date", "amount", "description"], match_type="lax"
+        )
+
+        # Should find duplicate when all fields match (with case-insensitive description)
+        is_duplicate = service._check_duplicate_transaction(
+            {
+                "date": date(2024, 1, 15),
+                "amount": Decimal("100.00"),
+                "description": "existing transaction",  # lowercase should match
+            }
+        )
+        self.assertTrue(is_duplicate)
+
+        # Should NOT find duplicate when date differs
+        is_duplicate = service._check_duplicate_transaction(
+            {
+                "date": date(2024, 2, 20),
+                "amount": Decimal("100.00"),
+                "description": "existing transaction",
+            }
+        )
+        self.assertFalse(is_duplicate)
+
+        # Should NOT find duplicate when amount differs
+        is_duplicate = service._check_duplicate_transaction(
+            {
+                "date": date(2024, 1, 15),
+                "amount": Decimal("999.99"),
+                "description": "existing transaction",
+            }
+        )
+        self.assertFalse(is_duplicate)
+
+    def test_deduplication_with_internal_id_lax_match(self):
+        """Test deduplication with internal_id field using lax matching."""
+        service = self._create_import_service_with_deduplication(
+            fields=["internal_id"], match_type="lax"
+        )
+
+        # Should find duplicate with case-insensitive match
+        is_duplicate = service._check_duplicate_transaction(
+            {"internal_id": "abc123"}  # lowercase should match ABC123
+        )
+        self.assertTrue(is_duplicate)
+
+        # Should find duplicate with exact match
+        is_duplicate = service._check_duplicate_transaction({"internal_id": "ABC123"})
+        self.assertTrue(is_duplicate)
+
+        # Should not find duplicate when internal_id differs
+        is_duplicate = service._check_duplicate_transaction({"internal_id": "XYZ789"})
+        self.assertFalse(is_duplicate)
+
+    def test_no_duplicate_when_no_transactions_exist(self):
+        """Test that no duplicate is found when there are no matching transactions."""
+        # Hard delete to bypass signals that require user context
+        self.existing_transaction.hard_delete()
+
+        service = self._create_import_service_with_deduplication(
+            fields=["date", "amount"], match_type="lax"
+        )
+
+        is_duplicate = service._check_duplicate_transaction(
+            {
+                "date": date(2024, 1, 15),
+                "amount": Decimal("100.00"),
+            }
+        )
+        self.assertFalse(is_duplicate)
+
+    def test_deduplication_with_missing_field_in_data(self):
+        """Test that missing fields in transaction_data are handled gracefully."""
+        service = self._create_import_service_with_deduplication(
+            fields=["date", "nonexistent_field"], match_type="lax"
+        )
+
+        # Should still work, only checking the fields that exist
+        is_duplicate = service._check_duplicate_transaction(
+            {
+                "date": date(2024, 1, 15),
+            }
+        )
+        self.assertTrue(is_duplicate)

app/apps/insights/views.py

@@ -74,7 +74,9 @@ def index(request):
 def sankey_by_account(request):
     # Get filtered transactions
 
-    transactions = get_transactions(request, include_untracked_accounts=True)
+    transactions = get_transactions(
+        request, include_untracked_accounts=True, include_silent=True
+    )
 
     # Generate Sankey data
     sankey_data = generate_sankey_data_by_account(transactions)
@@ -91,7 +93,9 @@ def sankey_by_account(request):
 @require_http_methods(["GET"])
 def sankey_by_currency(request):
     # Get filtered transactions
-    transactions = get_transactions(request)
+    transactions = get_transactions(
+        request, include_silent=True, include_untracked_accounts=True
+    )
 
     # Generate Sankey data
     sankey_data = generate_sankey_data_by_currency(transactions)

app/apps/rules/forms.py

@@ -1,3 +1,4 @@
+from crispy_forms.bootstrap import Alert
 from apps.common.fields.forms.dynamic_select import DynamicModelChoiceField
 from apps.common.widgets.crispy.daisyui import Switch
 from apps.common.widgets.crispy.submit import NoClassSubmit
@@ -36,7 +37,6 @@ class TransactionRuleForm(forms.ModelForm):
         self.helper = FormHelper()
         self.helper.form_tag = False
         self.helper.form_method = "post"
-        # TO-DO: Add helper with available commands
         self.helper.layout = Layout(
             Switch("active"),
             "name",
@@ -49,6 +49,9 @@ class TransactionRuleForm(forms.ModelForm):
             Switch("sequenced"),
             "description",
             "trigger",
+            Alert(
+                _("You can add actions to this rule in the next screen."), dismiss=False
+            ),
         )
 
         if self.instance and self.instance.pk:

app/apps/transactions/models.py

@@ -20,7 +20,6 @@ from django.core.validators import MinValueValidator
 from django.db import models, transaction
 from django.db.models import Q
 from django.dispatch import Signal
-from django.forms import ValidationError
 from django.template.defaultfilters import date
 from django.utils import timezone
 from django.utils.translation import gettext_lazy as _
@@ -871,10 +870,8 @@ class RecurringTransaction(models.Model):
             notes=self.notes if self.add_notes_to_transaction else "",
             owner=self.account.owner,
         )
-        if self.tags.exists():
-            created_transaction.tags.set(self.tags.all())
-        if self.entities.exists():
-            created_transaction.entities.set(self.entities.all())
+        created_transaction.tags.set(self.tags.all())
+        created_transaction.entities.set(self.entities.all())
 
     def get_recurrence_delta(self):
         if self.recurrence_type == self.RecurrenceType.DAY:

app/apps/transactions/tasks.py

@@ -13,7 +13,9 @@ logger = logging.getLogger(__name__)
 
 
 @app.periodic(cron="0 0 * * *")
-@app.task(name="generate_recurring_transactions")
+@app.task(
+    lock="generate_recurring_transactions", name="generate_recurring_transactions"
+)
 def generate_recurring_transactions(timestamp=None):
     try:
         RecurringTransaction.generate_upcoming_transactions()
@@ -26,7 +28,7 @@ def generate_recurring_transactions(timestamp=None):
 
 
 @app.periodic(cron="10 1 * * *")
-@app.task(name="cleanup_deleted_transactions")
+@app.task(lock="cleanup_deleted_transactions", name="cleanup_deleted_transactions")
 def cleanup_deleted_transactions(timestamp=None):
     if settings.ENABLE_SOFT_DELETE and settings.KEEP_DELETED_TRANSACTIONS_FOR == 0:
         return "KEEP_DELETED_TRANSACTIONS_FOR is 0, no cleanup performed."

app/apps/users/forms.py

@@ -137,13 +137,13 @@ class UserSettingsForm(forms.ModelForm):
         self.helper.layout = Layout(
             "language",
             "timezone",
-            HTML("<hr />"),
+            HTML('<hr class="hr my-3" />'),
             "date_format",
             "datetime_format",
             "number_format",
-            HTML("<hr />"),
+            HTML('<hr class="hr my-3" />'),
             "start_page",
-            HTML("<hr />"),
+            HTML('<hr class="hr my-3" />'),
             "volume",
             FormActions(
                 NoClassSubmit("submit", _("Save"), css_class="btn btn-primary"),

app/templates/cotton/components/sidebar_collapsible_panel.html

@@ -0,0 +1,39 @@
+{% load active_link %}
+{% load i18n %}
+<c-vars id="collapsible-panel" />
+
+<li>
+  <div role="button"
+       _="on click toggle .hidden on #{{ id }} then toggle .slide-in-left on #{{ id }}"
+       class="text-xs flex items-center no-underline ps-3 p-2 rounded-box sidebar-item cursor-pointer {% active_link views=active css_class='sidebar-active' %}">
+    <i class="{{ icon }} fa-fw"></i>
+    <span class="ml-3 font-medium lg:group-hover:truncate lg:group-focus:truncate lg:group-hover:text-ellipsis lg:group-focus:text-ellipsis">
+      {{ title }}
+    </span>
+    <i class="fa-solid fa-chevron-right fa-fw ml-auto pe-2"></i>
+  </div>
+</li>
+
+<div id="{{ id }}"
+     class="p-0 absolute bottom-0 left-0 w-full z-30 max-h-dvh {% active_link views=active css_class='slide-in-left' inactive_class='hidden' %}">
+  <div class="h-dvh bg-base-300 flex flex-col">
+    <div class="items-center p-4 border-b border-base-content/10 sidebar-submenu-header text-base-content">
+      <div class="flex items-center sidebar-submenu-title">
+        <i class="{{ icon }} fa-fw lg:group-hover:me-2 me-2 lg:me-0"></i>
+        <h5 class="text-lg font-semibold text-base-content m-0">
+          {{ title }}
+        </h5>
+      </div>
+
+      <button type="button" class="btn btn-ghost btn-sm btn-circle" aria-label="{% trans 'Close' %}"
+              _="on click remove .slide-in-left from #{{ id }} then add .slide-out-left to #{{ id }} then wait 150ms then add .hidden to #{{ id }} then remove .slide-out-left from #{{ id }}">
+        <i class="fa-solid fa-xmark"></i>
+      </button>
+    </div>
+
+    <ul class="sidebar-item-list list-none p-3 flex flex-col gap-1 whitespace-nowrap lg:group-hover:animate-[disable-pointer-events] overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto overflow-x-hidden"
+        style="animation-duration: 100ms">
+      {{ slot }}
+    </ul>
+  </div>
+</div>

app/templates/cotton/components/sidebar_menu_collapsible_header.html

@@ -1,12 +1,14 @@
-<li class="lg:hidden lg:group-hover:block">
-  <div class="flex items-center" data-bs-toggle="collapse" href="#{{ title|slugify }}" role="button"
-       aria-expanded="false" aria-controls="{{ title|slugify }}">
+<li class="lg:hidden lg:group-hover:block" x-data="{ open: false }">
+  <div class="flex items-center" @click="open = !open" role="button"
+       :aria-expanded="open">
     <span
         class="text-base-content/60 text-sm font-bold uppercase lg:hidden lg:group-hover:inline me-2">{{ title }}</span>
     <hr class="flex-grow"/>
-    <i class="fas fa-chevron-down text-base-content/60 lg:before:hidden lg:group-hover:before:inline ml-2 lg:ml-0 lg:group-hover:ml-2"></i>
+    <i class="fas fa-chevron-down text-base-content/60 lg:before:hidden lg:group-hover:before:inline ml-2 lg:ml-0 lg:group-hover:ml-2"
+       :class="{ 'rotate-180': open }"
+       style="transition: transform 0.2s ease"></i>
+  </div>
+  <div x-show="open" x-collapse>
+    {{ slot }}
   </div>
 </li>
-<div class="collapse lg:hidden lg:group-hover:block" id="{{ title|slugify }}">
-  {{ slot }}
-</div>

app/templates/cotton/transaction/small_item.html

@@ -1,94 +0,0 @@
-<div class="card bg-base-100 shadow-xl mb-2 transaction-item">
-    <div class="card-body p-2 flex items-center gap-3" data-bs-toggle="collapse" data-bs-target="#{{ transaction.id }}" role="button" aria-expanded="false" aria-controls="{{ transaction.id }}">
-        <!-- Main visible content -->
-        <div class="flex flex-col lg:flex-row lg:items-center w-full gap-3">
-            <!-- Type indicator -->
-            <div class="w-8">
-                {% if transaction.type == 'IN' %}
-                    <span class="badge badge-success">↑</span>
-                {% else %}
-                    <span class="badge badge-error">↓</span>
-                {% endif %}
-            </div>
-
-            <!-- Payment status -->
-            <div class="w-8">
-                {% if transaction.is_paid %}
-                    <span class="badge badge-success">✓</span>
-                {% else %}
-                    <span class="badge badge-warning">○</span>
-                {% endif %}
-            </div>
-
-            <!-- Description -->
-            <div class="flex-grow">
-                <span class="font-medium">{{ transaction.description }}</span>
-            </div>
-
-            <!-- Amount -->
-            <div class="text-right whitespace-nowrap">
-                <span class="{% if transaction.type == 'IN' %}text-green-400{% else %}text-red-400{% endif %}">
-                    {{ transaction.amount }}
-                </span>
-                {% if transaction.exchanged_amount %}
-                    <br>
-                    <small class="text-base-content/60">
-                        {{ transaction.exchanged_amount.prefix }}{{ transaction.exchanged_amount.amount }}{{ transaction.exchanged_amount.suffix }}
-                    </small>
-                {% endif %}
-            </div>
-        </div>
-    </div>
-
-    <!-- Expandable details -->
-    <div class="collapse" id="{{ transaction.id }}">
-      <div class="card-body p-3 transaction-details">
-        <div class="grid grid-cols-1 md:grid-cols-2">
-            <div>
-                <dl class="grid grid-cols-3">
-                    <dt class="col-span-1">Date</dt>
-                    <dd class="col-span-2">{{ transaction.date|date:"Y-m-d" }}</dd>
-
-                    <dt class="col-span-1">Reference Date</dt>
-                    <dd class="col-span-2">{{ transaction.reference_date|date:"Y-m" }}</dd>
-
-                    <dt class="col-span-1">Account</dt>
-                    <dd class="col-span-2">{{ transaction.account.name }}</dd>
-
-                    <dt class="col-span-1">Category</dt>
-                    <dd class="col-span-2">{{ transaction.category|default:"-" }}</dd>
-                </dl>
-            </div>
-            <div>
-                <dl class="grid grid-cols-3">
-                    {% if transaction.tags.exists %}
-                        <dt class="col-span-1">Tags</dt>
-                        <dd class="col-span-2">
-                            {% for tag in transaction.tags.all %}
-                                <span class="badge badge-secondary">{{ tag.name }}</span>
-                            {% endfor %}
-                        </dd>
-                    {% endif %}
-
-                    {% if transaction.installment_plan %}
-                        <dt class="col-span-1">Installment</dt>
-                        <dd class="col-span-2">
-                            {{ transaction.installment_id }} of {{ transaction.installment_plan.total_installments }}
-                        </dd>
-                    {% endif %}
-
-                    {% if transaction.recurring_transaction %}
-                        <dt class="col-span-1">Recurring</dt>
-                        <dd class="col-span-2">Yes</dd>
-                    {% endif %}
-
-                    {% if transaction.notes %}
-                        <dt class="col-span-1">Notes</dt>
-                        <dd class="col-span-2">{{ transaction.notes }}</dd>
-                    {% endif %}
-                </dl>
-            </div>
-        </div>
-    </div>
-    </div>
-</div>

app/templates/cotton/ui/deleted_transactions_action_bar.html

@@ -1,12 +1,11 @@
 {% load i18n %}
-<div class="sticky bottom-4 left-0 right-0 z-1000 hidden mx-auto w-fit" id="actions-bar"
-     _="on change from #transactions-list or htmx:afterSettle from window
+<div class="sticky bottom-4 left-0 right-0 z-1000 hidden mx-auto w-fit" id="actions-bar" _="on change from #transactions-list or htmx:afterSettle from window
         if #actions-bar then
             if no <input[type='checkbox']:checked/> in #transactions-list
               if #actions-bar
-                add .slide-in-bottom-reverse then settle
+                add .slide-in-bottom-short-reverse then settle
                 then add .hidden to #actions-bar
-                then remove .slide-in-bottom-reverse
+                then remove .slide-in-bottom-short-reverse
               end
             else
               if #actions-bar
@@ -17,54 +16,51 @@
             end
           end
         end">
-  <div class="card bg-base-300 shadow slide-in-bottom max-w-[90vw] card-border">
+  <div class="card bg-base-300 shadow slide-in-bottom-short max-w-[90vw] card-border mt-5">
     <div class="card-body flex-row p-2 flex justify-between items-center gap-3 overflow-x-auto">
       {% spaceless %}
-        <div class="font-bold text-md ms-2" id="selected-count">0</div>
-        <div class="divider divider-horizontal m-0"></div>
-        <div>
-          <button role="button" class="btn btn-secondary btn-sm" type="button"
-                  data-bs-toggle="dropdown" aria-expanded="false">
-            <i class="fa-regular fa-square-check fa-fw"></i>
-            <i class="fa-solid fa-chevron-down fa-xs"></i>
-          </button>
-          <ul class="dropdown-menu menu">
-            <li>
-              <a class="cursor-pointer"
-                   _="on click set <#transactions-list .transaction:not([style*='display: none']) input[type='checkbox']/>'s checked to true then call me.blur() then trigger change">
-                <i class="fa-regular fa-square-check text-success me-3"></i>{% translate 'Select All' %}
-              </a>
-            </li>
-            <li>
-              <a class="cursor-pointer"
-                   _="on click set <#transactions-list input[type='checkbox']/>'s checked to false then call me.blur() then trigger change">
-                <i class="fa-regular fa-square text-error me-3"></i>{% translate 'Unselect All' %}
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div class="divider divider-horizontal m-0"></div>
-        <button class="btn btn-secondary btn-sm"
-                hx-get="{% url 'transactions_bulk_undelete' %}"
-                hx-include=".transaction"
-                data-tippy-content="{% translate 'Restore' %}">
-          <i class="fa-solid fa-trash-arrow-up fa-fw"></i>
+      <div class="font-bold text-md ms-2" id="selected-count">0</div>
+      <div class="divider divider-horizontal m-0"></div>
+      <div>
+        <button role="button" class="btn btn-secondary btn-sm" type="button" data-bs-toggle="dropdown"
+          aria-expanded="false">
+          <i class="fa-regular fa-square-check fa-fw"></i>
+          <i class="fa-solid fa-chevron-down fa-xs"></i>
         </button>
-        <button class="btn btn-secondary btn-sm"
-                hx-get="{% url 'transactions_bulk_delete' %}"
-                hx-include=".transaction"
-                hx-trigger="confirmed"
-                data-tippy-content="{% translate 'Delete' %}"
-                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 them!" %}"
-                _="install prompt_swal">
-          <i class="fa-solid fa-trash text-error"></i>
-        </button>
-        <div class="divider divider-horizontal m-0"></div>
-        <div class="join"
-             _="on selected_transactions_updated from #actions-bar
+        <ul class="dropdown-menu menu">
+          <li>
+            <a class="cursor-pointer"
+              _="on click set <#transactions-list .transaction:not([style*='display: none']) input[type='checkbox']/>'s checked to true then call me.blur() then trigger change">
+              <i class="fa-regular fa-square-check text-success me-3"></i>{% translate 'Select All' %}
+            </a>
+          </li>
+          <li>
+            <a class="cursor-pointer"
+              _="on click set <#transactions-list input[type='checkbox']/>'s checked to false then call me.blur() then trigger change">
+              <i class="fa-regular fa-square text-error me-3"></i>{% translate 'Unselect All' %}
+            </a>
+          </li>
+          <li>
+            <a class="cursor-pointer"
+              _="on click for checkbox in <#transactions-list input[type='checkbox']/> set checkbox.checked to (not checkbox.checked) end then call me.blur() then trigger change">
+              <i class="fa-solid fa-arrow-right-arrow-left text-info me-3"></i>{% translate 'Invert election' %}
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="divider divider-horizontal m-0"></div>
+      <button class="btn btn-secondary btn-sm" hx-get="{% url 'transactions_bulk_undelete' %}" hx-include=".transaction"
+        data-tippy-content="{% translate 'Restore' %}">
+        <i class="fa-solid fa-trash-arrow-up fa-fw"></i>
+      </button>
+      <button class="btn btn-secondary btn-sm" hx-get="{% url 'transactions_bulk_delete' %}" hx-include=".transaction"
+        hx-trigger="confirmed" data-tippy-content="{% translate 'Delete' %}" 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 them!" %}" _="install prompt_swal">
+        <i class="fa-solid fa-trash text-error"></i>
+      </button>
+      <div class="divider divider-horizontal m-0"></div>
+      <div class="join" _="on selected_transactions_updated from #actions-bar
                   set realTotal to math.bignumber(0)
                   set flatTotal to math.bignumber(0)
                   set transactions to <.transaction:has(input[name='transactions']:checked)/>
@@ -101,145 +97,121 @@
                   put mean.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 40}) into #calc-menu-mean's innerText
                   put flatAmountValues.length.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 40}) into #calc-menu-count's innerText
                 end">
-          <button class="btn btn-secondary btn-sm join-item"
-                    _="on click
+        <button class="btn btn-secondary btn-sm join-item" _="on click
                       set original_value to #real-total-front's innerText
                       writeText(original_value) on navigator.clipboard
-                      put '{% translate "copied!" %}' into #real-total-front's innerText
-                      wait 1s
-                      put original_value into #real-total-front's innerText
-                    end">
-            <i class="fa-solid fa-plus fa-fw me-md-2"></i>
-            <span class="hidden md:inline-block" id="real-total-front">0</span>
+                      put '{% translate "copied!" %}' into #real-total-front's innerText wait 1s put original_value
+          into #real-total-front's innerText end">
+          <i class="fa-solid fa-plus fa-fw me-md-2"></i>
+          <span class="hidden md:inline-block" id="real-total-front">0</span>
+        </button>
+        <div>
+          <button class="join-item btn btn-sm btn-secondary" type="button" data-bs-toggle="dropdown"
+            data-bs-auto-close="outside" aria-expanded="false">
+            <i class="fa-solid fa-chevron-down fa-xs"></i>
           </button>
-          <div>
-            <button class="join-item btn btn-sm btn-secondary"
-                    type="button"
-                    data-bs-toggle="dropdown"
-                    data-bs-auto-close="outside"
-                    aria-expanded="false">
-              <i class="fa-solid fa-chevron-down fa-xs"></i>
-            </button>
 
-            <ul class="dropdown-menu dropdown-menu-end menu">
-              <li class="cursor-pointer"
-                  _="on click
+          <ul class="dropdown-menu dropdown-menu-end menu">
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-flat-total's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-flat-total
-                        wait 1s
-                        put original_value into #calc-menu-flat-total
-                      end">
-                <div class="py-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Flat Total" %}
-                    </div>
-                    <div id="calc-menu-flat-total">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-flat-total wait 1s put original_value into
+              #calc-menu-flat-total end">
+              <div class="py-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Flat Total" %}
+                  </div>
+                  <div id="calc-menu-flat-total">
+                    0
                   </div>
                 </div>
-              </li>
-              <li class="cursor-pointer"
-                  _="on click
+              </div>
+            </li>
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-real-total's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-real-total
-                        wait 1s
-                        put original_value into #calc-menu-real-total
-                      end">
-                <div class="py-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Real Total" %}
-                    </div>
-                    <div id="calc-menu-real-total">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-real-total wait 1s put original_value into
+              #calc-menu-real-total end">
+              <div class="py-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Real Total" %}
+                  </div>
+                  <div id="calc-menu-real-total">
+                    0
                   </div>
                 </div>
-              </li>
-              <li class="cursor-pointer"
-                  _="on click
+              </div>
+            </li>
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-mean's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-mean
-                        wait 1s
-                        put original_value into #calc-menu-mean
-                      end">
-                <div class="p-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Mean" %}
-                    </div>
-                    <div id="calc-menu-mean">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-mean wait 1s put original_value into
+              #calc-menu-mean end">
+              <div class="p-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Mean" %}
+                  </div>
+                  <div id="calc-menu-mean">
+                    0
                   </div>
                 </div>
-              </li>
-              <li class="cursor-pointer"
-                  _="on click
+              </div>
+            </li>
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-max's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-max
-                        wait 1s
-                        put original_value into #calc-menu-max
-                      end">
-                <div class="py-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Max" %}
-                    </div>
-                    <div id="calc-menu-max">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-max wait 1s put original_value into
+              #calc-menu-max end">
+              <div class="py-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Max" %}
+                  </div>
+                  <div id="calc-menu-max">
+                    0
                   </div>
                 </div>
-              </li>
-              <li class="cursor-pointer"
-                  _="on click
+              </div>
+            </li>
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-min's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-min
-                        wait 1s
-                        put original_value into #calc-menu-min
-                      end">
-                <div class="py-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Min" %}
-                    </div>
-                    <div id="calc-menu-min">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-min wait 1s put original_value into
+              #calc-menu-min end">
+              <div class="py-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Min" %}
+                  </div>
+                  <div id="calc-menu-min">
+                    0
                   </div>
                 </div>
-              </li>
-              <li class="cursor-pointer"
-                  _="on click
+              </div>
+            </li>
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-count's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-count
-                        wait 1s
-                        put original_value into #calc-menu-count
-                      end">
-                <div class="py-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Count" %}
-                    </div>
-                    <div id="calc-menu-count">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-count wait 1s put original_value into
+              #calc-menu-count end">
+              <div class="py-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Count" %}
+                  </div>
+                  <div id="calc-menu-count">
+                    0
                   </div>
                 </div>
-              </li>
-            </ul>
-          </div>
+              </div>
+            </li>
+          </ul>
         </div>
+      </div>
       {% endspaceless %}
     </div>
   </div>
-</div>
+</div>

app/templates/cotton/ui/transactions_action_bar.html

@@ -1,12 +1,11 @@
 {% load i18n %}
-<div class="sticky bottom-4 left-0 right-0 z-1000 hidden mx-auto w-fit" id="actions-bar"
-     _="on change from #transactions-list or htmx:afterSettle from window
+<div class="sticky bottom-4 left-0 right-0 z-1000 hidden mx-auto w-fit" id="actions-bar" _="on change from #transactions-list or htmx:afterSettle from window
         if #actions-bar then
             if no <input[type='checkbox']:checked/> in #transactions-list
               if #actions-bar
-                add .slide-in-bottom-reverse then settle
+                add .slide-in-bottom-short-reverse then settle
                 then add .hidden to #actions-bar
-                then remove .slide-in-bottom-reverse
+                then remove .slide-in-bottom-short-reverse
               end
             else
               if #actions-bar
@@ -17,86 +16,76 @@
             end
           end
         end">
-  <div class="card bg-base-300 shadow slide-in-bottom max-w-[90vw] card-border">
+  <div class="card bg-base-300 shadow slide-in-bottom-short max-w-[90vw] card-border mt-5">
     <div class="card-body flex-row p-2 flex justify-between items-center gap-3 overflow-x-auto">
       {% spaceless %}
-        <div class="font-bold text-md ms-2" id="selected-count">0</div>
-        <div class="divider divider-horizontal m-0"></div>
+      <div class="font-bold text-md ms-2" id="selected-count">0</div>
+      <div class="divider divider-horizontal m-0"></div>
+      <div>
+        <button role="button" class="btn btn-secondary btn-sm" type="button" data-bs-toggle="dropdown"
+          aria-expanded="false">
+          <i class="fa-regular fa-square-check fa-fw"></i>
+          <i class="fa-solid fa-chevron-down fa-xs"></i>
+        </button>
+        <ul class="dropdown-menu menu">
+          <li>
+            <a class="cursor-pointer"
+              _="on click set <#transactions-list .transaction:not([style*='display: none']) input[type='checkbox']/>'s checked to true then call me.blur() then trigger change">
+              <i class="fa-regular fa-square-check text-success me-3"></i>{% translate 'Select All' %}
+            </a>
+          </li>
+          <li>
+            <a class="cursor-pointer"
+              _="on click set <#transactions-list input[type='checkbox']/>'s checked to false then call me.blur() then trigger change">
+              <i class="fa-regular fa-square text-error me-3"></i>{% translate 'Unselect All' %}
+            </a>
+          </li>
+          <li>
+            <a class="cursor-pointer"
+              _="on click for checkbox in <#transactions-list input[type='checkbox']/> set checkbox.checked to (not checkbox.checked) end then call me.blur() then trigger change">
+              <i class="fa-solid fa-arrow-right-arrow-left text-info me-3"></i>{% translate 'Invert selection' %}
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="divider divider-horizontal m-0"></div>
+      <div class="join">
+        <button class="btn btn-secondary join-item btn-sm" hx-get="{% url 'transactions_bulk_edit' %}"
+          hx-target="#generic-offcanvas" hx-include=".transaction" data-tippy-content="{% translate 'Edit' %}">
+          <i class="fa-solid fa-pencil"></i>
+        </button>
         <div>
-          <button role="button" class="btn btn-secondary btn-sm" type="button"
-                  data-bs-toggle="dropdown" aria-expanded="false">
-            <i class="fa-regular fa-square-check fa-fw"></i>
+          <button type="button" role="button" class="join-item btn btn-sm btn-secondary" data-bs-toggle="dropdown"
+            aria-expanded="false">
             <i class="fa-solid fa-chevron-down fa-xs"></i>
           </button>
+
           <ul class="dropdown-menu menu">
             <li>
-              <a class="cursor-pointer"
-                   _="on click set <#transactions-list .transaction:not([style*='display: none']) input[type='checkbox']/>'s checked to true then call me.blur() then trigger change">
-                <i class="fa-regular fa-square-check text-success me-3"></i>{% translate 'Select All' %}
+              <a class="cursor-pointer" hx-get="{% url 'transactions_bulk_unpay' %}" hx-include=".transaction">
+                <i class="fa-regular fa-circle text-red-400 fa-fw me-3"></i>{% translate 'Mark as unpaid' %}
               </a>
             </li>
             <li>
-              <a class="cursor-pointer"
-                   _="on click set <#transactions-list input[type='checkbox']/>'s checked to false then call me.blur() then trigger change">
-                <i class="fa-regular fa-square text-error me-3"></i>{% translate 'Unselect All' %}
+              <a class="cursor-pointer" hx-get="{% url 'transactions_bulk_pay' %}" hx-include=".transaction">
+                <i class="fa-regular fa-circle-check text-green-400 fa-fw me-3"></i>{% translate 'Mark as paid' %}
               </a>
             </li>
           </ul>
         </div>
-        <div class="divider divider-horizontal m-0"></div>
-        <div class="join">
-          <button class="btn btn-secondary join-item btn-sm"
-                  hx-get="{% url 'transactions_bulk_edit' %}"
-                  hx-target="#generic-offcanvas"
-                  hx-include=".transaction"
-                  data-tippy-content="{% translate 'Edit' %}">
-            <i class="fa-solid fa-pencil"></i>
-          </button>
-          <div>
-            <button type="button" role="button" class="join-item btn btn-sm btn-secondary"
-                    data-bs-toggle="dropdown" aria-expanded="false">
-              <i class="fa-solid fa-chevron-down fa-xs"></i>
-            </button>
-
-            <ul class="dropdown-menu menu">
-              <li>
-                <a class="cursor-pointer"
-                    hx-get="{% url 'transactions_bulk_unpay' %}"
-                    hx-include=".transaction">
-                  <i class="fa-regular fa-circle text-red-400 fa-fw me-3"></i>{% translate 'Mark as unpaid' %}
-                </a>
-              </li>
-              <li>
-                <a class="cursor-pointer"
-                    hx-get="{% url 'transactions_bulk_pay' %}"
-                    hx-include=".transaction">
-                  <i class="fa-regular fa-circle-check text-green-400 fa-fw me-3"></i>{% translate 'Mark as paid' %}
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <button class="btn btn-secondary btn-sm"
-                hx-get="{% url 'transactions_bulk_clone' %}"
-                hx-include=".transaction"
-                data-tippy-content="{% translate 'Duplicate' %}">
-          <i class="fa-solid fa-clone fa-fw"></i>
-        </button>
-        <button class="btn btn-error btn-sm"
-                hx-get="{% url 'transactions_bulk_delete' %}"
-                hx-include=".transaction"
-                hx-trigger="confirmed"
-                data-tippy-content="{% translate 'Delete' %}"
-                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 them!" %}"
-                _="install prompt_swal">
-          <i class="fa-solid fa-trash"></i>
-        </button>
-        <div class="divider divider-horizontal m-0"></div>
-        <div class="join"
-             _="on selected_transactions_updated from #actions-bar
+      </div>
+      <button class="btn btn-secondary btn-sm" hx-get="{% url 'transactions_bulk_clone' %}" hx-include=".transaction"
+        data-tippy-content="{% translate 'Duplicate' %}">
+        <i class="fa-solid fa-clone fa-fw"></i>
+      </button>
+      <button class="btn btn-error btn-sm" hx-get="{% url 'transactions_bulk_delete' %}" hx-include=".transaction"
+        hx-trigger="confirmed" data-tippy-content="{% translate 'Delete' %}" 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 them!" %}" _="install prompt_swal">
+        <i class="fa-solid fa-trash"></i>
+      </button>
+      <div class="divider divider-horizontal m-0"></div>
+      <div class="join" _="on selected_transactions_updated from #actions-bar
                   set realTotal to math.bignumber(0)
                   set flatTotal to math.bignumber(0)
                   set transactions to <.transaction:has(input[name='transactions']:checked)/>
@@ -133,145 +122,121 @@
                   put mean.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 40}) into #calc-menu-mean's innerText
                   put flatAmountValues.length.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 40}) into #calc-menu-count's innerText
                 end">
-          <button class="btn btn-secondary btn-sm join-item" 
-                    _="on click
+        <button class="btn btn-secondary btn-sm join-item" _="on click
                       set original_value to #real-total-front's innerText
                       writeText(original_value) on navigator.clipboard
-                      put '{% translate "copied!" %}' into #real-total-front's innerText
-                      wait 1s
-                      put original_value into #real-total-front's innerText
-                    end">
-            <i class="fa-solid fa-plus fa-fw me-md-2"></i>
-            <span class="hidden md:inline-block" id="real-total-front">0</span>
+                      put '{% translate "copied!" %}' into #real-total-front's innerText wait 1s put original_value
+          into #real-total-front's innerText end">
+          <i class="fa-solid fa-plus fa-fw me-md-2"></i>
+          <span class="hidden md:inline-block" id="real-total-front">0</span>
+        </button>
+        <div>
+          <button class="join-item btn btn-sm btn-secondary" type="button" data-bs-toggle="dropdown"
+            data-bs-auto-close="outside" aria-expanded="false">
+            <i class="fa-solid fa-chevron-down fa-xs"></i>
           </button>
-          <div>
-            <button class="join-item btn btn-sm btn-secondary"
-                    type="button"
-                    data-bs-toggle="dropdown"
-                    data-bs-auto-close="outside"
-                    aria-expanded="false">
-              <i class="fa-solid fa-chevron-down fa-xs"></i>
-            </button>
 
-            <ul class="dropdown-menu dropdown-menu-end menu">
-              <li class="cursor-pointer"
-                  _="on click
+          <ul class="dropdown-menu dropdown-menu-end menu">
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-flat-total's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-flat-total
-                        wait 1s
-                        put original_value into #calc-menu-flat-total
-                      end">
-                <div class="py-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Flat Total" %}
-                    </div>
-                    <div id="calc-menu-flat-total">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-flat-total wait 1s put original_value into
+              #calc-menu-flat-total end">
+              <div class="py-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Flat Total" %}
+                  </div>
+                  <div id="calc-menu-flat-total">
+                    0
                   </div>
                 </div>
-              </li>
-              <li class="cursor-pointer"
-                  _="on click
+              </div>
+            </li>
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-real-total's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-real-total
-                        wait 1s
-                        put original_value into #calc-menu-real-total
-                      end">
-                <div class="py-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Real Total" %}
-                    </div>
-                    <div id="calc-menu-real-total">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-real-total wait 1s put original_value into
+              #calc-menu-real-total end">
+              <div class="py-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Real Total" %}
+                  </div>
+                  <div id="calc-menu-real-total">
+                    0
                   </div>
                 </div>
-              </li>
-              <li class="cursor-pointer"
-                  _="on click
+              </div>
+            </li>
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-mean's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-mean
-                        wait 1s
-                        put original_value into #calc-menu-mean
-                      end">
-                <div class="p-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Mean" %}
-                    </div>
-                    <div id="calc-menu-mean">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-mean wait 1s put original_value into
+              #calc-menu-mean end">
+              <div class="p-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Mean" %}
+                  </div>
+                  <div id="calc-menu-mean">
+                    0
                   </div>
                 </div>
-              </li>
-              <li class="cursor-pointer"
-                  _="on click
+              </div>
+            </li>
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-max's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-max
-                        wait 1s
-                        put original_value into #calc-menu-max
-                      end">
-                <div class="py-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Max" %}
-                    </div>
-                    <div id="calc-menu-max">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-max wait 1s put original_value into
+              #calc-menu-max end">
+              <div class="py-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Max" %}
+                  </div>
+                  <div id="calc-menu-max">
+                    0
                   </div>
                 </div>
-              </li>
-              <li class="cursor-pointer"
-                  _="on click
+              </div>
+            </li>
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-min's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-min
-                        wait 1s
-                        put original_value into #calc-menu-min
-                      end">
-                <div class="py-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Min" %}
-                    </div>
-                    <div id="calc-menu-min">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-min wait 1s put original_value into
+              #calc-menu-min end">
+              <div class="py-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Min" %}
+                  </div>
+                  <div id="calc-menu-min">
+                    0
                   </div>
                 </div>
-              </li>
-              <li class="cursor-pointer"
-                  _="on click
+              </div>
+            </li>
+            <li class="cursor-pointer" _="on click
                         set original_value to #calc-menu-count's innerText
                         writeText(original_value) on navigator.clipboard
-                        put '{% translate "copied!" %}' into #calc-menu-count
-                        wait 1s
-                        put original_value into #calc-menu-count
-                      end">
-                <div class="py-1 px-3">
-                  <div>
-                    <div class="text-base-content/60 text-xs font-medium">
-                      {% trans "Count" %}
-                    </div>
-                    <div id="calc-menu-count">
-                      0
-                    </div>
+                        put '{% translate "copied!" %}' into #calc-menu-count wait 1s put original_value into
+              #calc-menu-count end">
+              <div class="py-1 px-3">
+                <div>
+                  <div class="text-base-content/60 text-xs font-medium">
+                    {% trans "Count" %}
+                  </div>
+                  <div id="calc-menu-count">
+                    0
                   </div>
                 </div>
-              </li>
-            </ul>
-          </div>
+              </div>
+            </li>
+          </ul>
         </div>
+      </div>
       {% endspaceless %}
     </div>
   </div>
-</div>
+</div>

app/templates/crispy-daisyui/layout/alert.html

@@ -1,4 +1,4 @@
 <div class="alert {{ alert.css_class }}" role="alert"{% if alert.css_id %} id="{{ alert.css_id }}"{% endif %}>
-    {{ content|safe }}
-    {% if dismiss %}<button type="button" class="btn btn-sm btn-circle btn-ghost" data-bs-dismiss="alert" aria-label="Close">✕</button>{% endif %}
+    <span>{{ content|safe }}</span>
+    {% if dismiss %}<button type="button" class="btn btn-sm btn-circle btn-ghost ml-auto" aria-label="Close" _="on click remove closest .alert">✕</button>{% endif %}
 </div>

app/templates/crispy-daisyui/layout/help_text.html

@@ -1,7 +1,7 @@
 {% if field.help_text %}
     {% if help_text_inline %}
-        <span id="{{ field.auto_id }}_helptext" class="label text-wrap">{{ field.help_text|safe}}</span>
+        <span id="{{ field.auto_id }}_helptext" class="label text-wrap block">{{ field.help_text|safe}}</span>
     {% else %}
-        <p {% if field.auto_id %}id="{{ field.auto_id }}_helptext" {% endif %}class="label text-wrap">{{ field.help_text|safe }}</p>
+        <p {% if field.auto_id %}id="{{ field.auto_id }}_helptext" {% endif %}class="label text-wrap block">{{ field.help_text|safe }}</p>
     {% endif %}
 {% endif %}

app/templates/crispy-daisyui/layout/prepended_appended_text.html

@@ -1,4 +1,5 @@
 {% load crispy_forms_field %}
+{% load crispy_extra %}
 
 {% if field.is_hidden %}
     {{ field }}
@@ -7,33 +8,43 @@
 
         <fieldset class="fieldset{% if field_class %} {{ field_class }}{% endif %}">
             {% if field.label and form_show_labels %}
-                <legend class="fieldset-legend{{ label_class }}{% if field.field.required %} requiredField{% endif %}">
+                <label for="{{ field.id_for_label }}" class="fieldset-legend{% if label_class %} {{ label_class }}{% endif %}{% if field.field.required %} requiredField{% endif %}">
                     {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
-                </legend>
+                </label>
             {% endif %}
 
-            <label class="{% if input_size %} {{ input_size }}{% endif %}{% if field.errors %} input-error{% endif %}">
+            <div class="join w-full{% if input_size %} {{ input_size }}{% endif %}">
                 {# prepend #}
                 {% if crispy_prepended_text %}
-                    {{ crispy_prepended_text }}
+                    <span class="join-item flex items-center px-3 bg-base-200 border border-base-300">{{ crispy_prepended_text }}</span>
                 {% endif %}
 
                 {# input #}
                 {% if field|is_select %}
                     {% if field.errors %}
-                        {% crispy_field field 'class' 'select-error grow' %}
+                        {% crispy_field field 'class' 'select select-error join-item grow' %}
                     {% else %}
-                        {% crispy_field field 'class' 'grow' %}
+                        {% crispy_field field 'class' 'select join-item grow' %}
+                    {% endif %}
+                {% elif field|is_input %}
+                    {% if field.errors %}
+                        {% crispy_field field 'class' 'input input-error join-item grow' %}
+                    {% else %}
+                        {% crispy_field field 'class' 'input join-item grow' %}
                     {% endif %}
                 {% else %}
-                    {% crispy_field field 'class' 'grow' %}
+                    {% if field.errors %}
+                        {% crispy_field field 'class' 'input input-error join-item grow' %}
+                    {% else %}
+                        {% crispy_field field 'class' 'input join-item grow' %}
+                    {% endif %}
                 {% endif %}
-                
+
                 {# append #}
                 {% if crispy_appended_text %}
-                    {{ crispy_appended_text }}
+                    <span class="join-item flex items-center px-3 bg-base-200 border border-base-300">{{ crispy_appended_text }}</span>
                 {% endif %}
-            </label>
+            </div>
 
             {# help text as label paragraph #}
             {% if not help_text_inline %}

app/templates/includes/navbar.html

@@ -1,183 +0,0 @@
-{% load cache_access %}
-{% load settings %}
-{% load static %}
-{% 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 'index' %}">
-      <img src="{% static 'img/logo-icon.svg' %}" alt="WYGIWYH Logo" height="40" width="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-3 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_currency||yearly_overview_account||calendar' %}"
-             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_currency' %}"
-                   href="{% url 'yearly_index_currency' %}">{% translate 'Yearly by currency' %}</a></li>
-            <li><a class="dropdown-item {% active_link views='yearly_overview_account' %}"
-                   href="{% url 'yearly_index_account' %}">{% translate 'Yearly by account' %}</a></li>
-            <li><a class="dropdown-item {% active_link views='calendar' %}"
-                   href="{% url 'calendar_index' %}">{% translate 'Calendar' %}</a></li>
-          </ul>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle {% active_link views='net_worth_current||net_worth_projected' %}"
-             href="#" role="button"
-             data-bs-toggle="dropdown"
-             aria-expanded="false">
-            {% translate 'Net Worth' %}
-          </a>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item {% active_link views='net_worth_current' %}"
-                   href="{% url 'net_worth_current' %}">{% translate 'Current' %}</a></li>
-            <li><a class="dropdown-item {% active_link views='net_worth_projected' %}"
-                   href="{% url 'net_worth_projected' %}">{% translate 'Projected' %}</a></li>
-          </ul>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link {% active_link views='insights_index' %}" href="{% url 'insights_index' %}">{% trans 'Insights' %}</a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle {% active_link views='installment_plans_index||quick_transactions_index||recurring_trasanctions_index||transactions_all_index||transactions_trash_index' %}"
-             href="#" role="button"
-             data-bs-toggle="dropdown"
-             aria-expanded="false">
-            {% translate 'Transactions' %}
-          </a>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item {% active_link views='transactions_all_index' %}"
-                   href="{% url 'transactions_all_index' %}">{% translate 'All' %}</a></li>
-            <li>
-            {% settings "ENABLE_SOFT_DELETE" as enable_soft_delete %}
-            {% if enable_soft_delete %}
-            <li><a class="dropdown-item {% active_link views='transactions_trash_index' %}"
-                   href="{% url 'transactions_trash_index' %}">{% translate 'Trash Can' %}</a></li>
-            <li>
-            {% endif %}
-            <hr class="dropdown-divider">
-            </li>
-            <li><a class="dropdown-item {% active_link views='quick_transactions_index' %}"
-                   href="{% url 'quick_transactions_index' %}">{% translate 'Quick Transactions' %}</a></li>
-            <li><a class="dropdown-item {% active_link views='installment_plans_index' %}"
-                   href="{% url 'installment_plans_index' %}">{% translate 'Installment Plans' %}</a></li>
-            <li><a class="dropdown-item {% active_link views='recurring_trasanctions_index' %}"
-                   href="{% url 'recurring_trasanctions_index' %}">{% translate 'Recurring Transactions' %}</a></li>
-          </ul>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle {% active_link views='dca_strategy_index||dca_strategy_detail_index||unit_price_calculator||currency_converter' %}"
-             href="#" role="button"
-             data-bs-toggle="dropdown"
-             aria-expanded="false">
-            {% translate 'Tools' %}
-          </a>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item {% active_link views='dca_strategy_index||dca_strategy_detail_index' %}"
-                   href="{% url 'dca_strategy_index' %}">{% translate 'Dollar Cost Average Tracker' %}</a></li>
-            <li>
-            <li><a class="dropdown-item {% active_link views='unit_price_calculator' %}"
-                 href="{% url 'unit_price_calculator' %}">{% translate 'Unit Price Calculator' %}</a></li>
-            <li>
-            <li><a class="dropdown-item {% active_link views='currency_converter' %}"
-                 href="{% url 'currency_converter' %}">{% translate 'Currency Converter' %}</a></li>
-            <li>
-          </ul>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle {% active_link views='tags_index||entities_index||categories_index||accounts_index||account_groups_index||currencies_index||exchange_rates_index||rules_index||import_profiles_index||automatic_exchange_rates_index||export_index||users_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='entities_index' %}"
-                   href="{% url 'entities_index' %}">{% translate 'Entities' %}</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>
-              <hr class="dropdown-divider">
-            </li>
-            <li><h6 class="dropdown-header">{% trans 'Currencies' %}</h6></li>
-            <li><a class="dropdown-item {% active_link views='currencies_index' %}" 
-                   href="{% url 'currencies_index' %}">{% translate 'Currencies' %}</a></li>
-            <li><a class="dropdown-item {% active_link views='exchange_rates_index' %}" 
-                   href="{% url 'exchange_rates_index' %}">{% translate 'Exchange Rates' %}</a></li>
-            <li>
-              <hr class="dropdown-divider">
-            </li>
-            <li><h6 class="dropdown-header">{% trans 'Automation' %}</h6></li>
-            <li><a class="dropdown-item {% active_link views='rules_index' %}"
-                   href="{% url 'rules_index' %}">{% translate 'Rules' %}</a></li>
-            <li><a class="dropdown-item {% active_link views='import_profiles_index' %}"
-                   href="{% url 'import_profiles_index' %}">{% translate 'Import' %} <span class="badge text-bg-primary">beta</span></a></li>
-            {% if user.is_superuser %}
-            <li><a class="dropdown-item {% active_link views='export_index' %}"
-                   href="{% url 'export_index' %}">{% translate 'Export and Restore' %}</a></li>
-            {% endif %}
-            <li><a class="dropdown-item {% active_link views='automatic_exchange_rates_index' %}"
-                   href="{% url 'automatic_exchange_rates_index' %}">{% translate 'Automatic Exchange Rates' %}</a></li>
-            {% if user.is_superuser %}
-            <li>
-              <hr class="dropdown-divider">
-            </li>
-            <li><h6 class="dropdown-header">{% trans 'Admin' %}</h6></li>
-            <li><a class="dropdown-item {% active_link views='users_index' %}"
-                    href="{% url 'users_index' %}">{% translate 'Users' %}</a></li>
-            <li>
-              <a class="dropdown-item"
-                 href="{% url 'admin:index' %}"
-                 hx-boost="false"
-                 data-tippy-placement="right"
-                 data-tippy-content="{% translate "Only use this if you know what you're doing" %}">
-                {% translate 'Django Admin' %}
-              </a>
-            </li>
-            {% endif %}
-          </ul>
-        </li>
-      </ul>
-      <ul class="navbar-nav mb-2 mb-lg-0 gap-3">
-        {% get_update_check as update_check %}
-        {% if update_check.update_available %}
-        <li class="nav-item my-auto">
-          <a class="badge text-bg-secondary text-decoration-none cursor-pointer" href="https://github.com/eitchtee/WYGIWYH/releases/latest" target="_blank"><i class="fa-solid fa-circle-info fa-fw me-2"></i>v.{{ update_check.latest_version }} {% translate 'is available' %}!</a>
-        </li>
-        {% endif %}
-        <li class="nav-item">
-          <div class="nav-link lg:text-2xl! cursor-pointer"
-             data-tippy-placement="left" data-tippy-content="{% trans "Calculator" %}"
-             _="on click trigger show on #calculator">
-            <i class="fa-solid fa-calculator"></i>
-            <span class="d-lg-none d-inline">{% trans "Calculator" %}</span>
-          </div>
-        </li>
-        <li class="w-100">{% include 'includes/navbar/user_menu.html' %}</li>
-      </ul>
-    </div>
-  </div>
-</nav>

app/templates/includes/scripts/hyperscript/htmx_error_handler.html

@@ -10,9 +10,9 @@ behavior htmx_error_handler
         icon: 'warning',
         timer: 60000,
         customClass: {
-          confirmButton: 'btn btn-warning' -- Optional: different button style
+          confirmButton: 'btn btn-warning'
         },
-        buttonsStyling: true
+        buttonsStyling: false
       })
     else
       call Swal.fire({
@@ -23,7 +23,7 @@ behavior htmx_error_handler
         customClass: {
           confirmButton: 'btn btn-primary'
         },
-        buttonsStyling: true
+        buttonsStyling: false
       })
     end
     then log event

app/templates/includes/sidebar.html

@@ -135,138 +135,105 @@
 
       <c-components.sidebar-menu-header title=""></c-components.sidebar-menu-header>
 
-      <div role="button"
-           data-bs-toggle="collapse"
-           data-bs-target="#collapsible-panel"
-           aria-expanded="false"
-           aria-controls="collapsible-panel"
-           class="text-xs flex items-center no-underline ps-3 p-2 rounded-box sidebar-item cursor-pointer {% active_link views='tags_index||entities_index||categories_index||accounts_index||account_groups_index||currencies_index||exchange_rates_index||rules_index||import_profiles_index||automatic_exchange_rates_index||export_index||users_index' css_class="sidebar-active" %}">
-        <i class="fa-solid fa-toolbox fa-fw"></i>
-        <span class="ml-3 font-medium lg:group-hover:truncate lg:group-focus:truncate lg:group-hover:text-ellipsis lg:group-focus:text-ellipsis">
-          {% translate 'Management' %}
-        </span>
-        <i class="fa-solid fa-chevron-right fa-fw ml-auto pe-2"></i>
-      </div>
+      <c-components.sidebar-collapsible-panel
+          title="{% translate 'Management' %}"
+          icon="fa-solid fa-toolbox"
+          active="tags_index||entities_index||categories_index||accounts_index||account_groups_index||currencies_index||exchange_rates_index||rules_index||import_profiles_index||automatic_exchange_rates_index||export_index||users_index">
+        <c-components.sidebar-menu-header title="{% translate 'Transactions' %}"></c-components.sidebar-menu-header>
+        <c-components.sidebar-menu-item
+            title="{% translate 'Categories' %}"
+            url='categories_index'
+            active="categories_index"
+            icon="fa-solid fa-icons">
+        </c-components.sidebar-menu-item>
+        <c-components.sidebar-menu-item
+            title="{% translate 'Tags' %}"
+            url='tags_index'
+            active="tags_index"
+            icon="fa-solid fa-hashtag">
+        </c-components.sidebar-menu-item>
+        <c-components.sidebar-menu-item
+            title="{% translate 'Entities' %}"
+            url='entities_index'
+            active="entities_index"
+            icon="fa-solid fa-user-group">
+        </c-components.sidebar-menu-item>
+
+        <c-components.sidebar-menu-header title="{% translate 'Accounts' %}"></c-components.sidebar-menu-header>
+        <c-components.sidebar-menu-item
+            title="{% translate 'Accounts' %}"
+            url='accounts_index'
+            active="accounts_index"
+            icon="fa-solid fa-wallet">
+        </c-components.sidebar-menu-item>
+        <c-components.sidebar-menu-item
+            title="{% translate 'Account Groups' %}"
+            url='account_groups_index'
+            active="account_groups_index"
+            icon="fa-solid fa-wallet">
+        </c-components.sidebar-menu-item>
+
+        <c-components.sidebar-menu-header title="{% translate 'Currencies' %}"></c-components.sidebar-menu-header>
+        <c-components.sidebar-menu-item
+            title="{% translate 'Currencies' %}"
+            url='currencies_index'
+            active="currencies_index"
+            icon="fa-solid fa-coins">
+        </c-components.sidebar-menu-item>
+        <c-components.sidebar-menu-item
+            title="{% translate 'Exchange Rates' %}"
+            url='exchange_rates_index'
+            active="exchange_rates_index"
+            icon="fa-solid fa-right-left">
+        </c-components.sidebar-menu-item>
+
+        <c-components.sidebar-menu-header title="{% translate 'Automation' %}"></c-components.sidebar-menu-header>
+        <c-components.sidebar-menu-item
+            title="{% translate 'Rules' %}"
+            url='rules_index'
+            active="rules_index"
+            icon="fa-solid fa-pen-ruler">
+        </c-components.sidebar-menu-item>
+        <c-components.sidebar-menu-item
+            title="{% translate 'Import' %}"
+            url='import_profiles_index'
+            active="import_profiles_index"
+            icon="fa-solid fa-file-import">
+        </c-components.sidebar-menu-item>
+        {% if user.is_superuser %}
+          <c-components.sidebar-menu-item
+              title="{% translate 'Export and Restore' %}"
+              url='export_index'
+              active="export_index"
+              icon="fa-solid fa-file-export">
+          </c-components.sidebar-menu-item>
+        {% endif %}
+        <c-components.sidebar-menu-item
+            title="{% translate 'Automatic Exchange Rates' %}"
+            url='automatic_exchange_rates_index'
+            active="automatic_exchange_rates_index"
+            icon="fa-solid fa-right-left">
+        </c-components.sidebar-menu-item>
+
+        {% if user.is_superuser %}
+          <c-components.sidebar-menu-header title="{% translate 'Admin' %}"></c-components.sidebar-menu-header>
+          <c-components.sidebar-menu-item
+              title="{% translate 'Users' %}"
+              url='users_index'
+              active="users_index"
+              icon="fa-solid fa-users">
+          </c-components.sidebar-menu-item>
+          <c-components.sidebar-menu-url-item
+              title="{% translate 'Django Admin' %}"
+              tooltip="{% translate "Only use this if you know what you're doing" %}"
+              url='/admin/'
+              icon="fa-solid fa-screwdriver-wrench">
+          </c-components.sidebar-menu-url-item>
+        {% endif %}
+      </c-components.sidebar-collapsible-panel>
     </ul>
 
     <div class="mt-auto p-2 w-full">
-      <div id="collapsible-panel"
-           class="bs collapse p-0 absolute bottom-0 left-0 w-full z-30 max-h-dvh {% active_link views='tags_index||entities_index||categories_index||accounts_index||account_groups_index||currencies_index||exchange_rates_index||rules_index||import_profiles_index||automatic_exchange_rates_index||export_index||users_index' css_class="show" %}">
-        <div class="h-dvh bg-base-300 flex flex-col">
-          <div
-              class="items-center p-4 border-b border-base-content/10 sidebar-submenu-header text-base-content">
-            <div class="flex items-center sidebar-submenu-title">
-              <i class="fa-solid fa-toolbox fa-fw lg:group-hover:me-2 me-2 lg:me-0"></i>
-              <h5 class="text-lg font-semibold text-base-content m-0">
-                {% trans 'Management' %}
-              </h5>
-            </div>
-
-            <button type="button" class="btn btn-ghost btn-sm btn-circle" aria-label="{% trans 'Close' %}"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#collapsible-panel"
-                    aria-expanded="true"
-                    aria-controls="collapsible-panel">
-              <i class="fa-solid fa-xmark"></i>
-            </button>
-          </div>
-
-          <ul class="sidebar-item-list list-none p-3 flex flex-col gap-1 whitespace-nowrap lg:group-hover:animate-[disable-pointer-events] overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto overflow-x-hidden"
-              style="animation-duration: 100ms">
-            <c-components.sidebar-menu-header title="{% translate 'Transactions' %}"></c-components.sidebar-menu-header>
-            <c-components.sidebar-menu-item
-                title="{% translate 'Categories' %}"
-                url='categories_index'
-                active="categories_index"
-                icon="fa-solid fa-icons">
-            </c-components.sidebar-menu-item>
-            <c-components.sidebar-menu-item
-                title="{% translate 'Tags' %}"
-                url='tags_index'
-                active="tags_index"
-                icon="fa-solid fa-hashtag">
-            </c-components.sidebar-menu-item>
-            <c-components.sidebar-menu-item
-                title="{% translate 'Entities' %}"
-                url='entities_index'
-                active="entities_index"
-                icon="fa-solid fa-user-group">
-            </c-components.sidebar-menu-item>
-
-            <c-components.sidebar-menu-header title="{% translate 'Accounts' %}"></c-components.sidebar-menu-header>
-            <c-components.sidebar-menu-item
-                title="{% translate 'Accounts' %}"
-                url='accounts_index'
-                active="accounts_index"
-                icon="fa-solid fa-wallet">
-            </c-components.sidebar-menu-item>
-            <c-components.sidebar-menu-item
-                title="{% translate 'Account Groups' %}"
-                url='account_groups_index'
-                active="account_groups_index"
-                icon="fa-solid fa-wallet">
-            </c-components.sidebar-menu-item>
-
-            <c-components.sidebar-menu-header title="{% translate 'Currencies' %}"></c-components.sidebar-menu-header>
-            <c-components.sidebar-menu-item
-                title="{% translate 'Currencies' %}"
-                url='currencies_index'
-                active="currencies_index"
-                icon="fa-solid fa-coins">
-            </c-components.sidebar-menu-item>
-            <c-components.sidebar-menu-item
-                title="{% translate 'Exchange Rates' %}"
-                url='exchange_rates_index'
-                active="exchange_rates_index"
-                icon="fa-solid fa-right-left">
-            </c-components.sidebar-menu-item>
-
-            <c-components.sidebar-menu-header title="{% translate 'Automation' %}"></c-components.sidebar-menu-header>
-            <c-components.sidebar-menu-item
-                title="{% translate 'Rules' %}"
-                url='rules_index'
-                active="rules_index"
-                icon="fa-solid fa-pen-ruler">
-            </c-components.sidebar-menu-item>
-            <c-components.sidebar-menu-item
-                title="{% translate 'Import' %}"
-                url='import_profiles_index'
-                active="import_profiles_index"
-                icon="fa-solid fa-file-import">
-            </c-components.sidebar-menu-item>
-            {% if user.is_superuser %}
-              <c-components.sidebar-menu-item
-                  title="{% translate 'Export and Restore' %}"
-                  url='export_index'
-                  active="export_index"
-                  icon="fa-solid fa-file-export">
-              </c-components.sidebar-menu-item>
-            {% endif %}
-            <c-components.sidebar-menu-item
-                title="{% translate 'Automatic Exchange Rates' %}"
-                url='automatic_exchange_rates_index'
-                active="automatic_exchange_rates_index"
-                icon="fa-solid fa-right-left">
-            </c-components.sidebar-menu-item>
-
-            {% if user.is_superuser %}
-              <c-components.sidebar-menu-header title="{% translate 'Admin' %}"></c-components.sidebar-menu-header>
-              <c-components.sidebar-menu-item
-                  title="{% translate 'Users' %}"
-                  url='users_index'
-                  active="users_index"
-                  icon="fa-solid fa-users">
-              </c-components.sidebar-menu-item>
-              <c-components.sidebar-menu-url-item
-                  title="{% translate 'Django Admin' %}"
-                  tooltip="{% translate "Only use this if you know what you're doing" %}"
-                  url='/admin/'
-                  icon="fa-solid fa-screwdriver-wrench">
-              </c-components.sidebar-menu-url-item>
-            {% endif %}
-          </ul>
-        </div>
-      </div>
       {% get_update_check as update_check %}
       {% if update_check.update_available %}
         <div class="my-3 sidebar-item">

app/templates/layouts/base.html

@@ -5,52 +5,53 @@
 {% load title %}
 <!DOCTYPE html>
 <html lang="en"
-      data-theme="{% if request.session.theme == 'wygiwyh_light' %}wygiwyh_light{% else %}wygiwyh_dark{% endif %}">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>
-      {% filter site_title %}
-        {% block title %}
-        {% endblock title %}
-      {% endfilter %}
-    </title>
-    {% include 'includes/head/favicons.html' %}
-    {% progressive_web_app_meta %}
-    {#  {% include 'includes/styles.html' %}#}
-    {% block extra_styles %}{% endblock %}
-    {% include 'includes/scripts.html' %}
-    {% block extra_js_head %}{% endblock %}
-  </head>
-  <body class="font-mono">
-    <div _="install htmx_error_handler
-            {% block body_hyperscript %}{% endblock %}"
-         hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
-      {% include 'includes/mobile_navbar.html' %}
-      {% include 'includes/sidebar.html' %}
-      <main class="my-8 px-3">
-        {% settings "DEMO" as demo_mode %}
-        {% if demo_mode %}
-          <div class="px-3 m-0" id="demo-mode-alert" hx-preserve>
-            <div class="alert alert-warning my-3" role="alert">
-              <strong>{% trans "This is a demo!" %}</strong> {% trans "Any data you add here will be wiped in 24hrs or less" %}
-              <button type="button"
-                      class="btn btn-sm btn-ghost absolute right-2 top-2"
-                      onclick="this.parentElement.style.display='none'"
-                      aria-label="Close">✕</button>
-            </div>
-          </div>
-        {% endif %}
-        <div id="content">
-          {% block content %}
-          {% endblock content %}
+  data-theme="{% if request.session.theme == 'wygiwyh_light' %}wygiwyh_light{% else %}wygiwyh_dark{% endif %}">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>
+    {% filter site_title %}
+    {% block title %}
+    {% endblock title %}
+    {% endfilter %}
+  </title>
+  {% include 'includes/head/favicons.html' %}
+  {% progressive_web_app_meta %}
+  {# {% include 'includes/styles.html' %}#}
+  {% block extra_styles %}{% endblock %}
+  {% include 'includes/scripts.html' %}
+  {% block extra_js_head %}{% endblock %}
+</head>
+
+<body class="font-mono">
+  <div _="install htmx_error_handler
+            {% block body_hyperscript %}{% endblock %}" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+    {% include 'includes/mobile_navbar.html' %}
+    {% include 'includes/sidebar.html' %}
+    <main class="my-8 px-3">
+      {% settings "DEMO" as demo_mode %}
+      {% if demo_mode %}
+      <div class="px-3 m-0" id="demo-mode-alert" hx-preserve>
+        <div class="alert alert-warning my-3 relative" role="alert">
+          <strong>{% trans "This is a demo!" %}</strong> {% trans "Any data you add here will be wiped in 24hrs or less"
+          %}
+          <button type="button" class="btn btn-sm btn-ghost absolute right-2 top-1/2 -translate-y-1/2"
+            onclick="this.parentElement.style.display='none'" aria-label="Close">✕</button>
         </div>
-        {% include "includes/offcanvas.html" %}
-        {% include "includes/toasts.html" %}
-      </main>
-    </div>
-    {% include "includes/tools/calculator.html" %}
-    {% block extra_js_body %}
-    {% endblock extra_js_body %}
-  </body>
-</html>
+      </div>
+      {% endif %}
+      <div id="content">
+        {% block content %}
+        {% endblock content %}
+      </div>
+      {% include "includes/offcanvas.html" %}
+      {% include "includes/toasts.html" %}
+    </main>
+  </div>
+  {% include "includes/tools/calculator.html" %}
+  {% block extra_js_body %}
+  {% endblock extra_js_body %}
+</body>
+
+</html>

app/templates/monthly_overview/fragments/list.html

@@ -5,33 +5,19 @@
 <div id="transactions-list">
   {% for x in transactions_by_date %}
     <div id="{{ x.grouper|slugify }}" class="transactions-divider"
-         _="on htmx:afterSwap from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
+         x-data="{ open: sessionStorage.getItem('{{ x.grouper|slugify }}') !== 'false' }"
+         x-init="if (sessionStorage.getItem('{{ x.grouper|slugify }}') === null) sessionStorage.setItem('{{ x.grouper|slugify }}', 'true')">
       <div class="mt-3 mb-1 w-full border-b border-b-base-content/30 transactions-divider-title cursor-pointer">
         <a class="no-underline inline-block w-full"
            role="button"
-           data-bs-toggle="collapse"
-           data-bs-target="#c-{{ x.grouper|slugify }}-collapse"
-           id="c-{{ x.grouper|slugify }}-collapsible"
-           aria-expanded="false"
-           aria-controls="c-{{ x.grouper|slugify }}-collapse">
+           @click="open = !open; sessionStorage.setItem('{{ x.grouper|slugify }}', open)"
+           :aria-expanded="open">
         {{ x.grouper }}
         </a>
       </div>
-      <div class="bs collapse transactions-divider-collapse overflow-visible isolation-auto" id="c-{{ x.grouper|slugify }}-collapse"
-           _="on shown.bs.collapse sessionStorage.setItem(the closest parent @id, 'true')
-              on hidden.bs.collapse sessionStorage.setItem(the closest parent @id, 'false')
-              on htmx:afterSettle from #transactions or toggle
-                set state to sessionStorage.getItem(the closest parent @id)
-                if state is 'true' or state is null
-                  add .show to me
-                  set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true
-                else
-                  remove .show from me
-                  set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to false
-                end
-              on show
-                add .show to me
-                set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true">
+      <div class="transactions-divider-collapse overflow-visible isolation-auto"
+           x-show="open"
+           x-collapse>
         <div class="flex flex-col">
         {% for transaction in x.list %}
           <c-transaction.item

app/templates/monthly_overview/pages/overview.html

@@ -89,7 +89,7 @@
       </div>
       <div class="col-12 lg:col-8 lg:order-first! order-last!">
 
-        <div class="my-3">
+        <div class="my-3" x-data="{ filterOpen: false }" hx-preserve id="filter-container">
           {# Hidden select to hold the order value and preserve the original update trigger #}
           <select name="order" id="order" class="d-none" _="on change trigger updated on window">
             <option value="default" {% if order == 'default' %}selected{% endif %}>{% translate 'Default' %}</option>
@@ -101,8 +101,8 @@
           <div class="join w-full">
 
             <button class="btn btn-secondary join-item relative" type="button"
-                    data-bs-toggle="collapse" data-bs-target="#collapse-filter"
-                    aria-expanded="false" aria-controls="collapse-filter" id="filter-button" hx-preserve
+                    @click="filterOpen = !filterOpen"
+                    :aria-expanded="filterOpen" id="filter-button"
                     title="{% translate 'Filter transactions' %}">
               <i class="fa-solid fa-filter fa-fw"></i>
             </button>
@@ -113,7 +113,6 @@
             <input type="search"
                    class="input input-bordered join-item flex-1"
                    placeholder="{% translate 'Search' %}"
-                   hx-preserve
                    id="quick-search"
                    _="on input or search or htmx:afterSwap from window
                          if my value is empty
@@ -165,7 +164,7 @@
           </div>
 
           {# Filter transactions form #}
-          <div class="bs collapse z-1" id="collapse-filter" hx-preserve>
+          <div class="z-1" x-show="filterOpen" x-collapse>
             <div class="card card-body bg-base-200 mt-2">
               <div class="text-right">
                 <button class="btn btn-outline btn-error btn-sm w-fit"

app/templates/rules/fragments/list.html

@@ -64,13 +64,13 @@
                   </div>
                 </td>
                 <td class="table-col-auto">
-                  <a class="no-underline"
+                  <a class="no-underline cursor-pointer"
                      role="button"
                      data-tippy-content="
                        {% 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 text-green-400"></i>{% else %}
-                      <i class="fa-solid fa-toggle-off text-red-400"></i>{% endif %}
+                    {% if rule.active %}<i class="fa-solid fa-toggle-on text-success"></i>{% else %}
+                      <i class="fa-solid fa-toggle-off text-error"></i>{% endif %}
                   </a>
                 </td>
                 <td class="table-col-auto text-center">

app/templates/rules/fragments/transaction_rule/view.html

@@ -110,8 +110,7 @@
         </div>
       {% endfor %}
       </div>
-      <hr class="hr my-5">
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-5">
         <div class="dropdown">
           <button class="btn btn-secondary w-full" type="button" data-bs-toggle="dropdown"
                   aria-expanded="false">
@@ -138,7 +137,7 @@
         <div class="dropdown">
           <button class="btn btn-primary w-full" type="button" data-bs-toggle="dropdown"
                   aria-expanded="false">
-            <i class="fa-solid fa-circle-plus me-2"></i>{% translate 'Add new' %}
+            <i class="fa-solid fa-circle-plus me-2"></i>{% translate 'Add new action' %}
           </button>
           <ul class="dropdown-menu menu">
             <li><a role="link" href="#"

app/templates/transactions/fragments/list_all.html

@@ -5,33 +5,19 @@
 <div id="transactions-list" class="show-loading">
   {% for x in transactions_by_date %}
     <div id="{{ x.grouper|slugify }}" class="transactions-divider"
-         _="on htmx:afterSwap from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
+         x-data="{ open: sessionStorage.getItem('{{ x.grouper|slugify }}') !== 'false' }"
+         x-init="if (sessionStorage.getItem('{{ x.grouper|slugify }}') === null) sessionStorage.setItem('{{ x.grouper|slugify }}', 'true')">
       <div class="mt-3 mb-1 w-full border-b border-b-base-content/30 transactions-divider-title cursor-pointer">
         <a class="no-underline inline-block w-full"
            role="button"
-           data-bs-toggle="collapse"
-           data-bs-target="#c-{{ x.grouper|slugify }}-collapse"
-           id="c-{{ x.grouper|slugify }}-collapsible"
-           aria-expanded="false"
-           aria-controls="c-{{ x.grouper|slugify }}-collapse">
+           @click="open = !open; sessionStorage.setItem('{{ x.grouper|slugify }}', open)"
+           :aria-expanded="open">
         {{ x.grouper }}
         </a>
       </div>
-      <div class="bs collapse transactions-divider-collapse overflow-visible isolation-auto" id="c-{{ x.grouper|slugify }}-collapse"
-           _="on shown.bs.collapse sessionStorage.setItem(the closest parent @id, 'true')
-              on hidden.bs.collapse sessionStorage.setItem(the closest parent @id, 'false')
-              on htmx:afterSettle from #transactions or toggle
-                set state to sessionStorage.getItem(the closest parent @id)
-                if state is 'true' or state is null
-                  add .show to me
-                  set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true
-                else
-                  remove .show from me
-                  set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to false
-                end
-              on show
-                add .show to me
-                set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true">
+      <div class="transactions-divider-collapse overflow-visible isolation-auto"
+           x-show="open"
+           x-collapse>
         <div class="flex flex-col">
         {% for transaction in x.list %}
           <c-transaction.item

app/templates/transactions/pages/transactions.html

@@ -41,7 +41,7 @@
       </div>
       <div class="col-12 lg:col-8 lg:order-first! order-last!">
 
-        <div>
+        <div x-data="{ filterOpen: false }" hx-preserve id="filter-container">
           {# Hidden select to hold the order value and preserve the original update trigger #}
           <select name="order" id="order" class="d-none" _="on change trigger updated on window">
             <option value="default" {% if order == 'default' %}selected{% endif %}>{% translate 'Default' %}</option>
@@ -53,8 +53,8 @@
           <div class="join w-full">
 
             <button class="btn btn-secondary join-item relative" type="button"
-                    data-bs-toggle="collapse" data-bs-target="#collapse-filter"
-                    aria-expanded="false" aria-controls="collapse-filter" id="filter-button" hx-preserve
+                    @click="filterOpen = !filterOpen"
+                    :aria-expanded="filterOpen" id="filter-button"
                     title="{% translate 'Filter transactions' %}">
               <i class="fa-solid fa-filter fa-fw"></i>
             </button>
@@ -65,7 +65,6 @@
             <input type="search"
                    class="input input-bordered join-item flex-1"
                    placeholder="{% translate 'Search' %}"
-                   hx-preserve
                    id="quick-search"
                    _="on input or search or htmx:afterSwap from window
                          if my value is empty
@@ -118,7 +117,7 @@
           </div>
 
           {# Filter transactions form #}
-          <div class="bs collapse z-1" id="collapse-filter" hx-preserve>
+          <div class="z-1" x-show="filterOpen" x-collapse>
             <div class="card card-body bg-base-200 mt-2">
               <div class="text-right">
                 <button class="btn btn-outline btn-error btn-sm w-fit"

docker-compose.prod.yml

@@ -11,7 +11,7 @@ services:
     restart: unless-stopped
 
   db:
-    image: postgres:15
+    image: postgres:15-bookworm
     container_name: ${DB_NAME}
     restart: unless-stopped
     volumes:

docker/prod/django/Dockerfile

@@ -74,5 +74,6 @@ RUN chown -R app:app /usr/src/app && \
 USER app
 
 RUN python manage.py compilemessages --settings "WYGIWYH.settings"
+RUN python manage.py collectstatic --noinput
 
 CMD ["/start-single"]

docker/prod/django/start

@@ -10,7 +10,6 @@ INTERNAL_PORT=${INTERNAL_PORT:-8000}
 # Remove flag file if it exists from previous run
 rm -f /tmp/migrations_complete
 
-python manage.py collectstatic --noinput
 python manage.py migrate
 
 # Create flag file to signal migrations are complete

frontend/src/js/bootstrap.js

@@ -2,7 +2,6 @@ import './_tooltip.js';
 import 'bootstrap/js/dist/dropdown';
 import Toast from 'bootstrap/js/dist/toast';
 import 'bootstrap/js/dist/dropdown';
-import 'bootstrap/js/dist/collapse';
 import Offcanvas from 'bootstrap/js/dist/offcanvas';
 
 window.Offcanvas = Offcanvas;

frontend/src/js/datepicker.js

@@ -1,5 +1,5 @@
 import AirDatepicker from 'air-datepicker';
-import {createPopper} from '@popperjs/core';
+import { createPopper } from '@popperjs/core';
 import '../styles/_datepicker.scss'
 
 // --- Static Locale Imports ---
@@ -40,58 +40,58 @@ import localeZh from 'air-datepicker/locale/zh.js';
 
 // Map language codes to their imported locale objects
 const allLocales = {
-  'ar': localeAr,
-  'bg': localeBg,
-  'ca': localeCa,
-  'cs': localeCs,
-  'da': localeDa,
-  'de': localeDe,
-  'el': localeEl,
-  'en': localeEn,
-  'es': localeEs,
-  'eu': localeEu,
-  'fi': localeFi,
-  'fr': localeFr,
-  'hr': localeHr,
-  'hu': localeHu,
-  'id': localeId,
-  'it': localeIt,
-  'ja': localeJa,
-  'ko': localeKo,
-  'nb': localeNb,
-  'nl': localeNl,
-  'pl': localePl,
-  'pt-BR': localePtBr,
-  'pt': localePt,
-  'ro': localeRo,
-  'ru': localeRu,
-  'si': localeSi,
-  'sk': localeSk,
-  'sl': localeSl,
-  'sv': localeSv,
-  'th': localeTh,
-  'tr': localeTr,
-  'uk': localeUk,
-  'zh': localeZh
+    'ar': localeAr,
+    'bg': localeBg,
+    'ca': localeCa,
+    'cs': localeCs,
+    'da': localeDa,
+    'de': localeDe,
+    'el': localeEl,
+    'en': localeEn,
+    'es': localeEs,
+    'eu': localeEu,
+    'fi': localeFi,
+    'fr': localeFr,
+    'hr': localeHr,
+    'hu': localeHu,
+    'id': localeId,
+    'it': localeIt,
+    'ja': localeJa,
+    'ko': localeKo,
+    'nb': localeNb,
+    'nl': localeNl,
+    'pl': localePl,
+    'pt-BR': localePtBr,
+    'pt': localePt,
+    'ro': localeRo,
+    'ru': localeRu,
+    'si': localeSi,
+    'sk': localeSk,
+    'sl': localeSl,
+    'sv': localeSv,
+    'th': localeTh,
+    'tr': localeTr,
+    'uk': localeUk,
+    'zh': localeZh
 };
 // --- End of Locale Imports ---
 
 
 /**
- * Selects a pre-imported language file from the locale map.
- *
- * @param {string} langCode - The two-letter language code (e.g., 'en', 'es').
- * @returns {Promise<object>} A promise that resolves with the locale object.
- */
+ * Selects a pre-imported language file from the locale map.
+ *
+ * @param {string} langCode - The two-letter language code (e.g., 'en', 'es').
+ * @returns {Promise<object>} A promise that resolves with the locale object.
+ */
 export const getLocale = async (langCode) => {
-  const locale = allLocales[langCode];
+    const locale = allLocales[langCode];
 
-  if (locale) {
-    return locale;
-  }
+    if (locale) {
+        return locale;
+    }
 
-  console.warn(`Could not find locale for '${langCode}'. Defaulting to English.`);
-  return allLocales['en']; // Default to English
+    console.warn(`Could not find locale for '${langCode}'. Defaulting to English.`);
+    return allLocales['en']; // Default to English
 };
 
 function isMobileDevice() {
@@ -112,7 +112,7 @@ window.DatePicker = async function createDynamicDatePicker(element) {
         content: element.dataset.nowButtonTxt,
         onClick: (dp) => {
             let date = new Date();
-            dp.selectDate(date, {updateTime: true});
+            dp.selectDate(date, { updateTime: true });
             dp.setViewDate(date);
         }
     };
@@ -126,16 +126,18 @@ window.DatePicker = async function createDynamicDatePicker(element) {
         autoClose: element.dataset.autoClose === 'true',
         buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton],
         locale: await getLocale(element.dataset.language),
-        onSelect: ({date, formattedDate, datepicker}) => {
+        onSelect: ({ date, formattedDate, datepicker }) => {
             const _event = new CustomEvent("change", {
                 bubbles: true,
             });
             datepicker.$el.dispatchEvent(_event);
         }
     };
+    // Store popper instance for updating on view changes
+    let popperInstance = null;
     const positionConfig = !isOnMobile ? {
-        position({$datepicker, $target, $pointer, done}) {
-            let popper = createPopper($target, $datepicker, {
+        position({ $datepicker, $target, $pointer, done }) {
+            popperInstance = createPopper($target, $datepicker, {
                 placement: 'bottom',
                 modifiers: [
                     {
@@ -157,16 +159,24 @@ window.DatePicker = async function createDynamicDatePicker(element) {
                         options: {
                             element: $pointer
                         }
-                     }
+                    }
                 ]
             });
             return function completeHide() {
-                popper.destroy();
+                popperInstance.destroy();
+                popperInstance = null;
                 done();
             };
+        },
+        onChangeView() {
+            // Update popper position when view changes (e.g., clicking year)
+            // Use setTimeout to allow the DOM to update before recalculating
+            if (popperInstance) {
+                setTimeout(() => popperInstance.update(), 0);
+            }
         }
     } : {};
-    let opts = {...baseOpts, ...positionConfig};
+    let opts = { ...baseOpts, ...positionConfig };
     if (element.dataset.value) {
         opts["selectedDates"] = [element.dataset.value];
         opts["startDate"] = [element.dataset.value];
@@ -179,7 +189,7 @@ window.MonthYearPicker = async function createDynamicDatePicker(element) {
         content: element.dataset.nowButtonTxt,
         onClick: (dp) => {
             let date = new Date();
-            dp.selectDate(date, {updateTime: true});
+            dp.selectDate(date, { updateTime: true });
             dp.setViewDate(date);
         }
     };
@@ -193,16 +203,18 @@ window.MonthYearPicker = async function createDynamicDatePicker(element) {
         autoClose: element.dataset.autoClose === 'true',
         buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton],
         locale: await getLocale(element.dataset.language),
-        onSelect: ({date, formattedDate, datepicker}) => {
+        onSelect: ({ date, formattedDate, datepicker }) => {
             const _event = new CustomEvent("change", {
                 bubbles: true,
             });
             datepicker.$el.dispatchEvent(_event);
         }
     };
+    // Store popper instance for updating on view changes
+    let popperInstance = null;
     const positionConfig = !isOnMobile ? {
-        position({$datepicker, $target, $pointer, done}) {
-            let popper = createPopper($target, $datepicker, {
+        position({ $datepicker, $target, $pointer, done }) {
+            popperInstance = createPopper($target, $datepicker, {
                 placement: 'bottom',
                 modifiers: [
                     {
@@ -228,12 +240,19 @@ window.MonthYearPicker = async function createDynamicDatePicker(element) {
                 ]
             });
             return function completeHide() {
-                popper.destroy();
+                popperInstance.destroy();
+                popperInstance = null;
                 done();
             };
+        },
+        onChangeView() {
+            // Update popper position when view changes (e.g., clicking year)
+            if (popperInstance) {
+                setTimeout(() => popperInstance.update(), 0);
+            }
         }
     } : {};
-    let opts = {...baseOpts, ...positionConfig};
+    let opts = { ...baseOpts, ...positionConfig };
     if (element.dataset.value) {
         opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")];
         opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")];
@@ -246,7 +265,7 @@ window.YearPicker = async function createDynamicDatePicker(element) {
         content: element.dataset.nowButtonTxt,
         onClick: (dp) => {
             let date = new Date();
-            dp.selectDate(date, {updateTime: true});
+            dp.selectDate(date, { updateTime: true });
             dp.setViewDate(date);
         }
     };
@@ -260,16 +279,18 @@ window.YearPicker = async function createDynamicDatePicker(element) {
         autoClose: element.dataset.autoClose === 'true',
         buttons: element.dataset.clearButton === 'true' ? ['clear', todayButton] : [todayButton],
         locale: await getLocale(element.dataset.language),
-        onSelect: ({date, formattedDate, datepicker}) => {
+        onSelect: ({ date, formattedDate, datepicker }) => {
             const _event = new CustomEvent("change", {
                 bubbles: true,
             });
             datepicker.$el.dispatchEvent(_event);
         }
     };
+    // Store popper instance for updating on view changes
+    let popperInstance = null;
     const positionConfig = !isOnMobile ? {
-        position({$datepicker, $target, $pointer, done}) {
-            let popper = createPopper($target, $datepicker, {
+        position({ $datepicker, $target, $pointer, done }) {
+            popperInstance = createPopper($target, $datepicker, {
                 placement: 'bottom',
                 modifiers: [
                     {
@@ -295,12 +316,19 @@ window.YearPicker = async function createDynamicDatePicker(element) {
                 ]
             });
             return function completeHide() {
-                popper.destroy();
+                popperInstance.destroy();
+                popperInstance = null;
                 done();
             };
+        },
+        onChangeView() {
+            // Update popper position when view changes (e.g., clicking year)
+            if (popperInstance) {
+                setTimeout(() => popperInstance.update(), 0);
+            }
         }
     } : {};
-    let opts = {...baseOpts, ...positionConfig};
+    let opts = { ...baseOpts, ...positionConfig };
     if (element.dataset.value) {
         opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")];
         opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")];

frontend/src/styles/_animations.scss

@@ -56,6 +56,22 @@
   animation: slide-in-left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 
+@keyframes slide-out-left {
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.slide-out-left {
+  animation: slide-out-left 0.15s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+}
+
 // HTMX Loading
 @keyframes spin {
   0% {
@@ -248,6 +264,32 @@
   }
 }
 
+/**
+ * ----------------------------------------
+ * animation slide-in-bottom-short
+ * A variant with smaller translateY for elements at bottom of viewport
+ * ----------------------------------------
+ */
+@keyframes slide-in-bottom-short {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slide-in-bottom-short {
+  animation: slide-in-bottom-short 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.slide-in-bottom-short-reverse {
+  animation: slide-in-bottom-short 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
+}
+
 @keyframes disable-pointer-events {
 
   0%,

frontend/src/styles/_offcanvas.scss

@@ -323,4 +323,4 @@ $breakpoints: (
 
 .offcanvas-size-sm {
     --offcanvas-width: min(95vw, 250px);
-}
+}

frontend/src/styles/_transitions.scss

@@ -6,8 +6,6 @@ $enable-transitions: true !default;
 $enable-reduced-motion: true !default;
 
 $transition-fade: opacity 0.15s linear !default;
-$transition-collapse: height 0.35s ease !default;
-$transition-collapse-width: width 0.35s ease !default;
 
 // Fade transition
 .fade {
@@ -22,35 +20,4 @@ $transition-collapse-width: width 0.35s ease !default;
     &:not(.show) {
         opacity: 0;
     }
-}
-
-// // Collapse transitions
-.bs.collapse {
-    &:not(.show) {
-        display: none;
-    }
-}
-
-.bs.collapsing {
-    height: 0;
-    overflow: hidden;
-    transition: $transition-collapse;
-
-    @if $enable-reduced-motion {
-        @media (prefers-reduced-motion: reduce) {
-            transition: none;
-        }
-    }
-
-    &.collapse-horizontal {
-        width: 0;
-        height: auto;
-        transition: $transition-collapse-width;
-
-        @if $enable-reduced-motion {
-            @media (prefers-reduced-motion: reduce) {
-                transition: none;
-            }
-        }
-    }
 }

frontend/src/styles/style.scss

@@ -45,14 +45,6 @@ select {
   font-size: 14px;
 }
 
-[data-bs-toggle="collapse"] .fa-chevron-down {
-  transition: transform 0.25s ease-in-out;
-}
-
-[data-bs-toggle="collapse"][aria-expanded="true"] .fa-chevron-down {
-  transform: rotate(-180deg);
-}
-
 div:where(.swal2-container) {
   z-index: 1101 !important;
 }
@@ -85,4 +77,4 @@ div:where(.swal2-container) {
 
 [x-cloak] {
   display: none !important;
-}
+}

frontend/src/styles/tailwind.css

@@ -309,13 +309,15 @@
     }
 
     .sidebar-fixed {
-        /* Sets the fixed, expanded width for the container */
-        @apply lg:w-[17%] transition-all duration-100;
+        /* Sets the fixed, expanded width for the container.
+           Using fixed rem width instead of percentage to prevent width inconsistencies
+           caused by scrollbar presence affecting viewport width calculations. */
+        @apply lg:w-80 transition-all duration-100;
     }
 
     .sidebar-fixed #sidebar {
         /* Sets the fixed, expanded width for the inner navigation */
-        @apply lg:w-[17%] transition-all duration-100;
+        @apply lg:w-80 transition-all duration-100;
     }
 
     .sidebar-fixed .sidebar-item-list {
@@ -324,9 +326,7 @@
 
     .sidebar-fixed + main {
         /* Adjusts the main content margin to account for the expanded sidebar */
-        @apply lg:ml-[17%];
-
-        /* Using 16vw to account for padding/margins */
+        @apply lg:ml-80;
     }
 
     .sidebar-fixed .sidebar-item {