fix

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: {
@@ -29,6 +29,7 @@ const hideTitleAndBadge = configStore.isVerticalNavMini()
       :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'"

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
+  const resolveRoutedName = resolveNavLinkRouteName(link, router);
+  if (!resolveRoutedName) {
+    return false;
+  }
 
   return matchedRoutes.some(route => {
-    return route.name === resolveRoutedName || route.meta.navActiveLink === resolveRoutedName
-  })
-}
+    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

resources/js/components/dialogs/AddEditAddressDialog.vue

@@ -69,11 +69,7 @@ const addressTypes = [
     >
       <VCardText class="pt-5">
         <!-- 👉 dialog close btn -->
-        <DialogCloseBtn
-          variant="text"
-          size="default"
-          @click="resetForm"
-        />
+     
 
         <!-- 👉 Title -->
         <div class="text-center mb-6">

resources/js/constants.js

@@ -3,12 +3,22 @@ let MAIN_DOMAIN = "http://127.0.0.1:8000";
 //let MAIN_DOMAIN = "http://telemedpro.test";
 export const ADMIN_LOGIN_API = MAIN_DOMAIN + "/api/admin/login"
 
+export const PATIENT_FILTER_LIST_API =  MAIN_DOMAIN + "/api/admin/patient-list/"
 export const PATIENT_LIST_API =  MAIN_DOMAIN + "/api/admin/patient-list"
 export const PATIENT_INFO_API =  MAIN_DOMAIN + "/api/admin/patient/"
 export const PATIENT_MEETING_LIST_API =  MAIN_DOMAIN + "/api/admin/get-meeting-history/"
 export const PATIENT_UPDATE_API =  MAIN_DOMAIN + "/api/admin/patient-update/"
 export const PATIENT_DELETE_API =  MAIN_DOMAIN + "/api/admin/patient-delete/"
 
+
+export const PATIENT_LABKIT_LIST_API =  MAIN_DOMAIN + "/api/admin/patient-labkit-list/"
+export const PATIENT_LABKIT_STATUS_UPDATE_API =  MAIN_DOMAIN + "/api/admin/labkit-status-update/"
+export const PATIENT_PRESCRIPTION_STATUS_UPDATE_API =  MAIN_DOMAIN + "/api/admin/patient-prescription-status-update/"
+
+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/"
@@ -43,4 +53,15 @@ export const ADMIN_LAB_KIT_UPDATE_API = MAIN_DOMAIN + "/api/admin/labkit-update/
 export const ADMIN_LAB_KIT_ADD_API = MAIN_DOMAIN + "/api/admin/labkit-list-create"
 export const ADMIN_LAB_KIT_DELETE_API = MAIN_DOMAIN + "/api/admin/labkit-delete/"
 
+export const ADMIN_PATIENT_DETAIL_API = MAIN_DOMAIN + "/api/admin/patient-full-detail/"
+export const ADMIN_PROVIDER_DETAIL_API = MAIN_DOMAIN + "/api/admin/telemed-full-detail/"
+
+export const ADMIN_PATIENT_PROFILE_API = MAIN_DOMAIN + "/api/admin/get-question-builder/"
+
+export const ADMIN_PROVIDER_REPORT_API = MAIN_DOMAIN + "/api/admin/provider-report"
+
+export const ADMIN_PROVIDER_REPORT_POST_API = MAIN_DOMAIN + "/api/admin/provider-report-post"
+
+export const ADMIN_GET_ORDER_API = MAIN_DOMAIN + "/api/admin/get-order-data"
+
 

resources/js/navigation/vertical/dashboard.js

@@ -47,11 +47,15 @@ export default [
   },
   
   {
-    title: 'Medicines',
+    title: 'Prodcuts',
     icon: { icon: 'ri-medicine-bottle-line' },
-    to: 'admin-medicines',
+    to: 'admin-products',
   },
-
+// {
+//     title: 'Orders',
+//     icon: { icon: 'ri-medicine-bottle-line' },
+//     to: 'admin-orders',
+//   },
 {
     title: 'Settings',
     icon: { icon: 'ri-settings-4-line' },
@@ -83,9 +87,25 @@ export default [
       },
     ]  
     
-  }
+},
+  {
+    title: 'Reports',
+    icon: { icon: 'ri-file-chart-line' },
+    children: [
+      {
+        title: 'Provider Reports',
+        to: 'admin-provider-report',
+        icon: {
+        icon: 'ri-group-line',
+        },
      
         
+      },
+    
+    ]  
+    
+}
+   
   // {
   //   title: 'Front Pages',
   //   icon: { icon: 'ri-file-copy-line' },

resources/js/pages/apps/ecommerce/order/list/index.vue

@@ -1,7 +1,9 @@
 <script setup>
-import mastercard from '@images/logos/mastercard.png'
-import paypal from '@images/logos/paypal.png'
+import mastercard from '@images/logos/mastercard.png';
+import paypal from '@images/logos/paypal.png';
+import { useStore } from 'vuex';
 
+const store = useStore();
 const widgetData = ref([
   {
     title: 'Pending Payment',
@@ -132,7 +134,16 @@ const {
     orderBy,
   },
 }))
+onMounted(async () => {
+  store.dispatch('updateIsLoading', true);
+  await store.dispatch('orderList');
+  store.dispatch('updateIsLoading', false);
 
+  let list = store.getters.getOrderList;
+
+  console.log(list);
+  
+});
 const orders = computed(() => ordersData.value.orders)
 const totalOrder = computed(() => ordersData.value.total)
 

resources/js/pages/labs/labs-kit.vue

@@ -64,10 +64,10 @@ const headers = [
   },
 
  
-  {
-    title: 'ACTIONS',
-    key: 'actions',
-  },
+  // {
+  //   title: 'ACTIONS',
+  //   key: 'actions',
+  // },
 ]
 
 const resolveStatusVariant = status => {
@@ -187,8 +187,8 @@ onMounted(() => {
       <VCardText >
           <VRow>
        
-          <VCol cols="12" md="8" class="d-flex align-center">
-          <VBtn color="primary" prepend-icon="ri-add-line" @click="addDialog = true">
+          <VCol cols="12" md="8" class="d-flex align-center" >
+          <VBtn color="primary" prepend-icon="ri-add-line" @click="addDialog = true" style="display: none;">
             New Lab Kit
           </VBtn>
           </VCol>

resources/js/pages/pages/patient-labkits/labkit.vue

@@ -0,0 +1,199 @@
+<script setup>
+import { onBeforeMount, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+const store = useStore()
+const route = useRoute()
+const router = useRouter()
+const patientId = route.params.patient_id;
+const search = ref('')
+const getSelectedCart = ref('');
+const patientLabKitList = ref([])
+const getIsTonalSnackbarVisible = ref(false);
+const labkitStatus = ref('');
+
+
+
+onBeforeMount(async () => {});
+onMounted(async () => {
+  store.dispatch('updateIsLoading', true)
+  await store.dispatch('patientLabKitList', {
+    patient_id : patientId
+  })
+  console.log('patientLabKitList',store.getters.getPatientLabKitList.cart)
+  store.dispatch('updateIsLoading', false)
+ 
+});
+const getPatientLabKitList = computed(async () => {
+  patientLabKitList.value =  store.getters.getPatientLabKitList.cart;
+    
+  return patientLabKitList.value;  
+    
+});
+
+const onChange = (id)=> {
+  getSelectedCart.value = id;
+  
+}
+const onStatusChange = async(status) => {
+  console.log('Selected status:', status, getSelectedCart.value);
+  store.dispatch('updateIsLoading', true)
+  await store.dispatch('updateLabkitListStatus', {
+    cart_id : getSelectedCart.value,
+    status: status
+  })
+  labkitStatus.value =   store.getters.getPatientLabKitStatus.status;
+  getIsTonalSnackbarVisible.value = true;
+};
+
+onUnmounted(async () => {});
+const headers = [
+  {
+    title: 'NAME',
+    key: 'first_name',
+  },
+  {
+    title: 'Address',
+    key: 'shipping_address1',
+  },
+  {
+    title: 'Amount',
+    key: 'shipping_amount',
+  },
+  {
+    title: 'Status',
+    key: 'status',
+  },
+]
+const breadcrums = [
+    {
+        title: 'Patient',
+        disabled: false,
+        to: '/admin/patients',
+    },
+    {
+        title: 'Labkit',
+        disabled: false,
+    }
+    
+];
+
+
+</script>
+
+<template>
+  <v-breadcrumbs :items="breadcrums" class="text-primary pt-0 pb-0 mb-5">
+        <template v-slot:divider style="padding-top:0px; padding-bottom:0px">
+            >
+        </template>
+    </v-breadcrumbs>
+  <v-row>
+    <VSnackbar class="pl-0"  v-model="getIsTonalSnackbarVisible" :timeout="50000" location="top end" variant="flat"
+              color="success">
+              <VIcon
+                    class="ri-success-line success-icon pl-0"
+                  /> {{labkitStatus }}
+            </VSnackbar>
+    <v-col cols="12" md="12" v-if="getPatientLabKitList">
+      <v-card title="LabKits">
+      <VCardText >
+          <VRow>
+            <VCol
+              cols="12"
+              offset-md="8"
+              md="4"
+            >
+              <VTextField
+                v-model="search"
+                label="Search"
+                placeholder="Search ..."
+                append-inner-icon="ri-search-line"
+                single-line
+                hide-details
+                dense
+                outlined
+              />
+            </VCol>
+          </VRow>
+        </VCardText>
+      <VDataTable
+        :headers="headers"
+        :items="patientLabKitList"
+        :search="search"
+        :items-per-page="5"
+        class="text-no-wrap"
+      >
+      <template #item.id="{ item }">
+    {{ item.id }}
+  </template>
+        <!-- full name -->
+        <template #item.first_name="{ item }">
+          <div class="d-flex align-center">
+            <!-- avatar -->
+            <VAvatar
+              size="32"
+              :color="item.avatar ? '' : 'primary'"
+              :class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
+              :variant="!item.avatar ? 'tonal' : undefined"
+            >
+              <VImg
+                v-if="item.avatar"
+                :src="item.avatar"
+              />
+              <span
+                v-else
+                class="text-sm"
+              >{{ avatarText(item.first_name) }}</span>
+            </VAvatar>
+
+            <div class="d-flex flex-column ms-3">
+              <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.first_name }} {{ item.last_name }}</span>
+              <!-- <small>{{ item.post }}</small> -->
+            </div>
+          </div>
+        </template>
+        <!-- <template #item.first_name="{ item }">
+          <div class="d-flex align-center">
+            <span>{{ item.first_name }} {{ item.last_name }}</span>
+          </div>
+        </template> -->
+        <template #item.shipping_address1="{ item }">
+          <div class="d-flex align-center">
+            
+                
+            <span>{{ item.shipping_address1 }},
+               {{ item.shipping_address2 }},
+              {{ item.shipping_city }},
+              {{item.shipping_state}},
+              {{ item.shipping_zipcode}},
+              {{ item.shipping_country }}
+              </span>
+            
+          </div>
+        </template>
+        
+
+        
+
+        <!-- status -->
+        <template #item.status="{ item }">
+          <VSelect
+                  v-model="item.status"
+                  placeholder="Status"
+                  density="comfortable"
+                  :items="['Pending', 'Shipped', 'Delivered', 'Transit', 'Recevied', 'Result']"
+                  @update:model-value="onStatusChange"
+                  @click="onChange(item.id)"
+                  
+          />
+        </template>
+      </VDataTable>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+<style scoped>
+.v-snackbar__content{
+  padding: 0px !important;
+}
+</style>

resources/js/pages/pages/patient-meetings/prescription.vue

@@ -8,7 +8,7 @@ const itemsPrescriptions = ref([]);
 const patientId = route.params.patient_id;
 const appointmentId = route.params.id;
 const prescription = computed(async () => {
-    console.log('computed=====')
+    // console.log('computed=====')
     await getprescriptionList()
     // await store.dispatch('getHistoryPrescription')
     // notes.value = store.getters.getHistoryPrescription;
@@ -22,7 +22,7 @@ const getprescriptionList = async () => {
         appointment_id: appointmentId,
     })
     let prescriptions = store.getters.getPrescriptionList
-    console.log("BeforeOverviewItem", prescriptions);
+    // console.log("BeforeOverviewItem", prescriptions);
     // itemsPrescriptions.value = store.getters.getPrescriptionList
     for (let data of prescriptions) {
         let dataObject = {}
@@ -35,6 +35,7 @@ const getprescriptionList = async () => {
         dataObject.from = data.from
         dataObject.name = data.name
         dataObject.quantity = data.quantity
+        dataObject.id = data.id
         dataObject.doctor = data.doctor.name
         dataObject.refill_quantity = data.refill_quantity
         dataObject.status = data.status
@@ -122,6 +123,9 @@ const headers = [
 const prescriptionIndex = ref([]);
 const prescriptionItem = ref(-1)
 const prescriptionDialog = ref(false)
+const getSelectedCart = ref('');
+const getIsTonalSnackbarVisible = ref(false);
+const prescriptionStatus = ref('');
 const selectedItem = ref(null);
 const showDetail = item => {
     // console.log("id",item);
@@ -148,6 +152,23 @@ const breadcrums = [
     }
     
 ];
+
+const onChange = (id)=> {
+  getSelectedCart.value = id;
+  
+}
+const onStatusChange = async(status) => {
+  console.log('Selected status:', status, getSelectedCart.value);
+   store.dispatch('updateIsLoading', true)
+   await store.dispatch('updatePrescriptionStatus', {
+      prescription_id : getSelectedCart.value,
+      status: status
+  })
+  console.log('Selected:', store.getters.getPatientPrescriptionStatus);
+  prescriptionStatus.value =   store.getters.getPatientPrescriptionStatus.status;
+  getIsTonalSnackbarVisible.value = true;
+};
+
 </script>
 <template>
     <v-breadcrumbs :items="breadcrums" class="text-primary pt-0 pb-0 mb-5">
@@ -155,6 +176,12 @@ const breadcrums = [
             >
         </template>
     </v-breadcrumbs>
+    <VSnackbar class="pl-0"  v-model="getIsTonalSnackbarVisible" :timeout="50000" location="top end" variant="flat"
+              color="success">
+              <VIcon
+                    class="ri-success-line success-icon pl-0"
+                  /> {{prescriptionStatus }}
+            </VSnackbar>
     <v-row>
     <v-col cols="12" md="12" v-if="itemsPrescriptions">
       <v-card title="Prescriptions" v-if="prescription">
@@ -191,13 +218,24 @@ const breadcrums = [
         <!-- full name -->
         <!-- status -->
         <template #item.status="{ item }">
+          <VSelect
+              v-model="item.status"
+              placeholder="Status"
+              density="comfortable"
+              :items="['Pending', 'Shipped', 'Delivered', 'Transit', 'Recevied', 'Result']"
+              @update:model-value="onStatusChange"
+              @click="onChange(item.id)"
+          />
+         </template>
+
+        <!-- <template #item.status="{ item }">
           <VChip
             :color="getStatusColor(item.status)"
             density="comfortable"
           >
             {{ getStatusColor(item.status) }}
           </VChip>
-        </template>
+        </template> -->
 
         <!-- Actions -->
         <template #item.id="{ item }">

resources/js/pages/patients/CompletedMeetingTab.vue

@@ -0,0 +1,209 @@
+<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: 'Provider Name', key: 'provider_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.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 }">
+          <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>

resources/js/pages/patients/NotesPanel.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+const patientId = route.params.patient_id;
+const appointmentId = route.params.id;
+const notes = ref([]);
+const props = defineProps({
+  notesData: {
+    type: Object,
+    required: true,
+  },
+})
+
+
+const formatDateDate = (date) => {
+    const messageDate = new Date(date);
+    const options = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    };
+    return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
+};
+
+const downloadFile = async (fileUrl, fileName = 'downloadedFile.png') => {
+      try {
+        const response = await fetch(fileUrl);
+        if (!response.ok) throw new Error('Network response was not ok');
+        const blob = await response.blob();
+        const link = document.createElement('a');
+        const url = window.URL.createObjectURL(blob);
+        link.href = url;
+        link.download = fileName;
+        document.body.appendChild(link);
+        link.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(link);
+      } catch (error) {
+        console.error('Download failed', error);
+      }
+    };
+
+
+</script>
+
+<template>
+     
+
+  <VCard title="Notes">
+    <VCardText>
+      <VTimeline
+        side="end"
+        align="start"
+        line-inset="8"
+        truncate-line="both"
+        density="compact"
+      >
+
+        <!-- SECTION Timeline Item: Flight -->
+        
+        <template v-for="(p_note, index) in props.notesData.patientNotes" :key="index" v-if="props.notesData.patientNotes.length>0">
+            <VTimelineItem
+          dot-color="primary"
+          size="x-small"
+        >
+          <!-- 👉 Header -->
+          <div class="d-flex justify-space-between align-center gap-2 flex-wrap">
+            <span class="app-timeline-title" v-if="p_note.note_type=='Notes'">
+              {{p_note.note}}
+            </span>
+          <span class="app-timeline-title" v-if="p_note.note_type == 'file'">
+              
+          <VIcon>ri-attachment-2</VIcon>  <button @click="downloadFile(p_note.note,'noteFile.png')">Download Image</button>
+         
+          </span>
+            <span class="app-timeline-meta">{{ formatDateDate(p_note.created_at) }}</span>
+            <!-- <span></span> -->
+          </div>
+
+          <!-- 👉 Content -->
+          <div class="app-timeline-text mb-1">
+          <router-link
+                :to="{ name: 'admin-provider-profile', params: { id: p_note.provider_id } }"
+                class=""
+              >
+                <span class="">{{ p_note.provider_name }}</span>
+              </router-link>
+         
+            <VIcon
+              size="20"
+              icon="tabler-arrow-right"
+              class="mx-2 flip-in-rtl"
+            />
+            <!-- <span>Heathrow Airport, London</span> -->
+          </div>
+
+          <!-- <p class="app-timeline-meta mb-2">
+            6:30 AM
+          </p> -->
+
+          <!-- <div class="app-timeline-text d-flex align-center gap-2">
+            <div>
+              <VImg
+                :src="pdf"
+                :width="22"
+              />
+            </div>
+
+            <span>booking-card.pdf</span>
+          </div> -->
+        </VTimelineItem>
+        </template>
+
+
+     
+        <!-- !SECTION -->
+
+        <!-- !SECTION -->
+      </VTimeline>
+    </VCardText>
+  </VCard>
+</template>

resources/js/pages/patients/PatienTabOverview.vue

@@ -0,0 +1,199 @@
+<script setup>
+const props = defineProps({
+  userData: {
+    type: Object,
+    required: true,
+  },
+})
+import CompletedMeetingTab from '@/pages/patients/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();
+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: 'Provider', key: 'provider_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.upcomingMeetings;
+ 
+  patientMeetingList.value = list.map(history => ({
+    ...history,
+      appointment_date: formatDate(history.appointment_date+' '+history.appointment_time),
+    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="UpComming 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>
+  <CompletedMeetingTab :user-data="props.userData"/>
+</template>

resources/js/pages/patients/PatientBioPanel.vue

@@ -0,0 +1,325 @@
+<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>

resources/js/pages/patients/PatientLabTest.vue

@@ -0,0 +1,211 @@
+<script setup>
+const props = defineProps({
+  userData: {
+    type: Object,
+    required: true,
+  },
+})
+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 patientLabList = 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: 'Lab Kit Name', key: 'name' },
+  // { key: 'appointment_date', sortable: false, title: 'Date' },
+  { key: 'address', title: 'Address' },
+  { key: 'amount', title: 'Amount' },
+  { key: 'status', title: 'Status' },
+//  { title: 'ACTIONS', key: 'actions' },
+];
+
+
+
+
+
+
+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 getPatientLabList = async () => {
+  //store.dispatch('updateIsLoading', true);
+  //await store.dispatch('patientMeetingList', { id: route.params.id });
+ // store.dispatch('updateIsLoading', false);
+
+  let list = props.userData.labkit;
+ 
+  patientLabList.value = list
+  console.log(list);
+};
+
+// Lifecycle hooks
+onBeforeMount(() => {});
+onMounted(async () => {
+  await getPatientLabList();
+  
+});
+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',
+  },
+  
+]
+const getStatusColor = (status) => {
+    switch (status) {
+        case 'pending':
+            return 'warning'; // Use Vuetify's warning color (typically yellow)
+        case 'shipped':
+            return '#45B8AC'; // Use Vuetify's primary color (typically blue)
+        case 'delivered':
+            return 'success';
+        case 'returned':
+            return 'red';
+        case 'results':
+            return 'blue';
+        default:
+            return 'grey'; // Use Vuetify's grey color for any other status
+    }
+};
+</script>
+
+<template>
+
+  <v-row>
+    <v-col cols="12" md="12" >
+      <v-card title="Lab Kits">
+        <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="patientLabList"
+          :search="search"
+          :items-per-page="5"
+          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.status="{ item }">
+          <VChip
+            :color="getStatusColor(item.status)"
+            density="comfortable"
+          >
+            {{ item.status}}
+          </VChip>
+        </template>
+          <template #item.address="{ item }">{{ item.shipping_address1 }} <br/>{{ item.shipping_city }} {{ item.shipping_state }} {{ item.shipping_zipcode }}</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>

resources/js/pages/patients/PatientQuestionProfile.vue

@@ -0,0 +1,525 @@
+<script setup>
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import QuestionProgressBar from '../patients/QuestionProgressBar.vue';
+import questionsJson from '../patients/questions_parse.json';
+const router = useRouter()
+const route = useRoute();
+const store = useStore()
+const questionsJsonData = ref(questionsJson)
+const answers = ref(null)
+const QuestionsAnswers = ref([]);
+const username = ref(null);
+const email = ref(null);
+const phone = ref(null);
+const address1 = ref(null);
+const dob = ref(null);
+const agePatient = ref(null);
+const isMobile = ref(window.innerWidth <= 768);
+const patientId = route.params.id
+
+onMounted(async () => {
+    // console.log('patient id',props.patient_id)
+    const navbar = document.querySelector('.layout-navbar');
+    const callDiv = document.querySelector('.layout-page-content');
+    if (navbar) {
+        navbar.style.display = 'block';
+    }
+    if (callDiv)
+        callDiv.style.padding = '1.5rem';
+    store.dispatch('updateIsLoading', true)
+    await store.dispatch('patientDetial',{id:patientId})
+    await store.dispatch('getAgentQuestionsAnswers',{patient_id:patientId})
+    username.value = store.getters.getPatientDetail.patient.first_name + ' ' + store.getters.getPatientDetail.patient.last_name;
+    email.value = store.getters.getPatientDetail.patient.email
+    phone.value = store.getters.getPatientDetail.patient.phone_no
+    dob.value = changeFormat(store.getters.getPatientDetail.patient.dob)
+    agePatient.value = calculateAge(store.getters.getPatientDetail.patient.dob) + " Year"
+    address1.value = store.getters.getPatientDetail.patient.address + ' ' +
+        store.getters.getPatientDetail.patient.city + ' ' +
+        store.getters.getPatientDetail.patient.state + ' ' +
+        store.getters.getPatientDetail.patient.country;
+
+    // address.value = patient_address;
+
+    answers.value = store.getters.getPatientAnswers
+    // console.log('questionsJsonData', questionsJsonData.value)
+    // console.log('API Answers', answers.value)
+    createFinalArray();
+    store.dispatch('updateIsLoading', false)
+    window.addEventListener('resize', checkMobile);
+});
+
+function changeFormat(dateFormat) {
+    const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
+    const year = parseInt(dateParts[0]);
+    const month = parseInt(dateParts[1]); // No need for padding
+    const day = parseInt(dateParts[2]); // No need for padding
+
+    // Create a new Date object with the parsed values
+    const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object
+
+    // Format the date as mm-dd-yyyy
+    const formattedDate = month + '-' + day + '-' + date.getFullYear();
+
+    return formattedDate;
+}
+
+// function changeFormat(dateFormat) {
+//     const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
+//     const year = parseInt(dateParts[0]);
+//     const month = String(dateParts[1]).padStart(2, '0'); // Pad single-digit months with leading zero
+//     const day = String(dateParts[2]).padStart(2, '0'); // Pad single-digit days with leading zero
+
+//     // Create a new Date object with the parsed values
+//     const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object
+
+//     // Format the date as mm-dd-yyyy
+//     const formattedDate = month + '-' + day + '-' + date.getFullYear();
+
+//     return formattedDate;
+// }
+const createFinalArray = () => {
+    questionsJsonData.value.forEach(question => {
+        const { label, key, type } = question;
+        if (answers.value.hasOwnProperty(key)) {
+            QuestionsAnswers.value.push({
+                label,
+                key,
+                type,
+                value: answers.value[key]
+            });
+        }
+    });
+    // console.log('------finalArray ', QuestionsAnswers.value)
+};
+
+const checkMobile = () => {
+    isMobile.value = window.innerWidth <= 768;
+};
+const calculateAge = (dateOfBirth) => {
+    const today = new Date();
+    const birthDate = new Date(dateOfBirth);
+    let age = today.getFullYear() - birthDate.getFullYear();
+    const monthDiff = today.getMonth() - birthDate.getMonth();
+
+    if (
+        monthDiff < 0 ||
+        (monthDiff === 0 && today.getDate() < birthDate.getDate())
+    ) {
+        age--;
+    }
+
+    return age;
+}
+</script>
+
+<template>
+    <v-row class='mb-2'>
+        <!-- <VCol cols="12" md="12" class="mb-4 " v-if="username || phone" style="font-size: 16px;">
+            <VCard>
+                <VCardText>
+                    <h3 class="mb-2"> {{ username }}</h3>
+                <div class="mb-1">
+                    <VTooltip location="left" activator="parent" transition="scroll-x-transition">
+                        Email
+                    </VTooltip>
+                    <VIcon icon="ri-mail-line" size="20" class="me-2" />{{ email }}
+                </div>
+                <div class="mb-2">
+                    <VTooltip location="left" activator="parent" transition="scroll-x-transition">
+                        Age
+                    </VTooltip>
+                    <VIcon icon="ri-calendar-event-line" title="Age" size="20" class="me-2" />{{ agePatient }}
+                </div>
+                <div class="mb-2">
+                    <VTooltip location="left" activator="parent" transition="scroll-x-transition">
+                        Date of Birth
+                    </VTooltip>
+                    <VIcon icon="ri-calendar-line" size="20" class="me-2" />{{ dob }}
+                </div>
+
+                <div class="mb-2">
+                    <VTooltip location="left" activator="parent" transition="scroll-x-transition">
+                        Address
+                    </VTooltip>
+                    <VIcon icon="ri-map-pin-line" size="20" class="me-2" />{{ address1 }}
+                </div>
+                <div>
+                    <VTooltip location="left" activator="parent" transition="scroll-x-transition">
+                        Contact Number
+                    </VTooltip>
+                    <VIcon icon="ri-phone-line" size="20" class="me-2" />{{ phone }}
+                </div>
+                </VCardText>
+            </VCard>
+        </VCol> -->
+        <v-col cols="12" md="12">
+            <VList class="">
+                <VListItem class="">
+                    <VListItemTitle class="d-flex align-center justify-space-between bg-dark mt-1"
+                        style="padding: 5px;">
+                        <div :class="isMobile ? '' : 'w-40'">
+                            <p class="mb-0" :class="isMobile ? 'heading-text-m' : 'heading-text-d'"><b>SYMPTOM
+                                    CHECKLIST</b></p>
+                        </div>
+                        <div class="d-flex align-center" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">
+                            <p class="mb-0"><b>MILD</b>
+                            </p>
+                        </div>
+                        <div class="d-flex align-center" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">
+                            <p class="mb-0"><b>MODERATE</b>
+                            </p>
+                        </div>
+                        <div class="d-flex align-center" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">
+                            <p class="mb-0"><b>SEVERE</b>
+                            </p>
+                        </div>
+                    </VListItemTitle>
+                </VListItem>
+                <!-- Move the second list item inside the loop -->
+                <VListItem class="pt-0 pb-0 ht-li" v-for="(item, index) of QuestionsAnswers" :key="index">
+                    <VListItemTitle class="d-flex align-center justify-space-between">
+                        <div class="border-right"
+                            :class="{ 'bg-silver': (index + 1) % 2 === 0, 'w-custom-m': isMobile, 'w-40': !isMobile }"
+                            style="padding-left: 5px;">
+
+                            <p class="text-wrap mb-0" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">{{
+                                item.label
+                            }}</p>
+                        </div>
+                        <div class="d-flex  align-center" :class="isMobile ? 'w-custom-d' : 'w-60'">
+                            <QuestionProgressBar :type="item.type" :value="item.value"></QuestionProgressBar>
+                        </div>
+                    </VListItemTitle>
+                </VListItem>
+            </VList>
+
+
+
+            <!-- <v-table density="compact" fixed-header>
+                <thead>
+                    <tr class="text-right">
+                        <th class="bg-dark">
+                            <b>SYMPTOM CHECKLIST</b>
+                        </th>
+                        <th class="text-right bg-dark">
+                            <b>MILD</b>
+                            <VIcon icon="mdi-menu-down"></VIcon>
+                        </th>
+                        <th class="text-right bg-dark">
+                            <b>MODERATE</b>
+                            <VIcon icon="mdi-menu-down"></VIcon>
+                        </th>
+                        <th class="text-right bg-dark">
+                            <b>SEVERE</b>
+                            <VIcon icon="mdi-menu-down"></VIcon>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(item, index) of QuestionsAnswers" :key="index">
+                        <td class="border-right" v-if="!isMobile">{{ item.label }}</td>
+                        <td :colspan="isMobile ? '4' : '3'">
+                            <p v-if="isMobile" class="mb-0">{{ item.label }}</p>
+                            <QuestionProgressBar :type="item.type" :value="item.value"></QuestionProgressBar>
+                        </td>
+                    </tr>
+                </tbody>
+            </v-table> -->
+        </v-col>
+    </v-row>
+</template>
+
+<style lang="scss" scoped>
+.mdi-email {
+    margin-bottom: 5px;
+}
+
+.ht-li {
+    min-height: 20px !important;
+}
+
+.bg-silver {
+    background-color: silver;
+}
+
+.text-wrap {
+    text-wrap: balance;
+}
+
+.w-40 {
+    width: 40%;
+}
+
+.w-custom-m {
+    width: 36%;
+}
+
+.w-60 {
+    width: 60%;
+}
+
+.w-custom-d {
+    width: 65%;
+}
+
+.v-list-item--density-default.v-list-item--one-line {
+    min-height: 40px;
+}
+
+.heading-text-m {
+    font-size: 9px;
+}
+
+.heading-text-d {
+    font-size: 12px;
+}
+
+.bg-dark {
+    background-color: #808080b3 !important;
+}
+
+.text-right {
+    text-align: right !important;
+    width: 23%;
+}
+
+.border-right {
+    border-right: 1.5px solid black;
+}
+
+.hidden-component {
+    display: none
+}
+
+.meta-key {
+    border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+    border-radius: 6px;
+    block-size: 1.5625rem;
+    line-height: 1.3125rem;
+    padding-block: 0.125rem;
+    padding-inline: 0.25rem;
+}
+
+::v-deep .custom-menu {
+    position: relative;
+}
+
+::v-deep .custom-menu::before {
+    content: "" !important;
+    position: absolute !important;
+    transform: translateY(-50%);
+    top: 50% !important;
+    left: -8px !important;
+    border-left: 8px solid transparent !important;
+    border-right: 8px solid transparent !important;
+    border-bottom: 8px solid #fff !important;
+}
+
+
+
+// Styles for the VList component
+
+
+.more .v-list-item-title {
+    color: rgb(106 109 255);
+}
+
+.more .menu-item:hover {
+    cursor: pointer;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+    transition: transform 0.3s ease;
+}
+
+.slide-enter,
+.slide-leave-to {
+    transform: translateX(-100%);
+}
+
+.start-call-btn {
+    opacity: 0;
+    display: none;
+    transition: opacity 0.3s ease;
+}
+
+.button_margin {
+    margin: 2px;
+}
+
+.dialog_padding {
+    padding: 5px;
+
+}
+
+
+
+.custom-menu .v-menu__content {
+    background-color: #333;
+    color: #fff;
+    border-radius: 4px;
+    padding: 8px 0;
+}
+
+.user-info {
+    display: flex;
+    flex-direction: column;
+    transition: opacity 0.3s ease;
+}
+
+.list-item-hover {
+    transition: background-color 0.3s ease;
+
+    &:hover {
+        background-color: rgba(var(--v-theme-primary), 0.1);
+
+        .start-call-btn {
+            opacity: 1;
+            display: block;
+            position: relative;
+            left: -35px;
+        }
+
+        .user-info {
+            opacity: 0;
+            display: none;
+        }
+    }
+}
+
+.pop_card {
+
+    overflow: hidden !important;
+    padding: 10px;
+}
+
+.v-overlay__content {
+
+    max-height: 706.4px;
+    max-width: 941.6px;
+    min-width: 24px;
+    --v-overlay-anchor-origin: bottom left;
+    transform-origin: left top;
+    top: 154.4px !important;
+    left: 204px !important;
+
+
+}
+
+.button_margin {
+    margin-top: 10px;
+    font-size: 10px;
+}
+
+/* Responsive Styles */
+@media screen and (max-width: 768px) {
+    .pop_card {
+        max-width: 100%;
+        margin: 0 auto;
+    }
+}
+
+.container_img {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+}
+
+.image {
+    order: 2;
+    /* Change the order to 2 in mobile view */
+}
+
+.text {
+    order: 1;
+    /* Change the order to 1 in mobile view */
+}
+
+/* Media query for mobile view */
+@media (max-width: 768px) {
+    .container_img {
+        flex-direction: row;
+        margin-top: 10px;
+    }
+
+    .button_margin_mobile {
+        width: 100%;
+    }
+
+    .image {
+        width: 20%;
+        padding: 0 10px;
+    }
+
+    .text {
+        width: 80%;
+        /* Each takes 50% width */
+        padding: 0 10px;
+        /* Optional padding */
+    }
+
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    /* Width of the scrollbar */
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    /* Color of the track */
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: #888;
+    /* Color of the handle */
+    border-radius: 5px;
+    /* Roundness of the handle */
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+    /* Color of the handle on hover */
+}
+
+/* Container for the content */
+.scroll-container {
+    max-height: 191px;
+    /* Maximum height of the scrollable content */
+    overflow-y: scroll;
+    /* Enable vertical scrolling */
+}
+
+/* Content within the scroll container */
+.scroll-content {
+    padding: 20px;
+}
+
+/* Example of additional styling for content */
+.scroll-content p {
+    margin-bottom: 20px;
+}
+
+.cross button {
+
+    padding: 0px;
+    margin: 0px;
+    /* font-size: 10px; */
+    background: none;
+    border: none;
+    box-shadow: none;
+    height: 23px;
+
+}
+
+.v-data-table-header {
+    display: table-header-group;
+}
+</style>

resources/js/pages/patients/PrescriptionPanel.vue

@@ -0,0 +1,353 @@
+<script setup>
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+const store = useStore();
+const router = useRouter()
+const route = useRoute()
+const itemsPrescriptions = ref([]);
+const patientId = route.params.patient_id;
+const props = defineProps({
+  prescriptionData: {
+    type: Object,
+    required: true,
+  },
+})
+const prescription = computed(async () => {
+    console.log('computed=====')
+    await getprescriptionList()
+   
+});
+
+const getprescriptionList = async () => {
+ 
+    let prescriptions = props.prescriptionData.prescriptionData
+    console.log("BeforeOverviewItem", prescriptions);
+    // itemsPrescriptions.value = store.getters.getPrescriptionList
+    for (let data of prescriptions) {
+      let dataObject = {}
+         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.id
+          dataObject.comments = data.comments
+          dataObject.direction_one = data.direction_one
+          dataObject.direction_two= data.direction_two
+          dataObject.status = data.status
+  
+        dataObject.date = formatDateDate(data.created_at)
+        
+        itemsPrescriptions.value.push(dataObject)
+    }
+    console.log(itemsPrescriptions.value)
+    itemsPrescriptions.value.sort((a, b) => {
+        return b.id - a.id;
+    });
+    console.log("OverviewItem", itemsPrescriptions.value);
+};
+const formatDateDate = (date) => {
+    const messageDate = new Date(date);
+    const options = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    };
+    return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
+};
+const getStatusColor = (status) => {
+    switch (status) {
+        case 'pending':
+            return 'warning'; // Use Vuetify's warning color (typically yellow)
+        case 'shipped':
+            return '#45B8AC'; // Use Vuetify's primary color (typically blue)
+        case 'delivered':
+            return 'success';
+        case 'returned':
+            return 'red';
+        case 'results':
+            return 'blue';
+        default:
+            return 'grey'; // Use Vuetify's grey color for any other status
+    }
+};
+const resolveStatusVariant = status => {
+  if (status === 1)
+    return {
+      color: 'primary',
+      text: 'Current',
+    }
+  else if (status === 2)
+    return {
+      color: 'success',
+      text: 'Professional',
+    }
+  else if (status === 3)
+    return {
+      color: 'error',
+      text: 'Rejected',
+    }
+  else if (status === 4)
+    return {
+      color: 'warning',
+      text: 'Resigned',
+    }
+  else
+    return {
+      color: 'info',
+      text: 'Applied',
+    }
+}
+const headers = [
+ 
+  {
+    title: 'Name',
+    key: 'name',
+  },
+  {
+    title: 'Date',
+    key: 'date',
+  },
+  {
+    title: 'Status',
+    key: 'status',
+  },
+]
+const prescriptionIndex = ref([]);
+const prescriptionItem = ref(-1)
+const prescriptionDialog = ref(false)
+const selectedItem = ref(null);
+const showDetail = item => {
+    // console.log("id",item);
+  prescriptionIndex.value = item
+  selectedItem.value = item;
+//   console.log("index",prescriptionIndex.value);
+//   prescriptionItem.value = { ...item }
+  prescriptionDialog.value = true
+}
+const close = () => {
+  prescriptionDialog.value = false
+  prescriptionIndex.value = -1
+  prescriptionItem.value = { ...defaultItem.value }
+}
+
+</script>
+<template>
+  
+    <v-row>
+    <v-col cols="12" md="12" v-if="itemsPrescriptions">
+      <v-card title="Prescriptions" v-if="prescription">
+      <VCardText >
+          
+        </VCardText>
+      <VDataTable
+        :headers="headers"
+        :items="itemsPrescriptions"
+        :items-per-page="5"
+        class="text-no-wrap"
+      >
+            
+        <!-- full name -->
+        <!-- status -->
+        <template #item.status="{ item }">
+          <VChip
+            :color="getStatusColor(item.status)"
+            density="comfortable"
+          >
+            {{ item.status}}
+          </VChip>
+        </template>
+
+        <!-- Actions -->
+        <template #item.name="{ item }">
+        <router-link
+                  :to="{ name: 'admin-patient-profile', params: { id: item.id } }"
+                  class="text-high-emphasis  "
+                  @click.prevent=showDetail(item)
+                >
+                {{ item.name }} 
+                </router-link>
+       
+        </template>
+      </VDataTable>
+      </v-card>
+    </v-col>
+  </v-row>
+    <VDialog
+    v-model="prescriptionDialog"
+    max-width="600px"
+  >
+    <VCard :title=prescriptionIndex.name>
+    <DialogCloseBtn
+        variant="text"
+        size="default"
+        @click="[prescriptionDialog = false,selectedItem = '']"
+      />
+      <VCardText>
+            <v-row class='mt-0'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Brand:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="4" sm="6">
+                            <p>{{ prescriptionIndex.brand }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>From:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="4" sm="6">
+                            <p>{{ prescriptionIndex.from }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Dosage:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="4" sm="6">
+                            <p>{{ prescriptionIndex.dosage }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Quantity:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="4" sm="6">
+                            <p>{{ prescriptionIndex.quantity }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Direction Quantity:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="6">
+                            <p>{{ prescriptionIndex.direction_quantity }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Direction One:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="6">
+                            <p>{{ prescriptionIndex.direction_one }} </p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Direction Two:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="6">
+                            <p>{{ prescriptionIndex.direction_two }} </p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Refill Quantity:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="6">
+                            <p>{{ prescriptionIndex.refill_quantity }}</p>
+                        </v-col>
+
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Status:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="6">
+                            <p v-if="prescriptionIndex.status == null" class="text-warning">Pending</p>
+                            <p v-else>{{ prescriptionIndex.status }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1 pb-0'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Comments:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="8">
+                            <p>{{ prescriptionIndex.comments }} </p>
+                        </v-col>
+
+                    </v-row>
+                    
+      </VCardText>
+    </VCard>
+    
+  </VDialog>
+</template>
+
+<style lang="scss">
+button.v-expansion-panel-title {
+  background-color: #003152 !important;
+  color: #fff;
+}
+
+button.v-expansion-panel-title.bg-secondary {
+  background-color: #003152 !important;
+  color: #fff;
+}
+
+button.v-expansion-panel-title {
+  background-color: #003152 !important;
+  color: #fff;
+}
+
+span.v-expansion-panel-title__icon {
+  color: #fff
+}
+
+// button.v-expansion-panel-title.bg-secondary {
+//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
+// }
+
+// button.v-expansion-panel-title {
+//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
+// }
+
+// button.v-expansion-panel-title.v-expansion-panel-title--active {
+//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
+// }
+
+.v-expansion-panel {
+  overflow: hidden;
+  border-radius: 16px;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 10%);
+  margin-block-end: 10px;
+  transition: box-shadow 0.3s ease;
+}
+
+.details {
+  position: relative;
+  box-sizing: content-box;
+  border: 2px solid #fff;
+  border-radius: 1em;
+  background-color: #696cff;
+  block-size: 0.85em;
+  box-shadow: 0 0 3px rgba(67, 89, 113, 80%);
+  color: #fff;
+  content: "+";
+  font-family: "Courier New", Courier, monospace;
+  font-weight: 500;
+  inline-size: 0.85em;
+  inset-block-start: 50%;
+  inset-block-start: 0.7em;
+  inset-inline-start: 50%;
+  line-height: 0.9em;
+  text-align: center;
+  transform: translate(-50%, -50%);
+}
+</style>

resources/js/pages/patients/QuestionProgressBar.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { computed, defineProps, onBeforeMount, ref } from 'vue';
+import typeJson from '../patients/type_parse.json';
+
+const allTypes = ref(typeJson);
+const props = defineProps({
+    type: {
+        type: String,
+        required: true,
+    },
+    value: {
+        type: String,
+        required: false,
+    },
+})
+
+const bgColor = ref(null)
+const operator = {
+    c(obj, value) {
+        let keys = Object.keys(obj.values)
+        let prev = 0;
+        for (let key of keys) {
+            if (key > prev && key <= value) {
+                prev = key
+            }
+        }
+        return obj.values[prev]
+    },
+    e(obj, value) {
+
+        return obj.values[value]
+    },
+}
+const progressValue = ref(0); // Initialize progress value with 0
+const finalValue = computed(() => {
+    const singleObject = allTypes.value[props.type];
+    // console.log('singleObject', singleObject)
+    if (operator[singleObject.type](singleObject, props.value) > 0 && operator[singleObject.type](singleObject, props.value) <= 33) {
+        bgColor.value = 'success'
+    }
+    if (operator[singleObject.type](singleObject, props.value) > 33 && operator[singleObject.type](singleObject, props.value) <= 50) {
+        bgColor.value = 'yellow'
+    }
+    if (operator[singleObject.type](singleObject, props.value) > 50 && operator[singleObject.type](singleObject, props.value) <= 80) {
+        bgColor.value = 'warning'
+    }
+    if (operator[singleObject.type](singleObject, props.value) > 80 && operator[singleObject.type](singleObject, props.value) <= 100) {
+        bgColor.value = 'error'
+    }
+    return operator[singleObject.type](singleObject, props.value)
+
+})
+
+onBeforeMount(async () => {
+    await new Promise(resolve => {
+        setTimeout(() => {
+            progressValue.value = finalValue.value;
+            resolve();
+        }, 500); // Simulating some delay, you can replace this with your actual async logic
+    });
+});
+</script>
+
+<template>
+    <v-progress-linear :model-value="progressValue" :height="22" :color="bgColor"></v-progress-linear>
+</template>

resources/js/pages/patients/meetings.vue

@@ -49,7 +49,7 @@ function changeDateFormat(dateFormat) {
   if (dateFormat) {
     const [datePart, timePart] = dateFormat.split(' ');
     const [year, month, day] = datePart.split('-');
-    const formattedDate = `${parseInt(month)}-${parseInt(day)}-${year}`;
+    // const formattedDate = `${parseInt(month)}-${parseInt(day)}-${year}`;
     return `${formattedDate} ${timePart}`;
   }
   return dateFormat;
@@ -122,9 +122,26 @@ const options = [
   },
   
 ]
+const breadcrums = [
+    {
+        title: 'Patient',
+        disabled: false,
+        to: '/admin/patients',
+    },
+    {
+        title: 'Meetings',
+        disabled: false,
+    }
+    
+];
 </script>
 
 <template>
+  <v-breadcrumbs :items="breadcrums" class="text-primary pt-0 pb-0 mb-5">
+        <template v-slot:divider style="padding-top:0px; padding-bottom:0px">
+            >
+        </template>
+    </v-breadcrumbs>
   <v-row>
     <v-col cols="12" md="12">
       <v-card title="Meetings">

resources/js/pages/patients/patient-profile.vue

@@ -0,0 +1,123 @@
+<script setup>
+import NotesPanel from '@/pages/patients/NotesPanel.vue'
+import PatienTabOverview from '@/pages/patients/PatienTabOverview.vue'
+import PatientBioPanel from '@/pages/patients/PatientBioPanel.vue'
+import PatientLabTest from '@/pages/patients/PatientLabTest.vue'
+import PatientQuestionProfile from '@/pages/patients/PatientQuestionProfile.vue'
+import PrescriptionPanel from '@/pages/patients/PrescriptionPanel.vue'
+
+import { useStore } from 'vuex'
+const patientDtail = ref(null);
+
+const store = useStore();
+const route = useRoute('apps-user-view-id')
+const userTab = ref(null)
+
+const tabs = [
+  {
+    icon: 'ri-group-line',
+    title: 'Overview',
+  },
+  {
+    icon: 'ri-lock-2-line',
+    title: 'Notes',
+  },
+  {
+    icon: 'ri-bookmark-line',
+    title: 'Prescriptions',
+  },
+   {
+    icon: 'ri-flask-line',
+    title: 'Lab Test',
+  },
+  {
+    icon: 'ri-survey-line',
+    title: 'Profile',
+  },
+  // {
+  //   icon: 'ri-link-m',
+  //   title: 'Connections',
+  // },
+]
+const getPatientDeatail = async () => {
+  store.dispatch('updateIsLoading', true);
+  await store.dispatch('patientDetial', { id: route.params.id });
+  store.dispatch('updateIsLoading', false);
+
+  let list = store.getters.getPatientDetail;
+  patientDtail.value=list
+  console.log(list.patient);
+};
+onMounted(async () => {
+  await getPatientDeatail();
+  
+});
+//const { data: userData } = await useApi(`/apps/users/${ route.params.id }`)
+</script>
+
+<template>
+  <VRow v-if="patientDtail">
+    <VCol
+      cols="12"
+      md="5"
+      lg="4"
+    >
+      <PatientBioPanel :user-data="patientDtail" />
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="7"
+      lg="8"
+    >
+      <VTabs
+        v-model="userTab"
+        class="v-tabs-pill"
+      >
+        <VTab
+          v-for="tab in tabs"
+          :key="tab.icon"
+        >
+          <VIcon
+            start
+            :icon="tab.icon"
+          />
+          <span>{{ tab.title }}</span>
+        </VTab>
+      </VTabs>
+
+      <VWindow
+        v-model="userTab"
+        class="mt-6 disable-tab-transition"
+        :touch="false"
+      >
+        <VWindowItem>
+          <PatienTabOverview :user-data="patientDtail"/>
+        </VWindowItem>
+
+        <VWindowItem>
+          <NotesPanel :notes-data="patientDtail"/>
+        </VWindowItem>
+
+        <VWindowItem>
+          <PrescriptionPanel :prescription-data="patientDtail"/>
+        </VWindowItem>
+
+       <VWindowItem>
+          <PatientLabTest :user-data="patientDtail"/>
+        </VWindowItem>
+
+        <VWindowItem>
+          <PatientQuestionProfile />
+        </VWindowItem>
+
+       
+      </VWindow>
+    </VCol>
+  </VRow>
+  <VCard v-else>
+    <VCardTitle class="text-center">
+      No User Found
+    </VCardTitle>
+  </VCard>
+</template>

resources/js/pages/patients/patients.vue

@@ -21,7 +21,17 @@ const defaultItem = ref({
 const editedItem = ref(defaultItem.value)
 const editedIndex = ref(-1)
 const patientList = ref([])
+const subcriptionLists = ref(['All'])
 const isLoading=ref(false)
+
+const filter = ref({
+    gender: 'All',
+    state: 'all',
+    plan: 'all',
+})
+// const gender =ref();
+// const city =ref();
+// const plan =ref();
 // status options
 const selectedOptions = [
   {
@@ -40,13 +50,41 @@ const refVForm = ref(null)
 onBeforeMount(async () => {});
 onMounted(async () => {
   store.dispatch('updateIsLoading', true)
+  await store.dispatch('getSubcriptions')
   await store.dispatch('patientList')
   // console.log('patientList',store.getters.getPatientList)
   // patientList.value = store.getters.getPatientList
   store.dispatch('updateIsLoading', false)
  
 });
+
+const getPatientFilter = 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.toLowerCase(),
+    state: filter.value.state,
+  })
+  store.dispatch('updateIsLoading', false)
+}
+
 const getPatientList = computed(async () => {
+  subcriptionLists.value = [];
+  patientList.value = [];
+  subcriptionLists.value = store.getters.getSubcriptions;
+  const allIndex = subcriptionLists.value.findIndex(sub => sub.title.toLowerCase() === 'all');
+
+    // If "All" exists, move it to the beginning
+    if (allIndex !== -1) {
+        const all = subcriptionLists.value.splice(allIndex, 1)[0];
+        subcriptionLists.value.unshift(all);
+    } else {
+        // If "All" doesn't exist, create it and prepend it
+        subcriptionLists.value.unshift({ title: 'All', slug: 'all' });
+    }
+  console.log("subcriptin",subcriptionLists.value);
   patientList.value =  store.getters.getPatientList.map(history => ({
     ...history,
     dob: changeFormat(history.dob),
@@ -72,10 +110,10 @@ const formatPhoneNumber = () => {
 };
 // headers
 const headers = [
-  // {
-  //   title: 'ID',
-  //   key: 'id',
-  // },
+  {
+    title: 'ID',
+    key: 'id',
+  },
   {
     title: 'NAME',
     key: 'name',
@@ -94,12 +132,17 @@ const headers = [
     key: 'phone_no',
   },
 
+  // {
+  //   title: 'Lab Kit',
+  //   key: 'labkit',
+  // },
   
   
-  {
-    title: 'ACTIONS',
-    key: 'actions',
-  },
+ 
+  // {
+  //   title: 'ACTIONS',
+  //   key: 'actions',
+  // },
 ]
 
 const resolveStatusVariant = status => {
@@ -184,6 +227,89 @@ const save = async () => {
   
 }
 
+const states = ref([
+    { name: 'Alabama', abbreviation: 'AL' },
+    { name: 'Alaska', abbreviation: 'AK' },
+    { name: 'Arizona', abbreviation: 'AZ' },
+    { name: 'Arkansas', abbreviation: 'AR' },
+    { name: 'Howland Island', abbreviation: 'UM-84' },
+    { name: 'Delaware', abbreviation: 'DE' },
+    { name: 'Maryland', abbreviation: 'MD' },
+    { name: 'Baker Island', abbreviation: 'UM-81' },
+    { name: 'Kingman Reef', abbreviation: 'UM-89' },
+    { name: 'New Hampshire', abbreviation: 'NH' },
+    { name: 'Wake Island', abbreviation: 'UM-79' },
+    { name: 'Kansas', abbreviation: 'KS' },
+    { name: 'Texas', abbreviation: 'TX' },
+    { name: 'Nebraska', abbreviation: 'NE' },
+    { name: 'Vermont', abbreviation: 'VT' },
+    { name: 'Jarvis Island', abbreviation: 'UM-86' },
+    { name: 'Hawaii', abbreviation: 'HI' },
+    { name: 'Guam', abbreviation: 'GU' },
+    { name: 'United States Virgin Islands', abbreviation: 'VI' },
+    { name: 'Utah', abbreviation: 'UT' },
+    { name: 'Oregon', abbreviation: 'OR' },
+    { name: 'California', abbreviation: 'CA' },
+    { name: 'New Jersey', abbreviation: 'NJ' },
+    { name: 'North Dakota', abbreviation: 'ND' },
+    { name: 'Kentucky', abbreviation: 'KY' },
+    { name: 'Minnesota', abbreviation: 'MN' },
+    { name: 'Oklahoma', abbreviation: 'OK' },
+    { name: 'Pennsylvania', abbreviation: 'PA' },
+    { name: 'New Mexico', abbreviation: 'NM' },
+    { name: 'American Samoa', abbreviation: 'AS' },
+    { name: 'Illinois', abbreviation: 'IL' },
+    { name: 'Michigan', abbreviation: 'MI' },
+    { name: 'Virginia', abbreviation: 'VA' },
+    { name: 'Johnston Atoll', abbreviation: 'UM-67' },
+    { name: 'West Virginia', abbreviation: 'WV' },
+    { name: 'Mississippi', abbreviation: 'MS' },
+    { name: 'Northern Mariana Islands', abbreviation: 'MP' },
+    { name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
+    { name: 'Massachusetts', abbreviation: 'MA' },
+    { name: 'Connecticut', abbreviation: 'CT' },
+    { name: 'Florida', abbreviation: 'FL' },
+    { name: 'District of Columbia', abbreviation: 'DC' },
+    { name: 'Midway Atoll', abbreviation: 'UM-71' },
+    { name: 'Navassa Island', abbreviation: 'UM-76' },
+    { name: 'Indiana', abbreviation: 'IN' },
+    { name: 'Wisconsin', abbreviation: 'WI' },
+    { name: 'Wyoming', abbreviation: 'WY' },
+    { name: 'South Carolina', abbreviation: 'SC' },
+    { name: 'Arkansas', abbreviation: 'AR' },
+    { name: 'South Dakota', abbreviation: 'SD' },
+    { name: 'Montana', abbreviation: 'MT' },
+    { name: 'North Carolina', abbreviation: 'NC' },
+    { name: 'Palmyra Atoll', abbreviation: 'UM-95' },
+    { name: 'Puerto Rico', abbreviation: 'PR' },
+    { name: 'Colorado', abbreviation: 'CO' },
+    { name: 'Missouri', abbreviation: 'MO' },
+    { name: 'New York', abbreviation: 'NY' },
+    { name: 'Maine', abbreviation: 'ME' },
+    { name: 'Tennessee', abbreviation: 'TN' },
+    { name: 'Georgia', abbreviation: 'GA' },
+    { name: 'Louisiana', abbreviation: 'LA' },
+    { name: 'Nevada', abbreviation: 'NV' },
+    { name: 'Iowa', abbreviation: 'IA' },
+    { name: 'Idaho', abbreviation: 'ID' },
+    { name: 'Rhode Island', abbreviation: 'RI' },
+    { name: 'Washington', abbreviation: 'WA' },
+    { name: 'Ohio', abbreviation: 'OH' },
+    { name: 'All', abbreviation: 'all' },
+    // ... (add the rest of the states)
+]);
+
+const sortedStates = computed(() => {
+    const sorted = states.value.slice().sort((a, b) => {
+        // Move "All" to the beginning
+        if (a.name === 'All') return -1;
+        if (b.name === 'all') return 1;
+        // Sort other states alphabetically
+        return a.name.localeCompare(b.name);
+    });
+    return sorted;
+});
+
 const deleteItemConfirm = async () => {
   console.log('editedIndex.value',editedIndex.value,editedItem.value.id)
   await store.dispatch('patientDelete',{
@@ -205,9 +331,32 @@ function changeFormat(dateFormat) {
 
     // Format the date as mm-dd-yyyy
     const formattedDate = month + '-' + day + '-' + date.getFullYear();
-    console.log("formattedDate",formattedDate)
+    // console.log("formattedDate",formattedDate)
     return formattedDate;
 }
+const LabKit = (item)=> {
+    router.push('/admin/patients/labkit/'+item.id);
+}
+
+const onSubcriptionChange = async(newvalue)=> {
+  filter.value.plan = newvalue;
+  console.log("Plan",filter.value.plan );
+  await getPatientFilter();
+
+}
+const onGenderChange = async(newvalue)=> {
+  filter.value.gender = newvalue;
+  console.log("gender",filter.value.gender);
+  await getPatientFilter();
+
+}
+const onStateChange = async(newvalue)=> {
+  filter.value.state = newvalue;
+  console.log("state",filter.value.state);
+  await getPatientFilter();
+
+}
+
 
 </script>
 
@@ -219,8 +368,60 @@ function changeFormat(dateFormat) {
           <VRow>
              <VCol
               cols="12"
-              offset-md="8"
-              md="4"
+          
+              md="3"
+            >
+            <VSelect
+                 v-model="filter.plan"
+                 label="Subcription"
+                  placeholder="Subcription"
+                  density="comfortable"
+                  :items="subcriptionLists"
+                  item-title="title"
+                  item-value="slug"
+                  @update:model-value="onSubcriptionChange"
+          />
+          
+          
+          </VCol>
+            <VCol
+              cols="12"
+              
+              md="3"
+            >
+            
+          <VSelect
+                  v-model="filter.gender"
+                  label="Gender"
+                  placeholder="Gender"
+                  density="comfortable"
+                  :items="['All','Male', 'Female']"
+                  @update:model-value="onGenderChange"
+                  
+          />
+          
+          </VCol>
+          <VCol
+              cols="12"
+              
+              md="3"
+            >
+            <VSelect
+                  v-model="filter.state"
+                  label="State"
+                  density="comfortable"
+                  :items="sortedStates"
+                  item-title="name"
+                  item-value="abbreviation"
+                  @update:model-value="onStateChange"
+                  
+          />
+          
+           </VCol>
+            <VCol
+              cols="12"
+              
+              md="3"
             >
               <VTextField
                 v-model="search"
@@ -266,12 +467,19 @@ function changeFormat(dateFormat) {
             </VAvatar>
             
             <div class="d-flex flex-column ms-3">
-              <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
+                <router-link
+                  :to="{ name: 'admin-patient-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>
         </template>
 
+        
+
         <!-- status -->
         <template #item.status="{ item }">
           <VChip
@@ -281,6 +489,9 @@ function changeFormat(dateFormat) {
             {{ resolveStatusVariant(item.status).text }}
           </VChip>
         </template>
+        <template #item.labkit="{ item }">
+          <div class="text-primary cursor-pointer" @click="LabKit(item)"> LabKits</div>
+        </template>
 
         <!-- Actions -->
         <template #item.actions="{ item }">
@@ -442,3 +653,10 @@ function changeFormat(dateFormat) {
     </VCard>
   </VDialog>
 </template>
+<style scoped>
+.highlighted {
+  /* Add your desired highlighting styles here */
+  font-weight: bold;
+  color: #a169ff; /* or any other color you prefer */
+}
+</style>

resources/js/pages/patients/type_parse.json

@@ -0,0 +1,43 @@
+{
+    "bp_match": {
+        "type": "c",
+        "values": {
+            "0": 100,
+            "60": 80,
+            "70": 60
+        }
+    },
+    "exact_match": {
+        "type": "e",
+        "values": {
+            "yes": 100,
+            "no": 2,
+            "high": 2,
+            "never": 2,
+            "almost_never": 30,
+            "occasionally": 66,
+            "almost_always": 75,
+            "always": 100,
+            "very_much": 66,
+            "a_lot": 100,
+            "a_little": 30,
+            "not_at_all": 2,
+            "not_applicable": 2,
+            "rarely": 30,
+            "sometimes": 66,
+            "often": 75,
+            "unsure": 2,
+            "less_than_6_hrs": 100,
+            "six_to_eight_hrs": 66,
+            "more_than_eight": 33,
+            "before_penetrate": 100,
+            "ejaculate_early": 66,
+            "no_issue_with_ejaculation": 2,
+            "no_issue": 2,
+            "usually_difficult": 100,
+            "low": 100,
+            "medium": 66,
+            "none_of_above_them": 2
+        }
+    }
+}

resources/js/pages/products/product.vue

@@ -74,10 +74,10 @@ const headers = [
     title: 'Title',
     key: 'title',
   },
-  {
-    title: 'Slug',
-    key: 'slug',
-  },
+  // {
+  //   title: 'Slug',
+  //   key: 'slug',
+  // },
   {
     title: 'Price',
     key: 'price',
@@ -91,10 +91,10 @@ const headers = [
     key: 'list_sub_title',
   },
  
-  {
-    title: 'ACTIONS',
-    key: 'actions',
-  },
+  // {
+  //   title: 'ACTIONS',
+  //   key: 'actions',
+  // },
 ]
 
 const resolveStatusVariant = status => {
@@ -371,14 +371,14 @@ onMounted(() => {
 <template>
   <v-row>
     <v-col cols="12" md="12" v-if="getmedicineList">
-    <VCard title="Medicines">
+    <VCard title="Products">
 
       <VCardText >
         <VRow>
        
           <VCol cols="12" md="8" class="d-flex align-center">
-          <VBtn color="primary" prepend-icon="ri-add-line" @click="addDialog = true">
-            New Medicine
+          <VBtn color="primary" prepend-icon="ri-add-line" @click="addDialog = true" style="display: none;">
+            New Product
           </VBtn>
           </VCol>
         <VCol cols="12" md="4" class="d-flex justify-end">
@@ -403,18 +403,18 @@ onMounted(() => {
         class="text-no-wrap"
       >
         <!-- full name -->
-        <template #item.name="{ item }">
+        <template #item.title="{ item }">
           <div class="d-flex align-center">
             <!-- avatar -->
             <VAvatar
               size="32"
-              :color="item.avatar ? '' : 'primary'"
-              :class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
-              :variant="!item.avatar ? 'tonal' : undefined"
+              :color="item.image_url ? '' : 'primary'"
+              :class="item.image_url ? '' : 'v-avatar-light-bg primary--text'"
+              :variant="!item.image_url ? 'tonal' : undefined"
             >
               <VImg
-                v-if="item.avatar"
-                :src="item.avatar"
+                v-if="item.image_url"
+                :src="item.image_url"
               />
               <span
                 v-else
@@ -423,7 +423,7 @@ onMounted(() => {
             </VAvatar>
 
             <div class="d-flex flex-column ms-3">
-              <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
+              <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.title }}</span>
           
             </div>
           </div>

resources/js/pages/providers/CompletedMeetingTab.vue

@@ -0,0 +1,212 @@
+<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' },
+];
+
+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.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 }">
+          <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>
+<style scoped>
+.highlighted {
+  /* Add your desired highlighting styles here */
+  font-weight: bold;
+  color: #a169ff; /* or any other color you prefer */
+}
+</style>

resources/js/pages/providers/NotesPanel.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+const store = useStore();
+const router = useRouter();
+const route = useRoute();
+const patientId = route.params.patient_id;
+const appointmentId = route.params.id;
+const notes = ref([]);
+const props = defineProps({
+  notesData: {
+    type: Object,
+    required: true,
+  },
+})
+
+
+
+const formatDateDate = (date) => {
+    const messageDate = new Date(date);
+    const options = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    };
+    return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
+};
+
+const downloadFile = (fileUrl) => {
+    const link = document.createElement('a');
+    link.href = fileUrl;
+    link.download = 'noteFile.png';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+ const downloadImage = async (imageUrl) => {
+      try {
+        const response = await fetch(imageUrl)
+        const blob = await response.blob()
+        const fileName = imageUrl.split('/').pop()
+        saveAs(blob, fileName)
+      } catch (error) {
+        console.error('Error downloading image:', error)      }
+    }
+
+</script>
+
+<template>
+     
+
+  <VCard title="Notes">
+    <VCardText>
+      <VTimeline
+        side="end"
+        align="start"
+        line-inset="8"
+        truncate-line="both"
+        density="compact"
+      >
+
+        <!-- SECTION Timeline Item: Flight -->
+        
+        <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"
+        >
+          <!-- 👉 Header -->
+          <div class="d-flex justify-space-between align-center gap-2 flex-wrap">
+           <span class="app-timeline-title" v-if="p_note.note_type=='Notes'">
+              {{p_note.note}}
+            </span>
+         
+              <span class="app-timeline-title" v-if="p_note.note_type == 'file'">
+                 <VIcon>ri-attachment-2</VIcon>  <button @click="downloadImage(p_note.note)">Download Image</button>
+         
+          </span>
+           
+          
+            <span class="app-timeline-meta">{{ formatDateDate(p_note.created_at) }}</span>
+            <!-- <span></span> -->
+          </div>
+
+          <!-- 👉 Content -->
+          <div class="app-timeline-text mb-1">
+            <span>{{ p_note.provider_name }}</span>
+            <VIcon
+              size="20"
+              icon="tabler-arrow-right"
+              class="mx-2 flip-in-rtl"
+            />
+            <!-- <span>Heathrow Airport, London</span> -->
+          </div>
+
+          <!-- <p class="app-timeline-meta mb-2">
+            6:30 AM
+          </p> -->
+
+          <!-- <div class="app-timeline-text d-flex align-center gap-2">
+            <div>
+              <VImg
+                :src="pdf"
+                :width="22"
+              />
+            </div>
+
+            <span>booking-card.pdf</span>
+          </div> -->
+        </VTimelineItem>
+        </template>
+
+
+     
+        <!-- !SECTION -->
+
+        <!-- !SECTION -->
+      </VTimeline>
+    </VCardText>
+  </VCard>
+</template>

resources/js/pages/providers/PrescriptionPanel.vue

@@ -0,0 +1,354 @@
+<script setup>
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+const store = useStore();
+const router = useRouter()
+const route = useRoute()
+const itemsPrescriptions = ref([]);
+const patientId = route.params.patient_id;
+const props = defineProps({
+  prescriptionData: {
+    type: Object,
+    required: true,
+  },
+})
+const prescription = computed(async () => {
+    console.log('computed=====')
+    await getprescriptionList()
+   
+});
+
+const getprescriptionList = async () => {
+ 
+    let prescriptions = props.prescriptionData.prescriptions
+    console.log("BeforeOverviewItem", prescriptions);
+    // itemsPrescriptions.value = store.getters.getPrescriptionList
+    for (let data of prescriptions) {
+      let dataObject = {}
+         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.id
+          dataObject.comments = data.comments
+          dataObject.direction_one = data.direction_one
+          dataObject.direction_two= data.direction_two
+          dataObject.status = data.status
+  
+        dataObject.date = formatDateDate(data.created_at)
+        
+        itemsPrescriptions.value.push(dataObject)
+    }
+    console.log(itemsPrescriptions.value)
+    itemsPrescriptions.value.sort((a, b) => {
+        return b.id - a.id;
+    });
+    console.log("OverviewItem", itemsPrescriptions.value);
+};
+const formatDateDate = (date) => {
+    const messageDate = new Date(date);
+    const options = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    };
+    return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
+};
+const getStatusColor = (status) => {
+    switch (status) {
+        case 'pending':
+            return 'warning'; // Use Vuetify's warning color (typically yellow)
+        case 'shipped':
+            return '#45B8AC'; // Use Vuetify's primary color (typically blue)
+        case 'delivered':
+            return 'success';
+        case 'returned':
+            return 'red';
+        case 'results':
+            return 'blue';
+        default:
+            return 'grey'; // Use Vuetify's grey color for any other status
+    }
+};
+const resolveStatusVariant = status => {
+  if (status === 1)
+    return {
+      color: 'primary',
+      text: 'Current',
+    }
+  else if (status === 2)
+    return {
+      color: 'success',
+      text: 'Professional',
+    }
+  else if (status === 3)
+    return {
+      color: 'error',
+      text: 'Rejected',
+    }
+  else if (status === 4)
+    return {
+      color: 'warning',
+      text: 'Resigned',
+    }
+  else
+    return {
+      color: 'info',
+      text: 'Applied',
+    }
+}
+const headers = [
+ 
+  {
+    title: 'Name',
+    key: 'name',
+  },
+  {
+    title: 'Date',
+    key: 'date',
+  },
+  {
+    title: 'Status',
+    key: 'status',
+  },
+]
+const prescriptionIndex = ref([]);
+const prescriptionItem = ref(-1)
+const prescriptionDialog = ref(false)
+const selectedItem = ref(null);
+const showDetail = item => {
+    // console.log("id",item);
+  prescriptionIndex.value = item
+  selectedItem.value = item;
+//   console.log("index",prescriptionIndex.value);
+//   prescriptionItem.value = { ...item }
+  prescriptionDialog.value = true
+}
+const close = () => {
+  prescriptionDialog.value = false
+  prescriptionIndex.value = -1
+  prescriptionItem.value = { ...defaultItem.value }
+}
+
+</script>
+<template>
+  
+    <v-row>
+    <v-col cols="12" md="12" v-if="itemsPrescriptions">
+      <v-card title="Prescriptions" v-if="prescription">
+      <VCardText >
+          
+        </VCardText>
+      <VDataTable
+        :headers="headers"
+        :items="itemsPrescriptions"
+        :items-per-page="5"
+        class="text-no-wrap"
+      >
+            
+        <!-- full name -->
+        <!-- status -->
+        <template #item.status="{ item }">
+        
+          <VChip
+            :color="getStatusColor(item.status)"
+            density="comfortable"
+          >
+            {{ item.status}}
+          </VChip>
+        </template>
+
+        <!-- Actions -->
+        <template #item.name="{ item }">
+        <router-link
+                  :to="{ name: 'admin-patient-profile', params: { id: item.id } }"
+                  class="text-high-emphasis  "
+                  @click.prevent=showDetail(item)
+                >
+                {{ item.name }} 
+                </router-link>
+       
+        </template>
+      </VDataTable>
+      </v-card>
+    </v-col>
+  </v-row>
+    <VDialog
+    v-model="prescriptionDialog"
+    max-width="600px"
+  >
+    <VCard :title=prescriptionIndex.name>
+    <DialogCloseBtn
+        variant="text"
+        size="default"
+        @click="[prescriptionDialog = false,selectedItem = '']"
+      />
+      <VCardText>
+            <v-row class='mt-0'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Brand:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="4" sm="6">
+                            <p>{{ prescriptionIndex.brand }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>From:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="4" sm="6">
+                            <p>{{ prescriptionIndex.from }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Dosage:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="4" sm="6">
+                            <p>{{ prescriptionIndex.dosage }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Quantity:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="4" sm="6">
+                            <p>{{ prescriptionIndex.quantity }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Direction Quantity:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="6">
+                            <p>{{ prescriptionIndex.direction_quantity }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Direction One:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="6">
+                            <p>{{ prescriptionIndex.direction_one }} </p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Direction Two:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="6">
+                            <p>{{ prescriptionIndex.direction_two }} </p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Refill Quantity:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="6">
+                            <p>{{ prescriptionIndex.refill_quantity }}</p>
+                        </v-col>
+
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Status:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="6">
+                            <p v-if="prescriptionIndex.status == null" class="text-warning">Pending</p>
+                            <p v-else>{{ prescriptionIndex.status }}</p>
+                        </v-col>
+                    </v-row>
+                     <VDivider></VDivider>
+                    <v-row class='mt-1 pb-0'>
+                        <v-col cols="12" md="4" sm="6">
+                            <p class='heading mb-0 text-right'><b>Comments:</b></p>
+                        </v-col>
+                        <v-col cols="12" md="8" sm="8">
+                            <p>{{ prescriptionIndex.comments }} </p>
+                        </v-col>
+
+                    </v-row>
+                    
+      </VCardText>
+    </VCard>
+    
+  </VDialog>
+</template>
+
+<style lang="scss">
+button.v-expansion-panel-title {
+  background-color: #003152 !important;
+  color: #fff;
+}
+
+button.v-expansion-panel-title.bg-secondary {
+  background-color: #003152 !important;
+  color: #fff;
+}
+
+button.v-expansion-panel-title {
+  background-color: #003152 !important;
+  color: #fff;
+}
+
+span.v-expansion-panel-title__icon {
+  color: #fff
+}
+
+// button.v-expansion-panel-title.bg-secondary {
+//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
+// }
+
+// button.v-expansion-panel-title {
+//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
+// }
+
+// button.v-expansion-panel-title.v-expansion-panel-title--active {
+//     background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)) !important;
+// }
+
+.v-expansion-panel {
+  overflow: hidden;
+  border-radius: 16px;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 10%);
+  margin-block-end: 10px;
+  transition: box-shadow 0.3s ease;
+}
+
+.details {
+  position: relative;
+  box-sizing: content-box;
+  border: 2px solid #fff;
+  border-radius: 1em;
+  background-color: #696cff;
+  block-size: 0.85em;
+  box-shadow: 0 0 3px rgba(67, 89, 113, 80%);
+  color: #fff;
+  content: "+";
+  font-family: "Courier New", Courier, monospace;
+  font-weight: 500;
+  inline-size: 0.85em;
+  inset-block-start: 50%;
+  inset-block-start: 0.7em;
+  inset-inline-start: 50%;
+  line-height: 0.9em;
+  text-align: center;
+  transform: translate(-50%, -50%);
+}
+</style>

resources/js/pages/providers/ProviderBioPanel.vue

@@ -0,0 +1,323 @@
+<script setup>
+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',
+  }
+}
+</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.telemed.avatar ? 'primary' : undefined"
+            :variant="!props.userData.telemed.avatar ? 'tonal' : undefined"
+          >
+            <VImg
+              v-if="props.userData.telemed.avatar"
+              :src="props.userData.telemed.avatar"
+            />
+            <span
+              v-else
+              class="text-5xl font-weight-medium"
+            >
+              {{ avatarText(props.userData.telemed.name) }}
+            </span>
+          </VAvatar>
+
+          <!-- 👉 User fullName -->
+          <h5 class="text-h5 mt-4">
+            {{ props.userData.telemed.first_name }}  {{ props.userData.telemed.last_name }}
+          </h5>
+
+          <!-- 👉 Role chip -->
+          
+            <!--  <VChip
+            :color="resolveUserStatusVariant(props.userData.telemed.status==1?'Active':'InActive')"
+            size="small"
+            class="text-capitalize mt-4"
+          >
+            {{ props.userData.telemed.status==1?"Active":'InActive' }}
+          </VChip>-->
+        </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.telemed.email }}</span>
+              </VListItemTitle>
+            </VListItem>
+
+            <VListItem>
+              <VListItemTitle class="text-sm">
+                <span class="font-weight-medium">
+                  Address:
+                </span>
+                <span class="text-body-1">{{ props.userData.telemed.home_address }}, {{ props.userData.telemed.city }},{{ props.userData.telemed.state }} {{ props.userData.telemed.zip_code }}</span>
+              </VListItemTitle>
+            </VListItem>
+            
+           
+           
+            
+
+            
+            <VListItem>
+              <VListItemTitle class="text-sm">
+                <span class="font-weight-medium">
+                  Contact:
+                </span>
+                <span class="text-body-1">{{ props.userData.telemed.phone_number }}</span>
+              </VListItemTitle>
+            </VListItem>
+            <VListItem>
+              <VListItemTitle class="text-sm">
+                <span class="font-weight-medium">
+                  Availability:
+                </span>
+                <span class="text-body-1">{{ props.userData.telemed.availability_from }}</span> to<span class="text-body-1">{{ props.userData.telemed.availability_to }}</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">
+                  {{ 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>
+
+  <!-- 👉 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>

resources/js/pages/providers/ProviderTabOverview.vue

@@ -0,0 +1,197 @@
+<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();
+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: 'Meeting Date', title: 'Start Time' },
+  //{ key: 'end_time', title: 'End Time' },
+   //{ 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.upcomingMeetings;
+ 
+  patientMeetingList.value = list.map(history => ({
+    ...history,
+    appointment_date: formatDate(history.appointment_date+' '+history.appointment_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="UpComming 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>
+  <CompletedMeetingTab :user-data="props.userData"/>
+</template>

resources/js/pages/providers/meetings.vue

@@ -49,7 +49,7 @@ function changeDateFormat(dateFormat) {
   if (dateFormat) {
     const [datePart, timePart] = dateFormat.split(' ');
     const [year, month, day] = datePart.split('-');
-    const formattedDate = `${parseInt(month)}-${parseInt(day)}-${year}`;
+    // const formattedDate = `${parseInt(month)}-${parseInt(day)}-${year}`;
     return `${formattedDate} ${timePart}`;
   }
   return dateFormat;

resources/js/pages/providers/provider-profile.vue

@@ -0,0 +1,114 @@
+<script setup>
+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);
+
+const store = useStore();
+const route = useRoute('apps-user-view-id')
+const userTab = ref(null)
+
+const tabs = [
+  {
+    icon: 'ri-group-line',
+    title: 'Overview',
+  },
+  {
+    icon: 'ri-lock-2-line',
+    title: 'Notes',
+  },
+  {
+    icon: 'ri-bookmark-line',
+    title: 'Prescriptions',
+  },
+  // {
+  //   icon: 'ri-notification-4-line',
+  //   title: 'Notifications',
+  // },
+  // {
+  //   icon: 'ri-link-m',
+  //   title: 'Connections',
+  // },
+]
+const getPatientDeatail = async () => {
+  store.dispatch('updateIsLoading', true);
+  await store.dispatch('providerDetial', { id: route.params.id });
+  store.dispatch('updateIsLoading', false);
+
+  let list = store.getters.getProviderDetail;
+  patientDtail.value=list
+  console.log(list.patient);
+};
+onMounted(async () => {
+  await getPatientDeatail();
+  
+});
+//const { data: userData } = await useApi(`/apps/users/${ route.params.id }`)
+</script>
+
+<template>
+  <VRow v-if="patientDtail">
+    <VCol
+      cols="12"
+      md="5"
+      lg="4"
+    >
+      <ProviderBioPanel :user-data="patientDtail" />
+    </VCol>
+
+    <VCol
+      cols="12"
+      md="7"
+      lg="8"
+    >
+      <VTabs
+        v-model="userTab"
+        class="v-tabs-pill"
+      >
+        <VTab
+          v-for="tab in tabs"
+          :key="tab.icon"
+        >
+          <VIcon
+            start
+            :icon="tab.icon"
+          />
+          <span>{{ tab.title }}</span>
+        </VTab>
+      </VTabs>
+
+      <VWindow
+        v-model="userTab"
+        class="mt-6 disable-tab-transition"
+        :touch="false"
+      >
+        <VWindowItem>
+          <ProviderTabOverview :user-data="patientDtail"/>
+        </VWindowItem>
+
+        <VWindowItem>
+          <NotesPanel :notes-data="patientDtail"/>
+        </VWindowItem>
+
+        <VWindowItem>
+          <PrescriptionPanel :prescription-data="patientDtail"/>
+        </VWindowItem>
+
+        <VWindowItem>
+          <UserTabNotifications />
+        </VWindowItem>
+
+       
+      </VWindow>
+    </VCol>
+  </VRow>
+  <VCard v-else>
+    <VCardTitle class="text-center">
+      No User Found
+    </VCardTitle>
+  </VCard>
+</template>

resources/js/pages/providers/providers.vue

@@ -74,10 +74,10 @@ const headers = [
     key: 'phone_no',
   },
  
-  {
-    title: 'ACTIONS',
-    key: 'actions',
-  },
+  // {
+  //   title: 'ACTIONS',
+  //   key: 'actions',
+  // },
 ]
 
 const resolveStatusVariant = status => {
@@ -152,6 +152,89 @@ const save = async () => {
  
   
 }
+const states = ref([
+    
+    { name: 'Alabama', abbreviation: 'AL' },
+    { name: 'Alaska', abbreviation: 'AK' },
+    { name: 'Arizona', abbreviation: 'AZ' },
+    { name: 'Arkansas', abbreviation: 'AR' },
+    { name: 'Howland Island', abbreviation: 'UM-84' },
+    { name: 'Delaware', abbreviation: 'DE' },
+    { name: 'Maryland', abbreviation: 'MD' },
+    { name: 'Baker Island', abbreviation: 'UM-81' },
+    { name: 'Kingman Reef', abbreviation: 'UM-89' },
+    { name: 'New Hampshire', abbreviation: 'NH' },
+    { name: 'Wake Island', abbreviation: 'UM-79' },
+    { name: 'Kansas', abbreviation: 'KS' },
+    { name: 'Texas', abbreviation: 'TX' },
+    { name: 'Nebraska', abbreviation: 'NE' },
+    { name: 'Vermont', abbreviation: 'VT' },
+    { name: 'Jarvis Island', abbreviation: 'UM-86' },
+    { name: 'Hawaii', abbreviation: 'HI' },
+    { name: 'Guam', abbreviation: 'GU' },
+    { name: 'United States Virgin Islands', abbreviation: 'VI' },
+    { name: 'Utah', abbreviation: 'UT' },
+    { name: 'Oregon', abbreviation: 'OR' },
+    { name: 'California', abbreviation: 'CA' },
+    { name: 'New Jersey', abbreviation: 'NJ' },
+    { name: 'North Dakota', abbreviation: 'ND' },
+    { name: 'Kentucky', abbreviation: 'KY' },
+    { name: 'Minnesota', abbreviation: 'MN' },
+    { name: 'Oklahoma', abbreviation: 'OK' },
+    { name: 'Pennsylvania', abbreviation: 'PA' },
+    { name: 'New Mexico', abbreviation: 'NM' },
+    { name: 'American Samoa', abbreviation: 'AS' },
+    { name: 'Illinois', abbreviation: 'IL' },
+    { name: 'Michigan', abbreviation: 'MI' },
+    { name: 'Virginia', abbreviation: 'VA' },
+    { name: 'Johnston Atoll', abbreviation: 'UM-67' },
+    { name: 'West Virginia', abbreviation: 'WV' },
+    { name: 'Mississippi', abbreviation: 'MS' },
+    { name: 'Northern Mariana Islands', abbreviation: 'MP' },
+    { name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
+    { name: 'Massachusetts', abbreviation: 'MA' },
+    { name: 'Connecticut', abbreviation: 'CT' },
+    { name: 'Florida', abbreviation: 'FL' },
+    { name: 'District of Columbia', abbreviation: 'DC' },
+    { name: 'Midway Atoll', abbreviation: 'UM-71' },
+    { name: 'Navassa Island', abbreviation: 'UM-76' },
+    { name: 'Indiana', abbreviation: 'IN' },
+    { name: 'Wisconsin', abbreviation: 'WI' },
+    { name: 'Wyoming', abbreviation: 'WY' },
+    { name: 'South Carolina', abbreviation: 'SC' },
+    { name: 'Arkansas', abbreviation: 'AR' },
+    { name: 'South Dakota', abbreviation: 'SD' },
+    { name: 'Montana', abbreviation: 'MT' },
+    { name: 'North Carolina', abbreviation: 'NC' },
+    { name: 'Palmyra Atoll', abbreviation: 'UM-95' },
+    { name: 'Puerto Rico', abbreviation: 'PR' },
+    { name: 'Colorado', abbreviation: 'CO' },
+    { name: 'Missouri', abbreviation: 'MO' },
+    { name: 'New York', abbreviation: 'NY' },
+    { name: 'Maine', abbreviation: 'ME' },
+    { name: 'Tennessee', abbreviation: 'TN' },
+    { name: 'Georgia', abbreviation: 'GA' },
+    { name: 'Louisiana', abbreviation: 'LA' },
+    { name: 'Nevada', abbreviation: 'NV' },
+    { name: 'Iowa', abbreviation: 'IA' },
+    { name: 'Idaho', abbreviation: 'ID' },
+    { name: 'Rhode Island', abbreviation: 'RI' },
+    { name: 'Washington', abbreviation: 'WA' },
+    { name: 'Ohio', abbreviation: 'OH' },
+    { name: 'All', abbreviation: 'All' }
+    // ... (add the rest of the states)
+]);
+
+const sortedStates = computed(() => {
+    const sorted = states.value.slice().sort((a, b) => {
+        // Move "All" to the beginning
+        if (a.name === 'All') return -1;
+        if (b.name === 'All') return 1;
+        // Sort other states alphabetically
+        return a.name.localeCompare(b.name);
+    });
+    return sorted;
+});
 const getMettings = (Item) => {
   router.push('/admin/provider/meetings/'+Item.id);
 }
@@ -164,19 +247,116 @@ const deleteItemConfirm = async() => {
   closeDelete()
 }
 const getprovidersList = computed(async () => {
-  store.dispatch('updateIsLoading', true)
-  await store.dispatch('providersList')
-  console.log('getProvidersList',store.getters.getProvidersList)
+  providersList.value = [];
+  console.log('getprovidersFilterList',store.getters.getProvidersList)
     let list = store.getters.getProvidersList
     store.dispatch('updateIsLoading', false)
     providersList.value = list
     return providersList.value
 });
 
-onMounted(() => {
+const getProviderFilter = async() => {
+  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(async() => {
+  store.dispatch('updateIsLoading', true)
+  await store.dispatch('providersList')
+   store.dispatch('updateIsLoading', false)
 
 })
+const filter = ref({
+  practics_state:'',
+    gender: 'All',
+    state: 'All',
+    specialty:'',
+    availabilityFrom:'All',
+    availabilityTo:'All'
+    // plan: '',
+})
+// const onSubcriptionChange = async(newvalue)=> {
+//   filter.value.plan = newvalue;
+//   console.log("Plan",filter.value.plan );
+//   await getPatientFilter();
+
+// }
+
+const onSpecialty = async(newvalue)=> {
+  if(newvalue.length > 3){
+    filter.value.specialty = newvalue;
+    console.log("onSpecialty",filter.value.specialty);
+  }
+  
+  // await getPatientFilter();
+
+}
+
+const onGenderChange = async(newvalue)=> {
+  filter.value.gender = newvalue;
+  console.log("gender",filter.value.gender);
+  await getProviderFilter();
+
+}
+
+const onStateChange = async(newvalue)=> {
+  filter.value.state = newvalue;
+  console.log("state",filter.value.state);
+   await getProviderFilter();
+
+}
+const onAvailabilityFromChange = async(newvalue)=> {
+  filter.value.availabilityFrom = newvalue;
+  console.log("frmo",filter.value.availabilityFrom);
+  await getProviderFilter();
+
+}
+const onAvailabilityToChange = async(newvalue)=> {
+  filter.value.availabilityTo = newvalue;
+  console.log("to",filter.value.availabilityTo);
+  await getProviderFilter();
+
+}
+
+const onPracticsStateChange = async(newvalue)=> {
+  filter.value.practics_state = newvalue;
+  console.log("state",filter.value.practics_state);
+  await getProviderFilter();
+
+}
+const onDateRangeChange = async(newvalue)=> {
+  filter.value.date_range = newvalue;
+  console.log("Length", newvalue.length);
+}
+
+const timeOptions = computed(() => {
+  const options = ['All'];
+
+  // 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>
@@ -185,10 +365,102 @@ onMounted(() => {
     <VCard title="Providers">
       <VCardText >
           <VRow>
+            <!-- <VCol
+              cols="12"
+          
+              md="3"
+            >
+            <VSelect
+                 v-model="filter.plan"
+                 label="Subcription"
+                  placeholder="Subcription"
+                  density="comfortable"
+                  :items="subcriptionLists"
+                  item-title="title"
+                  item-value="slug"
+                  @update:model-value="onSubcriptionChange"
+          />
+          
+          
+          </VCol> -->
+          <!-- <VCol
+              cols="12"
+              md="2"
+            >
+            <VSelect
+                  v-model="filter.practics_state"
+                  label="Practics State"
+                  density="comfortable"
+                  :items="sortedStates"
+                  item-title="name"
+                  item-value="abbreviation"
+                  @update:model-value="onPracticsStateChange"
+                  
+          />
+            </VCol> -->
             <VCol
               cols="12"
-              offset-md="8"
-              md="4"
+              
+              md="2"
+            >
+            
+          <VSelect
+                  v-model="filter.gender"
+                  label="Gender"
+                  placeholder="Gender"
+                  density="comfortable"
+                  :items="['All','Male', 'Female']"
+                  @update:model-value="onGenderChange"
+                  
+          />
+          
+          </VCol>
+          <VCol
+              cols="12"
+              
+              md="2"
+            >
+            <VSelect
+                  v-model="filter.state"
+                  label="State"
+                  density="comfortable"
+                  :items="sortedStates"
+                  item-title="name"
+                  item-value="abbreviation"
+                  @update:model-value="onStateChange"
+                  
+          />
+          
+           </VCol>
+           
+             <!-- <VCol
+              cols="12"
+              md="2"
+            >
+              <VTextField
+                v-model="filter.specialty"
+                label="Speciality"
+                append-inner-icon="ri-search-line"
+                @update:model-value="onSpecialty"
+              />
+            </VCol> -->
+            <VCol
+              cols="12"
+              md="3"
+            >
+                 <VSelect  @update:model-value="onAvailabilityFromChange" v-model="filter.availabilityFrom" label="Availability From" :items="timeOptions" density="comfortable" />
+              </VCol>
+               <VCol
+              cols="12"
+              md="3"
+            >
+                <VSelect  @update:model-value="onAvailabilityToChange" v-model="filter.availabilityTo" label="Availability To" :items="timeOptions" density="comfortable"
+               />
+
+              </VCol>
+               <VCol
+              cols="12"
+              md="2"
             >
               <VTextField
                 v-model="search"
@@ -231,7 +503,12 @@ onMounted(() => {
             </VAvatar>
 
             <div class="d-flex flex-column ms-3">
-              <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
+              <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>
@@ -253,12 +530,14 @@ onMounted(() => {
             <IconBtn
               size="small"
               @click="editItem(item)"
+              style="display: none;"
             >
               <VIcon icon="ri-pencil-line" />
             </IconBtn>
             <IconBtn
               size="small"
               @click="deleteItem(item)"
+               style="display: none;"
             >
               <VIcon icon="ri-delete-bin-line" />
             </IconBtn>
@@ -407,3 +686,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>

resources/js/pages/reports/providers-report.vue

@@ -0,0 +1,748 @@
+<script setup>
+
+
+
+import { useStore } from 'vuex';
+const store = useStore()
+const editDialog = ref(false)
+const deleteDialog = ref(false)
+const search = ref('')
+const defaultItem = ref({
+  id: -1,
+  avatar: '',
+  name: '',
+  email: '',
+  // dob: '',
+  phone_no: '',
+
+})
+const router = useRouter()
+const editedItem = ref(defaultItem.value)
+const editedIndex = ref(-1)
+const providersList = ref([])
+const providersFilter = ref([])
+const isLoading=ref(false)
+// status options
+const selectedOptions = [
+  {
+    text: 'Active',
+    value: 1,
+  },
+  {
+    text: 'InActive',
+    value: 2,
+  },
+  
+]
+
+    const refVForm = ref(null)
+
+
+const formatPhoneNumber = () => {
+  console.log(editedItem.value)
+  // Remove non-numeric characters from the input
+  const numericValue = editedItem.value.phone_no.replace(/\D/g, '');
+
+  // Apply formatting logic
+  if (numericValue.length <= 10) {
+    editedItem.value.phone_no = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
+  } else {
+    // Limit the input to a maximum of 14 characters
+    const truncatedValue = numericValue.slice(0, 10);
+    editedItem.value.phone_no = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
+  }
+};
+// headers
+const headers = [
+{
+    title: 'ID',
+    key: 'id',
+  },
+  {
+    title: 'NAME',
+    key: 'name',
+  },
+  {
+    title: 'EMAIL',
+    key: 'email',
+  },
+  // {
+  //   title: 'Date Of Birth',
+  //   key: 'dob',
+  // },
+  {
+    title: 'Phone',
+    key: 'phone_no',
+  },
+ 
+  // {
+  //   title: 'ACTIONS',
+  //   key: 'actions',
+  // },
+]
+
+const resolveStatusVariant = status => {
+  if (status === 1)
+    return {
+      color: 'primary',
+      text: 'Current',
+    }
+  else if (status === 2)
+    return {
+      color: 'success',
+      text: 'Professional',
+    }
+  else if (status === 3)
+    return {
+      color: 'error',
+      text: 'Rejected',
+    }
+  else if (status === 4)
+    return {
+      color: 'warning',
+      text: 'Resigned',
+    }
+  else
+    return {
+      color: 'info',
+      text: 'Applied',
+    }
+}
+
+const editItem = item => {
+  editedIndex.value = providersList.value.indexOf(item)
+  editedItem.value = { ...item }
+  editDialog.value = true
+}
+
+const deleteItem = item => {
+  editedIndex.value = providersList.value.indexOf(item)
+  editedItem.value = { ...item }
+  deleteDialog.value = true
+}
+
+const close = () => {
+  editDialog.value = false
+  editedIndex.value = -1
+  editedItem.value = { ...defaultItem.value }
+}
+
+const closeDelete = () => {
+  deleteDialog.value = false
+  editedIndex.value = -1
+  editedItem.value = { ...defaultItem.value }
+}
+
+const save = async () => {
+  await getProviderFilter()
+ 
+  
+}
+const states = ref([
+    
+    { name: 'Alabama', abbreviation: 'AL' },
+    { name: 'Alaska', abbreviation: 'AK' },
+    { name: 'Arizona', abbreviation: 'AZ' },
+    { name: 'Arkansas', abbreviation: 'AR' },
+    { name: 'Howland Island', abbreviation: 'UM-84' },
+    { name: 'Delaware', abbreviation: 'DE' },
+    { name: 'Maryland', abbreviation: 'MD' },
+    { name: 'Baker Island', abbreviation: 'UM-81' },
+    { name: 'Kingman Reef', abbreviation: 'UM-89' },
+    { name: 'New Hampshire', abbreviation: 'NH' },
+    { name: 'Wake Island', abbreviation: 'UM-79' },
+    { name: 'Kansas', abbreviation: 'KS' },
+    { name: 'Texas', abbreviation: 'TX' },
+    { name: 'Nebraska', abbreviation: 'NE' },
+    { name: 'Vermont', abbreviation: 'VT' },
+    { name: 'Jarvis Island', abbreviation: 'UM-86' },
+    { name: 'Hawaii', abbreviation: 'HI' },
+    { name: 'Guam', abbreviation: 'GU' },
+    { name: 'United States Virgin Islands', abbreviation: 'VI' },
+    { name: 'Utah', abbreviation: 'UT' },
+    { name: 'Oregon', abbreviation: 'OR' },
+    { name: 'California', abbreviation: 'CA' },
+    { name: 'New Jersey', abbreviation: 'NJ' },
+    { name: 'North Dakota', abbreviation: 'ND' },
+    { name: 'Kentucky', abbreviation: 'KY' },
+    { name: 'Minnesota', abbreviation: 'MN' },
+    { name: 'Oklahoma', abbreviation: 'OK' },
+    { name: 'Pennsylvania', abbreviation: 'PA' },
+    { name: 'New Mexico', abbreviation: 'NM' },
+    { name: 'American Samoa', abbreviation: 'AS' },
+    { name: 'Illinois', abbreviation: 'IL' },
+    { name: 'Michigan', abbreviation: 'MI' },
+    { name: 'Virginia', abbreviation: 'VA' },
+    { name: 'Johnston Atoll', abbreviation: 'UM-67' },
+    { name: 'West Virginia', abbreviation: 'WV' },
+    { name: 'Mississippi', abbreviation: 'MS' },
+    { name: 'Northern Mariana Islands', abbreviation: 'MP' },
+    { name: 'United States Minor Outlying Islands', abbreviation: 'UM' },
+    { name: 'Massachusetts', abbreviation: 'MA' },
+    { name: 'Connecticut', abbreviation: 'CT' },
+    { name: 'Florida', abbreviation: 'FL' },
+    { name: 'District of Columbia', abbreviation: 'DC' },
+    { name: 'Midway Atoll', abbreviation: 'UM-71' },
+    { name: 'Navassa Island', abbreviation: 'UM-76' },
+    { name: 'Indiana', abbreviation: 'IN' },
+    { name: 'Wisconsin', abbreviation: 'WI' },
+    { name: 'Wyoming', abbreviation: 'WY' },
+    { name: 'South Carolina', abbreviation: 'SC' },
+    { name: 'Arkansas', abbreviation: 'AR' },
+    { name: 'South Dakota', abbreviation: 'SD' },
+    { name: 'Montana', abbreviation: 'MT' },
+    { name: 'North Carolina', abbreviation: 'NC' },
+    { name: 'Palmyra Atoll', abbreviation: 'UM-95' },
+    { name: 'Puerto Rico', abbreviation: 'PR' },
+    { name: 'Colorado', abbreviation: 'CO' },
+    { name: 'Missouri', abbreviation: 'MO' },
+    { name: 'New York', abbreviation: 'NY' },
+    { name: 'Maine', abbreviation: 'ME' },
+    { name: 'Tennessee', abbreviation: 'TN' },
+    { name: 'Georgia', abbreviation: 'GA' },
+    { name: 'Louisiana', abbreviation: 'LA' },
+    { name: 'Nevada', abbreviation: 'NV' },
+    { name: 'Iowa', abbreviation: 'IA' },
+    { name: 'Idaho', abbreviation: 'ID' },
+    { name: 'Rhode Island', abbreviation: 'RI' },
+    { name: 'Washington', abbreviation: 'WA' },
+    { name: 'Ohio', abbreviation: 'OH' },
+    { name: 'All', abbreviation: 'All' }
+    // ... (add the rest of the states)
+]);
+
+const sortedStates = computed(() => {
+    const sorted = states.value.slice().sort((a, b) => {
+        // Move "All" to the beginning
+        if (a.name === 'All') return -1;
+        if (b.name === 'All') return 1;
+        // Sort other states alphabetically
+        return a.name.localeCompare(b.name);
+    });
+    return sorted;
+});
+const getMettings = (Item) => {
+  router.push('/admin/provider/meetings/'+Item.id);
+}
+const deleteItemConfirm = async() => {
+  console.log('editedIndex.value',editedIndex.value,editedItem.value.id)
+  await store.dispatch('providerDelete',{
+    id: editedItem.value.id
+  })
+  providersList.value.splice(editedIndex.value, 1)
+  closeDelete()
+}
+
+
+const getProviderFilter = async() => {
+  store.dispatch('updateIsLoading', true)
+  await store.dispatch('providersReportsFilterList',{
+    gender: filter.value.gender.toLowerCase(),
+    state: filter.value.state,
+    availabilityFrom: filter.value.availabilityFrom.toLowerCase(),
+    availabilityTo: filter.value.availabilityTo.toLowerCase(),
+    specialty: filter.value.specialty,
+    provider_list: filter.value.provider_list,
+     practics_state:filter.value.practics_state,
+  })
+
+   store.dispatch('updateIsLoading', false)
+ }
+
+onMounted(async() => {
+  store.dispatch('updateIsLoading', true)
+  await store.dispatch('providersReportFilter')
+  providersFilter.value =store.getters.getProvidersReportFilter
+   store.dispatch('updateIsLoading', false)
+
+})
+const filter = ref({
+  practics_state:'',
+    gender: 'All',
+    state: 'All',
+    specialty:'',
+    availabilityFrom:'All',
+    availabilityTo: 'All',
+    provider_list:'All'
+    // plan: '',
+})
+// const onSubcriptionChange = async(newvalue)=> {
+//   filter.value.plan = newvalue;
+//   console.log("Plan",filter.value.plan );
+//   await getPatientFilter();
+
+// }
+
+const onSpecialty = async(newvalue)=> {
+  if(newvalue.length > 3){
+    filter.value.specialty = newvalue;
+    console.log("onSpecialty",filter.value.specialty);
+  }
+  
+//await getProviderFilter();
+
+}
+
+const onGenderChange = async(newvalue)=> {
+  filter.value.gender = newvalue;
+  console.log("gender",filter.value.gender);
+  //await getProviderFilter();
+
+}
+
+const onStateChange = async(newvalue)=> {
+  filter.value.state = newvalue;
+  console.log("state",filter.value.state);
+   //await getProviderFilter();
+
+}
+const onAvailabilityFromChange = async(newvalue)=> {
+  filter.value.availabilityFrom = newvalue;
+  console.log("frmo",filter.value.availabilityFrom);
+  //await getProviderFilter();
+
+}
+const onAvailabilityToChange = async(newvalue)=> {
+  filter.value.availabilityTo = newvalue;
+  console.log("to",filter.value.availabilityTo);
+  //await getProviderFilter();
+
+}
+const onProviderListChange = async(newvalue)=> {
+  filter.value.provider_list = newvalue;
+  console.log("provider_list",filter.value.provider_list);
+ //await getProviderFilter();
+
+}
+const onPracticsStateChange = async(newvalue)=> {
+  filter.value.practics_state = newvalue;
+  console.log("state",filter.value.practics_state);
+ //await getProviderFilter();
+
+}
+const onDateRangeChange = async(newvalue)=> {
+  filter.value.date_range = newvalue;
+  console.log("Length", newvalue.length);
+}
+
+const timeOptions = computed(() => {
+  const options = ['All'];
+
+  // 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>
+  <v-row>
+    <v-col cols="12" md="12" >
+    <VCard title="Providers">
+      <VCardText >
+          <VRow>
+            <!-- <VCol
+              cols="12"
+          
+              md="3"
+            >
+            <VSelect
+                 v-model="filter.plan"
+                 label="Subcription"
+                  placeholder="Subcription"
+                  density="comfortable"
+                  :items="subcriptionLists"
+                  item-title="title"
+                  item-value="slug"
+                  @update:model-value="onSubcriptionChange"
+          />
+          
+          
+          </VCol> -->
+          <!-- <VCol
+              cols="12"
+              md="2"
+            >
+            <VSelect
+                  v-model="filter.practics_state"
+                  label="Practics State"
+                  density="comfortable"
+                  :items="sortedStates"
+                  item-title="name"
+                  item-value="abbreviation"
+                  @update:model-value="onPracticsStateChange"
+                  
+          />
+            </VCol> -->
+            <VCol
+              cols="12"
+              
+              md="2"
+            >
+            
+          <VSelect
+                  v-model="filter.gender"
+                  label="Gender"
+                  placeholder="Gender"
+                  density="comfortable"
+                  :items="['All','Male', 'Female']"
+                  @update:model-value="onGenderChange"
+                  
+          />
+          
+          </VCol>
+           <VCol
+              cols="12"
+              
+              md="2"
+            >
+            <VAutocomplete
+             v-model="filter.provider_list"
+              label="Provider"
+              :items="providersFilter.provider_list"
+              item-title="name"
+              item-value="id"
+              placeholder="Select Provider"
+              @update:model-value="onProviderListChange"
+            />
+          
+          
+           </VCol>
+           <VCol
+              cols="12"
+              
+              md="2"
+            >
+            <VAutocomplete
+             v-model="filter.practics_state"
+              label="Practice States"
+              :items="providersFilter.practicing_states"
+              item-title="name"
+              item-value="abbreviation"
+              placeholder="Select State"
+              @update:model-value="onPracticsStateChange"
+            />
+          
+        
+           </VCol>
+          <VCol
+              cols="12"
+              
+              md="2"
+            >
+            <VAutocomplete
+             v-model="filter.state"
+              label="States"
+              :items="sortedStates"
+              item-title="name"
+              item-value="abbreviation"
+              placeholder="Select State"
+                 @update:model-value="onStateChange"
+            />
+               
+           </VCol>
+            <VCol
+              cols="12"
+              
+              md="2"
+            >
+          <VAutocomplete
+             v-model="filter.specialty"
+              label="Specialty"
+              :items="providersFilter.specialty"
+              item-title="specialty"
+              item-value="specialty"
+              placeholder="Select specialty"
+                 @update:model-value="onSpecialty"
+            />
+          
+           </VCol>
+            <VCol
+              cols="12"
+              md="2"
+            >
+              <VTextField
+                v-model="search"
+                label="Search"
+                placeholder="Search ..."
+                append-inner-icon="ri-search-line"
+                single-line
+                hide-details
+                dense
+                outlined
+              />
+            </VCol>
+             <!-- <VCol
+              cols="12"
+              md="2"
+            >
+              <VTextField
+                v-model="filter.specialty"
+                label="Speciality"
+                append-inner-icon="ri-search-line"
+                @update:model-value="onSpecialty"
+              />
+            </VCol> -->
+            <VCol
+              cols="12"
+              md="3"
+            >
+                 <VSelect  @update:model-value="onAvailabilityFromChange" v-model="filter.availabilityFrom" label="Availability From" :items="timeOptions" density="comfortable" />
+              </VCol>
+               <VCol
+              cols="12"
+              md="3"
+            >
+                <VSelect  @update:model-value="onAvailabilityToChange" v-model="filter.availabilityTo" label="Availability To" :items="timeOptions" density="comfortable"
+               />
+
+              </VCol>
+              
+          </VRow>
+          <VCardActions>
+        <VSpacer />
+
+       
+
+        <VBtn
+          color="success"
+          variant="elevated"
+          @click="getProviderFilter"
+        >
+        <VIcon class="ri-file-download-line" ></VIcon>
+          Download
+        </VBtn>
+        
+      </VCardActions>
+        </VCardText>
+      <VDataTable
+        :headers="headers"
+        :items="providersList"
+        :search="search"
+        :items-per-page="5"
+        class="text-no-wrap"
+        style="display: none;"
+      >
+        <!-- full name -->
+        <template #item.name="{ item }">
+          <div class="d-flex align-center">
+            <!-- avatar -->
+            <VAvatar
+              size="32"
+              :color="item.avatar ? '' : 'primary'"
+              :class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
+              :variant="!item.avatar ? 'tonal' : undefined"
+            >
+              <VImg
+                v-if="item.avatar"
+                :src="item.avatar"
+              />
+              <span
+                v-else
+                class="text-sm"
+              >{{ avatarText(item.name) }}</span>
+            </VAvatar>
+
+            <div class="d-flex flex-column ms-3">
+              <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>
+        </template>
+
+        <!-- status -->
+        <template #item.status="{ item }">
+          <VChip
+            :color="resolveStatusVariant(item.status).color"
+            density="comfortable"
+          >
+            {{ resolveStatusVariant(item.status).text }}
+          </VChip>
+        </template>
+
+        <!-- Actions -->
+        <template #item.actions="{ item }">
+          <div class="d-flex gap-1">
+            <IconBtn
+              size="small"
+              @click="editItem(item)"
+              style="display: none;"
+            >
+              <VIcon icon="ri-pencil-line" />
+            </IconBtn>
+            <IconBtn
+              size="small"
+              @click="deleteItem(item)"
+               style="display: none;"
+            >
+              <VIcon icon="ri-delete-bin-line" />
+            </IconBtn>
+             <IconBtn
+                size="small"
+                @click="getMettings(item)"
+              >
+              <VIcon icon="ri-time-line" />
+            </IconBtn>
+          </div>
+        </template>
+      </VDataTable>
+    </VCard>  
+    </v-col>
+  </v-row>
+  <!-- 👉 Edit Dialog  -->
+  <VDialog
+    v-model="editDialog"
+    max-width="600px"
+  >
+  <VForm ref="refVForm" >
+    <VCard>
+      <VCardTitle>
+        <span class="headline">Edit Provider</span>
+      </VCardTitle>
+
+      <VCardText>
+        <VContainer >
+         
+          <VRow>
+            <!-- fullName -->
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="editedItem.first_name"
+                label="First Name"
+                :rules="[requiredFirstName]"
+              />
+            </VCol>
+            <VCol cols="12" md="6">
+              <VTextField
+                v-model="editedItem.last_name"
+                label="Last Name"
+                :rules="[requiredLastName]"
+              />
+            </VCol>
+
+            <!-- email -->
+            <VCol cols="12" sm="6" md="12">
+              <VTextField
+                v-model="editedItem.email"
+                label="Email"
+                :rules="[requiredEmail, emailValidator]"
+              />
+            </VCol>
+
+         
+            <!-- <VCol cols="12" sm="6" md="12">
+              <VTextField
+                v-model="editedItem.dob"
+                label="Date Of Birth"
+              />
+            </VCol> -->
+            <VCol cols="12" sm="6" md="12">
+              <VTextField v-model="editedItem.phone_no" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
+                :rules="[requiredPhone, validUSAPhone]" placeholder="i.e. (000) 000-0000"
+                @input="formatPhoneNumber" max="14" density="comfortable" />
+            </VCol>
+            
+
+         
+
+            <!-- status -->
+            <VCol
+              cols="12"
+
+              md="12"
+            >
+              <VSelect
+                v-model="editedItem.status"
+                :items="selectedOptions"
+                item-title="text"
+                item-value="value"
+                label="Status"
+                variant="outlined"
+              />
+            </VCol>
+          </VRow>
+        </VContainer>
+      </VCardText>
+
+      <VCardActions>
+        <VSpacer />
+
+        <VBtn
+          color="error"
+          variant="outlined"
+          @click="close"
+        >
+          Cancel
+        </VBtn>
+
+        <VBtn
+          color="success"
+          variant="elevated"
+          @click="save"
+        >
+          Save
+        </VBtn>
+        
+      </VCardActions>
+    </VCard>
+    </VForm>
+  </VDialog>
+
+  <!-- 👉 Delete Dialog  -->
+  <VDialog
+    v-model="deleteDialog"
+    max-width="500px"
+  >
+    <VCard>
+      <VCardTitle>
+        Are you sure you want to delete this item?
+      </VCardTitle>
+
+      <VCardActions>
+        <VSpacer />
+
+        <VBtn
+          color="error"
+          variant="outlined"
+          @click="closeDelete"
+        >
+          Cancel
+        </VBtn>
+
+        <VBtn
+          color="success"
+          variant="elevated"
+          @click="deleteItemConfirm"
+        >
+          OK
+        </VBtn>
+
+        <VSpacer />
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+<style scoped>
+.highlighted {
+  /* Add your desired highlighting styles here */
+  font-weight: bold;
+  color: #a169ff; /* or any other color you prefer */
+}
+</style>

resources/js/plugins/1.router/additional-routes.js

@@ -4,9 +4,24 @@ const emailRouteComponent = () => import('@/pages/apps/email/index.vue')
 export const redirects = [
   // ℹ️ We are redirecting to different pages based on role.
   // NOTE: Role is just for UI purposes. ACL is based on abilities.
+  {
+    path: '/admin',
+    // name: 'index',
+    redirect: to => {
+      // TODO: Get type from backend
+      const userData = useCookie('userData')
+      const userRole = userData.value?.role
+      if (userRole === 'admin')
+        return { name: 'admin-dashboard' }
+      if (userRole === 'client')
+        return { name: 'access-control' }
+      
+      return { name: 'login', query: to.query }
+    },
+  },
   {
     path: '/',
-    name: 'index',
+    // name: 'index',
     redirect: to => {
       // TODO: Get type from backend
       const userData = useCookie('userData')
@@ -43,6 +58,11 @@ export const routes = [
     name: 'admin-patients',
     component: () => import('@/pages/patients/patients.vue'),
   },
+  {
+    path: '/admin/patients/labkit/:patient_id',
+    name: 'admin-patients-labkit',
+    component: () => import('@/pages/pages/patient-labkits/labkit.vue'),
+  },
   {
     path: '/admin/patient/meetings/:id',
     name: 'admin-patient-meeitngs',
@@ -63,6 +83,7 @@ export const routes = [
     name: 'admin-provider-meeitng-details',
     component: () => import('@/pages/providers/meeting-details.vue'),
   },
+  
   {
     path: '/admin/patient/meeting/prescription/:patient_id/:id',
     name: 'admin-patient-meeitng-prescription',
@@ -89,9 +110,9 @@ export const routes = [
     component: () => import('@/pages/labs/labs-kit.vue'),
   },
   {
-    path: '/admin/medicines',
-    name: 'admin-medicines',
-    component: () => import('@/pages/medicines/medicines.vue'),
+    path: '/admin/products',
+    name: 'admin-products',
+    component: () => import('@/pages/products/product.vue'),
   },
    {
     path: '/admin/profile',
@@ -107,6 +128,38 @@ export const routes = [
     path: '/admin/site-setting',
     name: 'admin-site-setting',
     component: () => import('@/views/pages/account-settings/WebsiteSettings.vue'),
+  },
+   {
+    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',
+    name: 'admin-providers-patientprofile',
+    component: () => import('@/pages/patients/PatientQuestionProfile.vue'),
+  },
+    {
+    path: '/admin/reports/providers',
+    name: 'admin-provider-report',
+    component: () => import('@/pages/reports/providers-report.vue'),
+  },
+  {
+    path: '/admin/orders',
+    name: 'admin-orders',
+    component: () => import('@/pages/apps/ecommerce/order/list/index.vue'),
   },
   {
     path: '/apps/email/filter/:filter',
@@ -144,4 +197,5 @@ export const routes = [
     name: 'apps-ecommerce-dashboard',
     component: () => import('@/pages/dashboards/ecommerce.vue'),
   },
+  
 ]

resources/js/plugins/i18n/locales/en.json

@@ -157,7 +157,9 @@
   "Fleet": "Fleet",
   "Widgets": "Widgets",
   "Patients": "Patients",
+  "Lab Kites": "Lab Kites",
   "Providers": "Providers",
+  "Prodcuts": "Prodcuts",
   "Labs": "Labs",
   "Medicines": "Medicines",
   "Profile": "Profile",

resources/js/store.js

@@ -1,12 +1,18 @@
 import axios from 'axios';
 import { createStore } from 'vuex';
 import {
+  ADMIN_GET_ORDER_API,
   ADMIN_GET_SITE_SETTING,
   ADMIN_LAB_KIT_ADD_API,
   ADMIN_LAB_KIT_DELETE_API,
   ADMIN_LAB_KIT_LIST_API,
   ADMIN_LAB_KIT_UPDATE_API,
   ADMIN_LOGIN_DETAIL,
+  ADMIN_PATIENT_DETAIL_API,
+  ADMIN_PATIENT_PROFILE_API,
+  ADMIN_PROVIDER_DETAIL_API,
+  ADMIN_PROVIDER_REPORT_API,
+  ADMIN_PROVIDER_REPORT_POST_API,
   ADMIN_UPDATE_PASSWORD,
   ADMIN_UPDATE_SITE_SETTING,
   APPOINTMENT_DETAILS_API,
@@ -21,18 +27,23 @@ import {
   MEETING_NOTES_API,
   MEETING_PRESCREPTIONS_API,
   PATIENT_DELETE_API,
+  PATIENT_FILTER_LIST_API,
+  PATIENT_LABKIT_LIST_API,
+  PATIENT_LABKIT_STATUS_UPDATE_API,
   PATIENT_LIST_API,
   PATIENT_MEETING_LIST_API,
+  PATIENT_PRESCRIPTION_STATUS_UPDATE_API,
   PATIENT_UPDATE_API,
   PROFILE_UPDATE_API,
   PROVIDER_DELETE_API,
+  PROVIDER_FILTER_LIST_API,
   PROVIDER_LIST_API,
   PROVIDER_MEETING_LIST_API,
-  PROVIDER_UPDATE_API
+  PROVIDER_UPDATE_API,
+  SUBCRIPTIONS_LIST_API
 } from './constants.js';
 
 
-
 export default createStore({
   state: {
     isLoading: false,
@@ -40,9 +51,15 @@ export default createStore({
     isSuccessMsg: false,
     patientList:[],
     patientMeetingList: [],
+    patientLabKitList:[],
     providerMeetingList:[],
-    providersList:[],
+    providersList: [],
+    providersReportFilter: [],
+    providersReportData:[],
     labsList:[],
+    subcriptions:[],
+    patientLabKitStatus:'',
+    patientPrescriptionStatus:'',
     singlePatientAppointment: null,
     patientPrescription:null,
     patientNotes: null,
@@ -53,7 +70,11 @@ export default createStore({
     showMessage: null,
     timeout: null,
     checkLoginExpire: false,
-    labKitList:[]
+    labKitList: [],
+    patientDetail: null,
+    providerDetail:null,
+    patientAnswers: null,
+    orderList:null
   },
   mutations: {
     setLoading(state, payload) {
@@ -85,14 +106,38 @@ export default createStore({
        state.showMessage = payload
        
     },
+    setSubcriptions(state, payload) {
+      state.subcriptions = payload
+    },  
+     setPatientDetail(state, payload) {
+      console.log('payload');
+        state.patientDetail = payload
+    },
+      setProviderDetail(state, payload) {
+      console.log('payload');
+        state.providerDetail = payload
+    },
+      setProvidersReportFilter(state, payload) {
+      console.log('payload');
+        state.providersReportFilter = payload
+    },
+      
+      setProviderMeetingList(state, payload) {
+      console.log('payload');
+        state.providerMeetingList = payload
+    },
+      
     setPtientList(state, payload) {
       state.patientList = payload
     },
     setPtientMeetingList(state, payload) {
       state.patientMeetingList = payload
     },
-    setProviderMeetingList(state, payload) {
-      state.providerMeetingList = payload
+    setPtientMeetingList(state, payload) {
+      state.patientMeetingList = payload
+    },
+    setPatientLabKitList(state, payload) {
+      state.patientLabKitList = payload
     },
     setProvidersList(state, payload) {
       state.providersList = payload
@@ -123,7 +168,23 @@ export default createStore({
     },
     setSiteSetting(state, payload) {
       state.siteSetting = payload
-    }
+    },
+    setPatientLabKitStatus(state, payload) {
+      state.patientLabKitStatus = payload
+    },
+    setPatientPrescriptionStatus(state, payload) {
+      state.patientPrescriptionStatus = payload
+    },
+    setPatientAnswers(state, payload) {
+      state.patientAnswers = payload
+    },
+    
+      setProvidersReportData(state, payload){
+       state.providersReportData= payload
+    },
+    setOrderList(state, payload){
+       state.orderList= payload
+    },
   },
   actions: {
     
@@ -136,7 +197,11 @@ export default createStore({
     async patientList({ commit }, payload) {
       commit('setLoading', true)
       console.log(localStorage.getItem('admin_access_token'))
-      await axios.post(PATIENT_LIST_API, {}, {
+      await axios.post(PATIENT_LIST_API, {
+        plan:  'all' ,
+        gender: 'all',
+        state: 'all',
+      }, {
         headers: {
             'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
         }
@@ -165,6 +230,59 @@ export default createStore({
             console.error('Error:', error);
           });
     },
+    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',
+        state: payload.state? payload.state :'all',
+      }, {
+        headers: {
+            'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+      })  .then(response => {
+            commit('setLoading', false)
+            console.log('Response Patient:', 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_no
+              dataObject.avatar = '',
+              dataObject.id = data.id,
+              dataArray.push(dataObject)
+            }
+            console.log(dataArray)
+            commit('setPtientList',dataArray)
+  
+          })
+          .catch(error => {
+            commit('setLoading', false)
+            console.error('Error:', error);
+          });
+    },
+    async getSubcriptions ({commit,state},payload){
+      commit('setLoading', true)
+      await axios.post(SUBCRIPTIONS_LIST_API, {}, {
+        headers: {
+            'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+      })  .then(response => {
+            commit('setLoading', false)
+            console.log('Response Subcriptions:', response.data);
+            commit('setSubcriptions',response.data);
+          })
+          .catch(error => {
+            commit('setLoading', false)
+            commit('setPrescription',null)
+            console.error('Error:', error);
+          });
+    },
     async patientMeetingList({ commit }, payload) {
       commit('setLoading', true)
       console.log(localStorage.getItem('admin_access_token'))
@@ -240,10 +358,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')}`,
         }
@@ -384,6 +550,56 @@ export default createStore({
             console.error('Error:', error);
           });
     },
+    async patientLabKitList ({commit,state},payload){
+      commit('setLoading', true)
+      await axios.post(PATIENT_LABKIT_LIST_API+payload.patient_id ,{}, {
+        headers: {
+            'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+    })  .then(response => {
+              commit('setLoading', false)
+              console.log('Response Labkit:', response.data);
+              commit('setPatientLabKitList',response.data)
+          })
+          .catch(error => {
+            commit('setLoading', false)
+            console.error('Error:', error);
+          });
+    },
+    async updateLabkitListStatus ({commit,state},payload){
+      commit('setLoading', true)
+      await axios.post(PATIENT_LABKIT_STATUS_UPDATE_API+payload.cart_id ,{
+          status:payload.status
+      }, {
+        headers: {
+            'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+    })  .then(response => {
+              commit('setLoading', false)
+              commit('setPatientLabKitStatus',response.data);
+          })
+          .catch(error => {
+            commit('setLoading', false)
+            console.error('Error:', error);
+          });
+    },
+    async updatePrescriptionStatus ({commit,state},payload){
+      commit('setLoading', true)
+      await axios.post(PATIENT_PRESCRIPTION_STATUS_UPDATE_API+payload.prescription_id ,{
+          status:payload.status
+      }, {
+        headers: {
+            'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+    })  .then(response => {
+              commit('setLoading', false)
+              commit('setPatientPrescriptionStatus',response.data);
+          })
+          .catch(error => {
+            commit('setLoading', false)
+            console.error('Error:', error);
+          });
+    },
     async getAppointmentByIdAgent ({commit,state},payload){
       commit('setLoading', true)
       await axios.post(APPOINTMENT_DETAILS_API+payload.patient_id + '/' + payload.appointment_id, {}, {
@@ -392,7 +608,6 @@ export default createStore({
         }
     })  .then(response => {
               commit('setLoading', false)
-              console.log('Response Notes:', response.data.data);
               commit('setSinglePatientAppointment',response.data.data)
           })
           .catch(error => {
@@ -455,7 +670,6 @@ export default createStore({
         }
     })  .then(response => {
               commit('setLoading', false)
-              console.log('Response Notes:', response.data.data);
               commit('setPatientNotes',response.data.data)
           })
           .catch(error => {
@@ -832,6 +1046,136 @@ export default createStore({
             console.error('Error:', error);
           });
     },
+    async patientDetial({ commit }, payload) {
+      commit('setLoading', true)
+     
+      await axios.post(ADMIN_PATIENT_DETAIL_API+payload.id, {}, {
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+      })  .then(response => {
+            commit('setLoading', false)
+        console.log('Response:', response.data);
+           commit('setPatientDetail',response.data)
+  
+          })
+          .catch(error => {
+            commit('setLoading', false)
+            console.error('Error:', error);
+          });
+    },
+    async providerDetial({ commit }, payload) {
+      commit('setLoading', true)
+     
+      await axios.post(ADMIN_PROVIDER_DETAIL_API+payload.id, {}, {
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+      })  .then(response => {
+            commit('setLoading', false)
+        console.log('Response:', response.data);
+           commit('setProviderDetail',response.data)
+  
+          })
+          .catch(error => {
+            commit('setLoading', false)
+            console.error('Error:', error);
+          });
+    },
+    async getAgentQuestionsAnswers ({commit},payload){
+      commit('setLoading', true)
+      await axios.post(ADMIN_PATIENT_PROFILE_API+payload.patient_id, {}, {
+        headers: {
+          'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+    })
+        .then(response => {
+            commit('setLoading', false)
+            console.log('Response:', response.data.data);
+            commit('setPatientAnswers', response.data.data)
+        })
+        .catch(error => {
+            commit('setLoading', false)
+            console.log('Error:', error);
+        });
+      
+    },
+    async providersReportFilter({ commit }, payload) {
+      commit('setLoading', true)
+      console.log(localStorage.getItem('admin_access_token'))
+      await axios.post(ADMIN_PROVIDER_REPORT_API, {}, {
+        headers: {
+            'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+      })  .then(response => {
+              commit('setLoading', false)
+            console.log('Response:', response.data);
+            
+            
+            commit('setProvidersReportFilter',response.data)
+  
+          })
+          .catch(error => {
+            commit('setLoading', false)
+            console.error('Error:', error);
+          });
+    },
+    async providersReportsFilterList({ 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(ADMIN_PROVIDER_REPORT_POST_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',
+        specialty: payload.specialty ? payload.specialty : 'all',
+        provider_list: payload.provider_list ? payload.provider_list : 'all',
+         practice_state: payload.practics_state ? payload.practics_state : 'all',
+      }, {
+        headers: {
+            'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+      })  .then(response => {
+              commit('setLoading', false)
+            console.log('Response:', response.data);
+           
+         
+            commit('setProvidersReportData',response.data)
+  
+          })
+          .catch(error => {
+            commit('setLoading', false)
+            console.error('Error:', error);
+          });
+    },
+    async orderList({ commit }, payload) {
+      commit('setLoading', true)
+      console.log(localStorage.getItem('admin_access_token'))
+      await axios.get(ADMIN_GET_ORDER_API, {
+      
+      }, {
+        headers: {
+            'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
+        }
+      })  .then(response => {
+              commit('setLoading', false)
+            console.log('Response:', response.data);
+      
+        
+            commit('setOrderList',response.data)
+  
+          })
+          .catch(error => {
+            commit('setLoading', false)
+            console.error('Error:', error);
+          });
+    },
   },
   getters: {
     getIsLoading(state){
@@ -848,6 +1192,10 @@ export default createStore({
       console.log('payload');
         return state.showMessage 
     },
+    
+    getSubcriptions(state){
+      return state.subcriptions
+    },
     getPatientList(state){
       return state.patientList
     },
@@ -857,7 +1205,15 @@ export default createStore({
     getProviderMeetingList(state){
       return state.providerMeetingList
     },
-    
+    getPatientLabKitList(state){
+      return state.patientLabKitList
+    },
+    getPatientLabKitStatus(state){
+      return state.patientLabKitStatus
+    },
+    getPatientPrescriptionStatus(state){
+      return state.patientPrescriptionStatus
+    },
     getProvidersList(state){
       return state.providersList
     },
@@ -891,5 +1247,23 @@ export default createStore({
     getLabKitList(state) {
       return state.labKitList
     },
+     getPatientDetail(state) {
+      return state.patientDetail
+    },
+      getProviderDetail(state) {
+      return state.providerDetail
+    },
+    getPatientAnswers(state){
+      return state.patientAnswers
+    },
+    getProvidersReportFilter(state){
+      return state.providersReportFilter
+    },
+     getProvidersReportData(state){
+      return state.providersReportData
+    },
+      getOrderList(state){
+      return state.orderList
+    },
   }
 })

themeConfig.js

@@ -13,7 +13,7 @@ export const { themeConfig, layoutConfig } = defineThemeConfig({
     title: '',
 
     // ❗ if you have SVG logo and want it to adapt according to theme color, you have to apply color as `color: rgb(var(--v-global-theme-primary))`
-    logo: h('div', { innerHTML: `<img src="${logoImage}" alt="Logo" style="width:150px;">` }),
+    logo: h('div', { innerHTML: `<img src="${logoImage}" alt="Logo" style="width:170px;">` }),
     contentWidth: ContentWidth.Boxed,
     contentLayoutNav: AppContentLayoutNav.Vertical,
     overlayNavFromBreakpoint: breakpointsVuetify.md + 16, // 16 for scrollbar. Docs: https://next.vuetifyjs.com/en/features/display-and-platform/

typed-router.d.ts

@@ -121,7 +121,6 @@ declare module 'vue-router/auto/routes' {
     'labs-labs': RouteRecordInfo<'labs-labs', '/labs/labs', Record<never, never>, Record<never, never>>,
     'labs-labs-kit': RouteRecordInfo<'labs-labs-kit', '/labs/labs-kit', Record<never, never>, Record<never, never>>,
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
-    'medicines-medicines': RouteRecordInfo<'medicines-medicines', '/medicines/medicines', Record<never, never>, Record<never, never>>,
     'not-authorized': RouteRecordInfo<'not-authorized', '/not-authorized', Record<never, never>, Record<never, never>>,
     'pages-account-settings-tab': RouteRecordInfo<'pages-account-settings-tab', '/pages/account-settings/:tab', { tab: ParamValue<true> }, { tab: ParamValue<false> }>,
     'pages-authentication-forgot-password-v1': RouteRecordInfo<'pages-authentication-forgot-password-v1', '/pages/authentication/forgot-password-v1', Record<never, never>, Record<never, never>>,
@@ -148,18 +147,36 @@ declare module 'vue-router/auto/routes' {
     'pages-icons': RouteRecordInfo<'pages-icons', '/pages/icons', Record<never, never>, Record<never, never>>,
     'pages-misc-coming-soon': RouteRecordInfo<'pages-misc-coming-soon', '/pages/misc/coming-soon', Record<never, never>, Record<never, never>>,
     'pages-misc-under-maintenance': RouteRecordInfo<'pages-misc-under-maintenance', '/pages/misc/under-maintenance', Record<never, never>, Record<never, never>>,
+    'pages-patient-labkits-labkit': RouteRecordInfo<'pages-patient-labkits-labkit', '/pages/patient-labkits/labkit', Record<never, never>, Record<never, never>>,
     'pages-patient-meetings-notes': RouteRecordInfo<'pages-patient-meetings-notes', '/pages/patient-meetings/notes', Record<never, never>, Record<never, never>>,
     'pages-patient-meetings-prescription': RouteRecordInfo<'pages-patient-meetings-prescription', '/pages/patient-meetings/prescription', Record<never, never>, Record<never, never>>,
     'pages-pricing': RouteRecordInfo<'pages-pricing', '/pages/pricing', Record<never, never>, Record<never, never>>,
     'pages-typography': RouteRecordInfo<'pages-typography', '/pages/typography', Record<never, never>, Record<never, never>>,
     'pages-user-profile-tab': RouteRecordInfo<'pages-user-profile-tab', '/pages/user-profile/:tab', { tab: ParamValue<true> }, { tab: ParamValue<false> }>,
+    'patients-completed-meeting-tab': RouteRecordInfo<'patients-completed-meeting-tab', '/patients/CompletedMeetingTab', Record<never, never>, Record<never, never>>,
     'patients-meeting-details': RouteRecordInfo<'patients-meeting-details', '/patients/meeting-details', Record<never, never>, Record<never, never>>,
     'patients-meetings': RouteRecordInfo<'patients-meetings', '/patients/meetings', Record<never, never>, Record<never, never>>,
+    'patients-notes-panel': RouteRecordInfo<'patients-notes-panel', '/patients/NotesPanel', Record<never, never>, Record<never, never>>,
+    'patients-patient-profile': RouteRecordInfo<'patients-patient-profile', '/patients/patient-profile', Record<never, never>, Record<never, never>>,
+    'patients-patien-tab-overview': RouteRecordInfo<'patients-patien-tab-overview', '/patients/PatienTabOverview', Record<never, never>, Record<never, never>>,
+    'patients-patient-bio-panel': RouteRecordInfo<'patients-patient-bio-panel', '/patients/PatientBioPanel', Record<never, never>, Record<never, never>>,
+    'patients-patient-lab-test': RouteRecordInfo<'patients-patient-lab-test', '/patients/PatientLabTest', Record<never, never>, Record<never, never>>,
+    'patients-patient-question-profile': RouteRecordInfo<'patients-patient-question-profile', '/patients/PatientQuestionProfile', 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>>,
+    'patients-question-progress-bar': RouteRecordInfo<'patients-question-progress-bar', '/patients/QuestionProgressBar', Record<never, never>, Record<never, never>>,
+    'products-product': RouteRecordInfo<'products-product', '/products/product', 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>>,
+    'providers-prescription-panel': RouteRecordInfo<'providers-prescription-panel', '/providers/PrescriptionPanel', Record<never, never>, Record<never, never>>,
+    'providers-provider-profile': RouteRecordInfo<'providers-provider-profile', '/providers/provider-profile', Record<never, never>, Record<never, never>>,
+    'providers-provider-bio-panel': RouteRecordInfo<'providers-provider-bio-panel', '/providers/ProviderBioPanel', Record<never, never>, Record<never, never>>,
     'providers-providers': RouteRecordInfo<'providers-providers', '/providers/providers', Record<never, never>, Record<never, never>>,
+    'providers-provider-tab-overview': RouteRecordInfo<'providers-provider-tab-overview', '/providers/ProviderTabOverview', Record<never, never>, Record<never, never>>,
     'register': RouteRecordInfo<'register', '/register', Record<never, never>, Record<never, never>>,
+    'reports-providers-report': RouteRecordInfo<'reports-providers-report', '/reports/providers-report', Record<never, never>, Record<never, never>>,
     'tables-data-table': RouteRecordInfo<'tables-data-table', '/tables/data-table', Record<never, never>, Record<never, never>>,
     'tables-simple-table': RouteRecordInfo<'tables-simple-table', '/tables/simple-table', Record<never, never>, Record<never, never>>,
     'wizard-examples-checkout': RouteRecordInfo<'wizard-examples-checkout', '/wizard-examples/checkout', Record<never, never>, Record<never, never>>,