Visual improvement to dashboard template

expenses_manager/expenses/templates/expenses/dashboard.html

@@ -15,7 +15,7 @@
         <!-- Filters -->
         <!-- ========================= -->
         
-        <form method="get">
+        <form method="get" class="filters">
             <label>
                 Año:
                 <select name="year">
@@ -43,23 +43,98 @@
                 </select>
             </label>
 
-            <button type="submit">Filtrar</button>
+            <label>
+                <input type="checkbox" name="compare" value="1"
+                    {% if compare_enabled %}checked{% endif %}>
+                Comparar con periodo anterior
+            </label>
+
+            <button type="submit">Aplicar</button>
         </form>
 
-        <hr>
+        <p>
+            Mostrando:
+            <strong>{{ selected_year }}</strong>
+            {% if selected_month %}/<strong>{{ selected_month }}</strong>{% endif %}
+        </p>
+
+        <hr>        
+
+        <!-- ========================= -->
+        <!-- KPIs -->
+        <!-- ========================= -->
+
+        
+        <div class="kpis">            
+
+            <div class="kpi">
+                <h3>Total</h3>
+                <p>{{ kpi_total }}</p>
+            </div>
+
+            <div class="kpi">
+                <h3>Nº de gastos</h3>
+                <p>{{ kpi_count }}</p>
+            </div>
+
+            <div class="kpi">
+                <h3>Categorías</h3>
+                <p>{{ kpi_categories }}</p>
+            </div>
+        </div>
+
+        {% if compare_enabled %}
+            <section class="kpi compare">
+                <h3>Comparación con periodo anterior</h3>
+
+                <p>
+                    Total anterior: <strong>{{ kpi_previous_total|floatformat:2 }}</strong>
+                </p>
+                <p>
+                    Diferencia:
+                    {% if kpi_difference > 0 %}
+                        <span>▲</span>
+                    {% elif kpi_difference < 0 %}
+                        <span>▼</span>
+                    {% endif %} 
+                    <strong>{{ kpi_difference|floatformat:2 }}</strong>
+                </p>
+                <p>
+                    Variación:
+                    {% if kpi_percentage is not None %}
+                        {{ kpi_percentage|floatformat:2 }}%
+                    {% else %}
+                        Variación: N/D
+                    {% endif %}
+                </p>
+            </section>
+        {% endif %}
 
         <!-- ========================= -->
         <!-- Expenses by category -->
         <!-- ========================= -->
         <h2>Gastos por categoría</h2>
-
+        
-        <ul>
+        <table>
-            {% for row in by_category %}
+            <thead>
-                <li>{{ row.category__name }} → {{ row.total }}</li>
+                <tr>
-            {% empty %}
+                    <th>Categoría</th>
-                <li>No hay datos</li>
+                    <th>Total</th>
-            {% endfor %}
+                </tr>
-        </ul>
+            </thead>
+            <tbody>
+                {% for row in by_category %}
+                    <tr>
+                        <td>{{ row.category__name }}</td>
+                        <td>{{ row.total }}</td>
+                    </tr>
+                {% empty %}
+                    <tr>
+                        <td colspan="2">Sin datos</td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
         
         <hr>
 
@@ -70,23 +145,17 @@
         <h2>Gastos por mes</h2>
 
         <ul>
-            {% for row in by_months %}
+            {% for row in by_month %}
-                <li>Mes {{ row.mont }} → {{ row.total }}</li>
+                <li>Mes {{ row.month }} → {{ row.total }}</li>
             {% endfor %}
         </ul>
 
-        <hr>
-
         <!-- ========================= -->
         <!-- Chart -->
         <!-- ========================= -->
-
-        <label>
-            <input type="checkbox" name="compare" value="1"
-                {% if compare %}checked{% endif %}>
-            Comparar con periodo anterior
-        </label>
         
+        <h3>Distribución mensual (año completo)</h3>
+
         <canvas id="expensesChart"></canvas>
 
         <script>

expenses_manager/expenses/views.py

@@ -32,6 +32,10 @@ def _get_int(value):
     except (TypeError, ValueError):
         return None
 
+@login_required
+def home(request):
+    return render(request, 'expenses/home.html')
+
 @login_required
 def expense_list(request):
     expenses = Expense.objects.filter(owner=request.user)
@@ -117,7 +121,7 @@ def dashboard(request):
     selected_year = year or current_year
     selected_month = month    
         
-    compare = request.GET.get("compare") == "1"
+    compare_enabled = request.GET.get("compare") == "1"
     
     # ------------------
     # Queryset base
@@ -129,7 +133,7 @@ def dashboard(request):
     if selected_month:
         expenses_filtered = expenses_filtered.filter(date__month=selected_month)  
     
-    total_amount = expenses.aggregate(
+    total_amount = expenses_filtered.aggregate(
         total=Sum('amount')
     )['total'] or 0
     
@@ -200,49 +204,41 @@ def dashboard(request):
     # Compare period
     # -----------------
     
-    previous_expenses = expenses
+    previous_total = None
+    difference = None
+    percentage = None
     
-    if month and year:
+    if compare_enabled:
-        if month == 1:
+        previous_expenses = Expense.objects.filter(owner=request.user)
-            prev_year = year - 1
-            prev_month = 12
-        else:
-            prev_year = year
-            prev_month = month - 1
-        previous_expenses = previous_expenses.filter(
-            date__year=prev_year,
-            date__month=prev_month
-        )
-    elif year and month is None:
-        prev_year = year - 1
-        previous_expenses = previous_expenses.filter(
-            date__year=prev_year
-        )
-    else:
-        today = date.today()
-        year = today.year
-        month = today.month
         
-        if month == 1:
+        if selected_month:
-            prev_year = year - 1
+            # Monthly compare
-            prev_month = 12
+            if selected_month == 1:
+                prev_year = selected_year - 1
+                prev_month = 12
+            else:
+                prev_year = selected_year
+                prev_month = selected_month - 1
+            
+            previous_expenses = previous_expenses.filter(
+                date__year=prev_year,
+                date__month=prev_month
+            )
         else:
-            prev_year = year
+            # Anual compare
-            prev_month = month - 1
+            prev_year = selected_year - 1
+            previous_expenses = previous_expenses.filter(
+                date__year=prev_year
+            )
         
-        previous_expenses = previous_expenses.filter(
+        previous_total = (
-            date__year=prev_year,
+            previous_expenses.aggregate(total=Sum('amount'))['total'] or 0
-            date__month=prev_month
         )
-
+        
-    previous_total = (
+        difference = total_amount - previous_total
-        previous_expenses.aggregate(total=Sum('amount'))['total'] or 0
+        
-    )
+        if previous_total:
-    
+            percentage = (difference / previous_total) * 100
-    difference = total_amount - previous_total
-    precentage = (
-        (difference / previous_total) * 100 if previous_total else None
-    )
 
     
     # Send the data to the dashboard
@@ -258,4 +254,8 @@ def dashboard(request):
         'kpi_total': total_amount,
         'kpi_count': expense_count,
         'kpi_categories': category_count,
+        'compare_enabled': compare_enabled,
+        'kpi_previous_total': previous_total,
+        'kpi_difference': difference,
+        'kpi_percentage': percentage,
     })