%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper">
<PageHeader classObject='bg-blue'>
<img class="relative z-20 mb-8"
src="~assets/images/logo-white-small.svg" alt="Takeaseat" />
<h1 class="relative z-20 text-5xl lg:text-7xl font-bold m-0">Money Manager</h1>
<div class="page-header-bottom">
<MoneyManagerNav />
</div>
</PageHeader>
<div v-if="statistics"
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 mb-20 px-6 lg:px-0">
<div v-if="statistics.revenue"
class="bg-gray text-center px-4 py-8">
<span class="block">Revenue</span>
<span class="block text-blue font-medium text-3xl xl:text-4xl my-3">{{ statistics.revenue.formatted }}</span>
<span class="block">This Month</span>
</div>
<div v-if="statistics.billed"
class="bg-gray text-center px-4 py-8">
<span class="block">Billed</span>
<span class="block text-blue font-medium text-3xl xl:text-4xl my-3">{{ statistics.billed.formatted }}</span>
<span class="block">This Month</span>
</div>
<div class="bg-gray text-center px-4 py-8">
<span class="block">Due</span>
<span class="block text-blue font-medium text-3xl xl:text-4xl my-3">{{ statistics.balance.formatted }}</span>
<span class="block">This Month</span>
</div>
<div class="bg-gray text-center px-4 py-8">
<span class="block">Repeat Bookings</span>
<span class="block text-blue font-medium text-3xl xl:text-4xl my-3">{{ statistics.repeat_bookings }}</span>
<span class="block">This Month</span>
</div>
<div class="bg-gray text-center px-4 py-8">
<span class="block">Total Bookings</span>
<span class="block text-blue font-medium text-3xl xl:text-4xl my-3">{{ statistics.total_bookings }}</span>
<span class="block">This Month</span>
</div>
</div>
<div v-if="payments.length !== 0 || this.payments.length == undefined"
class="max-w-5xl mx-auto w-full px-6 lg:px-0">
<h2 class="text-4xl font-bold mb-6">Latest Activity</h2>
<div class="mb-6"
v-for="(payment_date, key) in payments"
v-bind:key="key">
<div class="grid grid-cols-2 gap-4 mb-5">
<h3 class="text-2xl font-bold">{{ key }}</h3>
<div class="text-right">
<NuxtLink
class="text-blue-light text-2xl font-bold"
to="/therapist/money/statements">View Statements</NuxtLink>
</div>
</div>
<Payment
v-for="(payment, key) in payment_date"
v-bind:key="key"
:payment="payment" />
</div>
</div>
<div v-else
class="py-20 w-full bg-gray text-center">
<span class="font-bold text-3xl">You have no payments yet</span>
</div>
<div class="mt-8 py-20 w-full bg-gray text-center">
<h2 class="font-bold text-3xl mb-8">Keep your Bank Details Up-to-date</h2>
<div class="max-w-lg w-full mx-auto">
<p class="mb-6">Please ensure all bank details are accurate and up to date to ensure we can pay you for bookings made through the site</p>
<NuxtLink to="/account/financial"
class="uppercase text-blue-light"
type="button">Click here to update details</NuxtLink>
</div>
</div>
</div>
</template>
<script>
export default {
middleware: ['auth', 'therapist'],
head () {
return {
titleTemplate: 'Money Manager | %s',
}
},
computed: {
statistics() {
return this.$store.state.therapist.money.statistics
},
payments() {
return this.$store.state.therapist.money.payments
}
},
async asyncData ({ store }) {
await store.dispatch('therapist/money/getStatistics')
await store.dispatch('therapist/money/getPayments')
}
}
</script>
Zerion Mini Shell 1.0