admin-erahn/resources/js/components/Analisa/Harian.vue

<template>
    <div class="mb-4 w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
           <div class="flex items-center">
              <div class="flex-shrink-0">
                 <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">RM {{ gadaianharian }}</span>
                 <h3 class="text-base font-normal text-gray-500">Pembiayaan Hari Ini</h3>
              </div>
              <div class="ml-5 w-0 flex items-center justify-end flex-1 text-green-500 text-base font-bold">
                 {{ percentgadaian }}%
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                 </svg>
              </div>
           </div>
        </div>
        <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
           <div class="flex items-center">
              <div class="flex-shrink-0">
                 <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">RM {{ penebusanharian }}</span>
                 <h3 class="text-base font-normal text-gray-500">Penebusan Hari Ini</h3>
              </div>
              <div class="ml-5 w-0 flex items-center justify-end flex-1 text-green-500 text-base font-bold">
                 {{ percentpenebusan }}%
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                 </svg>
              </div>
           </div>
        </div>
        <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
           <div class="flex items-center">
              <div class="flex-shrink-0">
                 <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">RM {{ keuntunganharian }}</span>
                 <h3 class="text-base font-normal text-gray-500">Keuntungan Hari Ini</h3>
              </div>
              <div class="ml-5 w-0 flex items-center justify-end flex-1 text-red-500 text-base font-bold">
                 {{ percentkeuntungan }}%
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                 </svg>
              </div>
           </div>
        </div>
    </div>
</template>

<script>


const formatter = new Intl.NumberFormat('en-US', {
  minimumFractionDigits: 2
});

export default {

    props:{
        kodcaw: String
    },
	data() {
		return {
        keuntunganharian:0,
        percentkeuntungan:0,
        penebusanharian:0,
        percentpenebusan:0,
        gadaianharian:0,
        percentgadaian:0
		};
	},
    created() {
        this.getDataPembiayaan()
        this.getDataPenebusan()
        this.getDataKeuntungan()
    },
    methods: {
        getDataPembiayaan() {
            this.axios.get('http://localhost:8000/admin/pembiayaanToday', {
            params: {
                kodcaw: this.$props.kodcaw 
            }
            }).then(response => {
                this.gadaianharian = formatter.format(response.data[0].gadaiToday)
                this.percentgadaian = response.data[0].percentDiff.toFixed(2)
            }).catch(error => {
                console.log(error)
            })
        },
        getDataPenebusan(){
             this.axios.get('http://localhost:8000/admin/penebusanToday', {
            params: {
                kodcaw: this.$props.kodcaw 
            }
            }).then(response => {
                this.penebusanharian = formatter.format(response.data[0].tebusToday)
                this.percentpenebusan = response.data[0].percentDiff.toFixed(2)
            }).catch(error => {
                console.log(error)
            })
        },
        getDataKeuntungan(){
           this.axios.get('http://localhost:8000/admin/keuntunganToday', {
            params: {
                kodcaw: this.$props.kodcaw 
            }
            }).then(response => {
                this.keuntunganharian = formatter.format(response.data[0].upahToday)
                this.percentkeuntungan = response.data[0].percentDiff.toFixed(2)
            }).catch(error => {
                console.log(error)
            })
        }
    },
    mounted () {
        var channel = this.$pusher.subscribe('gadai-notify');

        channel.bind('trigger-gadai', ({ response }) => {
            // console.log(`${response}`);
            this.getDataPembiayaan()
        });

        var channel = this.$pusher.subscribe('tebus-notify');

        channel.bind('trigger-tebus', ({ response }) => {
            // console.log(`${response}`);
            this.getDataPenebusan()
        });

        var channel = this.$pusher.subscribe('keuntungan-notify');

        channel.bind('trigger-keuntungan', ({ response }) => {
            // console.log(`${response}`);
            this.getDataKeuntungan()
        });
    }
    
}
</script>