locale(Dutch): update translation

Currently translated at 100.0% (666 of 666 strings)

Translation: WYGIWYH/App
Translate-URL: https://translations.herculino.com/projects/wygiwyh/app/nl/

.env.example

@@ -31,3 +31,10 @@ ENABLE_SOFT_DELETE=false
 KEEP_DELETED_TRANSACTIONS_FOR=365
 
 TASK_WORKERS=1 # This only work if you're using the single container option. Increase to have more open queues via procrastinate, you probably don't need to increase this.
+
+# OIDC Configuration. Uncomment the lines below if you want to add OIDC login to your instance
+#OIDC_CLIENT_NAME=""
+#OIDC_CLIENT_ID=""
+#OIDC_CLIENT_SECRET=""
+#OIDC_SERVER_URL=""
+#OIDC_ALLOW_SIGNUP=true

README.md

@@ -29,15 +29,15 @@ Managing money can feel unnecessarily complex, but it doesn’t have to be. WYGI
 
 By sticking to this straightforward approach, you avoid dipping into your savings while still keeping tabs on where your money goes.
 
-While this philosophy is simple, finding tools to make it work wasn’t. I initially used a spreadsheet, which served me well for years—until it became unwieldy as I started managing multiple currencies, accounts, and investments. I tried various financial management apps, but none met my key requirements:
+While this philosophy is simple, finding tools to make it work wasn’t. I initially used a spreadsheet, which served me well for years, until it became unwieldy as I started managing multiple currencies, accounts, and investments. I tried various financial management apps, but none met my key requirements:
 
 1. **Multi-currency support** to track income and expenses in different currencies.
-2. **Not a budgeting app** — as I dislike budgeting constraints.
+2. **Not a budgeting app** as I dislike budgeting constraints.
 3. **Web app usability** (ideally with mobile support, though optional).
 4. **Automation-ready API** to integrate with other tools and services.
 5. **Custom transaction rules** for credit card billing cycles or similar quirks.
 
-Frustrated by the lack of comprehensive options, I set out to build **WYGIWYH** — an opinionated yet powerful tool that I believe will resonate with like-minded users.
+Frustrated by the lack of comprehensive options, I set out to build **WYGIWYH**, an opinionated yet powerful tool that I believe will resonate with like-minded users.
 
 # Key Features
 
@@ -144,6 +144,31 @@ To create the first user, open the container's console using Unraid's UI, by cli
 | ADMIN_EMAIL                   | string         | None                              | Automatically creates an admin account with this email. Must have `ADMIN_PASSWORD` also set.                                                                                                                                             |
 | ADMIN_PASSWORD                | string         | None                              | Automatically creates an admin account with this password. Must have `ADMIN_EMAIL` also set.                                                                                                                                             |
 
+## OIDC Configuration
+
+WYGIWYH supports login via OpenID Connect (OIDC) through `django-allauth`. This allows users to authenticate using an external OIDC provider.
+
+> [!NOTE]
+> Currently only OpenID Connect is supported as a provider, open an issue if you need something else.
+
+To configure OIDC, you need to set the following environment variables:
+
+| Variable             | Description                                                                                                                                                                                                                                            |
+|----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `OIDC_CLIENT_NAME`   | The name of the provider. will be displayed in the login page. Defaults to `OpenID Connect`                                                                                                                                                            |
+| `OIDC_CLIENT_ID`     | The Client ID provided by your OIDC provider.                                                                                                                                                                                                          |
+| `OIDC_CLIENT_SECRET` | The Client Secret provided by your OIDC provider.                                                                                                                                                                                                      |
+| `OIDC_SERVER_URL`    | The base URL of your OIDC provider's discovery document or authorization server (e.g., `https://your-provider.com/auth/realms/your-realm`). `django-allauth` will use this to discover the necessary endpoints (authorization, token, userinfo, etc.). |
+| `OIDC_ALLOW_SIGNUP`  | Allow the automatic creation of inexistent accounts on a successfull authentication. Defaults to `true`.                                                                                                                                               |
+
+**Callback URL (Redirect URI):**
+
+When configuring your OIDC provider, you will need to provide a callback URL (also known as a Redirect URI). For WYGIWYH, the default callback URL is:
+
+`https://your.wygiwyh.domain/auth/oidc/<OIDC_CLIENT_NAME>/login/callback/`
+
+Replace `https://your.wygiwyh.domain` with the actual URL where your WYGIWYH instance is accessible. And `<OIDC_CLIENT_NAME>` with the slugfied value set in OIDC_CLIENT_NAME or the default `openid-connect` if you haven't set this variable.
+
 # How it works
 
 Check out our [Wiki](https://github.com/eitchtee/WYGIWYH/wiki) for more information.

app/WYGIWYH/settings.py

@@ -14,6 +14,7 @@ import os
 import sys
 from pathlib import Path
 
+from django.utils.text import slugify
 
 SITE_TITLE = "WYGIWYH"
 TITLE_SEPARATOR = "::"
@@ -42,6 +43,7 @@ INSTALLED_APPS = [
     "django.contrib.contenttypes",
     "django.contrib.sessions",
     "django.contrib.messages",
+    "django.contrib.sites",
     "whitenoise.runserver_nostatic",
     "django.contrib.staticfiles",
     "webpack_boilerplate",
@@ -61,7 +63,6 @@ INSTALLED_APPS = [
     "apps.transactions.apps.TransactionsConfig",
     "apps.currencies.apps.CurrenciesConfig",
     "apps.accounts.apps.AccountsConfig",
-    "apps.common.apps.CommonConfig",
     "apps.net_worth.apps.NetWorthConfig",
     "apps.import_app.apps.ImportConfig",
     "apps.export_app.apps.ExportConfig",
@@ -74,8 +75,15 @@ INSTALLED_APPS = [
     "apps.calendar_view.apps.CalendarViewConfig",
     "apps.dca.apps.DcaConfig",
     "pwa",
+    "allauth",
+    "allauth.account",
+    "allauth.socialaccount",
+    "allauth.socialaccount.providers.openid_connect",
+    "apps.common.apps.CommonConfig",
 ]
 
+SITE_ID = 1
+
 MIDDLEWARE = [
     "django_browser_reload.middleware.BrowserReloadMiddleware",
     "apps.common.middleware.thread_local.ThreadLocalMiddleware",
@@ -91,6 +99,7 @@ MIDDLEWARE = [
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
     "hijack.middleware.HijackUserMiddleware",
+    "allauth.account.middleware.AccountMiddleware",
 ]
 
 ROOT_URLCONF = "WYGIWYH.urls"
@@ -307,6 +316,42 @@ DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 
 LOGIN_REDIRECT_URL = "/"
 LOGIN_URL = "/login/"
+LOGOUT_REDIRECT_URL = "/login/"
+
+# Allauth settings
+AUTHENTICATION_BACKENDS = [
+    "django.contrib.auth.backends.ModelBackend",  # Keep default
+    "allauth.account.auth_backends.AuthenticationBackend",
+]
+
+SOCIALACCOUNT_PROVIDERS = {"openid_connect": {"APPS": []}}
+
+if (
+    os.getenv("OIDC_CLIENT_ID")
+    and os.getenv("OIDC_CLIENT_SECRET")
+    and os.getenv("OIDC_SERVER_URL")
+):
+    SOCIALACCOUNT_PROVIDERS["openid_connect"]["APPS"].append(
+        {
+            "provider_id": slugify(os.getenv("OIDC_CLIENT_NAME", "OpenID Connect")),
+            "name": os.getenv("OIDC_CLIENT_NAME", "OpenID Connect"),
+            "client_id": os.getenv("OIDC_CLIENT_ID"),
+            "secret": os.getenv("OIDC_CLIENT_SECRET"),
+            "settings": {
+                "server_url": os.getenv("OIDC_SERVER_URL"),
+            },
+        }
+    )
+
+ACCOUNT_LOGIN_METHODS = {"email"}
+ACCOUNT_SIGNUP_FIELDS = ["email*", "password1*", "password2*"]
+ACCOUNT_USER_MODEL_USERNAME_FIELD = None
+ACCOUNT_EMAIL_VERIFICATION = "none"
+SOCIALACCOUNT_LOGIN_ON_GET = True
+SOCIALACCOUNT_ONLY = True
+SOCIALACCOUNT_AUTO_SIGNUP = os.getenv("OIDC_ALLOW_SIGNUP", "true").lower() == "true"
+ACCOUNT_ADAPTER = "allauth.account.adapter.DefaultAccountAdapter"
+SOCIALACCOUNT_ADAPTER = "allauth.socialaccount.adapter.DefaultSocialAccountAdapter"
 
 # CRISPY FORMS
 CRISPY_ALLOWED_TEMPLATE_PACKS = ["bootstrap5", "crispy_forms/pure_text"]

app/WYGIWYH/urls.py

@@ -21,6 +21,8 @@ from drf_spectacular.views import (
     SpectacularAPIView,
     SpectacularSwaggerView,
 )
+from allauth.socialaccount.providers.openid_connect.views import login, callback
+
 
 urlpatterns = [
     path("admin/", admin.site.urls),
@@ -36,6 +38,13 @@ urlpatterns = [
         SpectacularSwaggerView.as_view(url_name="schema"),
         name="swagger-ui",
     ),
+    path("auth/", include("allauth.urls")),  # allauth urls
+    # path("auth/oidc/<str:provider_id>/login/", login, name="openid_connect_login"),
+    # path(
+    #     "auth/oidc/<str:provider_id>/login/callback/",
+    #     callback,
+    #     name="openid_connect_callback",
+    # ),
     path("", include("apps.transactions.urls")),
     path("", include("apps.common.urls")),
     path("", include("apps.users.urls")),

app/apps/accounts/urls.py

@@ -51,7 +51,7 @@ urlpatterns = [
     ),
     path(
         "account-groups/<int:pk>/share/",
-        views.account_share,
+        views.account_group_share,
         name="account_group_share_settings",
     ),
 ]

app/apps/accounts/views/account_groups.py

@@ -145,7 +145,7 @@ def account_group_take_ownership(request, pk):
 @only_htmx
 @login_required
 @require_http_methods(["GET", "POST"])
-def account_share(request, pk):
+def account_group_share(request, pk):
     obj = get_object_or_404(AccountGroup, id=pk)
 
     if obj.owner and obj.owner != request.user:

app/apps/api/fields/transactions.py

@@ -41,7 +41,10 @@ class TransactionCategoryField(serializers.Field):
     def get_schema():
         return {
             "type": "array",
-            "items": {"type": "string", "description": "TransactionTag ID or name"},
+            "items": {
+                "type": "string",
+                "description": "TransactionCategory ID or name",
+            },
         }
 
 

app/apps/api/serializers/accounts.py

@@ -1,3 +1,4 @@
+from django.db.models import Q
 from rest_framework import serializers
 from rest_framework.permissions import IsAuthenticated
 
@@ -22,6 +23,7 @@ class AccountSerializer(serializers.ModelSerializer):
         write_only=True,
         allow_null=True,
     )
+
     currency = CurrencySerializer(read_only=True)
     currency_id = serializers.PrimaryKeyRelatedField(
         queryset=Currency.objects.all(), source="currency", write_only=True
@@ -50,6 +52,13 @@ class AccountSerializer(serializers.ModelSerializer):
             "is_asset",
         ]
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        request = self.context.get("request")
+        if request and request.user.is_authenticated:
+            # Reload the queryset to get an updated version with the requesting user
+            self.fields["group_id"].queryset = AccountGroup.objects.all()
+
     def create(self, validated_data):
         return Account.objects.create(**validated_data)
 

app/apps/common/apps.py

@@ -4,3 +4,17 @@ from django.apps import AppConfig
 class CommonConfig(AppConfig):
     default_auto_field = "django.db.models.BigAutoField"
     name = "apps.common"
+
+    def ready(self):
+        from django.contrib import admin
+        from django.contrib.sites.models import Site
+        from allauth.socialaccount.models import (
+            SocialAccount,
+            SocialApp,
+            SocialToken,
+        )
+
+        admin.site.unregister(Site)
+        admin.site.unregister(SocialAccount)
+        admin.site.unregister(SocialApp)
+        admin.site.unregister(SocialToken)

app/apps/common/forms.py

@@ -2,6 +2,7 @@ from crispy_forms.bootstrap import FormActions
 from django import forms
 from django.contrib.auth import get_user_model
 from django.utils.translation import gettext_lazy as _
+from django.core.exceptions import ValidationError
 from crispy_forms.helper import FormHelper
 from crispy_forms.layout import Layout, Field, Submit, Div, HTML
 
@@ -81,6 +82,23 @@ class SharedObjectForm(forms.Form):
             ),
         )
 
+    def clean(self):
+        cleaned_data = super().clean()
+        owner = cleaned_data.get("owner")
+        shared_with_users = cleaned_data.get("shared_with_users", [])
+
+        # Raise validation error if owner is in shared_with_users
+        if owner and owner in shared_with_users:
+            self.add_error(
+                "shared_with_users",
+                ValidationError(
+                    _("You cannot share this item with its owner."),
+                    code="invalid_share",
+                ),
+            )
+
+        return cleaned_data
+
     def save(self):
         instance = self.instance
 

app/apps/common/functions/format.py

@@ -5,7 +5,7 @@ from django.utils.formats import get_format as original_get_format
 def get_format(format_type=None, lang=None, use_l10n=None):
     user = get_current_user()
 
-    if user and user.is_authenticated and hasattr(user, "settings"):
+    if user and user.is_authenticated and hasattr(user, "settings") and use_l10n:
         user_settings = user.settings
         if format_type == "THOUSAND_SEPARATOR":
             number_format = getattr(user_settings, "number_format", None)

app/apps/common/models.py

@@ -65,6 +65,18 @@ class SharedObject(models.Model):
         super().save(*args, **kwargs)
 
 
+class OwnedObjectManager(models.Manager):
+    def get_queryset(self):
+        """Return only objects the user can access"""
+        user = get_current_user()
+        base_qs = super().get_queryset()
+
+        if user and user.is_authenticated:
+            return base_qs.filter(Q(owner=user) | Q(owner=None)).distinct()
+
+        return base_qs
+
+
 class OwnedObject(models.Model):
     owner = models.ForeignKey(
         settings.AUTH_USER_MODEL,

app/apps/common/widgets/datepicker.py

@@ -37,7 +37,9 @@ class AirDatePickerInput(widgets.DateInput):
     def _get_current_language():
         """Get current language code in format compatible with AirDatepicker"""
         lang_code = translation.get_language()
-        # AirDatepicker uses simple language codes
+        # AirDatepicker uses simple language codes, except for pt-br
+        if lang_code.lower() == "pt-br":
+            return "pt-BR"
         return lang_code.split("-")[0]
 
     def _get_format(self):

app/apps/common/widgets/decimal.py

@@ -37,6 +37,7 @@ class ArbitraryDecimalDisplayNumberInput(forms.TextInput):
                 "x-data": "",
                 "x-mask:dynamic": f"$money($input, '{get_format('DECIMAL_SEPARATOR')}', "
                 f"'{get_format('THOUSAND_SEPARATOR')}', '30')",
+                "x-on:keyup": "$el.dispatchEvent(new Event('input'))",
             }
         )
 

app/apps/insights/utils/category_overview.py

@@ -10,7 +10,7 @@ from apps.currencies.utils.convert import convert
 
 
 def get_categories_totals(transactions_queryset, ignore_empty=False):
-    # Get metrics for each category and currency in a single query
+    # First get the category totals as before
     category_currency_metrics = (
         transactions_queryset.values(
             "category",
@@ -74,9 +74,65 @@ def get_categories_totals(transactions_queryset, ignore_empty=False):
         .order_by("category__name")
     )
 
+    # Get tag totals within each category with currency details
+    tag_metrics = transactions_queryset.values(
+        "category",
+        "tags",
+        "tags__name",
+        "account__currency",
+        "account__currency__code",
+        "account__currency__name",
+        "account__currency__decimal_places",
+        "account__currency__prefix",
+        "account__currency__suffix",
+        "account__currency__exchange_currency",
+    ).annotate(
+        expense_current=Coalesce(
+            Sum(
+                Case(
+                    When(type=Transaction.Type.EXPENSE, is_paid=True, then="amount"),
+                    default=Value(0),
+                    output_field=models.DecimalField(),
+                )
+            ),
+            Decimal("0"),
+        ),
+        expense_projected=Coalesce(
+            Sum(
+                Case(
+                    When(type=Transaction.Type.EXPENSE, is_paid=False, then="amount"),
+                    default=Value(0),
+                    output_field=models.DecimalField(),
+                )
+            ),
+            Decimal("0"),
+        ),
+        income_current=Coalesce(
+            Sum(
+                Case(
+                    When(type=Transaction.Type.INCOME, is_paid=True, then="amount"),
+                    default=Value(0),
+                    output_field=models.DecimalField(),
+                )
+            ),
+            Decimal("0"),
+        ),
+        income_projected=Coalesce(
+            Sum(
+                Case(
+                    When(type=Transaction.Type.INCOME, is_paid=False, then="amount"),
+                    default=Value(0),
+                    output_field=models.DecimalField(),
+                )
+            ),
+            Decimal("0"),
+        ),
+    )
+
     # Process the results to structure by category
     result = {}
 
+    # Process category totals first
     for metric in category_currency_metrics:
         # Skip empty categories if ignore_empty is True
         if ignore_empty and all(
@@ -101,7 +157,11 @@ def get_categories_totals(transactions_queryset, ignore_empty=False):
         currency_id = metric["account__currency"]
 
         if category_id not in result:
-            result[category_id] = {"name": metric["category__name"], "currencies": {}}
+            result[category_id] = {
+                "name": metric["category__name"],
+                "currencies": {},
+                "tags": {},  # Add tags container
+            }
 
         # Add currency data
         currency_data = {
@@ -162,4 +222,101 @@ def get_categories_totals(transactions_queryset, ignore_empty=False):
 
         result[category_id]["currencies"][currency_id] = currency_data
 
+    # Process tag totals and add them to the result, including untagged
+    for tag_metric in tag_metrics:
+        category_id = tag_metric["category"]
+        tag_id = tag_metric["tags"]  # Will be None for untagged transactions
+
+        if category_id in result:
+            # Initialize the tag container if not exists
+            if "tags" not in result[category_id]:
+                result[category_id]["tags"] = {}
+
+            # Determine if this is a tagged or untagged transaction
+            tag_key = tag_id if tag_id is not None else "untagged"
+            tag_name = tag_metric["tags__name"] if tag_id is not None else None
+
+            if tag_key not in result[category_id]["tags"]:
+                result[category_id]["tags"][tag_key] = {
+                    "name": tag_name,
+                    "currencies": {},
+                }
+
+            currency_id = tag_metric["account__currency"]
+
+            # Calculate tag totals
+            tag_total_current = (
+                tag_metric["income_current"] - tag_metric["expense_current"]
+            )
+            tag_total_projected = (
+                tag_metric["income_projected"] - tag_metric["expense_projected"]
+            )
+            tag_total_income = (
+                tag_metric["income_current"] + tag_metric["income_projected"]
+            )
+            tag_total_expense = (
+                tag_metric["expense_current"] + tag_metric["expense_projected"]
+            )
+            tag_total_final = tag_total_current + tag_total_projected
+
+            tag_currency_data = {
+                "currency": {
+                    "code": tag_metric["account__currency__code"],
+                    "name": tag_metric["account__currency__name"],
+                    "decimal_places": tag_metric["account__currency__decimal_places"],
+                    "prefix": tag_metric["account__currency__prefix"],
+                    "suffix": tag_metric["account__currency__suffix"],
+                },
+                "expense_current": tag_metric["expense_current"],
+                "expense_projected": tag_metric["expense_projected"],
+                "total_expense": tag_total_expense,
+                "income_current": tag_metric["income_current"],
+                "income_projected": tag_metric["income_projected"],
+                "total_income": tag_total_income,
+                "total_current": tag_total_current,
+                "total_projected": tag_total_projected,
+                "total_final": tag_total_final,
+            }
+
+            # Add exchange currency support for tags
+            if tag_metric["account__currency__exchange_currency"]:
+                from_currency = Currency.objects.get(id=currency_id)
+                exchange_currency = Currency.objects.get(
+                    id=tag_metric["account__currency__exchange_currency"]
+                )
+
+                exchanged = {}
+                for field in [
+                    "expense_current",
+                    "expense_projected",
+                    "income_current",
+                    "income_projected",
+                    "total_income",
+                    "total_expense",
+                    "total_current",
+                    "total_projected",
+                    "total_final",
+                ]:
+                    amount, prefix, suffix, decimal_places = convert(
+                        amount=tag_currency_data[field],
+                        from_currency=from_currency,
+                        to_currency=exchange_currency,
+                    )
+                    if amount is not None:
+                        exchanged[field] = amount
+                        if "currency" not in exchanged:
+                            exchanged["currency"] = {
+                                "prefix": prefix,
+                                "suffix": suffix,
+                                "decimal_places": decimal_places,
+                                "code": exchange_currency.code,
+                                "name": exchange_currency.name,
+                            }
+                if exchanged:
+                    tag_currency_data["exchanged"] = exchanged
+
+            result[category_id]["tags"][tag_key]["currencies"][
+                currency_id
+            ] = tag_currency_data
+
     return result

app/apps/insights/utils/transactions.py

@@ -91,6 +91,8 @@ def get_transactions(request, include_unpaid=True, include_silent=False):
         transactions = transactions.filter(is_paid=True)
 
     if not include_silent:
-        transactions = transactions.exclude(Q(category__mute=True) & ~Q(category=None))
+        transactions = transactions.exclude(
+            Q(Q(category__mute=True) & ~Q(category=None)) | Q(mute=True)
+        )
 
     return transactions

app/apps/insights/views.py

@@ -168,6 +168,24 @@ def category_sum_by_currency(request):
 @login_required
 @require_http_methods(["GET"])
 def category_overview(request):
+    if "view_type" in request.GET:
+        view_type = request.GET["view_type"]
+        request.session["insights_category_explorer_view_type"] = view_type
+    else:
+        view_type = request.session.get("insights_category_explorer_view_type", "table")
+
+    if "show_tags" in request.GET:
+        show_tags = request.GET["show_tags"] == "on"
+        request.session["insights_category_explorer_show_tags"] = show_tags
+    else:
+        show_tags = request.session.get("insights_category_explorer_show_tags", True)
+
+    if "showing" in request.GET:
+        showing = request.GET["showing"]
+        request.session["insights_category_explorer_showing"] = showing
+    else:
+        showing = request.session.get("insights_category_explorer_showing", "final")
+
     # Get filtered transactions
     transactions = get_transactions(request, include_silent=True)
 
@@ -178,7 +196,12 @@ def category_overview(request):
     return render(
         request,
         "insights/fragments/category_overview/index.html",
-        {"total_table": total_table},
+        {
+            "total_table": total_table,
+            "view_type": view_type,
+            "show_tags": show_tags,
+            "showing": showing,
+        },
     )
 
 
@@ -237,6 +260,7 @@ def emergency_fund(request):
             reference_date__gte=start_date,
             reference_date__lte=end_date,
             category__mute=False,
+            mute=False,
         )
         .values("reference_date", "account__currency")
         .annotate(monthly_total=Sum("amount"))

app/apps/monthly_overview/views.py

@@ -109,7 +109,7 @@ def monthly_summary(request, month: int, year: int):
     # Base queryset with all required filters
     base_queryset = Transaction.objects.filter(
         reference_date__year=year, reference_date__month=month, account__is_asset=False
-    ).exclude(Q(category__mute=True) & ~Q(category=None))
+    ).exclude(Q(Q(category__mute=True) & ~Q(category=None)) | Q(mute=True))
 
     data = calculate_currency_totals(base_queryset, ignore_empty=True)
     percentages = calculate_percentage_distribution(data)
@@ -143,7 +143,7 @@ def monthly_account_summary(request, month: int, year: int):
     base_queryset = Transaction.objects.filter(
         reference_date__year=year,
         reference_date__month=month,
-    ).exclude(Q(category__mute=True) & ~Q(category=None))
+    ).exclude(Q(Q(category__mute=True) & ~Q(category=None)) | Q(mute=True))
 
     account_data = calculate_account_totals(transactions_queryset=base_queryset.all())
     account_percentages = calculate_percentage_distribution(account_data)
@@ -168,7 +168,7 @@ def monthly_currency_summary(request, month: int, year: int):
     base_queryset = Transaction.objects.filter(
         reference_date__year=year,
         reference_date__month=month,
-    ).exclude(Q(category__mute=True) & ~Q(category=None))
+    ).exclude(Q(Q(category__mute=True) & ~Q(category=None)) | Q(mute=True))
 
     currency_data = calculate_currency_totals(base_queryset.all(), ignore_empty=True)
     currency_percentages = calculate_percentage_distribution(currency_data)

app/apps/net_worth/views.py

@@ -32,7 +32,7 @@ def net_worth_current(request):
     )
 
     currency_net_worth = calculate_currency_totals(
-        transactions_queryset=transactions_currency_queryset
+        transactions_queryset=transactions_currency_queryset, deep_search=True
     )
     account_net_worth = calculate_account_totals(
         transactions_queryset=transactions_account_queryset
@@ -137,7 +137,7 @@ def net_worth_projected(request):
     )
 
     currency_net_worth = calculate_currency_totals(
-        transactions_queryset=transactions_currency_queryset
+        transactions_queryset=transactions_currency_queryset, deep_search=True
     )
     account_net_worth = calculate_account_totals(
         transactions_queryset=transactions_account_queryset

app/apps/transactions/forms.py

@@ -6,6 +6,8 @@ from crispy_forms.layout import (
     Row,
     Column,
     Field,
+    Div,
+    HTML,
 )
 from django import forms
 from django.db.models import Q
@@ -28,8 +30,8 @@ from apps.transactions.models import (
     InstallmentPlan,
     RecurringTransaction,
     TransactionEntity,
+    QuickTransaction,
 )
-from apps.common.middleware.thread_local import get_current_user
 
 
 class TransactionForm(forms.ModelForm):
@@ -206,10 +208,21 @@ class TransactionForm(forms.ModelForm):
         else:
             self.fields["amount"].widget = ArbitraryDecimalDisplayNumberInput()
             self.helper.layout.append(
-                FormActions(
+                Div(
                     NoClassSubmit(
-                        "submit", _("Add"), css_class="btn btn-outline-primary w-100"
+                        "submit", _("Add"), css_class="btn btn-outline-primary"
                     ),
+                    NoClassSubmit(
+                        "submit_and_similar",
+                        _("Save and add similar"),
+                        css_class="btn btn-outline-primary",
+                    ),
+                    NoClassSubmit(
+                        "submit_and_another",
+                        _("Save and add another"),
+                        css_class="btn btn-outline-primary",
+                    ),
+                    css_class="d-grid gap-2",
                 ),
             )
 
@@ -235,6 +248,145 @@ class TransactionForm(forms.ModelForm):
         return instance
 
 
+class QuickTransactionForm(forms.ModelForm):
+    category = DynamicModelChoiceField(
+        create_field="name",
+        model=TransactionCategory,
+        required=False,
+        label=_("Category"),
+        queryset=TransactionCategory.objects.filter(active=True),
+    )
+    tags = DynamicModelMultipleChoiceField(
+        model=TransactionTag,
+        to_field_name="name",
+        create_field="name",
+        required=False,
+        label=_("Tags"),
+        queryset=TransactionTag.objects.filter(active=True),
+    )
+    entities = DynamicModelMultipleChoiceField(
+        model=TransactionEntity,
+        to_field_name="name",
+        create_field="name",
+        required=False,
+        label=_("Entities"),
+    )
+    account = forms.ModelChoiceField(
+        queryset=Account.objects.filter(is_archived=False),
+        label=_("Account"),
+        widget=TomSelect(clear_button=False, group_by="group"),
+    )
+
+    class Meta:
+        model = QuickTransaction
+        fields = [
+            "name",
+            "account",
+            "type",
+            "is_paid",
+            "amount",
+            "description",
+            "notes",
+            "category",
+            "tags",
+            "entities",
+            "mute",
+        ]
+        widgets = {
+            "notes": forms.Textarea(attrs={"rows": 3}),
+            "account": TomSelect(clear_button=False, group_by="group"),
+        }
+        help_texts = {
+            "mute": _("Muted transactions won't be displayed on monthly summaries")
+        }
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+        # if editing a transaction display non-archived items and it's own item even if it's archived
+        if self.instance.id:
+            self.fields["account"].queryset = Account.objects.filter(
+                Q(is_archived=False) | Q(transactions=self.instance.id),
+            )
+
+            self.fields["category"].queryset = TransactionCategory.objects.filter(
+                Q(active=True) | Q(transaction=self.instance.id)
+            )
+
+            self.fields["tags"].queryset = TransactionTag.objects.filter(
+                Q(active=True) | Q(transaction=self.instance.id)
+            )
+
+            self.fields["entities"].queryset = TransactionEntity.objects.filter(
+                Q(active=True) | Q(transactions=self.instance.id)
+            )
+        else:
+            self.fields["account"].queryset = Account.objects.filter(
+                is_archived=False,
+            )
+
+            self.fields["category"].queryset = TransactionCategory.objects.filter(
+                active=True
+            )
+            self.fields["tags"].queryset = TransactionTag.objects.filter(active=True)
+            self.fields["entities"].queryset = TransactionEntity.objects.all()
+
+        self.helper = FormHelper()
+        self.helper.form_tag = False
+        self.helper.form_method = "post"
+        self.helper.layout = Layout(
+            Field(
+                "type",
+                template="transactions/widgets/income_expense_toggle_buttons.html",
+            ),
+            Field("is_paid", template="transactions/widgets/paid_toggle_button.html"),
+            "name",
+            HTML("<hr />"),
+            Row(
+                Column("account", css_class="form-group col-md-6 mb-0"),
+                Column("entities", css_class="form-group col-md-6 mb-0"),
+                css_class="form-row",
+            ),
+            Row(
+                Column(Field("date"), css_class="form-group col-md-6 mb-0"),
+                Column(Field("reference_date"), css_class="form-group col-md-6 mb-0"),
+                css_class="form-row",
+            ),
+            "description",
+            Field("amount", inputmode="decimal"),
+            Row(
+                Column("category", css_class="form-group col-md-6 mb-0"),
+                Column("tags", css_class="form-group col-md-6 mb-0"),
+                css_class="form-row",
+            ),
+            "notes",
+            Switch("mute"),
+        )
+
+        if self.instance and self.instance.pk:
+            decimal_places = self.instance.account.currency.decimal_places
+            self.fields["amount"].widget = ArbitraryDecimalDisplayNumberInput(
+                decimal_places=decimal_places
+            )
+            self.helper.layout.append(
+                FormActions(
+                    NoClassSubmit(
+                        "submit", _("Update"), css_class="btn btn-outline-primary w-100"
+                    ),
+                ),
+            )
+        else:
+            self.fields["amount"].widget = ArbitraryDecimalDisplayNumberInput()
+            self.helper.layout.append(
+                Div(
+                    NoClassSubmit(
+                        "submit", _("Add"), css_class="btn btn-outline-primary"
+                    ),
+                    css_class="d-grid gap-2",
+                ),
+            )
+
+
 class BulkEditTransactionForm(TransactionForm):
     is_paid = forms.NullBooleanField(required=False)
 
@@ -469,6 +621,7 @@ class TransferForm(forms.Form):
             description=description,
             category=from_category,
             notes=notes,
+            mute=True,
         )
         from_transaction.tags.set(self.cleaned_data.get("from_tags", []))
 
@@ -483,6 +636,7 @@ class TransferForm(forms.Form):
             description=description,
             category=to_category,
             notes=notes,
+            mute=True,
         )
         to_transaction.tags.set(self.cleaned_data.get("to_tags", []))
 
@@ -721,7 +875,7 @@ class TransactionCategoryForm(forms.ModelForm):
         fields = ["name", "mute", "active"]
         labels = {"name": _("Category name")}
         help_texts = {
-            "mute": _("Muted categories won't count towards your monthly total")
+            "mute": _("Muted categories won't be displayed on monthly summaries")
         }
 
     def __init__(self, *args, **kwargs):

app/apps/transactions/migrations/0043_quicktransaction.py

@@ -0,0 +1,45 @@
+# Generated by Django 5.1.11 on 2025-06-20 03:57
+
+import apps.transactions.validators
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('accounts', '0014_alter_account_options_alter_accountgroup_options'),
+        ('transactions', '0042_alter_transactioncategory_options_and_more'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='QuickTransaction',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100, verbose_name='Name')),
+                ('type', models.CharField(choices=[('IN', 'Income'), ('EX', 'Expense')], default='EX', max_length=2, verbose_name='Type')),
+                ('is_paid', models.BooleanField(default=True, verbose_name='Paid')),
+                ('amount', models.DecimalField(decimal_places=30, max_digits=42, validators=[apps.transactions.validators.validate_non_negative, apps.transactions.validators.validate_decimal_places], verbose_name='Amount')),
+                ('description', models.CharField(blank=True, max_length=500, verbose_name='Description')),
+                ('notes', models.TextField(blank=True, verbose_name='Notes')),
+                ('internal_note', models.TextField(blank=True, verbose_name='Internal Note')),
+                ('internal_id', models.TextField(blank=True, null=True, unique=True, verbose_name='Internal ID')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('account', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='quick_transactions', to='accounts.account', verbose_name='Account')),
+                ('category', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='transactions.transactioncategory', verbose_name='Category')),
+                ('entities', models.ManyToManyField(blank=True, related_name='quick_transactions', to='transactions.transactionentity', verbose_name='Entities')),
+                ('owner', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='%(class)s_owned', to=settings.AUTH_USER_MODEL)),
+                ('tags', models.ManyToManyField(blank=True, to='transactions.transactiontag', verbose_name='Tags')),
+            ],
+            options={
+                'verbose_name': 'Quick Transaction',
+                'verbose_name_plural': 'Quick Transactions',
+                'db_table': 'quick_transactions',
+                'default_manager_name': 'objects',
+            },
+        ),
+    ]

app/apps/transactions/migrations/0044_alter_quicktransaction_unique_together.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.1.11 on 2025-06-20 04:02
+
+from django.conf import settings
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('transactions', '0043_quicktransaction'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.AlterUniqueTogether(
+            name='quicktransaction',
+            unique_together={('name', 'owner')},
+        ),
+    ]

app/apps/transactions/migrations/0045_transaction_mute.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.11 on 2025-07-19 18:12
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('transactions', '0044_alter_quicktransaction_unique_together'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='transaction',
+            name='mute',
+            field=models.BooleanField(default=False, verbose_name='Mute'),
+        ),
+    ]

app/apps/transactions/migrations/0046_quicktransaction_mute.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.11 on 2025-07-19 18:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('transactions', '0045_transaction_mute'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quicktransaction',
+            name='mute',
+            field=models.BooleanField(default=False, verbose_name='Mute'),
+        ),
+    ]

app/apps/transactions/models.py

@@ -16,7 +16,12 @@ from apps.common.templatetags.decimal import localize_number, drop_trailing_zero
 from apps.currencies.utils.convert import convert
 from apps.transactions.validators import validate_decimal_places, validate_non_negative
 from apps.common.middleware.thread_local import get_current_user
-from apps.common.models import SharedObject, SharedObjectManager, OwnedObject
+from apps.common.models import (
+    SharedObject,
+    SharedObjectManager,
+    OwnedObject,
+    OwnedObjectManager,
+)
 
 logger = logging.getLogger()
 
@@ -118,13 +123,20 @@ class SoftDeleteManager(models.Manager):
         qs = SoftDeleteQuerySet(self.model, using=self._db)
         user = get_current_user()
         if user and not user.is_anonymous:
-            return qs.filter(
-                Q(account__visibility="public")
-                | Q(account__owner=user)
-                | Q(account__shared_with=user)
-                | Q(account__visibility="private", account__owner=None),
-                deleted=False,
-            ).distinct()
+            account_ids = (
+                qs.filter(
+                    Q(account__visibility="public")
+                    | Q(account__owner=user)
+                    | Q(account__shared_with=user)
+                    | Q(account__visibility="private", account__owner=None),
+                    deleted=False,
+                )
+                .values_list("account__id", flat=True)
+                .distinct()
+            )
+
+            return qs.filter(account_id__in=account_ids, deleted=False)
+
         else:
             return qs.filter(
                 deleted=False,
@@ -287,6 +299,7 @@ class Transaction(OwnedObject):
     is_paid = models.BooleanField(default=True, verbose_name=_("Paid"))
     date = models.DateField(verbose_name=_("Date"))
     reference_date = MonthYearModelField(verbose_name=_("Reference Date"))
+    mute = models.BooleanField(default=False, verbose_name=_("Mute"))
 
     amount = models.DecimalField(
         max_digits=42,
@@ -879,3 +892,87 @@ class RecurringTransaction(models.Model):
         """
         today = timezone.localdate(timezone.now())
         self.transactions.filter(is_paid=False, date__gt=today).delete()
+
+
+class QuickTransaction(OwnedObject):
+    class Type(models.TextChoices):
+        INCOME = "IN", _("Income")
+        EXPENSE = "EX", _("Expense")
+
+    name = models.CharField(
+        max_length=100,
+        null=False,
+        blank=False,
+        verbose_name=_("Name"),
+    )
+
+    account = models.ForeignKey(
+        "accounts.Account",
+        on_delete=models.CASCADE,
+        verbose_name=_("Account"),
+        related_name="quick_transactions",
+    )
+    type = models.CharField(
+        max_length=2,
+        choices=Type,
+        default=Type.EXPENSE,
+        verbose_name=_("Type"),
+    )
+    is_paid = models.BooleanField(default=True, verbose_name=_("Paid"))
+    mute = models.BooleanField(default=False, verbose_name=_("Mute"))
+
+    amount = models.DecimalField(
+        max_digits=42,
+        decimal_places=30,
+        verbose_name=_("Amount"),
+        validators=[validate_non_negative, validate_decimal_places],
+    )
+
+    description = models.CharField(
+        max_length=500, verbose_name=_("Description"), blank=True
+    )
+    notes = models.TextField(blank=True, verbose_name=_("Notes"))
+    category = models.ForeignKey(
+        TransactionCategory,
+        on_delete=models.SET_NULL,
+        verbose_name=_("Category"),
+        blank=True,
+        null=True,
+    )
+    tags = models.ManyToManyField(
+        TransactionTag,
+        verbose_name=_("Tags"),
+        blank=True,
+    )
+    entities = models.ManyToManyField(
+        TransactionEntity,
+        verbose_name=_("Entities"),
+        blank=True,
+        related_name="quick_transactions",
+    )
+
+    internal_note = models.TextField(blank=True, verbose_name=_("Internal Note"))
+    internal_id = models.TextField(
+        blank=True, null=True, unique=True, verbose_name=_("Internal ID")
+    )
+
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    objects = OwnedObjectManager()
+    all_objects = models.Manager()  # Unfiltered manager
+
+    class Meta:
+        verbose_name = _("Quick Transaction")
+        verbose_name_plural = _("Quick Transactions")
+        unique_together = ("name", "owner")
+        db_table = "quick_transactions"
+        default_manager_name = "objects"
+
+    def save(self, *args, **kwargs):
+        self.amount = truncate_decimal(
+            value=self.amount, decimal_places=self.account.currency.decimal_places
+        )
+
+        self.full_clean()
+        super().save(*args, **kwargs)

app/apps/transactions/urls.py

@@ -66,6 +66,11 @@ urlpatterns = [
         views.transaction_pay,
         name="transaction_pay",
     ),
+    path(
+        "transaction/<int:transaction_id>/mute/",
+        views.transaction_mute,
+        name="transaction_mute",
+    ),
     path(
         "transaction/<int:transaction_id>/delete/",
         views.transaction_delete,
@@ -307,4 +312,44 @@ urlpatterns = [
         views.recurring_transaction_finish,
         name="recurring_transaction_finish",
     ),
+    path(
+        "quick-transactions/",
+        views.quick_transactions_index,
+        name="quick_transactions_index",
+    ),
+    path(
+        "quick-transactions/list/",
+        views.quick_transactions_list,
+        name="quick_transactions_list",
+    ),
+    path(
+        "quick-transactions/add/",
+        views.quick_transaction_add,
+        name="quick_transaction_add",
+    ),
+    path(
+        "quick-transactions/<int:quick_transaction_id>/edit/",
+        views.quick_transaction_edit,
+        name="quick_transaction_edit",
+    ),
+    path(
+        "quick-transactions/<int:quick_transaction_id>/delete/",
+        views.quick_transaction_delete,
+        name="quick_transaction_delete",
+    ),
+    path(
+        "quick-transactions/create-menu/",
+        views.quick_transactions_create_menu,
+        name="quick_transactions_create_menu",
+    ),
+    path(
+        "quick-transactions/<int:quick_transaction_id>/create/",
+        views.quick_transaction_add_as_transaction,
+        name="quick_transaction_add_as_transaction",
+    ),
+    path(
+        "transactions/<int:transaction_id>/add-as-quick-transaction/",
+        views.quick_transaction_add_as_quick_transaction,
+        name="quick_transaction_add_as_quick_transaction",
+    ),
 ]

app/apps/transactions/utils/calculations.py

@@ -9,9 +9,11 @@ from apps.currencies.utils.convert import convert
 from apps.currencies.models import Currency
 
 
-def calculate_currency_totals(transactions_queryset, ignore_empty=False):
+def calculate_currency_totals(
+    transactions_queryset, ignore_empty=False, deep_search=False
+):
     # Prepare the aggregation expressions
-    currency_totals = (
+    currency_totals_from_transactions = (
         transactions_queryset.values(
             "account__currency",
             "account__currency__code",
@@ -19,7 +21,14 @@ def calculate_currency_totals(transactions_queryset, ignore_empty=False):
             "account__currency__decimal_places",
             "account__currency__prefix",
             "account__currency__suffix",
-            "account__currency__exchange_currency",
+            "account__currency__exchange_currency",  # ID of the exchange currency for the account's currency
+            # Fields for the exchange currency itself (if account.currency.exchange_currency is set)
+            # These might be null if not set, so handle appropriately.
+            "account__currency__exchange_currency__code",
+            "account__currency__exchange_currency__name",
+            "account__currency__exchange_currency__decimal_places",
+            "account__currency__exchange_currency__prefix",
+            "account__currency__exchange_currency__suffix",
         )
         .annotate(
             expense_current=Coalesce(
@@ -72,36 +81,55 @@ def calculate_currency_totals(transactions_queryset, ignore_empty=False):
         .order_by()
     )
 
-    # First pass: Process basic totals and store all currency data
     result = {}
-    currencies_using_exchange = (
-        {}
-    )  # Track which currencies use which exchange currencies
+    # currencies_using_exchange maps:
+    # exchange_currency_id -> list of [
+    #   { "currency_id": original_currency_id, (the currency that was exchanged FROM)
+    #     "exchanged": { field: amount_in_exchange_currency, ... } (the values of original_currency_id converted TO exchange_currency_id)
+    #   }
+    # ]
+    currencies_using_exchange = {}
 
-    for total in currency_totals:
-        # Skip empty currencies if ignore_empty is True
-        if ignore_empty and all(
-            total[field] == Decimal("0")
-            for field in [
-                "expense_current",
-                "expense_projected",
-                "income_current",
-                "income_projected",
-            ]
+    # --- First Pass: Process transactions from the queryset ---
+    for total in currency_totals_from_transactions:
+        if (
+            ignore_empty
+            and not deep_search
+            and all(
+                total[field] == Decimal("0")
+                for field in [
+                    "expense_current",
+                    "expense_projected",
+                    "income_current",
+                    "income_projected",
+                ]
+            )
         ):
             continue
 
-        # Calculate derived totals
+        currency_id = total["account__currency"]
+        try:
+            from_currency_obj = Currency.objects.get(id=currency_id)
+        except Currency.DoesNotExist:
+            # This should ideally not happen if database is consistent
+            continue
+
+        exchange_currency_for_this_total_id = total[
+            "account__currency__exchange_currency"
+        ]
+        exchange_currency_obj_for_this_total = None
+        if exchange_currency_for_this_total_id:
+            try:
+                # Use pre-fetched values if available, otherwise query
+                exchange_currency_obj_for_this_total = Currency.objects.get(
+                    id=exchange_currency_for_this_total_id
+                )
+            except Currency.DoesNotExist:
+                pass  # Exchange currency might not exist or be set
+
         total_current = total["income_current"] - total["expense_current"]
         total_projected = total["income_projected"] - total["expense_projected"]
         total_final = total_current + total_projected
-        currency_id = total["account__currency"]
-        from_currency = Currency.objects.get(id=currency_id)
-        exchange_currency = (
-            Currency.objects.get(id=total["account__currency__exchange_currency"])
-            if total["account__currency__exchange_currency"]
-            else None
-        )
 
         currency_data = {
             "currency": {
@@ -120,9 +148,16 @@ def calculate_currency_totals(transactions_queryset, ignore_empty=False):
             "total_final": total_final,
         }
 
-        # Add exchanged values if exchange_currency exists
-        if exchange_currency:
-            exchanged = {}
+        if exchange_currency_obj_for_this_total:
+            exchanged_details = {
+                "currency": {
+                    "code": exchange_currency_obj_for_this_total.code,
+                    "name": exchange_currency_obj_for_this_total.name,
+                    "decimal_places": exchange_currency_obj_for_this_total.decimal_places,
+                    "prefix": exchange_currency_obj_for_this_total.prefix,
+                    "suffix": exchange_currency_obj_for_this_total.suffix,
+                }
+            }
             for field in [
                 "expense_current",
                 "expense_projected",
@@ -132,50 +167,142 @@ def calculate_currency_totals(transactions_queryset, ignore_empty=False):
                 "total_projected",
                 "total_final",
             ]:
-                amount, prefix, suffix, decimal_places = convert(
-                    amount=currency_data[field],
-                    from_currency=from_currency,
-                    to_currency=exchange_currency,
+                amount_to_convert = currency_data[field]
+                converted_val, _, _, _ = convert(
+                    amount=amount_to_convert,
+                    from_currency=from_currency_obj,
+                    to_currency=exchange_currency_obj_for_this_total,
+                )
+                exchanged_details[field] = (
+                    converted_val if converted_val is not None else Decimal("0")
                 )
-                if amount is not None:
-                    exchanged[field] = amount
-                    if "currency" not in exchanged:
-                        exchanged["currency"] = {
-                            "prefix": prefix,
-                            "suffix": suffix,
-                            "decimal_places": decimal_places,
-                            "code": exchange_currency.code,
-                            "name": exchange_currency.name,
-                        }
 
-            if exchanged:
-                currency_data["exchanged"] = exchanged
-                # Track which currencies are using which exchange currencies
-                if exchange_currency.id not in currencies_using_exchange:
-                    currencies_using_exchange[exchange_currency.id] = []
-                currencies_using_exchange[exchange_currency.id].append(
-                    {"currency_id": currency_id, "exchanged": exchanged}
-                )
+            currency_data["exchanged"] = exchanged_details
+
+            if exchange_currency_obj_for_this_total.id not in currencies_using_exchange:
+                currencies_using_exchange[exchange_currency_obj_for_this_total.id] = []
+            currencies_using_exchange[exchange_currency_obj_for_this_total.id].append(
+                {"currency_id": currency_id, "exchanged": exchanged_details}
+            )
 
         result[currency_id] = currency_data
 
-    # Second pass: Add consolidated totals for currencies that are used as exchange currencies
-    for currency_id, currency_data in result.items():
-        if currency_id in currencies_using_exchange:
-            consolidated = {
-                "currency": currency_data["currency"].copy(),
-                "expense_current": currency_data["expense_current"],
-                "expense_projected": currency_data["expense_projected"],
-                "income_current": currency_data["income_current"],
-                "income_projected": currency_data["income_projected"],
-                "total_current": currency_data["total_current"],
-                "total_projected": currency_data["total_projected"],
-                "total_final": currency_data["total_final"],
-            }
+    # --- Deep Search: Add transaction-less currencies that are exchange targets ---
+    if deep_search:
+        # Iteratively add exchange targets that might not have had direct transactions
+        # Start with known exchange targets from the first pass
+        queue = list(currencies_using_exchange.keys())
+        processed_for_deep_add = set(
+            result.keys()
+        )  # Track currencies already in result or added by this deep search step
 
-            # Add exchanged values from all currencies using this as exchange currency
-            for using_currency in currencies_using_exchange[currency_id]:
-                exchanged = using_currency["exchanged"]
+        while queue:
+            target_id = queue.pop(0)
+            if target_id in processed_for_deep_add:
+                continue
+            processed_for_deep_add.add(target_id)
+
+            if (
+                target_id not in result
+            ):  # If this exchange target had no direct transactions
+                try:
+                    db_currency = Currency.objects.get(id=target_id)
+                except Currency.DoesNotExist:
+                    continue
+
+                # Initialize data for this transaction-less exchange target currency
+                currency_data_for_db_currency = {
+                    "currency": {
+                        "code": db_currency.code,
+                        "name": db_currency.name,
+                        "decimal_places": db_currency.decimal_places,
+                        "prefix": db_currency.prefix,
+                        "suffix": db_currency.suffix,
+                    },
+                    "expense_current": Decimal("0"),
+                    "expense_projected": Decimal("0"),
+                    "income_current": Decimal("0"),
+                    "income_projected": Decimal("0"),
+                    "total_current": Decimal("0"),
+                    "total_projected": Decimal("0"),
+                    "total_final": Decimal("0"),
+                }
+
+                # If this newly added transaction-less currency ALSO has an exchange_currency set for itself
+                if db_currency.exchange_currency:
+                    exchanged_details_for_db_currency = {
+                        "currency": {
+                            "code": db_currency.exchange_currency.code,
+                            "name": db_currency.exchange_currency.name,
+                            "decimal_places": db_currency.exchange_currency.decimal_places,
+                            "prefix": db_currency.exchange_currency.prefix,
+                            "suffix": db_currency.exchange_currency.suffix,
+                        }
+                    }
+                    for field in [
+                        "expense_current",
+                        "expense_projected",
+                        "income_current",
+                        "income_projected",
+                        "total_current",
+                        "total_projected",
+                        "total_final",
+                    ]:
+                        converted_val, _, _, _ = convert(
+                            Decimal("0"), db_currency, db_currency.exchange_currency
+                        )
+                        exchanged_details_for_db_currency[field] = (
+                            converted_val if converted_val is not None else Decimal("0")
+                        )
+
+                    currency_data_for_db_currency["exchanged"] = (
+                        exchanged_details_for_db_currency
+                    )
+
+                    # Ensure its own exchange_currency is registered in currencies_using_exchange
+                    # and add it to the queue if it hasn't been processed yet for deep add.
+                    target_id_for_this_db_curr = db_currency.exchange_currency.id
+                    if target_id_for_this_db_curr not in currencies_using_exchange:
+                        currencies_using_exchange[target_id_for_this_db_curr] = []
+
+                    # Avoid adding duplicate entries
+                    already_present_in_cue = any(
+                        entry["currency_id"] == db_currency.id
+                        for entry in currencies_using_exchange[
+                            target_id_for_this_db_curr
+                        ]
+                    )
+                    if not already_present_in_cue:
+                        currencies_using_exchange[target_id_for_this_db_curr].append(
+                            {
+                                "currency_id": db_currency.id,
+                                "exchanged": exchanged_details_for_db_currency,
+                            }
+                        )
+
+                    if target_id_for_this_db_curr not in processed_for_deep_add:
+                        queue.append(target_id_for_this_db_curr)
+
+                result[db_currency.id] = currency_data_for_db_currency
+
+    # --- Second Pass: Calculate consolidated totals for all currencies in result ---
+    for currency_id_consolidated, data_consolidated_currency in result.items():
+        consolidated_data = {
+            "currency": data_consolidated_currency["currency"].copy(),
+            "expense_current": data_consolidated_currency["expense_current"],
+            "expense_projected": data_consolidated_currency["expense_projected"],
+            "income_current": data_consolidated_currency["income_current"],
+            "income_projected": data_consolidated_currency["income_projected"],
+            "total_current": data_consolidated_currency["total_current"],
+            "total_projected": data_consolidated_currency["total_projected"],
+            "total_final": data_consolidated_currency["total_final"],
+        }
+
+        if currency_id_consolidated in currencies_using_exchange:
+            for original_currency_info in currencies_using_exchange[
+                currency_id_consolidated
+            ]:
+                exchanged_values_from_original = original_currency_info["exchanged"]
                 for field in [
                     "expense_current",
                     "expense_projected",
@@ -185,10 +312,25 @@ def calculate_currency_totals(transactions_queryset, ignore_empty=False):
                     "total_projected",
                     "total_final",
                 ]:
-                    if field in exchanged:
-                        consolidated[field] += exchanged[field]
+                    if field in exchanged_values_from_original:
+                        consolidated_data[field] += exchanged_values_from_original[
+                            field
+                        ]
 
-            result[currency_id]["consolidated"] = consolidated
+        result[currency_id_consolidated]["consolidated"] = consolidated_data
+
+    # Sort currencies by their final_total or consolidated final_total, descending
+    result = {
+        k: v
+        for k, v in sorted(
+            result.items(),
+            reverse=True,
+            key=lambda item: max(
+                item[1].get("total_final", Decimal("0")),
+                item[1].get("consolidated", {}).get("total_final", Decimal("0")),
+            ),
+        )
+    }
 
     return result
 

app/apps/transactions/views/__init__.py

@@ -5,3 +5,4 @@ from .categories import *
 from .actions import *
 from .installment_plans import *
 from .recurring_transactions import *
+from .quick_transactions import *

app/apps/transactions/views/quick_transactions.py

@@ -0,0 +1,229 @@
+from django.contrib import messages
+from django.contrib.auth.decorators import login_required
+from django.forms import model_to_dict
+from django.http import HttpResponse
+from django.shortcuts import render, get_object_or_404
+from django.utils import timezone
+from django.utils.translation import gettext_lazy as _
+from django.views.decorators.http import require_http_methods
+
+from apps.common.decorators.htmx import only_htmx
+from apps.transactions.forms import QuickTransactionForm
+from apps.transactions.models import QuickTransaction, transaction_created
+from apps.transactions.models import Transaction
+
+
+@login_required
+@require_http_methods(["GET"])
+def quick_transactions_index(request):
+    return render(
+        request,
+        "quick_transactions/pages/index.html",
+    )
+
+
+@only_htmx
+@login_required
+@require_http_methods(["GET"])
+def quick_transactions_list(request):
+    quick_transactions = QuickTransaction.objects.all().order_by("name")
+    return render(
+        request,
+        "quick_transactions/fragments/list.html",
+        context={"quick_transactions": quick_transactions},
+    )
+
+
+@only_htmx
+@login_required
+@require_http_methods(["GET", "POST"])
+def quick_transaction_add(request):
+    if request.method == "POST":
+        form = QuickTransactionForm(request.POST)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Item added successfully"))
+
+            return HttpResponse(
+                status=204,
+                headers={
+                    "HX-Trigger": "updated, hide_offcanvas",
+                },
+            )
+    else:
+        form = QuickTransactionForm()
+
+    return render(
+        request,
+        "quick_transactions/fragments/add.html",
+        {"form": form},
+    )
+
+
+@only_htmx
+@login_required
+@require_http_methods(["GET", "POST"])
+def quick_transaction_edit(request, quick_transaction_id):
+    quick_transaction = get_object_or_404(QuickTransaction, id=quick_transaction_id)
+
+    if request.method == "POST":
+        form = QuickTransactionForm(request.POST, instance=quick_transaction)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Item updated successfully"))
+
+            return HttpResponse(
+                status=204,
+                headers={
+                    "HX-Trigger": "updated, hide_offcanvas",
+                },
+            )
+    else:
+        form = QuickTransactionForm(instance=quick_transaction)
+
+    return render(
+        request,
+        "quick_transactions/fragments/edit.html",
+        {"form": form, "quick_transaction": quick_transaction},
+    )
+
+
+@only_htmx
+@login_required
+@require_http_methods(["DELETE"])
+def quick_transaction_delete(request, quick_transaction_id):
+    quick_transaction = get_object_or_404(QuickTransaction, id=quick_transaction_id)
+
+    quick_transaction.delete()
+
+    messages.success(request, _("Item deleted successfully"))
+
+    return HttpResponse(
+        status=204,
+        headers={
+            "HX-Trigger": "updated, hide_offcanvas",
+        },
+    )
+
+
+@only_htmx
+@login_required
+@require_http_methods(["GET"])
+def quick_transactions_create_menu(request):
+    quick_transactions = QuickTransaction.objects.all().order_by("name")
+    return render(
+        request,
+        "quick_transactions/fragments/create_menu.html",
+        context={"quick_transactions": quick_transactions},
+    )
+
+
+@only_htmx
+@login_required
+@require_http_methods(["GET"])
+def quick_transaction_add_as_transaction(request, quick_transaction_id):
+    quick_transaction: QuickTransaction = get_object_or_404(
+        QuickTransaction, id=quick_transaction_id
+    )
+    today = timezone.localdate(timezone.now())
+
+    quick_transaction_data = model_to_dict(
+        quick_transaction,
+        exclude=[
+            "id",
+            "name",
+            "owner",
+            "account",
+            "category",
+            "tags",
+            "entities",
+        ],
+    )
+
+    new_transaction = Transaction(**quick_transaction_data)
+    new_transaction.account = quick_transaction.account
+    new_transaction.category = quick_transaction.category
+
+    new_transaction.date = today
+    new_transaction.reference_date = today.replace(day=1)
+    new_transaction.save()
+    new_transaction.tags.set(quick_transaction.tags.all())
+    new_transaction.entities.set(quick_transaction.entities.all())
+
+    transaction_created.send(sender=new_transaction)
+
+    messages.success(request, _("Transaction added successfully"))
+
+    return HttpResponse(
+        status=204,
+        headers={
+            "HX-Trigger": "updated, hide_offcanvas",
+        },
+    )
+
+
+@only_htmx
+@login_required
+@require_http_methods(["GET"])
+def quick_transaction_add_as_quick_transaction(request, transaction_id):
+    transaction: Transaction = get_object_or_404(Transaction, pk=transaction_id)
+
+    if (
+        transaction.description
+        and QuickTransaction.objects.filter(
+            name__startswith=transaction.description
+        ).exists()
+    ) or QuickTransaction.objects.filter(
+        name__startswith=_("Quick Transaction")
+    ).exists():
+        if transaction.description:
+            count = QuickTransaction.objects.filter(
+                name__startswith=transaction.description
+            ).count()
+            qt_name = transaction.description + f" ({count + 1})"
+        else:
+            count = QuickTransaction.objects.filter(
+                name__startswith=_("Quick Transaction")
+            ).count()
+            qt_name = _("Quick Transaction") + f" ({count + 1})"
+    else:
+        qt_name = transaction.description or _("Quick Transaction")
+
+    transaction_data = model_to_dict(
+        transaction,
+        exclude=[
+            "id",
+            "name",
+            "owner",
+            "account",
+            "category",
+            "tags",
+            "entities",
+            "date",
+            "reference_date",
+            "installment_plan",
+            "installment_id",
+            "recurring_transaction",
+            "deleted",
+            "deleted_at",
+        ],
+    )
+
+    new_quick_transaction = QuickTransaction(**transaction_data)
+    new_quick_transaction.account = transaction.account
+    new_quick_transaction.category = transaction.category
+
+    new_quick_transaction.name = qt_name
+
+    new_quick_transaction.save()
+    new_quick_transaction.tags.set(transaction.tags.all())
+    new_quick_transaction.entities.set(transaction.entities.all())
+
+    messages.success(request, _("Item added successfully"))
+
+    return HttpResponse(
+        status=204,
+        headers={
+            "HX-Trigger": "toasts",
+        },
+    )

app/apps/transactions/views/transactions.py

@@ -4,7 +4,7 @@ from copy import deepcopy
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
 from django.core.paginator import Paginator
-from django.db.models import Q
+from django.db.models import Q, When, Case, Value, IntegerField
 from django.http import HttpResponse, JsonResponse
 from django.shortcuts import render, get_object_or_404
 from django.utils import timezone
@@ -43,16 +43,71 @@ def transaction_add(request):
         year=year,
     ).date()
 
+    update = False
+
     if request.method == "POST":
         form = TransactionForm(request.POST)
         if form.is_valid():
-            form.save()
+            saved_instance = form.save()
             messages.success(request, _("Transaction added successfully"))
 
-            return HttpResponse(
-                status=204,
-                headers={"HX-Trigger": "updated, hide_offcanvas"},
-            )
+            if "submit" in request.POST:
+                return HttpResponse(
+                    status=204,
+                    headers={"HX-Trigger": "updated, hide_offcanvas"},
+                )
+            elif "submit_and_another" in request.POST:
+                form = TransactionForm(
+                    initial={
+                        "date": expected_date,
+                        "type": transaction_type,
+                    },
+                )
+                update = True
+            elif "submit_and_similar" in request.POST:
+                initial_data = {}
+
+                # Define fields to copy from the SAVED instance
+                direct_fields_to_copy = [
+                    "account",  # ForeignKey -> will copy the ID
+                    "type",  # ChoiceField -> will copy the value
+                    "is_paid",  # BooleanField -> will copy True/False
+                    "date",  # DateField -> will copy the date object
+                    "reference_date",  # DateField -> will copy the date object
+                    "amount",  # DecimalField -> will copy the decimal
+                    "description",  # CharField -> will copy the string
+                    "notes",  # TextField -> will copy the string
+                    "category",  # ForeignKey -> will copy the ID
+                ]
+                m2m_fields_to_copy = [
+                    "tags",  # ManyToManyField -> will copy list of IDs
+                    "entities",  # ManyToManyField -> will copy list of IDs
+                ]
+
+                # Copy direct fields from the saved instance
+                for field_name in direct_fields_to_copy:
+                    value = getattr(saved_instance, field_name, None)
+                    if value is not None:
+                        # Handle ForeignKey: use the pk
+                        if hasattr(value, "pk"):
+                            initial_data[field_name] = value.pk
+                        # Handle Date/DateTime/Decimal/Boolean/etc.: use the Python object directly
+                        else:
+                            initial_data[field_name] = (
+                                value  # This correctly handles date objects!
+                            )
+
+                # Copy M2M fields: provide a list of related object pks
+                for field_name in m2m_fields_to_copy:
+                    m2m_manager = getattr(saved_instance, field_name)
+                    initial_data[field_name] = list(
+                        m2m_manager.values_list("name", flat=True)
+                    )
+
+                # Create a new form instance pre-filled with the correctly typed initial data
+                form = TransactionForm(initial=initial_data)
+                update = True  # Signal HTMX to update the form area
+
     else:
         form = TransactionForm(
             initial={
@@ -61,11 +116,15 @@ def transaction_add(request):
             },
         )
 
-    return render(
+    response = render(
         request,
         "transactions/fragments/add.html",
         {"form": form},
     )
+    if update:
+        response["HX-Trigger"] = "updated"
+
+    return response
 
 
 @login_required
@@ -329,6 +388,26 @@ def transaction_pay(request, transaction_id):
     return response
 
 
+@only_htmx
+@login_required
+@require_http_methods(["GET"])
+def transaction_mute(request, transaction_id):
+    transaction = get_object_or_404(Transaction, pk=transaction_id)
+
+    new_mute = False if transaction.mute else True
+    transaction.mute = new_mute
+    transaction.save()
+    transaction_updated.send(sender=transaction)
+
+    response = render(
+        request,
+        "transactions/fragments/item.html",
+        context={"transaction": transaction, **request.GET},
+    )
+    response.headers["HX-Trigger"] = "selective_update"
+    return response
+
+
 @login_required
 @require_http_methods(["GET"])
 def transaction_all_index(request):
@@ -527,11 +606,26 @@ def get_recent_transactions(request, filter_type=None):
     # Get search term from query params
     search_term = request.GET.get("q", "").strip()
 
+    today = timezone.localdate(timezone.now())
+    yesterday = today - timezone.timedelta(days=1)
+    tomorrow = today + timezone.timedelta(days=1)
+
     # Base queryset with selected fields
     queryset = (
         Transaction.objects.filter(deleted=False)
+        .annotate(
+            date_order=Case(
+                When(date=today, then=Value(0)),
+                When(date=tomorrow, then=Value(1)),
+                When(date=yesterday, then=Value(2)),
+                When(date__gt=tomorrow, then=Value(3)),
+                When(date__lt=yesterday, then=Value(4)),
+                default=Value(5),
+                output_field=IntegerField(),
+            )
+        )
         .select_related("account", "category")
-        .order_by("-created_at")
+        .order_by("date_order", "date", "id")
     )
 
     if filter_type:

app/apps/users/forms.py

@@ -2,7 +2,7 @@ from crispy_forms.bootstrap import (
     FormActions,
 )
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Layout, Submit, Row, Column, Field, Div
+from crispy_forms.layout import Layout, Submit, Row, Column, Field, Div, HTML
 from django import forms
 from django.contrib.auth import get_user_model
 from django.contrib.auth.forms import (
@@ -115,6 +115,7 @@ class UserSettingsForm(forms.ModelForm):
             "date_format",
             "datetime_format",
             "number_format",
+            "volume",
         ]
 
     def __init__(self, *args, **kwargs):
@@ -126,10 +127,14 @@ class UserSettingsForm(forms.ModelForm):
         self.helper.layout = Layout(
             "language",
             "timezone",
+            HTML("<hr />"),
             "date_format",
             "datetime_format",
             "number_format",
+            HTML("<hr />"),
             "start_page",
+            HTML("<hr />"),
+            "volume",
             FormActions(
                 NoClassSubmit(
                     "submit", _("Save"), css_class="btn btn-outline-primary w-100"

app/apps/users/migrations/0022_usersettings_volume_alter_usersettings_timezone.py

@@ -0,0 +1,479 @@
+# Generated by Django 5.1.1 on 2025-06-29 00:48
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("users", "0021_alter_usersettings_timezone"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="usersettings",
+            name="volume",
+            field=models.PositiveIntegerField(
+                default=10,
+                validators=[
+                    django.core.validators.MinValueValidator(1),
+                    django.core.validators.MaxValueValidator(10),
+                ],
+                verbose_name="Volume",
+            ),
+        ),
+        migrations.AlterField(
+            model_name="usersettings",
+            name="timezone",
+            field=models.CharField(
+                choices=[
+                    ("auto", "Auto"),
+                    ("Africa/Abidjan", "Africa/Abidjan"),
+                    ("Africa/Accra", "Africa/Accra"),
+                    ("Africa/Addis_Ababa", "Africa/Addis_Ababa"),
+                    ("Africa/Algiers", "Africa/Algiers"),
+                    ("Africa/Asmara", "Africa/Asmara"),
+                    ("Africa/Bamako", "Africa/Bamako"),
+                    ("Africa/Bangui", "Africa/Bangui"),
+                    ("Africa/Banjul", "Africa/Banjul"),
+                    ("Africa/Bissau", "Africa/Bissau"),
+                    ("Africa/Blantyre", "Africa/Blantyre"),
+                    ("Africa/Brazzaville", "Africa/Brazzaville"),
+                    ("Africa/Bujumbura", "Africa/Bujumbura"),
+                    ("Africa/Cairo", "Africa/Cairo"),
+                    ("Africa/Casablanca", "Africa/Casablanca"),
+                    ("Africa/Ceuta", "Africa/Ceuta"),
+                    ("Africa/Conakry", "Africa/Conakry"),
+                    ("Africa/Dakar", "Africa/Dakar"),
+                    ("Africa/Dar_es_Salaam", "Africa/Dar_es_Salaam"),
+                    ("Africa/Djibouti", "Africa/Djibouti"),
+                    ("Africa/Douala", "Africa/Douala"),
+                    ("Africa/El_Aaiun", "Africa/El_Aaiun"),
+                    ("Africa/Freetown", "Africa/Freetown"),
+                    ("Africa/Gaborone", "Africa/Gaborone"),
+                    ("Africa/Harare", "Africa/Harare"),
+                    ("Africa/Johannesburg", "Africa/Johannesburg"),
+                    ("Africa/Juba", "Africa/Juba"),
+                    ("Africa/Kampala", "Africa/Kampala"),
+                    ("Africa/Khartoum", "Africa/Khartoum"),
+                    ("Africa/Kigali", "Africa/Kigali"),
+                    ("Africa/Kinshasa", "Africa/Kinshasa"),
+                    ("Africa/Lagos", "Africa/Lagos"),
+                    ("Africa/Libreville", "Africa/Libreville"),
+                    ("Africa/Lome", "Africa/Lome"),
+                    ("Africa/Luanda", "Africa/Luanda"),
+                    ("Africa/Lubumbashi", "Africa/Lubumbashi"),
+                    ("Africa/Lusaka", "Africa/Lusaka"),
+                    ("Africa/Malabo", "Africa/Malabo"),
+                    ("Africa/Maputo", "Africa/Maputo"),
+                    ("Africa/Maseru", "Africa/Maseru"),
+                    ("Africa/Mbabane", "Africa/Mbabane"),
+                    ("Africa/Mogadishu", "Africa/Mogadishu"),
+                    ("Africa/Monrovia", "Africa/Monrovia"),
+                    ("Africa/Nairobi", "Africa/Nairobi"),
+                    ("Africa/Ndjamena", "Africa/Ndjamena"),
+                    ("Africa/Niamey", "Africa/Niamey"),
+                    ("Africa/Nouakchott", "Africa/Nouakchott"),
+                    ("Africa/Ouagadougou", "Africa/Ouagadougou"),
+                    ("Africa/Porto-Novo", "Africa/Porto-Novo"),
+                    ("Africa/Sao_Tome", "Africa/Sao_Tome"),
+                    ("Africa/Tripoli", "Africa/Tripoli"),
+                    ("Africa/Tunis", "Africa/Tunis"),
+                    ("Africa/Windhoek", "Africa/Windhoek"),
+                    ("America/Adak", "America/Adak"),
+                    ("America/Anchorage", "America/Anchorage"),
+                    ("America/Anguilla", "America/Anguilla"),
+                    ("America/Antigua", "America/Antigua"),
+                    ("America/Araguaina", "America/Araguaina"),
+                    (
+                        "America/Argentina/Buenos_Aires",
+                        "America/Argentina/Buenos_Aires",
+                    ),
+                    ("America/Argentina/Catamarca", "America/Argentina/Catamarca"),
+                    ("America/Argentina/Cordoba", "America/Argentina/Cordoba"),
+                    ("America/Argentina/Jujuy", "America/Argentina/Jujuy"),
+                    ("America/Argentina/La_Rioja", "America/Argentina/La_Rioja"),
+                    ("America/Argentina/Mendoza", "America/Argentina/Mendoza"),
+                    (
+                        "America/Argentina/Rio_Gallegos",
+                        "America/Argentina/Rio_Gallegos",
+                    ),
+                    ("America/Argentina/Salta", "America/Argentina/Salta"),
+                    ("America/Argentina/San_Juan", "America/Argentina/San_Juan"),
+                    ("America/Argentina/San_Luis", "America/Argentina/San_Luis"),
+                    ("America/Argentina/Tucuman", "America/Argentina/Tucuman"),
+                    ("America/Argentina/Ushuaia", "America/Argentina/Ushuaia"),
+                    ("America/Aruba", "America/Aruba"),
+                    ("America/Asuncion", "America/Asuncion"),
+                    ("America/Atikokan", "America/Atikokan"),
+                    ("America/Bahia", "America/Bahia"),
+                    ("America/Bahia_Banderas", "America/Bahia_Banderas"),
+                    ("America/Barbados", "America/Barbados"),
+                    ("America/Belem", "America/Belem"),
+                    ("America/Belize", "America/Belize"),
+                    ("America/Blanc-Sablon", "America/Blanc-Sablon"),
+                    ("America/Boa_Vista", "America/Boa_Vista"),
+                    ("America/Bogota", "America/Bogota"),
+                    ("America/Boise", "America/Boise"),
+                    ("America/Cambridge_Bay", "America/Cambridge_Bay"),
+                    ("America/Campo_Grande", "America/Campo_Grande"),
+                    ("America/Cancun", "America/Cancun"),
+                    ("America/Caracas", "America/Caracas"),
+                    ("America/Cayenne", "America/Cayenne"),
+                    ("America/Cayman", "America/Cayman"),
+                    ("America/Chicago", "America/Chicago"),
+                    ("America/Chihuahua", "America/Chihuahua"),
+                    ("America/Ciudad_Juarez", "America/Ciudad_Juarez"),
+                    ("America/Costa_Rica", "America/Costa_Rica"),
+                    ("America/Creston", "America/Creston"),
+                    ("America/Cuiaba", "America/Cuiaba"),
+                    ("America/Curacao", "America/Curacao"),
+                    ("America/Danmarkshavn", "America/Danmarkshavn"),
+                    ("America/Dawson", "America/Dawson"),
+                    ("America/Dawson_Creek", "America/Dawson_Creek"),
+                    ("America/Denver", "America/Denver"),
+                    ("America/Detroit", "America/Detroit"),
+                    ("America/Dominica", "America/Dominica"),
+                    ("America/Edmonton", "America/Edmonton"),
+                    ("America/Eirunepe", "America/Eirunepe"),
+                    ("America/El_Salvador", "America/El_Salvador"),
+                    ("America/Fort_Nelson", "America/Fort_Nelson"),
+                    ("America/Fortaleza", "America/Fortaleza"),
+                    ("America/Glace_Bay", "America/Glace_Bay"),
+                    ("America/Goose_Bay", "America/Goose_Bay"),
+                    ("America/Grand_Turk", "America/Grand_Turk"),
+                    ("America/Grenada", "America/Grenada"),
+                    ("America/Guadeloupe", "America/Guadeloupe"),
+                    ("America/Guatemala", "America/Guatemala"),
+                    ("America/Guayaquil", "America/Guayaquil"),
+                    ("America/Guyana", "America/Guyana"),
+                    ("America/Halifax", "America/Halifax"),
+                    ("America/Havana", "America/Havana"),
+                    ("America/Hermosillo", "America/Hermosillo"),
+                    ("America/Indiana/Indianapolis", "America/Indiana/Indianapolis"),
+                    ("America/Indiana/Knox", "America/Indiana/Knox"),
+                    ("America/Indiana/Marengo", "America/Indiana/Marengo"),
+                    ("America/Indiana/Petersburg", "America/Indiana/Petersburg"),
+                    ("America/Indiana/Tell_City", "America/Indiana/Tell_City"),
+                    ("America/Indiana/Vevay", "America/Indiana/Vevay"),
+                    ("America/Indiana/Vincennes", "America/Indiana/Vincennes"),
+                    ("America/Indiana/Winamac", "America/Indiana/Winamac"),
+                    ("America/Inuvik", "America/Inuvik"),
+                    ("America/Iqaluit", "America/Iqaluit"),
+                    ("America/Jamaica", "America/Jamaica"),
+                    ("America/Juneau", "America/Juneau"),
+                    ("America/Kentucky/Louisville", "America/Kentucky/Louisville"),
+                    ("America/Kentucky/Monticello", "America/Kentucky/Monticello"),
+                    ("America/Kralendijk", "America/Kralendijk"),
+                    ("America/La_Paz", "America/La_Paz"),
+                    ("America/Lima", "America/Lima"),
+                    ("America/Los_Angeles", "America/Los_Angeles"),
+                    ("America/Lower_Princes", "America/Lower_Princes"),
+                    ("America/Maceio", "America/Maceio"),
+                    ("America/Managua", "America/Managua"),
+                    ("America/Manaus", "America/Manaus"),
+                    ("America/Marigot", "America/Marigot"),
+                    ("America/Martinique", "America/Martinique"),
+                    ("America/Matamoros", "America/Matamoros"),
+                    ("America/Mazatlan", "America/Mazatlan"),
+                    ("America/Menominee", "America/Menominee"),
+                    ("America/Merida", "America/Merida"),
+                    ("America/Metlakatla", "America/Metlakatla"),
+                    ("America/Mexico_City", "America/Mexico_City"),
+                    ("America/Miquelon", "America/Miquelon"),
+                    ("America/Moncton", "America/Moncton"),
+                    ("America/Monterrey", "America/Monterrey"),
+                    ("America/Montevideo", "America/Montevideo"),
+                    ("America/Montserrat", "America/Montserrat"),
+                    ("America/Nassau", "America/Nassau"),
+                    ("America/New_York", "America/New_York"),
+                    ("America/Nome", "America/Nome"),
+                    ("America/Noronha", "America/Noronha"),
+                    ("America/North_Dakota/Beulah", "America/North_Dakota/Beulah"),
+                    ("America/North_Dakota/Center", "America/North_Dakota/Center"),
+                    (
+                        "America/North_Dakota/New_Salem",
+                        "America/North_Dakota/New_Salem",
+                    ),
+                    ("America/Nuuk", "America/Nuuk"),
+                    ("America/Ojinaga", "America/Ojinaga"),
+                    ("America/Panama", "America/Panama"),
+                    ("America/Paramaribo", "America/Paramaribo"),
+                    ("America/Phoenix", "America/Phoenix"),
+                    ("America/Port-au-Prince", "America/Port-au-Prince"),
+                    ("America/Port_of_Spain", "America/Port_of_Spain"),
+                    ("America/Porto_Velho", "America/Porto_Velho"),
+                    ("America/Puerto_Rico", "America/Puerto_Rico"),
+                    ("America/Punta_Arenas", "America/Punta_Arenas"),
+                    ("America/Rankin_Inlet", "America/Rankin_Inlet"),
+                    ("America/Recife", "America/Recife"),
+                    ("America/Regina", "America/Regina"),
+                    ("America/Resolute", "America/Resolute"),
+                    ("America/Rio_Branco", "America/Rio_Branco"),
+                    ("America/Santarem", "America/Santarem"),
+                    ("America/Santiago", "America/Santiago"),
+                    ("America/Santo_Domingo", "America/Santo_Domingo"),
+                    ("America/Sao_Paulo", "America/Sao_Paulo"),
+                    ("America/Scoresbysund", "America/Scoresbysund"),
+                    ("America/Sitka", "America/Sitka"),
+                    ("America/St_Barthelemy", "America/St_Barthelemy"),
+                    ("America/St_Johns", "America/St_Johns"),
+                    ("America/St_Kitts", "America/St_Kitts"),
+                    ("America/St_Lucia", "America/St_Lucia"),
+                    ("America/St_Thomas", "America/St_Thomas"),
+                    ("America/St_Vincent", "America/St_Vincent"),
+                    ("America/Swift_Current", "America/Swift_Current"),
+                    ("America/Tegucigalpa", "America/Tegucigalpa"),
+                    ("America/Thule", "America/Thule"),
+                    ("America/Tijuana", "America/Tijuana"),
+                    ("America/Toronto", "America/Toronto"),
+                    ("America/Tortola", "America/Tortola"),
+                    ("America/Vancouver", "America/Vancouver"),
+                    ("America/Whitehorse", "America/Whitehorse"),
+                    ("America/Winnipeg", "America/Winnipeg"),
+                    ("America/Yakutat", "America/Yakutat"),
+                    ("Antarctica/Casey", "Antarctica/Casey"),
+                    ("Antarctica/Davis", "Antarctica/Davis"),
+                    ("Antarctica/DumontDUrville", "Antarctica/DumontDUrville"),
+                    ("Antarctica/Macquarie", "Antarctica/Macquarie"),
+                    ("Antarctica/Mawson", "Antarctica/Mawson"),
+                    ("Antarctica/McMurdo", "Antarctica/McMurdo"),
+                    ("Antarctica/Palmer", "Antarctica/Palmer"),
+                    ("Antarctica/Rothera", "Antarctica/Rothera"),
+                    ("Antarctica/Syowa", "Antarctica/Syowa"),
+                    ("Antarctica/Troll", "Antarctica/Troll"),
+                    ("Antarctica/Vostok", "Antarctica/Vostok"),
+                    ("Arctic/Longyearbyen", "Arctic/Longyearbyen"),
+                    ("Asia/Aden", "Asia/Aden"),
+                    ("Asia/Almaty", "Asia/Almaty"),
+                    ("Asia/Amman", "Asia/Amman"),
+                    ("Asia/Anadyr", "Asia/Anadyr"),
+                    ("Asia/Aqtau", "Asia/Aqtau"),
+                    ("Asia/Aqtobe", "Asia/Aqtobe"),
+                    ("Asia/Ashgabat", "Asia/Ashgabat"),
+                    ("Asia/Atyrau", "Asia/Atyrau"),
+                    ("Asia/Baghdad", "Asia/Baghdad"),
+                    ("Asia/Bahrain", "Asia/Bahrain"),
+                    ("Asia/Baku", "Asia/Baku"),
+                    ("Asia/Bangkok", "Asia/Bangkok"),
+                    ("Asia/Barnaul", "Asia/Barnaul"),
+                    ("Asia/Beirut", "Asia/Beirut"),
+                    ("Asia/Bishkek", "Asia/Bishkek"),
+                    ("Asia/Brunei", "Asia/Brunei"),
+                    ("Asia/Chita", "Asia/Chita"),
+                    ("Asia/Colombo", "Asia/Colombo"),
+                    ("Asia/Damascus", "Asia/Damascus"),
+                    ("Asia/Dhaka", "Asia/Dhaka"),
+                    ("Asia/Dili", "Asia/Dili"),
+                    ("Asia/Dubai", "Asia/Dubai"),
+                    ("Asia/Dushanbe", "Asia/Dushanbe"),
+                    ("Asia/Famagusta", "Asia/Famagusta"),
+                    ("Asia/Gaza", "Asia/Gaza"),
+                    ("Asia/Hebron", "Asia/Hebron"),
+                    ("Asia/Ho_Chi_Minh", "Asia/Ho_Chi_Minh"),
+                    ("Asia/Hong_Kong", "Asia/Hong_Kong"),
+                    ("Asia/Hovd", "Asia/Hovd"),
+                    ("Asia/Irkutsk", "Asia/Irkutsk"),
+                    ("Asia/Jakarta", "Asia/Jakarta"),
+                    ("Asia/Jayapura", "Asia/Jayapura"),
+                    ("Asia/Jerusalem", "Asia/Jerusalem"),
+                    ("Asia/Kabul", "Asia/Kabul"),
+                    ("Asia/Kamchatka", "Asia/Kamchatka"),
+                    ("Asia/Karachi", "Asia/Karachi"),
+                    ("Asia/Kathmandu", "Asia/Kathmandu"),
+                    ("Asia/Khandyga", "Asia/Khandyga"),
+                    ("Asia/Kolkata", "Asia/Kolkata"),
+                    ("Asia/Krasnoyarsk", "Asia/Krasnoyarsk"),
+                    ("Asia/Kuala_Lumpur", "Asia/Kuala_Lumpur"),
+                    ("Asia/Kuching", "Asia/Kuching"),
+                    ("Asia/Kuwait", "Asia/Kuwait"),
+                    ("Asia/Macau", "Asia/Macau"),
+                    ("Asia/Magadan", "Asia/Magadan"),
+                    ("Asia/Makassar", "Asia/Makassar"),
+                    ("Asia/Manila", "Asia/Manila"),
+                    ("Asia/Muscat", "Asia/Muscat"),
+                    ("Asia/Nicosia", "Asia/Nicosia"),
+                    ("Asia/Novokuznetsk", "Asia/Novokuznetsk"),
+                    ("Asia/Novosibirsk", "Asia/Novosibirsk"),
+                    ("Asia/Omsk", "Asia/Omsk"),
+                    ("Asia/Oral", "Asia/Oral"),
+                    ("Asia/Phnom_Penh", "Asia/Phnom_Penh"),
+                    ("Asia/Pontianak", "Asia/Pontianak"),
+                    ("Asia/Pyongyang", "Asia/Pyongyang"),
+                    ("Asia/Qatar", "Asia/Qatar"),
+                    ("Asia/Qostanay", "Asia/Qostanay"),
+                    ("Asia/Qyzylorda", "Asia/Qyzylorda"),
+                    ("Asia/Riyadh", "Asia/Riyadh"),
+                    ("Asia/Sakhalin", "Asia/Sakhalin"),
+                    ("Asia/Samarkand", "Asia/Samarkand"),
+                    ("Asia/Seoul", "Asia/Seoul"),
+                    ("Asia/Shanghai", "Asia/Shanghai"),
+                    ("Asia/Singapore", "Asia/Singapore"),
+                    ("Asia/Srednekolymsk", "Asia/Srednekolymsk"),
+                    ("Asia/Taipei", "Asia/Taipei"),
+                    ("Asia/Tashkent", "Asia/Tashkent"),
+                    ("Asia/Tbilisi", "Asia/Tbilisi"),
+                    ("Asia/Tehran", "Asia/Tehran"),
+                    ("Asia/Thimphu", "Asia/Thimphu"),
+                    ("Asia/Tokyo", "Asia/Tokyo"),
+                    ("Asia/Tomsk", "Asia/Tomsk"),
+                    ("Asia/Ulaanbaatar", "Asia/Ulaanbaatar"),
+                    ("Asia/Urumqi", "Asia/Urumqi"),
+                    ("Asia/Ust-Nera", "Asia/Ust-Nera"),
+                    ("Asia/Vientiane", "Asia/Vientiane"),
+                    ("Asia/Vladivostok", "Asia/Vladivostok"),
+                    ("Asia/Yakutsk", "Asia/Yakutsk"),
+                    ("Asia/Yangon", "Asia/Yangon"),
+                    ("Asia/Yekaterinburg", "Asia/Yekaterinburg"),
+                    ("Asia/Yerevan", "Asia/Yerevan"),
+                    ("Atlantic/Azores", "Atlantic/Azores"),
+                    ("Atlantic/Bermuda", "Atlantic/Bermuda"),
+                    ("Atlantic/Canary", "Atlantic/Canary"),
+                    ("Atlantic/Cape_Verde", "Atlantic/Cape_Verde"),
+                    ("Atlantic/Faroe", "Atlantic/Faroe"),
+                    ("Atlantic/Madeira", "Atlantic/Madeira"),
+                    ("Atlantic/Reykjavik", "Atlantic/Reykjavik"),
+                    ("Atlantic/South_Georgia", "Atlantic/South_Georgia"),
+                    ("Atlantic/St_Helena", "Atlantic/St_Helena"),
+                    ("Atlantic/Stanley", "Atlantic/Stanley"),
+                    ("Australia/Adelaide", "Australia/Adelaide"),
+                    ("Australia/Brisbane", "Australia/Brisbane"),
+                    ("Australia/Broken_Hill", "Australia/Broken_Hill"),
+                    ("Australia/Darwin", "Australia/Darwin"),
+                    ("Australia/Eucla", "Australia/Eucla"),
+                    ("Australia/Hobart", "Australia/Hobart"),
+                    ("Australia/Lindeman", "Australia/Lindeman"),
+                    ("Australia/Lord_Howe", "Australia/Lord_Howe"),
+                    ("Australia/Melbourne", "Australia/Melbourne"),
+                    ("Australia/Perth", "Australia/Perth"),
+                    ("Australia/Sydney", "Australia/Sydney"),
+                    ("Canada/Atlantic", "Canada/Atlantic"),
+                    ("Canada/Central", "Canada/Central"),
+                    ("Canada/Eastern", "Canada/Eastern"),
+                    ("Canada/Mountain", "Canada/Mountain"),
+                    ("Canada/Newfoundland", "Canada/Newfoundland"),
+                    ("Canada/Pacific", "Canada/Pacific"),
+                    ("Europe/Amsterdam", "Europe/Amsterdam"),
+                    ("Europe/Andorra", "Europe/Andorra"),
+                    ("Europe/Astrakhan", "Europe/Astrakhan"),
+                    ("Europe/Athens", "Europe/Athens"),
+                    ("Europe/Belgrade", "Europe/Belgrade"),
+                    ("Europe/Berlin", "Europe/Berlin"),
+                    ("Europe/Bratislava", "Europe/Bratislava"),
+                    ("Europe/Brussels", "Europe/Brussels"),
+                    ("Europe/Bucharest", "Europe/Bucharest"),
+                    ("Europe/Budapest", "Europe/Budapest"),
+                    ("Europe/Busingen", "Europe/Busingen"),
+                    ("Europe/Chisinau", "Europe/Chisinau"),
+                    ("Europe/Copenhagen", "Europe/Copenhagen"),
+                    ("Europe/Dublin", "Europe/Dublin"),
+                    ("Europe/Gibraltar", "Europe/Gibraltar"),
+                    ("Europe/Guernsey", "Europe/Guernsey"),
+                    ("Europe/Helsinki", "Europe/Helsinki"),
+                    ("Europe/Isle_of_Man", "Europe/Isle_of_Man"),
+                    ("Europe/Istanbul", "Europe/Istanbul"),
+                    ("Europe/Jersey", "Europe/Jersey"),
+                    ("Europe/Kaliningrad", "Europe/Kaliningrad"),
+                    ("Europe/Kirov", "Europe/Kirov"),
+                    ("Europe/Kyiv", "Europe/Kyiv"),
+                    ("Europe/Lisbon", "Europe/Lisbon"),
+                    ("Europe/Ljubljana", "Europe/Ljubljana"),
+                    ("Europe/London", "Europe/London"),
+                    ("Europe/Luxembourg", "Europe/Luxembourg"),
+                    ("Europe/Madrid", "Europe/Madrid"),
+                    ("Europe/Malta", "Europe/Malta"),
+                    ("Europe/Mariehamn", "Europe/Mariehamn"),
+                    ("Europe/Minsk", "Europe/Minsk"),
+                    ("Europe/Monaco", "Europe/Monaco"),
+                    ("Europe/Moscow", "Europe/Moscow"),
+                    ("Europe/Oslo", "Europe/Oslo"),
+                    ("Europe/Paris", "Europe/Paris"),
+                    ("Europe/Podgorica", "Europe/Podgorica"),
+                    ("Europe/Prague", "Europe/Prague"),
+                    ("Europe/Riga", "Europe/Riga"),
+                    ("Europe/Rome", "Europe/Rome"),
+                    ("Europe/Samara", "Europe/Samara"),
+                    ("Europe/San_Marino", "Europe/San_Marino"),
+                    ("Europe/Sarajevo", "Europe/Sarajevo"),
+                    ("Europe/Saratov", "Europe/Saratov"),
+                    ("Europe/Simferopol", "Europe/Simferopol"),
+                    ("Europe/Skopje", "Europe/Skopje"),
+                    ("Europe/Sofia", "Europe/Sofia"),
+                    ("Europe/Stockholm", "Europe/Stockholm"),
+                    ("Europe/Tallinn", "Europe/Tallinn"),
+                    ("Europe/Tirane", "Europe/Tirane"),
+                    ("Europe/Ulyanovsk", "Europe/Ulyanovsk"),
+                    ("Europe/Vaduz", "Europe/Vaduz"),
+                    ("Europe/Vatican", "Europe/Vatican"),
+                    ("Europe/Vienna", "Europe/Vienna"),
+                    ("Europe/Vilnius", "Europe/Vilnius"),
+                    ("Europe/Volgograd", "Europe/Volgograd"),
+                    ("Europe/Warsaw", "Europe/Warsaw"),
+                    ("Europe/Zagreb", "Europe/Zagreb"),
+                    ("Europe/Zurich", "Europe/Zurich"),
+                    ("GMT", "GMT"),
+                    ("Indian/Antananarivo", "Indian/Antananarivo"),
+                    ("Indian/Chagos", "Indian/Chagos"),
+                    ("Indian/Christmas", "Indian/Christmas"),
+                    ("Indian/Cocos", "Indian/Cocos"),
+                    ("Indian/Comoro", "Indian/Comoro"),
+                    ("Indian/Kerguelen", "Indian/Kerguelen"),
+                    ("Indian/Mahe", "Indian/Mahe"),
+                    ("Indian/Maldives", "Indian/Maldives"),
+                    ("Indian/Mauritius", "Indian/Mauritius"),
+                    ("Indian/Mayotte", "Indian/Mayotte"),
+                    ("Indian/Reunion", "Indian/Reunion"),
+                    ("Pacific/Apia", "Pacific/Apia"),
+                    ("Pacific/Auckland", "Pacific/Auckland"),
+                    ("Pacific/Bougainville", "Pacific/Bougainville"),
+                    ("Pacific/Chatham", "Pacific/Chatham"),
+                    ("Pacific/Chuuk", "Pacific/Chuuk"),
+                    ("Pacific/Easter", "Pacific/Easter"),
+                    ("Pacific/Efate", "Pacific/Efate"),
+                    ("Pacific/Fakaofo", "Pacific/Fakaofo"),
+                    ("Pacific/Fiji", "Pacific/Fiji"),
+                    ("Pacific/Funafuti", "Pacific/Funafuti"),
+                    ("Pacific/Galapagos", "Pacific/Galapagos"),
+                    ("Pacific/Gambier", "Pacific/Gambier"),
+                    ("Pacific/Guadalcanal", "Pacific/Guadalcanal"),
+                    ("Pacific/Guam", "Pacific/Guam"),
+                    ("Pacific/Honolulu", "Pacific/Honolulu"),
+                    ("Pacific/Kanton", "Pacific/Kanton"),
+                    ("Pacific/Kiritimati", "Pacific/Kiritimati"),
+                    ("Pacific/Kosrae", "Pacific/Kosrae"),
+                    ("Pacific/Kwajalein", "Pacific/Kwajalein"),
+                    ("Pacific/Majuro", "Pacific/Majuro"),
+                    ("Pacific/Marquesas", "Pacific/Marquesas"),
+                    ("Pacific/Midway", "Pacific/Midway"),
+                    ("Pacific/Nauru", "Pacific/Nauru"),
+                    ("Pacific/Niue", "Pacific/Niue"),
+                    ("Pacific/Norfolk", "Pacific/Norfolk"),
+                    ("Pacific/Noumea", "Pacific/Noumea"),
+                    ("Pacific/Pago_Pago", "Pacific/Pago_Pago"),
+                    ("Pacific/Palau", "Pacific/Palau"),
+                    ("Pacific/Pitcairn", "Pacific/Pitcairn"),
+                    ("Pacific/Pohnpei", "Pacific/Pohnpei"),
+                    ("Pacific/Port_Moresby", "Pacific/Port_Moresby"),
+                    ("Pacific/Rarotonga", "Pacific/Rarotonga"),
+                    ("Pacific/Saipan", "Pacific/Saipan"),
+                    ("Pacific/Tahiti", "Pacific/Tahiti"),
+                    ("Pacific/Tarawa", "Pacific/Tarawa"),
+                    ("Pacific/Tongatapu", "Pacific/Tongatapu"),
+                    ("Pacific/Wake", "Pacific/Wake"),
+                    ("Pacific/Wallis", "Pacific/Wallis"),
+                    ("US/Alaska", "US/Alaska"),
+                    ("US/Arizona", "US/Arizona"),
+                    ("US/Central", "US/Central"),
+                    ("US/Eastern", "US/Eastern"),
+                    ("US/Hawaii", "US/Hawaii"),
+                    ("US/Mountain", "US/Mountain"),
+                    ("US/Pacific", "US/Pacific"),
+                    ("UTC", "UTC"),
+                ],
+                default="auto",
+                max_length=50,
+                verbose_name="Time Zone",
+            ),
+        ),
+    ]

app/apps/users/models.py

@@ -2,11 +2,449 @@ import pytz
 from django.conf import settings
 from django.contrib.auth import get_user_model
 from django.contrib.auth.models import AbstractUser, Group
+from django.core.validators import MaxValueValidator, MinValueValidator
 from django.db import models
 from django.utils.translation import gettext_lazy as _
 
 from apps.users.managers import UserManager
 
+timezones = [
+    ("auto", _("Auto")),
+    ("Africa/Abidjan", "Africa/Abidjan"),
+    ("Africa/Accra", "Africa/Accra"),
+    ("Africa/Addis_Ababa", "Africa/Addis_Ababa"),
+    ("Africa/Algiers", "Africa/Algiers"),
+    ("Africa/Asmara", "Africa/Asmara"),
+    ("Africa/Bamako", "Africa/Bamako"),
+    ("Africa/Bangui", "Africa/Bangui"),
+    ("Africa/Banjul", "Africa/Banjul"),
+    ("Africa/Bissau", "Africa/Bissau"),
+    ("Africa/Blantyre", "Africa/Blantyre"),
+    ("Africa/Brazzaville", "Africa/Brazzaville"),
+    ("Africa/Bujumbura", "Africa/Bujumbura"),
+    ("Africa/Cairo", "Africa/Cairo"),
+    ("Africa/Casablanca", "Africa/Casablanca"),
+    ("Africa/Ceuta", "Africa/Ceuta"),
+    ("Africa/Conakry", "Africa/Conakry"),
+    ("Africa/Dakar", "Africa/Dakar"),
+    ("Africa/Dar_es_Salaam", "Africa/Dar_es_Salaam"),
+    ("Africa/Djibouti", "Africa/Djibouti"),
+    ("Africa/Douala", "Africa/Douala"),
+    ("Africa/El_Aaiun", "Africa/El_Aaiun"),
+    ("Africa/Freetown", "Africa/Freetown"),
+    ("Africa/Gaborone", "Africa/Gaborone"),
+    ("Africa/Harare", "Africa/Harare"),
+    ("Africa/Johannesburg", "Africa/Johannesburg"),
+    ("Africa/Juba", "Africa/Juba"),
+    ("Africa/Kampala", "Africa/Kampala"),
+    ("Africa/Khartoum", "Africa/Khartoum"),
+    ("Africa/Kigali", "Africa/Kigali"),
+    ("Africa/Kinshasa", "Africa/Kinshasa"),
+    ("Africa/Lagos", "Africa/Lagos"),
+    ("Africa/Libreville", "Africa/Libreville"),
+    ("Africa/Lome", "Africa/Lome"),
+    ("Africa/Luanda", "Africa/Luanda"),
+    ("Africa/Lubumbashi", "Africa/Lubumbashi"),
+    ("Africa/Lusaka", "Africa/Lusaka"),
+    ("Africa/Malabo", "Africa/Malabo"),
+    ("Africa/Maputo", "Africa/Maputo"),
+    ("Africa/Maseru", "Africa/Maseru"),
+    ("Africa/Mbabane", "Africa/Mbabane"),
+    ("Africa/Mogadishu", "Africa/Mogadishu"),
+    ("Africa/Monrovia", "Africa/Monrovia"),
+    ("Africa/Nairobi", "Africa/Nairobi"),
+    ("Africa/Ndjamena", "Africa/Ndjamena"),
+    ("Africa/Niamey", "Africa/Niamey"),
+    ("Africa/Nouakchott", "Africa/Nouakchott"),
+    ("Africa/Ouagadougou", "Africa/Ouagadougou"),
+    ("Africa/Porto-Novo", "Africa/Porto-Novo"),
+    ("Africa/Sao_Tome", "Africa/Sao_Tome"),
+    ("Africa/Tripoli", "Africa/Tripoli"),
+    ("Africa/Tunis", "Africa/Tunis"),
+    ("Africa/Windhoek", "Africa/Windhoek"),
+    ("America/Adak", "America/Adak"),
+    ("America/Anchorage", "America/Anchorage"),
+    ("America/Anguilla", "America/Anguilla"),
+    ("America/Antigua", "America/Antigua"),
+    ("America/Araguaina", "America/Araguaina"),
+    ("America/Argentina/Buenos_Aires", "America/Argentina/Buenos_Aires"),
+    ("America/Argentina/Catamarca", "America/Argentina/Catamarca"),
+    ("America/Argentina/Cordoba", "America/Argentina/Cordoba"),
+    ("America/Argentina/Jujuy", "America/Argentina/Jujuy"),
+    ("America/Argentina/La_Rioja", "America/Argentina/La_Rioja"),
+    ("America/Argentina/Mendoza", "America/Argentina/Mendoza"),
+    ("America/Argentina/Rio_Gallegos", "America/Argentina/Rio_Gallegos"),
+    ("America/Argentina/Salta", "America/Argentina/Salta"),
+    ("America/Argentina/San_Juan", "America/Argentina/San_Juan"),
+    ("America/Argentina/San_Luis", "America/Argentina/San_Luis"),
+    ("America/Argentina/Tucuman", "America/Argentina/Tucuman"),
+    ("America/Argentina/Ushuaia", "America/Argentina/Ushuaia"),
+    ("America/Aruba", "America/Aruba"),
+    ("America/Asuncion", "America/Asuncion"),
+    ("America/Atikokan", "America/Atikokan"),
+    ("America/Bahia", "America/Bahia"),
+    ("America/Bahia_Banderas", "America/Bahia_Banderas"),
+    ("America/Barbados", "America/Barbados"),
+    ("America/Belem", "America/Belem"),
+    ("America/Belize", "America/Belize"),
+    ("America/Blanc-Sablon", "America/Blanc-Sablon"),
+    ("America/Boa_Vista", "America/Boa_Vista"),
+    ("America/Bogota", "America/Bogota"),
+    ("America/Boise", "America/Boise"),
+    ("America/Cambridge_Bay", "America/Cambridge_Bay"),
+    ("America/Campo_Grande", "America/Campo_Grande"),
+    ("America/Cancun", "America/Cancun"),
+    ("America/Caracas", "America/Caracas"),
+    ("America/Cayenne", "America/Cayenne"),
+    ("America/Cayman", "America/Cayman"),
+    ("America/Chicago", "America/Chicago"),
+    ("America/Chihuahua", "America/Chihuahua"),
+    ("America/Ciudad_Juarez", "America/Ciudad_Juarez"),
+    ("America/Costa_Rica", "America/Costa_Rica"),
+    ("America/Coyhaique", "America/Coyhaique"),
+    ("America/Creston", "America/Creston"),
+    ("America/Cuiaba", "America/Cuiaba"),
+    ("America/Curacao", "America/Curacao"),
+    ("America/Danmarkshavn", "America/Danmarkshavn"),
+    ("America/Dawson", "America/Dawson"),
+    ("America/Dawson_Creek", "America/Dawson_Creek"),
+    ("America/Denver", "America/Denver"),
+    ("America/Detroit", "America/Detroit"),
+    ("America/Dominica", "America/Dominica"),
+    ("America/Edmonton", "America/Edmonton"),
+    ("America/Eirunepe", "America/Eirunepe"),
+    ("America/El_Salvador", "America/El_Salvador"),
+    ("America/Fort_Nelson", "America/Fort_Nelson"),
+    ("America/Fortaleza", "America/Fortaleza"),
+    ("America/Glace_Bay", "America/Glace_Bay"),
+    ("America/Goose_Bay", "America/Goose_Bay"),
+    ("America/Grand_Turk", "America/Grand_Turk"),
+    ("America/Grenada", "America/Grenada"),
+    ("America/Guadeloupe", "America/Guadeloupe"),
+    ("America/Guatemala", "America/Guatemala"),
+    ("America/Guayaquil", "America/Guayaquil"),
+    ("America/Guyana", "America/Guyana"),
+    ("America/Halifax", "America/Halifax"),
+    ("America/Havana", "America/Havana"),
+    ("America/Hermosillo", "America/Hermosillo"),
+    ("America/Indiana/Indianapolis", "America/Indiana/Indianapolis"),
+    ("America/Indiana/Knox", "America/Indiana/Knox"),
+    ("America/Indiana/Marengo", "America/Indiana/Marengo"),
+    ("America/Indiana/Petersburg", "America/Indiana/Petersburg"),
+    ("America/Indiana/Tell_City", "America/Indiana/Tell_City"),
+    ("America/Indiana/Vevay", "America/Indiana/Vevay"),
+    ("America/Indiana/Vincennes", "America/Indiana/Vincennes"),
+    ("America/Indiana/Winamac", "America/Indiana/Winamac"),
+    ("America/Inuvik", "America/Inuvik"),
+    ("America/Iqaluit", "America/Iqaluit"),
+    ("America/Jamaica", "America/Jamaica"),
+    ("America/Juneau", "America/Juneau"),
+    ("America/Kentucky/Louisville", "America/Kentucky/Louisville"),
+    ("America/Kentucky/Monticello", "America/Kentucky/Monticello"),
+    ("America/Kralendijk", "America/Kralendijk"),
+    ("America/La_Paz", "America/La_Paz"),
+    ("America/Lima", "America/Lima"),
+    ("America/Los_Angeles", "America/Los_Angeles"),
+    ("America/Lower_Princes", "America/Lower_Princes"),
+    ("America/Maceio", "America/Maceio"),
+    ("America/Managua", "America/Managua"),
+    ("America/Manaus", "America/Manaus"),
+    ("America/Marigot", "America/Marigot"),
+    ("America/Martinique", "America/Martinique"),
+    ("America/Matamoros", "America/Matamoros"),
+    ("America/Mazatlan", "America/Mazatlan"),
+    ("America/Menominee", "America/Menominee"),
+    ("America/Merida", "America/Merida"),
+    ("America/Metlakatla", "America/Metlakatla"),
+    ("America/Mexico_City", "America/Mexico_City"),
+    ("America/Miquelon", "America/Miquelon"),
+    ("America/Moncton", "America/Moncton"),
+    ("America/Monterrey", "America/Monterrey"),
+    ("America/Montevideo", "America/Montevideo"),
+    ("America/Montserrat", "America/Montserrat"),
+    ("America/Nassau", "America/Nassau"),
+    ("America/New_York", "America/New_York"),
+    ("America/Nome", "America/Nome"),
+    ("America/Noronha", "America/Noronha"),
+    ("America/North_Dakota/Beulah", "America/North_Dakota/Beulah"),
+    ("America/North_Dakota/Center", "America/North_Dakota/Center"),
+    ("America/North_Dakota/New_Salem", "America/North_Dakota/New_Salem"),
+    ("America/Nuuk", "America/Nuuk"),
+    ("America/Ojinaga", "America/Ojinaga"),
+    ("America/Panama", "America/Panama"),
+    ("America/Paramaribo", "America/Paramaribo"),
+    ("America/Phoenix", "America/Phoenix"),
+    ("America/Port-au-Prince", "America/Port-au-Prince"),
+    ("America/Port_of_Spain", "America/Port_of_Spain"),
+    ("America/Porto_Velho", "America/Porto_Velho"),
+    ("America/Puerto_Rico", "America/Puerto_Rico"),
+    ("America/Punta_Arenas", "America/Punta_Arenas"),
+    ("America/Rankin_Inlet", "America/Rankin_Inlet"),
+    ("America/Recife", "America/Recife"),
+    ("America/Regina", "America/Regina"),
+    ("America/Resolute", "America/Resolute"),
+    ("America/Rio_Branco", "America/Rio_Branco"),
+    ("America/Santarem", "America/Santarem"),
+    ("America/Santiago", "America/Santiago"),
+    ("America/Santo_Domingo", "America/Santo_Domingo"),
+    ("America/Sao_Paulo", "America/Sao_Paulo"),
+    ("America/Scoresbysund", "America/Scoresbysund"),
+    ("America/Sitka", "America/Sitka"),
+    ("America/St_Barthelemy", "America/St_Barthelemy"),
+    ("America/St_Johns", "America/St_Johns"),
+    ("America/St_Kitts", "America/St_Kitts"),
+    ("America/St_Lucia", "America/St_Lucia"),
+    ("America/St_Thomas", "America/St_Thomas"),
+    ("America/St_Vincent", "America/St_Vincent"),
+    ("America/Swift_Current", "America/Swift_Current"),
+    ("America/Tegucigalpa", "America/Tegucigalpa"),
+    ("America/Thule", "America/Thule"),
+    ("America/Tijuana", "America/Tijuana"),
+    ("America/Toronto", "America/Toronto"),
+    ("America/Tortola", "America/Tortola"),
+    ("America/Vancouver", "America/Vancouver"),
+    ("America/Whitehorse", "America/Whitehorse"),
+    ("America/Winnipeg", "America/Winnipeg"),
+    ("America/Yakutat", "America/Yakutat"),
+    ("Antarctica/Casey", "Antarctica/Casey"),
+    ("Antarctica/Davis", "Antarctica/Davis"),
+    ("Antarctica/DumontDUrville", "Antarctica/DumontDUrville"),
+    ("Antarctica/Macquarie", "Antarctica/Macquarie"),
+    ("Antarctica/Mawson", "Antarctica/Mawson"),
+    ("Antarctica/McMurdo", "Antarctica/McMurdo"),
+    ("Antarctica/Palmer", "Antarctica/Palmer"),
+    ("Antarctica/Rothera", "Antarctica/Rothera"),
+    ("Antarctica/Syowa", "Antarctica/Syowa"),
+    ("Antarctica/Troll", "Antarctica/Troll"),
+    ("Antarctica/Vostok", "Antarctica/Vostok"),
+    ("Arctic/Longyearbyen", "Arctic/Longyearbyen"),
+    ("Asia/Aden", "Asia/Aden"),
+    ("Asia/Almaty", "Asia/Almaty"),
+    ("Asia/Amman", "Asia/Amman"),
+    ("Asia/Anadyr", "Asia/Anadyr"),
+    ("Asia/Aqtau", "Asia/Aqtau"),
+    ("Asia/Aqtobe", "Asia/Aqtobe"),
+    ("Asia/Ashgabat", "Asia/Ashgabat"),
+    ("Asia/Atyrau", "Asia/Atyrau"),
+    ("Asia/Baghdad", "Asia/Baghdad"),
+    ("Asia/Bahrain", "Asia/Bahrain"),
+    ("Asia/Baku", "Asia/Baku"),
+    ("Asia/Bangkok", "Asia/Bangkok"),
+    ("Asia/Barnaul", "Asia/Barnaul"),
+    ("Asia/Beirut", "Asia/Beirut"),
+    ("Asia/Bishkek", "Asia/Bishkek"),
+    ("Asia/Brunei", "Asia/Brunei"),
+    ("Asia/Chita", "Asia/Chita"),
+    ("Asia/Colombo", "Asia/Colombo"),
+    ("Asia/Damascus", "Asia/Damascus"),
+    ("Asia/Dhaka", "Asia/Dhaka"),
+    ("Asia/Dili", "Asia/Dili"),
+    ("Asia/Dubai", "Asia/Dubai"),
+    ("Asia/Dushanbe", "Asia/Dushanbe"),
+    ("Asia/Famagusta", "Asia/Famagusta"),
+    ("Asia/Gaza", "Asia/Gaza"),
+    ("Asia/Hebron", "Asia/Hebron"),
+    ("Asia/Ho_Chi_Minh", "Asia/Ho_Chi_Minh"),
+    ("Asia/Hong_Kong", "Asia/Hong_Kong"),
+    ("Asia/Hovd", "Asia/Hovd"),
+    ("Asia/Irkutsk", "Asia/Irkutsk"),
+    ("Asia/Jakarta", "Asia/Jakarta"),
+    ("Asia/Jayapura", "Asia/Jayapura"),
+    ("Asia/Jerusalem", "Asia/Jerusalem"),
+    ("Asia/Kabul", "Asia/Kabul"),
+    ("Asia/Kamchatka", "Asia/Kamchatka"),
+    ("Asia/Karachi", "Asia/Karachi"),
+    ("Asia/Kathmandu", "Asia/Kathmandu"),
+    ("Asia/Khandyga", "Asia/Khandyga"),
+    ("Asia/Kolkata", "Asia/Kolkata"),
+    ("Asia/Krasnoyarsk", "Asia/Krasnoyarsk"),
+    ("Asia/Kuala_Lumpur", "Asia/Kuala_Lumpur"),
+    ("Asia/Kuching", "Asia/Kuching"),
+    ("Asia/Kuwait", "Asia/Kuwait"),
+    ("Asia/Macau", "Asia/Macau"),
+    ("Asia/Magadan", "Asia/Magadan"),
+    ("Asia/Makassar", "Asia/Makassar"),
+    ("Asia/Manila", "Asia/Manila"),
+    ("Asia/Muscat", "Asia/Muscat"),
+    ("Asia/Nicosia", "Asia/Nicosia"),
+    ("Asia/Novokuznetsk", "Asia/Novokuznetsk"),
+    ("Asia/Novosibirsk", "Asia/Novosibirsk"),
+    ("Asia/Omsk", "Asia/Omsk"),
+    ("Asia/Oral", "Asia/Oral"),
+    ("Asia/Phnom_Penh", "Asia/Phnom_Penh"),
+    ("Asia/Pontianak", "Asia/Pontianak"),
+    ("Asia/Pyongyang", "Asia/Pyongyang"),
+    ("Asia/Qatar", "Asia/Qatar"),
+    ("Asia/Qostanay", "Asia/Qostanay"),
+    ("Asia/Qyzylorda", "Asia/Qyzylorda"),
+    ("Asia/Riyadh", "Asia/Riyadh"),
+    ("Asia/Sakhalin", "Asia/Sakhalin"),
+    ("Asia/Samarkand", "Asia/Samarkand"),
+    ("Asia/Seoul", "Asia/Seoul"),
+    ("Asia/Shanghai", "Asia/Shanghai"),
+    ("Asia/Singapore", "Asia/Singapore"),
+    ("Asia/Srednekolymsk", "Asia/Srednekolymsk"),
+    ("Asia/Taipei", "Asia/Taipei"),
+    ("Asia/Tashkent", "Asia/Tashkent"),
+    ("Asia/Tbilisi", "Asia/Tbilisi"),
+    ("Asia/Tehran", "Asia/Tehran"),
+    ("Asia/Thimphu", "Asia/Thimphu"),
+    ("Asia/Tokyo", "Asia/Tokyo"),
+    ("Asia/Tomsk", "Asia/Tomsk"),
+    ("Asia/Ulaanbaatar", "Asia/Ulaanbaatar"),
+    ("Asia/Urumqi", "Asia/Urumqi"),
+    ("Asia/Ust-Nera", "Asia/Ust-Nera"),
+    ("Asia/Vientiane", "Asia/Vientiane"),
+    ("Asia/Vladivostok", "Asia/Vladivostok"),
+    ("Asia/Yakutsk", "Asia/Yakutsk"),
+    ("Asia/Yangon", "Asia/Yangon"),
+    ("Asia/Yekaterinburg", "Asia/Yekaterinburg"),
+    ("Asia/Yerevan", "Asia/Yerevan"),
+    ("Atlantic/Azores", "Atlantic/Azores"),
+    ("Atlantic/Bermuda", "Atlantic/Bermuda"),
+    ("Atlantic/Canary", "Atlantic/Canary"),
+    ("Atlantic/Cape_Verde", "Atlantic/Cape_Verde"),
+    ("Atlantic/Faroe", "Atlantic/Faroe"),
+    ("Atlantic/Madeira", "Atlantic/Madeira"),
+    ("Atlantic/Reykjavik", "Atlantic/Reykjavik"),
+    ("Atlantic/South_Georgia", "Atlantic/South_Georgia"),
+    ("Atlantic/St_Helena", "Atlantic/St_Helena"),
+    ("Atlantic/Stanley", "Atlantic/Stanley"),
+    ("Australia/Adelaide", "Australia/Adelaide"),
+    ("Australia/Brisbane", "Australia/Brisbane"),
+    ("Australia/Broken_Hill", "Australia/Broken_Hill"),
+    ("Australia/Darwin", "Australia/Darwin"),
+    ("Australia/Eucla", "Australia/Eucla"),
+    ("Australia/Hobart", "Australia/Hobart"),
+    ("Australia/Lindeman", "Australia/Lindeman"),
+    ("Australia/Lord_Howe", "Australia/Lord_Howe"),
+    ("Australia/Melbourne", "Australia/Melbourne"),
+    ("Australia/Perth", "Australia/Perth"),
+    ("Australia/Sydney", "Australia/Sydney"),
+    ("Canada/Atlantic", "Canada/Atlantic"),
+    ("Canada/Central", "Canada/Central"),
+    ("Canada/Eastern", "Canada/Eastern"),
+    ("Canada/Mountain", "Canada/Mountain"),
+    ("Canada/Newfoundland", "Canada/Newfoundland"),
+    ("Canada/Pacific", "Canada/Pacific"),
+    ("Europe/Amsterdam", "Europe/Amsterdam"),
+    ("Europe/Andorra", "Europe/Andorra"),
+    ("Europe/Astrakhan", "Europe/Astrakhan"),
+    ("Europe/Athens", "Europe/Athens"),
+    ("Europe/Belgrade", "Europe/Belgrade"),
+    ("Europe/Berlin", "Europe/Berlin"),
+    ("Europe/Bratislava", "Europe/Bratislava"),
+    ("Europe/Brussels", "Europe/Brussels"),
+    ("Europe/Bucharest", "Europe/Bucharest"),
+    ("Europe/Budapest", "Europe/Budapest"),
+    ("Europe/Busingen", "Europe/Busingen"),
+    ("Europe/Chisinau", "Europe/Chisinau"),
+    ("Europe/Copenhagen", "Europe/Copenhagen"),
+    ("Europe/Dublin", "Europe/Dublin"),
+    ("Europe/Gibraltar", "Europe/Gibraltar"),
+    ("Europe/Guernsey", "Europe/Guernsey"),
+    ("Europe/Helsinki", "Europe/Helsinki"),
+    ("Europe/Isle_of_Man", "Europe/Isle_of_Man"),
+    ("Europe/Istanbul", "Europe/Istanbul"),
+    ("Europe/Jersey", "Europe/Jersey"),
+    ("Europe/Kaliningrad", "Europe/Kaliningrad"),
+    ("Europe/Kirov", "Europe/Kirov"),
+    ("Europe/Kyiv", "Europe/Kyiv"),
+    ("Europe/Lisbon", "Europe/Lisbon"),
+    ("Europe/Ljubljana", "Europe/Ljubljana"),
+    ("Europe/London", "Europe/London"),
+    ("Europe/Luxembourg", "Europe/Luxembourg"),
+    ("Europe/Madrid", "Europe/Madrid"),
+    ("Europe/Malta", "Europe/Malta"),
+    ("Europe/Mariehamn", "Europe/Mariehamn"),
+    ("Europe/Minsk", "Europe/Minsk"),
+    ("Europe/Monaco", "Europe/Monaco"),
+    ("Europe/Moscow", "Europe/Moscow"),
+    ("Europe/Oslo", "Europe/Oslo"),
+    ("Europe/Paris", "Europe/Paris"),
+    ("Europe/Podgorica", "Europe/Podgorica"),
+    ("Europe/Prague", "Europe/Prague"),
+    ("Europe/Riga", "Europe/Riga"),
+    ("Europe/Rome", "Europe/Rome"),
+    ("Europe/Samara", "Europe/Samara"),
+    ("Europe/San_Marino", "Europe/San_Marino"),
+    ("Europe/Sarajevo", "Europe/Sarajevo"),
+    ("Europe/Saratov", "Europe/Saratov"),
+    ("Europe/Simferopol", "Europe/Simferopol"),
+    ("Europe/Skopje", "Europe/Skopje"),
+    ("Europe/Sofia", "Europe/Sofia"),
+    ("Europe/Stockholm", "Europe/Stockholm"),
+    ("Europe/Tallinn", "Europe/Tallinn"),
+    ("Europe/Tirane", "Europe/Tirane"),
+    ("Europe/Ulyanovsk", "Europe/Ulyanovsk"),
+    ("Europe/Vaduz", "Europe/Vaduz"),
+    ("Europe/Vatican", "Europe/Vatican"),
+    ("Europe/Vienna", "Europe/Vienna"),
+    ("Europe/Vilnius", "Europe/Vilnius"),
+    ("Europe/Volgograd", "Europe/Volgograd"),
+    ("Europe/Warsaw", "Europe/Warsaw"),
+    ("Europe/Zagreb", "Europe/Zagreb"),
+    ("Europe/Zurich", "Europe/Zurich"),
+    ("GMT", "GMT"),
+    ("Indian/Antananarivo", "Indian/Antananarivo"),
+    ("Indian/Chagos", "Indian/Chagos"),
+    ("Indian/Christmas", "Indian/Christmas"),
+    ("Indian/Cocos", "Indian/Cocos"),
+    ("Indian/Comoro", "Indian/Comoro"),
+    ("Indian/Kerguelen", "Indian/Kerguelen"),
+    ("Indian/Mahe", "Indian/Mahe"),
+    ("Indian/Maldives", "Indian/Maldives"),
+    ("Indian/Mauritius", "Indian/Mauritius"),
+    ("Indian/Mayotte", "Indian/Mayotte"),
+    ("Indian/Reunion", "Indian/Reunion"),
+    ("Pacific/Apia", "Pacific/Apia"),
+    ("Pacific/Auckland", "Pacific/Auckland"),
+    ("Pacific/Bougainville", "Pacific/Bougainville"),
+    ("Pacific/Chatham", "Pacific/Chatham"),
+    ("Pacific/Chuuk", "Pacific/Chuuk"),
+    ("Pacific/Easter", "Pacific/Easter"),
+    ("Pacific/Efate", "Pacific/Efate"),
+    ("Pacific/Fakaofo", "Pacific/Fakaofo"),
+    ("Pacific/Fiji", "Pacific/Fiji"),
+    ("Pacific/Funafuti", "Pacific/Funafuti"),
+    ("Pacific/Galapagos", "Pacific/Galapagos"),
+    ("Pacific/Gambier", "Pacific/Gambier"),
+    ("Pacific/Guadalcanal", "Pacific/Guadalcanal"),
+    ("P2025-06-29T01:43:14.671389745Z acific/Guam", "Pacific/Guam"),
+    ("Pacific/Honolulu", "Pacific/Honolulu"),
+    ("Pacific/Kanton", "Pacific/Kanton"),
+    ("Pacific/Kiritimati", "Pacific/Kiritimati"),
+    ("Pacific/Kosrae", "Pacific/Kosrae"),
+    ("Pacific/Kwajalein", "Pacific/Kwajalein"),
+    ("Pacific/Majuro", "Pacific/Majuro"),
+    ("Pacific/Marquesas", "Pacific/Marquesas"),
+    ("Pacific/Midway", "Pacific/Midway"),
+    ("Pacific/Nauru", "Pacific/Nauru"),
+    ("Pacific/Niue", "Pacific/Niue"),
+    ("Pacific/Norfolk", "Pacific/Norfolk"),
+    ("Pacific/Noumea", "Pacific/Noumea"),
+    ("Pacific/Pago_Pago", "Pacific/Pago_Pago"),
+    ("Pacific/Palau", "Pacific/Palau"),
+    ("Pacific/Pitcairn", "Pacific/Pitcairn"),
+    ("Pacific/Pohnpei", "Pacific/Pohnpei"),
+    ("Pacific/Port_Moresby", "Pacific/Port_Moresby"),
+    ("Pacific/Rarotonga", "Pacific/Rarotonga"),
+    ("Pacific/Saipan", "Pacific/Saipan"),
+    ("Pacific/Tahiti", "Pacific/Tahiti"),
+    ("Pacific/Tarawa", "Pacific/Tarawa"),
+    ("Pacific/Tongatapu", "Pacific/Tongatapu"),
+    ("Pacific/Wake", "Pacific/Wake"),
+    ("Pacific/Wallis", "Pacific/Wallis"),
+    ("US/Alaska", "US/Alaska"),
+    ("US/Arizona", "US/Arizona"),
+    ("US/Central", "US/Central"),
+    ("US/Eastern", "US/Eastern"),
+    ("US/Hawaii", "US/Hawaii"),
+    ("US/Mountain", "US/Mountain"),
+    ("US/Pacific", "US/Pacific"),
+    ("UTC", "UTC"),
+]
+
 
 class User(AbstractUser):
     username = None
@@ -36,6 +474,11 @@ class UserSettings(models.Model):
     )
     hide_amounts = models.BooleanField(default=False)
     mute_sounds = models.BooleanField(default=False)
+    volume = models.PositiveIntegerField(
+        default=10,
+        validators=[MinValueValidator(1), MaxValueValidator(10)],
+        verbose_name=_("Volume"),
+    )
 
     date_format = models.CharField(
         max_length=100, default="SHORT_DATE_FORMAT", verbose_name=_("Date Format")
@@ -57,7 +500,7 @@ class UserSettings(models.Model):
     )
     timezone = models.CharField(
         max_length=50,
-        choices=[("auto", _("Auto"))] + [(tz, tz) for tz in pytz.common_timezones],
+        choices=timezones,
         default="auto",
         verbose_name=_("Time Zone"),
     )

app/apps/users/views.py

@@ -20,6 +20,7 @@ from apps.users.forms import (
     UserAddForm,
 )
 from apps.users.models import UserSettings
+from apps.common.decorators.demo import disabled_on_demo
 
 
 def logout_view(request):
@@ -168,6 +169,7 @@ def user_add(request):
 
 @only_htmx
 @htmx_login_required
+@disabled_on_demo
 @require_http_methods(["GET", "POST"])
 def user_edit(request, pk):
     user = get_object_or_404(get_user_model(), id=pk)

app/apps/yearly_overview/views.py

@@ -75,7 +75,7 @@ def yearly_overview_by_currency(request, year: int):
 
     transactions = (
         Transaction.objects.filter(**filter_params)
-        .exclude(Q(category__mute=True) & ~Q(category=None))
+        .exclude(Q(Q(category__mute=True) & ~Q(category=None)) | Q(mute=True))
         .order_by("account__currency__name")
     )
 
@@ -141,7 +141,7 @@ def yearly_overview_by_account(request, year: int):
 
     transactions = (
         Transaction.objects.filter(**filter_params)
-        .exclude(Q(category__mute=True) & ~Q(category=None))
+        .exclude(Q(Q(category__mute=True) & ~Q(category=None)) | Q(mute=True))
         .order_by(
             "account__group__name",
             "account__name",

app/templates/account_groups/fragments/list.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 <div class="container px-md-3 py-3 column-gap-5">
-  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+  <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
     {% spaceless %}
       <div>{% translate 'Account Groups' %}<span>
-      <a class="text-decoration-none tw-text-2xl p-1 category-action"
+      <a class="text-decoration-none tw:text-2xl p-1 category-action"
          role="button"
          data-bs-toggle="tooltip"
          data-bs-title="{% translate "Add" %}"

app/templates/accounts/fragments/list.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 <div class="container px-md-3 py-3 column-gap-5">
-  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+  <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
     {% spaceless %}
     <div>{% translate 'Accounts' %}<span>
-      <a class="text-decoration-none tw-text-2xl p-1 category-action"
+      <a class="text-decoration-none tw:text-2xl p-1 category-action"
                 role="button"
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate "Add" %}"

app/templates/calendar_view/fragments/list.html

@@ -2,7 +2,7 @@
 {% load i18n %}
 
 <div>
-  <div class="tw-hidden lg:tw-grid lg:tw-grid-cols-7 tw-gap-4 lg:tw-gap-0">
+  <div class="tw:hidden tw:lg:grid tw:lg:grid-cols-7 tw:gap-4 tw:lg:gap-0">
     <div class="border-start border-top border-bottom p-2 text-center">
       {% translate 'MON' %}
     </div>
@@ -25,44 +25,44 @@
       {% translate 'SUN' %}
     </div>
   </div>
-  <div class="tw-grid tw-grid-cols-1 tw-grid-rows-1 lg:tw-grid-cols-7 lg:tw-grid-rows-6 tw-gap-4 lg:tw-gap-0">
+  <div class="tw:grid tw:grid-cols-1 tw:grid-rows-1 tw:lg:grid-cols-7 tw:lg:grid-rows-6 tw:gap-4 tw:lg:gap-0">
     {% for date in dates %}
       {% if date %}
-      <div class="card h-100 hover:tw-bg-zinc-900 rounded-0{% if not date.transactions %} !tw-hidden lg:!tw-flex{% endif %}{% if today == date.date %} tw-border-yellow-300 border-primary{% endif %} " role="button"
+      <div class="card h-100 tw:hover:bg-zinc-900! rounded-0{% if not date.transactions %} tw:hidden! tw:lg:flex!{% endif %}{% if today == date.date %} tw:border-yellow-300 border-primary{% endif %} " role="button"
         hx-get="{% url 'calendar_transactions_list' day=date.date.day month=date.date.month year=date.date.year %}"
         hx-target="#persistent-generic-offcanvas-left">
-        <div class="card-header border-0 bg-transparent text-end tw-flex justify-content-between p-2 w-100">
-          <div class="lg:tw-hidden text-start w-100">{{ date.date|date:"l"|lower }}</div>
+        <div class="card-header border-0 bg-transparent text-end tw:flex justify-content-between p-2 w-100">
+          <div class="tw:lg:hidden text-start w-100">{{ date.date|date:"l"|lower }}</div>
           <div class="text-end w-100">{{ date.day }}</div>
         </div>
         <div class="card-body p-2">
           {% for transaction in date.transactions %}
             {% if transaction.is_paid %}
               {% if transaction.type == "IN" and not transaction.account.is_asset %}
-                <i class="fa-solid fa-circle-check tw-text-green-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
+                <i class="fa-solid fa-circle-check tw:text-green-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
               {% elif transaction.type == "IN" and transaction.account.is_asset %}
-                <i class="fa-solid fa-circle-check tw-text-green-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
+                <i class="fa-solid fa-circle-check tw:text-green-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
               {% elif transaction.type == "EX" and not transaction.account.is_asset %}
-                <i class="fa-solid fa-circle-check tw-text-red-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
+                <i class="fa-solid fa-circle-check tw:text-red-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
               {% elif transaction.type == "EX" and transaction.account.is_asset %}
-                <i class="fa-solid fa-circle-check tw-text-red-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
+                <i class="fa-solid fa-circle-check tw:text-red-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
               {% endif %}
             {% else %}
               {% if transaction.type == "IN" and not transaction.account.is_asset %}
-                <i class="fa-regular fa-circle tw-text-green-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
+                <i class="fa-regular fa-circle tw:text-green-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
               {% elif transaction.type == "IN" and transaction.account.is_asset %}
-                <i class="fa-regular fa-circle tw-text-green-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
+                <i class="fa-regular fa-circle tw:text-green-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Income' %}{% endif %}"></i>
               {% elif transaction.type == "EX" and not transaction.account.is_asset %}
-                <i class="fa-regular fa-circle tw-text-red-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
+                <i class="fa-regular fa-circle tw:text-red-400" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
               {% elif transaction.type == "EX" and transaction.account.is_asset %}
-                <i class="fa-regular fa-circle tw-text-red-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
+                <i class="fa-regular fa-circle tw:text-red-300" data-bs-toggle="tooltip" data-bs-title="{% if transaction.description %}{{ transaction.description }}{% else %}{% trans 'Expense' %}{% endif %}"></i>
               {% endif %}
             {% endif %}
           {% endfor %}
         </div>
       </div>
       {% else %}
-        <div class="!tw-hidden lg:!tw-block card h-100 rounded-0"></div>
+        <div class="tw:hidden! tw:lg:block! card h-100 rounded-0"></div>
       {% endif %}
     {% endfor %}
   </div>

app/templates/calendar_view/pages/calendar.html

@@ -13,45 +13,47 @@
 {% endblock %}
 
 {% block content %}
-<div class="container px-md-3 py-3 column-gap-5">
-  <div class="row mb-3 gx-xl-4 gy-3 mb-4">
-{#    Date picker#}
-    <div class="col-12 col-xl-4 flex-row align-items-center d-flex">
-      <div class="tw-text-base h-100 align-items-center d-flex">
-        <a role="button"
-           class="pe-4 py-2"
-           hx-boost="true"
-           hx-trigger="click, previous_month from:window"
-           href="{% url 'calendar' month=previous_month year=previous_year %}"><i
-            class="fa-solid fa-chevron-left"></i></a>
+  <div class="container px-md-3 py-3 column-gap-5">
+    <div class="row mb-3 gx-xl-4 gy-3 mb-4">
+      {#    Date picker#}
+      <div class="col-12 col-xl-4 flex-row align-items-center d-flex">
+        <div class="tw:text-base h-100 align-items-center d-flex">
+          <a role="button"
+             class="pe-4 py-2"
+             hx-boost="true"
+             hx-trigger="click, previous_month from:window"
+             href="{% url 'calendar' month=previous_month year=previous_year %}"><i
+              class="fa-solid fa-chevron-left"></i></a>
+        </div>
+        <div class="tw:text-3xl fw-bold font-monospace tw:w-full text-center"
+             hx-get="{% url 'month_year_picker' %}"
+             hx-target="#generic-offcanvas-left"
+             hx-trigger="click, date_picker from:window"
+             hx-vals='{"month": {{ month }}, "year": {{ year }}, "for": "calendar", "field": "date"}' role="button">
+          {{ month|month_name }} {{ year }}
+        </div>
+        <div class="tw:text-base mx-2 h-100 align-items-center d-flex">
+          <a role="button"
+             class="ps-3 py-2"
+             hx-boost="true"
+             hx-trigger="click, next_month from:window"
+             href="{% url 'calendar' month=next_month year=next_year %}">
+            <i class="fa-solid fa-chevron-right"></i>
+          </a>
+        </div>
       </div>
-      <div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center"
-           hx-get="{% url 'month_year_picker' %}"
-           hx-target="#generic-offcanvas-left"
-           hx-trigger="click, date_picker from:window"
-           hx-vals='{"month": {{ month }}, "year": {{ year }}, "for": "calendar", "field": "date"}' role="button">
-        {{ month|month_name }} {{ year }}
-      </div>
-      <div class="tw-text-base mx-2 h-100 align-items-center d-flex">
-        <a role="button"
-           class="ps-3 py-2"
-           hx-boost="true"
-           hx-trigger="click, next_month from:window"
-           href="{% url 'calendar' month=next_month year=next_year %}">
-          <i class="fa-solid fa-chevron-right"></i>
-        </a>
+      {#    Action buttons#}
+      <div class="col-12 col-xl-8">
+        {#      <c-ui.quick-transactions-buttons#}
+        {#        :year="year"#}
+        {#        :month="month"#}
+        {#      ></c-ui.quick-transactions-buttons>#}
       </div>
     </div>
-{#    Action buttons#}
-    <div class="col-12 col-xl-8">
-      <c-ui.quick-transactions-buttons
-        :year="year"
-        :month="month"
-      ></c-ui.quick-transactions-buttons>
+    <div class="row">
+      <div class="show-loading" hx-get="{% url 'calendar_list' month=month year=year %}"
+           hx-trigger="load, updated from:window, selective_update from:window, every 10m"></div>
     </div>
   </div>
-  <div class="row">
-    <div class="show-loading" hx-get="{% url 'calendar_list' month=month year=year %}" hx-trigger="load, updated from:window, selective_update from:window"></div>
-  </div>
-</div>
+  <c-ui.transactions_fab></c-ui.transactions_fab>
 {% endblock %}

app/templates/categories/fragments/list.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 <div class="container px-md-3 py-3 column-gap-5">
-  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+  <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
     {% spaceless %}
     <div>{% translate 'Categories' %}<span>
-      <a class="text-decoration-none tw-text-2xl p-1 category-action"
+      <a class="text-decoration-none tw:text-2xl p-1 category-action"
                 role="button"
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate "Add" %}"

app/templates/common/fragments/month_year_picker.html

@@ -32,7 +32,7 @@
        tabindex="0">
     <ul class="list-group list-group-flush" id="month-year-list">
       {% for month_data in x.list %}
-      <li class="list-group-item hover:tw-bg-zinc-900
+      <li class="list-group-item tw:hover:bg-zinc-900
             {% if month_data.month == current_month and month_data.year == current_year %} disabled bg-primary{% endif %}"
           {% if month_data.month == current_month and month_data.year == current_year %}aria-disabled="true"{% endif %}>
         <div class="d-flex justify-content-between">

app/templates/cotton/amount/display.html

@@ -3,10 +3,10 @@
 {% if not divless %}
 <div class="{% if text_end %}text-end{% elif text_start %}text-start{% endif %}">
 {% endif %}
-  <span class="amount{% if color == 'grey' or color == "gray" %} tw-text-gray-500{% elif color == 'green' %} tw-text-green-400{% elif color == 'red' %} tw-text-red-400{% endif %} {{ custom_class }}"
+  <span class="amount{% if color == 'grey' or color == "gray" %} tw:text-gray-500{% elif color == 'green' %} tw:text-green-400{% elif color == 'red' %} tw:text-red-400{% endif %} {{ custom_class }}"
        data-original-value="{% currency_display amount=amount prefix=prefix suffix=suffix decimal_places=decimal_places %}"
        data-amount="{{ amount|floatformat:"-40u" }}">
   </span><span>{{ slot }}</span>
 {% if not divless %}
 </div>
-{% endif %}
+{% endif %}

app/templates/cotton/components/fab.html

@@ -0,0 +1,33 @@
+<div class="tw:min-h-16">
+<div
+    id="fab-wrapper"
+    class="tw:fixed tw:bottom-5 tw:right-5 tw:ml-auto tw:w-max tw:flex tw:flex-col tw:items-end mt-5">
+  <div
+      id="menu"
+      class="tw:flex tw:flex-col tw:items-end tw:space-y-6 tw:transition-all tw:duration-300 tw:ease-in-out tw:opacity-0 tw:invisible tw:hidden tw:mb-2">
+
+    {{ slot }}
+  </div>
+
+  <button
+      class="btn btn-primary rounded-circle p-0 tw:w-12 tw:h-12 tw:flex tw:items-center tw:justify-center tw:shadow-lg tw:hover:shadow-xl tw:focus:shadow-xl tw:transition-all tw:duration-300 tw:ease-in-out"
+      _="
+          on click or focusout
+             if #menu.classList.contains('tw:invisible') and event.type === 'click'
+               add .{'tw:rotate-45'} to #fab-icon
+               remove .{'tw:invisible'} from #menu
+               remove .{'tw:hidden'} from #menu
+               remove .{'tw:opacity-0'} from #menu
+             else
+               wait 0.2s
+               remove .{'tw:rotate-45'} from #fab-icon
+               add .{'tw:invisible'} to #menu
+               add .{'tw:hidden'} to #menu
+               add .{'tw:opacity-0'} to #menu
+             end
+          "
+  >
+    <i id="fab-icon" class="fa-solid fa-plus tw:text-3xl tw:transition-transform tw:duration-300 tw:ease-in-out"></i>
+  </button>
+</div>
+</div>

app/templates/cotton/components/fab_menu_button.html

@@ -0,0 +1,11 @@
+{% load i18n %}
+<div class="tw:relative fab-item">
+  <button class="btn btn-sm btn-{{ color }}"
+          hx-get="{{ url }}"
+          hx-trigger="{{ hx_trigger }}"
+          hx-target="{{ hx_target }}"
+          hx-vals='{{ hx_vals }}'>
+    <i class="{{ icon }} me-2"></i>
+    {{ title }}
+  </button>
+</div>

app/templates/cotton/msg/empty.html

@@ -1,9 +1,9 @@
 <div class="row {% if not remove_padding %}p-5{% endif %}">
   <div class="col {% if not remove_padding %}p-5{% endif %}">
     <div class="text-center">
-      <i class="{% if icon %}{{ icon }}{% else %}fa-solid fa-circle-xmark{% endif %} tw-text-6xl"></i>
+      <i class="{% if icon %}{{ icon }}{% else %}fa-solid fa-circle-xmark{% endif %} tw:text-6xl"></i>
       <p class="lead mt-4 mb-0">{{ title }}</p>
-      <p class="tw-text-gray-500">{{ subtitle }}</p>
+      <p class="tw:text-gray-500">{{ subtitle }}</p>
     </div>
   </div>
 </div>

app/templates/cotton/transaction/item.html

@@ -1,6 +1,6 @@
 {% load markdown %}
 {% load i18n %}
-<div class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %}">
+<div class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %} tw:group/transaction tw:relative tw:hover:z-10">
   <div class="d-flex my-1">
     {% if not disable_selection %}
       <label class="px-3 d-flex align-items-center justify-content-center">
@@ -8,16 +8,15 @@
                id="check-{{ transaction.id }}" aria-label="{% translate 'Select' %}" hx-preserve>
       </label>
     {% endif %}
-    <div class="tw-border-s-6 tw-border-e-0 tw-border-t-0 tw-border-b-0 border-bottom
-  hover:tw-bg-zinc-900 p-2 {% if transaction.account.is_asset %}tw-border-dashed{% else %}tw-border-solid{% endif %}
-  {% if transaction.type == "EX" %}tw-border-red-500{% else %}tw-border-green-500{% endif %} tw-relative
-  w-100 transaction-item"
-         _="on mouseover remove .tw-invisible from the first .transaction-actions in me end
-        on mouseout add .tw-invisible to the first .transaction-actions in me end">
-      <div class="row font-monospace tw-text-sm align-items-center">
-        <div class="col-lg-auto col-12 d-flex align-items-center tw-text-2xl lg:tw-text-xl text-lg-center text-center p-0 ps-1">
+    <div class="tw:border-s-4 tw:border-e-0 tw:border-t-0 tw:border-b-0 border-bottom
+                tw:hover:bg-zinc-900 p-2 {% if transaction.account.is_asset %}tw:border-dashed{% else %}tw:border-solid{% endif %}
+                {% if transaction.type == "EX" %}tw:border-red-500{% else %}tw:border-green-500{% endif %} tw:relative
+                w-100 transaction-item">
+      <div class="row font-monospace tw:text-sm align-items-center">
+        <div
+            class="col-lg-auto col-12 d-flex align-items-center tw:text-2xl tw:lg:text-xl text-lg-center text-center p-0 ps-1">
           {% if not transaction.deleted %}
-            <a class="text-decoration-none p-3 tw-text-gray-500"
+            <a class="text-decoration-none p-3 tw:text-gray-500!"
                title="{% if transaction.is_paid %}{% trans 'Paid' %}{% else %}{% trans 'Projected' %}{% endif %}"
                role="button"
                hx-get="{% url 'transaction_pay' transaction_id=transaction.id %}"
@@ -27,41 +26,41 @@
                   class="fa-regular fa-circle"></i>{% endif %}
             </a>
           {% else %}
-            <div class="text-decoration-none p-3 tw-text-gray-500"
+            <div class="text-decoration-none p-3 tw:text-gray-500!"
                  title="{% if transaction.is_paid %}{% trans 'Paid' %}{% else %}{% trans 'Projected' %}{% endif %}">
               {% if transaction.is_paid %}<i class="fa-regular fa-circle-check"></i>{% else %}<i
                   class="fa-regular fa-circle"></i>{% endif %}
             </div>
           {% endif %}
         </div>
-        <div class="col-lg col-12">
+        <div class="col-lg col-12 {% if transaction.category.mute or transaction.mute %}tw:brightness-80{% endif %}">
           {#      Date#}
-          <div class="row mb-2 mb-lg-1 tw-text-gray-400">
+          <div class="row mb-2 mb-lg-1 tw:text-gray-400">
             <div class="col-auto pe-1"><i class="fa-solid fa-calendar fa-fw me-1 fa-xs"></i></div>
             <div
                 class="col ps-0">{{ transaction.date|date:"SHORT_DATE_FORMAT" }} • {{ transaction.reference_date|date:"b/Y" }}</div>
           </div>
           {#      Description#}
-          <div class="mb-2 mb-lg-1 text-white tw-text-base">
+          <div class="mb-2 mb-lg-1 text-body tw:text-base">
             {% spaceless %}
               <span class="{% if transaction.description %}me-2{% endif %}">{{ transaction.description }}</span>
               {% if transaction.installment_plan and transaction.installment_id %}
                 <span
-                    class="badge text-bg-secondary">{{ transaction.installment_id }}/{{ transaction.installment_plan.installment_total_number }}</span>
+                    class="badge text-bg-secondary mx-1">{{ transaction.installment_id }}/{{ transaction.installment_plan.installment_total_number }}</span>
               {% endif %}
               {% if transaction.recurring_transaction %}
-                <span class="text-primary tw-text-xs"><i class="fa-solid fa-arrows-rotate fa-fw"></i></span>
+                <span class="text-primary tw:text-xs mx-1"><i class="fa-solid fa-arrows-rotate fa-fw"></i></span>
               {% endif %}
               {% if transaction.dca_expense_entries.all or transaction.dca_income_entries.all %}
-                <span class="badge text-bg-secondary">{% trans 'DCA' %}</span>
+                <span class="badge text-bg-secondary mx-1">{% trans 'DCA' %}</span>
               {% endif %}
             {% endspaceless %}
           </div>
-          <div class="tw-text-gray-400 tw-text-sm">
+          <div class="tw:text-gray-400 tw:text-sm">
             {#        Entities #}
             {% with transaction.entities.all as entities %}
               {% if entities %}
-                <div class="row mb-2 mb-lg-1 tw-text-gray-400">
+                <div class="row mb-2 mb-lg-1 tw:text-gray-400">
                   <div class="col-auto pe-1"><i class="fa-solid fa-user-group fa-fw me-1 fa-xs"></i></div>
                   <div class="col ps-0">{{ entities|join:", " }}</div>
                 </div>
@@ -69,14 +68,14 @@
             {% endwith %}
             {#        Notes#}
             {% if transaction.notes %}
-              <div class="row mb-2 mb-lg-1 tw-text-gray-400">
+              <div class="row mb-2 mb-lg-1 tw:text-gray-400">
                 <div class="col-auto pe-1"><i class="fa-solid fa-align-left fa-fw me-1 fa-xs"></i></div>
                 <div class="col ps-0">{{ transaction.notes | limited_markdown | linebreaksbr }}</div>
               </div>
             {% endif %}
             {#        Category#}
             {% if transaction.category %}
-              <div class="row mb-2 mb-lg-1 tw-text-gray-400">
+              <div class="row mb-2 mb-lg-1 tw:text-gray-400">
                 <div class="col-auto pe-1"><i class="fa-solid fa-icons fa-fw me-1 fa-xs"></i></div>
                 <div class="col ps-0">{{ transaction.category.name }}</div>
               </div>
@@ -84,7 +83,7 @@
             {#        Tags#}
             {% with transaction.tags.all as tags %}
               {% if tags %}
-                <div class="row mb-2 mb-lg-1 tw-text-gray-400">
+                <div class="row mb-2 mb-lg-1 tw:text-gray-400">
                   <div class="col-auto pe-1"><i class="fa-solid fa-hashtag fa-fw me-1 fa-xs"></i></div>
                   <div class="col ps-0">{{ tags|join:", " }}</div>
                 </div>
@@ -92,7 +91,7 @@
             {% endwith %}
           </div>
         </div>
-        <div class="col-lg-auto col-12 text-lg-end align-self-end">
+        <div class="col-lg-auto col-12 text-lg-end align-self-end {% if transaction.category.mute or transaction.mute %}tw:brightness-80{% endif %}">
           <div class="main-amount mb-2 mb-lg-0">
             <c-amount.display
                 :amount="transaction.amount"
@@ -121,7 +120,7 @@
         <div>
           {#      Item actions#}
           <div
-              class="transaction-actions !tw-absolute tw-left-1/2 tw-top-0 tw--translate-x-1/2 tw--translate-y-1/2 tw-invisible d-flex flex-row card">
+              class="transaction-actions tw:absolute! tw:left-1/2 tw:top-0 tw:-translate-x-1/2 tw:-translate-y-1/2 tw:invisible tw:group-hover/transaction:visible d-flex flex-row card">
             <div class="card-body p-1 shadow-lg">
               {% if not transaction.deleted %}
                 <a class="btn btn-secondary btn-sm transaction-action"
@@ -131,14 +130,6 @@
                    hx-get="{% url 'transaction_edit' transaction_id=transaction.id %}"
                    hx-target="#generic-offcanvas" hx-swap="innerHTML">
                   <i class="fa-solid fa-pencil fa-fw"></i></a>
-                <a class="btn btn-secondary btn-sm transaction-action"
-                   role="button"
-                   data-bs-toggle="tooltip"
-                   data-bs-title="{% translate "Duplicate" %}"
-                   hx-get="{% url 'transaction_clone' transaction_id=transaction.id %}"
-                   _="on click if event.ctrlKey set @hx-get to `{% url 'transaction_clone' transaction_id=transaction.id %}?edit=true` then call htmx.process(me) end then trigger ready"
-                   hx-trigger="ready">
-                  <i class="fa-solid fa-clone fa-fw"></i></a>
                 <a class="btn btn-secondary btn-sm transaction-action"
                    role="button"
                    data-bs-toggle="tooltip"
@@ -151,6 +142,29 @@
                    data-confirm-text="{% translate "Yes, delete it!" %}"
                    _="install prompt_swal"><i class="fa-solid fa-trash fa-fw text-danger"></i>
                 </a>
+                <button class="btn btn-secondary btn-sm transaction-action" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <i class="fa-solid fa-ellipsis fa-fw"></i>
+                </button>
+                <ul class="dropdown-menu">
+                  {% if transaction.category.mute %}
+                  <li>
+                    <a class="dropdown-item disabled d-flex align-items-center" aria-disabled="true">
+                      <i class="fa-solid fa-eye fa-fw me-2"></i>
+                      <div>
+                        {% translate 'Show on summaries' %}
+                        <div class="d-block text-body-secondary tw:text-xs tw:font-medium">{% translate 'Controlled by category' %}</div>
+                      </div>
+                    </a>
+                  </li>
+                  {% elif transaction.mute %}
+                    <li><a class="dropdown-item" href="#" hx-get="{% url 'transaction_mute' transaction_id=transaction.id %}" hx-target="closest .transaction" hx-swap="outerHTML"><i class="fa-solid fa-eye fa-fw me-2"></i>{% translate 'Show on summaries' %}</a></li>
+                  {% else %}
+                    <li><a class="dropdown-item" href="#" hx-get="{% url 'transaction_mute' transaction_id=transaction.id %}" hx-target="closest .transaction" hx-swap="outerHTML"><i class="fa-solid fa-eye-slash fa-fw me-2"></i>{% translate 'Hide from summaries' %}</a></li>
+                  {% endif %}
+                  <li><a class="dropdown-item" href="#" hx-get="{% url 'quick_transaction_add_as_quick_transaction' transaction_id=transaction.id %}"><i class="fa-solid fa-person-running fa-fw me-2"></i>{% translate 'Add as quick transaction' %}</a></li>
+                  <li><hr class="dropdown-divider"></li>
+                  <li><a class="dropdown-item" href="#" hx-get="{% url 'transaction_clone' transaction_id=transaction.id %}"><i class="fa-solid fa-clone fa-fw me-2"></i>{% translate 'Duplicate' %}</a></li>
+                </ul>
               {% else %}
                 <a class="btn btn-secondary btn-sm transaction-action"
                    role="button"

app/templates/cotton/transaction/small_item.html

@@ -1,9 +1,9 @@
 <div class="card mb-2 transaction-item">
-    <div class="card-body p-2 tw-flex tw-items-center tw-gap-3" data-bs-toggle="collapse" data-bs-target="#{{ transaction.id }}" role="button" aria-expanded="false" aria-controls="{{ transaction.id }}">
+    <div class="card-body p-2 tw:flex tw:items-center tw: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="tw-flex flex-lg-row flex-column lg:tw-items-center tw-w-full tw-gap-3">
+        <div class="tw:flex flex-lg-row flex-column tw:lg:items-center tw:w-full tw:gap-3">
             <!-- Type indicator -->
-            <div class="tw-w-8">
+            <div class="tw:w-8">
                 {% if transaction.type == 'IN' %}
                     <span class="badge bg-success">↑</span>
                 {% else %}
@@ -12,7 +12,7 @@
             </div>
 
             <!-- Payment status -->
-            <div class="tw-w-8">
+            <div class="tw:w-8">
                 {% if transaction.is_paid %}
                     <span class="badge bg-success">✓</span>
                 {% else %}
@@ -21,13 +21,13 @@
             </div>
 
             <!-- Description -->
-            <div class="tw-flex-grow">
-                <span class="tw-font-medium">{{ transaction.description }}</span>
+            <div class="tw:flex-grow">
+                <span class="tw:font-medium">{{ transaction.description }}</span>
             </div>
 
             <!-- Amount -->
-            <div class="tw-text-right tw-whitespace-nowrap">
-                <span class="{% if transaction.type == 'IN' %}tw-text-green-400{% else %}tw-text-red-400{% endif %}">
+            <div class="tw:text-right tw:whitespace-nowrap">
+                <span class="{% if transaction.type == 'IN' %}tw:text-green-400{% else %}tw:text-red-400{% endif %}">
                     {{ transaction.amount }}
                 </span>
                 {% if transaction.exchanged_amount %}
@@ -91,4 +91,4 @@
         </div>
     </div>
     </div>
-</div>
+</div>

app/templates/cotton/ui/account_card.html

@@ -3,7 +3,7 @@
 <div class="col card shadow">
   <div class="card-body">
     {% if account.account.group %}
-      <div class="tw-text-sm mb-2">
+      <div class="tw:text-sm mb-2">
         <span class="badge text-bg-primary ">{{ account.account.group }}</span>
       </div>
     {% endif %}
@@ -12,11 +12,11 @@
     </h5>
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'projected income' %}</div>
+        <div class="tw:text-gray-400">{% translate 'projected income' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       {% if account.income_projected != 0 %}
-      <div class="text-end font-monospace tw-text-green-400">
+      <div class="text-end font-monospace tw:text-green-400">
         <c-amount.display
             :amount="account.income_projected"
             :prefix="account.currency.prefix"
@@ -28,7 +28,7 @@
       {% endif %}
     </div>
     {% if account.exchanged and account.exchanged.income_projected %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="account.exchanged.income_projected"
             :prefix="account.exchanged.currency.prefix"
@@ -38,12 +38,12 @@
     {% endif %}
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'projected expenses' %}</div>
+        <div class="tw:text-gray-400">{% translate 'projected expenses' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       <div>
         {% if account.expense_projected != 0 %}
-        <div class="text-end font-monospace tw-text-red-400">
+        <div class="text-end font-monospace tw:text-red-400">
           <c-amount.display
               :amount="account.expense_projected"
               :prefix="account.currency.prefix"
@@ -56,7 +56,7 @@
       </div>
     </div>
     {% if account.exchanged and account.exchanged.expense_projected %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="account.exchanged.expense_projected"
             :prefix="account.exchanged.currency.prefix"
@@ -66,7 +66,7 @@
     {% endif %}
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'projected total' %}</div>
+        <div class="tw:text-gray-400">{% translate 'projected total' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       <div
@@ -80,7 +80,7 @@
       </div>
     </div>
     {% if account.exchanged.total_projected and account.exchanged.total_projected %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="account.exchanged.total_projected"
             :prefix="account.exchanged.currency.prefix"
@@ -91,11 +91,11 @@
     <hr class="my-3">
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'current income' %}</div>
+        <div class="tw:text-gray-400">{% translate 'current income' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       {% if account.income_current != 0 %}
-      <div class="text-end font-monospace tw-text-green-400">
+      <div class="text-end font-monospace tw:text-green-400">
         <c-amount.display
             :amount="account.income_current"
             :prefix="account.currency.prefix"
@@ -107,7 +107,7 @@
       {% endif %}
     </div>
     {% if account.exchanged and account.exchanged.income_current %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="account.exchanged.income_current"
             :prefix="account.exchanged.currency.prefix"
@@ -117,11 +117,11 @@
     {% endif %}
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'current expenses' %}</div>
+        <div class="tw:text-gray-400">{% translate 'current expenses' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       {% if account.expense_current != 0 %}
-      <div class="text-end font-monospace tw-text-red-400">
+      <div class="text-end font-monospace tw:text-red-400">
         <c-amount.display
             :amount="account.expense_current"
             :prefix="account.currency.prefix"
@@ -133,7 +133,7 @@
       {% endif %}
     </div>
     {% if account.exchanged and account.exchanged.expense_current %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="account.exchanged.expense_current"
             :prefix="account.exchanged.currency.prefix"
@@ -143,7 +143,7 @@
     {% endif %}
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'current total' %}</div>
+        <div class="tw:text-gray-400">{% translate 'current total' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       <div class="text-end font-monospace">
@@ -156,7 +156,7 @@
       </div>
     </div>
     {% if account.exchanged and account.exchanged.total_current %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="account.exchanged.total_current"
             :prefix="account.exchanged.currency.prefix"
@@ -168,7 +168,7 @@
       <hr class="my-3">
       <div class="d-flex justify-content-between align-items-baseline mt-2">
         <div class="text-end font-monospace">
-          <div class="tw-text-gray-400">{% translate 'final total' %}</div>
+          <div class="tw:text-gray-400">{% translate 'final total' %}</div>
         </div>
         <div class="dotted-line flex-grow-1"></div>
         <div class="text-end font-monospace">
@@ -181,7 +181,7 @@
         </div>
       </div>
       {% if account.exchanged and account.exchanged.total_final %}
-        <div class="text-end font-monospace tw-text-gray-500">
+        <div class="text-end font-monospace tw:text-gray-500">
           <c-amount.display
               :amount="account.exchanged.total_final"
               :prefix="account.exchanged.currency.prefix"

app/templates/cotton/ui/card.html

@@ -1,5 +1,5 @@
-<div class="card tw-relative h-100 shadow">
+<div class="card tw:relative h-100 shadow">
   <div class="card-body">
     {{ slot }}
   </div>
-</div>
+</div>

app/templates/cotton/ui/currency_card.html

@@ -7,11 +7,11 @@
     </h5>
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'projected income' %}</div>
+        <div class="tw:text-gray-400">{% translate 'projected income' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       {% if currency.income_projected != 0 %}
-      <div class="text-end font-monospace tw-text-green-400">
+      <div class="text-end font-monospace tw:text-green-400">
         <c-amount.display
             :amount="currency.income_projected"
             :prefix="currency.currency.prefix"
@@ -23,7 +23,7 @@
       {% endif %}
     </div>
     {% if currency.exchanged and currency.exchanged.income_projected %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="currency.exchanged.income_projected"
             :prefix="currency.exchanged.currency.prefix"
@@ -33,12 +33,12 @@
     {% endif %}
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'projected expenses' %}</div>
+        <div class="tw:text-gray-400">{% translate 'projected expenses' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       <div>
         {% if currency.expense_projected != 0 %}
-        <div class="text-end font-monospace tw-text-red-400">
+        <div class="text-end font-monospace tw:text-red-400">
           <c-amount.display
               :amount="currency.expense_projected"
               :prefix="currency.currency.prefix"
@@ -51,7 +51,7 @@
       </div>
     </div>
     {% if currency.exchanged and currency.exchanged.expense_projected %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="currency.exchanged.expense_projected"
             :prefix="currency.exchanged.currency.prefix"
@@ -61,7 +61,7 @@
     {% endif %}
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'projected total' %}</div>
+        <div class="tw:text-gray-400">{% translate 'projected total' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       <div class="text-end font-monospace">
@@ -74,7 +74,7 @@
       </div>
     </div>
     {% if currency.exchanged.total_projected and currency.exchanged.total_projected %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="currency.exchanged.total_projected"
             :prefix="currency.exchanged.currency.prefix"
@@ -85,11 +85,11 @@
     <hr class="my-3">
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'current income' %}</div>
+        <div class="tw:text-gray-400">{% translate 'current income' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       {% if currency.income_current != 0 %}
-      <div class="text-end font-monospace tw-text-green-400">
+      <div class="text-end font-monospace tw:text-green-400">
         <c-amount.display
             :amount="currency.income_current"
             :prefix="currency.currency.prefix"
@@ -101,7 +101,7 @@
       {% endif %}
     </div>
     {% if currency.exchanged and currency.exchanged.income_current %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="currency.exchanged.income_current"
             :prefix="currency.exchanged.currency.prefix"
@@ -111,11 +111,11 @@
     {% endif %}
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'current expenses' %}</div>
+        <div class="tw:text-gray-400">{% translate 'current expenses' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       {% if currency.expense_current != 0 %}
-      <div class="text-end font-monospace tw-text-red-400">
+      <div class="text-end font-monospace tw:text-red-400">
         <c-amount.display
             :amount="currency.expense_current"
             :prefix="currency.currency.prefix"
@@ -127,7 +127,7 @@
       {% endif %}
     </div>
     {% if currency.exchanged and currency.exchanged.expense_current %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="currency.exchanged.expense_current"
             :prefix="currency.exchanged.currency.prefix"
@@ -137,7 +137,7 @@
     {% endif %}
     <div class="d-flex justify-content-between align-items-baseline mt-2">
       <div class="text-end font-monospace">
-        <div class="tw-text-gray-400">{% translate 'current total' %}</div>
+        <div class="tw:text-gray-400">{% translate 'current total' %}</div>
       </div>
       <div class="dotted-line flex-grow-1"></div>
       <div class="text-end font-monospace">
@@ -150,7 +150,7 @@
       </div>
     </div>
     {% if currency.exchanged and currency.exchanged.total_current %}
-      <div class="text-end font-monospace tw-text-gray-500">
+      <div class="text-end font-monospace tw:text-gray-500">
         <c-amount.display
             :amount="currency.exchanged.total_current"
             :prefix="currency.exchanged.currency.prefix"
@@ -162,7 +162,7 @@
       <hr class="my-3">
       <div class="d-flex justify-content-between align-items-baseline mt-2">
         <div class="text-end font-monospace">
-          <div class="tw-text-gray-400">{% translate 'final total' %}</div>
+          <div class="tw:text-gray-400">{% translate 'final total' %}</div>
         </div>
         <div class="dotted-line flex-grow-1"></div>
         <div class="text-end font-monospace">
@@ -175,7 +175,7 @@
         </div>
       </div>
       {% if currency.exchanged and currency.exchanged.total_final %}
-        <div class="text-end font-monospace tw-text-gray-500">
+        <div class="text-end font-monospace tw:text-gray-500">
           <c-amount.display
               :amount="currency.exchanged.total_final"
               :prefix="currency.exchanged.currency.prefix"

app/templates/cotton/ui/deleted_transactions_action_bar.html

@@ -1,16 +1,16 @@
 {% load i18n %}
-<div class="tw-sticky tw-bottom-4 tw-left-0 tw-right-0 tw-z-50 tw-hidden mx-auto tw-w-fit" id="actions-bar"
+<div class="tw:sticky tw:bottom-4 tw:left-0 tw:right-0 tw:z-50 tw:hidden mx-auto tw: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
-                then add .tw-hidden to #actions-bar
+                then add .tw:hidden to #actions-bar
                 then remove .slide-in-bottom-reverse
               end
             else
               if #actions-bar
-                remove .tw-hidden from #actions-bar
+                remove .tw:hidden from #actions-bar
                 then trigger selected_transactions_updated
               end
             end
@@ -26,20 +26,20 @@
           </button>
           <ul class="dropdown-menu">
             <li>
-              <div class="dropdown-item px-3 tw-cursor-pointer"
+              <div class="dropdown-item px-3 tw:cursor-pointer"
                    _="on click set <#transactions-list input[type='checkbox']/>'s checked to true then call me.blur() then trigger change">
-                <i class="fa-regular fa-square-check tw-text-green-400 me-3"></i>{% translate 'Select All' %}
+                <i class="fa-regular fa-square-check tw:text-green-400 me-3"></i>{% translate 'Select All' %}
               </div>
             </li>
             <li>
-              <div class="dropdown-item px-3 tw-cursor-pointer"
+              <div class="dropdown-item px-3 tw: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 tw-text-red-400 me-3"></i>{% translate 'Unselect All' %}
+                <i class="fa-regular fa-square tw:text-red-400 me-3"></i>{% translate 'Unselect All' %}
               </div>
             </li>
           </ul>
         </div>
-        <div class="vr tw-align-middle"></div>
+        <div class="vr tw:align-middle"></div>
         <button class="btn btn-secondary btn-sm"
                 hx-get="{% url 'transactions_bulk_undelete' %}"
                 hx-include=".transaction"
@@ -60,7 +60,7 @@
                 _="install prompt_swal">
           <i class="fa-solid fa-trash text-danger"></i>
         </button>
-        <div class="vr tw-align-middle"></div>
+        <div class="vr tw:align-middle"></div>
         <div class="btn-group"
              _="on selected_transactions_updated from #actions-bar
                   set realTotal to math.bignumber(0)
@@ -118,10 +118,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Flat Total" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-flat-total"
                        _="on click
                             set original_value to my innerText
@@ -138,10 +138,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Real Total" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-real-total"
                        _="on click
                             set original_value to my innerText
@@ -158,10 +158,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Mean" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-mean"
                        _="on click
                             set original_value to my innerText
@@ -178,10 +178,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Max" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-max"
                        _="on click
                             set original_value to my innerText
@@ -198,10 +198,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Min" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-min"
                        _="on click
                             set original_value to my innerText
@@ -218,10 +218,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Count" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-count"
                        _="on click
                             set original_value to my innerText

app/templates/cotton/ui/help_icon.html

@@ -0,0 +1,8 @@
+{% spaceless %}
+{% load i18n %}
+<span class="tw:text-xs text-white-50 mx-1"
+      data-bs-toggle="tooltip"
+      data-bs-title="{{ content }}">
+  <i class="{% if not icon %}fa-solid fa-circle-question{% else %}{{ icon }}{% endif %} fa-fw"></i>
+</span>
+{% endspaceless %}

app/templates/cotton/ui/info_card.html

@@ -1,9 +1,9 @@
-<div class="card tw-relative h-100 shadow">
-  <div class="tw-absolute tw-h-8 tw-w-8 tw-right-2 tw-top-2 tw-bg-{{ color }}-300 tw-text-{{ color }}-800 text-center align-items-center d-flex justify-content-center rounded-2">
+<div class="card tw:relative h-100 shadow">
+  <div class="tw:absolute tw:h-8 tw:w-8 tw:right-2 tw:top-2 tw:bg-{{ color }}-300 tw:text-{{ color }}-800 text-center align-items-center d-flex justify-content-center rounded-2">
     {% if icon %}<i class="{{ icon }}"></i>{% else %}<span class="fw-bold">{{ title.0 }}</span>{% endif %}
   </div>
   <div class="card-body">
-    <h5 class="tw-text-{{ color }}-400 fw-bold tw-mr-[50px]" {{ attrs }}>{{ title }}{% if help_text %}{% include 'includes/help_icon.html' with content=help_text %}{% endif %}</h5>
+    <h5 class="tw:text-{{ color }}-400 fw-bold tw:mr-[50px]" {{ attrs }}>{{ title }}{% if help_text %}<c-ui.help-icon :content="help_text" icon=""></c-ui.help-icon>{% endif %}</h5>
     {{ slot }}
   </div>
 </div>

app/templates/cotton/ui/percentage_distribution.html

@@ -1,28 +1,28 @@
 {% load i18n %}
 <div class="progress-stacked">
   <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.income_projected|floatformat:"2u" }}%">
-    <div class="progress-bar progress-bar-striped !tw-bg-green-300"
+    <div class="progress-bar progress-bar-striped tw:bg-green-300!"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="{% trans 'Projected Income' %} ({{ percentage.percentages.income_projected|floatformat:2 }}%)">
     </div>
   </div>
   <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Current Income' %} ({{ percentage.percentages.income_current|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.income_current|floatformat:"2u" }}%">
-    <div class="progress-bar !tw-bg-green-400"
+    <div class="progress-bar tw:bg-green-400!"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="{% trans 'Current Income' %} ({{ p.percentages.income_current|floatformat:2 }}%)">
     </div>
   </div>
   <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.expense_projected|floatformat:"2u" }}%">
-    <div class="progress-bar progress-bar-striped !tw-bg-red-300"
+    <div class="progress-bar progress-bar-striped tw:bg-red-300!"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="{% trans 'Projected Expenses' %} ({{ percentage.percentages.expense_projected|floatformat:2 }}%)">
     </div>
   </div>
   <div class="progress position-relative" role="progressbar" aria-label="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)" aria-valuenow="{{ percentage.percentages.expense_projected|floatformat:0 }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage.percentages.expense_current|floatformat:"2u" }}%">
-    <div class="progress-bar !tw-bg-red-400"
+    <div class="progress-bar tw:bg-red-400!"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="{% trans 'Current Expenses' %} ({{ percentage.percentages.expense_current|floatformat:2 }}%)">

app/templates/cotton/ui/transactions_action_bar.html

@@ -1,16 +1,17 @@
 {% load i18n %}
-<div class="tw-sticky tw-bottom-4 tw-left-0 tw-right-0 tw-z-50 tw-hidden mx-auto tw-w-fit" id="actions-bar"
+<div class="tw:sticky tw:bottom-4 tw:left-0 tw:right-0 tw:z-50 tw:hidden mx-auto tw: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
-                then add .tw-hidden to #actions-bar
+                then add .tw:hidden to #actions-bar
                 then remove .slide-in-bottom-reverse
               end
             else
               if #actions-bar
-                remove .tw-hidden from #actions-bar
+                set #selected-count's innerHTML to length of <input[type='checkbox']:checked/> in #transactions-list
+                then remove .tw:hidden from #actions-bar
                 then trigger selected_transactions_updated
               end
             end
@@ -19,6 +20,8 @@
   <div class="card slide-in-bottom">
     <div class="card-body p-2 d-flex justify-content-between align-items-center gap-3">
       {% spaceless %}
+        <div class="tw:font-bold tw:text-md ms-2" id="selected-count">0</div>
+        <div class="vr tw:align-middle"></div>
         <div class="dropdown">
           <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"
                   aria-expanded="false">
@@ -26,20 +29,20 @@
           </button>
           <ul class="dropdown-menu">
             <li>
-              <div class="dropdown-item px-3 tw-cursor-pointer"
+              <div class="dropdown-item px-3 tw: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 tw-text-green-400 me-3"></i>{% translate 'Select All' %}
+                <i class="fa-regular fa-square-check tw:text-green-400 me-3"></i>{% translate 'Select All' %}
               </div>
             </li>
             <li>
-              <div class="dropdown-item px-3 tw-cursor-pointer"
+              <div class="dropdown-item px-3 tw: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 tw-text-red-400 me-3"></i>{% translate 'Unselect All' %}
+                <i class="fa-regular fa-square tw:text-red-400 me-3"></i>{% translate 'Unselect All' %}
               </div>
             </li>
           </ul>
         </div>
-        <div class="vr tw-align-middle"></div>
+        <div class="vr tw:align-middle"></div>
         <div class="btn-group">
           <button class="btn btn-secondary btn-sm"
                   hx-get="{% url 'transactions_bulk_edit' %}"
@@ -56,17 +59,17 @@
 
           <ul class="dropdown-menu">
             <li>
-              <div class="dropdown-item px-3 tw-cursor-pointer"
+              <div class="dropdown-item px-3 tw:cursor-pointer"
                    hx-get="{% url 'transactions_bulk_unpay' %}"
                    hx-include=".transaction">
-                <i class="fa-regular fa-circle tw-text-red-400 fa-fw me-3"></i>{% translate 'Mark as unpaid' %}
+                <i class="fa-regular fa-circle tw:text-red-400 fa-fw me-3"></i>{% translate 'Mark as unpaid' %}
               </div>
             </li>
             <li>
-              <div class="dropdown-item px-3 tw-cursor-pointer"
+              <div class="dropdown-item px-3 tw:cursor-pointer"
                    hx-get="{% url 'transactions_bulk_pay' %}"
                    hx-include=".transaction">
-                <i class="fa-regular fa-circle-check tw-text-green-400 fa-fw me-3"></i>{% translate 'Mark as paid' %}
+                <i class="fa-regular fa-circle-check tw:text-green-400 fa-fw me-3"></i>{% translate 'Mark as paid' %}
               </div>
             </li>
           </ul>
@@ -91,7 +94,7 @@
                 _="install prompt_swal">
           <i class="fa-solid fa-trash text-danger"></i>
         </button>
-        <div class="vr tw-align-middle"></div>
+        <div class="vr tw:align-middle"></div>
         <div class="btn-group"
              _="on selected_transactions_updated from #actions-bar
                   set realTotal to math.bignumber(0)
@@ -149,10 +152,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Flat Total" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-flat-total"
                        _="on click
                             set original_value to my innerText
@@ -169,10 +172,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Real Total" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-real-total"
                        _="on click
                             set original_value to my innerText
@@ -189,10 +192,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Mean" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-mean"
                        _="on click
                             set original_value to my innerText
@@ -209,10 +212,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Max" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-max"
                        _="on click
                             set original_value to my innerText
@@ -229,10 +232,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Min" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-min"
                        _="on click
                             set original_value to my innerText
@@ -249,10 +252,10 @@
             <li>
               <div class="dropdown-item-text p-0">
                 <div>
-                  <div class="text-body-secondary tw-text-xs tw-font-medium px-3">
+                  <div class="text-body-secondary tw:text-xs tw:font-medium px-3">
                     {% trans "Count" %}
                   </div>
-                  <div class="dropdown-item px-3 tw-cursor-pointer"
+                  <div class="dropdown-item px-3 tw:cursor-pointer"
                        id="calc-menu-count"
                        _="on click
                             set original_value to my innerText

app/templates/cotton/ui/transactions_fab.html

@@ -0,0 +1,60 @@
+{% load i18n %}
+<c-components.fab>
+  <c-components.fab_menu_button
+            color="success"
+            hx_target="#generic-offcanvas"
+            hx_trigger="click, add_income from:window"
+            hx_vals='{"year": {{ year }}, {% if month %}"month": {{ month }},{% endif %} "type": "IN"}'
+            url="{% url 'transaction_add' %}"
+            icon="fa-solid fa-arrow-right-to-bracket"
+            title="{% translate "Income" %}"></c-components.fab_menu_button>
+
+  <c-components.fab_menu_button
+            color="danger"
+            hx_target="#generic-offcanvas"
+            hx_trigger="click, add_income from:window"
+            hx_vals='{"year": {{ year }}, {% if month %}"month": {{ month }},{% endif %} "type": "EX"}'
+            url="{% url 'transaction_add' %}"
+            icon="fa-solid fa-arrow-right-from-bracket"
+            title="{% translate "Expense" %}"></c-components.fab_menu_button>
+
+  <c-components.fab_menu_button
+            color="warning"
+            hx_target="#generic-offcanvas"
+            hx_trigger="click, installment from:window"
+            url="{% url 'installment_plan_add' %}"
+            icon="fa-solid fa-divide"
+            title="{% translate "Installment" %}"></c-components.fab_menu_button>
+
+  <c-components.fab_menu_button
+            color="warning"
+            hx_target="#generic-offcanvas"
+            hx_trigger="click, recurring from:window"
+            url="{% url 'recurring_transaction_add' %}"
+            icon="fa-solid fa-repeat"
+            title="{% translate "Recurring" %}"></c-components.fab_menu_button>
+
+  <c-components.fab_menu_button
+            color="info"
+            hx_target="#generic-offcanvas"
+            hx_trigger="click, transfer from:window"
+            hx_vals='{"year": {{ year }} {% if month %}, "month": {{ month }}{% endif %}}'
+            url="{% url 'transactions_transfer' %}"
+            icon="fa-solid fa-money-bill-transfer"
+            title="{% translate "Transfer" %}"></c-components.fab_menu_button>
+
+  <c-components.fab_menu_button
+            color="info"
+            hx_target="#generic-offcanvas"
+            hx_trigger="click, balance from:window"
+            url="{% url 'account_reconciliation' %}"
+            icon="fa-solid fa-scale-balanced"
+            title="{% translate "Balance" %}"></c-components.fab_menu_button>
+    <c-components.fab_menu_button
+            color="secondary"
+            hx_target="#generic-offcanvas"
+            hx_trigger="click, quick_transaction from:window"
+            url="{% url 'quick_transactions_create_menu' %}"
+            icon="fa-solid fa-person-running"
+            title="{% translate "Quick Transaction" %}"></c-components.fab_menu_button>
+</c-components.fab>

app/templates/currencies/fragments/list.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 <div class="container px-md-3 py-3 column-gap-5">
-  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+  <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
     {% spaceless %}
     <div>{% translate 'Currencies' %}<span>
-      <a class="text-decoration-none tw-text-2xl p-1 category-action"
+      <a class="text-decoration-none tw:text-2xl p-1 category-action"
                 role="button"
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate "Add" %}"

app/templates/dca/fragments/strategy/details.html

@@ -2,10 +2,10 @@
 {% load i18n %}
 <div class="container-fluid px-md-3 py-3 column-gap-5">
   <div class="d-lg-flex justify-content-between mb-3 w-100">
-    <div class="tw-text-3xl fw-bold font-monospace d-flex align-items-center">
+    <div class="tw:text-3xl fw-bold font-monospace d-flex align-items-center">
       {{ strategy.name }}
     </div>
-    <div class="tw-text-sm text-lg-end mt-2 mt-lg-0">
+    <div class="tw:text-sm text-lg-end mt-2 mt-lg-0">
       <div class="mb-2">
         <span class="badge rounded-pill text-bg-secondary">{{ strategy.payment_currency.name }}</span> x <span class="badge rounded-pill text-bg-secondary">{{ strategy.target_currency.name }}</span>
       </div>
@@ -19,7 +19,7 @@
            • {{ strategy.current_price.1|date:"SHORT_DATETIME_FORMAT" }}
           </c-amount.display>
           {% else %}
-          <div class="tw-text-red-400">{% trans "No exchange rate available" %}</div>
+          <div class="tw:text-red-400">{% trans "No exchange rate available" %}</div>
           {% endif %}
       </div>
     </div>
@@ -30,7 +30,7 @@
       <div class="card">
         <div class="card-body">
           {% spaceless %}
-            <div class="card-title tw-text-xl">{% trans "Entries" %}<span>
+            <div class="card-title tw:text-xl">{% trans "Entries" %}<span>
                 <a class="text-decoration-none p-1 category-action"
                    role="button"
                    data-bs-toggle="tooltip"
@@ -190,7 +190,7 @@
             <div class="card-body">
               <h5 class="card-title">{% trans "Total P/L" %}</h5>
               <div
-                  class="card-text {% if strategy.total_profit_loss >= 0 %}tw-text-green-400{% else %}tw-text-red-400{% endif %}">
+                  class="card-text {% if strategy.total_profit_loss >= 0 %}tw:text-green-400{% else %}tw:text-red-400{% endif %}">
                 <c-amount.display
                     :amount="strategy.total_profit_loss"
                     :prefix="strategy.payment_currency.prefix"
@@ -206,7 +206,7 @@
             <div class="card-body">
               <h5 class="card-title">{% trans "Total % P/L" %}</h5>
               <div
-                  class="card-text {% if strategy.total_profit_loss >= 0 %}tw-text-green-400{% else %}tw-text-red-400{% endif %}">
+                  class="card-text {% if strategy.total_profit_loss >= 0 %}tw:text-green-400{% else %}tw:text-red-400{% endif %}">
                 {{ strategy.total_profit_loss_percentage|floatformat:2 }}%
               </div>
             </div>
@@ -451,7 +451,7 @@
           <div class="card">
             <div class="card-body">
               <h5 class="card-title">{% trans "Investment Frequency" %}</h5>
-              <p class="card-text tw-text-gray-400">
+              <p class="card-text tw:text-gray-400">
                 {% trans "The straighter the blue line, the more consistent your DCA strategy is." %}
               </p>
               <canvas id="frequencyChart"></canvas>

app/templates/dca/fragments/strategy/list.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 <div class="container px-md-3 py-3 column-gap-5">
-  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+  <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
     {% spaceless %}
       <div>{% translate 'Dollar Cost Average Strategies' %}<span>
-      <a class="text-decoration-none tw-text-2xl p-1 category-action"
+      <a class="text-decoration-none tw:text-2xl p-1 category-action"
          role="button"
          data-bs-toggle="tooltip"
          data-bs-title="{% translate "Add" %}"
@@ -25,12 +25,12 @@
           <a href="{% url 'dca_strategy_detail_index' strategy_id=strategy.id %}" hx-boost="true"
              class="text-decoration-none card-body">
             <div class="">
-              <div class="card-title tw-text-xl">{{ strategy.name }}</div>
-              <div class="card-text tw-text-gray-400">{{ strategy.notes }}</div>
+              <div class="card-title tw:text-xl">{{ strategy.name }}</div>
+              <div class="card-text tw:text-gray-400">{{ strategy.notes }}</div>
             </div>
           </a>
           <div class="card-footer text-end">
-            <a class="text-decoration-none tw-text-gray-400 p-1"
+            <a class="text-decoration-none tw:text-gray-400 p-1"
                role="button"
                data-bs-toggle="tooltip"
                data-bs-title="{% translate "Edit" %}"

app/templates/entities/fragments/list.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 <div class="container px-md-3 py-3 column-gap-5">
-  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+  <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
     {% spaceless %}
     <div>{% translate 'Entities' %}<span>
-      <a class="text-decoration-none tw-text-2xl p-1 category-action"
+      <a class="text-decoration-none tw:text-2xl p-1 category-action"
                 role="button"
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate "Add" %}"

app/templates/exchange_rates/fragments/list.html

@@ -1,10 +1,10 @@
 {% load currency_display %}
 {% load i18n %}
 <div class="container px-md-3 py-3 column-gap-5">
-  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+  <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
     {% spaceless %}
       <div>{% translate 'Exchange Rates' %}<span>
-      <a class="text-decoration-none tw-text-2xl p-1 category-action"
+      <a class="text-decoration-none tw:text-2xl p-1 category-action"
          role="button"
          data-bs-toggle="tooltip"
          data-bs-title="{% translate "Add" %}"

app/templates/exchange_rates/fragments/table.html

@@ -58,7 +58,7 @@
     <nav aria-label="{% translate 'Page navigation' %}">
     <ul class="pagination justify-content-center mt-5">
       <li class="page-item">
-        <a class="page-link tw-cursor-pointer {% if not page_obj.has_previous %}disabled{% endif %}"
+        <a class="page-link tw:cursor-pointer {% if not page_obj.has_previous %}disabled{% endif %}"
            hx-get="{% if page_obj.has_previous %}{% url 'exchange_rates_list_pair' %}{% endif %}"
            hx-vals='{"page": 1, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
            hx-include="#filter, #order"
@@ -79,13 +79,13 @@
               {% if page_number <= page_obj.number|add:3 and page_number >= page_obj.number|add:-3 %}
                   {% if page_obj.number == page_number %}
                       <li class="page-item active">
-                          <a class="page-link tw-cursor-pointer">
+                          <a class="page-link tw:cursor-pointer">
                               {{ page_number }}
                           </a>
                       </li>
                   {% else %}
                       <li class="page-item">
-                          <a class="page-link tw-cursor-pointer"
+                          <a class="page-link tw:cursor-pointer"
                              hx-get="{% url 'exchange_rates_list_pair' %}"
                              hx-vals='{"page": {{ page_number }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
                              hx-target="#exchange-rates-table"
@@ -104,7 +104,7 @@
           </a>
         </li>
         <li class="page-item">
-          <a class="page-link tw-cursor-pointer"
+          <a class="page-link tw:cursor-pointer"
              hx-get="{% url 'exchange_rates_list_pair' %}" hx-target="#exchange-rates-table"
              hx-vals='{"page": {{ page_obj.paginator.num_pages }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
              hx-include="#filter, #order"
@@ -115,7 +115,7 @@
         </li>
       {% endif %}
       <li class="page-item">
-        <a class="page-link {% if not page_obj.has_next %}disabled{% endif %} tw-cursor-pointer"
+        <a class="page-link {% if not page_obj.has_next %}disabled{% endif %} tw:cursor-pointer"
            hx-get="{% if page_obj.has_next %}{% url 'exchange_rates_list_pair' %}{% endif %}"
            hx-vals='{"page": {{ page_obj.paginator.num_pages }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
            hx-include="#filter, #order"

app/templates/exchange_rates_services/fragments/list.html

@@ -1,10 +1,10 @@
 {% load currency_display %}
 {% load i18n %}
 <div class="container px-md-3 py-3 column-gap-5">
-  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+  <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
     {% spaceless %}
       <div>{% translate 'Automatic Exchange Rates' %}<span>
-      <a class="text-decoration-none tw-text-2xl p-1 category-action"
+      <a class="text-decoration-none tw:text-2xl p-1 category-action"
          role="button"
          data-bs-toggle="tooltip"
          data-bs-title="{% translate "Add" %}"

app/templates/exchange_rates_services/fragments/table.html

@@ -58,7 +58,7 @@
     <nav aria-label="{% translate 'Page navigation' %}">
     <ul class="pagination justify-content-center mt-5">
       <li class="page-item">
-        <a class="page-link tw-cursor-pointer {% if not page_obj.has_previous %}disabled{% endif %}"
+        <a class="page-link tw:cursor-pointer {% if not page_obj.has_previous %}disabled{% endif %}"
            hx-get="{% if page_obj.has_previous %}{% url 'exchange_rates_list_pair' %}{% endif %}"
            hx-vals='{"page": 1, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
            hx-include="#filter, #order"
@@ -79,13 +79,13 @@
               {% if page_number <= page_obj.number|add:3 and page_number >= page_obj.number|add:-3 %}
                   {% if page_obj.number == page_number %}
                       <li class="page-item active">
-                          <a class="page-link tw-cursor-pointer">
+                          <a class="page-link tw:cursor-pointer">
                               {{ page_number }}
                           </a>
                       </li>
                   {% else %}
                       <li class="page-item">
-                          <a class="page-link tw-cursor-pointer"
+                          <a class="page-link tw:cursor-pointer"
                              hx-get="{% url 'exchange_rates_list_pair' %}"
                              hx-vals='{"page": {{ page_number }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
                              hx-target="#exchange-rates-table"
@@ -104,7 +104,7 @@
           </a>
         </li>
         <li class="page-item">
-          <a class="page-link tw-cursor-pointer"
+          <a class="page-link tw:cursor-pointer"
              hx-get="{% url 'exchange_rates_list_pair' %}" hx-target="#exchange-rates-table"
              hx-vals='{"page": {{ page_obj.paginator.num_pages }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
              hx-include="#filter, #order"
@@ -115,7 +115,7 @@
         </li>
       {% endif %}
       <li class="page-item">
-        <a class="page-link {% if not page_obj.has_next %}disabled{% endif %} tw-cursor-pointer"
+        <a class="page-link {% if not page_obj.has_next %}disabled{% endif %} tw:cursor-pointer"
            hx-get="{% if page_obj.has_next %}{% url 'exchange_rates_list_pair' %}{% endif %}"
            hx-vals='{"page": {{ page_obj.paginator.num_pages }}, "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'
            hx-include="#filter, #order"

app/templates/import_app/fragments/profiles/add.html

@@ -8,7 +8,7 @@
 {% block body %}
 {% if message %}
 <div class="alert alert-info" role="alert" id="msg" hx-preserve="true">
-  <h6 class="alert-heading tw-italic tw-font-bold">{% trans 'A message from the author' %}</h6>
+  <h6 class="alert-heading tw:italic tw:font-bold">{% trans 'A message from the author' %}</h6>
   <hr>
   <p class="mb-0">{{ message|linebreaksbr }}</p>
 </div>

app/templates/import_app/fragments/profiles/list.html

@@ -1,11 +1,11 @@
 {% load i18n %}
 <div class="container px-md-3 py-3 column-gap-5">
-  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+  <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
     {% spaceless %}
     <div>{% translate 'Import Profiles' %}<span>
       <span class="dropdown" data-bs-toggle="tooltip"
                 data-bs-title="{% translate "Add" %}">
-        <a class="text-decoration-none tw-text-2xl p-1" role="button"
+        <a class="text-decoration-none tw:text-2xl p-1" role="button"
                 data-bs-toggle="dropdown"
                 data-bs-title="{% translate "Add" %}" aria-expanded="false">
           <i class="fa-solid fa-circle-plus fa-fw"></i>

app/templates/import_app/fragments/runs/list.html

@@ -15,20 +15,20 @@
     {% for run in runs %}
       <div class="col">
         <div class="card">
-          <div class="card-header tw-text-sm {% if run.status == run.Status.QUEUED %}tw-text-white{% elif run.status == run.Status.PROCESSING %}text-warning{% elif run.status == run.Status.FINISHED %}text-success{% else %}text-danger{% endif %}">
+          <div class="card-header tw:text-sm {% if run.status == run.Status.QUEUED %}text-body{% elif run.status == run.Status.PROCESSING %}text-warning{% elif run.status == run.Status.FINISHED %}text-success{% else %}text-danger{% endif %}">
             <span><i class="fa-solid {% if run.status == run.Status.QUEUED %}fa-hourglass-half{% elif run.status == run.Status.PROCESSING %}fa-spinner{% elif run.status == run.Status.FINISHED %}fa-check{% else %}fa-xmark{% endif %} fa-fw me-2"></i>{{ run.get_status_display }}</span>
           </div>
           <div class="card-body">
-            <h5 class="card-title"><i class="fa-solid fa-hashtag me-1 tw-text-xs tw-text-gray-400"></i>{{ run.id }}<span class="tw-text-xs tw-text-gray-400 ms-1">({{ run.file_name }})</span></h5>
+            <h5 class="card-title"><i class="fa-solid fa-hashtag me-1 tw:text-xs tw:text-gray-400"></i>{{ run.id }}<span class="tw:text-xs tw:text-gray-400 ms-1">({{ run.file_name }})</span></h5>
             <hr>
             <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 w-100 g-4">
               <div class="col">
                 <div class="d-flex flex-row">
                   <div class="d-flex flex-column">
-                    <div class="text-body-secondary tw-text-xs tw-font-medium">
+                    <div class="text-body-secondary tw:text-xs tw:font-medium">
                       {% trans 'Total Items' %}
                     </div>
-                    <div class="tw-text-sm">
+                    <div class="tw:text-sm">
                       {{ run.total_rows }}
                     </div>
                   </div>
@@ -38,10 +38,10 @@
               <div class="col">
                 <div class="d-flex flex-row">
                   <div class="d-flex flex-column">
-                    <div class="text-body-secondary tw-text-xs tw-font-medium">
+                    <div class="text-body-secondary tw:text-xs tw:font-medium">
                       {% trans 'Processed Items' %}
                     </div>
-                    <div class="tw-text-sm">
+                    <div class="tw:text-sm">
                       {{ run.processed_rows }}
                     </div>
                   </div>
@@ -51,10 +51,10 @@
               <div class="col">
                 <div class="d-flex flex-row">
                   <div class="d-flex flex-column">
-                    <div class="text-body-secondary tw-text-xs tw-font-medium">
+                    <div class="text-body-secondary tw:text-xs tw:font-medium">
                       {% trans 'Skipped Items' %}
                     </div>
-                    <div class="tw-text-sm">
+                    <div class="tw:text-sm">
                       {{ run.skipped_rows }}
                     </div>
                   </div>
@@ -64,10 +64,10 @@
               <div class="col">
                 <div class="d-flex flex-row">
                   <div class="d-flex flex-column">
-                    <div class="text-body-secondary tw-text-xs tw-font-medium">
+                    <div class="text-body-secondary tw:text-xs tw:font-medium">
                       {% trans 'Failed Items' %}
                     </div>
-                    <div class="tw-text-sm">
+                    <div class="tw:text-sm">
                       {{ run.failed_rows }}
                     </div>
                   </div>
@@ -77,10 +77,10 @@
               <div class="col">
                 <div class="d-flex flex-row">
                   <div class="d-flex flex-column">
-                    <div class="text-body-secondary tw-text-xs tw-font-medium">
+                    <div class="text-body-secondary tw:text-xs tw:font-medium">
                       {% trans 'Successful Items' %}
                     </div>
-                    <div class="tw-text-sm">
+                    <div class="tw:text-sm">
                       {{ run.successful_rows }}
                     </div>
                   </div>

app/templates/import_app/fragments/runs/log.html

@@ -5,7 +5,7 @@
 {% block title %}{% translate 'Logs for' %} #{{ run.id }}{% endblock %}
 
 {% block body %}
-<div class="card tw-max-h-full tw-overflow-auto">
+<div class="card tw:max-h-full tw:overflow-auto">
   <div class="card-body">
     {{ run.logs|linebreaks }}
   </div>

app/templates/includes/help_icon.html

@@ -1,7 +0,0 @@
-{% spaceless %}
-<span class="tw-text-xs text-white-50 mx-1"
-      data-bs-toggle="tooltip"
-      data-bs-title="{{ content }}">
-  <i class="fa-solid fa-circle-question fa-fw"></i>
-</span>
-{% endspaceless %}

app/templates/includes/navbar.html

@@ -12,7 +12,7 @@
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarContent">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0 nav-underline" hx-push-url="true">
+      <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="#"
@@ -50,7 +50,7 @@
           <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||recurring_trasanctions_index||transactions_all_index||transactions_trash_index' %}"
+          <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">
@@ -68,6 +68,8 @@
             {% 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' %}"
@@ -94,7 +96,7 @@
           </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' %}"
+          <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">
@@ -159,16 +161,16 @@
           </ul>
         </li>
       </ul>
-      <ul class="navbar-nav mt-3 mb-2 mb-lg-0 mt-lg-0">
-        <li class="nav-item text-center w-100">
-          <a class="nav-item tw-text-2xl tw-cursor-pointer me-lg-4"
+      <ul class="navbar-nav mb-2 mb-lg-0 gap-3">
+        <li class="nav-item">
+          <div class="nav-link tw:lg:text-2xl! tw:cursor-pointer"
              data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="{% trans "Calculator" %}"
              _="on click trigger show on #calculator">
             <i class="fa-solid fa-calculator"></i>
-          </a>
+            <span class="d-lg-none d-inline">{% trans "Calculator" %}</span>
+          </div>
         </li>
-        <li class="text-center w-100">{% include 'includes/navbar/user_menu.html' %}</li>
-
+        <li class="w-100">{% include 'includes/navbar/user_menu.html' %}</li>
       </ul>
     </div>
   </div>

app/templates/includes/navbar/user_menu.html

@@ -1,9 +1,10 @@
 {% load settings %}
 {% load i18n %}
 <div class="dropdown">
-  <a class="tw-text-2xl" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <div class="nav-link tw:lg:text-2xl! tw:cursor-pointer" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     <i class="fa-solid fa-user"></i>
-  </a>
+    <span class="d-lg-none d-inline">{% trans "Profile" %}</span>
+  </div>
   <ul class="dropdown-menu dropdown-menu-start dropdown-menu-lg-end">
     <li class="dropdown-item-text">{{ user.email }}</li>
     <li><hr class="dropdown-divider"></li>

app/templates/includes/placeholders.html

@@ -1,14 +1,14 @@
 {# We use this to preload dynamically generated tailwind classes so the compiler can build them ahead of time #}
 
-<div class="tw-text-blue-800"></div>
-<div class="tw-text-yellow-800"></div>
-<div class="tw-text-red-800"></div>
-<div class="tw-text-green-800"></div>
-<div class="tw-text-blue-400"></div>
-<div class="tw-text-yellow-400"></div>
-<div class="tw-text-red-400"></div>
-<div class="tw-text-green-400"></div>
-<div class="tw-bg-blue-300"></div>
-<div class="tw-bg-yellow-300"></div>
-<div class="tw-bg-red-300"></div>
-<div class="tw-bg-green-300"></div>
+<div class="tw:text-blue-800"></div>
+<div class="tw:text-yellow-800"></div>
+<div class="tw:text-red-800"></div>
+<div class="tw:text-green-800"></div>
+<div class="tw:text-blue-400"></div>
+<div class="tw:text-yellow-400"></div>
+<div class="tw:text-red-400"></div>
+<div class="tw:text-green-400"></div>
+<div class="tw:bg-blue-300"></div>
+<div class="tw:bg-yellow-300"></div>
+<div class="tw:bg-red-300"></div>
+<div class="tw:bg-green-300"></div>

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

@@ -1,15 +1,19 @@
 <script type="text/hyperscript">
 on paid if body do not include #settings-mute-sound
   js
+    volume = JSON.parse(document.getElementById('volume').textContent) / 10
     paidSound.pause()
     paidSound.currentTime = 0
+    paidSound.volume = volume
     paidSound.play()
   end
 end
 on unpaid if body do not include #settings-mute-sound
   js
+    volume = JSON.parse(document.getElementById('volume').textContent) / 10
     unpaidSound.pause()
     unpaidSound.currentTime = 0
+    unpaidSound.volume = volume
     unpaidSound.play()
   end
 end

app/templates/includes/styles.html

@@ -1,4 +1,3 @@
 {% load webpack_loader %}
 
 {% stylesheet_pack 'style' %}
-{#{% stylesheet_pack 'select' %}#}

app/templates/includes/toasts.html

@@ -1,6 +1,5 @@
 <div id="toasts">
-  <div class="toast-container position-fixed bottom-0 end-0 p-3" hx-trigger="load, updated from:window, toasts from:window" hx-get="{% url 'toasts' %}" hx-swap="beforeend">
+  <div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3" hx-trigger="load, updated from:window, toasts from:window" hx-get="{% url 'toasts' %}" hx-swap="beforeend">
 
   </div>
 </div>
-

app/templates/includes/tools/calculator.html

@@ -1,5 +1,5 @@
 {% load formats %}
-<div class="tw-hidden tw-w-[60vw] lg:tw-w-[30vw] xl:tw-w-[20vw] position-fixed shadow rounded-3 bg-body tw-border-gray-700 tw-border tw-border-solid tw-text-center tw-align-middle tw-z-[2000] tw-touch-none user-select-none"
+<div class="tw:hidden tw:w-[60vw] tw:lg:w-[30vw] tw:xl:w-[20vw] position-fixed shadow rounded-3 bg-body tw:border-gray-700 tw:border tw:border-solid tw:text-center tw:align-middle tw:z-[2000] tw:touch-none user-select-none"
      id="calculator"
      hx-preserve
      _="
@@ -13,8 +13,8 @@
           on focusin halt the event end -- this prevents bootstrap's static offcanvas from hijacking the focus from the input when open end
 
           on show or keyup[code is 'KeyC' and altKey is true] from body
-            if my.classList.contains('tw-hidden')
-              remove .tw-hidden from me
+            if my.classList.contains('tw:hidden')
+              remove .{'tw:hidden'} from me
               measure my width, height
               set xoff to (window.innerWidth/2) - (width/2)
               set yoff to (window.innerHeight/2) - (height)
@@ -23,7 +23,7 @@
               then call #calculator-input.focus()
             else
               add .scale-out-center to me then wait for animationend then remove .scale-out-center from me
-              add .tw-hidden to me
+              add .{'tw:hidden'} to me
             end
           end
 
@@ -48,7 +48,7 @@
           end">
 
       <div id="calculator-handle"
-           class="position-absolute bg-secondary rounded-top-2 tw-cursor-move d-flex align-items-center justify-content-center tw-top-[-20px] tw-left-[3px] tw-w-[2em] tw-h-[20px]">
+           class="position-absolute bg-secondary rounded-top-2 tw:cursor-move d-flex align-items-center justify-content-center tw:top-[-20px] tw:left-[3px] tw:w-[2em] tw:h-[20px]">
         <i class="fa-solid fa-grip"></i>
       </div>
 
@@ -73,31 +73,31 @@
                   end
                   then set localizedResult to it
                   set #calculator-result.innerText to localizedResult
-                  then remove .tw-hidden from #calculator-result-container
+                  then remove .{'tw:hidden'} from #calculator-result-container
                   then add .swing-in-top-fwd to #calculator-result-container
                   then settle
                   then remove .swing-in-top-fwd from #calculator-result-container
                 else
                   add .swing-out-top-bck to #calculator-result-container
                   then settle
-                  then add .tw-hidden to #calculator-result-container
+                  then add .{'tw:hidden'} to #calculator-result-container
                   then remove .swing-out-top-bck from #calculator-result-container
                 end
               catch e
                 add .swing-out-top-bck to #calculator-result-container
                 then settle
-                then add .tw-hidden to #calculator-result-container
+                then add .{'tw:hidden'} to #calculator-result-container
                 then remove .swing-out-top-bck from #calculator-result-container
               end"
              placeholder="2 + 2">
-      <div class="tw-hidden" id="calculator-result-container">
+      <div class="tw:hidden" id="calculator-result-container">
         <div class="d-flex flex-row p-2 justify-content-between">
-          <div class="tw-text-gray-400">=</div>
+          <div class="tw:text-gray-400">=</div>
           <div id="calculator-result" class="user-select-all"></div>
         </div>
       </div>
-      <div class="position-absolute tw-cursor-pointer top-0 start-100 translate-middle tw-p-0 text-bg-primary border border-light rounded-circle tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5"
+      <div class="position-absolute tw:cursor-pointer top-0 start-100 translate-middle tw:p-0 text-bg-primary border border-light rounded-circle tw:flex tw:items-center tw:justify-center tw:w-5 tw:h-5"
             _="on click trigger show on #calculator">
-        <i class="fa-solid fa-xmark tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full"></i>
+        <i class="fa-solid fa-xmark tw:flex tw:items-center tw:justify-center tw:w-full tw:h-full"></i>
       </div>
     </div>

app/templates/insights/fragments/category_overview/index.html

@@ -1,226 +1,431 @@
 {% load i18n %}
 
 <div hx-get="{% url 'category_overview' %}" hx-trigger="updated from:window" class="show-loading" hx-swap="outerHTML"
-     hx-include="#picker-form, #picker-type">
+     hx-include="#picker-form, #picker-type, #view-type, #show-tags, #showing">
+  <div class="h-100 text-center mb-4">
+    <div class="btn-group gap-3" role="group" id="view-type" _="on change trigger updated">
+      <input type="radio" class="btn-check"
+             name="view_type"
+             id="table-view"
+             autocomplete="off"
+             value="table"
+             {% if view_type == "table" %}checked{% endif %}>
+      <label class="btn btn-outline-primary rounded-5" for="table-view"><i
+          class="fa-solid fa-table fa-fw me-2"></i>{% trans 'Table' %}</label>
+
+      <input type="radio"
+             class="btn-check"
+             name="view_type"
+             id="bars-view"
+             autocomplete="off"
+             value="bars"
+             {% if view_type == "bars" %}checked{% endif %}>
+      <label class="btn btn-outline-primary rounded-5" for="bars-view"><i
+          class="fa-solid fa-chart-bar fa-fw me-2"></i>{% trans 'Bars' %}</label>
+    </div>
+  </div>
+  <div class="mt-3 mb-1 d-flex flex-column flex-md-row justify-content-between">
+    <div class="form-check form-switch" id="show-tags">
+      {% if view_type == 'table' %}
+        <input type="hidden" name="show_tags" value="off">
+        <input class="form-check-input" type="checkbox" role="switch" id="show-tags-switch" name="show_tags"
+               _="on change trigger updated" {% if show_tags %}checked{% endif %}>
+        {% spaceless %}
+          <label class="form-check-label" for="show-tags-switch">
+            {% trans 'Tags' %}
+          </label>
+          <c-ui.help-icon
+              content="{% trans 'Transaction amounts associated with multiple tags will be counted once for each tag' %}"
+              icon="fa-solid fa-circle-exclamation"></c-ui.help-icon>
+        {% endspaceless %}
+      {% endif %}
+    </div>
+    <div class="btn-group btn-group-sm" role="group" id="showing" _="on change trigger updated">
+      <input type="radio" class="btn-check" name="showing" id="showing-projected" autocomplete="off"
+             value="projected" {% if showing == 'projected' %}checked{% endif %}>
+      <label class="btn btn-outline-primary" for="showing-projected">{% trans "Projected" %}</label>
+
+      <input type="radio" class="btn-check" name="showing" id="showing-current" autocomplete="off" value="current"
+             {% if showing == 'current' %}checked{% endif %}>
+      <label class="btn btn-outline-primary" for="showing-current">{% trans "Current" %}</label>
+
+      <input type="radio" class="btn-check" name="showing" id="showing-final" autocomplete="off" value="final"
+             {% if showing == 'final' %}checked{% endif %}>
+      <label class="btn btn-outline-primary" for="showing-final">{% trans "Final total" %}</label>
+    </div>
+  </div>
   {% if total_table %}
-    <div class="table-responsive">
-      <table class="table table-striped table-hover">
-        <thead>
-        <tr>
-          <th scope="col">{% trans 'Category' %}</th>
-          <th scope="col">{% trans 'Income' %}</th>
-          <th scope="col">{% trans 'Expense' %}</th>
-          <th scope="col">{% trans 'Total' %}</th>
-        </tr>
-        </thead>
-        <tbody>
-        {% for category in total_table.values %}
+    {% if view_type == "table" %}
+      <div class="table-responsive">
+        <table class="table table-striped table-hover table-bordered align-middle">
+          <thead>
           <tr>
-            <th>{% if category.name %}{{ category.name }}{% else %}{% trans 'Uncategorized' %}{% endif %}</th>
-            <td>
-              {% for currency in category.currencies.values %}
-                {% if currency.total_income != 0 %}
-                  <c-amount.display
-                      :amount="currency.total_income"
-                      :prefix="currency.currency.prefix"
-                      :suffix="currency.currency.suffix"
-                      :decimal_places="currency.currency.decimal_places"
-                      color="green"></c-amount.display>
-                {% else %}
-                  <div>-</div>
-                {% endif %}
-              {% endfor %}
-            </td>
-            <td>
-              {% for currency in category.currencies.values %}
-                {% if currency.total_expense != 0 %}
-                  <c-amount.display
-                      :amount="currency.total_expense"
-                      :prefix="currency.currency.prefix"
-                      :suffix="currency.currency.suffix"
-                      :decimal_places="currency.currency.decimal_places"
-                      color="red"></c-amount.display>
-                {% else %}
-                  <div>-</div>
-                {% endif %}
-              {% endfor %}
-            </td>
-            <td>
-              {% for currency in category.currencies.values %}
-                {% if currency.total_final != 0 %}
-                  <c-amount.display
-                      :amount="currency.total_final"
-                      :prefix="currency.currency.prefix"
-                      :suffix="currency.currency.suffix"
-                      :decimal_places="currency.currency.decimal_places"
-                      color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
-                {% else %}
-                  <div>-</div>
-                {% endif %}
-              {% endfor %}
-            </td>
+            <th scope="col">{% trans 'Category' %}</th>
+            <th scope="col">{% trans 'Income' %}</th>
+            <th scope="col">{% trans 'Expense' %}</th>
+            <th scope="col">{% trans 'Total' %}</th>
           </tr>
-        {% endfor %}
-        </tbody>
-      </table>
-    </div>
+          </thead>
+          <tbody class="table-group-divider">
+          {% for category in total_table.values %}
+            <!-- Category row -->
+            <tr class="table-group-header">
+              <th>{% if category.name %}{{ category.name }}{% else %}{% trans 'Uncategorized' %}{% endif %}</th>
+              <td> {# income #}
+                {% for currency in category.currencies.values %}
+                  {% if showing == 'current' and currency.income_current != 0 %}
+                    <c-amount.display
+                        :amount="currency.income_current"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="green"></c-amount.display>
+                  {% elif showing == 'projected' and currency.income_projected != 0 %}
+                    <c-amount.display
+                        :amount="currency.income_projected"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="green"></c-amount.display>
+                  {% elif showing == 'final' and currency.total_income != 0 %}
+                    <c-amount.display
+                        :amount="currency.total_income"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="green"></c-amount.display>
+                  {% else %}
+                    <div>-</div>
+                  {% endif %}
+                {% endfor %}
+              </td>
+              <td>  {# expenses #}
+                {% for currency in category.currencies.values %}
+                  {% if showing == 'current' and currency.expense_current != 0 %}
+                    <c-amount.display
+                        :amount="currency.expense_current"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="red"></c-amount.display>
+                  {% elif showing == 'projected' and currency.expense_projected != 0 %}
+                    <c-amount.display
+                        :amount="currency.expense_projected"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="red"></c-amount.display>
+                  {% elif showing == 'final' and currency.total_expense != 0 %}
+                    <c-amount.display
+                        :amount="currency.total_expense"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="red"></c-amount.display>
+                  {% else %}
+                    <div>-</div>
+                  {% endif %}
+                {% endfor %}
+              </td>
+              <td>  {# total #}
+                {% for currency in category.currencies.values %}
+                  {% if showing == 'current' and currency.total_current != 0 %}
+                    <c-amount.display
+                        :amount="currency.total_current"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
+                  {% elif showing == 'projected' and currency.total_projected != 0 %}
+                    <c-amount.display
+                        :amount="currency.total_projected"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
+                  {% elif showing == 'final' and currency.total_final != 0 %}
+                    <c-amount.display
+                        :amount="currency.total_final"
+                        :prefix="currency.currency.prefix"
+                        :suffix="currency.currency.suffix"
+                        :decimal_places="currency.currency.decimal_places"
+                        color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
+                  {% else %}
+                    <div>-</div>
+                  {% endif %}
+                {% endfor %}
+              </td>
+            </tr>
 
-    <div class="mt-4">
-      <div class="chart-container" _="init call setupChart() end" style="position: relative; height:90vh; width:100%">
-        <canvas id="categoryChart"></canvas>
+            <!-- Tag rows -->
+            {% if show_tags %}
+              {% for tag_id, tag in category.tags.items %}
+                {% if tag.name or not tag.name and category.tags.values|length > 1 %}
+                  <tr class="table-row-nested">
+                    <td class="ps-4">
+                      <i class="fa-solid fa-hashtag fa-fw me-2 text-muted"></i>{% if tag.name %}{{ tag.name }}{% else %}{% trans 'Untagged' %}{% endif %}
+                    </td>
+                    <td>
+                      {% for currency in tag.currencies.values %}
+                        {% if showing == 'current' and currency.income_current != 0 %}
+                          <c-amount.display
+                              :amount="currency.income_current"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="green"></c-amount.display>
+                        {% elif showing == 'projected' and currency.income_projected != 0 %}
+                          <c-amount.display
+                              :amount="currency.income_projected"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="green"></c-amount.display>
+                        {% elif showing == 'final' and currency.total_income != 0 %}
+                          <c-amount.display
+                              :amount="currency.total_income"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="green"></c-amount.display>
+                        {% else %}
+                          <div>-</div>
+                        {% endif %}
+                      {% endfor %}
+                    </td>
+                    <td>
+                      {% for currency in tag.currencies.values %}
+                        {% if showing == 'current' and currency.expense_current != 0 %}
+                          <c-amount.display
+                              :amount="currency.expense_current"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="red"></c-amount.display>
+                        {% elif showing == 'projected' and currency.expense_projected != 0 %}
+                          <c-amount.display
+                              :amount="currency.expense_projected"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="red"></c-amount.display>
+                        {% elif showing == 'final' and currency.total_expense != 0 %}
+                          <c-amount.display
+                              :amount="currency.total_expense"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="red"></c-amount.display>
+                        {% else %}
+                          <div>-</div>
+                        {% endif %}
+                      {% endfor %}
+                    </td>
+                    <td>
+                      {% for currency in tag.currencies.values %}
+                        {% if showing == 'current' and currency.total_current != 0 %}
+                          <c-amount.display
+                              :amount="currency.total_current"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
+                        {% elif showing == 'projected' and currency.total_projected != 0 %}
+                          <c-amount.display
+                              :amount="currency.total_projected"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
+                        {% elif showing == 'final' and currency.total_final != 0 %}
+                          <c-amount.display
+                              :amount="currency.total_final"
+                              :prefix="currency.currency.prefix"
+                              :suffix="currency.currency.suffix"
+                              :decimal_places="currency.currency.decimal_places"
+                              color="{% if currency.total_final < 0 %}red{% else %}green{% endif %}"></c-amount.display>
+                        {% else %}
+                          <div>-</div>
+                        {% endif %}
+                      {% endfor %}
+                    </td>
+                  </tr>
+                {% endif %}
+              {% endfor %}
+            {% endif %}
+          {% endfor %}
+          </tbody>
+        </table>
       </div>
-    </div>
 
-    {{ total_table|json_script:"categoryOverviewData" }}
 
-    <script>
-        function setupChart() {
-            var rawData = JSON.parse(document.getElementById('categoryOverviewData').textContent);
+    {% elif view_type == "bars" %}
+      <div>
+        <div class="chart-container" _="init call setupChart() end" style="position: relative; height:78vh; width:100%">
+          <canvas id="categoryChart"></canvas>
+        </div>
+      </div>
 
-            // --- Dynamic Data Processing ---
-            var categories = [];
-            var currencyDetails = {}; // Stores details like { BRL: {code: 'BRL', name: 'Real', ...}, ... }
-            var currencyData = {};    // Stores data arrays like { BRL: [val1, null, val3,...], ... }
+      {{ total_table|json_script:"categoryOverviewData" }}
+      {{ showing|json_script:"showingString" }}
 
-            // Pass 1: Collect categories and currency details
-            Object.values(rawData).forEach(cat => {
-                var categoryName = cat.name === null ? "{% trans 'Uncategorized' %}" : cat.name;
-                if (!categories.includes(categoryName)) {
-                    categories.push(categoryName);
-                }
-                if (cat.currencies) {
-                    Object.values(cat.currencies).forEach(curr => {
-                        var details = curr.currency;
-                        if (details && details.code && !currencyDetails[details.code]) {
-                            var decimals = parseInt(details.decimal_places, 10);
-                            currencyDetails[details.code] = {
-                                code: details.code,
-                                name: details.name || details.code,
-                                prefix: details.prefix || '',
-                                suffix: details.suffix || '',
-                                // Ensure decimal_places is a non-negative integer
-                                decimal_places: !isNaN(decimals) && decimals >= 0 ? decimals : 2
-                            };
-                        }
-                    });
-                }
-            });
+      <script>
+          function setupChart() {
+              var rawData = JSON.parse(document.getElementById('categoryOverviewData').textContent);
+              var showing_string = JSON.parse(document.getElementById('showingString').textContent);
+              console.log(showing_string)
 
-            // Initialize data structure for each currency with nulls
-            Object.keys(currencyDetails).forEach(code => {
-                currencyData[code] = new Array(categories.length).fill(null);
-            });
+              // --- Dynamic Data Processing ---
+              var categories = [];
+              var currencyDetails = {}; // Stores details like { BRL: {code: 'BRL', name: 'Real', ...}, ... }
+              var currencyData = {};    // Stores data arrays like { BRL: [val1, null, val3,...], ... }
 
-            // Pass 2: Populate data arrays (store all valid numbers now)
-            Object.values(rawData).forEach(cat => {
-                var categoryName = cat.name === null ? "{% trans 'Uncategorized' %}" : cat.name;
-                var catIndex = categories.indexOf(categoryName);
-                if (catIndex === -1) return;
+              // Pass 1: Collect categories and currency details
+              Object.values(rawData).forEach(cat => {
+                  var categoryName = cat.name === null ? "{% trans 'Uncategorized' %}" : cat.name;
+                  if (!categories.includes(categoryName)) {
+                      categories.push(categoryName);
+                  }
+                  if (cat.currencies) {
+                      Object.values(cat.currencies).forEach(curr => {
+                          var details = curr.currency;
+                          if (details && details.code && !currencyDetails[details.code]) {
+                              var decimals = parseInt(details.decimal_places, 10);
+                              currencyDetails[details.code] = {
+                                  code: details.code,
+                                  name: details.name || details.code,
+                                  prefix: details.prefix || '',
+                                  suffix: details.suffix || '',
+                                  // Ensure decimal_places is a non-negative integer
+                                  decimal_places: !isNaN(decimals) && decimals >= 0 ? decimals : 2
+                              };
+                          }
+                      });
+                  }
+              });
 
-                if (cat.currencies) {
-                    Object.values(cat.currencies).forEach(curr => {
-                        var code = curr.currency?.code;
-                        if (code && currencyData[code]) {
-                            var value = parseFloat(curr.total_final);
-                            // Store the number if it's valid, otherwise keep null
-                            currencyData[code][catIndex] = !isNaN(value) ? value : null;
-                        }
-                    });
-                }
-            });
+              // Initialize data structure for each currency with nulls
+              Object.keys(currencyDetails).forEach(code => {
+                  currencyData[code] = new Array(categories.length).fill(null);
+              });
 
-            // --- Dynamic Chart Configuration ---
-            var datasets = Object.keys(currencyDetails).map((code, index) => {
-                return {
-                    label: currencyDetails[code].name, // Use currency name for the legend label
-                    data: currencyData[code],
-                    currencyCode: code, // Store code for easy lookup in tooltip
-                    borderWidth: 1
-                };
-            });
+              // Pass 2: Populate data arrays (store all valid numbers now)
+              Object.values(rawData).forEach(cat => {
+                  var categoryName = cat.name === null ? "{% trans 'Uncategorized' %}" : cat.name;
+                  var catIndex = categories.indexOf(categoryName);
+                  if (catIndex === -1) return;
 
-            new Chart(document.getElementById('categoryChart'),
-                {
-                    type: 'bar',
-                    data: {
-                        labels: categories,
-                        datasets: datasets
-                    },
-                    options: {
-                        indexAxis: 'y',
-                        responsive: true,
-                        interaction: {
-                            intersect: false,
-                            mode: 'nearest',
-                            axis: "y"
-                        },
-                        maintainAspectRatio: false,
-                        plugins: {
-                            title: {
-                                display: false
-                            },
-                            tooltip: {
-                                callbacks: {
-                                    label: function (context) {
-                                        const dataset = context.dataset;
-                                        const currencyCode = dataset.currencyCode;
-                                        const details = currencyDetails[currencyCode];
-                                        const value = context.parsed.x; // Use 'x' because indexAxis is 'y'
+                  if (cat.currencies) {
+                      Object.values(cat.currencies).forEach(curr => {
+                          var code = curr.currency?.code;
+                          if (code && currencyData[code]) {
+                              if (showing_string == 'current') {
+                                  var value = parseFloat(curr.total_current);
+                              } else if (showing_string == 'projected') {
+                                  var value = parseFloat(curr.total_projected);
+                              } else {
+                                  var value = parseFloat(curr.total_final);
+                              }
 
-                                        if (value === null || value === undefined || !details) {
-                                            // Display the category name if the value is null/undefined
-                                            return null;
-                                        }
+                              // Store the number if it's valid, otherwise keep null
+                              currencyData[code][catIndex] = !isNaN(value) ? value : null;
+                          }
+                      });
+                  }
+              });
 
-                                        let formattedValue = '';
-                                        try {
-                                            // Use Intl.NumberFormat for ALL values, configured with locale and exact decimal places
-                                            formattedValue = new Intl.NumberFormat(undefined, {
-                                                minimumFractionDigits: details.decimal_places,
-                                                maximumFractionDigits: details.decimal_places,
-                                                // Do NOT use style: 'currency' here, as we add prefix/suffix manually
-                                            }).format(value);
-                                        } catch (e) {
-                                            formattedValue = value.toFixed(details.decimal_places);
-                                        }
+              // --- Dynamic Chart Configuration ---
+              var datasets = Object.keys(currencyDetails).map((code, index) => {
+                  return {
+                      label: currencyDetails[code].name, // Use currency name for the legend label
+                      data: currencyData[code],
+                      currencyCode: code, // Store code for easy lookup in tooltip
+                      borderWidth: 1
+                  };
+              });
 
-                                        // Return label with currency name and formatted value including prefix/suffix
-                                        return `${details.prefix}${formattedValue}${details.suffix}`;
-                                    }
-                                }
-                            },
-                            legend: {
-                                position: 'top',
-                            }
-                        },
-                        scales: {
-                            x: {
-                                stacked: true,
-                                type: 'linear',
-                                title: {
-                                    display: true,
-                                    text: '{% trans 'Final Total' %}'
-                                },
-                                ticks: {
-                                    // Format ticks using the detected locale
-                                    callback: function (value, index, ticks) {
-                                        return value.toLocaleString();
-                                    }
-                                }
-                            },
-                            y: {
-                                stacked: true,
-                                title: {
-                                    display: false,
-                                    text: '{% trans 'Category' %}'
-                                }
-                            }
-                        }
-                    }
-                });
-        }
-    </script>
+              new Chart(document.getElementById('categoryChart'),
+                  {
+                      type: 'bar',
+                      data: {
+                          labels: categories,
+                          datasets: datasets
+                      },
+                      options: {
+                          indexAxis: 'y',
+                          responsive: true,
+                          interaction: {
+                              intersect: false,
+                              mode: 'nearest',
+                              axis: "y"
+                          },
+                          maintainAspectRatio: false,
+                          plugins: {
+                              title: {
+                                  display: false
+                              },
+                              tooltip: {
+                                  callbacks: {
+                                      label: function (context) {
+                                          const dataset = context.dataset;
+                                          const currencyCode = dataset.currencyCode;
+                                          const details = currencyDetails[currencyCode];
+                                          const value = context.parsed.x; // Use 'x' because indexAxis is 'y'
 
+                                          if (value === null || value === undefined || !details) {
+                                              // Display the category name if the value is null/undefined
+                                              return null;
+                                          }
+
+                                          let formattedValue = '';
+                                          try {
+                                              // Use Intl.NumberFormat for ALL values, configured with locale and exact decimal places
+                                              formattedValue = new Intl.NumberFormat(undefined, {
+                                                  minimumFractionDigits: details.decimal_places,
+                                                  maximumFractionDigits: details.decimal_places,
+                                                  // Do NOT use style: 'currency' here, as we add prefix/suffix manually
+                                              }).format(value);
+                                          } catch (e) {
+                                              formattedValue = value.toFixed(details.decimal_places);
+                                          }
+
+                                          // Return label with currency name and formatted value including prefix/suffix
+                                          return `${details.prefix}${formattedValue}${details.suffix}`;
+                                      }
+                                  }
+                              },
+                              legend: {
+                                  position: 'top',
+                              }
+                          },
+                          scales: {
+                              x: {
+                                  stacked: true,
+                                  type: 'linear',
+                                  title: {
+                                      display: true,
+                                      text: '{% trans 'Final Total' %}'
+                                  },
+                                  ticks: {
+                                      // Format ticks using the detected locale
+                                      callback: function (value, index, ticks) {
+                                          return value.toLocaleString();
+                                      }
+                                  }
+                              },
+                              y: {
+                                  stacked: true,
+                                  title: {
+                                      display: false,
+                                      text: '{% trans 'Category' %}'
+                                  }
+                              }
+                          }
+                      }
+                  });
+          }
+      </script>
+    {% endif %}
   {% else %}
     <c-msg.empty title="{% translate "No categories" %}"></c-msg.empty>
   {% endif %}

app/templates/insights/fragments/emergency_fund.html

@@ -12,17 +12,17 @@
                     data-bs-target="#flush-collapse-{{ id }}" aria-expanded="false"
                     aria-controls="flush-collapse-{{ id }}">
               <span>
-                <span class="tw-text-gray-300">{% trans "You've spent an average of" %}</span>
+                <span class="tw:text-gray-300">{% trans "You've spent an average of" %}</span>
                 <c-amount.display
                     :amount="data.average"
                     :prefix="data.currency.prefix"
                     :suffix="data.currency.suffix"
                     :decimal_places="data.currency.decimal_places"
-                    custom_class="tw-text-3xl"
+                    custom_class="tw:text-3xl"
                     divless></c-amount.display>
-                <span class="tw-text-gray-300">{% trans 'on the last 12 months, at this rate you could go by' %}</span>
-                <span class="tw-text-3xl">{{ data.months }}</span>
-                <span class="tw-text-gray-300">{% trans 'months without any income.' %}</span>
+                <span class="tw:text-gray-300">{% trans 'on the last 12 months, at this rate you could go by' %}</span>
+                <span class="tw:text-3xl">{{ data.months }}</span>
+                <span class="tw:text-gray-300">{% trans 'months without any income.' %}</span>
               </span>
             </button>
           </h2>
@@ -31,7 +31,7 @@
             <div class="accordion-body">
               <div class="d-flex justify-content-between align-items-baseline mt-2">
                 <div class="text-end font-monospace">
-                  <div class="tw-text-gray-400">{% translate 'average expenses' %}</div>
+                  <div class="tw:text-gray-400">{% translate 'average expenses' %}</div>
                 </div>
                 <div class="dotted-line flex-grow-1"></div>
                 <div class="text-end font-monospace">
@@ -45,7 +45,7 @@
               </div>
               <div class="d-flex justify-content-between align-items-baseline mt-2">
                 <div class="text-end font-monospace">
-                  <div class="tw-text-gray-400">{% translate 'liquid total' %}</div>
+                  <div class="tw:text-gray-400">{% translate 'liquid total' %}</div>
                 </div>
                 <div class="dotted-line flex-grow-1"></div>
                 <div class="text-end font-monospace">
@@ -59,7 +59,7 @@
               </div>
               <div class="d-flex justify-content-between align-items-baseline mt-2">
                 <div class="text-end font-monospace">
-                  <div class="tw-text-gray-400">{% translate 'months left' %}</div>
+                  <div class="tw:text-gray-400">{% translate 'months left' %}</div>
                 </div>
                 <div class="dotted-line flex-grow-1"></div>
                 <div class="text-end font-monospace">

app/templates/insights/fragments/sankey.html

@@ -7,7 +7,7 @@
   <div class="show-loading" hx-get="{% url 'insights_sankey_by_currency' %}" hx-trigger="updated from:window"
        hx-swap="outerHTML" hx-include="#picker-form, #picker-type">
 {% endif %}
-<div class="chart-container position-relative tw-min-h-[85vh] tw-max-h-[85vh] tw-h-full tw-w-full"
+<div class="chart-container position-relative tw:min-h-[85vh] tw:max-h-[85vh] tw:h-full tw:w-full"
      id="sankeyContainer"
      _="init call setupSankeyChart() end">
   <canvas id="sankeyChart"></canvas>

app/templates/insights/pages/index.html

@@ -2,31 +2,33 @@
 {% load crispy_forms_tags %}
 {% load i18n %}
 
+{% block title %}{% translate 'Insights' %}{% endblock %}
+
 {% block content %}
   <div class="container-fluid">
     <div class="row my-3 h-100">
       <div class="col-lg-2 col-md-3 mb-3 mb-md-0">
-        <div class="position-sticky tw-top-3">
+        <div class="position-sticky tw:top-3">
           <div class="">
             <div class="mb-2 w-100 d-lg-inline-flex d-grid gap-2 flex-wrap justify-content-lg-center" role="group"
                  _="on change
                     set type to event.target.value
-                    add .tw-hidden to <#picker-form > div:not(.tw-hidden)/>
+                    add .tw:hidden to <#picker-form > div:not(.tw:hidden)/>
 
                     if type == 'month'
-                      remove .tw-hidden from #month-form
+                      remove .tw:hidden from #month-form
                     end
                     if type == 'year'
-                      remove .tw-hidden from #year-form
+                      remove .tw:hidden from #year-form
                     end
                     if type == 'month-range'
-                      remove .tw-hidden from #month-range-form
+                      remove .tw:hidden from #month-range-form
                     end
                     if type == 'year-range'
-                      remove .tw-hidden from #year-range-form
+                      remove .tw:hidden from #year-range-form
                     end
                     if type == 'date-range'
-                      remove .tw-hidden from #date-range-form
+                      remove .tw:hidden from #date-range-form
                     end
                     then trigger updated"
                  id="picker-type">
@@ -58,16 +60,16 @@
               <div id="month-form" class="">
                 {% crispy month_form %}
               </div>
-              <div id="year-form" class="tw-hidden">
+              <div id="year-form" class="tw:hidden">
                 {% crispy year_form %}
               </div>
-              <div id="month-range-form" class="tw-hidden">
+              <div id="month-range-form" class="tw:hidden">
                 {% crispy month_range_form %}
               </div>
-              <div id="year-range-form" class="tw-hidden">
+              <div id="year-range-form" class="tw:hidden">
                 {% crispy year_range_form %}
               </div>
-              <div id="date-range-form" class="tw-hidden">
+              <div id="date-range-form" class="tw:hidden">
                 {% crispy date_range_form %}
               </div>
             </form>

app/templates/installment_plans/fragments/list.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 <div class="container px-md-3 py-3 column-gap-5">
-  <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+  <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
     {% spaceless %}
     <div>{% translate 'Installment Plans' %}<span>
-      <a class="text-decoration-none tw-text-2xl p-1 category-action"
+      <a class="text-decoration-none tw:text-2xl p-1 category-action"
                 role="button"
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate "Add" %}"

app/templates/installment_plans/fragments/table.html

@@ -64,10 +64,10 @@
             </div>
           </td>
           <td class="col">
-            <div class="{% if installment_plan.type == 'EX' %}tw-text-red-400{% else %}tw-text-green-400{% endif %}">
+            <div class="{% if installment_plan.type == 'EX' %}tw:text-red-400{% else %}tw:text-green-400{% endif %}">
               {{ installment_plan.description }}
             </div>
-            <div class="tw-text-sm tw-text-gray-400">{{ installment_plan.notes|linebreaksbr }}</div>
+            <div class="tw:text-sm tw:text-gray-400">{{ installment_plan.notes|linebreaksbr }}</div>
           </td>
         </tr>
         {% endfor %}

app/templates/mini_tools/currency_converter/currency_converter.html

@@ -11,7 +11,7 @@
   <div class="container px-md-3 py-3 column-gap-5"
        _="install init_tom_select
           install init_datepicker">
-    <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+    <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
       <div>{% translate 'Currency Converter' %}</div>
     </div>
     <div class="row">
@@ -27,7 +27,7 @@
         </div>
         <div>{{ form.from_currency|as_crispy_field }}</div>
       </div>
-      <div class="col text-primary tw-flex tw-items-center tw-justify-center my-3 my-lg-0">
+      <div class="col text-primary tw:flex tw:items-center tw:justify-center my-3 my-lg-0">
         <i class="fa-solid fa-equals"></i>
       </div>
       <div class="col-12 col-lg-5">
@@ -45,7 +45,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="tw-cursor-pointer text-primary text-end"
+      <div class="tw:cursor-pointer text-primary text-end"
            _="on click
                 set from_value to #id_from_currency's value
                 set to_value to #id_to_currency's value
@@ -66,7 +66,7 @@
             {% for rate in data.rates.values %}
               <div class="d-flex justify-content-between align-items-baseline mt-2">
                 <div class="text-end font-monospace">
-                  <div class="tw-text-gray-400">
+                  <div class="tw:text-gray-400">
 {#                    <c-amount.display#}
 {#                        :amount="1"#}
 {#                        :prefix="data.prefix"#}
@@ -76,7 +76,7 @@
                 </div>
                 <div class="dotted-line flex-grow-1"></div>
                 {% if currency.income_projected != 0 %}
-                  <div class="text-end font-monospace tw-text-green-400">
+                  <div class="text-end font-monospace tw:text-green-400">
                     <c-amount.display
                         :amount="rate.rate"
                         :prefix="rate.prefix"

app/templates/mini_tools/unit_price_calculator.html

@@ -6,7 +6,7 @@
 
 {% block content %}
   <div class="container px-md-3 py-3 column-gap-5">
-    <div class="tw-text-3xl fw-bold font-monospace tw-w-full mb-3">
+    <div class="tw:text-3xl fw-bold font-monospace tw:w-full mb-3">
       <div>{% translate 'Unit Price Calculator' %}</div>
     </div>
     <div class="card mb-3 d-none" id="card-placeholder">
@@ -36,7 +36,7 @@
           </div>
           <div class="col-lg">
             <label class="form-label">{% trans 'Unit price' %}</label>
-            <div class="unit-price tw-text-xl" data-amount="0">0</div>
+            <div class="unit-price tw:text-xl" data-amount="0">0</div>
           </div>
         </div>
       </div>
@@ -109,7 +109,7 @@
             </div>
             <div class="col-lg">
               <label class="form-label">{% trans 'Unit price' %}</label>
-              <div class="unit-price tw-text-xl" data-amount="0">0</div>
+              <div class="unit-price tw:text-xl" data-amount="0">0</div>
             </div>
           </div>
         </div>
@@ -134,7 +134,7 @@
             </div>
             <div class="col-lg">
               <label class="form-label">{% trans 'Unit price' %}</label>
-              <div class="unit-price tw-text-xl" data-amount="0">0</div>
+              <div class="unit-price tw:text-xl" data-amount="0">0</div>
             </div>
           </div>
         </div>

app/templates/monthly_overview/fragments/list.html

@@ -6,7 +6,7 @@
   {% 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')">
-      <div class="mt-3 mb-1 w-100 tw-text-base border-bottom bg-body transactions-divider-title">
+      <div class="mt-3 mb-1 w-100 tw:text-base border-bottom bg-body transactions-divider-title">
         <a class="text-decoration-none d-inline-block w-100"
            role="button"
            data-bs-toggle="collapse"

app/templates/monthly_overview/fragments/monthly_summary.html

@@ -6,7 +6,7 @@
     <c-ui.info-card color="yellow" icon="fa-solid fa-calendar-day" title="{% trans 'Daily Spending Allowance' %}" help_text={% trans "This is the final total divided by the remaining days in the month" %}>
       <div class="d-flex justify-content-between mt-3">
           <div class="text-end font-monospace">
-            <div class="tw-text-gray-400">{% translate 'today' %}</div>
+            <div class="tw:text-gray-400">{% translate 'today' %}</div>
           </div>
           <div class="text-end font-monospace">
             {% for currency in daily_spending_allowance.values %}
@@ -39,7 +39,7 @@
       <c-ui.info-card color="green" icon="fa-solid fa-arrow-right-to-bracket" title="{% trans 'Income' %}">
         <div class="d-flex justify-content-between mt-3">
           <div class="text-end font-monospace">
-            <div class="tw-text-gray-400">{% translate 'current' %}</div>
+            <div class="tw:text-gray-400">{% translate 'current' %}</div>
           </div>
           <div class="text-end font-monospace">
             {% for currency in income_current.values %}
@@ -69,7 +69,7 @@
         <hr class="my-1">
         <div class="d-flex justify-content-between">
           <div class="text-end font-monospace">
-            <div class="tw-text-gray-400">{% translate 'projected' %}</div>
+            <div class="tw:text-gray-400">{% translate 'projected' %}</div>
           </div>
           <div class="text-end font-monospace">
             {% for currency in income_projected.values %}
@@ -103,7 +103,7 @@
       <c-ui.info-card color="red" icon="fa-solid fa-arrow-right-from-bracket" title="{% trans 'Expenses' %}">
         <div class="d-flex justify-content-between mt-3">
           <div class="text-end font-monospace">
-            <div class="tw-text-gray-400">{% translate 'current' %}</div>
+            <div class="tw:text-gray-400">{% translate 'current' %}</div>
           </div>
           <div class="text-end font-monospace">
             {% for currency in expense_current.values %}
@@ -133,7 +133,7 @@
         <hr class="my-1">
         <div class="d-flex justify-content-between">
           <div class="text-end font-monospace">
-            <div class="tw-text-gray-400">{% translate 'projected' %}</div>
+            <div class="tw:text-gray-400">{% translate 'projected' %}</div>
           </div>
           <div class="text-end font-monospace">
             {% for currency in expense_projected.values %}
@@ -167,7 +167,7 @@
     <c-ui.info-card color="blue" icon="fa-solid fa-scale-balanced" title="{% trans 'Total' %}">
         <div class="d-flex justify-content-between mt-3">
           <div class="text-end font-monospace">
-            <div class="tw-text-gray-400">{% translate 'current' %}</div>
+            <div class="tw:text-gray-400">{% translate 'current' %}</div>
           </div>
           <div class="text-end font-monospace">
             {% for currency in total_current.values %}
@@ -196,7 +196,7 @@
         </div>
         <div class="d-flex justify-content-between mt-3">
           <div class="text-end font-monospace">
-            <div class="tw-text-gray-400">{% translate 'projected' %}</div>
+            <div class="tw:text-gray-400">{% translate 'projected' %}</div>
           </div>
           <div class="text-end font-monospace">
             {% for currency in total_projected.values %}
@@ -256,7 +256,7 @@
   <div class="col">
     <c-ui.info-card color="yellow" icon="fa-solid fa-percent" title="{% trans 'Distribution' %}">
       {% for p in percentages.values %}
-        <p class="tw-text-gray-400 mb-2 {% if not forloop.first %}mt-3{% endif %}">{{ p.currency.name }}</p>
+        <p class="tw:text-gray-400 mb-2 {% if not forloop.first %}mt-3{% endif %}">{{ p.currency.name }}</p>
         <c-ui.percentage-distribution :percentage="p"></c-ui.percentage-distribution>
       {% endfor %}
     </c-ui.info-card>

app/templates/monthly_overview/pages/overview.html

@@ -17,7 +17,7 @@
     <div class="row mb-3 gx-xl-4 gy-3 mb-4">
       {#    Date picker#}
       <div class="col-12 col-xl-4 flex-row align-items-center d-flex">
-        <div class="tw-text-base h-100 align-items-center d-flex">
+        <div class="tw:text-base h-100 align-items-center d-flex">
           <a role="button"
              class="pe-4 py-2"
              hx-boost="true"
@@ -25,7 +25,7 @@
              href="{% url 'monthly_overview' month=previous_month year=previous_year %}"><i
               class="fa-solid fa-chevron-left"></i></a>
         </div>
-        <div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center"
+        <div class="tw:text-3xl fw-bold font-monospace tw:w-full text-center"
              hx-get="{% url 'month_year_picker' %}"
              hx-target="#generic-offcanvas-left"
              hx-trigger="click, date_picker from:window"
@@ -33,7 +33,7 @@
              role="button">
           {{ month|month_name }} {{ year }}
         </div>
-        <div class="tw-text-base mx-2 h-100 align-items-center d-flex">
+        <div class="tw:text-base mx-2 h-100 align-items-center d-flex">
           <a role="button"
              class="ps-3 py-2"
              hx-boost="true"
@@ -44,12 +44,12 @@
         </div>
       </div>
       {#    Action buttons#}
-      <div class="col-12 col-xl-8">
-        <c-ui.quick-transactions-buttons
-            :year="year"
-            :month="month"
-        ></c-ui.quick-transactions-buttons>
-      </div>
+{#      <div class="col-12 col-xl-8">#}
+{#        <c-ui.quick-transactions-buttons#}
+{#            :year="year"#}
+{#            :month="month"#}
+{#        ></c-ui.quick-transactions-buttons>#}
+{#      </div>#}
     </div>
     {#  Monthly summary#}
     <div class="row gx-xl-4 gy-3">
@@ -104,7 +104,7 @@
             <div id="summary"
                  hx-get="{% url 'monthly_summary' month=month year=year %}"
                  class="show-loading"
-                 hx-trigger="load, updated from:window, selective_update from:window">
+                 hx-trigger="load, updated from:window, selective_update from:window, every 10m">
             </div>
           </div>
           <div class="tab-pane fade {% if summary_tab == 'currency' %}show active{% endif %}"
@@ -115,7 +115,7 @@
             <div id="currency-summary"
                  hx-get="{% url 'monthly_currency_summary' month=month year=year %}"
                  class="show-loading"
-                 hx-trigger="load, updated from:window, selective_update from:window">
+                 hx-trigger="load, updated from:window, selective_update from:window, every 10m">
             </div>
           </div>
           <div class="tab-pane fade {% if summary_tab == 'account' %}show active{% endif %}"
@@ -126,7 +126,7 @@
             <div id="account-summary"
                  hx-get="{% url 'monthly_account_summary' month=month year=year %}"
                  class="show-loading"
-                 hx-trigger="load, updated from:window, selective_update from:window">
+                 hx-trigger="load, updated from:window, selective_update from:window, every 10m">
             </div>
           </div>
         </div>
@@ -143,11 +143,11 @@
             </button>
           </div>
           {#        Ordering button#}
-          <div class="col-sm-6 col-12 tw-content-center my-3 my-sm-0">
+          <div class="col-sm-6 col-12 tw:content-center my-3 my-sm-0">
             <div class="text-sm-end" _="on change trigger updated on window">
               <label for="order">{% translate "Order by" %}</label>
               <select
-                  class="tw-border-0 focus-visible:tw-outline-0 w-full pe-2 tw-leading-normal text-bg-tertiary tw-font-medium rounded"
+                  class="tw:border-0 tw:focus-visible:outline-0 w-full pe-2 tw:leading-normal text-bg-tertiary tw:font-medium rounded bg-body text-body"
                   name="order" id="order">
                 <option value="default"
                         {% if order == 'default' %}selected{% endif %}>{% translate 'Default' %}</option>
@@ -174,8 +174,9 @@
         </div>
         <div id="search" class="my-3">
           <label class="w-100">
-          <input type="search" class="form-control" placeholder="{% translate 'Search' %}" hx-preserve id="quick-search"
-                 _="on input or search or htmx:afterSwap from window
+            <input type="search" class="form-control" placeholder="{% translate 'Search' %}" hx-preserve
+                   id="quick-search"
+                   _="on input or search or htmx:afterSwap from window
                       if my value is empty
                         trigger toggle on <.transactions-divider-collapse/>
                       else
@@ -190,9 +191,12 @@
         <div id="transactions"
              class="show-loading"
              hx-get="{% url 'monthly_transactions_list' month=month year=year %}"
-             hx-trigger="load, updated from:window" hx-include="#filter, #order">
+             hx-trigger="load, updated from:window, every 10m" hx-include="#filter, #order">
         </div>
       </div>
     </div>
   </div>
+
+  <c-ui.transactions_fab></c-ui.transactions_fab>
+
 {% endblock %}

app/templates/net_worth/net_worth.html

@@ -9,6 +9,7 @@
 {% block title %}{% if type == "current" %}{% translate 'Current Net Worth' %}{% else %}{% translate 'Projected Net Worth' %}{% endif %}{% endblock %}
 
 {% block content %}
+  <div hx-trigger="every 60m" class="show-loading" hx-get="" hx-target="body">
   <div class="container px-md-3 py-3" _="init call initializeAccountChart() then initializeCurrencyChart() end">
     <div class="row gx-xl-4 gy-3 mb-4">
       <div class="col-12 col-xl-5">
@@ -19,7 +20,7 @@
               {% for currency in currency_net_worth.values %}
                 <div class="d-flex justify-content-between mt-2">
                   <div class="d-flex align-items-baseline w-100">
-                    <div class="currency-name text-start font-monospace tw-text-gray-300"
+                    <div class="currency-name text-start font-monospace tw:text-gray-300"
                          _="on click showOnlyCurrencyDataset('{{ currency.currency.name }}')">
                       {{ currency.currency.name }}
                     </div>
@@ -46,9 +47,9 @@
                         color="grey"></c-amount.display>
                   </div>
                 {% endif %}
-                {% if currency.consolidated %}
+                {% if currency.consolidated and currency.consolidated.total_final != currency.total_final %}
                   <div class="d-flex align-items-baseline w-100">
-                        <div class="account-name text-start font-monospace tw-text-gray-300">
+                        <div class="account-name text-start font-monospace tw:text-gray-300">
                           <span class="hierarchy-line-icon"></span>{% trans 'Consolidated' %}</div>
                         <div class="dotted-line flex-grow-1"></div>
                         <div class="">
@@ -57,7 +58,7 @@
                             :prefix="currency.consolidated.currency.prefix"
                             :suffix="currency.consolidated.currency.suffix"
                             :decimal_places="currency.consolidated.currency.decimal_places"
-                            color="{% if currency.total_final > 0 %}green{% elif currency.total_final < 0 %}red{% endif %}"
+                            color="{% if currency.consolidated.total_final > 0 %}green{% elif currency.consolidated.total_final < 0 %}red{% endif %}"
                             text-end></c-amount.display>
                         </div>
                       </div>
@@ -68,7 +69,7 @@
         </div>
       </div>
       <div class="col-12 col-xl-7">
-        <div class="chart-container position-relative tw-min-h-[40vh] tw-h-full">
+        <div class="chart-container position-relative tw:min-h-[40vh] tw:h-full">
           <canvas id="currencyBalanceChart"></canvas>
         </div>
       </div>
@@ -85,14 +86,14 @@
                 {% if data.grouper %}
                   <div class="d-flex justify-content-between mt-2">
                     <div class="d-flex align-items-baseline w-100">
-                      <div class="text-start font-monospace tw-text-gray-300"><span class="badge text-bg-primary">
+                      <div class="text-start font-monospace tw:text-gray-300"><span class="badge text-bg-primary">
                         {{ data.grouper }}</span></div>
                     </div>
                   </div>
                   {% for account in data.list %}
                     <div class="d-flex justify-content-between mt-2">
                       <div class="d-flex align-items-baseline w-100">
-                        <div class="account-name text-start font-monospace tw-text-gray-300"
+                        <div class="account-name text-start font-monospace tw:text-gray-300"
                              _="on click showOnlyAccountDataset('{{ account.account.name }}')">
                           <span class="hierarchy-line-icon"></span>{{ account.account.name }}</div>
                         <div class="dotted-line flex-grow-1"></div>
@@ -120,7 +121,7 @@
                   {% for account in data.list %}
                     <div class="d-flex justify-content-between mt-2">
                       <div class="d-flex align-items-baseline w-100">
-                        <div class="account-name text-start font-monospace tw-text-gray-300"
+                        <div class="account-name text-start font-monospace tw:text-gray-300"
                              _="on click showOnlyAccountDataset('{{ account.account.name }}')">
                           {{ account.account.name }}
                         </div>
@@ -152,7 +153,7 @@
         </div>
       </div>
       <div class="col-12 col-xl-7">
-        <div class="chart-container position-relative tw-min-h-[40vh] tw-h-full">
+        <div class="chart-container position-relative tw:min-h-[40vh] tw:h-full">
           <canvas id="accountBalanceChart"></canvas>
         </div>
       </div>
@@ -318,5 +319,6 @@
       call currencyChart.update()
     end
   </script>
-
+</div>
+<c-ui.transactions_fab></c-ui.transactions_fab>
 {% endblock %}

app/templates/quick_transactions/fragments/add.html

@@ -0,0 +1,11 @@
+{% extends 'extends/offcanvas.html' %}
+{% load i18n %}
+{% load crispy_forms_tags %}
+
+{% block title %}{% translate 'Add quick transaction' %}{% endblock %}
+
+{% block body %}
+<form hx-post="{% url 'quick_transaction_add' %}" hx-target="#generic-offcanvas" novalidate>
+    {% crispy form %}
+</form>
+{% endblock %}