manjapro_v6/pages/laporan/dashboard_onu.php

<section class="content">
    <div class="container-fluid">
    <?php include '../../config/connect.php'; ?>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <style>
    body {
        background-color: #f4f6f9;
    }

    .filter-card {
        border-radius: 16px;
        border: none;
        box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    }

    .card-modern {
        border: none;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    }

    .card-header-modern {
        background: transparent;
        border-bottom: 1px solid #f1f1f1;
        font-weight: 600;
        font-size: 15px;
        padding: 16px;
    }

    .summary-box {
        border-radius: 18px;
        padding: 22px;
        color: #fff;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        transition: 0.3s;
    }

    .summary-box:hover {
        transform: translateY(-4px);
    }

    .bg-gradient-blue {
        background: linear-gradient(135deg, #3a7bd5, #00d2ff);
    }

    .bg-gradient-green {
        background: linear-gradient(135deg, #11998e, #38ef7d);
    }

    .bg-gradient-red {
        background: linear-gradient(135deg, #ff416c, #ff4b2b);
    }

    .summary-box h3 {
        font-weight: 700;
        font-size: 28px;
        margin: 0;
    }

    .summary-box p {
        margin: 0;
        font-size: 14px;
        opacity: 0.9;
    }

    select.form-control {
        border-radius: 10px;
    }
    </style>

    <div class="row mt-3">

        <!-- FILTER -->
        <div class="col-12">
            <div class="card filter-card">
                <div class="card-body">
                    <div class="row align-items-end">
                        
                        <div class="col-md-4">
                            <label>Server</label>
                            <select id="server" class="form-control">
                                <?php
                                $servers = $pdo->query("SELECT id, nama_server FROM data_server WHERE id IN ($SvId) ORDER BY id")->fetchAll();
                                foreach ($servers as $srv) {
                                    echo "<option value='{$srv['id']}'>Server {$srv['nama_server']}</option>";
                                }
                                ?>
                            </select>
                        </div>
                
                        <div class="col-md-4">
                            <label>Kategori</label>
                            <select id="kategori" class="form-control">
                                <option value="Wireless">Wireless</option>
                                <option value="Tipe">Tipe</option>
                                <option value="Brand">Brand</option>
                            </select>
                        </div>
                
                        <div class="col-md-4">
                            <label>Status</label>
                            <select id="status" class="form-control">
                                <option value="aktif">Aktif</option>
                                <option value="tidak aktif">Tidak Aktif</option>
                                <option value="Semua">Semua Status</option>
                            </select>
                        </div>
                
                    </div>
                </div>

            </div>
        </div>

        <!-- SUMMARY -->
        <div class="col-md-4">
            <div class="summary-box bg-gradient-blue">
                <h3 id="totalData">0</h3>
                <p>Total Data</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="summary-box bg-gradient-green">
                <h3 id="totalFilled">0</h3>
                <p>Terisi</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="summary-box bg-gradient-red">
                <h3 id="totalEmpty">0</h3>
                <p>Belum Diisi</p>
            </div>
        </div>

        <!-- PIE CHART -->
        <div class="col-md-4 mt-4">
            <div class="card card-modern">
                <div class="card-header card-header-modern">
                    Persentase Distribusi
                </div>
                <div class="card-body">
                    <canvas id="pieChart"></canvas>
                </div>
            </div>
        </div>

        <!-- BAR CHART -->
        <div class="col-md-8 mt-4">
            <div class="card card-modern">
                <div class="card-header card-header-modern">
                    Distribusi Detail
                </div>
                <div class="card-body">
                    <canvas id="barChart"></canvas>
                </div>
            </div>
        </div>

    </div>
    </div>
</section>

<script>
let pieChart = null;
let barChart = null;

function loadChart() {

    let server = $("#server").val();
    let kategori = $("#kategori").val();
    let status = $("#status").val();

    $.getJSON("controller/ajax_onu_chart.php", {
        server: server,
        kategori: kategori,
        status: status
    }, function(data) {

        if (data.error) {
            alert("Terjadi kesalahan: " + data.message);
            return;
        }

        $("#totalData").text(data.summary.total.toLocaleString());
        $("#totalFilled").text(data.summary.filled.toLocaleString());
        $("#totalEmpty").text(data.summary.empty.toLocaleString());

        let labels = data.labels;
        let values = data.values;

        // Modern color palette
        let palette = [
            "#6366f1",
            "#10b981",
            "#f59e0b",
            "#3b82f6",
            "#8b5cf6",
            "#14b8a6"
        ];

        let colors = labels.map((label, index) => {
            if (label === "BELUM DIISI") return "#ef4444";
            return palette[index % palette.length];
        });

        if (pieChart) pieChart.destroy();
        if (barChart) barChart.destroy();

        pieChart = new Chart(document.getElementById("pieChart"), {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: colors,
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                animation: {
                    duration: 800,
                    easing: 'easeOutQuart'
                },
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        barChart = new Chart(document.getElementById("barChart"), {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: colors,
                    borderRadius: 8
                }]
            },
            options: {
                responsive: true,
                animation: {
                    duration: 800,
                    easing: 'easeOutQuart'
                },
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

    });
}

// Auto reload saat filter berubah
$("#server, #kategori, #status").on("change", function() {
    loadChart();
});

// Load pertama kali
$(document).ready(function() {
    loadChart();
});
</script>