shipping-portal/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue

<template>
    <div class="row">
        <div class="col">
            <div class="row" v-if="item.status === 1">
                <div class="col">
                    <div class="row m-l-0 m-b-10 m-r-0 parentContainer" >
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <div class="row">
                                        <div class="col p-t-10 p-b-10 p-r-0 bg-master-lighter">
                                            <div class="row m-b-5">
                                                <div class="col-auto">
                                                    <div class="font-heading fs-8 muted all-caps">Status</div>
                                                    <div class="font-heading fs-10 bold text-complete">Pending Verification</div>
                                                </div>
                                                <div class="col-auto p-l-0">
                                                    <div class="font-heading fs-8 muted all-caps">Payment Amount</div>
                                                    <div class="font-heading fs-10 bold">
                                                        MYR {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <div class="font-heading fs-8 all-caps" >Submitted On: {{ item.updated_at }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto bg-master-light">
                                            <div class="row align-items-center h-100">
                                                <div class="col">
                                                    <i class="fa fa-cloud-download muted"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="item.status === 2">
                <div class="col">
                    <div class="row m-l-0 m-b-10 m-r-0 parentContainer" >
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <div class="row">
                                        <div class="col p-t-10 p-b-10 p-r-0 bg-white">
                                            <div class="row m-b-5">
                                                <div class="col-auto">
                                                    <div class="font-heading fs-8 muted all-caps">Status</div>
                                                    <div class="font-heading fs-10 bold text-success">Approved</div>
                                                </div>
                                                <div class="col-auto p-l-0">
                                                    <div class="font-heading fs-8 muted all-caps">Payment Amount</div>
                                                    <div class="font-heading fs-10 bold">
                                                        MYR {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <div class="font-heading fs-8 all-caps" >Paid On: {{ item.updated_at }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto pointer bg-success">
                                            <a :href="route('billplz.bill', item.reference)" target="_blank">
                                            <div class="row align-items-center h-100">
                                                <div class="col">
                                                    <i class="fa fa-cloud-download text-white"></i>
                                                </div>
                                            </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="item.status === 4">
                <div class="col">
                    <div class="row m-l-0 m-b-10 m-r-0 parentContainer b-a b-danger" >
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <div class="row">
                                        <div class="col p-t-10 p-b-10 p-r-0">
                                            <div class="row m-b-5">
                                                <div class="col-auto">
                                                    <div class="font-heading fs-8 muted all-caps">Status</div>
                                                    <div class="font-heading fs-10 bold text-danger">
                                                        Rejected
                                                    </div>
                                                </div>
                                                <div class="col-auto p-l-0">
                                                    <div class="font-heading fs-8 muted all-caps">Payment Amount</div>
                                                    <div class="font-heading fs-10 bold">
                                                        MYR {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <div class="font-heading fs-8 all-caps" >Rejected On: {{ item.updated_at }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="row align-items-center h-100">
                                                <div class="col">
                                                    <i class="fa fa-ban text-danger"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        data(){
            return {
            }
        },
        mixins: [componentHandler]
    }
</script>