exchange-2.0/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">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">
            <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">
                    <div class="font-heading fs-11">{{data.payment_reference == null ? '&nbsp;' : data.payment_reference }}</div>
                </div>
            </div>
        </div>
        <!-- {{data}} -->
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';

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