151 lines
4.0 KiB
Vue
151 lines
4.0 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="pg" class="overflow-x-auto">
|
|
<table class="text w-full text-sm">
|
|
<thead>
|
|
<tr class="text-gray-600">
|
|
<th class="border-b py-3 pr-2 text-left font-normal">
|
|
Description
|
|
</th>
|
|
<th class="border-b py-3 pr-2 text-left font-normal">Site</th>
|
|
<th
|
|
class="whitespace-nowrap border-b py-3 pr-2 text-right font-normal"
|
|
>
|
|
Rate
|
|
</th>
|
|
<th class="border-b py-3 pr-2 text-right font-normal">Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(row, i) in pg.items" :key="row.idx">
|
|
<td class="border-b py-3 pr-2">
|
|
{{ row.description || row.document_name }}
|
|
</td>
|
|
<td class="border-b py-3 pr-2">
|
|
{{ row.site || '-' }}
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right">
|
|
{{ row.rate }} x {{ row.quantity }}
|
|
</td>
|
|
<td class="border-b py-3 pr-2 text-right font-semibold">
|
|
{{ pg.formatted.items[i].amount }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr v-if="pg.total_discount_amount > 0">
|
|
<td></td>
|
|
<td class="pb-2 pr-2 pt-4 text-right font-semibold">
|
|
Total Without Discount
|
|
</td>
|
|
<td
|
|
class="whitespace-nowrap pb-2 pr-2 pt-4 text-right font-semibold"
|
|
>
|
|
{{ pg.formatted.total_before_discount }}
|
|
</td>
|
|
</tr>
|
|
<tr v-if="pg.total_discount_amount > 0">
|
|
<td></td>
|
|
<td class="pb-2 pr-2 pt-4 text-right font-semibold">
|
|
Total Discount Amount
|
|
</td>
|
|
<td
|
|
class="whitespace-nowrap pb-2 pr-2 pt-4 text-right font-semibold"
|
|
>
|
|
{{
|
|
pg.partner_email && pg.partner_email != $account.team.user
|
|
? 0
|
|
: pg.formatted.total_discount_amount
|
|
}}
|
|
</td>
|
|
</tr>
|
|
<tr v-if="pg.gst > 0">
|
|
<td></td>
|
|
<td class="pb-2 pr-2 pt-4 text-right font-semibold">
|
|
Total (Without Tax)
|
|
</td>
|
|
<td
|
|
class="whitespace-nowrap pb-2 pr-2 pt-4 text-right font-semibold"
|
|
>
|
|
{{ pg.formatted.total_before_tax }}
|
|
</td>
|
|
</tr>
|
|
<tr v-if="pg.gst > 0">
|
|
<td></td>
|
|
<td class="pb-2 pr-2 pt-4 text-right font-semibold">
|
|
IGST @ {{ Number($account.billing_info.gst_percentage * 100) }}%
|
|
</td>
|
|
<td
|
|
class="whitespace-nowrap pb-2 pr-2 pt-4 text-right font-semibold"
|
|
>
|
|
{{ pg.formatted.gst }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td class="pb-2 pr-2 pt-4 text-right font-semibold">Grand Total</td>
|
|
<td
|
|
class="whitespace-nowrap pb-2 pr-2 pt-4 text-right font-semibold"
|
|
>
|
|
{{
|
|
pg.partner_email && pg.partner_email != $account.team.user
|
|
? pg.formatted.total_before_discount
|
|
: pg.formatted.total
|
|
}}
|
|
</td>
|
|
</tr>
|
|
<template v-if="pg.total !== pg.amount_due && pg.pagestatus == 1">
|
|
<tr>
|
|
<td></td>
|
|
<td class="pr-2 text-right">Applied Balance:</td>
|
|
<td class="whitespace-nowrap py-3 pr-2 text-right font-semibold">
|
|
- {{ pg.formatted.applied_credits }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td class="pr-2 text-right">Amount Due:</td>
|
|
<td class="whitespace-nowrap py-3 pr-2 text-right font-semibold">
|
|
{{ pg.formatted.amount_due }}
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
<div class="py-20 text-center" v-if="$resources.pg.loading">
|
|
<Button :loading="true">Loading</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'InvoiceUsageTable',
|
|
props: ['invoice', 'invoiceDoc'],
|
|
resources: {
|
|
pg() {
|
|
return {
|
|
url: 'jcloud.api.billing.get_invoice_usage',
|
|
params: { invoice: this.invoice },
|
|
auto: this.invoice,
|
|
onSuccess(pg) {
|
|
this.$emit('pg', pg);
|
|
}
|
|
};
|
|
}
|
|
},
|
|
watch: {
|
|
invoice(value) {
|
|
if (value) {
|
|
this.$resources.pg.fetch();
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
pg() {
|
|
return this.invoiceDoc || this.$resources.pg.data;
|
|
}
|
|
}
|
|
};
|
|
</script>
|