fix bajet

resources/views/khazanah/bajet.blade.php

@@ -17,7 +17,8 @@
                     
                    
                     <div class="row justify-content-center">
-                        <div class="card bg-light mb-3 col-4">
+                        
+                        <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">
@@ -28,7 +29,7 @@
                                     <div>
                                         <span class="col-5 font-weight-bold">HARIAN</span>
                                         <span class="col-1">:</span>
-                                        <span id="pembharian" class="col-5">HARIAN</span>
+                                        <span id="pembharian" class="col-5"></span>
                                     </div>
                                     <div>
                                         <span id="pembpercent">-100%</span>
@@ -134,6 +135,70 @@
                         </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>
@@ -142,171 +207,481 @@
 </div>
 <script>
 
+    let pusherenv = "{{ env('PUSHER_APP_KEY') }}";
+    let api_url = "{{ $api_url }}";
 
-const formatter = new Intl.NumberFormat('en-US', {
+    const formatter = new Intl.NumberFormat('en-US', {
-  minimumFractionDigits: 2
+    minimumFractionDigits: 2
-});
+    });
 
-var options = {
+    var options = {
-        series: [ {
+            series: [ {
-            name: 'Actual',
+                name: 'Actual',
-            data: []
+                data: []
-        }],
+            }],
-        chart: {
+            chart: {
-            id: 'pembiayaan-bulanan',
+                id: 'pembiayaan-bulanan',
-            height: 350,
+                height: 350,
-            type: 'bar'
+                type: 'bar'
-        },
-        yaxis: {
-            labels: {
-            formatter: function (value) {
-                return 'RM ' + formatter.format(value);
-            }
             },
-        },
+            yaxis: {
-        plotOptions: {
+                labels: {
-            bar: {
+                formatter: function (value) {
-            columnWidth: '60%',
+                    return 'RM ' + formatter.format(value);
-            dataLabels: {
+                }
-                    position: 'top',
-            },
-            }
-        },
-        colors: ['#3498db'],
-        dataLabels: {
-            enabled: true,
-                style: {
-                    colors: ['#333']
                 },
-                offsetY: -30,
+            },
-            formatter: function (val, opt) {
+            plotOptions: {
-            let total = ((val - opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) / opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) * 100
+                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))
+                if(isNaN(total))
-            {
-                return 0.00
-            }else{
-                if(isFinite(total))
-                {
-                if(total == -100)
                 {
                     return 0.00
                 }else{
-                    return total.toFixed(2)
+                    if(isFinite(total))
+                    {
+                    if(total == -100)
+                    {
+                        return 0.00
+                    }else{
+                        return total.toFixed(2)
+                    }
+                    }else{
+                    return 0.00
+                    }
                 }
-                }else{
+                },
-                return 0.00
-                }
-            }
             },
-        },
+            legend: {
-        legend: {
+                show: true,
-            show: true,
+                showForSingleSeries: true,
-            showForSingleSeries: true,
+                customLegendItems: ['Actual', 'Expected'],
-            customLegendItems: ['Actual', 'Expected'],
+                markers: {
-            markers: {
+                    fillColors: ['#3498db', '#e74c3c']
-                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();
             }
         }
-};
 
-$( document ).ready(function() {
-    let api_url = "{{ $api_url }}";
-
-    $.ajax({
-        method:'get',
-        url: api_url + '/admin/pembiayaanBulanan',
-        datatype:'json',
-        data:{
-            'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
-        },
-        success:function(data){
-            datapembiayaan(data);
-        }
     });
 
-    $.ajax({
+    var channel = pusher.subscribe('tebus-notify');
-        method:'get',
+    channel.bind('trigger-tebus', function(data) {
-        url: api_url + '/admin/penebusanBulanan',
+        if(penbbul == 0 && penbtah == 0 && penbhar == 0 && bilangan == 0)
-        datatype:'json',
+        {
-        data:{
+            if(data.cawangan === caw)
-            'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
+            {
-        },
+                CallPenbBulanan();
-        success:function(data){
+                CallPenbTahunan();
-            datapenebusan(data);
+                CallPenbToday();
-        }
+                CallBilangan();
+            }
+        }       
+
     });
 
-    $.ajax({
+    var channel = pusher.subscribe('keuntungan-notify');
-        method:'get',
+    channel.bind('trigger-keuntungan', function(data) {
-        url: api_url + '/admin/keuntunganBulanan',
+        if(keunbul == 0 && keuntah == 0 && keunhar == 0)
-        datatype:'json',
+        {
-        data:{
+            if(data.cawangan === caw)
-            'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
+            {
-        },
+                CallKeunBulanan();
-        success:function(data){
+                CallKeunTahunan();
-            datakeuntungan(data);
+                CallKeunToday();                
-        }
+            }
+        }        
+
     });
 
-    $.ajax({
-        method:'get',
-        url: api_url + '/admin/pembiayaanToday',
-        datatype:'json',
-        data:{
-            'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
-        },
-        success:function(data){
-            console.log(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)
-        }
-    });
 
-    $.ajax({
+    function CallPembBulanan(){
-        method:'get',
-        url: api_url + '/admin/penebusanToday',
-        datatype:'json',
-        data:{
-            'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
-        },
-        success:function(data){
-            console.log(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)
-        }
-    });
 
-    $.ajax({
+        $.ajax({
-        method:'get',
+            method:'get',
-        url: api_url + '/admin/keuntunganToday',
+            url: api_url + '/admin/pembiayaanBulanan',
-        datatype:'json',
+            datatype:'json',
-        data:{
+            data:{
-            'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
+                'kodcaw': "{{ $cawangan_info['kodcaw'] }}",
-        },
+            },
-        success:function(data){
+            beforeSend: function() {
-            console.log(data);
+                pembbul = 1;
-            $('#keunharian').text('RM' + formatter.format(data[0].upahToday));
+            },
-            $('#keunbajet').text('RM' + formatter.format(data[0].bajetharian.toFixed(2)));
+            success:function(data){
-            $('#keunpercent').text(data[0].percentDiff + '%');
+                pembbul = 2;
-            $('#keunprogress').text(100 - data[0].percentcum + '%');
+                datapembiayaan(data);
-            $("#keunprogress").css("width",100 - data[0].percentcum);
+            }
-            // this.gadaianremaining = formatter.format(data[0].remaining.toFixed(2)),
+        });
-            // this.percentcumgadai = (100 - data[0].percentcum)
-        }
-    });
 
-});
+    }
+
+    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)
     {
@@ -315,6 +690,8 @@ $( document ).ready(function() {
         chartpemb.updateSeries([{
             data: datapemb
         }]);
+
+        pembbul = 0;pembtah = 0;pembhar = 0;
     }
 
     function datapenebusan(datapen)
@@ -324,6 +701,8 @@ $( document ).ready(function() {
         chartpen.updateSeries([{
             data: datapen
         }]);
+
+        penbbul = 0;penbtah = 0;penbhar = 0;
     }
 
     function datakeuntungan(datakeun)
@@ -333,6 +712,28 @@ $( document ).ready(function() {
         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;
     }