From 835316d0f3a973fff18f8e762949877a6b128bb6 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Tue, 18 Feb 2025 20:46:06 -0300
Subject: [PATCH] feat(insights:category-explorer): separate current and
 projected totals

---
 app/apps/insights/utils/category_explorer.py  |  96 ++++++++--
 .../category_explorer/charts/account.html     | 169 ++++++++++--------
 .../category_explorer/charts/currency.html    | 162 +++++++++--------
 .../fragments/category_explorer/index.html    |   5 +-
 4 files changed, 262 insertions(+), 170 deletions(-)

diff --git a/app/apps/insights/utils/category_explorer.py b/app/apps/insights/utils/category_explorer.py
index 639750c..f7dc401 100644
--- a/app/apps/insights/utils/category_explorer.py
+++ b/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],
             },
         ],
     }
diff --git a/app/templates/insights/fragments/category_explorer/charts/account.html b/app/templates/insights/fragments/category_explorer/charts/account.html
index a3b91f3..5ed053a 100644
--- a/app/templates/insights/fragments/category_explorer/charts/account.html
+++ b/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 %}
diff --git a/app/templates/insights/fragments/category_explorer/charts/currency.html b/app/templates/insights/fragments/category_explorer/charts/currency.html
index 1622bb9..b3ab300 100644
--- a/app/templates/insights/fragments/category_explorer/charts/currency.html
+++ b/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 %}
diff --git a/app/templates/insights/fragments/category_explorer/index.html b/app/templates/insights/fragments/category_explorer/index.html
index c131a02..c0dd4df 100644
--- a/app/templates/insights/fragments/category_explorer/index.html
+++ b/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>