hgh_admin/resources/js/pages/patients/PatientBioPanel.vue

<script setup>
const profile = ref(0)
const color = ref(null)
const props = defineProps({
  userData: {
    type: Object,
    required: true,
  },
})

const standardPlan = {
  plan: 'Standard',
  price: 99,
  benefits: [
    '10 Users',
    'Up to 10GB storage',
    'Basic Support',
  ],
}

const isUserInfoEditDialogVisible = ref(false)
const isUpgradePlanDialogVisible = ref(false)

const resolveUserStatusVariant = stat => {
  if (stat === 'pending')
    return 'warning'
  if (stat === 'active')
    return 'success'
  if (stat === 'inactive')
    return 'secondary'
  
  return 'primary'
}

const resolveUserRoleVariant = role => {
  if (role === 'subscriber')
    return {
      color: 'primary',
      icon: 'ri-user-line',
    }
  if (role === 'author')
    return {
      color: 'warning',
      icon: 'ri-settings-2-line',
    }
  if (role === 'maintainer')
    return {
      color: 'success',
      icon: 'ri-database-2-line',
    }
  if (role === 'editor')
    return {
      color: 'info',
      icon: 'ri-pencil-line',
    }
  if (role === 'admin')
    return {
      color: 'error',
      icon: 'ri-server-line',
    }
  
  return {
    color: 'primary',
    icon: 'ri-user-line',
  }
}
 const firstThreeLines = computed(() => {
      const lines = props.userData.plans.list_two_title.split(',')
      return lines.slice(0, 3)
    })
onMounted(async () => {
  profile.value = props.userData.patient.profile_completion_Percentage
  if (profile.value <= 50) {
    color.value="rgb(var(--v-theme-error))"
  }
   if (profile.value >= 80) {
    color.value="rgb(var(--v-theme-success))"
  }
  if (profile.value > 50 && profile.value < 80) {
    color.value="rgb(var(--v-theme-warning))"
  }
});
</script>

<template>
  <VRow>
    <!-- SECTION User Details -->
    <VCol cols="12">
      <VCard v-if="props.userData">
        <VCardText class="text-center pt-12 pb-6">
          <!-- 👉 Avatar -->
          <VAvatar
            rounded
            :size="120"
            :color="!props.userData.patient.avatar ? 'primary' : undefined"
            :variant="!props.userData.patient.avatar ? 'tonal' : undefined"
          >
            <VImg
              v-if="props.userData.patient.avatar"
              :src="props.userData.patient.avatar"
            />
            <span
              v-else
              class="text-5xl font-weight-medium"
            >
              {{ avatarText(props.userData.patient.first_name) }}
            </span>
          </VAvatar>

          <!-- 👉 User fullName -->
          <h5 class="text-h5 mt-4">
            {{ props.userData.patient.first_name }}  {{ props.userData.patient.last_name }}
          </h5>

          <!-- 👉 Role chip -->
          
          
                <div class="mt-3">
                  <span class="font-weight-medium" style="float: left;">
                  Profile Status:
                </span>
                <VProgressLinear
                v-model="profile"
                :color="color"
                height="14"
                striped
              >
                <template #default="{ value }">
                  <span>{{ Math.ceil(value) }}%</span>
                </template>
            </VProgressLinear>
      </div>
        </VCardText>

      

        <!-- 👉 Details -->
     
        <VCardText class="pb-6">
          <h5 class="text-h5">
            Details
          </h5>

          <VDivider class="my-4" />

          <!-- 👉 User Details list -->
          <VList class="card-list">
             <VListItem>
              <VListItemTitle class="text-sm">
                <span class="font-weight-medium">
                  Email:
                </span>
                <span class="text-body-1">{{ props.userData.patient.email }}</span>
              </VListItemTitle>
            </VListItem>

             <VListItem>
              <VListItemTitle class="text-sm">
                <span class="font-weight-medium">
                  Address:
                </span>
                <span class="text-body-1">{{ props.userData.patient.address }} ,{{ props.userData.patient.city }},{{ props.userData.patient.state }} {{ props.userData.patient.zip_code }}</span>
              </VListItemTitle>
            </VListItem>
            
         
            

            

           

            <VListItem>
              <VListItemTitle class="text-sm">
                <span class="font-weight-medium">
                  Contact:
                </span>
                <span class="text-body-1">{{ props.userData.patient.phone_no }}</span>
              </VListItemTitle>
            </VListItem>


          </VList>
        </VCardText>

        <!-- 👉 Edit and Suspend button -->
        <VCardText class="d-flex justify-center" >
          <VBtn
            variant="elevated"
            class="me-4"
            @click="isUserInfoEditDialogVisible = true"
            style="display: none;"
          >
            Edit
          </VBtn>
          <VBtn
            variant="outlined"
            color="error"
            style="display: none;"
          >
            Suspend
          </VBtn>
        </VCardText>
      </VCard>
    </VCol>
    <!-- !SECTION -->

    <!-- SECTION Current Plan -->
    <VCol cols="12"    v-if="props.userData.plans">
      <VCard
        flat
        class="current-plan"
     
      >
        <VCardText class="d-flex">
          <!-- 👉 Standard Chip -->
          <VChip
            color="primary"
            size="small"
          >
            {{ props.userData.plans.title }}
          </VChip>

          <VSpacer />

          <!-- 👉 Current Price  -->
          <div class="d-flex align-center">
            <sup class="text-primary text-lg font-weight-medium">  {{ props.userData.plans.currency }}</sup>
            <h1 class="text-h1 text-primary">
              {{ props.userData.plans.price }}
            </h1>
            <sub class="mt-3"><h6 class="text-h6 font-weight-regular">month</h6></sub>
          </div>
        </VCardText>

        <VCardText>
          <!-- 👉 Price Benefits -->
          <VList class="card-list">
            <VListItem
            >
              <div class="d-flex align-center">
                <VIcon
                  size="10"
                  color="medium-emphasis"
                  class="me-2"
                  icon="ri-circle-fill"
                />
                <div class="text-medium-emphasis">
                  {{ props.userData.plans.list_one_title }}
                </div>
              </div>
            </VListItem>
             <VListItem
            >
              <div class="d-flex align-center">
                <VIcon
                  size="10"
                  color="medium-emphasis"
                  class="me-2"
                  icon="ri-circle-fill"
                />
                <div class="text-medium-emphasis">
                  {{ props.userData.plans.list_sub_title }}
                </div>
              </div>
            </VListItem>
         
             <VListItem
            >
              <div class="d-flex align-center">
                <VIcon
                  size="10"
                  color="medium-emphasis"
                  class="me-2"
                  icon="ri-circle-fill"
                />
                <div class="text-medium-emphasis">
                <span v-for="(line, index) in firstThreeLines" :key="index">
                  {{ line }}
                  <br v-if="index !== firstThreeLines.length - 1" />
                </span>
              </div>
              </div>
            </VListItem>
          </VList>

          <!-- 👉 Days -->
        

          <!-- 👉 Upgrade Plan -->
          <VBtn
            block
            @click="isUpgradePlanDialogVisible = true"
          >
            Upgrade Plan
          </VBtn>
        </VCardText>
      </VCard>
    </VCol>
    <!-- !SECTION -->
  </VRow>

  <!-- 👉 Edit user info dialog -->
  <UserInfoEditDialog
    v-model:isDialogVisible="isUserInfoEditDialogVisible"
    :user-data="props.userData"
  />

  <!-- 👉 Upgrade plan dialog -->
  <UserUpgradePlanDialog v-model:isDialogVisible="isUpgradePlanDialogVisible" />
</template>

<style lang="scss" scoped>
.card-list {
  --v-card-list-gap: .5rem;
}

.current-plan {
  border: 2px solid rgb(var(--v-theme-primary));
}

.text-capitalize {
  text-transform: capitalize !important;
}
</style>