Merge branch 'main' into export

app/apps/insights/forms.py

@@ -9,6 +9,7 @@ from apps.common.widgets.datepicker import (
     AirDatePickerInput,
 )
 from apps.transactions.models import TransactionCategory
+from apps.common.widgets.tom_select import TomSelect
 
 
 class SingleMonthForm(forms.Form):
@@ -115,7 +116,9 @@ class CategoryForm(forms.Form):
     category = forms.ModelChoiceField(
         required=False,
         label=_("Category"),
+        empty_label=_("Uncategorized"),
         queryset=TransactionCategory.objects.filter(active=True),
+        widget=TomSelect(clear_button=True),
     )
 
     def __init__(self, *args, **kwargs):

app/apps/insights/utils/category_explorer.py

@@ -3,7 +3,7 @@ from django.db.models.functions import Coalesce
 from django.utils.translation import gettext_lazy as _
 
 
-def get_category_sums_by_account(queryset, category):
+def get_category_sums_by_account(queryset, category=None):
     """
     Returns income/expense sums per account for a specific category.
     """
@@ -11,10 +11,11 @@ def get_category_sums_by_account(queryset, category):
         queryset.filter(category=category)
         .values("account__name")
         .annotate(
-            income=Coalesce(
+            current_income=Coalesce(
                 Sum(
                     Case(
                         When(type="IN", then="amount"),
+                        When(is_paid=True, then="amount"),
                         default=Value(0),
                         output_field=DecimalField(max_digits=42, decimal_places=30),
                     )
@@ -22,10 +23,35 @@ def get_category_sums_by_account(queryset, category):
                 Value(0),
                 output_field=DecimalField(max_digits=42, decimal_places=30),
             ),
-            expense=Coalesce(
+            current_expense=Coalesce(
                 Sum(
                     Case(
                         When(type="EX", then=-F("amount")),
+                        When(is_paid=True, then="amount"),
+                        default=Value(0),
+                        output_field=DecimalField(max_digits=42, decimal_places=30),
+                    )
+                ),
+                Value(0),
+                output_field=DecimalField(max_digits=42, decimal_places=30),
+            ),
+            projected_income=Coalesce(
+                Sum(
+                    Case(
+                        When(type="IN", then="amount"),
+                        When(is_paid=False, then="amount"),
+                        default=Value(0),
+                        output_field=DecimalField(max_digits=42, decimal_places=30),
+                    )
+                ),
+                Value(0),
+                output_field=DecimalField(max_digits=42, decimal_places=30),
+            ),
+            projected_expense=Coalesce(
+                Sum(
+                    Case(
+                        When(type="EX", then=-F("amount")),
+                        When(is_paid=False, then="amount"),
                         default=Value(0),
                         output_field=DecimalField(max_digits=42, decimal_places=30),
                     )
@@ -41,18 +67,26 @@ def get_category_sums_by_account(queryset, category):
         "labels": [item["account__name"] for item in sums],
         "datasets": [
             {
-                "label": _("Income"),
-                "data": [float(item["income"]) for item in sums],
+                "label": _("Current Income"),
+                "data": [float(item["current_income"]) for item in sums],
             },
             {
-                "label": _("Expenses"),
-                "data": [float(item["expense"]) for item in sums],
+                "label": _("Current Expenses"),
+                "data": [float(item["current_expense"]) for item in sums],
+            },
+            {
+                "label": _("Projected Income"),
+                "data": [float(item["projected_income"]) for item in sums],
+            },
+            {
+                "label": _("Projected Expenses"),
+                "data": [float(item["projected_expense"]) for item in sums],
             },
         ],
     }
 
 
-def get_category_sums_by_currency(queryset, category):
+def get_category_sums_by_currency(queryset, category=None):
     """
     Returns income/expense sums per currency for a specific category.
     """
@@ -60,10 +94,11 @@ def get_category_sums_by_currency(queryset, category):
         queryset.filter(category=category)
         .values("account__currency__name")
         .annotate(
-            income=Coalesce(
+            current_income=Coalesce(
                 Sum(
                     Case(
                         When(type="IN", then="amount"),
+                        When(is_paid=True, then="amount"),
                         default=Value(0),
                         output_field=DecimalField(max_digits=42, decimal_places=30),
                     )
@@ -71,10 +106,35 @@ def get_category_sums_by_currency(queryset, category):
                 Value(0),
                 output_field=DecimalField(max_digits=42, decimal_places=30),
             ),
-            expense=Coalesce(
+            current_expense=Coalesce(
                 Sum(
                     Case(
                         When(type="EX", then=-F("amount")),
+                        When(is_paid=True, then="amount"),
+                        default=Value(0),
+                        output_field=DecimalField(max_digits=42, decimal_places=30),
+                    )
+                ),
+                Value(0),
+                output_field=DecimalField(max_digits=42, decimal_places=30),
+            ),
+            projected_income=Coalesce(
+                Sum(
+                    Case(
+                        When(type="IN", then="amount"),
+                        When(is_paid=False, then="amount"),
+                        default=Value(0),
+                        output_field=DecimalField(max_digits=42, decimal_places=30),
+                    )
+                ),
+                Value(0),
+                output_field=DecimalField(max_digits=42, decimal_places=30),
+            ),
+            projected_expense=Coalesce(
+                Sum(
+                    Case(
+                        When(type="EX", then=-F("amount")),
+                        When(is_paid=False, then="amount"),
                         default=Value(0),
                         output_field=DecimalField(max_digits=42, decimal_places=30),
                     )
@@ -90,12 +150,20 @@ def get_category_sums_by_currency(queryset, category):
         "labels": [item["account__currency__name"] for item in sums],
         "datasets": [
             {
-                "label": _("Income"),
-                "data": [float(item["income"]) for item in sums],
+                "label": _("Current Income"),
+                "data": [float(item["current_income"]) for item in sums],
             },
             {
-                "label": _("Expenses"),
-                "data": [float(item["expense"]) for item in sums],
+                "label": _("Current Expenses"),
+                "data": [float(item["current_expense"]) for item in sums],
+            },
+            {
+                "label": _("Projected Income"),
+                "data": [float(item["projected_income"]) for item in sums],
+            },
+            {
+                "label": _("Projected Expenses"),
+                "data": [float(item["projected_expense"]) for item in sums],
             },
         ],
     }

app/apps/insights/views.py

@@ -126,7 +126,7 @@ def category_sum_by_account(request):
         # Generate data
         account_data = get_category_sums_by_account(transactions, category)
     else:
-        account_data = None
+        account_data = get_category_sums_by_account(transactions, category=None)
 
     return render(
         request,
@@ -150,7 +150,7 @@ def category_sum_by_currency(request):
         # Generate data
         currency_data = get_category_sums_by_currency(transactions, category)
     else:
-        currency_data = None
+        currency_data = get_category_sums_by_currency(transactions, category=None)
 
     return render(
         request,

app/templates/cotton/transaction/item.html

@@ -1,7 +1,7 @@
 {% load markdown %}
 {% load i18n %}
-<div class="transaction">
-  <div class="d-flex my-1 {% if transaction.type == "EX" %}expense{% else %}income{% endif %}">
+<div class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %}">
+  <div class="d-flex my-1">
     {% if not disable_selection %}
       <label class="px-3 d-flex align-items-center justify-content-center">
         <input class="form-check-input" type="checkbox" name="transactions" value="{{ transaction.id }}"

app/templates/cotton/ui/transactions_action_bar.html

@@ -27,7 +27,7 @@
           <ul class="dropdown-menu">
             <li>
               <div class="dropdown-item px-3 tw-cursor-pointer"
-                   _="on click set <#transactions-list input[type='checkbox']/>'s checked to true then call me.blur() then trigger change">
+                   _="on click set <#transactions-list .transaction:not([style*='display: none']) input[type='checkbox']/>'s checked to true then call me.blur() then trigger change">
                 <i class="fa-regular fa-square-check tw-text-green-400 me-3"></i>{% translate 'Select All' %}
               </div>
             </li>

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

@@ -1,83 +1,100 @@
 {% load i18n %}
 {% if account_data.labels %}
-<div class="chart-container" style="position: relative; height:400px; width:100%" _="init call setupAccountChart() end">
-  <canvas id="accountChart"></canvas>
-</div>
+  <div class="chart-container" style="position: relative; height:400px; width:100%"
+       _="init call setupAccountChart() end">
+    <canvas id="accountChart"></canvas>
+  </div>
 
-<script>
-    // Get the data from your Django view (passed as JSON)
-    var accountData = {{ account_data|safe }};
+  <script>
+      // Get the data from your Django view (passed as JSON)
+      var accountData = {{ account_data|safe }};
 
-    function setupAccountChart() {
-        var chartOptions = {
-            indexAxis: 'y',  // This makes the chart horizontal
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-                x: {
-                    stacked: true,  // Enable stacking on the x-axis
-                    title: {
-                        display: false,
-                    },
-                },
-                y: {
-                    stacked: true,  // Enable stacking on the y-axis
-                    title: {
-                        display: false,
-                    },
-                }
-            },
-            plugins: {
-                legend: {
-                    display: false,
-                },
-                tooltip: {
-                    callbacks: {
-                        label: function (context) {
-                            if (context.parsed.x !== null) {
-                                return new Intl.NumberFormat(undefined).format(Math.abs(context.parsed.x)); // Using abs for display
-                            }
-                            return "";
-                        },
-                    }
-                }
-            }
-        };
+      function setupAccountChart() {
+          var chartOptions = {
+              indexAxis: 'y',  // This makes the chart horizontal
+              responsive: true,
+              maintainAspectRatio: false,
+              scales: {
+                  x: {
+                      stacked: true,  // Enable stacking on the x-axis
+                      title: {
+                          display: false,
+                      },
+                  },
+                  y: {
+                      stacked: true,  // Enable stacking on the y-axis
+                      title: {
+                          display: false,
+                      },
+                  }
+              },
+              plugins: {
+                  legend: {
+                      display: false,
+                  },
+                  tooltip: {
+                      callbacks: {
+                          label: function (context) {
+                              if (context.parsed.x !== null) {
+                                  return `${context.dataset.label}: ${new Intl.NumberFormat(undefined, {
+                                      minimumFractionDigits: 0,
+                                      maximumFractionDigits: 30,
+                                      roundingMode: 'trunc'
+                                  }).format(Math.abs(context.parsed.x))}`;
+                              }
+                              return "";
+                          },
+                      }
+                  }
+              }
+          };
 
-        new Chart(
-            document.getElementById('accountChart'),
-            {
-                type: 'bar',
-                data: {
-                    labels: accountData.labels,
-                    datasets: [
-                        {
-                            label: "{% trans 'Income' %}",
-                            data: accountData.datasets[0].data,
-                            backgroundColor: '#4dde80',
-                            stack: 'stack0'
-                        },
-                        {
-                            label: "{% trans 'Expenses' %}",
-                            data: accountData.datasets[1].data,
-                            backgroundColor: '#f87171',
-                            stack: 'stack0'
-                        }
-                    ]
-                },
-                options: {
-                    ...chartOptions,
-                    plugins: {
-                        ...chartOptions.plugins,
-                        title: {
-                            display: false,
-                        }
-                    }
-                }
-            }
-        );
-    }
-</script>
+          new Chart(
+              document.getElementById('accountChart'),
+              {
+                  type: 'bar',
+                  data: {
+                      labels: accountData.labels,
+                      datasets: [
+                          {
+                              label: "{% trans 'Current Income' %}",
+                              data: accountData.datasets[0].data,
+                              backgroundColor: '#4dde80',
+                              stack: 'stack0'
+                          },
+                          {
+                              label: "{% trans 'Current Expenses' %}",
+                              data: accountData.datasets[1].data,
+                              backgroundColor: '#f87171',
+                              stack: 'stack0'
+                          },
+                          {
+                              label: "{% trans 'Projected Income' %}",
+                              data: accountData.datasets[2].data,
+                              backgroundColor: '#4dde8080', // Added transparency
+                              stack: 'stack0'
+                          },
+                          {
+                              label: "{% trans 'Projected Expenses' %}",
+                              data: accountData.datasets[3].data,
+                              backgroundColor: '#f8717180', // Added transparency
+                              stack: 'stack0'
+                          }
+                      ]
+                  },
+                  options: {
+                      ...chartOptions,
+                      plugins: {
+                          ...chartOptions.plugins,
+                          title: {
+                              display: false,
+                          }
+                      }
+                  }
+              }
+          );
+      }
+  </script>
 {% else %}
-<c-msg.empty title="{% translate "No information to display" %}"></c-msg.empty>
+  <c-msg.empty title="{% translate "No information to display" %}"></c-msg.empty>
 {% endif %}

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

@@ -1,84 +1,92 @@
 {% load i18n %}
 {% if currency_data.labels %}
-<div class="chart-container" style="position: relative; height:400px; width:100%"
-     _="init call setupCurrencyChart() end">
-  <canvas id="currencyChart"></canvas>
-</div>
+  <div class="chart-container" style="position: relative; height:400px; width:100%"
+       _="init call setupCurrencyChart() end">
+    <canvas id="currencyChart"></canvas>
+  </div>
 
-<script>
-    // Get the data from your Django view (passed as JSON)
-    var currencyData = {{ currency_data|safe }};
+  <script>
+      // Get the data from your Django view (passed as JSON)
+      var currencyData = {{ currency_data|safe }};
 
-    function setupCurrencyChart() {
-        var chartOptions = {
-            indexAxis: 'y',  // This makes the chart horizontal
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-                x: {
-                    stacked: true,  // Enable stacking on the x-axis
-                    title: {
-                        display: false,
-                    },
-                },
-                y: {
-                    stacked: true,  // Enable stacking on the y-axis
-                    title: {
-                        display: false,
-                    },
-                }
-            },
-            plugins: {
-                legend: {
-                    display: false,
-                },
-                tooltip: {
-                    callbacks: {
-                        label: function (context) {
-                            if (context.parsed.x !== null) {
-                                return new Intl.NumberFormat(undefined).format(Math.abs(context.parsed.x)); // Using abs for display
-                            }
-                            return "";
-                        },
-                    }
-                }
-            }
-        };
+      function setupCurrencyChart() {
+          var chartOptions = {
+              indexAxis: 'y',
+              responsive: true,
+              maintainAspectRatio: false,
+              scales: {
+                  x: {
+                      stacked: true,
+                      title: {
+                          display: false,
+                      },
+                  },
+                  y: {
+                      stacked: true,
+                      title: {
+                          display: false,
+                      },
+                  }
+              },
+              plugins: {
+                  legend: {
+                      display: false,
+                  },
+                  tooltip: {
+                      callbacks: {
+                          label: function (context) {
+                              if (context.parsed.x !== null) {
+                                  return `${context.dataset.label}: ${new Intl.NumberFormat(undefined, {
+                                      minimumFractionDigits: 0,
+                                      maximumFractionDigits: 30,
+                                      roundingMode: 'trunc'
+                                  }).format(Math.abs(context.parsed.x))}`;
+                              }
+                              return "";
+                          },
+                      }
+                  }
+              }
+          };
 
-        new Chart(
-            document.getElementById('currencyChart'),
-            {
-                type: 'bar',
-                data: {
-                    labels: currencyData.labels,
-                    datasets: [
-                        {
-                            label: "{% trans 'Income' %}",
-                            data: currencyData.datasets[0].data,
-                            backgroundColor: '#4dde80',
-                            stack: 'stack0'
-                        },
-                        {
-                            label: "{% trans 'Expenses' %}",
-                            data: currencyData.datasets[1].data,
-                            backgroundColor: '#f87171',
-                            stack: 'stack0'
-                        }
-                    ]
-                },
-                options: {
-                    ...chartOptions,
-                    plugins: {
-                        ...chartOptions.plugins,
-                        title: {
-                            display: false,
-                        }
-                    }
-                }
-            }
-        );
-    }
-</script>
+          new Chart(
+              document.getElementById('currencyChart'),
+              {
+                  type: 'bar',
+                  data: {
+                      labels: currencyData.labels,
+                      datasets: [
+                          {
+                              label: "{% trans 'Current Income' %}",
+                              data: currencyData.datasets[0].data,
+                              backgroundColor: '#4dde80',
+                              stack: 'stack0'
+                          },
+                          {
+                              label: "{% trans 'Current Expenses' %}",
+                              data: currencyData.datasets[1].data,
+                              backgroundColor: '#f87171',
+                              stack: 'stack0'
+                          },
+                          {
+                              label: "{% trans 'Projected Income' %}",
+                              data: currencyData.datasets[2].data,
+                              backgroundColor: '#4dde8080', // Added transparency
+                              stack: 'stack0'
+                          },
+                          {
+                              label: "{% trans 'Projected Expenses' %}",
+                              data: currencyData.datasets[3].data,
+                              backgroundColor: '#f8717180', // Added transparency
+                              stack: 'stack0'
+                          }
+                      ]
+                  },
+                  options: chartOptions
+              }
+          );
+      }
+  </script>
 {% else %}
-<c-msg.empty title="{% translate "No information to display" %}"></c-msg.empty>
+  <c-msg.empty title="{% translate "No information to display" %}"></c-msg.empty>
 {% endif %}

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

@@ -2,7 +2,8 @@
 {% load crispy_forms_tags %}
 
 <form _="install init_tom_select
-         on change trigger updated" id="category-form">
+         on change trigger updated
+         init trigger updated" id="category-form">
   {% crispy category_form %}
 </form>
 
@@ -15,7 +16,6 @@
       <div class="card-body">
         <div id="account-card" class="show-loading" hx-get="{% url 'category_sum_by_account' %}"
              hx-trigger="updated from:window" hx-include="#category-form, #picker-form, #picker-type">
-          <c-msg.empty title="{% translate "No information to display" %}"></c-msg.empty>
         </div>
       </div>
     </div>
@@ -28,7 +28,6 @@
       <div class="card-body">
         <div id="currency-card" class="show-loading" hx-get="{% url 'category_sum_by_currency' %}"
              hx-trigger="updated from:window" hx-include="#category-form, #picker-form, #picker-type">
-          <c-msg.empty title="{% translate "No information to display" %}"></c-msg.empty>
         </div>
       </div>
     </div>

app/templates/insights/pages/index.html

@@ -4,11 +4,12 @@
 
 {% block content %}
   <div class="container-fluid">
-    <div class="row my-3">
+    <div class="row my-3 h-100">
       <div class="col-lg-2 col-md-3 mb-3 mb-md-0">
-        <div class="">
-          <div class="mb-2 w-100 d-lg-inline-flex d-grid gap-2 flex-wrap justify-content-lg-center" role="group"
-               _="on change
+        <div class="position-sticky tw-top-3">
+          <div class="">
+            <div class="mb-2 w-100 d-lg-inline-flex d-grid gap-2 flex-wrap justify-content-lg-center" role="group"
+                 _="on change
                     set type to event.target.value
                     add .tw-hidden to <#picker-form > div:not(.tw-hidden)/>
 
@@ -28,65 +29,73 @@
                       remove .tw-hidden from #date-range-form
                     end
                     then trigger updated"
-               id="picker-type">
-            <input type="radio" class="btn-check" name="type" value="month" id="monthradio" autocomplete="off" checked>
-            <label class="btn btn-sm btn-outline-primary flex-grow-1" for="monthradio">{% translate 'Month' %}</label>
+                 id="picker-type">
+              <input type="radio" class="btn-check" name="type" value="month" id="monthradio" autocomplete="off"
+                     checked>
+              <label class="btn btn-sm btn-outline-primary flex-grow-1" for="monthradio">{% translate 'Month' %}</label>
 
-            <input type="radio" class="btn-check" name="type" value="year" id="yearradio" autocomplete="off">
-            <label class="btn btn-sm btn-outline-primary flex-grow-1" for="yearradio">{% translate 'Year' %}</label>
+              <input type="radio" class="btn-check" name="type" value="year" id="yearradio" autocomplete="off">
+              <label class="btn btn-sm btn-outline-primary flex-grow-1" for="yearradio">{% translate 'Year' %}</label>
 
-            <input type="radio" class="btn-check" name="type" value="month-range" id="monthrangeradio" autocomplete="off">
-            <label class="btn btn-sm btn-outline-primary flex-grow-1" for="monthrangeradio">{% translate 'Month Range' %}</label>
+              <input type="radio" class="btn-check" name="type" value="month-range" id="monthrangeradio"
+                     autocomplete="off">
+              <label class="btn btn-sm btn-outline-primary flex-grow-1"
+                     for="monthrangeradio">{% translate 'Month Range' %}</label>
 
-            <input type="radio" class="btn-check" name="type" value="year-range" id="yearrangeradio" autocomplete="off">
-            <label class="btn btn-sm btn-outline-primary flex-grow-1" for="yearrangeradio">{% translate 'Year Range' %}</label>
+              <input type="radio" class="btn-check" name="type" value="year-range" id="yearrangeradio"
+                     autocomplete="off">
+              <label class="btn btn-sm btn-outline-primary flex-grow-1"
+                     for="yearrangeradio">{% translate 'Year Range' %}</label>
 
-            <input type="radio" class="btn-check" name="type" value="date-range" id="daterangeradio" autocomplete="off">
-            <label class="btn btn-sm btn-outline-primary flex-grow-1" for="daterangeradio">{% translate 'Date Range' %}</label>
-          </div>
-          <form id="picker-form"
-               _="install init_datepicker
+              <input type="radio" class="btn-check" name="type" value="date-range" id="daterangeradio"
+                     autocomplete="off">
+              <label class="btn btn-sm btn-outline-primary flex-grow-1"
+                     for="daterangeradio">{% translate 'Date Range' %}</label>
+            </div>
+            <form id="picker-form"
+                  _="install init_datepicker
                   on change trigger updated">
-            <div id="month-form" class="">
-              {% crispy month_form %}
-            </div>
-            <div id="year-form" class="tw-hidden">
-              {% crispy year_form %}
-            </div>
-            <div id="month-range-form" class="tw-hidden">
-              {% crispy month_range_form %}
-            </div>
-            <div id="year-range-form" class="tw-hidden">
-              {% crispy year_range_form %}
-            </div>
-            <div id="date-range-form" class="tw-hidden">
-              {% crispy date_range_form %}
-            </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"
-                  type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
-                  hx-get="{% url 'insights_sankey_by_account' %}" hx-include="#picker-form, #picker-type"
-                  hx-indicator="#tab-content"
-                  hx-target="#tab-content">{% trans 'Account Flow' %}
-          </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_sankey_by_currency' %}"
-                  hx-include="#picker-form, #picker-type"
-                  hx-indicator="#tab-content"
-                  hx-target="#tab-content">{% trans 'Currency Flow' %}
-          </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 'category_explorer_index' %}"
-                  hx-include="#picker-form, #picker-type"
-                  hx-indicator="#tab-content"
-                  hx-target="#tab-content">{% trans 'Category Explorer' %}
-          </button>
+              <div id="month-form" class="">
+                {% crispy month_form %}
+              </div>
+              <div id="year-form" class="tw-hidden">
+                {% crispy year_form %}
+              </div>
+              <div id="month-range-form" class="tw-hidden">
+                {% crispy month_range_form %}
+              </div>
+              <div id="year-range-form" class="tw-hidden">
+                {% crispy year_range_form %}
+              </div>
+              <div id="date-range-form" class="tw-hidden">
+                {% crispy date_range_form %}
+              </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"
+                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                    hx-get="{% url 'insights_sankey_by_account' %}" hx-include="#picker-form, #picker-type"
+                    hx-indicator="#tab-content"
+                    hx-target="#tab-content">{% trans 'Account Flow' %}
+            </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_sankey_by_currency' %}"
+                    hx-include="#picker-form, #picker-type"
+                    hx-indicator="#tab-content"
+                    hx-target="#tab-content">{% trans 'Currency Flow' %}
+            </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 'category_explorer_index' %}"
+                    hx-include="#picker-form, #picker-type"
+                    hx-indicator="#tab-content"
+                    hx-target="#tab-content">{% trans 'Category Explorer' %}
+            </button>
+          </div>
         </div>
       </div>
       <div class="col-md-9 col-lg-10">