diff --git a/resources/js/@layouts/components/VerticalNavLink.vue b/resources/js/@layouts/components/VerticalNavLink.vue
index c232dd1..4812653 100644
--- a/resources/js/@layouts/components/VerticalNavLink.vue
+++ b/resources/js/@layouts/components/VerticalNavLink.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { layoutConfig } from '@layouts'
-import { can } from '@layouts/plugins/casl'
-import { useLayoutConfigStore } from '@layouts/stores/config'
+import { layoutConfig } from '@layouts';
+import { can } from '@layouts/plugins/casl';
+import { useLayoutConfigStore } from '@layouts/stores/config';
 import {
-  getComputedNavLinkToProp,
-  getDynamicI18nProps,
-  isNavLinkActive,
-} from '@layouts/utils'
+getComputedNavLinkToProp,
+getDynamicI18nProps,
+isNavLinkActive,
+} from '@layouts/utils';
 
 const props = defineProps({
   item: {
@@ -22,13 +22,14 @@ const hideTitleAndBadge = configStore.isVerticalNavMini()
 <template>
   <li
     v-if="can(item.action, item.subject)"
-    class="nav-link"
+    class="nav-link 22"
     :class="{ disabled: item.disable }"
   >
     <Component
       :is="item.to ? 'RouterLink' : 'a'"
       v-bind="getComputedNavLinkToProp(item)"
       :class="{ 'router-link-active router-link-exact-active': isNavLinkActive(item, $router) }"
+      
     >
       <Component
         :is="layoutConfig.app.iconRenderer || 'div'"
diff --git a/resources/js/@layouts/utils.js b/resources/js/@layouts/utils.js
index c9f75d6..34c38c7 100644
--- a/resources/js/@layouts/utils.js
+++ b/resources/js/@layouts/utils.js
@@ -46,18 +46,46 @@ export const resolveNavLinkRouteName = (link, router) => {
  */
 export const isNavLinkActive = (link, router) => {
   // Matched routes array of current route
-  const matchedRoutes = router.currentRoute.value.matched
+  const matchedRoutes = router.currentRoute.value.matched;
+  const currentRoute = router.currentRoute.value;
+
+  // Check if the parent menu item should be active
+   
+  if (isParentActive(currentRoute,router,link)) {
+    return true;
+  }
 
   // Check if provided route matches route's matched route
-  const resolveRoutedName = resolveNavLinkRouteName(link, router)
-  if (!resolveRoutedName)
-    return false
-  
-  return matchedRoutes.some(route => {
-    return route.name === resolveRoutedName || route.meta.navActiveLink === resolveRoutedName
-  })
-}
+  const resolveRoutedName = resolveNavLinkRouteName(link, router);
+  if (!resolveRoutedName) {
+    return false;
+  }
 
+  return matchedRoutes.some(route => {
+    return route.name === resolveRoutedName || route.meta.navActiveLink === resolveRoutedName;
+  });
+};
+const ParentMenuItemName = 'admin-patients';
+
+export const isParentActive = (route, router,link) => {
+  // Get the current route's activeParent meta property
+  const activeParent = route.meta.activeParent;
+
+  // Check if the activeParent is defined and not an empty string
+  if (activeParent && activeParent.trim().length > 0) {
+    // Find the parent route configuration
+    const parentRoute = router.options.routes.find(r => r.name === activeParent);
+console.log('fffff', link.to)
+    // Check if the parent route configuration exists
+    if (link.to) {
+      // Use the parent route's name or any other property as the parent menu item name
+      return link.to === activeParent;
+    }
+  }
+
+  // If the activeParent is not defined, an empty string, or the parent route configuration is not found, return false
+  return false;
+};
 /**
  * Check if nav group is active
  * @param {Array} children Group children
diff --git a/resources/js/constants.js b/resources/js/constants.js
index 341cf07..afe412d 100644
--- a/resources/js/constants.js
+++ b/resources/js/constants.js
@@ -18,6 +18,7 @@ export const PATIENT_PRESCRIPTION_STATUS_UPDATE_API =  MAIN_DOMAIN + "/api/admin
 export const SUBCRIPTIONS_LIST_API =  MAIN_DOMAIN + "/api/plans/"
 
 
+export const PROVIDER_FILTER_LIST_API =  MAIN_DOMAIN + "/api/admin/telemed-pro-list"
 export const PROVIDER_LIST_API =  MAIN_DOMAIN + "/api/admin/telemed-pro-list"
 export const PROVIDER_INFO_API =  MAIN_DOMAIN + "/api/admin/telemed-pro/"
 export const PROVIDER_UPDATE_API =  MAIN_DOMAIN + "/api/admin/telemed-pro-update/"
diff --git a/resources/js/pages/patients/CompletedMeetingTab.vue b/resources/js/pages/patients/CompletedMeetingTab.vue
index 953459b..c419e9e 100644
--- a/resources/js/pages/patients/CompletedMeetingTab.vue
+++ b/resources/js/pages/patients/CompletedMeetingTab.vue
@@ -161,6 +161,17 @@ const options = [
           class="text-no-wrap"
         >
           <template #item.id="{ item }">{{ item.id }}</template>
+          <template #item.provider_name="{ item }">
+            <div class="d-flex flex-column ms-3">
+                <router-link
+                  :to="{ name: 'admin-provider-profile', params: { id: item.provider_id } }"
+                  class="highlighted"
+                >
+              <span class="d-block font-weight-medium  text-truncate">{{ item.provider_name }}</span>
+               </router-link>
+            
+            </div>
+            </template>
           <template #item.duration="{ item }">{{ item.duration }}</template>
           <!-- Actions -->
           <template #item.actions="{ item }">
diff --git a/resources/js/pages/patients/patients.vue b/resources/js/pages/patients/patients.vue
index 81dee5c..b7a26a3 100644
--- a/resources/js/pages/patients/patients.vue
+++ b/resources/js/pages/patients/patients.vue
@@ -25,9 +25,9 @@ const subcriptionLists = ref(['All'])
 const isLoading=ref(false)
 
 const filter = ref({
-    gender: '',
-    state: '',
-    plan: '',
+    gender: 'All',
+    state: 'all',
+    plan: 'all',
 })
 // const gender =ref();
 // const city =ref();
diff --git a/resources/js/pages/providers/CompletedMeetingTab.vue b/resources/js/pages/providers/CompletedMeetingTab.vue
index 51f1ebb..bf4b2cb 100644
--- a/resources/js/pages/providers/CompletedMeetingTab.vue
+++ b/resources/js/pages/providers/CompletedMeetingTab.vue
@@ -157,6 +157,17 @@ const options = [
           class="text-no-wrap"
         >
           <template #item.id="{ item }">{{ item.id }}</template>
+            <template #item.patient_name="{ item }">
+            <div class="d-flex flex-column ms-3">
+                <router-link
+                  :to="{ name: 'admin-patient-profile', params: { id: item.patient_id } }"
+                  class="highlighted"
+                >
+              <span class="d-block font-weight-medium  text-truncate">{{ item.patient_name }}</span>
+               </router-link>
+              <small>{{ item.post }}</small>
+            </div>
+            </template>
           <template #item.duration="{ item }">{{ item.duration }}</template>
           <!-- Actions -->
           <template #item.actions="{ item }">
@@ -192,3 +203,10 @@ const options = [
     </v-col>
   </v-row>
 </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/providers.vue b/resources/js/pages/providers/providers.vue
index b3b136e..4d9b214 100644
--- a/resources/js/pages/providers/providers.vue
+++ b/resources/js/pages/providers/providers.vue
@@ -247,37 +247,40 @@ const deleteItemConfirm = async() => {
   closeDelete()
 }
 const getprovidersList = computed(async () => {
-  store.dispatch('updateIsLoading', true)
-  await store.dispatch('providersList')
-  console.log('getProvidersList',store.getters.getProvidersList)
+  
+  console.log('getprovidersFilterList',store.getters.getProvidersList)
     let list = store.getters.getProvidersList
     store.dispatch('updateIsLoading', false)
-  providersList.value = list
+    providersList.value = list
     return providersList.value
 });
 
 const getProviderFilter = async() => {
-//  console.log("filter", filter.value.plan, filter.value.gender, filter.value.state);
-  
-//   await store.dispatch('PatientFilter', {
-//     plan: filter.value.plan,
-//     gender: filter.value.gender,
-//     state: filter.value.state,
-//   })
-//   store.dispatch('updateIsLoading', false)
+  store.dispatch('updateIsLoading', true)
+  await store.dispatch('providersFilterList',{
+    gender: filter.value.gender.toLowerCase(),
+    state: filter.value.state,
+    availabilityFrom: filter.value.availabilityFrom,
+    availabilityTo:filter.value.availabilityTo,
+
+  })
+
+   store.dispatch('updateIsLoading', false)
  }
 
-onMounted(() => {
- 
+onMounted(async() => {
+  store.dispatch('updateIsLoading', true)
+  await store.dispatch('providersList')
+   store.dispatch('updateIsLoading', false)
 
 })
 const filter = ref({
   practics_state:'',
-    gender: '',
-    state: '',
+    gender: 'All',
+    state: 'All',
     specialty:'',
-    availabilityFrom:'',
-    availabilityTo:''
+    availabilityFrom:'All',
+    availabilityTo:'All'
     // plan: '',
 })
 // const onSubcriptionChange = async(newvalue)=> {
@@ -336,28 +339,24 @@ const onDateRangeChange = async(newvalue)=> {
 
 const timeOptions = computed(() => {
   const options = ['All'];
-  for (let hour = 0; hour < 24; hour++) {
-    for (let minute = 0; minute < 60; minute += 30) {
-      let period = 'AM';
-      let displayHour = hour;
 
-      if (hour === 0) {
-        displayHour = 12; // Convert 0 to 12 for 12:00 AM
-      } else if (hour === 12) {
-        period = 'PM'; // 12:00 PM
-      } else if (hour > 12) {
-        displayHour = hour - 12; // Convert to 12-hour format
-        period = 'PM';
-      }
-      
-      const timeString = `${displayHour.toString().padStart(2, '0')}:${minute
-        .toString()
-        .padStart(2, '0')} ${period}`;
+  // Loop through the hours from 12 to 23 (for 12:00 PM to 11:00 PM)
+  for (let hour = 12; hour <= 23; hour++) {
+    // Loop through the minutes (0 and 30)
+    for (let minute of [0, 30]) {
+      // Construct the time string
+      const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
       options.push(timeString);
     }
   }
+
+  // Add the time option for 24:00 (midnight)
+  options.push('24:00');
+
   return options;
 });
+
+
 </script>
 
 <template>
diff --git a/resources/js/plugins/1.router/additional-routes.js b/resources/js/plugins/1.router/additional-routes.js
index ed2be71..c6e0f35 100644
--- a/resources/js/plugins/1.router/additional-routes.js
+++ b/resources/js/plugins/1.router/additional-routes.js
@@ -132,11 +132,18 @@ export const routes = [
     path: '/admin/patients/patient-profile/:id',
     name: 'admin-patient-profile',
      component: () => import('@/pages/patients/patient-profile.vue'),
+    meta: {
+     activeParent: 'admin-patients'
+    }
+     
   },
    {
     path: '/admin/provider/provider-profile/:id',
     name: 'admin-provider-profile',
      component: () => import('@/pages/providers/provider-profile.vue'),
+    meta: {
+     activeParent: 'admin-providers'
+    }
   },
   {
     path: '/admin/providers/patientprofile/:id',
diff --git a/resources/js/store.js b/resources/js/store.js
index 32edf27..a690b24 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -33,6 +33,7 @@ import {
   PATIENT_UPDATE_API,
   PROFILE_UPDATE_API,
   PROVIDER_DELETE_API,
+  PROVIDER_FILTER_LIST_API,
   PROVIDER_LIST_API,
   PROVIDER_MEETING_LIST_API,
   PROVIDER_UPDATE_API,
@@ -216,6 +217,7 @@ export default createStore({
     },
     async PatientFilter({ commit,state }, payload) {
       commit('setLoading', true)
+      
       await axios.post(PATIENT_FILTER_LIST_API, {
         plan: payload.plan ? payload.plan: 'all' ,
         gender: payload.gender ? payload.gender: 'all',
@@ -341,10 +343,58 @@ export default createStore({
             console.error('Error:', error);
           });
     },
+    async providersFilterList({ commit }, payload) {
+      commit('setLoading', true)
+      if(payload.state == 'All')
+        payload.state = payload.state.toLowerCase(); 
+      if(payload.availabilityFrom == 'All')
+        payload.availabilityFrom = payload.availabilityFrom.toLowerCase(); 
+      if(payload.availabilityTo == 'All')
+        payload.availabilityTo = payload.availabilityTo.toLowerCase(); 
+      console.log(localStorage.getItem('admin_access_token'))
+      await axios.post(PROVIDER_FILTER_LIST_API, {
+        gender:payload.gender? payload.gender:'all',
+        state: payload.state? payload.state:'all',
+        availability_from: payload.availabilityFrom ? payload.availabilityFrom:'all',
+        availability_to:payload.availabilityTo?payload.availabilityTo : 'all'
+      }, {
+        headers: {
+            'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+      })  .then(response => {
+              commit('setLoading', false)
+            console.log('Response:', response.data.patients);
+            let dataArray =[]
+            for (let data of response.data.patients) {
+              let dataObject = {}
+              dataObject.name = data.first_name + ' ' + data.last_name
+              dataObject.first_name = data.first_name 
+              dataObject.last_name =  data.last_name
+              dataObject.email = data.email
+              // dataObject.dob = data.dob
+              dataObject.phone_no = data.phone_number
+              dataObject.avatar = '',
+              dataObject.id = data.id,
+              dataArray.push(dataObject)
+            }
+            console.log(dataArray)
+            commit('setProvidersList',dataArray)
+  
+          })
+          .catch(error => {
+            commit('setLoading', false)
+            console.error('Error:', error);
+          });
+    },
     async providersList({ commit }, payload) {
       commit('setLoading', true)
       console.log(localStorage.getItem('admin_access_token'))
-      await axios.post(PROVIDER_LIST_API, {}, {
+      await axios.post(PROVIDER_LIST_API, {
+        gender: 'all',
+        state: 'all',
+        availabilityFrom: 'all',
+        availabilityTo: 'all'
+      }, {
         headers: {
             'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
         }