WD - Dev
603 lines
17 KiB
PHP
603 lines
17 KiB
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>
|