feat: guess what, more changes

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