manjapro_v6/pages/history_payment_gateway.php

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.2.1/css/dataTables.dataTables.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.2.1/js/dataTables.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<?php 
$sqlPG = "SELECT payment_gateway FROM data_server " . $SqlDataWH . "GROUP BY payment_gateway" ;
$stmt = $pdo->prepare($sqlPG);
$stmt->execute();
$paymentGateway = $stmt->fetch(PDO::FETCH_ASSOC);
?>

<section class="content" style="zoom: 85%;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">

          <div class="card-header">
            <div class="row">
              <div class="col-sm-6">
                <h4>Laporan Payment Gateway  <?= strtoupper($paymentGateway['payment_gateway']); ?><span id="tgl_filter"></span></h4>
              </div>

                <div class="col-sm-6 text-right">
                
                  <!-- DROPDOWN FILTER -->
                  <div class="dropdown d-inline">

                    <button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                      Filter Tanggal
                    </button>
                
                    <div class="dropdown-menu dropdown-menu-right p-3" style="min-width: 250px;">
                
                      <a class="dropdown-item filter-item" data-range="today">Hari Ini</a>
                      <a class="dropdown-item filter-item" data-range="yesterday">Kemarin</a>
                      <a class="dropdown-item filter-item" data-range="this_week">Minggu Ini</a>
                      <a class="dropdown-item filter-item" data-range="this_month">Bulan Ini</a>
                      <a class="dropdown-item filter-item" data-range="last_month">Bulan Lalu</a>
                
                      <div class="dropdown-divider"></div>
                
                      <!-- CUSTOM RANGE -->
                      <div class="px-2">
                        <label class="mb-1"><small>Custom Range</small></label>
                        <input type="date" id="start_date" class="form-control form-control-sm mb-1">
                        <input type="date" id="end_date" class="form-control form-control-sm mb-2">
                        <button id="apply_custom" class="btn btn-sm btn-success btn-block">Apply</button>
                      </div>
                
                    </div>
                    
                    <div class="d-inline-block ml-2">
                        <select class="form-control form-control-sm" id="filter_status">
                            <option value="ALL">ALL STATUS</option>
                            <option value="PAID">LUNAS</option>
                            <option value="PENDING">PENDING</option>
                            <option value="UNPAID">BELUM BAYAR</option>
                            <option value="EXPIRED">EXPIRED</option>
                        </select>
                    </div>
                  
                  </div>
                
                  <button id="reset" class="btn btn-sm btn-secondary">Reset</button>
                  <button id="export" class="btn btn-sm btn-success">Export Excel</button>
                
                </div>

            </div>
          </div>

          <div class="card-body">
                <div class="row mb-3">
                  <div class="col-md-4">
                    <div class="card bg-primary text-white">
                      <div class="card-body">
                        <h6>Total Pembayaran Lunas</h6>
                        <h4 id="sum_amount">Rp. 0</h4>
                      </div>
                    </div>
                  </div>
                
                  <div class="col-md-4">
                    <div class="card bg-warning text-white">
                      <div class="card-body">
                        <h6>Total Biaya Layanan Lunas</h6>
                        <h4 id="sum_fee">Rp. 0</h4>
                      </div>
                    </div>
                  </div>
                
                  <div class="col-md-4">
                    <div class="card bg-success text-white">
                      <div class="card-body">
                        <h6>Total Keterima Lunas</h6>
                        <h4 id="sum_nett">Rp. 0</h4>
                      </div>
                    </div>
                  </div>
                </div>
                
            <div class="table-responsive">
            <table id="tableLunas" class="table table-bordered table-striped" style="width:130%;">
              <thead>
                <tr class="bg-success">
                  <th>No</th>
                  <th>Nama Server</th>
                  <th>Nama - ID</th>
                  <th>Alamat</th>
                  <th>Keterangan</th>
                  <th>Paket Berlanggan</th>
                  <th>Trx ID</th>
                  <th>Channel</th>
                  <th>Jumlah Tagihan</th>
                  <th>Fee PG</th>
                  <th>Nett</th>
                  <th>Dibuat</th>
                  <th>Bayar</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.2.1/js/dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
const ENCRYPTION_KEY = CryptoJS.enc.Hex.parse('9a307dfcf16ac2e4406b1a59a31c1d096eafe37e40c60ddee4bb827b6a947079');

function encrypt_url_js(data) {
    const iv = CryptoJS.lib.WordArray.random(16);

    const encrypted = CryptoJS.AES.encrypt(data, ENCRYPTION_KEY, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });

    const ivHex = iv.toString(CryptoJS.enc.Hex);
    const encryptedBase64 = encrypted.ciphertext.toString(CryptoJS.enc.Base64);

    return btoa(ivHex + "::" + encryptedBase64);
}

// FORMAT YYYY-MM-DD
function formatDate(date) {
    let d = new Date(date),
        month = ('0' + (d.getMonth() + 1)).slice(-2),
        day = ('0' + d.getDate()).slice(-2),
        year = d.getFullYear();

    return `${year}-${month}-${day}`;
}

// FORMAT DD-MM-YYYY
function formatDisplay(date) {
    let d = new Date(date),
        day = ('0' + d.getDate()).slice(-2),
        month = ('0' + (d.getMonth() + 1)).slice(-2),
        year = d.getFullYear();

    return `${day}-${month}-${year}`;
}

// HEADER FILTER
function setTglFilter(start, end) {

    let status = $('#filter_status').val();

    if (start && end) {

        let s = formatDisplay(start);
        let e = formatDisplay(end);

        let statusText = '';

        if (status && status !== 'ALL') {
            statusText = ` | Status : ${status}`;
        }

        $('#tgl_filter').html(`
            <small class="text-muted">
                (${s} s/d ${e}${statusText})
            </small>
        `);

    } else {

        $('#tgl_filter').html('');

    }
}

// FORMAT RUPIAH
function formatRupiahPG(value) {

    if (value === null || value === undefined || value === '') {
        return 'Rp. 0';
    }

    let number = Number(value);

    if (isNaN(number)) {
        return 'Rp. 0';
    }

    number = Math.floor(number);

    return 'Rp. ' + number.toLocaleString('id-ID');
}

let table;

$(document).ready(function () {

    // DEFAULT HARI INI
    let today = new Date();
    let todayStr = formatDate(today);

    $('#start_date').val(todayStr);
    $('#end_date').val(todayStr);

    // DEFAULT STATUS = ALL
    $('#filter_status').val('ALL');

    setTglFilter(todayStr, todayStr);

    // DATATABLE
    table = $('#tableLunas').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        autoWidth: false,

        ajax: {
            url: "list_data/history_payment_gateway.php",
            type: "GET",

            data: function (d) {

                d.idsv = "<?php echo $SvId; ?>";
                d.idmsv = "<?php echo $MarketId; ?>";

                d.start_date = $('#start_date').val();
                d.end_date = $('#end_date').val();

                // FILTER STATUS
                d.status = $('#filter_status').val();
            },

            dataSrc: function (json) {

                console.log('SUMMARY:', json.summary);

                if (json.summary) {

                    $('#sum_amount').text(
                        formatRupiahPG(json.summary.total_amount)
                    );

                    $('#sum_fee').text(
                        formatRupiahPG(json.summary.total_fee)
                    );

                    $('#sum_nett').text(
                        formatRupiahPG(json.summary.total_nett)
                    );

                } else {

                    $('#sum_amount').text('Rp. 0');
                    $('#sum_fee').text('Rp. 0');
                    $('#sum_nett').text('Rp. 0');

                }

                return json.data;
            }
        },

        columns: [

            {
                data: 'id',
                render: (data, type, row, meta) => meta.row + 1
            },

            {
                data: 'nama_server',
                defaultContent: '-'
            },

            // NAMA + AKUN
            {
                data: null,
                render: function(data, type, row) {

                    return `
                        <div>
                            <div style="font-weight:600">
                                ${row.nama || '-'}
                            </div>
                            
                            <div style="font-size:16px;color:#666">
                                ${row.akun || '-'}
                            </div>

                            <div style="font-size:15px;color:#666">
                                <a href="https://wa.me/${row.nomor_whatsapp || '-'}" target="_blank">${row.nomor_whatsapp || '-'}</a>
                            </div>
                        </div>
                    `;
                }
            },

            {
                data: 'alamat',
                defaultContent: '-'
            },

            {
                data: 'keterangan',
                defaultContent: '-'
            },

            {
                data: 'nama_paket',
                defaultContent: '-'
            },

            {
                data: 'trx_id',
                defaultContent: '-'
            },

            {
                data: 'channel',
                defaultContent: '-'
            },

            {
                data: 'amount',
                render: data => formatRupiahPG(data)
            },

            {
                data: 'fee',
                render: data => formatRupiahPG(data)
            },

            {
                data: 'nett',
                render: data => formatRupiahPG(data)
            },

            {
                data: 'created_at',
                defaultContent: '-'
            },

            {
                data: 'paid_at',
                defaultContent: '-'
            },

            {
                data: 'status',
                render: function(data) {

                    if (data === 'PAID') {
                        return `<span class="badge badge-success">LUNAS</span>`;
                    }

                    if (data === 'PENDING') {
                        return `<span class="badge badge-warning">PENDING</span>`;
                    }

                    if (data === 'UNPAID') {
                        return `<span class="badge badge-danger">BELUM</span>`;
                    }

                    if (data === 'EXPIRED') {
                        return `<span class="badge badge-dark">EXPIRED</span>`;
                    }

                    return data || '-';
                }
            }
        ],

        order: [[0, 'desc']],

        columnDefs: [
            { targets: 0, width: "50px" },
            { targets: 1, width: "100px" },
            { targets: 2, width: "220px" },
            { targets: 3, width: "250px" },
            { targets: 4, width: "180px" },
            { targets: 5, width: "180px" },
            { targets: 6, width: "180px" },
            { targets: 7, width: "90px" },
            { targets: 8, width: "140px" },
            { targets: 9, width: "120px" },
            { targets: 10, width: "140px" },
            { targets: 11, width: "130px" },
            { targets: 12, width: "130px" },
            { targets: 13, width: "100px" }
        ],

        language: {
            infoFiltered: ""
        }
    });

    // FILTER STATUS
    $('#filter_status').change(function () {

        setTglFilter(
            $('#start_date').val(),
            $('#end_date').val()
        );

        table.ajax.reload();
    });

    // FILTER PRESET
    $('.filter-item').click(function () {

        let type = $(this).data('range');

        let today = new Date();

        let start = '';
        let end = '';

        if (type === 'today') {

            start = end = formatDate(today);

        } else if (type === 'yesterday') {

            let y = new Date();

            y.setDate(y.getDate() - 1);

            start = end = formatDate(y);

        } else if (type === 'this_week') {

            let now = new Date();

            let first = new Date(
                now.setDate(now.getDate() - now.getDay())
            );

            start = formatDate(first);
            end = formatDate(new Date());

        } else if (type === 'this_month') {

            let now = new Date();

            start = formatDate(
                new Date(now.getFullYear(), now.getMonth(), 1)
            );

            end = formatDate(new Date());

        } else if (type === 'last_month') {

            let now = new Date();

            start = formatDate(
                new Date(now.getFullYear(), now.getMonth() - 1, 1)
            );

            end = formatDate(
                new Date(now.getFullYear(), now.getMonth(), 0)
            );
        }

        $('#start_date').val(start);
        $('#end_date').val(end);

        setTglFilter(start, end);

        table.ajax.reload();
    });

    // CUSTOM RANGE
    $('#apply_custom').click(function () {

        let start = $('#start_date').val();
        let end = $('#end_date').val();

        if (!start || !end) {

            Swal.fire({
                icon: 'warning',
                title: 'Isi tanggal dulu!',
                text: 'Silakan pilih tanggal awal dan akhir.'
            });

            return;
        }

        setTglFilter(start, end);

        table.ajax.reload();
    });

    // RESET
    $('#reset').click(function () {

        let today = new Date();
        let todayStr = formatDate(today);

        // BALIK KE DEFAULT
        $('#start_date').val(todayStr);
        $('#end_date').val(todayStr);

        $('#filter_status').val('ALL');

        setTglFilter(todayStr, todayStr);

        table.ajax.reload();
    });

    // EXPORT
    $('#export').click(function () {

        let start = $('#start_date').val();
        let end = $('#end_date').val();
        let status = $('#filter_status').val();

        if (!start || !end) {

            Swal.fire({
                icon: 'warning',
                title: 'Pilih Rentang Tanggal',
                text: 'Silakan tentukan periode tanggal terlebih dahulu.'
            });

            return;
        }

        let startDate = new Date(start);
        let endDate = new Date(end);

        let diffMonths =
            (endDate.getFullYear() - startDate.getFullYear()) * 12 +
            (endDate.getMonth() - startDate.getMonth());

        if (diffMonths > 6) {

            Swal.fire({
                icon: 'warning',
                title: 'Rentang Terlalu Panjang',
                text: 'Maksimal export 6 bulan.'
            });

            return;
        }

        let url = `excel/export_history_payment_gateway.php?start_date=${start}&end_date=${end}&status=${status}&idsv=<?php echo $SvId; ?>&idmsv=<?php echo $MarketId; ?>`;

        Swal.fire({
            title: 'Export sedang diproses...',
            html: 'Mohon tunggu sebentar',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        let iframe = document.createElement('iframe');

        iframe.style.display = 'none';
        iframe.src = url;

        document.body.appendChild(iframe);

        setTimeout(() => {
            Swal.close();
        }, 3000);
    });

});
</script>