From 182fb01d3c6300f6cbf68cbb1cbd8f83508064c6 Mon Sep 17 00:00:00 2001
From: JKuijperM <jkmontero17@gmail.com>
Date: Wed, 21 Jan 2026 15:34:02 +0100
Subject: [PATCH] Refactor in the dashboard template

---
 .../templates/expenses/dashboard.html         | 122 +++++++++++-------
 1 file changed, 75 insertions(+), 47 deletions(-)
diff --git a/expenses_manager/expenses/templates/expenses/dashboard.html b/expenses_manager/expenses/templates/expenses/dashboard.html
index d0b4cd0..1f6e38e 100644
--- a/expenses_manager/expenses/templates/expenses/dashboard.html
+++ b/expenses_manager/expenses/templates/expenses/dashboard.html
@@ -9,69 +9,97 @@
     <body>
         <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
-
         <h1>Dashboard</h1>
-        <h2>Gastos por categoría</h2>
-        <ul>
-            {% for row in by_category %}
-            <li>{{ row.category__name}} → {{row.total}}</li>
-            {% empty %}
-            <li>No hay datos</li>
-            {% endfor %}
-        </ul>
+
+        <!-- ========================= -->
+        <!-- Filters -->
+        <!-- ========================= -->
         
-        <ul>
-            <form method="get">
-                <label for="year">Año:</label>
-                <select name="year" id="year">
-                    <option value="">Todos</option>
+        <form method="get">
+            <label>
+                Año:
+                <select name="year">
                     {% for y in year_list %}
-                        <option value="{{ y.year }}"
-                            {% if selected_year == y.year|stringformat:"s" %}selected{% endif %}
+                        <option value="{{ y }}"
+                            {% if y == selected_year %}selected{% endif %}
                         >
-                            {{ y.year }}
+                            {{y}}
                         </option>
                     {% endfor %}
                 </select>
-            
-                <label for="month">Mes:</label>
-                <select name="month" id="month">
+            </label>
+
+            <label>
+                Mes:
+                <select name="month">
                     <option value="">Todos</option>
                     {% for m in months %}
                         <option value="{{ m }}"
-                            {% if selected_month == m|stringformat:"s" %}selected{% endif %}
+                        {% if m == selected_month %}selected{% endif %}
                         >
                             {{ m }}
                         </option>
                     {% endfor %}
                 </select>
-            
-                <button type="submit">Filtrar</button>
-            </form>
-        
-        
-            {% for row in by_month %}
-            <li>{{ row.month }} → {{ row.total }}</li>
+            </label>
+
+            <button type="submit">Filtrar</button>
+        </form>
+
+        <hr>
+
+        <!-- ========================= -->
+        <!-- Expenses by category -->
+        <!-- ========================= -->
+        <h2>Gastos por categoría</h2>
+
+        <ul>
+            {% for row in by_category %}
+                <li>{{ row.category__name }} → {{ row.total }}</li>
+            {% empty %}
+                <li>No hay datos</li>
             {% endfor %}
+        </ul>
+        
+        <hr>
 
-            <canvas id="expensesChart"></canvas>
-            <script>
-                const labels = {{ chart_labels|safe }};
-                const data = {{ chart_data|safe }};
-                
-                const ctx = document.getElementById('expensesChart');
+        <!-- ========================= -->
+        <!-- Expenses by month -->
+        <!-- ========================= -->
 
-                new Chart(ctx, {
-                    type: 'bar',
-                    data: {
-                        labels: labels,
-                        datasets:[{
-                            label: 'Gastos',
-                            data: data,
-                        }]
-                    }
-                });
-            </script>
-        </ul>                
-    </body>
+        <h2>Gastos por mes</h2>
+
+        <ul>
+            {% for row in by_months %}
+                <li>Mes {{ row.mont }} → {{ row.total }}</li>
+            {% endfor %}
+        </ul>
+
+        <hr>
+
+        <!-- ========================= -->
+        <!-- Chart -->
+        <!-- ========================= -->
+
+        <canvas id="expensesChart"></canvas>
+
+        <script>
+            const labels = {{ chart_labels|safe }};
+            const data = {{ chart_data|safe }};
+            
+            const ctx = document.getElementById('expensesChart');
+
+            new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets:[{
+                        label: 'Gastos',
+                        data: data,
+                    }]
+                }
+            });
+        </script>        
+    
+</body>
 </html>
\ No newline at end of file
