%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/forge/takeaseat.eco-n-tech.co.uk/pages/therapist/
Upload File :
Create Path :
Current File : //home/forge/takeaseat.eco-n-tech.co.uk/pages/therapist/index.vue

<template>
  <div class="page-wrapper">
    <div class="mb-8">
      <section class="p-4 md:p-8 py-6 md:py-12 bg-blue-light text-center text-white">
        <h1 class="text-2xl md:text-4xl lg:text-5xl font-bold mb-8 md:mb-16">Welcome back, {{ user.data.first_name }}</h1>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-y-2 gap-x-6 mb-16">
          <div class="text-center">
            <span class="block mb-3 text-black text-5xl md:text-7xl font-bold">{{ statistics.bookings_count }}</span>
            <p class="text-white font-medium text-sm md:text-base">New Bookings<br/>This week</p>
          </div>
          <div class="text-center">
            <span class="block mb-3 text-black text-5xl md:text-7xl font-bold">{{ statistics.clients_count }}</span>
            <p class="text-white font-medium text-sm md:text-base">Clients<br/>this week</p>
          </div>
          <div class="text-center">
            <span class="block mb-3 text-black text-5xl md:text-7xl font-bold">{{ statistics.average_bookings }}</span>
            <p class="text-white font-medium text-sm md:text-base">Average No. Of<br/>Sessions per week</p>
          </div>
        </div>
        <div class="flex items-center justify-center">
          <NuxtLink
            class="btn btn-primary rounded-full"
            to="/account/availability">View/Manage Availability</NuxtLink>
        </div>
      </section>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 px-6 lg:px-0">
      <div class="md:col-span-2">
        <section class="mb-8">
          <header class="mb-1 p-4 md:p-8 bg-blue-light flex justify-between">
            <h2 class="text-2xl md:text-4xl font-bold">New Clients</h2>
            <NuxtLink
              class="uppercase font-medium text-sm hover:text-white transition"
              to="/therapist/clients">View All Clients</NuxtLink>
          </header>
          <div v-if="clients.length > 0">
            <Client v-for="(client, key) in clients"
              v-bind:key="key"
              :client="client" />
          </div>
          <div v-else
            class="py-16 w-full bg-gray text-center">
            <span class="font-bold text-2xl">You have no new clients</span>
          </div>
        </section>
        <section v-if="progress"
          class="mb-0">
          <header class="p-4 mb-1 md:p-8 bg-blue-light flex justify-between">
            <h2 class="text-2xl md:text-4xl font-bold">Account Management</h2>
            <span class="flex items-center text-md leading-3 font-bold">{{ progress.total_progress }}% <small class="ml-2 text-xs uppercase font-medium">Complete</small></span>
          </header>
          <div class="relative bg-gray grid grid-cols-4 px-6 py-5 mb-1">
            <NuxtLink class="absolute top-0 left-0 w-full h-full"
              to="/account"></NuxtLink>
            <div class="col-span-1 flex items-center">
              <span class="text-lg font-bold">Profile</span>
            </div>
            <div class="col-span-2 flex items-center">
              <p class="text-sm font-regular">Your Take a Seat therapist profile</p>
            </div>
            <div class="col-span-1 flex items-center justify-end">
              <span>{{ progress.profile }}%</span>
              <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>
          <div class="relative bg-gray grid grid-cols-4 px-6 py-5 mb-1">
            <NuxtLink class="absolute top-0 left-0 w-full h-full"
              to="/account/availability"></NuxtLink>
            <div class="col-span-1 flex items-center">
              <span class="text-lg font-bold">Availability</span>
            </div>
            <div class="col-span-2 flex items-center">
              <p class="text-sm font-regular">Your availability and appointments</p>
            </div>
            <div class="col-span-1 flex items-center justify-end">
              <span>{{ progress.availability }}%</span>
              <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>
          <div class="relative bg-gray grid grid-cols-4 px-6 py-5 mb-1">
            <NuxtLink class="absolute top-0 left-0 w-full h-full"
              to="/account/verification"></NuxtLink>
            <div class="col-span-1 flex items-center">
              <span class="text-lg font-bold">Verification</span>
            </div>
            <div class="col-span-2 flex items-center">
              <p class="text-sm font-regular">Qualifications, accreditations, memberships and insurance</p>
            </div>
            <div class="col-span-1 flex items-center justify-end">
              <span>{{ progress.verification }}%</span>
              <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>
          <div class="relative bg-gray grid grid-cols-4 px-6 py-5 mb-1">
            <NuxtLink class="absolute top-0 left-0 w-full h-full"
              to="/account/financial"></NuxtLink>
            <div class="col-span-1 flex items-center">
              <span class="text-lg font-bold">Money</span>
            </div>
            <div class="col-span-2 flex items-center">
              <p class="text-sm font-regular">Your session rates and subscription details</p>
            </div>
            <div class="col-span-1 flex items-center justify-end">
              <span>{{ progress.financial }}%</span>
              <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>
          <div class="relative bg-gray grid grid-cols-4 px-6 py-5 mb-1">
            <NuxtLink class="absolute top-0 left-0 w-full h-full"
              to="/account/settings"></NuxtLink>
            <div class="col-span-1 flex items-center">
              <span class="text-lg font-bold">Settings</span>
            </div>
            <div class="col-span-2 flex items-center">
              <p class="text-sm font-regular">Your session rates and subscription details</p>
            </div>
            <div class="col-span-1 flex items-center justify-end">
              <span>{{ progress.settings }}%</span>
              <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>
        </section>
      </div>
      <div class="md:col-span-1">
        <div v-if="bookings.length !== 0 || bookings.length == undefined"
          class="bg-white h-full">
          <div v-for="(date, key) in bookings"
            v-bind:key="key">
            <div class="bg-blue-light py-3 px-4 flex items-center justify-between">
              <span class="text-xl font-bold">{{ $moment(key).format('Do MMMM') }}</span>
              <span class="uppercase">{{ $moment(key).format('dddd') }}</span>
            </div>
            <div
              v-for="(booking, key) in date"
              v-bind:key="key"
              class="relative p-6 mb-1 bg-gray grid grid-cols-4 gap-6">
              <div class="relative col-span-1">
                <div class="absolute top-0 left-0 w-full h-full border-4 border-yellow border-opacity-50"></div>
                <img :src="booking.user.photo_url" />
              </div>
              <div class="col-span-3 grid grid-cols-6 py-2">
                <div class="col-span-4 flex flex-col justify-start">
                  <div>
                    <small class="uppercase text-sm text-black text-opacity-80">{{ booking.time }}</small>
                    <h2 class="text-xl font-bold">{{ booking.user.full_name }}</h2>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else
          class="bg-gray h-full p-6">
          <span class="font-bold text-xl">You have no new bookings</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  middleware: ['auth', 'therapist'],

  head () {
    return {
      titleTemplate: 'Account | %s',
    }
  },

  computed: {
    user() {
      return this.$auth.user;
    },
    statistics() {
      return this.$store.state.therapist.dashboard.statistics
    },
    progress() {
      return this.$store.state.therapist.dashboard.progress
    },
    bookings() {
      return this.$store.state.therapist.dashboard.bookings
    },
    clients() {
      return this.$store.state.therapist.dashboard.clients
    }
  },

  async asyncData ({ store }) {
    await store.dispatch('therapist/dashboard/get')
  },
}
</script>

Zerion Mini Shell 1.0