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

<template>
    <div class="row m-b-15 align-items-end">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Marking</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading all-caps fs-11">
                        <a :href="route('customer.profile', data.marking)">
                            {{data.marking}}
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Date</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading all-caps fs-11">{{data.updated_at}}</div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Bill No</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading all-caps fs-11">{{data.bill_no}}</div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Description</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading all-caps fs-11" v-html="data.description"></div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Amount</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-11">MYR {{(Math.round((data.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                </div>
            </div>
        </div>
        <div class="col" v-if="data.type === 5">
            <div class="row">
                <div class="col">
                    <div class="font-heading fs-10 muted all-caps">Payment Reference</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <a :href="route('billplz.bill', data.reference)" target="_blank" v-if="data.reference">
                        <div class="icon-thumbnail fs-11 text-white icon-25 bg-complete btn-rounded float-left m-r-5">
                            Bz
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- {{data}} -->
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';

    export default {
        props: {
            data: {
                required: true,
                type: Object
            }
        },
        mixins: [componentHandler],
    }
</script>