hafifierahman
744 lines
26 KiB
PHP
744 lines
26 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="col-12 container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb pb-3">
|
|
<li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Bajet</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="card-body text-center">
|
|
|
|
|
|
<div class="row justify-content-center">
|
|
|
|
<div id="divpembharian" class="card bg-light mb-3 col-4">
|
|
<div class="card-header font-weight-bold">Pembiayaan</div>
|
|
<div class="card-body">
|
|
<div class="progress mb-2">
|
|
<div id="pembprogress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<span class="col-5 font-weight-bold">HARIAN</span>
|
|
<span class="col-1">:</span>
|
|
<span id="pembharian" class="col-5"></span>
|
|
</div>
|
|
<div>
|
|
<span id="pembpercent">-100%</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<span class="col-5 font-weight-bold">BAJET</span>
|
|
<span class="col-1">:</span>
|
|
<span id="pembbajet" class="col-5"></span>
|
|
</div>
|
|
<span>varians</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-light mb-3 col-4">
|
|
<div class="card-header font-weight-bold">Penebusan</div>
|
|
<div class="card-body">
|
|
<div class="progress mb-2">
|
|
<div id="penbprogress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<span class="col-5 font-weight-bold text-left">HARIAN</span>
|
|
<span class="col-1">:</span>
|
|
<span id="penbharian" class="col-5"></span>
|
|
</div>
|
|
<div>
|
|
<span id="penbpercent">0%</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<span class="col-5 font-weight-bold">BAJET</span>
|
|
<span class="col-1">:</span>
|
|
<span id="penbbajet" class="col-5"></span>
|
|
</div>
|
|
<span>varians</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-light mb-3 col-4">
|
|
<div class="card-header font-weight-bold">Keuntungan</div>
|
|
<div class="card-body">
|
|
<div class="progress mb-2">
|
|
<div id="keunprogress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<span class="col-5 font-weight-bold">HARIAN</span>
|
|
<span class="col-1">:</span>
|
|
<span id="keunharian" class="col-5"></span>
|
|
</div>
|
|
<div>
|
|
<span id="keunpercent">0%</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<span class="col-5 font-weight-bold">BAJET</span>
|
|
<span class="col-1">:</span>
|
|
<span id="keunbajet" class="col-5"></span>
|
|
</div>
|
|
<span>varians</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mt-3">
|
|
<div class="row justify-content-center">
|
|
<div class="card bg-light mb-3 col-4">
|
|
<span class="font-weight-bold mt-2 mb-2">Pembiayaan Bulanan</span>
|
|
<div class="card-body">
|
|
<div id="chartpembiayaan">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-light mb-3 col-4">
|
|
<span class="font-weight-bold mt-2 mb-2">Penebusan Bulanan</span>
|
|
<div class="card-body">
|
|
<div id="chartpenebusan">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-light mb-3 col-4">
|
|
<span class="font-weight-bold mt-2 mb-2">Keuntungan Bulanan</span>
|
|
<div class="card-body">
|
|
<div id="chartkeuntungan">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mt-3 row">
|
|
|
|
<div class="card bg-light mb-3 col-4">
|
|
<div class="card-header font-weight-bold">Pembiayaan Terkumpul</div>
|
|
<div class="card-body">
|
|
<div class="row justify-content-center">
|
|
<div class="card text-white bg-info mb-3 col-5 mr-2 pt-4 pb-4">
|
|
ACTUAL : <span id="pembactualtahunan"></span>
|
|
</div>
|
|
|
|
<div class="card text-white bg-info mb-3 col-5 p-4">
|
|
BAJET : <span id="pembbajettahunan"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-light mb-3 col-4">
|
|
<div class="card-header font-weight-bold">Penebusan Terkumpul</div>
|
|
<div class="card-body">
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="card text-white bg-info mb-3 col-5 mr-2 p-4">
|
|
ACTUAL : <span id="penbactualtahunan"></span>
|
|
</div>
|
|
|
|
<div class="card text-white bg-info mb-3 col-5 p-4">
|
|
BAJET : <span id="penbbajettahunan"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-light mb-3 col-4">
|
|
<div class="card-header font-weight-bold">Keuntungan Terkumpul</div>
|
|
<div class="card-body">
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="card text-white bg-info mb-3 col-5 mr-2 p-4">
|
|
ACTUAL : <span id="keunactualtahunan"></span>
|
|
</div>
|
|
|
|
<div class="card text-white bg-info mb-3 col-5 p-4">
|
|
BAJET : <span id="keunbajettahunan"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mt-3 d-flex justify-content-center">
|
|
|
|
<div class="card bg-light mb-3 col-10">
|
|
<span class="font-weight-bold mt-2 mb-2">Bilangan Orang Bulanan</span>
|
|
<div class="card-body">
|
|
<div id="chartbilangan">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
let pusherenv = "{{ env('PUSHER_APP_KEY') }}";
|
|
let api_url = "{{ $api_url }}";
|
|
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
minimumFractionDigits: 2
|
|
});
|
|
|
|
var options = {
|
|
series: [ {
|
|
name: 'Actual',
|
|
data: []
|
|
}],
|
|
chart: {
|
|
id: 'pembiayaan-bulanan',
|
|
height: 350,
|
|
type: 'bar'
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (value) {
|
|
return 'RM ' + formatter.format(value);
|
|
}
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '60%',
|
|
dataLabels: {
|
|
position: 'top',
|
|
},
|
|
}
|
|
},
|
|
colors: ['#3498db'],
|
|
dataLabels: {
|
|
enabled: true,
|
|
style: {
|
|
colors: ['#333']
|
|
},
|
|
offsetY: -30,
|
|
formatter: function (val, opt) {
|
|
let total = ((val - opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) / opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) * 100
|
|
|
|
if(isNaN(total))
|
|
{
|
|
return 0.00
|
|
}else{
|
|
if(isFinite(total))
|
|
{
|
|
if(total == -100)
|
|
{
|
|
return 0.00
|
|
}else{
|
|
return total.toFixed(2)
|
|
}
|
|
}else{
|
|
return 0.00
|
|
}
|
|
}
|
|
},
|
|
},
|
|
legend: {
|
|
show: true,
|
|
showForSingleSeries: true,
|
|
customLegendItems: ['Actual', 'Expected'],
|
|
markers: {
|
|
fillColors: ['#3498db', '#e74c3c']
|
|
}
|
|
}
|
|
};
|
|
|
|
var optionsbilangan = {
|
|
series: [{
|
|
name: 'Gadai',
|
|
data:[]
|
|
}, {
|
|
name: 'Tebus',
|
|
data:[]
|
|
}],
|
|
chart: {
|
|
id: 'bilangan-bulanan',
|
|
height: 350,
|
|
type: 'bar'
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: '55%',
|
|
endingShape: 'rounded',
|
|
dataLabels: {
|
|
position: 'top',
|
|
},
|
|
},
|
|
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
distributed: true,
|
|
style: {
|
|
colors: ['#333'],
|
|
fontSize: '12px',
|
|
fontWeight: 'bold'
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
left: 2,
|
|
top: 2,
|
|
opacity: 0.5
|
|
},
|
|
offsetY: -30,
|
|
background: {
|
|
enabled: true,
|
|
foreColor: '#fff',
|
|
borderRadius: 2,
|
|
padding: 4,
|
|
opacity: 0.9,
|
|
borderWidth: 1,
|
|
borderColor: '#fff'
|
|
},
|
|
formatter: function (val, opt) {
|
|
let total = ((val - opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) / opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) * 100
|
|
|
|
if(isNaN(total))
|
|
{
|
|
return 0.00
|
|
}else{
|
|
if(isFinite(total))
|
|
{
|
|
if(total == -100)
|
|
{
|
|
return 0.00
|
|
}else{
|
|
return total.toFixed(2)
|
|
}
|
|
}else{
|
|
return 0.00
|
|
}
|
|
}
|
|
},
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ['transparent']
|
|
},
|
|
legend: {
|
|
show: true,
|
|
showForSingleSeries: true,
|
|
customLegendItems: ['Gadai', 'Tebus','Expected'],
|
|
markers: {
|
|
fillColors: ['#70a1ff', '#7bed9f','#e74c3c']
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: '(Bilangan Orang)'
|
|
}
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
colors: ['#70a1ff', '#7bed9f']
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + " orang"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
var caw = "{{ $cawangan_info['kodcaw'] }}";
|
|
//Declaration of Engine --> 0:idle 1:waiting 2:success
|
|
var pembbul = 0;penbbul = 0;keunbul = 0;
|
|
var pembtah = 0;penbtah = 0;keuntah = 0;
|
|
var pembhar = 0;penbhar = 0;keunhar = 0;
|
|
var bilangan = 0;
|
|
|
|
|
|
//pusher
|
|
var pusher = new Pusher(pusherenv, {
|
|
cluster: 'ap1',
|
|
encrypted: true
|
|
});
|
|
|
|
var channel = pusher.subscribe('gadai-notify');
|
|
channel.bind('trigger-gadai', function(data) {
|
|
|
|
if(pembbul == 0 && pembtah == 0 && pembhar == 0 && bilangan == 0)
|
|
{
|
|
if(data.cawangan === caw)
|
|
{
|
|
CallPembBulanan();
|
|
CallPembTahunan();
|
|
CallPembToday();
|
|
CallBilangan();
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
var channel = pusher.subscribe('tebus-notify');
|
|
channel.bind('trigger-tebus', function(data) {
|
|
if(penbbul == 0 && penbtah == 0 && penbhar == 0 && bilangan == 0)
|
|
{
|
|
if(data.cawangan === caw)
|
|
{
|
|
CallPenbBulanan();
|
|
CallPenbTahunan();
|
|
CallPenbToday();
|
|
CallBilangan();
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
var channel = pusher.subscribe('keuntungan-notify');
|
|
channel.bind('trigger-keuntungan', function(data) {
|
|
if(keunbul == 0 && keuntah == 0 && keunhar == 0)
|
|
{
|
|
if(data.cawangan === caw)
|
|
{
|
|
CallKeunBulanan();
|
|
CallKeunTahunan();
|
|
CallKeunToday();
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
|
|
function CallPembBulanan(){
|
|
|
|
$.ajax({
|
|
method:'get',
|
|
url: api_url + '/admin/pembiayaanBulanan',
|
|
datatype:'json',
|
|
data:{
|
|
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
|
|
},
|
|
beforeSend: function() {
|
|
pembbul = 1;
|
|
},
|
|
success:function(data){
|
|
pembbul = 2;
|
|
datapembiayaan(data);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function CallPenbBulanan(){
|
|
|
|
$.ajax({
|
|
method:'get',
|
|
url: api_url + '/admin/penebusanBulanan',
|
|
datatype:'json',
|
|
data:{
|
|
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
|
|
},
|
|
beforeSend: function() {
|
|
penbbul = 1;
|
|
},
|
|
success:function(data){
|
|
penbbul = 2;
|
|
datapenebusan(data);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function CallKeunBulanan(){
|
|
|
|
$.ajax({
|
|
method:'get',
|
|
url: api_url + '/admin/keuntunganBulanan',
|
|
datatype:'json',
|
|
data:{
|
|
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
|
|
},
|
|
beforeSend: function() {
|
|
keunbul = 1;
|
|
},
|
|
success:function(data){
|
|
keunbul = 2;
|
|
datakeuntungan(data);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function CallPembToday(){
|
|
$.ajax({
|
|
method:'get',
|
|
url: api_url + '/admin/pembiayaanToday',
|
|
datatype:'json',
|
|
data:{
|
|
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
|
|
},
|
|
beforeSend: function() {
|
|
pembhar = 1;
|
|
},
|
|
success:function(data){
|
|
$('#pembharian').text('RM' + formatter.format(data[0].gadaiToday));
|
|
$('#pembbajet').text('RM' + formatter.format(data[0].bajetharian.toFixed(2)));
|
|
$('#pembpercent').text(data[0].percentDiff + '%');
|
|
$('#pembprogress').text(100 - data[0].percentcum + '%');
|
|
$("#pembprogress").css("width",100 - data[0].percentcum);
|
|
// this.gadaianremaining = formatter.format(data[0].remaining.toFixed(2)),
|
|
// this.percentcumgadai = (100 - data[0].percentcum)
|
|
pembhar = 0;
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function CallPenbToday(){
|
|
|
|
$.ajax({
|
|
method:'get',
|
|
url: api_url + '/admin/penebusanToday',
|
|
datatype:'json',
|
|
data:{
|
|
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
|
|
},
|
|
beforeSend: function() {
|
|
penbhar = 1;
|
|
},
|
|
success:function(data){
|
|
$('#penbharian').text('RM' + formatter.format(data[0].tebusToday));
|
|
$('#penbbajet').text('RM' + formatter.format(data[0].bajetharian.toFixed(2)));
|
|
$('#penbpercent').text(data[0].percentDiff + '%');
|
|
$('#penbprogress').text(100 - data[0].percentcum + '%');
|
|
$("#penbprogress").css("width",100 - data[0].percentcum);
|
|
// this.gadaianremaining = formatter.format(data[0].remaining.toFixed(2)),
|
|
// this.percentcumgadai = (100 - data[0].percentcum)
|
|
penbhar = 1;
|
|
}
|
|
});
|
|
}
|
|
|
|
function CallKeunToday(){
|
|
$.ajax({
|
|
method:'get',
|
|
url: api_url + '/admin/keuntunganToday',
|
|
datatype:'json',
|
|
data:{
|
|
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
|
|
},
|
|
beforeSend: function() {
|
|
keunhar = 1;
|
|
},
|
|
success:function(data){
|
|
$('#keunharian').text('RM' + formatter.format(data[0].upahToday));
|
|
$('#keunbajet').text('RM' + formatter.format(data[0].bajetharian.toFixed(2)));
|
|
$('#keunpercent').text(data[0].percentDiff + '%');
|
|
$('#keunprogress').text(100 - data[0].percentcum + '%');
|
|
$("#keunprogress").css("width",100 - data[0].percentcum);
|
|
// this.gadaianremaining = formatter.format(data[0].remaining.toFixed(2)),
|
|
// this.percentcumgadai = (100 - data[0].percentcum)
|
|
keunhar = 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
function CallPembTahunan(){
|
|
|
|
$.ajax({
|
|
method:'get',
|
|
url: api_url + '/admin/pembiayaanTahunan',
|
|
datatype:'json',
|
|
data:{
|
|
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
|
|
},
|
|
beforeSend: function() {
|
|
pembtah = 1;
|
|
},
|
|
success:function(data){
|
|
|
|
$('#pembactualtahunan').text('RM' + formatter.format(data[0].total));
|
|
$('#pembbajettahunan').text('RM' + formatter.format(data[0].bajet));
|
|
pembtah = 0;
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function CallPenbTahunan(){
|
|
|
|
$.ajax({
|
|
method:'get',
|
|
url: api_url + '/admin/penebusanTahunan',
|
|
datatype:'json',
|
|
data:{
|
|
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
|
|
},
|
|
beforeSend: function() {
|
|
penbtah = 1;
|
|
},
|
|
success:function(data){
|
|
|
|
$('#penbactualtahunan').text('RM' + formatter.format(data[0].total));
|
|
$('#penbbajettahunan').text('RM' + formatter.format(data[0].bajet));
|
|
penbtah = 0;
|
|
}
|
|
});
|
|
}
|
|
|
|
function CallKeunTahunan(){
|
|
|
|
$.ajax({
|
|
method:'get',
|
|
url: api_url + '/admin/keuntunganTahunan',
|
|
datatype:'json',
|
|
data:{
|
|
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
|
|
},
|
|
beforeSend: function() {
|
|
keuntah = 1;
|
|
},
|
|
success:function(data){
|
|
|
|
$('#keunactualtahunan').text('RM' + formatter.format(data[0].total));
|
|
$('#keunbajettahunan').text('RM' + formatter.format(data[0].bajet));
|
|
keuntah = 0;
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function CallBilangan(){
|
|
|
|
$.ajax({
|
|
method:'get',
|
|
url: api_url + '/admin/bilangan/gadai',
|
|
datatype:'json',
|
|
data:{
|
|
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
|
|
},
|
|
beforeSend: function() {
|
|
bilangan = 1;
|
|
},
|
|
success:function(datagadai){
|
|
|
|
$.ajax({
|
|
method:'get',
|
|
url: api_url + '/admin/bilangan/tebus',
|
|
datatype:'json',
|
|
data:{
|
|
'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
|
|
},
|
|
success:function(datatebus){
|
|
bilangan = 2;
|
|
bilanganbulanan(datagadai,datatebus);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
$( document ).ready(function() {
|
|
|
|
CallPembBulanan();
|
|
CallPenbBulanan();
|
|
CallKeunBulanan();
|
|
CallPembToday();
|
|
CallPenbToday();
|
|
CallKeunToday();
|
|
CallPembTahunan();
|
|
CallPenbTahunan();
|
|
CallKeunTahunan();
|
|
CallBilangan();
|
|
|
|
});
|
|
|
|
function datapembiayaan(datapemb)
|
|
{
|
|
let chartpemb = new ApexCharts(document.querySelector("#chartpembiayaan"), options);
|
|
chartpemb.render();
|
|
chartpemb.updateSeries([{
|
|
data: datapemb
|
|
}]);
|
|
|
|
pembbul = 0;pembtah = 0;pembhar = 0;
|
|
}
|
|
|
|
function datapenebusan(datapen)
|
|
{
|
|
var chartpen = new ApexCharts(document.querySelector("#chartpenebusan"), options);
|
|
chartpen.render();
|
|
chartpen.updateSeries([{
|
|
data: datapen
|
|
}]);
|
|
|
|
penbbul = 0;penbtah = 0;penbhar = 0;
|
|
}
|
|
|
|
function datakeuntungan(datakeun)
|
|
{
|
|
var charkeun = new ApexCharts(document.querySelector("#chartkeuntungan"), options);
|
|
charkeun.render();
|
|
charkeun.updateSeries([{
|
|
data: datakeun
|
|
}]);
|
|
|
|
keunbul = 0;keuntah = 0;keunhar = 0;
|
|
}
|
|
|
|
function bilanganbulanan(datagadai,datatebus)
|
|
{
|
|
var charbil = new ApexCharts(document.querySelector("#chartbilangan"), optionsbilangan);
|
|
charbil.render();
|
|
charbil.updateSeries(
|
|
[
|
|
{
|
|
name: 'Gadai',
|
|
data: datagadai
|
|
},
|
|
{
|
|
name: 'Tebus',
|
|
data: datatebus
|
|
},
|
|
]
|
|
);
|
|
|
|
bilangan = 0;
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
@endsection
|