feat: guess what, more changes

app/apps/common/templatetags/crispy_extra.py

@@ -0,0 +1,13 @@
+from django import forms, template
+
+register = template.Library()
+
+
+@register.filter
+def is_input(field):
+    return isinstance(field.field.widget, forms.TextInput)
+
+
+@register.filter
+def is_textarea(field):
+    return isinstance(field.field.widget, forms.Textarea)

app/apps/dca/forms.py

@@ -10,8 +10,7 @@ from apps.common.widgets.decimal import ArbitraryDecimalDisplayNumberInput
 from apps.common.widgets.tom_select import TomSelect, TransactionSelect
 from apps.dca.models import DCAEntry, DCAStrategy
 from apps.transactions.models import Transaction, TransactionCategory, TransactionTag
-from crispy_bootstrap5.bootstrap5 import BS5Accordion
+from crispy_forms.bootstrap import AccordionGroup, FormActions, Accordion
-from crispy_forms.bootstrap import AccordionGroup, FormActions
 from crispy_forms.helper import FormHelper
 from crispy_forms.layout import HTML, Column, Layout, Row
 from django import forms
@@ -154,7 +153,7 @@ class DCAEntryForm(forms.ModelForm):
                 Column("amount_received"),
             ),
             "notes",
-            BS5Accordion(
+            Accordion(
                 AccordionGroup(
                     _("Create transaction"),
                     Switch("create_transaction"),

app/apps/rules/forms.py

@@ -9,8 +9,7 @@ from apps.rules.models import (
 )
 from apps.transactions.forms import BulkEditTransactionForm
 from apps.transactions.models import Transaction
-from crispy_bootstrap5.bootstrap5 import BS5Accordion
+from crispy_forms.bootstrap import AccordionGroup, FormActions, Accordion
-from crispy_forms.bootstrap import AccordionGroup, FormActions
 from crispy_forms.helper import FormHelper
 from crispy_forms.layout import HTML, Column, Field, Layout, Row
 from django import forms
@@ -208,7 +207,7 @@ class UpdateOrCreateTransactionRuleActionForm(forms.ModelForm):
 
         self.helper.layout = Layout(
             "order",
-            BS5Accordion(
+            Accordion(
                 AccordionGroup(
                     _("Search Criteria"),
                     Field("filter", rows=1),
@@ -219,7 +218,7 @@ class UpdateOrCreateTransactionRuleActionForm(forms.ModelForm):
                         ),
                         Column(
                             Field("search_type", rows=1),
-                            css_class="form-group col-md-8",
+                            css_class="col-span-12 md:col-span-8",
                         ),
                     ),
                     Row(
@@ -229,7 +228,7 @@ class UpdateOrCreateTransactionRuleActionForm(forms.ModelForm):
                         ),
                         Column(
                             Field("search_is_paid", rows=1),
-                            css_class="form-group col-md-8",
+                            css_class="col-span-12 md:col-span-8",
                         ),
                     ),
                     Row(
@@ -239,7 +238,7 @@ class UpdateOrCreateTransactionRuleActionForm(forms.ModelForm):
                         ),
                         Column(
                             Field("search_mute", rows=1),
-                            css_class="form-group col-md-8",
+                            css_class="col-span-12 md:col-span-8",
                         ),
                     ),
                     Row(
@@ -249,7 +248,7 @@ class UpdateOrCreateTransactionRuleActionForm(forms.ModelForm):
                         ),
                         Column(
                             Field("search_account", rows=1),
-                            css_class="form-group col-md-8",
+                            css_class="col-span-12 md:col-span-8",
                         ),
                     ),
                     Row(
@@ -259,7 +258,7 @@ class UpdateOrCreateTransactionRuleActionForm(forms.ModelForm):
                         ),
                         Column(
                             Field("search_entities", rows=1),
-                            css_class="form-group col-md-8",
+                            css_class="col-span-12 md:col-span-8",
                         ),
                     ),
                     Row(
@@ -482,7 +481,7 @@ class DryRunUpdatedTransactionForm(BulkEditTransactionForm):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.helper.layout.insert(0, "transaction")
-        self.helper.layout.insert(1, HTML("<hr/>"))
+        self.helper.layout.insert(1, HTML('<hr class="hr my-3" />'))
 
         # Change submit button
         self.helper.layout[-1] = FormActions(

app/apps/rules/views.py

@@ -564,7 +564,7 @@ def dry_run_rule_updated(request, pk):
 
                     response = render(
                         request,
-                        "rules/fragments/transaction_rule/dry_run/created.html",
+                        "rules/fragments/transaction_rule/dry_run/updated.html",
                         {"form": form, "rule": rule, "logs": logs, "results": results},
                     )
 

app/apps/transactions/forms.py

@@ -20,8 +20,7 @@ from apps.transactions.models import (
     TransactionEntity,
     TransactionTag,
 )
-from crispy_bootstrap5.bootstrap5 import BS5Accordion
+from crispy_forms.bootstrap import AccordionGroup, AppendedText, FormActions, Accordion
-from crispy_forms.bootstrap import AccordionGroup, AppendedText, FormActions
 from crispy_forms.helper import FormHelper
 from crispy_forms.layout import (
     HTML,
@@ -166,7 +165,7 @@ class TransactionForm(forms.ModelForm):
             ),
             "description",
             Field("amount", inputmode="decimal"),
-            BS5Accordion(
+            Accordion(
                 AccordionGroup(
                     _("More"),
                     "entities",

app/templates/accounts/fragments/account_reconciliation.html

@@ -9,14 +9,13 @@
     <form hx-post="{% url 'account_reconciliation' %}">
         {% csrf_token %}
         {{ form.management_form }}
-        <div class="space-y-2" id="balanceAccordionFlush">
+        <div class="join join-vertical w-full" id="balanceAccordionFlush">
         {% for form in form.forms %}
-          <div class="collapse collapse-arrow bg-base-100 border-base-300 border-2">
+          <c-ui.components.collapse>
-            <input type="checkbox" />
+            <c-slot name="title">
-            <div class="collapse-title font-medium text-sm">
               {% if form.account_group %}<span class="badge badge-primary badge-outline me-2">{{ form.account_group.name }}</span>{% endif %}{{ form.account_name }}
-            </div>
+            </c-slot>
-            <div class="collapse-content bg-base-200">
+            <c-slot name="content">
               <div class="fieldset">
                 <span class="fieldset-legend">{% translate 'Current balance' %}</span>
                 <div data-amount="{{ form.current_balance|floatformat:"-40u" }}"
@@ -54,11 +53,10 @@
                             }
                           ).format(diff)
                         then set formatted_string to `${prefix}${format_new_amount}${suffix}`
-                        then put formatted_string into me if diff else
+                        then put formatted_string into me if diff else put '-' into me">-</div>
-                        put '-' into me">-</div>
               </div>
-            </div>
+            </c-slot>
-          </div>
+          </c-ui.components.collapse>
         {% endfor %}
         </div>
         <div class="mt-3">

app/templates/cotton/transaction/item.html

@@ -1,7 +1,7 @@
 {% load markdown %}
 {% load i18n %}
 <div
-    class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %} group/transaction relative">
+    class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %} group/transaction">
   <div class="flex my-1">
     {% if not disable_selection or not dummy %}
       <label class="px-3 flex! items-center justify-center">
@@ -161,7 +161,7 @@
                     <button class="btn btn-soft btn-sm transaction-action" data-bs-toggle="dropdown" aria-expanded="false">
                       <i class="fa-solid fa-ellipsis fa-fw"></i>
                     </button>
-                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-md-start menu w-max relative">
+                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-md-start menu">
                       <div class="absolute inset-[0rem_-3rem_-3rem_-3rem] pointer-events-auto -z-10"></div>
                       {% if transaction.account.is_untracked_by %}
                         <li class="menu-disabled" aria-disabled="true">

app/templates/cotton/ui/components/collapse.html

@@ -0,0 +1,21 @@
+<div class="bg-base-100 border-base-300 border-2 join-item {{ base_classes }}"
+     x-data="{ expanded: {% if active %}true{% else %}false{% endif %} }">
+
+  <div class="font-medium text-sm cursor-pointer p-4 flex w-full items-center justify-between gap-4 text-left {{ title_classes }}"
+       @click="expanded = ! expanded">
+
+    <div>
+      {{ title }}
+    </div>
+
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true" x-bind:class="expanded  ?  'rotate-180'  :  ''">
+       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
+    </svg>
+  </div>
+
+  <div class="bg-base-200 p-4 {{ content_classes }}"
+       x-show="expanded"
+       x-collapse>
+    {{ content }}
+    </div>
+</div>

app/templates/crispy-daisyui/accordion-group.html

@@ -1,9 +1,10 @@
-<div class="collapse collapse-arrow bg-base-100 border border-base-300{% if div.css_class %} {{div.css_class}}{% endif %}">
+<c-ui.components.collapse
-    <input type="radio" name="{{ div.data_parent }}" {% if div.active %}checked="checked"{% endif %} />
+  title_class="join-item"
-    <div class="collapse-title font-semibold">
+  :active="div.active">
-        {{ div.name }}
+  <c-slot name="title">
-    </div>
+    {{ div.name }}
-    <div class="collapse-content">
+  </c-slot>
-        {{ fields|safe }}
+  <c-slot name="content">
-    </div>
+    {{ fields|safe }}
-</div>
+  </c-slot>
+</c-ui.components.collapse>

app/templates/crispy-daisyui/field.html

@@ -1,4 +1,5 @@
 {% load crispy_forms_field %}
+{% load crispy_extra %}
 
 {% if field.is_hidden %}
     {{ field }}
@@ -39,7 +40,7 @@
                         {% include 'crispy-daisyui/layout/field_file.html' %}
                     {% elif field|is_select %}
                         {% if field.errors %}
-                            {% crispy_field field 'class' 'select-error input-error w-full' %}
+                            {% crispy_field field 'class' 'select-error w-full' %}
                         {% else %}
                             {% crispy_field field 'class' '' %}
                         {% endif %}
@@ -49,6 +50,18 @@
                         {% else %}
                             {% crispy_field field 'class' 'checkbox w-full' %}
                         {% endif %}
+                    {% elif field|is_input %}
+                        {% if field.errors %}
+                            {% crispy_field field 'class' 'input input-error w-full' %}
+                        {% else %}
+                            {% crispy_field field 'class' 'input w-full' %}
+                    {% endif %}
+                    {% elif field|is_textarea %}
+                        {% if field.errors %}
+                            {% crispy_field field 'class' 'textarea textarea-error w-full' %}
+                        {% else %}
+                            {% crispy_field field 'class' 'textarea w-full' %}
+                    {% endif %}
                     {% elif field.errors %}
                         {% crispy_field field 'class' 'input input-error w-full' %}
                     {% else %}

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

@@ -12,7 +12,7 @@
                 </legend>
             {% endif %}
 
-            <label class="input w-full {% if input_size %} {{ input_size }}{% endif %}{% if field.errors %} input-error{% endif %}">
+            <label class="{% if input_size %} {{ input_size }}{% endif %}{% if field.errors %} input-error{% endif %}">
                 {# prepend #}
                 {% if crispy_prepended_text %}
                     {{ crispy_prepended_text }}

app/templates/exchange_rates_services/fragments/list.html

@@ -1,23 +1,20 @@
 {% load currency_display %}
 {% load i18n %}
-<div class="container px-md-3 py-3 column-gap-5">
+<c-ui.fab-single-action
+        url="{% url 'automatic_exchange_rate_add' %}"
+        hx_target="#generic-offcanvas">
+</c-ui.fab-single-action>
+<div class="container">
   <div class="text-3xl font-bold font-mono w-full mb-3">
     {% spaceless %}
-      <div>{% translate 'Automatic Exchange Rates' %}<span>
+      <div>{% translate 'Automatic Exchange Rates' %}</div>
-      <a class="no-underline text-2xl p-1 category-action"
-         role="button"
-         data-tippy-content="{% translate "Add" %}"
-         hx-get="{% url 'automatic_exchange_rate_add' %}"
-         hx-target="#generic-offcanvas">
-            <i class="fa-solid fa-circle-plus fa-fw"></i></a>
-    </span></div>
     {% endspaceless %}
   </div>
 
   <div class="card bg-base-100 shadow-xl">
-    <div class="card-header bg-base-200 p-4 text-base-content/70">
+    <div class="card-header rounded-box">
       <button type="button" hx-get="{% url 'automatic_exchange_rate_force_fetch' %}"
-              class="btn btn-outline btn-primary btn-sm">{% trans 'Fetch all' %}</button>
+              class="btn btn-primary btn-sm">{% trans 'Fetch all' %}</button>
     </div>
     <div class="card-body">
       {% if services %}

app/templates/exchange_rates_services/fragments/table.html

@@ -2,6 +2,7 @@
 {% load i18n %}
 <div class="card-body show-loading" hx-get="{% url 'exchange_rates_list_pair' %}" hx-trigger="updated from:window" hx-swap="outerHTML" hx-vals='{"page": "{{ page_obj.number }}", "from": "{{ from_currency|default_if_none:"" }}", "to": "{{ to_currency|default_if_none:"" }}"}'>
   {% if page_obj %}
+  <c-config.search></c-config.search>
   <div class="overflow-x-auto">
     <table class="table table-hover whitespace-nowrap">
       <thead>

app/templates/export_app/pages/index.html

@@ -4,26 +4,20 @@
 {% block title %}{% translate 'Export and Restore' %}{% endblock %}
 
 {% block content %}
-  <div class="container">
+  <div class="flex items-center justify-center min-h-[90dvh]">
-    <div class="row d-flex flex-row align-items-center justify-content-center my-5">
+    <div class="flex gap-4">
-      <div class="text-center w-auto mb-3">
+      <button class="btn btn-error btn-square w-24 h-24 flex flex-col items-center justify-center"
-        <button class="btn btn-outline-success d-flex flex-column align-items-center justify-content-center p-3"
+              hx-get="{% url 'export_form' %}"
-                style="width: 100px; height: 100px;"
+              hx-target="#generic-offcanvas">
-                hx-get="{% url 'export_form' %}"
+        <i class="fa-solid fa-download mb-1"></i>
-                hx-target="#generic-offcanvas">
+        <span class="text-sm">{% trans 'Export' %}</span>
-          <i class="fa-solid fa-download mb-1"></i>
+      </button>
-          <span>{% trans 'Export' %}</span>
+      <button class="btn btn-success btn-square w-24 h-24 flex flex-col items-center justify-center"
-        </button>
+              hx-get="{% url 'restore_form' %}"
-      </div>
+              hx-target="#generic-offcanvas">
-      <div class="text-center w-auto mb-3">
+        <i class="fa-solid fa-upload mb-1"></i>
-        <button class="btn btn-outline-primary d-flex flex-column align-items-center justify-content-center p-3"
+        <span class="text-sm">{% trans 'Restore' %}</span>
-                style="width: 100px; height: 100px;"
+      </button>
-                hx-get="{% url 'restore_form' %}"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-upload mb-1"></i>
-          <span>{% trans 'Restore' %}</span>
-        </button>
-      </div>
     </div>
   </div>
 {% endblock %}

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

@@ -1,24 +1,24 @@
 {% load i18n %}
-<div class="container px-md-3 py-3 column-gap-5">
+<c-components.fab>
+  <c-components.fab_menu_button
+            color="primary"
+            hx_target="#generic-offcanvas"
+            url="{% url 'import_profiles_add' %}"
+            icon="fa-solid fa-plus"
+            title="{% trans 'New' %}"></c-components.fab_menu_button>
+
+  <c-components.fab_menu_button
+            color="primary"
+            hx_target="#persistent-generic-offcanvas-left"
+            url="{% url 'import_presets_list' %}"
+            icon="fa-solid fa-file-code"
+            title="{% trans 'From preset' %}"></c-components.fab_menu_button>
+</c-components.fab>
+
+<div class="container">
   <div class="text-3xl font-bold font-mono w-full mb-3">
     {% spaceless %}
-    <div>{% translate 'Import Profiles' %}<span>
+    <div>{% translate 'Import Profiles' %}</div>
-      <span class="dropdown" data-tippy-content="{% translate "Add" %}">
-        <a class="no-underline 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>
-        </a>
-        <ul class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
-          <li><a role="button"
-                 hx-get="{% url 'import_profiles_add' %}"
-                 hx-target="#generic-offcanvas">{% trans 'New' %}</a></li>
-          <li><a role="button"
-                 hx-get="{% url 'import_presets_list' %}"
-                 hx-target="#persistent-generic-offcanvas-left">{% trans 'From preset' %}</a></li>
-        </ul>
-      </span>
-    </span></div>
     {% endspaceless %}
   </div>
 
@@ -26,58 +26,60 @@
     <div class="card-body overflow-x-auto">
       {% if profiles %}
       <c-config.search></c-config.search>
-      <table class="table table-hover whitespace-nowrap">
+      <div class="overflow-x-auto">
-        <thead>
+        <table class="table table-zebra">
+          <thead>
           <tr>
             <th scope="col" class="table-col-auto"></th>
             <th scope="col">{% translate 'Name' %}</th>
             <th scope="col">{% translate 'Version' %}</th>
           </tr>
-        </thead>
+          </thead>
-        <tbody>
+          <tbody>
           {% for profile in profiles %}
-          <tr class="profile">
+            <tr class="profile">
-            <td class="table-col-auto">
+              <td class="table-col-auto">
-              <div class="join" role="group" aria-label="{% translate 'Actions' %}">
+                <div class="join" role="group" aria-label="{% translate 'Actions' %}">
-                <a class="btn btn-secondary btn-sm join-item"
+                  <a class="btn btn-secondary btn-sm join-item"
-                      role="button"
+                     role="button"
-                      data-tippy-content="{% translate "Edit" %}"
+                     data-tippy-content="{% translate "Edit" %}"
-                      hx-get="{% url 'import_profile_edit' profile_id=profile.id %}"
+                     hx-get="{% url 'import_profile_edit' profile_id=profile.id %}"
-                      hx-target="#generic-offcanvas">
+                     hx-target="#generic-offcanvas">
-                  <i class="fa-solid fa-pencil fa-fw"></i></a>
+                    <i class="fa-solid fa-pencil fa-fw"></i></a>
-                  <a class="btn btn-secondary btn-sm join-item text-success"
+                  <a class="btn btn-secondary btn-sm join-item"
-                        role="button"
+                     role="button"
-                        data-tippy-content="{% translate "Runs" %}"
+                     data-tippy-content="{% translate "Runs" %}"
-                        hx-get="{% url 'import_profile_runs_list' profile_id=profile.id %}"
+                     hx-get="{% url 'import_profile_runs_list' profile_id=profile.id %}"
-                        hx-target="#persistent-generic-offcanvas-left">
+                     hx-target="#persistent-generic-offcanvas-left">
                     <i class="fa-solid fa-person-running fa-fw"></i></a>
-                <a class="btn btn-secondary btn-sm join-item text-primary"
+                  <a class="btn btn-secondary btn-sm join-item"
-                        role="button"
+                     role="button"
-                        data-tippy-content="{% translate "Import" %}"
+                     data-tippy-content="{% translate "Import" %}"
-                        hx-get="{% url 'import_run_add' profile_id=profile.id %}"
+                     hx-get="{% url 'import_run_add' profile_id=profile.id %}"
-                        hx-target="#generic-offcanvas">
+                     hx-target="#generic-offcanvas">
                     <i class="fa-solid fa-file-import fa-fw"></i></a>
-                <a class="btn btn-error btn-sm join-item"
+                  <a class="btn btn-error btn-sm join-item"
-                        role="button"
+                     role="button"
-                        data-tippy-content="{% translate "Delete" %}"
+                     data-tippy-content="{% translate "Delete" %}"
-                        hx-delete="{% url 'import_profile_delete' profile_id=profile.id %}"
+                     hx-delete="{% url 'import_profile_delete' profile_id=profile.id %}"
-                        hx-trigger='confirmed'
+                     hx-trigger='confirmed'
-                        data-bypass-on-ctrl="true"
+                     data-bypass-on-ctrl="true"
-                        data-title="{% translate "Are you sure?" %}"
+                     data-title="{% translate "Are you sure?" %}"
-                        data-text="{% translate "You won't be able to revert this!" %}"
+                     data-text="{% translate "You won't be able to revert this!" %}"
-                        data-confirm-text="{% translate "Yes, delete it!" %}"
+                     data-confirm-text="{% translate "Yes, delete it!" %}"
-                        _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a>
+                     _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a>
-              </div>
+                </div>
-            </td>
+              </td>
-            <td>{{ profile.name }}</td>
+              <td>{{ profile.name }}</td>
-            <td>{{ profile.get_version_display }}</td>
+              <td>{{ profile.get_version_display }}</td>
-          </tr>
+            </tr>
           {% endfor %}
-        </tbody>
+          </tbody>
-      </table>
+        </table>
       {% else %}
-      <c-msg.empty title="{% translate "No import profiles" %}" remove-padding></c-msg.empty>
+        <c-msg.empty title="{% translate "No import profiles" %}" remove-padding></c-msg.empty>
       {% endif %}
+      </div>
     </div>
   </div>
 </div>

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

@@ -25,7 +25,7 @@
        hx-target="#generic-offcanvas">
 
       <div class="col">
-        <div class="card bg-base-100 shadow-xl">
+        <div class="card bg-base-100 shadow">
           <div class="card-body">
             <h5 class="card-title">{{ preset.name }}</h5>
             <hr>

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

@@ -14,7 +14,7 @@
     <div class="grid grid-cols-1 gap-4">
     {% for run in runs %}
       <div class="col">
-        <div class="card bg-base-100 shadow-xl">
+        <div class="card bg-base-100 shadow">
           <div class="card-header bg-base-200 p-4 text-sm {% if run.status == run.Status.QUEUED %}text-base-content{% elif run.status == run.Status.PROCESSING %}text-warning{% elif run.status == run.Status.FINISHED %}text-success{% else %}text-error{% 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>

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 bg-base-100 shadow-xl max-h-full overflow-auto">
+<div class="card bg-base-100 shadow max-h-full overflow-auto">
   <div class="card-body">
     {{ run.logs|linebreaks }}
   </div>

app/templates/includes/navbar/user_menu.html

@@ -19,10 +19,10 @@
     </label>
 
 <div class="dropdown dropdown-top dropdown-end">
-  <div tabindex="0" role="button" class="btn btn-secondary btn-sm">
+  <div role="button" class="btn btn-secondary btn-sm" data-bs-toggle="dropdown" aria-expanded="false">
     <i class="fa-solid fa-cog"></i>
   </div>
-  <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow">
+  <ul class="dropdown-menu menu">
     <li><a
            hx-get="{% url 'user_settings' %}"
            hx-target="#generic-offcanvas"

app/templates/includes/scripts.html

@@ -3,10 +3,6 @@
 {% vite_hmr_client %}
 
 {% vite_asset 'main.js' defer=True %}
-{% comment %} {% vite_asset 'sweetalert2.js' defer=True %}
-{% vite_asset 'select.js' defer=True %}
-{% vite_asset 'datepicker.js' %}
-{% vite_asset 'autosize.js' defer=True %} {% endcomment %}
 
 {% include 'includes/scripts/hyperscript/init_tom_select.html' %}
 {% include 'includes/scripts/hyperscript/init_date_picker.html' %}
@@ -15,11 +11,7 @@
 {% include 'includes/scripts/hyperscript/htmx_error_handler.html' %}
 {% include 'includes/scripts/hyperscript/sounds.html' %}
 {% include 'includes/scripts/hyperscript/swal.html' %}
-
+{% include 'includes/scripts/hyperscript/autosize.html' %}
-{% comment %} {% vite_asset 'htmx.js' defer=True %}
-{% vite_asset 'charts.js' %}
-
-{% vite_asset 'style.js' %} {% endcomment %}
 
 <script>
 let tz = Intl.DateTimeFormat().resolvedOptions().timeZone;

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

@@ -0,0 +1,12 @@
+<script type="text/hyperscript">
+  init
+    for elem in <.textarea/>
+      autosize(elem)
+    end
+  end
+  on htmx:afterSettle
+    for elem in <.textarea/>
+      autosize(elem)
+    end
+  end
+</script>

app/templates/insights/fragments/emergency_fund.html

@@ -6,9 +6,8 @@
   <div class="join join-vertical w-full" id="emergency-fund-accordion">
     {% for id, data in data.items %}
       {% if data.average %}
-        <div class="collapse collapse-arrow join-item bg-base-100 border-base-200 border">
+        <c-ui.components.collapse>
-          <input type="checkbox" />
+          <c-slot name="title">
-          <div class="collapse-title text-base font-medium">
             <span>
               <span class="text-subtle">{% trans "You've spent an average of" %}</span>
               <c-amount.display
@@ -22,8 +21,8 @@
               <span class="text-3xl">{{ data.months }}</span>
               <span class="text-subtle">{% trans 'months without any income.' %}</span>
             </span>
-          </div>
+          </c-slot>
-          <div class="collapse-content bg-base-200">
+          <c-slot name="content">
             <div class="flex justify-between items-baseline mt-2">
               <div class="text-end font-mono">
                 <div class="text-subtle">{% translate 'average expenses' %}</div>
@@ -61,8 +60,8 @@
                 <span>{{ data.months }}</span>
               </div>
             </div>
-          </div>
+          </c-slot>
-        </div>
+        </c-ui.components.collapse>
       {% endif %}
     {% endfor %}
   </div>

app/templates/monthly_overview/pages/overview.html

@@ -133,7 +133,7 @@
                       title="{% translate 'Order by' %}">
                 <i class="fa-solid fa-sort fa-fw"></i>
               </button>
-              <ul class="dropdown-menu dropdown-menu-end menu w-max relative">
+              <ul class="dropdown-menu dropdown-menu-end menu">
                 <li>
                   <button class="{% if order == 'default' %}menu-active{% endif %}" type="button"
                           _="on click remove .menu-active from <li > button/> in the closest <ul/>
@@ -166,7 +166,7 @@
           </div>
 
           {# Filter transactions form #}
-          <div class="bs collapse overflow-visible" id="collapse-filter" hx-preserve>
+          <div class="bs collapse z-1" id="collapse-filter" hx-preserve>
             <div class="card card-body bg-base-200 mt-2">
               <div class="text-right">
                 <button class="btn btn-outline btn-error btn-sm w-fit"

app/templates/rules/fragments/transaction_rule/dry_run/created.html

@@ -9,7 +9,7 @@
         hx-indicator="#dry-run-created-result, closest form" class="show-loading" novalidate>
     {% crispy form %}
   </form>
-  <hr>
+  <hr class="hr my-3">
   <div id="dry-run-created-result" class="show-loading">
     {% include 'rules/fragments/transaction_rule/dry_run/visual.html' with logs=logs results=results %}
   </div>

app/templates/rules/fragments/transaction_rule/dry_run/deleted.html

@@ -9,7 +9,7 @@
         hx-indicator="#dry-run-deleted-result, closest form" class="show-loading" novalidate>
     {% crispy form %}
   </form>
-  <hr>
+  <hr class="hr my-3">
   <div id="dry-run-deleted-result" class="show-loading">
     {% include 'rules/fragments/transaction_rule/dry_run/visual.html' with logs=logs results=results %}
   </div>

app/templates/rules/fragments/transaction_rule/dry_run/updated.html

@@ -9,7 +9,7 @@
         hx-indicator="#dry-run-updated-result, closest form" class="show-loading" novalidate>
     {% crispy form %}
   </form>
-  <hr>
+  <hr class="hr my-3">
   <div id="dry-run-updated-result" class="show-loading">
     {% include 'rules/fragments/transaction_rule/dry_run/visual.html' with logs=logs results=results %}
   </div>

app/templates/rules/fragments/transaction_rule/dry_run/visual.html

@@ -1,97 +1,97 @@
 {% load i18n %}
-<div class="card bg-base-100 shadow-xl max-h-full overflow-auto overflow-x-auto">
+<div class="card" x-data="{ selectedTab: 'visual' }">
-  <div class="card-header bg-base-200 p-4">
+  <div  role="tablist" class="card-header tabs tabs-border">
-    <div role="tablist" class="tabs tabs-lifted">
+      <input type="radio" name="test-tab" class="tab" aria-label="{% translate 'Visual' %}"
-      <button class="tab tab-active" id="visual-tab" data-bs-toggle="tab" data-bs-target="#visual-tab-pane"
+             x-on:click="selectedTab = 'visual'"
-              type="button" role="tab" aria-controls="visual-tab-pane"
+             x-bind:checked="selectedTab === 'visual'"/>
-              aria-selected="true">{% translate 'Visual' %}</button>
+      <input type="radio" name="test-tab" class="tab" aria-label="{% translate 'Logs' %}"
-      <button class="tab" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs-tab-pane" type="button"
+             x-on:click="selectedTab = 'logs'"
-              role="tab" aria-controls="logs-tab-pane" aria-selected="false">{% translate 'Logs' %}</button>
+             x-bind:checked="selectedTab === 'logs'"/>
-    </div>
   </div>
   <div class="card-body">
-    <div class="tab-content" id="myTabContent">
+    <div role="tabpanel" aria-labelledby="home-tab"
-      <div class="tab-pane fade show active" id="visual-tab-pane" role="tabpanel" aria-labelledby="home-tab"
+         tabindex="0" x-cloak x-show="selectedTab === 'visual'">
-           tabindex="0">
+      {% if not results %}
-        {% if not results %}
+        {% translate 'Run a test to see...' %}
-          {% translate 'Run a test to see...' %}
+      {% else %}
-        {% else %}
+        {% for result in results %}
-          {% for result in results %}
 
-            {% if result.type == 'header' %}
+          {% if result.type == 'header' %}
-              <div class="my-3">
+            <div class="my-3">
-                <h6 class="text-center mb-3">
+              <h6 class="text-center mb-3">
-                  <span class="badge badge-secondary">
+                  <span class="badge badge-primary">
                   {% if result.header_type == "edit_transaction" %}
                     {% translate 'Edit transaction' %}
                   {% elif result.header_type == "update_or_create_transaction" %}
                     {% translate 'Update or create transaction' %}
                   {% endif %}
                   </span>
-                </h6>
+              </h6>
-              </div>
+            </div>
-            {% endif %}
+          {% endif %}
 
 
-            {% if result.type == 'triggering_transaction' %}
+          {% if result.type == 'triggering_transaction' %}
-              <div class="mt-4">
+            <div class="mt-4">
-                <h6 class="text-center mb-3"><span class="badge badge-secondary">{% translate 'Start' %}</span></h6>
+              <h6 class="text-center mb-3"><span class="badge badge-primary">{% translate 'Start' %}</span></h6>
-                <c-transaction.item :transaction="result.transaction" :dummy="True"
+              <c-transaction.item :transaction="result.transaction" :dummy="True"
-                                    :disable-selection="True"></c-transaction.item>
+                                  :disable-selection="True"></c-transaction.item>
-              </div>
+            </div>
-            {% endif %}
+          {% endif %}
 
-            {% if result.type == 'edit_transaction' %}
+          {% if result.type == 'edit_transaction' %}
+            <div>
               <div>
-                <div>
+                {% translate 'Set' %} <span
-                  {% translate 'Set' %} <span
+                  class="badge badge-secondary">{{ result.field }}</span> {% translate 'to' %}
-                    class="badge badge-secondary">{{ result.field }}</span> {% translate 'to' %}
+                <span class="badge badge-secondary">{{ result.new_value }}</span>
-                  <span class="badge badge-secondary">{{ result.new_value }}</span>
+              </div>
-                </div>
+              <c-transaction.item :transaction="result.transaction" :dummy="True"
-                <c-transaction.item :transaction="result.transaction" :dummy="True"
+                                  :disable-selection="True"></c-transaction.item>
+            </div>
+          {% endif %}
+
+          {% if result.type == 'update_or_create_transaction' %}
+            <div>
+              <div class="alert alert-info" role="alert">
+                {% translate 'Search' %}: {{ result.query }}
+              </div>
+              {% if result.start_transaction %}
+                <c-transaction.item :transaction="result.start_transaction" :dummy="True"
                                     :disable-selection="True"></c-transaction.item>
-              </div>
+              {% else %}
-            {% endif %}
+                <div class="alert alert-error" role="alert">
-
+                  {% translate 'No transaction found, a new one will be created' %}
-            {% if result.type == 'update_or_create_transaction' %}
-              <div>
-                <div class="alert alert-info" role="alert">
-                  {% translate 'Search' %}: {{ result.query }}
                 </div>
-                {% if result.start_transaction %}
+              {% endif %}
-                  <c-transaction.item :transaction="result.start_transaction" :dummy="True"
+              <div class="text-center text-3xl my-2"><i class="fa-solid fa-arrow-down"></i></div>
-                                      :disable-selection="True"></c-transaction.item>
+              <c-transaction.item :transaction="result.end_transaction" :dummy="True"
-                {% else %}
+                                  :disable-selection="True"></c-transaction.item>
-                  <div class="alert alert-error" role="alert">
+            </div>
-                    {% translate 'No transaction found, a new one will be created' %}
+          {% endif %}
-                  </div>
-                {% endif %}
-                <div class="text-center text-3xl my-2"><i class="fa-solid fa-arrow-down"></i></div>
-                <c-transaction.item :transaction="result.end_transaction" :dummy="True"
-                                    :disable-selection="True"></c-transaction.item>
-              </div>
-            {% endif %}
 
-            {% if result.type == 'error' %}
+          {% if result.type == 'error' %}
-              <div>
+            <div>
-                <div class="alert alert-{% if result.level == 'error' %}error{% elif result.level == 'warning' %}warning{% else %}info{% endif %}" role="alert">
+              <div
-                  {{ result.error }}
+                  class="alert alert-{% if result.level == 'error' %}error{% elif result.level == 'warning' %}warning{% else %}info{% endif %}"
-                </div>
+                  role="alert">
+                {{ result.error }}
               </div>
-            {% endif %}
+            </div>
+          {% endif %}
 
-          {% endfor %}
+        {% endfor %}
-        {% endif %}
+      {% endif %}
-      </div>
+    </div>
-      <div class="tab-pane fade" id="logs-tab-pane" role="tabpanel" aria-labelledby="logs-tab" tabindex="0">
+    <div role="tabpanel" aria-labelledby="logs-tab" tabindex="0"
-        {% if not logs %}
+         x-cloak x-show="selectedTab === 'logs'">
-          {% translate 'Run a test to see...' %}
+      {% if not logs %}
-        {% else %}
+        {% translate 'Run a test to see...' %}
-          <pre>
+      {% else %}
-              {{ logs|linebreaks }}
+        <pre class="overflow-x-auto">
-            </pre>
+          {{ logs|linebreaks }}
-        {% endif %}
+        </pre>
-      </div>
+      {% endif %}
     </div>
   </div>
 </div>

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

@@ -29,7 +29,7 @@
 
     <div class="my-3">
       <div class="text-xl mb-2">{% translate 'Then...' %}</div>
-      <div class="row g-3">
+      <div class="flex flex-col gap-3">
       {% for action in all_actions %}
         {% if action.action_type == "edit_transaction" %}
           <div class="card bg-base-100 card-border shadow">
@@ -69,7 +69,7 @@
             </div>
           </div>
         {% elif action.action_type == "update_or_create_transaction" %}
-          <div class="card shadow">
+          <div class="card bg-base-100 card-border shadow">
             <div class="card-header">
               <div>
                 {% if action.order != 0 %}<span class="badge badge-secondary">{{ action.order }}</span>{% endif %}
@@ -103,7 +103,7 @@
           </div>
         {% endif %}
       {% empty %}
-        <div class="card shadow">
+        <div class="bg-base-100 card-border shadow">
           <div class="card-body">
             {% translate 'This rule has no actions' %}
           </div>
@@ -117,7 +117,7 @@
                   aria-expanded="false">
             <i class="fa-solid fa-flask-vial me-2"></i>{% translate 'Test' %}
           </button>
-          <ul class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+          <ul class="dropdown-menu menu">
             {% if transaction_rule.on_create %}
               <li><a role="link" href="#"
                      hx-get="{% url 'transaction_rule_dry_run_created' pk=transaction_rule.id %}"
@@ -140,7 +140,7 @@
                   aria-expanded="false">
             <i class="fa-solid fa-circle-plus me-2"></i>{% translate 'Add new' %}
           </button>
-          <ul class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+          <ul class="dropdown-menu menu">
             <li><a role="link" href="#"
                    hx-get="{% url 'transaction_rule_action_add' transaction_rule_id=transaction_rule.id %}"
                    hx-target="#generic-offcanvas">{% trans 'Edit Transaction' %}</a></li>

app/templates/transactions/fragments/bulk_edit.html

@@ -5,7 +5,8 @@
 {% block title %}{% translate 'Bulk Editing' %}{% endblock %}
 
 {% block body %}
-<p>{% trans 'Editing' %} {{ transactions|length }} {% trans 'transactions' %}</p>
+<p>{% trans 'Editing' %} {{ transactions|length }} {% trans 'transactions' %}
+<hr class="hr my-3" />
 <div class="editing-transactions">
   {% for transaction in transactions %}
     <input type="hidden" name="transactions" value="{{ transaction.id }}"/>

app/templates/transactions/pages/transactions.html

@@ -85,7 +85,7 @@
                       title="{% translate 'Order by' %}">
                 <i class="fa-solid fa-sort fa-fw"></i>
               </button>
-              <ul class="dropdown-menu dropdown-menu-end menu w-max relative">
+              <ul class="dropdown-menu dropdown-menu-end menu">
                 <li>
                   <button class="{% if order == 'default' %}menu-active{% endif %}" type="button"
                           _="on click remove .menu-active from <li > button/> in the closest <ul/>
@@ -118,7 +118,7 @@
           </div>
 
           {# Filter transactions form #}
-          <div class="bs collapse overflow-visible" id="collapse-filter" hx-preserve>
+          <div class="bs collapse z-1" id="collapse-filter" hx-preserve>
             <div class="card card-body bg-base-200 mt-2">
               <div class="text-right">
                 <button class="btn btn-outline btn-error btn-sm w-fit"

app/templates/transactions/widgets/paid_toggle_button.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 {% load crispy_forms_field %}
 
-<div class="form-group mb-3">
+<div class="mb-3">
     <div class="join w-full " role="group" aria-label="{{ field.label }}">
         <input type="radio" class="join-item btn btn-warning btn-outline w-1/2" name="{{ field.name }}" id="{{ field.id_for_label }}_false" 
                value="false" aria-label="{% trans 'Projected' %}" {% if not field.value %}checked{% endif %}>

app/templates/transactions/widgets/unselectable_income_expense_toggle_buttons.html

@@ -1,19 +1,19 @@
 {% load i18n %}
 {% load crispy_forms_field %}
 
-<div class="form-group mb-3">
+<div class="mb-3">
     <div class="join w-full" role="group" aria-label="{{ field.label }}">
             <input type="radio"
-                   class="join-item btn btn-neutral {% if field.errors %}input-error{% endif %}"
+                   class="join-item btn btn-neutral btn-outline w-1/3 {% if field.errors %}input-error{% endif %}"
                    name="{{ field.html_name }}"
                    id="{{ field.html_name }}_none_tr"
                    value=""
                    aria-label="{% trans 'Unchanged' %}"
-                   {% if field.value is None %}checked{% endif %}>
+                   {% if not field.value %}checked{% endif %}>
 
         {% for choice in field.field.choices %}
             <input type="radio"
-                   class="join-item btn {% if forloop.first %}btn-success{% elif forloop.last %}btn-error{% else %}btn-primary{% endif %} {% if field.errors %}input-error{% endif %}"
+                   class="join-item btn btn-outline w-1/3 {% if forloop.first %}btn-success{% elif forloop.last %}btn-error{% else %}btn-primary{% endif %} {% if field.errors %}input-error{% endif %}"
                    name="{{ field.html_name }}"
                    id="{{ field.html_name }}_{{ forloop.counter }}_tr"
                    value="{{ choice.0 }}"

app/templates/transactions/widgets/unselectable_paid_toggle_button.html

@@ -1,15 +1,15 @@
 {% load i18n %}
 {% load crispy_forms_field %}
 
-<div class="form-group mb-3">
+<div class="mb-3">
     <div class="join w-full" role="group" aria-label="{{ field.label }}">
-        <input type="radio" class="join-item btn btn-neutral" name="{{ field.name }}" id="{{ field.id_for_label }}_null"
+        <input type="radio" class="join-item btn btn-neutral btn-outline w-1/3" name="{{ field.name }}" id="{{ field.id_for_label }}_null"
-               value="" aria-label="{% trans 'Unchanged' %}" {% if field.value is None %}checked{% endif %}>
+               value="" aria-label="{% trans 'Unchanged' %}" {% if not field.value %}checked{% endif %}>
 
-        <input type="radio" class="join-item btn btn-primary" name="{{ field.name }}" id="{{ field.id_for_label }}_false"
+        <input type="radio" class="join-item btn btn-primary btn-outline w-1/3" name="{{ field.name }}" id="{{ field.id_for_label }}_false"
                value="false" aria-label="{% trans 'Projected' %}" {% if field.value is False %}checked{% endif %}">
 
-        <input type="radio" class="join-item btn btn-success" name="{{ field.name }}" id="{{ field.id_for_label }}_true"
+        <input type="radio" class="join-item btn btn-success btn-outline w-1/3" name="{{ field.name }}" id="{{ field.id_for_label }}_true"
                value="true" aria-label="{% trans 'Paid' %}" {% if field.value is True %}checked{% endif %}>
     </div>
 

app/templates/users/fragments/list.html

@@ -1,16 +1,13 @@
 {% load hijack %}
 {% load i18n %}
+<c-ui.fab-single-action
+    url="{% url 'user_add' %}"
+    hx_target="#generic-offcanvas">
+</c-ui.fab-single-action>
 <div class="container px-md-3 py-3 column-gap-5">
   <div class="text-3xl font-bold font-mono w-full mb-3">
     {% spaceless %}
-      <div>{% translate 'Users' %}<span>
+      <div>{% translate 'Users' %}</div>
-      <a class="no-underline text-2xl p-1 category-action"
-         role="button"
-         data-tippy-content="{% translate "Add" %}"
-         hx-get="{% url 'user_add' %}"
-         hx-target="#generic-offcanvas">
-            <i class="fa-solid fa-circle-plus fa-fw"></i></a>
-    </span></div>
     {% endspaceless %}
   </div>
 
@@ -20,58 +17,60 @@
         {% if users %}
           <div class="overflow-x-auto">
             <c-config.search></c-config.search>
-            <table class="table table-hover">
+            <div class="overflow-x-auto">
-              <thead>
+              <table class="table table-zebra">
-              <tr>
+                <thead>
-                <th scope="col" class="table-col-auto"></th>
+                <tr>
-                <th scope="col">{% translate 'Active' %}</th>
+                  <th scope="col" class="table-col-auto"></th>
-                <th scope="col">{% translate 'Name' %}</th>
+                  <th scope="col">{% translate 'Active' %}</th>
-                <th scope="col">{% translate 'Email' %}</th>
+                  <th scope="col">{% translate 'Name' %}</th>
-                <th scope="col">{% translate 'Superuser' %}</th>
+                  <th scope="col">{% translate 'Email' %}</th>
-              </tr>
+                  <th scope="col">{% translate 'Superuser' %}</th>
-              </thead>
+                </tr>
-              <tbody>
+                </thead>
-              {% for user in users %}
+                <tbody>
-                <tr class="tag">
+                {% for user in users %}
-                  <td class="table-col-auto">
+                  <tr class="tag">
-                    <div class="join" role="group" aria-label="{% translate 'Actions' %}">
+                    <td class="table-col-auto">
-                      <a class="btn btn-secondary btn-sm join-item"
+                      <div class="join" role="group" aria-label="{% translate 'Actions' %}">
-                         role="button"
+                        <a class="btn btn-secondary btn-sm join-item"
-                         hx-swap="innerHTML"
-                         data-tippy-content="{% translate "Edit" %}"
-                         hx-get="{% url 'user_edit' pk=user.id %}"
-                         hx-target="#generic-offcanvas">
-                        <i class="fa-solid fa-pencil fa-fw"></i></a>
-                      {% if request.user|can_hijack:user and request.user != user %}
-                        <a class="btn btn-info btn-sm join-item"
                            role="button"
-                           data-tippy-content="{% translate "Impersonate" %}"
+                           hx-swap="innerHTML"
-                           hx-post="{% url 'hijack:acquire' %}"
+                           data-tippy-content="{% translate "Edit" %}"
-                           hx-vals='{"user_pk":"{{user.id}}"}'
+                           hx-get="{% url 'user_edit' pk=user.id %}"
-                           hx-swap="none"
+                           hx-target="#generic-offcanvas">
-                           _="on htmx:afterRequest(event) from me
+                          <i class="fa-solid fa-pencil fa-fw"></i></a>
+                        {% if request.user|can_hijack:user and request.user != user %}
+                          <a class="btn btn-info btn-sm join-item"
+                             role="button"
+                             data-tippy-content="{% translate "Impersonate" %}"
+                             hx-post="{% url 'hijack:acquire' %}"
+                             hx-vals='{"user_pk":"{{ user.id }}"}'
+                             hx-swap="none"
+                             _="on htmx:afterRequest(event) from me
                                if event.detail.successful
                                  go to url '/'">
-                          <i class="fa-solid fa-mask fa-fw"></i></a>
+                            <i class="fa-solid fa-mask fa-fw"></i></a>
+                        {% endif %}
+                      </div>
+                    </td>
+                    <td>
+                      {% if user.is_active %}
+                        <i class="fa-solid fa-solid fa-check text-success"></i>
                       {% endif %}
-                    </div>
+                    </td>
-                  </td>
+                    <td>{{ user.first_name }} {{ user.last_name }}</td>
-                  <td>
+                    <td>{{ user.email }}</td>
-                    {% if user.is_active %}
+                    <td>
-                      <i class="fa-solid fa-solid fa-check text-success"></i>
+                      {% if user.is_superuser %}
-                    {% endif %}
+                        <i class="fa-solid fa-solid fa-check text-success"></i>
-                  </td>
+                      {% endif %}
-                  <td>{{ user.first_name }} {{ user.last_name }}</td>
+                    </td>
-                  <td>{{ user.email }}</td>
+                  </tr>
-                  <td>
+                {% endfor %}
-                    {% if user.is_superuser %}
+                </tbody>
-                      <i class="fa-solid fa-solid fa-check text-success"></i>
+              </table>
-                    {% endif %}
+            </div>
-                  </td>
-                </tr>
-              {% endfor %}
-              </tbody>
-            </table>
           </div>
         {% else %}
           <c-msg.empty title="{% translate "No users" %}" remove-padding></c-msg.empty>

app/templates/users/login.html

@@ -9,41 +9,46 @@
 {% block content %}
   <div class="min-h-screen flex items-center justify-center p-4">
     <div class="w-full max-w-md">
-          {% settings "DEMO" as demo_mode %}
+      {% settings "DEMO" as demo_mode %}
-          {% if demo_mode %}
+      {% if demo_mode %}
-            <div class="card bg-base-100 shadow-xl mb-3">
+        <div class="card bg-base-100 shadow-xl mb-3">
-              <div class="card-body">
+          <div class="card-body">
-                <h1 class="text-lg card-title text-center mb-4">{% trans "Welcome to WYGIWYH's demo!" %}</h1>
+            <h1 class="text-lg card-title text-center mb-4">{% trans "Welcome to WYGIWYH's demo!" %}</h1>
-                <p>{% trans 'Use the credentials below to login' %}:</p>
+            <p>{% trans 'Use the credentials below to login' %}:</p>
-                <p>{% trans 'E-mail' %}: <span class="badge badge-secondary select-all">demo@demo.com</span></p>
+            <p>{% trans 'E-mail' %}: <span class="badge badge-secondary select-all">demo@demo.com</span></p>
-                <p>{% trans 'Password' %}: <span class="badge badge-secondary select-all">wygiwyhdemo</span></p>
+            <p>{% trans 'Password' %}: <span class="badge badge-secondary select-all">wygiwyhdemo</span></p>
-              </div>
-            </div>
-          {% endif %}
-          <div class="card bg-base-100 shadow-2xl">
-            <div class="card-body">
-              <h1 class="text-2xl card-title text-center mb-4">Login</h1>
-              {% crispy form %}
-
-              {% get_providers as socialaccount_providers %}
-              {% if socialaccount_providers %}
-                <div class="mt-3">
-                  <hr class="hr">
-                  <ul class="socialaccount_providers list-none">
-                    {% for provider in socialaccount_providers %}
-                      <li class="mt-2">
-                        <a title="{{ provider.name }}"
-                           class="btn btn-outline btn-primary w-full socialaccount_provider {{ provider.id }}"
-                           href="{% provider_login_url provider %}">
-                          {% translate 'Login with' %} {{ provider.name }}
-                        </a>
-                      </li>
-                    {% endfor %}
-                  </ul>
-                </div>
-              {% endif %}
-            </div>
           </div>
         </div>
+      {% endif %}
+      <div class="card bg-base-100 shadow-2xl">
+        <div class="card-body">
+          <h1 class="text-2xl card-title text-center mb-4">Login</h1>
+          {% crispy form %}
+
+          {% get_providers as socialaccount_providers %}
+          {% if socialaccount_providers %}
+            <hr class="hr my-3">
+            <ul class="socialaccount_providers list-none flex flex-col gap-3">
+              {% for provider in socialaccount_providers %}
+                <li>
+                  <a title="{{ provider.name }}"
+                     class="btn btn-outline btn-primary w-full socialaccount_provider {{ provider.id }}"
+                     href="{% provider_login_url provider %}">
+                    {% translate 'Login with' %} {{ provider.name }}
+                  </a>
+                </li>
+                <li>
+                  <a title="{{ provider.name }}"
+                     class="btn btn-outline btn-primary w-full socialaccount_provider {{ provider.id }}"
+                     href="{% provider_login_url provider %}">
+                    {% translate 'Login with' %} {{ provider.name }}
+                  </a>
+                </li>
+              {% endfor %}
+            </ul>
+          {% endif %}
+        </div>
+      </div>
+    </div>
   </div>
 {% endblock %}

frontend/package-lock.json

@@ -9,34 +9,42 @@
       "version": "1.0.1",
       "license": "AGPL-3.0",
       "dependencies": {
+        "@alpinejs/collapse": "^3.15.1",
         "@alpinejs/mask": "^3.15.1",
         "@fontsource-variable/jetbrains-mono": "^5.2.8",
         "@fortawesome/fontawesome-free": "^7.1.0",
+        "@marcreichel/alpine-autosize": "^1.3.3",
         "@popperjs/core": "^2.11.8",
         "@rollup/plugin-commonjs": "^29.0.0",
-        "@tailwindcss/vite": "^4.1.16",
+        "@tailwindcss/vite": "^4.1.17",
         "air-datepicker": "^3.6.0",
         "alpinejs": "^3.15.1",
-        "autoprefixer": "^10.4.21",
+        "autoprefixer": "^10.4.22",
         "autosize": "^6.0.1",
         "bootstrap": "^5.3.8",
         "chart.js": "^4.5.1",
         "chartjs-chart-sankey": "^0.14.0",
-        "daisyui": "^5.3.10",
+        "daisyui": "^5.4.7",
         "htmx.org": "^2.0.8",
         "hyperscript.org": "^0.9.14",
         "jquery": "^3.7.1",
-        "mathjs": "^15.0.0",
+        "mathjs": "^15.1.0",
         "postcss": "^8.5.6",
-        "sass": "^1.93.3",
+        "sass": "^1.94.0",
         "sweetalert2": "^11.26.3",
-        "tailwindcss": "^4.1.16",
+        "tailwindcss": "^4.1.17",
         "tippy.js": "^6.3.7",
         "tom-select": "^2.4.3",
-        "tw-bootstrap-grid": "^1.3.1",
+        "tw-bootstrap-grid": "^1.3.2",
-        "vite": "7.1.12"
+        "vite": "7.2.2"
       }
     },
+    "node_modules/@alpinejs/collapse": {
+      "version": "3.15.1",
+      "resolved": "https://registry.npmjs.org/@alpinejs/collapse/-/collapse-3.15.1.tgz",
+      "integrity": "sha512-p3ejDFk8VWdrHa6+Fq3NQp6X4LxWoj2TFRgKEKPQPmVyJMV+Zf5m4ZUFk3Z54zIsgOM9JkAZE0Xany00ntTTng==",
+      "license": "MIT"
+    },
     "node_modules/@alpinejs/mask": {
       "version": "3.15.1",
       "resolved": "https://registry.npmjs.org/@alpinejs/mask/-/mask-3.15.1.tgz",
@@ -131,6 +139,15 @@
       "version": "0.3.4",
       "license": "MIT"
     },
+    "node_modules/@marcreichel/alpine-autosize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@marcreichel/alpine-autosize/-/alpine-autosize-1.3.3.tgz",
+      "integrity": "sha512-1F8Wb/b1oVb1eGySpr5InODcHoZGNpWIpYsfHIELvcwqiipBGrGwhYMJVh11skb/dx2JcTqCgheZTyTHJ15oRw==",
+      "license": "MIT",
+      "dependencies": {
+        "autosize": "^6.0.1"
+      }
+    },
     "node_modules/@orchidjs/sifter": {
       "version": "1.1.0",
       "license": "Apache-2.0",
@@ -316,47 +333,47 @@
       ]
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
-      "integrity": "sha512-BX5iaSsloNuvKNHRN3k2RcCuTEgASTo77mofW0vmeHkfrDWaoFAFvNHpEgtu0eqyypcyiBkDWzSMxJhp3AUVcw==",
+      "integrity": "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "enhanced-resolve": "^5.18.3",
         "jiti": "^2.6.1",
         "lightningcss": "1.30.2",
-        "magic-string": "^0.30.19",
+        "magic-string": "^0.30.21",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.16"
+        "tailwindcss": "4.1.17"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz",
-      "integrity": "sha512-2OSv52FRuhdlgyOQqgtQHuCgXnS8nFSYRp2tJ+4WZXKgTxqPy7SMSls8c3mPT5pkZ17SBToGM5LHEJBO7miEdg==",
+      "integrity": "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==",
       "license": "MIT",
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.16",
+        "@tailwindcss/oxide-android-arm64": "4.1.17",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.17",
-        "@tailwindcss/oxide-darwin-x64": "4.1.16",
+        "@tailwindcss/oxide-darwin-x64": "4.1.17",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.16",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.17",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.16",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.17",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.17",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.17",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.16",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.17",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.16",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.16"
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.17"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.17.tgz",
-      "integrity": "sha512-8+ctzkjHgwDJ5caq9IqRSgsP70xhdhJvm+oueS/yhD5ixLhqTw9fSL1OurzMUhBwE5zK26FXLCz2f/RtkISqHA==",
+      "integrity": "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==",
       "cpu": [
         "arm64"
       ],
@@ -370,9 +387,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.17.tgz",
-      "integrity": "sha512-C3oZy5042v2FOALBZtY0JTDnGNdS6w7DxL/odvSny17ORUnaRKhyTse8xYi3yKGyfnTUOdavRCdmc8QqJYwFKA==",
+      "integrity": "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==",
       "cpu": [
         "arm64"
       ],
@@ -386,9 +403,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.17.tgz",
-      "integrity": "sha512-vjrl/1Ub9+JwU6BP0emgipGjowzYZMjbWCDqwA2Z4vCa+HBSpP4v6U2ddejcHsolsYxwL5r4bPNoamlV0xDdLg==",
+      "integrity": "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==",
       "cpu": [
         "x64"
       ],
@@ -402,9 +419,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.17.tgz",
-      "integrity": "sha512-TSMpPYpQLm+aR1wW5rKuUuEruc/oOX3C7H0BTnPDn7W/eMw8W+MRMpiypKMkXZfwH8wqPIRKppuZoedTtNj2tg==",
+      "integrity": "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==",
       "cpu": [
         "x64"
       ],
@@ -418,9 +435,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.17.tgz",
-      "integrity": "sha512-p0GGfRg/w0sdsFKBjMYvvKIiKy/LNWLWgV/plR4lUgrsxFAoQBFrXkZ4C0w8IOXfslB9vHK/JGASWD2IefIpvw==",
+      "integrity": "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==",
       "cpu": [
         "arm"
       ],
@@ -434,9 +451,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.17.tgz",
-      "integrity": "sha512-DoixyMmTNO19rwRPdqviTrG1rYzpxgyYJl8RgQvdAQUzxC1ToLRqtNJpU/ATURSKgIg6uerPw2feW0aS8SNr/w==",
+      "integrity": "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==",
       "cpu": [
         "arm64"
       ],
@@ -450,9 +467,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.17.tgz",
-      "integrity": "sha512-H81UXMa9hJhWhaAUca6bU2wm5RRFpuHImrwXBUvPbYb+3jo32I9VIwpOX6hms0fPmA6f2pGVlybO6qU8pF4fzQ==",
+      "integrity": "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==",
       "cpu": [
         "arm64"
       ],
@@ -466,9 +483,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.17.tgz",
-      "integrity": "sha512-ZGHQxDtFC2/ruo7t99Qo2TTIvOERULPl5l0K1g0oK6b5PGqjYMga+FcY1wIUnrUxY56h28FxybtDEla+ICOyew==",
+      "integrity": "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==",
       "cpu": [
         "x64"
       ],
@@ -482,9 +499,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.17.tgz",
-      "integrity": "sha512-Oi1tAaa0rcKf1Og9MzKeINZzMLPbhxvm7rno5/zuP1WYmpiG0bEHq4AcRUiG2165/WUzvxkW4XDYCscZWbTLZw==",
+      "integrity": "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==",
       "cpu": [
         "x64"
       ],
@@ -498,9 +515,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.17.tgz",
-      "integrity": "sha512-B01u/b8LteGRwucIBmCQ07FVXLzImWESAIMcUU6nvFt/tYsQ6IHz8DmZ5KtvmwxD+iTYBtM1xwoGXswnlu9v0Q==",
+      "integrity": "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -515,8 +532,8 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.5.0",
+        "@emnapi/core": "^1.6.0",
-        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/runtime": "^1.6.0",
         "@emnapi/wasi-threads": "^1.1.0",
         "@napi-rs/wasm-runtime": "^1.0.7",
         "@tybys/wasm-util": "^0.10.1",
@@ -527,9 +544,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.17.tgz",
-      "integrity": "sha512-zX+Q8sSkGj6HKRTMJXuPvOcP8XfYON24zJBRPlszcH1Np7xuHXhWn8qfFjIujVzvH3BHU+16jBXwgpl20i+v9A==",
+      "integrity": "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==",
       "cpu": [
         "arm64"
       ],
@@ -543,9 +560,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.17.tgz",
-      "integrity": "sha512-m5dDFJUEejbFqP+UXVstd4W/wnxA4F61q8SoL+mqTypId2T2ZpuxosNSgowiCnLp2+Z+rivdU0AqpfgiD7yCBg==",
+      "integrity": "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==",
       "cpu": [
         "x64"
       ],
@@ -559,14 +576,14 @@
       }
     },
     "node_modules/@tailwindcss/vite": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.17.tgz",
-      "integrity": "sha512-bbguNBcDxsRmi9nnlWJxhfDWamY3lmcyACHcdO1crxfzuLpOhHLLtEIN/nCbbAtj5rchUgQD17QVAKi1f7IsKg==",
+      "integrity": "sha512-4+9w8ZHOiGnpcGI6z1TVVfWaX/koK7fKeSYF3qlYg2xpBtbteP2ddBxiarL+HVgfSJGeK5RIxRQmKm4rTJJAwA==",
       "license": "MIT",
       "dependencies": {
-        "@tailwindcss/node": "4.1.16",
+        "@tailwindcss/node": "4.1.17",
-        "@tailwindcss/oxide": "4.1.16",
+        "@tailwindcss/oxide": "4.1.17",
-        "tailwindcss": "4.1.16"
+        "tailwindcss": "4.1.17"
       },
       "peerDependencies": {
         "vite": "^5.2.0 || ^6 || ^7"
@@ -611,7 +628,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.21",
+      "version": "10.4.22",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
+      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
       "funding": [
         {
           "type": "opencollective",
@@ -628,9 +647,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.24.4",
+        "browserslist": "^4.27.0",
-        "caniuse-lite": "^1.0.30001702",
+        "caniuse-lite": "^1.0.30001754",
-        "fraction.js": "^4.3.7",
+        "fraction.js": "^5.3.4",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
@@ -650,7 +669,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.9",
+      "version": "2.8.25",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.25.tgz",
+      "integrity": "sha512-2NovHVesVF5TXefsGX1yzx1xgr7+m9JQenvz6FQY3qd+YXkKkYiv+vTCc7OriP9mcDZpTC5mAOYN4ocd29+erA==",
       "license": "Apache-2.0",
       "bin": {
         "baseline-browser-mapping": "dist/cli.js"
@@ -687,7 +708,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.26.2",
+      "version": "4.28.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
+      "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -705,11 +728,11 @@
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "baseline-browser-mapping": "^2.8.3",
+        "baseline-browser-mapping": "^2.8.25",
-        "caniuse-lite": "^1.0.30001741",
+        "caniuse-lite": "^1.0.30001754",
-        "electron-to-chromium": "^1.5.218",
+        "electron-to-chromium": "^1.5.249",
-        "node-releases": "^2.0.21",
+        "node-releases": "^2.0.27",
-        "update-browserslist-db": "^1.1.3"
+        "update-browserslist-db": "^1.1.4"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -723,7 +746,9 @@
       "license": "MIT"
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001745",
+      "version": "1.0.30001754",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz",
+      "integrity": "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==",
       "funding": [
         {
           "type": "opencollective",
@@ -795,9 +820,9 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "5.3.10",
+      "version": "5.4.7",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.3.10.tgz",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.4.7.tgz",
-      "integrity": "sha512-vmjyPmm0hvFhA95KB6uiGmWakziB2pBv6CUcs5Ka/3iMBMn9S+C3SZYx9G9l2JrgTZ1EFn61F/HrPcwaUm2kLQ==",
+      "integrity": "sha512-2wYO61vTPCXk7xEBgnzLZAYoE0xS5IRLu/GSq0vORpB+cTrtubdx69NnA0loc0exvCY1s2fYL4lGZtFHe2ohNQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/saadeghi/daisyui?sponsor=1"
@@ -815,7 +840,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.227",
+      "version": "1.5.250",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.250.tgz",
+      "integrity": "sha512-/5UMj9IiGDMOFBnN4i7/Ry5onJrAGSbOGo3s9FEKmwobGq6xw832ccET0CE3CkkMBZ8GJSlUIesZofpyurqDXw==",
       "license": "ISC"
     },
     "node_modules/enhanced-resolve": {
@@ -872,6 +899,8 @@
     },
     "node_modules/escalade": {
       "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -899,13 +928,15 @@
       }
     },
     "node_modules/fraction.js": {
-      "version": "4.3.7",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
       "license": "MIT",
       "engines": {
         "node": "*"
       },
       "funding": {
-        "type": "patreon",
+        "type": "github",
         "url": "https://github.com/sponsors/rawify"
       }
     },
@@ -1253,7 +1284,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.19",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -1264,9 +1297,9 @@
       "license": "MIT"
     },
     "node_modules/mathjs": {
-      "version": "15.0.0",
+      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-15.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-15.1.0.tgz",
-      "integrity": "sha512-eXXXRKEl/htny5T/Ce/hbmqa8WZi2RmaCEHBOVtTeYcYyyGvz1UYSdK2ypydDepFF6F7ue0OygXRRIx8lLq/uw==",
+      "integrity": "sha512-HfnAcScQm9drGryodlDqeS3WAl4gUTYGDcOtcqL/8s23MZ28Ib1i8XnYK3ZdjNuaW/L4BAp9lIp8vxAMrcuu1w==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.26.10",
@@ -1286,17 +1319,6 @@
         "node": ">= 18"
       }
     },
-    "node_modules/mathjs/node_modules/fraction.js": {
-      "version": "5.3.4",
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "license": "MIT",
@@ -1331,7 +1353,9 @@
       "optional": true
     },
     "node_modules/node-releases": {
-      "version": "2.0.21",
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
       "license": "MIT"
     },
     "node_modules/normalize-range": {
@@ -1439,9 +1463,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.93.3",
+      "version": "1.94.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.93.3.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.0.tgz",
-      "integrity": "sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==",
+      "integrity": "sha512-Dqh7SiYcaFtdv5Wvku6QgS5IGPm281L+ZtVD1U2FJa7Q0EFRlq8Z3sjYtz6gYObsYThUOz9ArwFqPZx+1azILQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -1496,9 +1520,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.16",
+      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
-      "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
+      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
       "license": "MIT",
       "peer": true
     },
@@ -1611,9 +1635,9 @@
       }
     },
     "node_modules/tw-bootstrap-grid": {
-      "version": "1.3.1",
+      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/tw-bootstrap-grid/-/tw-bootstrap-grid-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/tw-bootstrap-grid/-/tw-bootstrap-grid-1.3.2.tgz",
-      "integrity": "sha512-QcX2p8u/2yZA6h7LqLq4Wq1nsqz6r50EQE3EE5ce05+IdQa3EKyZlrmFtaWO5hczl3n94UdP/DKg4rt+MjMxIg==",
+      "integrity": "sha512-wfeAqK4iuNnjSTeiIdmJPFlD1DbrTwjx4fCvqJyDd32+7bUqtk2LyNJ0A3dIkJi7FdPQeN7OwvCqdO7gA+eNbg==",
       "license": "MIT",
       "workspaces": [
         "__tests__/tailwind_v3",
@@ -1634,7 +1658,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.3",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",
+      "integrity": "sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==",
       "funding": [
         {
           "type": "opencollective",
@@ -1662,9 +1688,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.12",
+      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
-      "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
+      "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "license": "MIT",
       "peer": true,
       "dependencies": {

frontend/package.json

@@ -16,32 +16,34 @@
   },
   "type": "module",
   "dependencies": {
+    "@alpinejs/collapse": "^3.15.1",
     "@alpinejs/mask": "^3.15.1",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@fortawesome/fontawesome-free": "^7.1.0",
+    "@marcreichel/alpine-autosize": "^1.3.3",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-commonjs": "^29.0.0",
-    "@tailwindcss/vite": "^4.1.16",
+    "@tailwindcss/vite": "^4.1.17",
     "air-datepicker": "^3.6.0",
     "alpinejs": "^3.15.1",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "^10.4.22",
     "autosize": "^6.0.1",
     "bootstrap": "^5.3.8",
     "chart.js": "^4.5.1",
     "chartjs-chart-sankey": "^0.14.0",
-    "daisyui": "^5.3.10",
+    "daisyui": "^5.4.7",
     "htmx.org": "^2.0.8",
     "hyperscript.org": "^0.9.14",
     "jquery": "^3.7.1",
-    "mathjs": "^15.0.0",
+    "mathjs": "^15.1.0",
     "postcss": "^8.5.6",
-    "sass": "^1.93.3",
+    "sass": "^1.94.0",
     "sweetalert2": "^11.26.3",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "tippy.js": "^6.3.7",
     "tom-select": "^2.4.3",
-    "tw-bootstrap-grid": "^1.3.1",
+    "tw-bootstrap-grid": "^1.3.2",
-    "vite": "7.1.12"
+    "vite": "7.2.2"
   },
   "resolutions": {
     "rollup": "npm:@rollup/wasm-node"

frontend/src/js/autosize.js

@@ -1,11 +1,3 @@
-document.addEventListener("input", function (e) {
+import autosize from "autosize/dist/autosize";
-    // Check if the element that triggered the input event is a <textarea>
-    if (e.target.tagName.toLowerCase() === "textarea") {
 
-        // Reset height to 'auto' to allow the textarea to shrink
+window.autosize = autosize;
-        e.target.style.height = "auto";
-
-        // Set the height to its scrollHeight (the full height of the content)
-        e.target.style.height = (e.target.scrollHeight + 5) + "px";
-    }
-}, false);

frontend/src/js/bootstrap.js

@@ -24,4 +24,4 @@ function initiateToasts() {
 
 document.addEventListener('DOMContentLoaded', initiateToasts, false);
 document.addEventListener('htmx:afterSwap', initiateToasts, false);
-initiateToasts();
+initiateToasts();

frontend/src/js/htmx.js

@@ -2,6 +2,8 @@ import _hyperscript from 'hyperscript.org/dist/_hyperscript.min';
 import './_htmx.js';
 import Alpine from "alpinejs";
 import mask from '@alpinejs/mask';
+import collapse from '@alpinejs/collapse'
+import Autosize from '@marcreichel/alpine-autosize';
 import {create, all} from 'mathjs';
 
 window.Alpine = Alpine;
@@ -15,9 +17,15 @@ window.math = create(all, {
 });
 
 Alpine.plugin(mask);
+Alpine.plugin(collapse);
+Alpine.plugin(Autosize);
 Alpine.start();
 _hyperscript.browserInit();
 
+document.body.addEventListener('htmx:afterSettle', function (evt) {
+    Alpine.initTree(evt.detail.elt);
+});
+
 
 const successAudio = new Audio("/static/sounds/success.mp3");
 const popAudio = new Audio("/static/sounds/pop.mp3");

frontend/src/js/select.js

@@ -13,6 +13,7 @@ window.TomSelect = function createDynamicTomSelect(element) {
         // Extract 'create' option from data attribute
         create: element.dataset.create === 'true',
         copyClassesToDropdown: true,
+        loadingClass: "ts-loading",
         allowEmptyOption: element.dataset.allowEmptyOption === 'true',
         render: {
             no_results: function () {
@@ -23,19 +24,14 @@ window.TomSelect = function createDynamicTomSelect(element) {
             },
         },
 
-        onDropdownOpen: function () {
+        onInitialize: function () {
-            // Move dropdown to body to escape stacking context issues
-            document.body.appendChild(this.dropdown);
-
-
             this.popper = Popper.createPopper(this.control, this.dropdown, {
                 placement: "bottom-start",
-                strategy: "fixed",
                 modifiers: [
                     {
                         name: "sameWidth",
                         enabled: true,
-                        fn: ({ state }) => {
+                        fn: ({state}) => {
                             state.styles.popper.width = `${state.rects.reference.width}px`;
                         },
                         phase: "beforeWrite",
@@ -47,21 +43,13 @@ window.TomSelect = function createDynamicTomSelect(element) {
                             fallbackPlacements: ['top-start'],
                         },
                     },
-                    {
-                        name: 'preventOverflow',
-                        options: {
-                            boundary: 'viewport',
-                            padding: 8,
-                        },
-                    },
                 ]
 
             });
 
         },
-        onDropdownClose: function () {
+        onDropdownOpen: function () {
-            this.popper.destroy();
+            this.popper.update();
-            this.dropdown.remove();
         }
     };
 

frontend/src/styles/_dropdown.scss

@@ -11,7 +11,7 @@ $dropdown-padding-y: 0.5rem !default;
 $dropdown-spacer: 0.125rem !default;
 $dropdown-font-size: 1rem !default;
 $dropdown-border-radius: 0.375rem !default;
-$dropdown-border-width: 1px !default;
+$dropdown-border-width: 2px !default;
 $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
 $dropdown-divider-margin-y: 0.5rem !default;
 $dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !default;
@@ -191,7 +191,7 @@ $breakpoints: (
     --dropdown-font-size: #{$dropdown-font-size};
     --dropdown-color: var(--color-base-content);
     --dropdown-bg: var(--color-base-300);
-    --dropdown-border-color: var(--color-base-300);
+    --dropdown-border-color: var(--color-base-100);
     --dropdown-border-radius: #{$dropdown-border-radius};
     --dropdown-border-width: #{$dropdown-border-width};
     --dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
@@ -214,6 +214,8 @@ $breakpoints: (
     z-index: var(--dropdown-z-index);
     display: none; // none by default, but block on "open" of the menu
     min-width: var(--dropdown-min-width);
+    max-width: calc(100dvw - 1rem); // Prevent overflow on small screens
+    width: max-content;
     padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
     margin: 0; // Override default margin of ul
     color: var(--dropdown-color);
@@ -399,4 +401,4 @@ $breakpoints: (
     --dropdown-link-active-bg: var(--color-primary);
     --dropdown-link-disabled-color: #adb5bd;
     --dropdown-header-color: #adb5bd;
-}
+}

frontend/src/styles/_scrollbar.scss

@@ -1,21 +0,0 @@
-@use "variables";
-
-/* custom scrollbar */
-::-webkit-scrollbar {
-  width: 13px;
-}
-
-::-webkit-scrollbar-track {
-  //background-color: $gray-800;
-}
-
-::-webkit-scrollbar-thumb {
-  //background-color: $gray-600;
-  border-radius: 20px;
-  border: 4px solid transparent;
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  //background-color: $primary;
-}

frontend/src/styles/_tom-select.scss

@@ -1,426 +1,401 @@
-@layer components {
+.ts-control {
-    /* ============================================
+  display: flex;
-       Tom-Select DaisyUI Theme
+  flex-wrap: wrap;
-       Complete override of tom-select default styles
+  align-items: center;
-       ============================================ */
+  width: 100%;
-
+  min-height: var(--size, calc(var(--size-field, 0.25rem) * 10));
-    /* Base Control Styles */
+  padding: 0.5rem 0.75rem;
-    .ts-control {
+  gap: 0.375rem;
-        display: flex;
+
-        flex-wrap: wrap;
+  /* DaisyUI input styling */
-        align-items: center;
+  border: var(--border, 1px) solid;
-        width: 100%;
+  border-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, transparent));
-        min-height: var(--size, calc(var(--size-field, 0.25rem) * 10));
+  border-radius: var(--radius-field, 0.5rem);
-        padding: 0.5rem 0.75rem;
+  background-color: var(--color-base-100);
-        gap: 0.375rem;
+  color: var(--color-base-content);
-
+
-        /* DaisyUI input styling */
+  font-size: 0.875rem;
-        border: var(--border, 1px) solid transparent;
+  line-height: 1.25rem;
-        border-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, transparent));
+  cursor: text;
-        border-radius: var(--radius-field, 0.5rem);
+  position: relative;
-        background-color: var(--color-base-100);
+  z-index: 1;
-        color: var(--color-base-content);
+  overflow: visible;
-
+  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
-        /* DaisyUI depth effect */
+}
-        box-shadow:
+
-            0 1px color-mix(in oklab, var(--input-color) calc(var(--depth, 0) * 10%), transparent) inset,
+/* Control input field */
-            0 -1px oklch(100% 0 0 / calc(var(--depth, 0) * 0.1)) inset;
+.ts-control > input {
-
+  flex: 1 1 auto;
-        font-size: 0.875rem;
+  min-width: 7rem;
-        line-height: 1.25rem;
+  display: inline-flex !important;
-        cursor: text;
+  padding: 0 !important;
-        position: relative;
+  padding-right: 1.25rem !important;
-        z-index: 1;
+  margin: 0 !important;
-        overflow: visible;
+  min-height: 0 !important;
-        transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+  max-height: none !important;
-    }
+  max-width: 100% !important;
-
+
-    /* Multi-select with items */
+  border: 0 none !important;
-    .ts-wrapper.multi.has-items .ts-control {
+  background: transparent !important;
-        padding: calc(0.5rem - 2px - 0px) 0.75rem calc(0.5rem - 2px - 3px - 0px);
+  box-shadow: none !important;
-    }
+  outline: none !important;
-
+
-    /* Control input field */
+  font-size: 0.875rem !important;
-    .ts-control>input {
+  line-height: inherit !important;
-        flex: 1 1 auto;
+  color: inherit;
-        min-width: 7rem;
+  text-indent: 0 !important;
-        display: inline-flex !important;
+}
-        padding: 0 !important;
+
-        padding-right: 1.25rem !important;
+.ts-control > input::-ms-clear {
-        margin: 0 !important;
+  display: none;
-        min-height: 0 !important;
+}
-        max-height: none !important;
+
-        max-width: 100% !important;
+.ts-control > input:focus {
-
+  outline: none !important;
-        border: 0 none !important;
+}
-        background: transparent !important;
+
-        box-shadow: none !important;
+.has-items .ts-control > input {
-        outline: none !important;
+  margin: 0 0.25rem !important;
-
+}
-        font-size: 0.875rem !important;
+
-        line-height: inherit !important;
+/* Focus states - DaisyUI style */
-        color: inherit;
+.ts-control:focus-within,
-        text-indent: 0 !important;
+.ts-control:focus,
-    }
+.focus .ts-control {
-
+  --input-color: var(--color-base-content);
-    .ts-control>input::-ms-clear {
+  border-color: var(--input-color);
-        display: none;
+  box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth, 0) * 10%), transparent) inset;
-    }
+  outline: 2px solid var(--input-color);
-
+  outline-offset: 2px;
-    .ts-control>input:focus {
+  isolation: isolate;
-        outline: none !important;
+  z-index: 2;
-    }
+}
-
+
-    .has-items .ts-control>input {
+/* Disabled state */
-        margin: 0 0.25rem !important;
+.disabled .ts-control,
-    }
+.disabled .ts-control * {
-
+  cursor: not-allowed !important;
-    /* Focus states - DaisyUI style */
+  border-color: var(--color-base-200);
-    .ts-control:focus-within,
+  background-color: var(--color-base-200);
-    .ts-control:focus,
+  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
-    .focus .ts-control {
+  opacity: 1;
-        --input-color: var(--color-base-content);
+  box-shadow: none;
-        border-color: var(--input-color);
+}
-        box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth, 0) * 10%), transparent) inset;
+
-        outline: 2px solid var(--input-color);
+/* Multi-select items (badges) */
-        outline-offset: 2px;
+.ts-wrapper.multi .ts-control > div {
-        isolation: isolate;
+  display: inline-flex;
-        z-index: 2;
+  align-items: center;
-    }
+  justify-content: center;
-
+  cursor: pointer;
-    /* .focus.ts-wrapper {
+  margin: 0 0.25rem 0.25rem 0;
-        border-color: var(--color-primary);
+  padding: 0.25rem 0.75rem;
-        outline: 2px solid var(--color-primary);
+  gap: 0.25rem;
-        outline-offset: 2px;
+
-    } */
+  /* DaisyUI badge styling */
-
+  background-color: var(--color-secondary);
-    /* Disabled state */
+  color: var(--color-secondary-content);
-    .disabled .ts-control,
+  border-radius: var(--radius-field, 0.5rem);
-    .disabled .ts-control * {
+  border: 0 solid transparent;
-        cursor: not-allowed !important;
+
-        border-color: var(--color-base-200);
+  font-size: 0.875rem;
-        background-color: var(--color-base-200);
+  line-height: 1.25rem;
-        color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+  transition: all 0.2s;
-        opacity: 1;
+}
-        box-shadow: none;
+
-    }
+/* Active multi-select item */
-
+.ts-wrapper.multi .ts-control > div.active {
-    /* Multi-select items (badges) */
+  background-color: var(--color-primary);
-    .ts-wrapper.multi .ts-control>div {
+  color: var(--color-primary-content);
-        display: inline-flex;
+  border: 0 solid transparent;
-        align-items: center;
+  opacity: 0.9;
-        justify-content: center;
+}
-        cursor: pointer;
+
-        margin: 0 0.25rem 0.25rem 0;
+/* Disabled multi-select items */
-        padding: 0.25rem 0.75rem;
+.ts-wrapper.multi.disabled .ts-control > div,
-        gap: 0.25rem;
+.ts-wrapper.multi.disabled .ts-control > div.active {
-
+  background-color: var(--color-base-200);
-        /* DaisyUI badge styling */
+  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
-        background-color: var(--color-secondary);
+  border: 0 solid transparent;
-        color: var(--color-secondary-content);
+  cursor: not-allowed;
-        border-radius: var(--radius-field, 0.5rem);
+}
-        border: 0 solid transparent;
+
-
+/* Remove button on items */
-        font-size: 0.875rem;
+.ts-wrapper.plugin-remove_button .item {
-        line-height: 1.25rem;
+  display: inline-flex;
-        transition: all 0.2s;
+  align-items: center;
-    }
+  padding-right: 0 !important;
-
+}
-    /* Active multi-select item */
+
-    .ts-wrapper.multi .ts-control>div.active {
+.ts-wrapper.plugin-remove_button .item .remove {
-        background-color: var(--color-primary);
+  display: inline-block;
-        color: var(--color-primary-content);
+  padding: 0 0.375rem;
-        border: 0 solid transparent;
+  margin-left: 0.375rem;
-        opacity: 0.9;
+  border: none;
-    }
+  border-left: 1px solid color-mix(in oklab, var(--color-primary-content) 30%, transparent);
-
+  border-radius: 0 var(--radius-field, 0.5rem) var(--radius-field, 0.5rem) 0;
-    /* Disabled multi-select items */
+
-    .ts-wrapper.multi.disabled .ts-control>div,
+  color: var(--color-error);
-    .ts-wrapper.multi.disabled .ts-control>div.active {
+  font-size: 1.125rem;
-        background-color: var(--color-base-200);
+  line-height: 1;
-        color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+  text-decoration: none;
-        border: 0 solid transparent;
+  vertical-align: middle;
-        cursor: not-allowed;
+
-    }
+  opacity: 0.7;
-
+  transition: all 0.2s;
-    /* Remove button on items */
+  cursor: pointer;
-    .ts-wrapper.plugin-remove_button .item {
+}
-        display: inline-flex;
+
-        align-items: center;
+.ts-wrapper.plugin-remove_button .item .remove:hover {
-        padding-right: 0 !important;
+  opacity: 1;
-    }
+  background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
-
+}
-    .ts-wrapper.plugin-remove_button .item .remove {
+
-        display: inline-block;
+.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
-        padding: 0 0.375rem;
+  background: none;
-        margin-left: 0.375rem;
+  cursor: not-allowed;
-        border: none;
+}
-        border-left: 1px solid color-mix(in oklab, var(--color-primary-content) 30%, transparent);
+
-        border-radius: 0 var(--radius-field, 0.5rem) var(--radius-field, 0.5rem) 0;
+/* RTL support for remove button */
-
+.ts-control.rtl .ts-wrapper.plugin-remove_button .item {
-        color: var(--color-error);
+  padding-left: 0 !important;
-        font-size: 1.125rem;
+  padding-right: initial;
-        line-height: 1;
+}
-        text-decoration: none;
+
-        vertical-align: middle;
+.ts-control.rtl .ts-wrapper.plugin-remove_button .item .remove {
-
+  border-left: none;
-        opacity: 0.7;
+  border-right: 1px solid color-mix(in oklab, var(--color-primary-content) 30%, transparent);
-        transition: all 0.2s;
+  border-radius: var(--radius-field, 0.5rem) 0 0 var(--radius-field, 0.5rem);
-        cursor: pointer;
+  margin-left: 0;
-    }
+  margin-right: 0.375rem;
-
+}
-    .ts-wrapper.plugin-remove_button .item .remove:hover {
+
-        opacity: 1;
+/* Dropdown */
-        background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
+.ts-dropdown {
-    }
+  position: fixed;
-
+  top: 0;
-    .ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
+  left: 0;
-        background: none;
+  width: auto;
-        cursor: not-allowed;
+  z-index: 1100;
-    }
+  margin: 0;
-
+
-    /* RTL support for remove button */
+  /* DaisyUI dropdown styling */
-    .ts-control.rtl .ts-wrapper.plugin-remove_button .item {
+  background-color: var(--color-base-100);
-        padding-left: 0 !important;
+  color: var(--color-base-content);
-        padding-right: initial;
+  border: var(--border, 1px) solid var(--color-base-300);
-    }
+  border-radius: var(--radius-box, 0.5rem);
-
+
-    .ts-control.rtl .ts-wrapper.plugin-remove_button .item .remove {
+  /* DaisyUI shadow */
-        border-left: none;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth, 0) * 0.1)),
-        border-right: 1px solid color-mix(in oklab, var(--color-primary-content) 30%, transparent);
+  0 8px 10px -6px rgb(0 0 0 / calc(var(--depth, 0) * 0.1));
-        border-radius: var(--radius-field, 0.5rem) 0 0 var(--radius-field, 0.5rem);
+
-        margin-left: 0;
+  box-sizing: border-box;
-        margin-right: 0.375rem;
+  overflow: hidden;
-    }
+}
-
+
-    /* Dropdown */
+/* Dropdown content scrolling */
-    .ts-dropdown {
+.ts-dropdown-content {
-        position: fixed;
+  max-height: 40dvh;
-        top: 0;
+  overflow-y: auto;
-        left: 0;
+  overflow-x: hidden;
-        width: auto;
+  scroll-behavior: smooth;
-        z-index: 1100;
+}
-        margin: 0;
+
-
+/* Dropdown options */
-        /* DaisyUI dropdown styling */
+.ts-dropdown .option,
-        background-color: var(--color-base-100);
+.ts-dropdown .optgroup-header,
-        color: var(--color-base-content);
+.ts-dropdown .no-results,
-        border: var(--border, 1px) solid var(--color-base-300);
+.ts-dropdown .create {
-        border-radius: var(--radius-box, 0.5rem);
+  padding: 0.5rem 0.75rem;
-
+  cursor: pointer;
-        /* DaisyUI shadow */
+}
-        box-shadow:
+
-            0 20px 25px -5px rgb(0 0 0 / calc(var(--depth, 0) * 0.1)),
+.ts-dropdown [data-selectable].option {
-            0 8px 10px -6px rgb(0 0 0 / calc(var(--depth, 0) * 0.1));
+  cursor: pointer;
-
+  opacity: 1;
-        box-sizing: border-box;
+  transition: background-color 0.2s, color 0.2s;
-        overflow: hidden;
+}
-    }
+
-
+.ts-dropdown [data-selectable].option:first-child {
-    /* Dropdown content scrolling */
+  border-top-left-radius: var(--radius-box, 0.5rem);
-    .ts-dropdown-content {
+  border-top-right-radius: var(--radius-box, 0.5rem);
-        max-height: 40dvh;
+}
-        overflow-y: auto;
+
-        overflow-x: hidden;
+.ts-dropdown [data-selectable].option:last-child {
-        scroll-behavior: smooth;
+  border-bottom-left-radius: var(--radius-box, 0.5rem);
-    }
+  border-bottom-right-radius: var(--radius-box, 0.5rem);
-
+}
-    /* Dropdown options */
+
-    .ts-dropdown .option,
+/* Disabled options */
-    .ts-dropdown .optgroup-header,
+.ts-dropdown .option,
-    .ts-dropdown .no-results,
+.ts-dropdown [data-disabled],
-    .ts-dropdown .create {
+.ts-dropdown [data-disabled] [data-selectable].option {
-        padding: 0.5rem 0.75rem;
+  cursor: not-allowed;
-        cursor: pointer;
+  opacity: 0.5;
-    }
+}
-
+
-    .ts-dropdown [data-selectable].option {
+/* Hover and active states */
-        cursor: pointer;
+.ts-dropdown [data-selectable].option:hover,
-        opacity: 1;
+.ts-dropdown .option:hover,
-        transition: background-color 0.2s, color 0.2s;
+.ts-dropdown .create:hover,
-    }
+.ts-dropdown .active {
-
+  background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
-    .ts-dropdown [data-selectable].option:first-child {
+  color: var(--color-base-content);
-        border-top-left-radius: var(--radius-box, 0.5rem);
+}
-        border-top-right-radius: var(--radius-box, 0.5rem);
+
-    }
+.ts-dropdown .active.create {
-
+  color: var(--color-base-content);
-    .ts-dropdown [data-selectable].option:last-child {
+}
-        border-bottom-left-radius: var(--radius-box, 0.5rem);
+
-        border-bottom-right-radius: var(--radius-box, 0.5rem);
+/* Optgroup styling */
-    }
+.ts-dropdown .optgroup-header {
-
+  color: var(--color-base-content);
-    /* Disabled options */
+  background-color: var(--color-base-200);
-    .ts-dropdown .option,
+  font-weight: 600;
-    .ts-dropdown [data-disabled],
+  cursor: default;
-    .ts-dropdown [data-disabled] [data-selectable].option {
+  padding: 0.5rem 0.75rem;
-        cursor: not-allowed;
+}
-        opacity: 0.5;
+
-    }
+.ts-dropdown .optgroup:first-child .optgroup-header {
-
+  border-top: 0 none;
-    /* Hover and active states */
+}
-    .ts-dropdown [data-selectable].option:hover,
+
-    .ts-dropdown .option:hover,
+/* Create option */
-    .ts-dropdown .create:hover,
+.ts-dropdown .create {
-    .ts-dropdown .active {
+  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
-        background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+}
-        color: var(--color-base-content);
+
-    }
+/* Highlight in search */
-
+.ts-dropdown [data-selectable] .highlight {
-    .ts-dropdown .active.create {
+  background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-        color: var(--color-base-content);
+  border-radius: 2px;
-    }
+}
-
+
-    /* Optgroup styling */
+/* Loading spinner */
-    .ts-dropdown .optgroup-header {
+.ts-dropdown .spinner {
-        color: var(--color-base-content);
+  display: inline-block;
-        background-color: var(--color-base-200);
+  width: 30px;
-        font-weight: 600;
+  height: 30px;
-        cursor: default;
+  margin: 0.5rem 0.75rem;
-        padding: 0.5rem 0.75rem;
+}
-    }
+
-
+.ts-dropdown .spinner::after {
-    .ts-dropdown .optgroup:first-child .optgroup-header {
+  content: " ";
-        border-top: 0 none;
+  display: block;
-    }
+  width: 1.25rem;
-
+  height: 1.25rem;
-    /* Create option */
+  margin: 0.1875rem;
-    .ts-dropdown .create {
+  border-radius: 50%;
-        color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+  border: 2px solid var(--color-primary);
-    }
+  border-color: var(--color-primary) transparent var(--color-primary) transparent;
-
+  animation: ts-spin 1.2s linear infinite;
-    /* Highlight in search */
+}
-    .ts-dropdown [data-selectable] .highlight {
+
-        background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+@keyframes ts-spin {
-        border-radius: 2px;
+  0% {
-    }
+    transform: rotate(0deg);
-
+  }
-    /* Loading spinner */
+
-    .ts-dropdown .spinner {
+  100% {
-        display: inline-block;
+    transform: rotate(360deg);
-        width: 30px;
+  }
-        height: 30px;
+}
-        margin: 0.5rem 0.75rem;
+
-    }
+/* Single select dropdown arrow */
-
+.ts-wrapper .ts-control {
-    .ts-dropdown .spinner::after {
+  padding-right: 2.5rem;
-        content: " ";
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-        display: block;
+  background-position: right 0.75rem center;
-        width: 1.25rem;
+  background-repeat: no-repeat;
-        height: 1.25rem;
+  background-size: 1.25em 1.25em;
-        margin: 0.1875rem;
+}
-        border-radius: 50%;
+
-        border: 2px solid var(--color-primary);
+/* Dark theme arrow */
-        border-color: var(--color-primary) transparent var(--color-primary) transparent;
+[data-theme="dark"] .ts-wrapper .ts-control {
-        animation: ts-spin 1.2s linear infinite;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a6adba' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-    }
+}
-
+
-    @keyframes ts-spin {
+/* Clear button plugin */
-        0% {
+.plugin-clear_button {
-            transform: rotate(0deg);
+  --ts-pr-clear-button: 1em;
-        }
+}
-
+
-        100% {
+.plugin-clear_button .clear-button {
-            transform: rotate(360deg);
+  position: absolute;
-        }
+  top: 50%;
-    }
+  right: calc(0.75rem - 6px);
-
+  transform: translateY(-50%);
-    /* Single select dropdown arrow */
+
-    .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
+  color: var(--color-error);
-        padding-right: 2.5rem;
+  background: transparent !important;
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  border: none;
-        background-position: right 0.75rem center;
+  cursor: pointer;
-        background-repeat: no-repeat;
+
-        background-size: 1.25em 1.25em;
+  opacity: 0;
-    }
+  margin-right: 0 !important;
-
+  transition: opacity 0.3s;
-    /* Dark theme arrow */
+}
-    [data-theme="dark"] .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
+
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a6adba' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+.plugin-clear_button .clear-button {
-    }
+  right: 1.2rem;
-
+}
-    /* Clear button plugin */
+
-    .plugin-clear_button {
+.plugin-clear_button.focus.has-items .clear-button,
-        --ts-pr-clear-button: 1em;
+.plugin-clear_button:not(.disabled):hover.has-items .clear-button {
-    }
+  opacity: 0.7;
-
+}
-    .plugin-clear_button .clear-button {
+
-        position: absolute;
+.plugin-clear_button .clear-button:hover {
-        top: 50%;
+  opacity: 1 !important;
-        right: calc(0.75rem - 6px);
+}
-        transform: translateY(-50%);
+
-
+/* Full width control */
-        color: var(--color-error);
+.full .ts-control {
-        background: transparent !important;
+  background-color: var(--color-base-100);
-        border: none;
+}
-        cursor: pointer;
+
-
+/* Input hidden state */
-        opacity: 0;
+.input-hidden .ts-control > input {
-        margin-right: 0 !important;
+  opacity: 0;
-        transition: opacity 0.3s;
+  position: absolute;
-    }
+  left: -10000px;
-
+}
-    .plugin-clear_button.single .clear-button {
+
-        right: max(2.5rem, 0.75rem);
+/* RTL support */
-    }
+.ts-control.rtl {
-
+  text-align: right;
-    .plugin-clear_button.focus.has-items .clear-button,
+}
-    .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
+
-        opacity: 0.7;
+.ts-control.rtl .ts-control > input {
-    }
+  margin: 0 0.25rem 0 -0.125rem !important;
-
+}
-    .plugin-clear_button .clear-button:hover {
+
-        opacity: 1 !important;
+/* Wrapper positioning */
-    }
+.ts-wrapper {
-
+  position: relative;
-    /* Full width control */
+  display: block;
-    .full .ts-control {
+}
-        background-color: var(--color-base-100);
+
-    }
+.ts-wrapper.single .ts-control,
-
+.ts-wrapper.single .ts-control input {
-    /* Input hidden state */
+  cursor: pointer;
-    .input-hidden .ts-control>input {
+}
-        opacity: 0;
+
-        position: absolute;
+/* Hidden accessibility */
-        left: -10000px;
+.ts-hidden-accessible {
-    }
+  position: absolute;
-
+  left: -10000px;
-    /* RTL support */
+  width: 0;
-    .ts-control.rtl {
+  height: 0;
-        text-align: right;
+  opacity: 0;
-    }
+  overflow: hidden;
-
+  clip: rect(0, 0, 0, 0);
-    .ts-control.rtl .ts-control>input {
+  border: 0;
-        margin: 0 0.25rem 0 -0.125rem !important;
+  padding: 0;
-    }
+  margin: 0;
-
+}
-    /* Wrapper positioning */
+
-    .ts-wrapper {
+
-        position: relative;
+.tomselect-checkbox {
-        display: block;
+  margin-right: 0.5rem;
-    }
+}
-
-    .ts-wrapper.single .ts-control,
-    .ts-wrapper.single .ts-control input {
-        cursor: pointer;
-    }
-
-    /* Hidden accessibility */
-    .ts-hidden-accessible {
-        position: absolute;
-        left: -10000px;
-        width: 0;
-        height: 0;
-        opacity: 0;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        border: 0;
-        padding: 0;
-        margin: 0;
-    }
-
-
-    .tomselect-checkbox {
-        margin-right: 0.5rem;
-    }
-}

frontend/src/styles/style.scss

@@ -1,10 +1,9 @@
 @use "variables";
 @use "font-awesome";
 @use "bootstrap";
-// @use "datepicker";
+@use "datepicker";
-// @use "tom-select";
+@use "tom-select";
 @use "animations";
-@use "scrollbar";
 
 .sticky-sidebar {
   position: sticky;
@@ -104,4 +103,8 @@ div:where(.swal2-container) {
     width: 40px;
     height: 40px;
   }
-}
+}
+
+[x-cloak] {
+  display: none !important;
+}

frontend/src/styles/tailwind.css

@@ -1,6 +1,4 @@
 @import "tailwindcss" source("../../../app/templates/");
-@import "./_tom-select.scss";
-@import "./_datepicker.scss";
 
 @plugin "daisyui" {
   themes: wygiwyh_dark --default, wygiwyh_light;
@@ -68,8 +66,8 @@
   --color-success-content: oklch(37% 0.077 168.94);
   --color-warning: oklch(82% 0.189 84.429);
   --color-warning-content: oklch(41% 0.112 45.904);
-  --color-error: oklch(71% 0.194 13.428);
+  --color-error: oklch(70.4% 0.191 22.216);
-  --color-error-content: oklch(27% 0.105 12.094);
+  --color-error-content: oklch(25.8% 0.092 26.042);
   --radius-selector: 0.5rem;
   --radius-field: 0.5rem;
   --radius-box: 0.5rem;
@@ -92,6 +90,10 @@
 
 
 @layer utilities {
+    .textarea {
+        min-height: unset;
+    }
+
     .transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
         background-color: oklch(from var(--color-primary) l c h / 15%);
     }
@@ -223,7 +225,7 @@
 
     .sidebar-floating + main {
         /* Adjusts the main content margin to account for the collapsed sidebar */
-        @apply lg:ml-16 transition-all duration-100;
+        @apply lg:ml-16;
     }
 
     .sidebar-floating .sidebar-item span {
@@ -317,7 +319,7 @@
 
     .sidebar-fixed + main {
         /* Adjusts the main content margin to account for the expanded sidebar */
-        @apply lg:ml-[17%] transition-all duration-100;
+        @apply lg:ml-[17%];
 
         /* Using 16vw to account for padding/margins */
     }

frontend/vite.config.js

@@ -44,10 +44,6 @@ export default defineConfig({
         extensions: ['.js', '.json', '.scss', '.css'],
     },
 
-    optimizeDeps: {
-        include: ['air-datepicker', 'autosize', 'javascript-natural-sort'],
-    },
-
     build: {
         outDir: resolve(__dirname, 'build'),
         assetsDir: '',