WD - Dev
294 lines
13 KiB
PHP
294 lines
13 KiB
PHP
<!-- Main content -->
|
|
<section class="content">
|
|
<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">
|
|
<h2 class="card-title">Laporan Kas</h2>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.card-header -->
|
|
<div class="card-body">
|
|
|
|
<style>
|
|
.table-responsive {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
@media (max-width: 767px) { /* Untuk smartphone */
|
|
.hide-on-mobile {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 1024px) { /* Untuk tablet */
|
|
.hide-on-tablet {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) { /* Untuk laptop */
|
|
.hide-on-laptop {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="mb-1">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="dropdown dropright">
|
|
<a href="#" id="export-button" class="btn btn-success btn-sm mr-2">
|
|
<i class="fas fa-file-excel mr-2"></i>Export
|
|
</a>
|
|
<!-- <button type="submit" class="btn btn-success btn-sm mr-2"><i class="fas fa-file-excel mr-2"></i>Export</button> -->
|
|
<!-- <button type="submit" class="btn btn-primary btn-sm mr-2"><i class="fas fa-file-excel mr-2"></i>Import</button> -->
|
|
<a class="btn btn-warning btn-sm dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
|
|
Filter
|
|
</a>
|
|
<div class="dropdown-menu" style="width: 250px;">
|
|
<div class="m-2">
|
|
<form id="filter-form">
|
|
<div class="form-group m-1">
|
|
<label><small>Dari</small></label>
|
|
<input type="date" class="form-control form-control-sm" id="start-date" name="start_date">
|
|
</div>
|
|
<div class="form-group">
|
|
<label><small>Sampai</small></label>
|
|
<input type="date" class="form-control form-control-sm" id="end-date" name="end_date">
|
|
</div>
|
|
<button type="button" class="btn btn-primary btn-sm mt-2" id="apply-filter">Terapkan</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<input type="text" id="search-input" placeholder="Cari..." class="form-control form-control-sm mb-2" style="width: 200px; float: right;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped" id="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Server</th>
|
|
<th>Time</th>
|
|
<th class="hide-on-mobile">Keterangan</th>
|
|
<th class="hide-on-mobile">Kas Masuk</th>
|
|
<th class="hide-on-mobile hide-on-tablet">Kas Keluar</th>
|
|
<th class="hide-on-mobile hide-on-tablet">Jenis Kas</th>
|
|
<th class="hide-on-mobile hide-on-tablet">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table-body">
|
|
<!-- Data akan dimuat di sini -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="loader" style="display:none;">Loading...</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="imageModalLabel">Bukti Pembayaran</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<img id="modalImg" src="" class="img-fluid" alt="Bukti Pembayaran" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script>
|
|
let offset = 0; // Offset untuk memuat data
|
|
const limit = 15; // Jumlah data per permintaan
|
|
let loading = false;
|
|
|
|
// Fungsi untuk memuat data
|
|
function loadMoreData(searchTerm = '', startDate = '', endDate = '', idS = <?php echo "'".$SvId."'"; ?>) {
|
|
if (loading) return; // Jangan panggil lagi jika sedang memuat
|
|
loading = true;
|
|
$('#loader').show();
|
|
|
|
// Buat cookieData sesuai format yang diinginkan
|
|
const urlData = `search=${encodeURIComponent(searchTerm)}&start_date=${encodeURIComponent(startDate)}&end_date=${encodeURIComponent(endDate)}&ids=${idS}`;
|
|
var link = document.getElementById('export-button');
|
|
link.href = "excel/export.php?" + urlData;
|
|
|
|
$.ajax({
|
|
url: 'list_data/load_table.php',
|
|
type: 'GET',
|
|
data: { offset: offset, search: searchTerm, start_date: startDate, end_date: endDate, ids: idS }, // Tambahkan parameter pencarian dan filter
|
|
success: function(response) {
|
|
const result = JSON.parse(response);
|
|
const data = result.data;
|
|
|
|
if (data.length > 0) {
|
|
data.forEach((server, index) => {
|
|
// Data yang akan ditampilkan
|
|
let truncatedData = {
|
|
nama_server: server.nama_server,
|
|
start_time: server.start_time,
|
|
keterangan: server.keterangan,
|
|
pemasukan: server.pemasukan,
|
|
pengeluaran: server.pengeluaran,
|
|
metode_pembayaran: server.metode_pembayaran,
|
|
status: server.status,
|
|
bukti_pembayaran: server.bukti_pembayaran,
|
|
nama: server.nama,
|
|
};
|
|
|
|
let row = `
|
|
<tr>
|
|
<td>
|
|
${offset + index + 1}
|
|
<br>
|
|
<button type="button" class="btn collapsed btn-sm m-0 p-0 hide-on-laptop" data-toggle="collapse" data-target="#collapse-row-${offset + index}" aria-expanded="false" onclick="toggleCollapse(this, '${offset + index}')">
|
|
<i class="fas fa-plus-circle text-primary"></i>
|
|
</button>
|
|
</td>
|
|
<td>${truncatedData.nama_server}</td>
|
|
<td>${truncatedData.start_time}</td>
|
|
<td class="hide-on-mobile">${truncatedData.keterangan} ${truncatedData.nama ? `(${truncatedData.nama})` : ''}</td>
|
|
<td class="hide-on-mobile">
|
|
${truncatedData.pemasukan ? 'Rp. ' + Number(truncatedData.pemasukan).toLocaleString() : ''}
|
|
${truncatedData.bukti_pembayaran ? `<img src="https://storage.manjapro.net/files/user/${truncatedData.bukti_pembayaran}" height="35px" class="thumbnail ml-3" data-toggle="modal" data-target="#imageModal" data-fullsize="https://storage.manjapro.net/files/user/${truncatedData.bukti_pembayaran}">` : ''}
|
|
</td>
|
|
<td class="hide-on-mobile hide-on-tablet">${truncatedData.pengeluaran ? 'Rp. ' + Number(truncatedData.pengeluaran).toLocaleString() : ''}</td>
|
|
<td class="hide-on-mobile hide-on-tablet">${truncatedData.metode_pembayaran}</td>
|
|
<td class="hide-on-mobile hide-on-tablet">${truncatedData.status}</td>
|
|
</tr>
|
|
<tr class="collapse hide-on-laptop" id="collapse-row-${offset + index}">
|
|
<td colspan="5" class="p-0">
|
|
<table class="table table-borderless" width="100%">
|
|
<tbody>
|
|
<tr class="hide-on-tablet hide-on-laptop">
|
|
<th>Keterangan</th>
|
|
<td>${truncatedData.keterangan} ${truncatedData.nama ? `(${truncatedData.nama})` : ''}</td>
|
|
</tr>
|
|
<tr class="hide-on-tablet hide-on-laptop">
|
|
<th>Kas Masuk</th>
|
|
<td>
|
|
${truncatedData.pemasukan ? 'Rp. ' + Number(truncatedData.pemasukan).toLocaleString() : ''}
|
|
${truncatedData.bukti_pembayaran ? `<img src="https://storage.manjapro.net/files/user/${truncatedData.bukti_pembayaran}" height="35px" class="thumbnail ml-3" data-toggle="modal" data-target="#imageModal" data-fullsize="https://storage.manjapro.net/files/user/${truncatedData.bukti_pembayaran}">` : ''}
|
|
</td>
|
|
</tr>
|
|
<tr class="hide-on-laptop">
|
|
<th>Kas Keluar</th>
|
|
<td>${truncatedData.pengeluaran ? 'Rp. ' + Number(truncatedData.pengeluaran).toLocaleString() : ''}</td>
|
|
</tr>
|
|
<tr class="hide-on-laptop">
|
|
<th>Jenis Kas</th>
|
|
<td>${truncatedData.metode_pembayaran}</td>
|
|
</tr>
|
|
<tr class="hide-on-laptop">
|
|
<th>Status</th>
|
|
<td>${truncatedData.status}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>`;
|
|
|
|
$('#table-body').append(row);
|
|
});
|
|
offset += data.length; // Update offset
|
|
}
|
|
$('#loader').hide();
|
|
loading = false; // Set loading ke false
|
|
},
|
|
error: function() {
|
|
$('#loader').hide();
|
|
loading = false;
|
|
alert('Error loading data');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Fungsi untuk toggle collapse dan mengubah ikon
|
|
function toggleCollapse(button, index) {
|
|
const $target = $(`#collapse-row-${index}`);
|
|
const isCollapsed = $target.hasClass('show');
|
|
|
|
// Toggle collapse
|
|
$target.collapse('toggle');
|
|
|
|
// Ubah ikon
|
|
if (isCollapsed) {
|
|
$(button).find('i').removeClass('fa-minus-circle text-danger').addClass('fa-plus-circle text-primary');
|
|
} else {
|
|
$(button).find('i').removeClass('fa-plus-circle text-primary').addClass('fa-minus-circle text-danger');
|
|
}
|
|
}
|
|
|
|
// Fungsi untuk menangani input pencarian
|
|
$('#search-input').on('input', function() {
|
|
const searchTerm = $(this).val();
|
|
offset = 0; // Reset offset saat pencarian
|
|
$('#table-body').empty(); // Kosongkan tabel
|
|
loadMoreData(searchTerm, $('#start-date').val(), $('#end-date').val()); // Muat data berdasarkan pencarian dan filter
|
|
});
|
|
|
|
// Fungsi untuk menerapkan filter berdasarkan tanggal
|
|
$('#apply-filter').on('click', function() {
|
|
const startDate = $('#start-date').val();
|
|
const endDate = $('#end-date').val();
|
|
offset = 0; // Reset offset saat filter diterapkan
|
|
$('#table-body').empty(); // Kosongkan tabel
|
|
loadMoreData($('#search-input').val(), startDate, endDate); // Muat data berdasarkan filter
|
|
});
|
|
|
|
// Panggil fungsi saat scroll
|
|
$(window).scroll(function() {
|
|
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
|
|
loadMoreData($('#search-input').val(), $('#start-date').val(), $('#end-date').val()); // Panggil dengan parameter pencarian dan filter
|
|
}
|
|
});
|
|
|
|
// Muat data pertama kali saat halaman dimuat
|
|
$(document).ready(function() {
|
|
loadMoreData();
|
|
});
|
|
|
|
// Gunakan event delegation untuk menangani gambar yang diklik
|
|
$(document).on('click', 'img.thumbnail', function(event) {
|
|
var fullsizeImage = $(this).data('fullsize'); // Ambil data gambar penuh dari atribut data-fullsize
|
|
var modalImg = $('#modalImg'); // Elemen gambar di dalam modal
|
|
|
|
// Set gambar besar ke modal
|
|
modalImg.attr('src', fullsizeImage);
|
|
|
|
// Tampilkan modal
|
|
$('#imageModal').modal('show');
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.col -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
</section>
|
|
<!-- /.content -->
|