order_gizi/public/js/dashboard/index.js

const datatable = $("#datatableRekapDashboard")


$("#filterDashboard").on('click', function(){
    let startDate= $("#start_date").val();
    let endDate= $("#end_date").val();
    fetchData(startDate, endDate)
})


    fetchData()
    datatable.bootstrapTable({
        data: [],
        showColumns: true,
        showColumnsToggleAll: true,
        showRefresh: true,
        sortable: true,
        search: true,
        searchOnEnterKey: false,
        searchHighlight: true,
        pagination: true,
        serverSide:true,
        pageSize: 10,
        pageList: [10, 20, 30, 40, 50, 100, 200],
        cookie: true,
        cookieIdTable: "table_rma_ssc_id",
        icons: {
            refresh: "fas fa-sync-alt",   // atau ganti ke icon lain
            columns: "fas fa-th-large"
        },
        columns: [
            {
                title: "No.Order",
                field: 'no_order',
                sortable: true,
            },
            {
                title: "Cara Pembayaran",
                field: 'cara_pembayaran',
                sortable: true,
            },
            {
                title: "Status Pembayaran",
                field: 'status_order',
                sortable: true,
                formatter: function(value, row) {
                    const status = value;
                    let badgeClass = 'bg-secondary';
                    if (status === "Belum Bayar") {
                        badgeClass = 'bg-warning text-dark';
                    } else if (status === "Menunggu Konfirmasi Pembayaran") {
                        badgeClass = 'bg-primary';
                    } else if (status === "Lunas" || status === "Sudah Bayar") {
                        badgeClass = 'bg-success text-dark';
                    } else if(status === "Dibatalkan"){
                        badgeClass = 'bg-danger';
                    }
                   return `
                    <span class="badge ${badgeClass} px-3 py-1">${status}</span>
                    ${status === 'Dibatalkan' && row.note_dibatalkan ? `
                        <div class="text-danger small mt-1">
                            <i class="fa fa-info-circle"></i> ${row.note_dibatalkan}
                        </div>
                    ` : ''}
                `;
                }
            },
            {
                title: "Status Pesanan",
                formatter: function(value, row) {
                const progress = parseInt(row.progress) || 0;
                const total = row.total_detail || 0;
                const selesai = row.selesai_detail || 0;

                return `
                    <div class="text-center">
                        <div class="progress" style="height: 18px;">
                            <div class="progress-bar bg-success" role="progressbar"
                                style="width: ${progress}%;"
                                aria-valuenow="${progress}" aria-valuemin="0" aria-valuemax="100">
                                ${progress}%
                            </div>
                        </div>
                        <small class="text-muted">${selesai} / ${total} selesai</small>
                    </div>
                `;
            },
                sortable: true,
            },
            {
                title: "Pemesan",
                field:'nama_pemesan',
                sortable: true,
            },
            {
                title: "Tgl Pemesanan",
                field: 'entry_at',
                formatter: function(value, row) {
                        if (!row?.entry_at) return '-';

                        const date = new Date(row.entry_at);
                        return date.toLocaleString('id-ID', {
                            day: '2-digit',
                            month: 'short',   // Bisa diganti 'long' kalau mau 'Juli' bukan 'Jul'
                            year: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: false     // pakai format 24 jam
                        });
                    },
                sortable: true,
            },
            {
                title: "Kategori Customer",
                field: 'jenis_customer',
                sortable: true,
            },
            {
                title: "Total Harga Pesanan",
                field:'total_harga',
                formatter: function(value, row){
                    return 'Rp ' + parseInt(row.total_harga).toLocaleString('id-ID')
                }
            }

        ],
    });


function fetchData(startDate = null, endDate = null){
    const params =new URLSearchParams()
    if (startDate) params.append('start_date', startDate);
    if (endDate) params.append('end_date', endDate);
     fetch(`/dashboard/data${params.toString() ? '?' + params.toString() : ''}`)
     .then(res => res.json())
     .then(res=> {
        $("#confirm_filter_time").text(formatTanggalRange(startDate, endDate))
        if(startDate && endDate){
            $("#confirm_filter_name").text('Pesanan')
        }
        $("#pesanan_data").text(res?.data?.totalPesanan)
        $("#pesanan_lunas").text(res?.data?.pesananLunas)
        $("#pesanan_waiting").text(res?.data?.pesananPending)
        $("#pesanan_belum_diambil").text(res?.data?.pesananLunas - res?.data?.pesananSelesai)
        $("#pesanan_diambil").text(res?.data?.pesananSelesai)
        $("#nilai_transaksi_total").text(parseInt(res?.data?.totalPemasukan).toLocaleString('id-ID'))
        datatable.bootstrapTable('load', res.rows)
     })
     .catch(error => {
        console.error(error);
     })
}


function formatTanggalRange(start, end) {
    const options = { day: '2-digit', month: 'short', year: 'numeric' };

    if (!start && !end) {
        return `Data tanggal ${new Date().toLocaleDateString('id-ID', options)}`;
    }

    if (start && end && start === end) {
        return `Data tanggal ${new Date(start).toLocaleDateString('id-ID', options)}`;
    }

    if (start && end) {
        return `Data dari ${new Date(start).toLocaleDateString('id-ID', options)}
                sampai ${new Date(end).toLocaleDateString('id-ID', options)}`;
    }

    if (start && !end) {
        return `Data sejak ${new Date(start).toLocaleDateString('id-ID', options)}`;
    }

    if (!start && end) {
        return `Data hingga ${new Date(end).toLocaleDateString('id-ID', options)}`;
    }
}