feat(insights): add late and recent transactions

app/templates/cotton/msg/empty.html

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

app/templates/insights/fragments/category_explorer/charts/currency.html

@@ -80,7 +80,7 @@
                               backgroundColor: '#4dde8080', // Added transparency
                               stack: 'stack0'
                           },
-                          
+
                       ]
                   },
                   options: chartOptions

app/templates/insights/fragments/late_transactions.html

@@ -0,0 +1,18 @@
+{% load i18n %}
+
+
+<div hx-get="{% url 'insights_late_transactions' %}" hx-trigger="updated from:window" class="show-loading"
+     id="transactions-list" hx-swap="outerHTML">
+  {% if transactions %}
+    {% for transaction in transactions %}
+      <c-transaction.item :transaction="transaction"></c-transaction.item>
+    {% endfor %}
+    {# Floating bar #}
+    <c-ui.transactions-action-bar></c-ui.transactions-action-bar>
+  {% else %}
+    <c-msg.empty
+        icon="fa-regular fa-hourglass"
+        title="{% translate 'All good!' %}"
+        subtitle="{% translate "No late transactions" %}"></c-msg.empty>
+  {% endif %}
+</div>

app/templates/insights/fragments/latest_transactions.html

@@ -0,0 +1,16 @@
+{% load i18n %}
+
+
+<div hx-get="{% url 'insights_late_transactions' %}" hx-trigger="updated from:window" class="show-loading"
+     id="transactions-list" hx-swap="outerHTML">
+  {% if transactions %}
+    {% for transaction in transactions %}
+      <c-transaction.item :transaction="transaction"></c-transaction.item>
+    {% endfor %}
+    {# Floating bar #}
+    <c-ui.transactions-action-bar></c-ui.transactions-action-bar>
+  {% else %}
+    <c-msg.empty
+        title="{% translate 'No recent transactions' %}"></c-msg.empty>
+  {% endif %}
+</div>

app/templates/insights/pages/index.html

@@ -72,7 +72,6 @@
               </div>
             </form>
           </div>
-          <hr class="mt-0">
           <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
                aria-orientation="vertical">
             <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
@@ -95,6 +94,19 @@
                     hx-indicator="#tab-content"
                     hx-target="#tab-content">{% trans 'Category Explorer' %}
             </button>
+            <hr>
+            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
+                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                    hx-get="{% url 'insights_late_transactions' %}"
+                    hx-indicator="#tab-content"
+                    hx-target="#tab-content">{% trans 'Late Transactions' %}
+            </button>
+            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
+                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                    hx-get="{% url 'insights_latest_transactions' %}"
+                    hx-indicator="#tab-content"
+                    hx-target="#tab-content">{% trans 'Latest Transactions' %}
+            </button>
           </div>
         </div>
       </div>