admin-erahn/resources/js/components/Analisa/Aging.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" v-if="datasebenar === false">
        <content-placeholders>
            <content-placeholders-heading :img="true" />
            <content-placeholders-text :lines="3" />
        </content-placeholders>
    </div>

    <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8" v-if="datasebenar === true">

        <h3 class="text-xl font-bold text-gray-500 mb-4">Outstanding</h3>

        <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Tempoh
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Bil
                        </th>
                        <th scope="col" class="px-6 py-3">
                            RM
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(n,index) in 13" :key="index" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                        <th class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                            {{ (n == 13) ? '12 > ' : n  }} Bulan
                        </th>
                        <td class="px-6 py-4">
                            {{ collectionsebenar.count[index].toFixed(0) }}
                        </td>
                        <td class="px-6 py-4">
                            {{ formatterfunction(collectionsebenar.sum[index]) }}
                        </td>
                    </tr>
                </tbody>
                <tfoot class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="px-6 py-4">Keseluruhan</th>
                                             <th class="px-6 py-4">{{ collectionsebenar.count[13].toFixed(0) }}</th>
                        <th class="px-6 py-4">{{ formatterfunction(collectionsebenar.sum[13]) }}</th>
                    </tr>
                </tfoot>
            </table>
        </div>

    </div>

    <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8" v-if="datalelong === false">
        <content-placeholders>
            <content-placeholders-heading :img="true" />
            <content-placeholders-text :lines="3" />
        </content-placeholders>
    </div>

    <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8" v-if="datalelong === true">
        <h3 class="text-xl font-bold text-gray-500 mb-4">6 Bulan <i class="fas fa-times-circle text-red-500"></i></h3>

        <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Tempoh
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Bil
                        </th>
                        <th scope="col" class="px-6 py-3">
                            RM
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(n,index) in 13" :key="index" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                        <th class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                            {{ (n == 13) ? '12 > ' : n  }} Bulan
                        </th>
                        <td class="px-6 py-4">
                            {{ collectionlelong.count[index].toFixed(0) }}
                        </td>
                        <td class="px-6 py-4">
                            {{ formatterfunction(collectionlelong.sum[index]) }}
                        </td>
                    </tr>
                </tbody>
                <tfoot class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="px-6 py-4">Keseluruhan</th>
                                              <th class="px-6 py-4">{{ collectionlelong.count[13].toFixed(0) }}</th>
                        <th class="px-6 py-4">{{ formatterfunction(collectionlelong.sum[13]) }}</th>
                    </tr>
                </tfoot>
            </table>
        </div>

    </div>

    <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8" v-if="datafilter === false">
        <content-placeholders>
            <content-placeholders-heading :img="true" />
            <content-placeholders-text :lines="3" />
        </content-placeholders>
    </div>
    <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8" v-if="datafilter === true">
        <h3 class="text-xl font-bold text-gray-500 mb-4">6 Bulan <i class="fas fa-square-check text-green-500"></i></h3>

        <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Tempoh
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Bil
                        </th>
                        <th scope="col" class="px-6 py-3">
                            RM
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(n,index) in 13" :key="index" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                        <th class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                            {{ (n == 13) ? '12 > ' : n  }} Bulan
                        </th>
                        <td class="px-6 py-4">
                            {{ collectionfilter.count[index].toFixed(0) }}
                        </td>
                        <td class="px-6 py-4">
                            {{ formatterfunction(collectionfilter.sum[index]) }}
                        </td>
                    </tr>
                </tbody>
                <tfoot class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th class="px-6 py-4">Keseluruhan</th>
                        <th class="px-6 py-4">{{ collectionfilter.count[13].toFixed(0) }}</th>
                        <th class="px-6 py-4">{{ formatterfunction(collectionfilter.sum[13]) }}</th>
                    </tr>
                </tfoot>
            </table>
        </div>

    </div>

</div>
</template>

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

export default {

    data() {
        return {
            collectionsebenar: {},
            collectionlelong: {},
            collectionfilter: {},
            datasebenar: false,
            datalelong: false,
            datafilter: false,

        }
    },
    async created() {
        await this.getDataSebenar();
        await this.getDataLelong();
        await this.getDataFilter();
    },
    methods: {
        getDataSebenar() {
            this.axios.get(this.$hostname + '/admin/dashboard/aging', {
                params: {
                    kodcaw: this.$kodcaw,
                    options: 'sebenar'
                }
            }).then(response => {
                this.collectionsebenar = response.data;

                if (this.datasebenar == false)
                    this.datasebenar = true;
            });
        },
        getDataLelong() {
            this.axios.get(this.$hostname + '/admin/dashboard/aging', {
                params: {
                    kodcaw: this.$kodcaw,
                    options: 'datalelong'
                }
            }).then(response => {
                this.collectionlelong = response.data;

                if (this.datalelong == false)
                    this.datalelong = true;
            });
        },
        getDataFilter() {
            this.axios.get(this.$hostname + '/admin/dashboard/aging', {
                params: {
                    kodcaw: this.$kodcaw,
                    options: 'filter'
                }
            }).then(response => {
                this.collectionfilter = response.data;

                if (this.datafilter == false)
                    this.datafilter = true;
            });
        },
        formatterfunction(value) {
            return formatter.format(value);
        }
    }
}
</script>