Dashboard.html

{% extends 'base.html' %}

{% block content %}
<div class="container">
    <h2>Dashboard - Control Panel</h2>

    <div class="row">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5 class="card-title">Clientes</h5>
                    <h3>{{ total_clientes }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">Contratos</h5>
                    <h3>{{ total_contratos }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h5 class="card-title">Pagos</h5>
                    <h3>{{ total_pagos }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <h5 class="card-title">Total Ingresos</h5>
                    <h3>${{ total_ingresos }}</h3>
                </div>
            </div>
        </div>
    </div>

    <h3 class="mt-4">Ingresos por Mes</h3>
    <canvas id="graficoIngresos"></canvas>
    <p>Meses JSON: {{ meses_json }}</p>
    <p>Ingresos JSON: {{ ingresos_data_json }}</p>


    <pre>
        Total Clientes: {{ total_clientes }}
        Total Contratos: {{ total_contratos }}
        Total Pagos: {{ total_pagos }}
        Total Ingresos: {{ total_ingresos }}
        Meses JSON: {{ meses_json }}
        Ingresos JSON: {{ ingresos_json }}
    </pre>

</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const ctx = document.getElementById("graficoIngresos").getContext("2d");

        // ✅ Cargar datos desde Django con JSON.parse()
        try {
            const meses = JSON.parse('{{ meses_json|escapejs }}');
            const ingresosData = JSON.parse('{{ ingresos_data_json|escapejs }}');

            console.log("Meses JSON:", meses);
            console.log("Ingresos JSON:", ingresosData);

            new Chart(ctx, {
                type: "bar",
                data: {
                    labels: meses,
                    datasets: [{
                        label: "Ingresos",
                        data: ingresosData,
                        backgroundColor: "rgba(54, 162, 235, 0.6)",
                        borderColor: "rgba(54, 162, 235, 1)",
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        } catch (error) {
            console.error("❌ Error al procesar los datos del gráfico:", error);
        }
    });
</script>



{% endblock %}