fix

resources/js/pages/patients/PatientBioPanel.vue

@@ -1,4 +1,6 @@
 <script setup>
+const profile = ref(0)
+const color = ref(0)
 const props = defineProps({
   userData: {
     type: Object,
@@ -66,7 +68,18 @@ const resolveUserRoleVariant = role => {
       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>
@@ -114,11 +127,24 @@ const resolveUserRoleVariant = role => {
                 >
                   Active
                 </VChip>
+                <div class="mt-3">
+           <VProgressLinear
+          v-model="profile"
+          :color="color"
+          height="12"
+          striped
+        >
+          <template #default="{ value }">
+            <span>{{ Math.ceil(value) }}%</span>
+          </template>
+      </VProgressLinear>
+      </div>
         </VCardText>
 
       
 
         <!-- 👉 Details -->
+     
         <VCardText class="pb-6">
           <h5 class="text-h5">
             Details