<footer class="main-footer">

    <strong>
        Sistem Perpustakaan
    </strong>

    &copy; 2026

    <div class="float-right d-none d-sm-inline-block">

        <b>Version</b> 1.0

    </div>

</footer>

</div>

<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- BOOTSTRAP -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- ADMIN LTE -->
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>

<!-- CHART JS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- DATATABLE -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>

<!-- BUTTON EXPORT -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.bootstrap4.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>

<!-- JSZIP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<script>

/* DATATABLE */
$(document).ready(function(){

    $('#example1').DataTable({

        responsive: true,

        autoWidth: false,

        dom: 'Bfrtip',

        buttons: [
            'excel',
            'print'
        ]

    });

});

/* GRAFIK DASHBOARD */
const chartElement = document.getElementById('chartTransaksi');

if(chartElement){

    const ctx = chartElement.getContext('2d');

    new Chart(ctx, {

        type: 'bar',

        data: {

            labels: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'Mei',
                'Jun',
                'Jul',
                'Agu',
                'Sep',
                'Okt',
                'Nov',
                'Des'
            ],

            datasets: [{

                label: 'Jumlah Peminjaman',

                data: [
                    5,
                    8,
                    12,
                    10,
                    15,
                    20,
                    18,
                    25,
                    16,
                    14,
                    21,
                    30
                ],

                borderWidth: 1

            }]

        },

        options: {

            responsive: true,

            maintainAspectRatio: false,

            plugins: {

                legend: {
                    display: true
                }

            },

            scales: {

                y: {
                    beginAtZero: true
                }

            }

        }

    });

}

</script>

</body>
</html>