29 lines
691 B
Vue
29 lines
691 B
Vue
<template>
|
|
<Card title="Invoice Summary" :subtitle="subtitle">
|
|
<InvoiceUsageTable :invoiceDoc="invoiceDoc" />
|
|
</Card>
|
|
</template>
|
|
<script>
|
|
import InvoiceUsageTable from '@/components/InvoiceUsageTable.vue';
|
|
export default {
|
|
name: 'UpcomingInvoiceSummary',
|
|
props: ['invoiceDoc'],
|
|
components: {
|
|
InvoiceUsageTable
|
|
},
|
|
computed: {
|
|
subtitle() {
|
|
if (!this.invoiceDoc) {
|
|
return 'No upcoming invoice';
|
|
}
|
|
let start = this.$date(this.invoiceDoc.period_start);
|
|
let end = this.$date(this.invoiceDoc.period_end);
|
|
|
|
return `Current month's total forecast (${start.toFormat(
|
|
'd MMM'
|
|
)} - ${end.toFormat('d MMM yyyy')})`;
|
|
}
|
|
}
|
|
};
|
|
</script>
|