From 3f33811956d1ebdebc0a86b39193e896e3399140 Mon Sep 17 00:00:00 2001
From: "nasir@endelospay.com" <nasir@endelospay.com>
Date: Mon, 10 Jun 2024 21:38:02 +0500
Subject: [PATCH] fix

---
 resources/js/pages/patients/patients.vue      |  11 +-
 .../pages/providers/CompletedMeetingTab.vue   | 198 ++++++++++++++++++
 resources/js/pages/providers/NotesPanel.vue   |   4 +-
 .../js/pages/providers/PrescriptionPanel.vue  |  19 +-
 .../js/pages/providers/ProviderBioPanel.vue   | 179 +++++++++++++---
 .../pages/providers/ProviderTabOverview.vue   |  82 ++++----
 .../js/pages/providers/provider-profile.vue   |   1 +
 resources/js/pages/providers/providers.vue    |  19 +-
 typed-router.d.ts                             |   1 +
 9 files changed, 427 insertions(+), 87 deletions(-)
 create mode 100644 resources/js/pages/providers/CompletedMeetingTab.vue

diff --git a/resources/js/pages/patients/patients.vue b/resources/js/pages/patients/patients.vue
index 37d19e0..0470c5a 100644
--- a/resources/js/pages/patients/patients.vue
+++ b/resources/js/pages/patients/patients.vue
@@ -450,9 +450,9 @@ const onStateChange = async(newvalue)=> {
             <div class="d-flex flex-column ms-3">
                 <router-link
                   :to="{ name: 'admin-patient-profile', params: { id: item.id } }"
-                  class="text-high-emphasis  "
+                  class="highlighted"
                 >
-              <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
+              <span class="d-block font-weight-medium  text-truncate">{{ item.name }}</span>
                </router-link>
               <small>{{ item.post }}</small>
             </div>
@@ -634,3 +634,10 @@ const onStateChange = async(newvalue)=> {
     </VCard>
   </VDialog>
 </template>
+<style scoped>
+.highlighted {
+  /* Add your desired highlighting styles here */
+  font-weight: bold;
+  color: #a169ff; /* or any other color you prefer */
+}
+</style>
diff --git a/resources/js/pages/providers/CompletedMeetingTab.vue b/resources/js/pages/providers/CompletedMeetingTab.vue
new file mode 100644
index 0000000..79cbe82
--- /dev/null
+++ b/resources/js/pages/providers/CompletedMeetingTab.vue
@@ -0,0 +1,198 @@
+<script setup>
+const props = defineProps({
+  userData: {
+    type: Object,
+    required: true,
+  },
+})
+import moment from 'moment';
+import { onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+const editDialog = ref(false);
+const deleteDialog = ref(false);
+const search = ref('');
+const appointmentId = ref('');
+const defaultItem = ref({
+  id: -1,
+  avatar: '',
+  name: '',
+  email: '',
+  dob: '',
+  phone_no: '',
+});
+
+const editedItem = ref({ ...defaultItem.value });
+const editedIndex = ref(-1);
+const patientMeetingList = ref([]);
+const isLoading = ref(false);
+
+// Status options
+const selectedOptions = [
+  { text: 'Active', value: 1 },
+  { text: 'InActive', value: 2 },
+];
+
+const refVForm = ref(null);
+
+// Headers
+const headers = [
+  // { title: 'Appointment Id', key: 'id' },
+  { title: 'Patient Name', key: 'patient_name' },
+  // { key: 'appointment_date', sortable: false, title: 'Date' },
+  { key: 'start_time', title: 'Start Time' },
+  { key: 'end_time', title: 'End Time' },
+  { key: 'duration', title: 'Duration' },
+ // { title: 'ACTIONS', key: 'actions' },
+];
+
+
+
+
+
+function totalCallDuration(start_time, end_time) {
+  const startMoment = moment(start_time);
+  const endMoment = moment(end_time);
+  const duration = moment.duration(endMoment.diff(startMoment));
+  const hours = String(duration.hours()).padStart(2, '0');
+  const minutes = String(duration.minutes()).padStart(2, '0');
+  const seconds = String(duration.seconds()).padStart(2, '0');
+  
+  if (hours === '00' && minutes === '00') {
+    return `00:00:${seconds}`;
+  } else if (hours === '00') {
+    return `00:${minutes}`;
+  } else {
+    return `${hours}:${minutes}`;
+  }
+}
+const formatDate = (date) => {
+  const messageDate = new Date(date);
+  const options = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric', // Change from '2-digit' to 'numeric'
+    minute: '2-digit',
+    hour12: true, // Add hour12: true to get 12-hour format with AM/PM
+  };
+  const formattedDate = messageDate.toLocaleString('en-US', options).replace(/\//g, '-');
+  return `${formattedDate} `;
+};
+// Fetch and process the patient meeting list
+const getPatientMeetingList = async () => {
+  //store.dispatch('updateIsLoading', true);
+  //await store.dispatch('patientMeetingList', { id: route.params.id });
+ // store.dispatch('updateIsLoading', false);
+
+  let list = props.userData.completed_meetings;
+ 
+  patientMeetingList.value = list.map(history => ({
+    ...history,
+    appointment_date: formatDate(history.appointment_date),
+    start_time: formatDate(history.start_time),
+    end_time: formatDate(history.end_time),
+    duration: totalCallDuration(history.start_time, history.end_time),
+  }));
+  console.log(list);
+};
+
+// Lifecycle hooks
+onBeforeMount(() => {});
+onMounted(async () => {
+  await getPatientMeetingList();
+  
+});
+onUnmounted(() => {});
+const historyDetail = (item, value) => {
+    console.log('item',item.id ,value)
+    if(value == 'notes')
+    router.push('/admin/patient/meeting/notes/' + route.params.id + '/' + item.id);
+    if(value == 'prescription')
+    router.push('/admin/patient/meeting/prescription/' + route.params.id + '/' + item.id);
+}
+const menusVariant = [
+  'primary'
+];
+const options = [
+  {
+    title: 'Notes',
+    key: 'notes',
+  },
+  {
+    title: 'Prescription',
+    key: 'prescription',
+  },
+  
+]
+
+</script>
+
+<template>
+
+  <v-row>
+    <v-col cols="12" md="12">
+      <v-card title="Completed Meetings">
+        <v-card-text>
+          <v-row>
+            <v-col cols="12" offset-md="8" md="4">
+              <v-text-field
+                v-model="search"
+                label="Search"
+                placeholder="Search ..."
+                append-inner-icon="ri-search-line"
+                single-line
+                hide-details
+                dense
+                outlined
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-data-table
+          :headers="headers"
+          :items="patientMeetingList"
+          :search="search"
+          :items-per-page="5"
+          class="text-no-wrap"
+        >
+          <template #item.id="{ item }">{{ item.id }}</template>
+          <template #item.duration="{ item }">{{ item.duration }}</template>
+          <!-- Actions -->
+          <template #item.actions="{ item }">
+          <div class="demo-space-x">
+          <VMenu
+            v-for="menu in menusVariant"
+            :key="menu"
+          >
+            <template #activator="{ props }">
+              
+                <i class="ri-more-2-line cursor-pointer" style="font-size: 32px;" v-bind="props"></i>
+              
+            </template>
+
+            <v-list>
+            <v-list-item
+              v-for="opt in options"
+              :key="opt.value"
+              @click="historyDetail(item, opt.key)"
+            >
+              {{ opt.title }}
+            </v-list-item>
+          </v-list>
+          </VMenu>
+        </div>
+            <!-- <div class="d-flex gap-1">
+              <VBtn class="text-capitalize text-white" @click="historyDetail(item)"> Detail
+                            </VBtn>
+            </div> -->
+          </template>
+        </v-data-table>
+      </v-card>  
+    </v-col>
+  </v-row>
+</template>
diff --git a/resources/js/pages/providers/NotesPanel.vue b/resources/js/pages/providers/NotesPanel.vue
index d0d8e56..9a3d5fa 100644
--- a/resources/js/pages/providers/NotesPanel.vue
+++ b/resources/js/pages/providers/NotesPanel.vue
@@ -54,7 +54,7 @@ const downloadFile = (fileUrl) => {
 
         <!-- SECTION Timeline Item: Flight -->
         
-        <template v-for="(p_note, index) in props.notesData.patientNotes" :key="index" v-if="props.notesData.patientNotes.length>0">
+        <template v-for="(p_note, index) in props.notesData.notes" :key="index" v-if="props.notesData.notes.length>0">
             <VTimelineItem
           dot-color="primary"
           size="x-small"
@@ -71,7 +71,7 @@ const downloadFile = (fileUrl) => {
 
           <!-- 👉 Content -->
           <div class="app-timeline-text mb-1">
-            <span>{{ p_note.telemedPro.name }}</span>
+            <span>{{ p_note.provider_name }}</span>
             <VIcon
               size="20"
               icon="tabler-arrow-right"
diff --git a/resources/js/pages/providers/PrescriptionPanel.vue b/resources/js/pages/providers/PrescriptionPanel.vue
index 511ca52..e76f1c7 100644
--- a/resources/js/pages/providers/PrescriptionPanel.vue
+++ b/resources/js/pages/providers/PrescriptionPanel.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
+
 const store = useStore();
 const router = useRouter()
 const route = useRoute()
@@ -20,20 +21,20 @@ const prescription = computed(async () => {
 
 const getprescriptionList = async () => {
  
-    let prescriptions = props.prescriptionData.prescriptionData
+    let prescriptions = props.prescriptionData.prescriptions
     console.log("BeforeOverviewItem", prescriptions);
     // itemsPrescriptions.value = store.getters.getPrescriptionList
     for (let data of prescriptions) {
       let dataObject = {}
-         dataObject.name = data.prescription.name
-          dataObject.brand = data.prescription.brand
-          dataObject.from = data.prescription.from
-          dataObject.direction_quantity = data.prescription.direction_quantity
-          dataObject.dosage = data.prescription.dosage
-          dataObject.quantity = data.prescription.quantity
-          dataObject.refill_quantity = data.prescription.refill_quantity
+         dataObject.name = data.name
+          dataObject.brand = data.brand
+          dataObject.from = data.from
+          dataObject.direction_quantity = data.direction_quantity
+          dataObject.dosage = data.dosage
+          dataObject.quantity = data.quantity
+          dataObject.refill_quantity = data.refill_quantity
           dataObject.actions = ''
-          dataObject.id = data.prescription.id
+          dataObject.id = data.id
           dataObject.comments = data.comments
           dataObject.direction_one = data.direction_one
           dataObject.direction_two= data.direction_two
diff --git a/resources/js/pages/providers/ProviderBioPanel.vue b/resources/js/pages/providers/ProviderBioPanel.vue
index 6d92a8a..ef62be1 100644
--- a/resources/js/pages/providers/ProviderBioPanel.vue
+++ b/resources/js/pages/providers/ProviderBioPanel.vue
@@ -22,9 +22,9 @@ const isUpgradePlanDialogVisible = ref(false)
 const resolveUserStatusVariant = stat => {
   if (stat === 'pending')
     return 'warning'
-  if (stat === 'active')
+  if (stat === 'Active')
     return 'success'
-  if (stat === 'inactive')
+  if (stat === 'inActive')
     return 'secondary'
   
   return 'primary'
@@ -85,7 +85,7 @@ const resolveUserRoleVariant = role => {
               v-else
               class="text-5xl font-weight-medium"
             >
-              {{ avatarText(props.userData.telemed.name ) }} 
+              {{ avatarText(props.userData.telemed.name) }}
             </span>
           </VAvatar>
 
@@ -96,12 +96,13 @@ const resolveUserRoleVariant = role => {
 
           <!-- 👉 Role chip -->
           <VChip
-            :color="resolveUserRoleVariant('Patient').color"
+            :color="resolveUserRoleVariant('Provider').color"
             size="small"
             class="text-capitalize mt-4"
           >
-            Patient
+            Provider
           </VChip>
+           
         </VCardText>
 
       
@@ -130,7 +131,7 @@ const resolveUserRoleVariant = role => {
                 <span class="font-weight-medium">
                   Address:
                 </span>
-                <span class="text-body-1">{{ props.userData.telemed.address }}</span>
+                <span class="text-body-1">{{ props.userData.telemed.home_address }}</span>
               </VListItemTitle>
             </VListItem>
             <VListItem>
@@ -157,58 +158,65 @@ const resolveUserRoleVariant = role => {
                 <span class="text-body-1">{{ props.userData.telemed.zip_code }}</span>
               </VListItemTitle>
             </VListItem>
-            <VListItem>
-              <VListItemTitle class="text-sm">
-                <span class="font-weight-medium">
-                  Status:
-                </span>
-                <VChip
-                  size="small"
-                  :color="resolveUserStatusVariant('Active')"
-                  class="text-capitalize"
-                >
-                  Active
-                </VChip>
-              </VListItemTitle>
-            </VListItem>
-
-           
-
-           
+            
 
+            
             <VListItem>
               <VListItemTitle class="text-sm">
                 <span class="font-weight-medium">
                   Contact:
                 </span>
-                <span class="text-body-1">{{ props.userData.telemed.phone_no }}</span>
+                <span class="text-body-1">{{ props.userData.telemed.phone_number }}</span>
               </VListItemTitle>
             </VListItem>
-
-
             <VListItem>
               <VListItemTitle class="text-sm">
                 <span class="font-weight-medium">
-                  Country:
+                  Availability From:
                 </span>
-                <span class="text-body-1">{{ props.userData.telemed.country }}</span>
+                <span class="text-body-1">{{ props.userData.telemed.availability_from }}</span>
               </VListItemTitle>
             </VListItem>
+            <VListItem>
+              <VListItemTitle class="text-sm">
+                <span class="font-weight-medium">
+                  Availability To:
+                </span>
+                <span class="text-body-1">{{ props.userData.telemed.availability_to }}</span>
+              </VListItemTitle>
+            </VListItem>
+            <VListItem >
+              <VListItemTitle class="text-sm">
+                <span class="font-weight-medium">
+                  Status:
+                </span><VChip
+            :color="resolveUserStatusVariant(props.userData.telemed.status==1?'Active':'InActive')"
+            size="small"
+            class="text-capitalize"
+          >
+            {{ props.userData.telemed.status==1?"Active":'InActive' }}
+          </VChip>
+  
+              </VListItemTitle>
+            </VListItem>
+
           </VList>
         </VCardText>
 
         <!-- 👉 Edit and Suspend button -->
-        <VCardText class="d-flex justify-center">
+        <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>
@@ -218,7 +226,116 @@ const resolveUserRoleVariant = role => {
     <!-- !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">
+                  {{ props.userData.plans.list_two_title }}
+                </div>
+              </div>
+            </VListItem>
+          </VList>
+
+          <!-- 👉 Days -->
+          <div class="my-6">
+            <div class="d-flex mt-3 mb-2">
+              <h6 class="text-h6 font-weight-medium">
+                Days
+              </h6>
+              <VSpacer />
+              <h6 class="text-h6 font-weight-medium">
+                26 of 30 Days
+              </h6>
+            </div>
+
+            <!-- 👉 Progress -->
+            <VProgressLinear
+              rounded
+              :model-value="86"
+              height="8"
+              color="primary"
+            />
+
+            <p class="text-sm mt-1">
+              4 days remaining
+            </p>
+          </div>
+
+          <!-- 👉 Upgrade Plan -->
+          <VBtn
+            block
+            @click="isUpgradePlanDialogVisible = true"
+          >
+            Upgrade Plan
+          </VBtn>
+        </VCardText>
+      </VCard>
+    </VCol>
     <!-- !SECTION -->
   </VRow>
 
diff --git a/resources/js/pages/providers/ProviderTabOverview.vue b/resources/js/pages/providers/ProviderTabOverview.vue
index e97ed38..c7aacc9 100644
--- a/resources/js/pages/providers/ProviderTabOverview.vue
+++ b/resources/js/pages/providers/ProviderTabOverview.vue
@@ -1,9 +1,15 @@
 <script setup>
+const props = defineProps({
+  userData: {
+    type: Object,
+    required: true,
+  },
+})
+import CompletedMeetingTab from '@/pages/providers/CompletedMeetingTab.vue';
 import moment from 'moment';
 import { onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
-
 const store = useStore();
 const router = useRouter();
 const route = useRoute();
@@ -22,7 +28,7 @@ const defaultItem = ref({
 
 const editedItem = ref({ ...defaultItem.value });
 const editedIndex = ref(-1);
-const providerMeetingList = ref([]);
+const patientMeetingList = ref([]);
 const isLoading = ref(false);
 
 // Status options
@@ -36,29 +42,16 @@ const refVForm = ref(null);
 // Headers
 const headers = [
   // { title: 'Appointment Id', key: 'id' },
-  { title: 'Patient', key: 'patient_name' },
-  // { key: 'appointment_date', sortable: false, title: 'Date' },
-  { key: 'start_time', title: 'Start Time' },
-  { key: 'end_time', title: 'End Time' },
-  { key: 'duration', title: 'Duration' },
-  { title: 'ACTIONS', key: 'actions' },
+  { title: 'Patient Name', key: 'patient_name' },
+   { key: 'appointment_date', sortable: false, title: 'Date' },
+  //{ key: 'Meeting Date', title: 'Start Time' },
+  //{ key: 'end_time', title: 'End Time' },
+   //{ title: 'ACTIONS', key: 'actions' },
 ];
 
-// Utility functions
-function changeDateFormat(dateFormat) {
-  if (dateFormat) {
-    const [datePart, timePart] = dateFormat.split(' ');
-    const [year, month, day] = datePart.split('-');
-    const formattedDate = `${parseInt(month)}-${parseInt(day)}-${year}`;
-    return `${formattedDate} ${timePart}`;
-  }
-  return dateFormat;
-}
 
-function changeFormat(dateFormat) {
-  const [year, month, day] = dateFormat.split('-');
-  return `${parseInt(month)}-${parseInt(day)}-${year}`;
-}
+
+
 
 function totalCallDuration(start_time, end_time) {
   const startMoment = moment(start_time);
@@ -71,24 +64,35 @@ function totalCallDuration(start_time, end_time) {
   if (hours === '00' && minutes === '00') {
     return `00:00:${seconds}`;
   } else if (hours === '00') {
-    return `00:${minutes}:${seconds}`;
+    return `00:${minutes}`;
   } else {
     return `${hours}:${minutes}`;
   }
 }
-
+const formatDate = (date) => {
+  const messageDate = new Date(date);
+  const options = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric', // Change from '2-digit' to 'numeric'
+    minute: '2-digit',
+    hour12: true, // Add hour12: true to get 12-hour format with AM/PM
+  };
+  const formattedDate = messageDate.toLocaleString('en-US', options).replace(/\//g, '-');
+  return `${formattedDate} `;
+};
 // Fetch and process the patient meeting list
 const getPatientMeetingList = async () => {
-  store.dispatch('updateIsLoading', true);
-  await store.dispatch('providerMeetingList', { id: route.params.id });
-  store.dispatch('updateIsLoading', false);
+  //store.dispatch('updateIsLoading', true);
+  //await store.dispatch('patientMeetingList', { id: route.params.id });
+ // store.dispatch('updateIsLoading', false);
 
-  let list = store.getters.getProviderMeetingList;
-  providerMeetingList.value = list.map(history => ({
+  let list = props.userData.upcomingMeetings;
+ 
+  patientMeetingList.value = list.map(history => ({
     ...history,
-    appointment_date: changeFormat(history.appointment_date),
-    start_time: changeDateFormat(history.start_time),
-    end_time: changeDateFormat(history.end_time),
+    appointment_date: formatDate(history.appointment_date+' '+history.appointment_time),
     duration: totalCallDuration(history.start_time, history.end_time),
   }));
   console.log(list);
@@ -104,9 +108,9 @@ onUnmounted(() => {});
 const historyDetail = (item, value) => {
     console.log('item',item.id ,value)
     if(value == 'notes')
-    router.push('/admin/patient/meeting/notes/' + item.patient_id + '/' + item.id);
+    router.push('/admin/patient/meeting/notes/' + route.params.id + '/' + item.id);
     if(value == 'prescription')
-    router.push('/admin/patient/meeting/prescription/' + item.patient_id + '/' + item.id);
+    router.push('/admin/patient/meeting/prescription/' + route.params.id + '/' + item.id);
 }
 const menusVariant = [
   'primary'
@@ -122,12 +126,14 @@ const options = [
   },
   
 ]
+
 </script>
 
 <template>
+
   <v-row>
     <v-col cols="12" md="12">
-      <v-card title="Meetings">
+      <v-card title="UpComming Meetings">
         <v-card-text>
           <v-row>
             <v-col cols="12" offset-md="8" md="4">
@@ -146,12 +152,13 @@ const options = [
         </v-card-text>
         <v-data-table
           :headers="headers"
-          :items="providerMeetingList"
+          :items="patientMeetingList"
           :search="search"
           :items-per-page="5"
           class="text-no-wrap"
         >
           <template #item.id="{ item }">{{ item.id }}</template>
+          
           <template #item.duration="{ item }">{{ item.duration }}</template>
           <!-- Actions -->
           <template #item.actions="{ item }">
@@ -162,7 +169,7 @@ const options = [
           >
             <template #activator="{ props }">
               
-                <i class="ri-more-2-line cursor-pointer"  v-bind="props"></i>
+                <i class="ri-more-2-line cursor-pointer" style="font-size: 32px;" v-bind="props"></i>
               
             </template>
 
@@ -186,4 +193,5 @@ const options = [
       </v-card>  
     </v-col>
   </v-row>
+  <CompletedMeetingTab :user-data="props.userData"/>
 </template>
diff --git a/resources/js/pages/providers/provider-profile.vue b/resources/js/pages/providers/provider-profile.vue
index 83ed2e9..4f7c6d3 100644
--- a/resources/js/pages/providers/provider-profile.vue
+++ b/resources/js/pages/providers/provider-profile.vue
@@ -3,6 +3,7 @@ import NotesPanel from '@/pages/providers/NotesPanel.vue'
 import PrescriptionPanel from '@/pages/providers/PrescriptionPanel.vue'
 import ProviderBioPanel from '@/pages/providers/ProviderBioPanel.vue'
 import ProviderTabOverview from '@/pages/providers/ProviderTabOverview.vue'
+
 import UserTabNotifications from '@/views/apps/user/view/UserTabNotifications.vue'
 import { useStore } from 'vuex'
 const patientDtail = ref(null);
diff --git a/resources/js/pages/providers/providers.vue b/resources/js/pages/providers/providers.vue
index 759a4f0..abc7436 100644
--- a/resources/js/pages/providers/providers.vue
+++ b/resources/js/pages/providers/providers.vue
@@ -231,12 +231,12 @@ onMounted(() => {
             </VAvatar>
 
             <div class="d-flex flex-column ms-3">
-               <router-link
-                  :to="{ name: 'admin-provider-profile', params: { id: item.id } }"
-                  class="text-high-emphasis  "
-                >
-              <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
-               </router-link>
+              <router-link
+                :to="{ name: 'admin-provider-profile', params: { id: item.id } }"
+                class=" highlighted"
+              >
+                <span class="d-block font-weight-medium  text-truncate">{{ item.name }}</span>
+              </router-link>
               <small>{{ item.post }}</small>
             </div>
           </div>
@@ -414,3 +414,10 @@ onMounted(() => {
     </VCard>
   </VDialog>
 </template>
+<style scoped>
+.highlighted {
+  /* Add your desired highlighting styles here */
+  font-weight: bold;
+  color: #a169ff; /* or any other color you prefer */
+}
+</style>
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 1a79108..85fcc1d 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -163,6 +163,7 @@ declare module 'vue-router/auto/routes' {
     'patients-patient-bio-panel': RouteRecordInfo<'patients-patient-bio-panel', '/patients/PatientBioPanel', Record<never, never>, Record<never, never>>,
     'patients-patients': RouteRecordInfo<'patients-patients', '/patients/patients', Record<never, never>, Record<never, never>>,
     'patients-prescription-panel': RouteRecordInfo<'patients-prescription-panel', '/patients/PrescriptionPanel', Record<never, never>, Record<never, never>>,
+    'providers-completed-meeting-tab': RouteRecordInfo<'providers-completed-meeting-tab', '/providers/CompletedMeetingTab', Record<never, never>, Record<never, never>>,
     'providers-meeting-details': RouteRecordInfo<'providers-meeting-details', '/providers/meeting-details', Record<never, never>, Record<never, never>>,
     'providers-meetings': RouteRecordInfo<'providers-meetings', '/providers/meetings', Record<never, never>, Record<never, never>>,
     'providers-notes-panel': RouteRecordInfo<'providers-notes-panel', '/providers/NotesPanel', Record<never, never>, Record<never, never>>,