You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
koperasi/public/cache/4014636905a7cf3afa8196896dd...

365 lines
16 KiB
PHP

<?php
use NN\Module\View;
use NN\Module\DB;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>KPRI WARPEKA GRESIK</title>
<link rel="stylesheet" type="text/css" href="<?php echo e(ASSET); ?>/assets/fonts/simple-line-icons/style.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.gg-printer {
background:
linear-gradient(to left,
currentColor 5px,transparent 0)
no-repeat 0 10px/6px 2px,
linear-gradient(to left,
currentColor 5px,transparent 0)
no-repeat 14px 10px/6px 2px,
linear-gradient(to left,
currentColor 5px,transparent 0)
no-repeat 4px 4px/2px 2px;
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs,1));
width: 24px;
height: 14px;
border: 2px solid transparent;
border-bottom: 0;
box-shadow:
inset 0 2px 0,
inset 2px 2px 0,
inset -2px 2px 0,
inset -2px 2px 0
}
.gg-printer::after,
.gg-printer::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 12px;
border: 2px solid;
left: 4px
}
.gg-printer::before {
height: 6px;
top: -4px
}
.gg-printer::after {
height: 8px;
top: 8px
}
*{
font-family: 'Roboto', sans-serif;
}
.print{
position: fixed;
display: inline-block;
right: 20px;
padding: 12px 10px;
box-shadow: 0 0 20px #ddd;
cursor: pointer;
color: white;
outline: none;
border: none;
border: none;
border-radius: 10px;
background: green;
bottom: 20px;
z-index: 999;
}
h1{
font-size:14px;
text-align:center;
}
h2{
font-size:14px;
text-align:center;
}
p{
font-size:14px;
text-align:center;
}
table{
width:100%;
border-collapse:collapse;
font-size:14px;
}
.text-center{
text-align:center;
}
.table thead{
box-shadow: inset 0 0 1000px orange;
}
.table th,.table td{
border: 1px solid #333333;
font-size: 12px;
padding: 3px;
}
@media print {
*{
font-family: 'Roboto', sans-serif;
}
@page {
size: A4 landscape;
}
.text-center{
text-align:center;
}
h1{
font-size:14px;
text-align:center;
}
h2{
font-size:14px;
text-align:center;
}
p{
font-size:14px;
text-align:center;
}
table{
width:100%;
border-collapse:collapse;
font-size:14px;
}
.table thead{
box-shadow: inset 0 0 1000px orange;
}
.table th,.table td{
border: 1px solid #333333;
padding: 3x;
font-size: 12px;
}
.print{
display:none;
}
*{
font-family: Aria;
}
}
</style>
<script src="<?php echo e(ASSET); ?>/db.js?v=2307"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="<?php echo e(ASSET); ?>/datatable/file.js"></script>
<?php echo View::sc('file.js'); ?>
</head>
<body class="A4 landscape">
<button class="print" onclick="window.print()"><i class="gg-printer"></i></button>
<script>
const paper = function(a){
var s = el('section').class("sheet padding-10mm");
s.child(
el('h1').html(a.kop)
);
s.child(
el('div').html(`
<table style="margin-bottom: 10px;">
<tbody>
<tr>
<td style="font-size:12px; text-align:center;" width="100px" rowspan="5"><img src="<?php echo e(ASSET); ?>/<?php echo e(LOGO); ?>" width="80px" /></td>
<td style="font-size:12px;" width="190px">KPRI WARPEKA GRESIK</td>
<td style="font-size:12px;" width="240px"></td>
<td style="font-size:12px;" width="140px">No</td>
<td style="font-size:12px;text-align:center;" width="10px">:</td>
<td style="font-size:12px;" data-user="no">-</td>
</tr>
<tr>
<td style="font-size:12px;" width="190px">JL. ARIF RAHMAN HAKIM NO.108 </td>
<td style="font-size:12px;" width="240px"></td>
<td style="font-size:12px;" width="140px">Nama</td>
<td style="font-size:12px;text-align:center;" width="10px">:</td>
<td style="font-size:12px;" data-user="nama">-</td>
</tr>
<tr>
<td style="font-size:12px;" width="190px">TELP. ( 031 ) 3973837</td>
<td style="font-size:12px;" width="240px"></td>
<td style="font-size:12px;" width="140px">Unit Kerja</td>
<td style="font-size:12px;text-align:center;" width="10px">:</td>
<td style="font-size:12px;" data-user="unitkerja">-</td>
</tr>
<tr>
<td style="font-size:12px;" width="190px">NO. HP / WA : 085 748 055 474</td>
<td style="font-size:12px;" width="240px"></td>
<td style="font-size:12px;" width="140px">Th Menjadi anggota</td>
<td style="font-size:12px;text-align:center;" width="10px">:</td>
<td style="font-size:12px;" data-user="th">-</td>
</tr>
<tr>
<td style="font-size:12px;" width="190px"></td>
<td style="font-size:12px;" width="240px"></td>
<td style="font-size:12px;" width="140px">No. Induk</td>
<td style="font-size:12px;text-align:center;" width="10px">:</td>
<td style="font-size:12px;" data-user="noinduk">-</td>
</tr>
</tbody>
</table>
<table class="table content">
<thead>
<tr>
<th class="text-center" width="80px" rowspan="2">BULAN</th>
<th class="text-center" colspan="5">SIMPANAN</th>
<th class="text-center" colspan="6">SISA PINJAMAN</th>
</tr>
<tr>
<td class="text-center">POKOK</td>
<td class="text-center">WAJIB</td>
<td class="text-center">MANASUKA</td>
<td class="text-center">W.PINJAM</td>
<td class="text-center">JUMLAH</td>
<td class="text-center">REGULER</td>
<td class="text-center">KHUSUS</td>
<td class="text-center">USP 1</td>
<td class="text-center">USP 2</td>
<td class="text-center">USP 3</td>
<td class="text-center">PIUTANG DAGANG TOKO</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
`).load(a.load)
);
document.body.appendChild(s.get());
return true;
};
paper({
kop: 'KARTU PERKIRAAN KEKAYAAN ANGGOTA TH. '+tanggal().normal.split('-')[0],
alamat: 'Jl. Arif Rakhman Hakim 108 Gresik Telp. 031 3973837',
title: 'KARTU PINJAMAN ANGGOTA',
load: function(e){
var bd = e.el.querySelector('table.content tbody');
var th = [
{id:'01',text:'Januari'}
,{id:'02',text:'Februari'}
,{id:'03',text:'Maret'}
,{id:'04',text:'April'}
,{id:'05',text:'Mei'}
,{id:'06',text:'Juni'}
,{id:'07',text:'Juli'}
,{id:'08',text:'Agustus'}
,{id:'09',text:'September'}
,{id:'10',text:'Oktober'}
,{id:'11',text:'November'}
,{id:'12',text:'Desember'}
];
bd.innerHTML = `
<tr style="box-shadow: inset 0 0 1000px #ddd;">
<td class="text-left" width="80px">Awal</td>
<td class="text-left" data-kode="00" data-name="lppokok"></td>
<td class="text-right" data-kode="00" data-name="lpwajib"></td>
<td class="text-right" data-kode="00" data-name="lpmanasuka"></td>
<td class="text-right" data-kode="00" data-name="lpwp"></td>
<td class="text-right" data-kode="00" data-name="lpjml1"></td>
<td class="text-right" data-kode="00" data-name="lpreguler"></td>
<td class="text-right" data-kode="00" data-name="lpkhusus"></td>
<td class="text-right" data-kode="00" data-name="lpusp1"></td>
<td class="text-right" data-kode="00" data-name="lpusp2"></td>
<td class="text-right" data-kode="00" data-name="lpusp3"></td>
<td class="text-right" data-kode="00" data-name="lpkonsumsi"></td>
</tr>
`+th.map(function(q){
return `
<tr>
<td class="text-left" width="80px">${q.text}</td>
<td class="text-left" data-kode="${q.id}" data-name="pokok"></td>
<td class="text-right" data-kode="${q.id}" data-name="wajib"></td>
<td class="text-right" data-kode="${q.id}" data-name="manasuka"></td>
<td class="text-right" data-kode="${q.id}" data-name="wp"></td>
<td class="text-right" data-kode="${q.id}" data-name="jml1"></td>
<td class="text-right" data-kode="${q.id}" data-name="reguler"></td>
<td class="text-right" data-kode="${q.id}" data-name="khusus"></td>
<td class="text-right" data-kode="${q.id}" data-name="usp1"></td>
<td class="text-right" data-kode="${q.id}" data-name="usp2"></td>
<td class="text-right" data-kode="${q.id}" data-name="usp3"></td>
<td class="text-right" data-kode="${q.id}" data-name="konsumsi"></td>
</tr>
<tr style="box-shadow: inset 0 0 1000px #ddd;">
<td class="text-left" width="80px">Jumlah</td>
<td class="text-left" data-kode="${q.id}" data-name="lppokok"></td>
<td class="text-right" data-kode="${q.id}" data-name="lpwajib"></td>
<td class="text-right" data-kode="${q.id}" data-name="lpmanasuka"></td>
<td class="text-right" data-kode="${q.id}" data-name="lpwp"></td>
<td class="text-right" data-kode="${q.id}" data-name="lpjml1"></td>
<td class="text-right" data-kode="${q.id}" data-name="lpreguler"></td>
<td class="text-right" data-kode="${q.id}" data-name="lpkhusus"></td>
<td class="text-right" data-kode="${q.id}" data-name="lpusp1"></td>
<td class="text-right" data-kode="${q.id}" data-name="lpusp2"></td>
<td class="text-right" data-kode="${q.id}" data-name="lpusp3"></td>
<td class="text-right" data-kode="${q.id}" data-name="lpkonsumsi"></td>
</tr>
`;
}).join('');
}
});
var linklap = '<?php echo e(PATH); ?>/api/kartukekayaan/anggota/<?php echo e($fkt); ?>';
var ld = cssLoader();
$.ajax({
url: linklap,
dataType: 'json',
method: 'post',
data: {
ok:1
},
success:function(res){
setTimeout(() => {
ld.remove();
console.log(res);
Array.from(document.querySelectorAll('[data-user]')).forEach(function(n){
if(n.dataset.user == 'no'){
n.innerHTML = res[n.dataset.user].pad(4);
}else{
n.innerHTML = res[n.dataset.user];
}
});
var gh = {};
res.data.forEach(function(w){
var th = w.th;
Object.keys(w).forEach(function(j){
if(j != 'th'){
var v = document.querySelector(`td[data-kode="${th}"][data-name="lp${j}"]`);
var vv = document.querySelector(`td[data-kode="${th}"][data-name="${j}"]`);
if(vv != undefined){
vv.style.textAlign = 'right';
}
if(v != undefined){
v.style.textAlign = 'right';
if(gh[j] == undefined){
gh[j] = w[j];
}else{
if(gh[j] < w[j]){
vv.innerHTML = (w[j] - gh[j]).rp().replace(/IDR/g,'Rp');
}else{
vv.innerHTML = (w[j] - gh[j]).rp().replace(/IDR/g,'Rp');
}
gh[j] = w[j];
}
v.innerHTML = w[j].rp().replace(/IDR/g,'Rp');
};
};
});
})
}, 500);
}, error: function(){
ld.remove();
}
});
</script>
</body>
</html><?php /**PATH /var/www/vhosts/warpekamart.com/httpdocs/usp/views/admin/laporan/kartukekayaan.blade.php ENDPATH**/ ?>