initial commit

resources/js/pages/providers/AddProvider-step.vue

@@ -0,0 +1,571 @@
+<script setup>
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
+import { VForm } from 'vuetify/components/VForm';
+import { useStore } from 'vuex';
+const store = useStore()
+const props = defineProps({
+  isDrawerOpen: {
+    type: Boolean,
+    required: true,
+  },
+})
+const items = [
+  {
+    title: 'Basic',
+    subtitle: '',
+  },
+  {
+    title: 'Personal',
+    subtitle: '',
+  },
+  {
+    title: 'Professional',
+    subtitle: '',
+  },
+]
+const currentStep = ref(0)
+const requiredAvailability = (value) =>
+    !!value || 'Availability is required';
+
+
+
+const timeOptions = computed(() => {
+    const options = [];
+
+    // Loop through the hours from 12 to 23 (for 12:00 PM to 11:00 PM)
+    for (let hour = 12; hour < 24; 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;
+});
+const selectedStateName = (abbreviation) => {
+    const selectedState = states.value.find(
+        (s) => s.abbreviation === abbreviation
+    );
+    return selectedState ? selectedState.name : abbreviation;
+};
+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: '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' },
+    // ... (add the rest of the states)
+]);
+const sortedStates = computed(() => {
+    return states.value.slice().sort((a, b) => {
+        return a.name.localeCompare(b.name);
+    });
+});
+const isPasswordVisible = ref(false)
+const emit = defineEmits(['update:isDrawerOpen','providerAdded'])
+const formatPhoneNumber = () => {
+    // Remove non-numeric characters from the input
+    const numericValue = phone.value.replace(/\D/g, '');
+
+    // Apply formatting logic
+    if (numericValue.length <= 10) {
+        phone.value = 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);
+        phone.value = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
+    }
+};
+const handleDrawerModelValueUpdate = val => {
+  emit('update:isDrawerOpen', val)
+}
+const genders = ref([
+  { name: 'Male', abbreviation: 'Male' },
+  { name: 'Female', abbreviation: 'Female' },
+  { name: 'Other', abbreviation: 'Other' },
+]);
+const refVForm = ref()
+const basicInfoForm = ref()
+const personalInfoForm = ref()
+const professionalInfoForm = ref()
+
+const first_name = ref()
+const last_name = ref()
+const email = ref()
+
+const city = ref()
+const state = ref([])
+const zip_code = ref()
+const country = ref()
+const phone = ref()
+const dob = ref()
+const gender = ref()
+const password = ref()
+const zip = ref(null)
+const medicalLicenseNumbers = ref({})
+const stateAddress = ref('AL')
+const years_of_experience = ref(null)
+const specialty = ref(null)
+const availabilityFrom = ref(null)
+const availabilityTo = ref(null)
+const home_address = ref(null)
+const errors = ref({
+    name: undefined,
+    email: undefined,
+})
+const isBillingAddress = ref(false)
+const getCurrentDate = () => {
+  const today = new Date();
+  console.log("today", today);
+  const year = today.getFullYear();
+  let month = today.getMonth() + 1;
+  let day = today.getDate();
+
+  // Format the date to match the input type="date" format
+  month = month < 10 ? `0${month}` : month;
+  day = day < 10 ? `0${day}` : day;
+
+  return `${month}-${day}-${year}`;
+};
+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;
+};
+const onSubmit = async () => {
+  const { valid } = await professionalInfoForm.value.validate()
+  if (valid) {
+    let formaData = {
+      first_name: first_name.value,
+        last_name: last_name.value,
+        email: email.value,
+        password: password.value,
+        home_address: home_address.value,
+        city: city.value,
+        state: stateAddress.value,
+        zip_code: zip.value,
+        medical_license_number: medicalLicenseNumbers.value,
+        years_of_experience: years_of_experience.value,
+        specialty: specialty.value,
+        gender: gender.value,
+        practice_state: state.value,
+        phone: phone.value,
+        availabilityFrom: availabilityFrom.value,
+        availabilityTo: availabilityTo.value
+    }
+    console.log(formaData)
+      await store.dispatch('providerAdd', {
+        first_name: first_name.value,
+        last_name: last_name.value,
+        email: email.value,
+        password: password.value,
+        home_address: home_address.value,
+        city: city.value,
+        state: stateAddress.value,
+        zip_code: zip.value,
+        medical_license_number: medicalLicenseNumbers.value,
+        years_of_experience: years_of_experience.value,
+        specialty: specialty.value,
+        gender: gender.value,
+        practice_state: state.value,
+        phone: phone.value,
+        availabilityFrom: availabilityFrom.value,
+        availabilityTo: availabilityTo.value
+      })
+    
+    if (!store.getters.getErrorMsg) {
+      emit('providerAdded', 'success')
+        first_name.value = null
+          last_name.value = null
+          email.value = null
+          password.value = null
+          home_address.value = null
+          stateAddress.value = null
+          zip.value = null
+          city.value = null
+          //medical_license_number.value = {}
+          specialty.value = null
+          years_of_experience.value = null
+          phone.value = null
+          availabilityFrom.value = null
+          availabilityTo.value = null
+          state.value = []
+          medicalLicenseNumbers.value=null
+          emit('update:isDrawerOpen', false)
+    }
+    currentStep.value=0
+   
+  }
+}
+  
+const validateStep = async () => {
+  const { valid } = await refVForm.value.validate()
+      console.log(refVForm.value)
+  return valid
+}
+
+const handleNext = async (stepTitle) => {
+  console.log(stepTitle)
+  if (stepTitle == "Basic") {
+    const { valid } = await basicInfoForm.value.validate()
+    if (valid) {
+        currentStep.value++
+      }
+  }
+ if (stepTitle == "Personal") {
+    const { valid } = await personalInfoForm.value.validate()
+    if (valid) {
+        currentStep.value++
+      }
+ }
+
+     
+ 
+ 
+}
+const resetForm = () => {
+  refVForm.value?.reset()
+  emit('update:isDrawerOpen', false)
+}
+</script>
+
+<template>
+  <VNavigationDrawer
+    :model-value="props.isDrawerOpen"
+    temporary
+    location="end"
+    width="800"
+    @update:model-value="handleDrawerModelValueUpdate"
+  >
+    <!-- 👉 Header -->
+    <AppDrawerHeaderSection
+      title="Add Provider"
+      @cancel="$emit('update:isDrawerOpen', false)"
+    />
+    <VDivider />
+  
+    <VCard flat>
+      <PerfectScrollbar
+        :options="{ wheelPropagation: false }"
+        class="h-100"
+      >
+      <VCardText style="block-size: calc(100vh - 5rem);">
+         
+            <VRow>
+      
+
+            <VCol
+              cols="12"
+              md="12"
+              class="auth-card-v2 d-flex align-center justify-center pa-10"
+              style="background-color: rgb(var(--v-theme-surface));"
+            >
+              <VCard flat >
+            
+                <AppStepper
+                  v-model:current-step="currentStep"
+                  :items="items"
+                  :direction="$vuetify.display.smAndUp ? 'horizontal' : 'vertical'"
+                  class="mb-12 w-100"
+                  
+                />
+
+              
+                <VWindow
+                  v-model="currentStep"
+                  class="disable-tab-transition"
+                  style="max-inline-size: 850px;"
+                >
+           
+                   
+                    <VWindowItem>
+                     
+                      <h4 class="text-h4">
+                        Basic Information
+                      </h4>
+                      <p class="mb-5">
+                       Enter Your Basic Information
+                      </p>
+                      <VForm
+                      ref="basicInfoForm"
+                      @submit.prevent=""
+                    >
+                      <VRow>
+                                    
+                      <VCol cols="12" md="6">
+                                <VTextField v-model="first_name" label="First Name" type="name"
+                                    :rules="[requiredFirstName]" :error-messages="errors.first_name"
+                                    density="comfortable" />
+                            </VCol>
+                            <VCol cols="12" md="6">
+                                <VTextField v-model="last_name" label="Last Name" type="name"
+                                    :rules="[requiredLastName]" :error-messages="errors.last_name"
+                                    density="comfortable" />
+                            </VCol>
+                            <VCol cols="12" md="6">
+                                <VTextField v-model="email" label="Email" type="email"
+                                    :rules="[requiredEmail, emailValidator]" :error-messages="errors.email"
+                                    density="comfortable" />
+                            </VCol>
+
+
+                            <VCol cols="12" md="6">
+                                <VTextField v-model="password" label="Password" placeholder="············"
+                                    :rules="[requiredPassword,passwordValidator]" :type="isPasswordVisible ? 'text' : 'password'"
+                                    :append-inner-icon="isPasswordVisible ? 'bx-show' : 'bx-hide'"
+                                    @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                                  
+                                    density="comfortable" />
+                            </VCol>
+                        </VRow>
+                      </VForm>
+                    </VWindowItem>
+                    <VWindowItem>
+                      <h4 class="text-h4">
+                        Personal Information
+                      </h4>
+                      <p class="mb-5">
+                        Enter Your Personal Information
+                      </p>
+                      <VForm
+                      ref="personalInfoForm"
+                      @submit.prevent=""
+                    >
+                      <VRow>
+                                    
+                      <VCol cols="12" md="12">
+                          <VTextField v-model="home_address" label="Home Address" :rules="[requiredAddress]"
+                              density="comfortable" />
+                      </VCol>
+                      <VCol cols="12" md="6">
+                          <VTextField v-model="city" label="City" density="comfortable" :rules="[requiredCity]"
+                                />
+                      </VCol>
+                      <VCol cols="12" md="6">
+
+                          <v-autocomplete clearable v-model="stateAddress" label="State" density="comfortable"
+                              :items="sortedStates" item-title="name" item-value="abbreviation"
+                              :rules="[requiredState]" >
+                          </v-autocomplete>
+                      </VCol>
+
+                          <VCol cols="12" md="6">
+                              <VTextField v-model="zip" label="Zip" density="comfortable" :rules="[requiredZip]"
+                                  />
+                          </VCol>
+                          <VCol cols="12" md="6">
+                              <VTextField v-model="phone" 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>
+                          <VCol cols="12" md="6">
+                          <v-select v-model="gender" label="Gender" :items="genders" item-title="name" item-value="abbreviation"
+                            :rules="[requiredValidator]"  density="comfortable">
+                          </v-select>
+                        </VCol>
+                        </VRow>
+                      </VForm>
+                    </VWindowItem>
+
+
+                    <VWindowItem>
+                      <h4 class="text-h4">
+                        Professional Information
+                      </h4>
+                      <p class="mb-5">
+                        Enter Your Professional Information
+                      </p>
+                      <VForm
+                      ref="professionalInfoForm"
+                      @submit.prevent=""
+                    >
+                      <VRow>
+                                    
+                          <VCol cols="12" md="6">
+                              <VTextField v-model="years_of_experience" label="Years of Experience" type="number"
+                                  :rules="[requiredYearsofExperience]" 
+                                  density="comfortable" />
+                          </VCol>
+
+
+                          <VCol cols="12" md="6">
+                              <VTextField v-model="specialty" label="Practice or Provider's Specialty" type="text"
+                                  :rules="[requiredSpecialty]" 
+                                  density="comfortable" />
+
+                          </VCol>
+                          <VCol cols="12" md="6">
+
+                              <VSelect v-model="availabilityFrom" label="Availability From" :items="timeOptions"
+                                  density="comfortable" :rules="[requiredAvailability]"
+                                  />
+                          </VCol>
+                          <VCol cols="12" md="6">
+                              <!-- timeOptions.filter((time) => time > availabilityFrom) -->
+                              <VSelect v-model="availabilityTo" label="Availability To" :items="timeOptions"
+                                  density="comfortable" :rules="[requiredAvailability]"
+                                    />
+
+                          </VCol>
+                          <VCol cols="12">
+                              <v-select v-model="state" label="Region Currently Practicing" :items="sortedStates"
+                                  item-title="name" item-value="abbreviation" multiple :rules="[requiredState]"
+                                  density="comfortable">
+                              </v-select>
+                          </VCol>
+                      
+                          <VCol cols="12" v-if="state.length > 0">
+                              <div class="d-flex align-center mb-4">
+                                    <VIcon icon="ri-award-fill" size="32" class="mr-2" />
+                                  <h4 class="section-title">Medical License Number</h4>
+                              </div>
+                              <div v-for="(stat, index) in state" :key="index">
+                                  <VTextField v-model="medicalLicenseNumbers[stat]"
+                                      :label="`${selectedStateName(stat)}`" :rules="[requiredLicenseNumber]"
+                                      density="comfortable"
+                                      :error-messages="errors[`medicalLicenseNumber_${selectedStateName(stat)}`]"
+                                      class="mb-2" />
+                              </div>
+                          </VCol>
+                      </VRow>
+                      </VForm>
+                    </VWindowItem>
+                  
+               
+                 </VWindow>
+
+                <div class="d-flex flex-wrap justify-space-between gap-x-4 gap-y-2 mt-5">
+                  <VBtn
+                    color="secondary"
+                    variant="outlined"
+                    :disabled="currentStep === 0"
+                    @click="currentStep--"
+                  >
+                    <VIcon
+                      icon="ri-arrow-left-line"
+                      start
+                      class="flip-in-rtl"
+                    />
+                    Previous
+                  </VBtn>
+
+                  <VBtn
+                    v-if="items.length - 1 === currentStep"
+                    color="success"
+                    append-icon="ri-check-line"
+                    @click="onSubmit"
+                  >
+                    submit
+                  </VBtn>
+
+                  <VBtn
+                    v-else
+                    @click="handleNext(items[currentStep].title)"
+                  >
+                    Next
+
+                    <VIcon
+                      icon="ri-arrow-right-line"
+                      end
+                      class="flip-in-rtl"
+                    />
+                  </VBtn>
+                </div>
+                  
+              </VCard>
+            </VCol>
+            </VRow>
+     
+     </VCardText>
+    </PerfectScrollbar>
+    </VCard>
+  </VNavigationDrawer>
+</template>
+
+<style lang="scss">
+.v-navigation-drawer__content {
+  overflow-y: hidden !important;
+}
+.app-stepper .v-slide-group__content .stepper-step-line:not(.vertical) {
+    min-inline-size: 7rem !important;
+       inline-size: 100% !important;
+}
+
+</style>

resources/js/pages/providers/CompletedMeetingTab.vue

@@ -0,0 +1,329 @@
+<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: 'Order Id', key: 'order_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} `;
+};
+const convertUtcTime = (time, date, timezone) => {
+    const timezones = {
+        "EST": "America/New_York",
+        "CST": "America/Chicago",
+        "MST": "America/Denver",
+        "PST": "America/Los_Angeles",
+        "PST": "Asia/Karachi"
+        // Add more mappings as needed
+    };
+
+    // Get the IANA timezone identifier from the abbreviation
+    let ianaTimeZone = timezones[timezone];
+
+    if (!ianaTimeZone) {
+      // throw new Error(`Unknown timezone abbreviation: ${timezone}`);
+      timezone='PST'
+       ianaTimeZone = timezones[timezone];
+    }
+
+    // Combine date and time into a single string
+    const dateTimeString = `${date}T${time}Z`;  // Assuming the input date and time are in UTC
+
+    // Create a Date object from the combined string
+    const dateObj = new Date(dateTimeString);
+
+    // Options for the formatter
+    const options = {
+        timeZone: ianaTimeZone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+    };
+
+    // Create the formatter
+    const formatter = new Intl.DateTimeFormat('en-US', options);
+
+    // Format the date
+    const convertedDateTime = formatter.format(dateObj);
+
+    return convertedDateTime;
+};
+const getConvertedTime = (inputDate) => {
+    // Split the input date string into date and time components
+    const [datePart, timePart] = inputDate.split(', ');
+
+    // Split the time component into hours, minutes, and seconds
+    let [hours, minutes, seconds] = timePart.split(':');
+
+    // Convert the hours to an integer
+    hours = parseInt(hours);
+
+ const period = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12 || 12; // Convert 0 and 12 to 12, and other hours to 1-11
+
+    // Format the time as desired
+    const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes} ${period}`;
+
+    return formattedTime;
+}
+const getConvertedDate = (inputDate) => {
+    // Split the input date string into date and time components
+    const [datePart, timePart] = inputDate.split(', ');
+
+    // Split the date component into month, day, and year
+    const [month, day, year] = datePart.split('/');
+
+    // Create a new Date object from the parsed components
+    const dateObject = new Date(`${year}-${month}-${day}T${timePart}`);
+
+    // Define an array of month names
+    const monthNames = [
+        "January", "February", "March", "April", "May", "June",
+        "July", "August", "September", "October", "November", "December"
+    ];
+
+    // Format the date as desired
+    const formattedDate = `${monthNames[dateObject.getMonth()]} ${day}, ${year}`;
+
+    return formattedDate;
+};
+
+const changeDateTime =  (dateT, timezone) => {
+  const [date, time] = dateT.split(' ');
+
+  let formatedate =changeFormat(date)
+  let fortmtetime = getConvertedTime(convertUtcTime(time, date, timezone))
+    console.log(fortmtetime,formatedate)
+  return formatedate +' '+fortmtetime
+    
+}
+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;
+}
+// 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: history.start_time,
+      end_time: history.end_time,
+    duration: totalCallDuration(history.start_time, history.end_time),
+  }));
+   patientMeetingList.value.sort((a, b) => {
+        return b.order_id - a.order_id;
+    });
+  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="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.order_id="{ item }">
+            <RouterLink :to="{ name: 'admin-order-detail', params: { id: item.order_id } }">
+                               <span class=""> #{{ item.order_id }} &nbsp;</span>
+                                </RouterLink>
+        </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.start_time="{ item }">{{ changeDateTime(item.start_time,item.timezone) }}</template>
+            <template #item.end_time="{ item }">{{ changeDateTime(item.end_time,item.timezone) }}</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/EditProvider-step.vue

@@ -0,0 +1,593 @@
+<script setup>
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
+import { VForm } from 'vuetify/components/VForm';
+import { useStore } from 'vuex';
+const store = useStore()
+const props = defineProps({
+  isDrawerOpen: {
+    type: Boolean,
+    required: true,
+  },
+    userData: {
+    type: Object,
+    required: true,
+  }
+})
+const items = [
+  {
+    title: 'Basic',
+    subtitle: '',
+  },
+  {
+    title: 'Personal',
+    subtitle: '',
+  },
+  {
+    title: 'Professional',
+    subtitle: '',
+  },
+]
+const currentStep = ref(0)
+const requiredAvailability = (value) =>
+    !!value || 'Availability is required';
+
+
+const itemId = ref()
+const timeOptions = computed(() => {
+    const options = [];
+
+    // Loop through the hours from 12 to 23 (for 12:00 PM to 11:00 PM)
+    for (let hour = 12; hour < 24; 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;
+});
+const selectedStateName = (abbreviation) => {
+    const selectedState = states.value.find(
+        (s) => s.abbreviation === abbreviation
+    );
+    return selectedState ? selectedState.name : abbreviation;
+};
+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: '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' },
+    // ... (add the rest of the states)
+]);
+const sortedStates = computed(() => {
+    return states.value.slice().sort((a, b) => {
+        return a.name.localeCompare(b.name);
+    });
+});
+const isPasswordVisible = ref(false)
+const emit = defineEmits(['update:isDrawerOpen','providerAdded'])
+const formatPhoneNumber = () => {
+    // Remove non-numeric characters from the input
+    const numericValue = phone.value.replace(/\D/g, '');
+
+    // Apply formatting logic
+    if (numericValue.length <= 10) {
+        phone.value = 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);
+        phone.value = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
+    }
+};
+const handleDrawerModelValueUpdate = val => {
+  emit('update:isDrawerOpen', val)
+}
+const genders = ref([
+  { name: 'Male', abbreviation: 'Male' },
+  { name: 'Female', abbreviation: 'Female' },
+  { name: 'Other', abbreviation: 'Other' },
+]);
+const basicInfoForm = ref()
+const personalInfoForm = ref()
+const professionalInfoForm = ref()
+const first_name = ref()
+const last_name = ref()
+const email = ref()
+
+const city = ref()
+const state = ref([])
+const zip_code = ref()
+const country = ref()
+const phone = ref()
+const dob = ref()
+const gender = ref()
+const password = ref()
+const zip = ref(null)
+const medicalLicenseNumbers = ref({})
+const stateAddress = ref('AL')
+const years_of_experience = ref(null)
+const specialty = ref(null)
+const availabilityFrom = ref(null)
+const availabilityTo = ref(null)
+const home_address = ref(null)
+const errors = ref({
+    name: undefined,
+    email: undefined,
+})
+const getProviderList = computed(async () => {
+  if (props.userData) {
+      itemId.value=props.userData.id
+      first_name.value = props.userData.first_name
+          first_name.value=props.userData.first_name
+          last_name.value=props.userData.last_name
+          email.value=props.userData.email
+          password.value=props.userData.password
+          home_address.value=props.userData.home_address
+          city.value=props.userData.city
+          stateAddress.value=props.userData.state
+          zip.value=props.userData.zip_code
+          medicalLicenseNumbers.value=JSON.parse(props.userData.medical_license_number)
+          years_of_experience.value=props.userData.years_of_experience
+          specialty.value=props.userData.specialty
+          gender.value=props.userData.gender
+          state.value=JSON.parse(props.userData.practice_state)
+          phone.value=props.userData.phone_number
+          availabilityFrom.value=props.userData.availability_from
+          availabilityTo.value=props.userData.availability_to
+  }
+        
+});
+const getCurrentDate = () => {
+  const today = new Date();
+  console.log("today", today);
+  const year = today.getFullYear();
+  let month = today.getMonth() + 1;
+  let day = today.getDate();
+
+  // Format the date to match the input type="date" format
+  month = month < 10 ? `0${month}` : month;
+  day = day < 10 ? `0${day}` : day;
+
+  return `${month}-${day}-${year}`;
+};
+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;
+};
+const onSubmit = async () => {
+  const { valid } = await professionalInfoForm.value.validate()
+  if (valid) {
+    let formaData = {
+      first_name: first_name.value,
+        last_name: last_name.value,
+        email: email.value,
+        password: password.value,
+        home_address: home_address.value,
+        city: city.value,
+        state: stateAddress.value,
+        zip_code: zip.value,
+        medical_license_number: medicalLicenseNumbers.value,
+        years_of_experience: years_of_experience.value,
+        specialty: specialty.value,
+        gender: gender.value,
+        practice_state: state.value,
+        phone: phone.value,
+        availabilityFrom: availabilityFrom.value,
+        availabilityTo: availabilityTo.value
+    }
+    console.log(formaData)
+    await store.dispatch('providerUpdate', {
+        id:itemId.value,
+        first_name: first_name.value,
+        last_name: last_name.value,
+        email: email.value,
+        password: password.value,
+        home_address: home_address.value,
+        city: city.value,
+        state: stateAddress.value,
+        zip_code: zip.value,
+        medical_license_number: medicalLicenseNumbers.value,
+        years_of_experience: years_of_experience.value,
+        specialty: specialty.value,
+        gender: gender.value,
+        practice_state: state.value,
+        phone: phone.value,
+        availabilityFrom: availabilityFrom.value,
+        availabilityTo: availabilityTo.value
+      })
+    
+    if (!store.getters.getErrorMsg) {
+      console.log('save============================')
+      emit('providerAdded', 'success')
+        first_name.value = null
+          last_name.value = null
+          email.value = null
+          password.value = null
+          home_address.value = null
+          stateAddress.value = null
+          zip.value = null
+          city.value = null
+          //medical_license_number.value = {}
+          specialty.value = null
+          years_of_experience.value = null
+          phone.value = null
+          availabilityFrom.value = null
+          availabilityTo.value = null
+          state.value = []
+          medicalLicenseNumbers.value=null
+        currentStep.value=0
+   emit('update:isDrawerOpen', false)  
+    }
+    
+  }
+}
+ const handleNext = async (stepTitle) => {
+  console.log(stepTitle)
+  if (stepTitle == "Basic") {
+    const { valid } = await basicInfoForm.value.validate()
+    if (valid) {
+        currentStep.value++
+      }
+  }
+ if (stepTitle == "Personal") {
+    const { valid } = await personalInfoForm.value.validate()
+    if (valid) {
+        currentStep.value++
+      }
+ }
+
+     
+ 
+ 
+} 
+
+const resetForm = () => {
+  refVForm.value?.reset()
+  emit('update:isDrawerOpen', false)
+}
+</script>
+
+<template>
+  <VNavigationDrawer
+    :model-value="props.isDrawerOpen"
+    temporary
+    location="end"
+    width="800"
+    @update:model-value="handleDrawerModelValueUpdate"
+  >
+    <!-- 👉 Header -->
+    <AppDrawerHeaderSection
+      title="Edit Provider"
+      @cancel="$emit('update:isDrawerOpen', false)"
+    />
+    <VDivider />
+  
+    <VCard flat>
+      <PerfectScrollbar
+        :options="{ wheelPropagation: false }"
+        class="h-100"
+      >
+      <VCardText style="block-size: calc(100vh - 5rem);" v-if="getProviderList">
+          <VForm
+            ref="refVForm"
+            @submit.prevent=""
+          >
+            <VRow>
+      
+
+            <VCol
+              cols="12"
+              md="12"
+              class="auth-card-v2 d-flex align-center justify-center pa-10"
+              style="background-color: rgb(var(--v-theme-surface));"
+            >
+              <VCard flat >
+            
+                <AppStepper
+                  v-model:current-step="currentStep"
+                  :items="items"
+                  :direction="$vuetify.display.smAndUp ? 'horizontal' : 'vertical'"
+                  class="mb-12 w-100"
+                  
+                />
+
+              
+                <VWindow
+                  v-model="currentStep"
+                  class="disable-tab-transition"
+                  style="max-inline-size: 850px;"
+                >
+           
+                   
+                    <VWindowItem>
+                      <h4 class="text-h4">
+                        Basic Information
+                      </h4>
+                      <p class="mb-5">
+                       Enter Your Basic Information
+                      </p>
+                      <VForm
+                      ref="basicInfoForm"
+                      @submit.prevent=""
+                    >
+                      <VRow>
+                                    
+                      <VCol cols="12" md="6">
+                                <VTextField v-model="first_name" label="First Name" type="name"
+                                    :rules="[requiredFirstName]" :error-messages="errors.first_name"
+                                    density="comfortable" />
+                            </VCol>
+                            <VCol cols="12" md="6">
+                                <VTextField v-model="last_name" label="Last Name" type="name"
+                                    :rules="[requiredLastName]" :error-messages="errors.last_name"
+                                    density="comfortable" />
+                            </VCol>
+                            <VCol cols="12" md="6">
+                                <VTextField v-model="email" label="Email" type="email"
+                                    :rules="[requiredEmail, emailValidator]" :error-messages="errors.email"
+                                    density="comfortable" readonly/>
+                            </VCol>
+
+
+                            <VCol cols="12" md="6">
+                                <VTextField v-model="password" label="Password" placeholder="············"
+                                    :type="isPasswordVisible ? 'text' : 'password'"
+                                    :append-inner-icon="isPasswordVisible ? 'bx-show' : 'bx-hide'"
+                                    @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                                    density="comfortable" />
+                            </VCol>
+                       </VRow>
+                      </VForm>
+                    </VWindowItem>
+                    <VWindowItem>
+                      <h4 class="text-h4">
+                        Personal Information
+                      </h4>
+                      <p class="mb-5">
+                        Enter Your Personal Information
+                      </p>
+                       <VForm
+                      ref="personalInfoForm"
+                      @submit.prevent=""
+                    >
+                      <VRow>
+                                    
+                      <VCol cols="12" md="12">
+                          <VTextField v-model="home_address" label="Home Address" :rules="[requiredAddress]"
+                              density="comfortable" />
+                      </VCol>
+                      <VCol cols="12" md="6">
+                          <VTextField v-model="city" label="City" density="comfortable" :rules="[requiredCity]"
+                                />
+                      </VCol>
+                      <VCol cols="12" md="6">
+
+                          <v-autocomplete clearable v-model="stateAddress" label="State" density="comfortable"
+                              :items="sortedStates" item-title="name" item-value="abbreviation"
+                              :rules="[requiredState]" >
+                          </v-autocomplete>
+                      </VCol>
+
+                          <VCol cols="12" md="6">
+                              <VTextField v-model="zip" label="Zip" density="comfortable" :rules="[requiredZip]"
+                                  />
+                          </VCol>
+                          <VCol cols="12" md="6">
+                              <VTextField v-model="phone" 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>
+                          <VCol cols="12" md="6">
+                          <v-select v-model="gender" label="Gender" :items="genders" item-title="name" item-value="abbreviation"
+                            :rules="[requiredValidator]"  density="comfortable">
+                          </v-select>
+                        </VCol>
+                      </VRow>
+                      </VForm>
+
+                    </VWindowItem>
+
+
+                    <VWindowItem>
+                      <h4 class="text-h4">
+                        Professional Information
+                      </h4>
+                      <p class="mb-5">
+                        Enter Your Professional Information
+                      </p>
+                      <VForm
+                      ref="professionalInfoForm"
+                      @submit.prevent=""
+                    >
+                      <VRow>
+                                    
+                          <VCol cols="12" md="6">
+                              <VTextField v-model="years_of_experience" label="Years of Experience" type="number"
+                                  :rules="[requiredYearsofExperience]" 
+                                  density="comfortable" />
+                          </VCol>
+
+
+                          <VCol cols="12" md="6">
+                              <VTextField v-model="specialty" label="Practice or Provider's Specialty" type="text"
+                                  :rules="[requiredSpecialty]" 
+                                  density="comfortable" />
+
+                          </VCol>
+                          <VCol cols="12" md="6">
+
+                              <VSelect v-model="availabilityFrom" label="Availability From" :items="timeOptions"
+                                  density="comfortable" :rules="[requiredAvailability]"
+                                  />
+                          </VCol>
+                          <VCol cols="12" md="6">
+                              <!-- timeOptions.filter((time) => time > availabilityFrom) -->
+                              <VSelect v-model="availabilityTo" label="Availability To" :items="timeOptions"
+                                  density="comfortable" :rules="[requiredAvailability]"
+                                    />
+
+                          </VCol>
+                          <VCol cols="12">
+                              <v-select v-model="state" label="Region Currently Practicing" :items="sortedStates"
+                                  item-title="name" item-value="abbreviation" multiple :rules="[requiredState]"
+                                  density="comfortable">
+                              </v-select>
+                          </VCol>
+                      
+                          <VCol cols="12" v-if="state.length > 0">
+                              <div class="d-flex align-center mb-4">
+                                  <VIcon icon="ri-award-fill" size="32" class="mr-2" />
+                                  <h4 class="section-title">Medical License Number</h4>
+                              </div>
+                              <div v-for="(stat, index) in state" :key="index">
+                                  <VTextField v-model="medicalLicenseNumbers[stat]"
+                                      :label="`${selectedStateName(stat)}`" :rules="[requiredLicenseNumber]"
+                                      density="comfortable"
+                                      :error-messages="errors[`medicalLicenseNumber_${selectedStateName(stat)}`]"
+                                      class="mb-2" />
+                              </div>
+                          </VCol>
+                      </VRow>
+                      </VForm>
+                    </VWindowItem>
+                  
+               
+                 </VWindow>
+
+                <div class="d-flex flex-wrap justify-space-between gap-x-4 gap-y-2 mt-5">
+                  <VBtn
+                    color="secondary"
+                    variant="outlined"
+                    :disabled="currentStep === 0"
+                    @click="currentStep--"
+                  >
+                    <VIcon
+                      icon="ri-arrow-left-line"
+                      start
+                      class="flip-in-rtl"
+                    />
+                    Previous
+                  </VBtn>
+
+                  <VBtn
+                    v-if="items.length - 1 === currentStep"
+                    color="success"
+                    append-icon="ri-check-line"
+                    @click="onSubmit"
+                  >
+                    submit
+                  </VBtn>
+
+                  <VBtn
+                    v-else
+                      @click="handleNext(items[currentStep].title)"
+                  >
+                    Next
+
+                    <VIcon
+                      icon="ri-arrow-right-line"
+                      end
+                      class="flip-in-rtl"
+                    />
+                  </VBtn>
+                </div>
+                  
+              </VCard>
+            </VCol>
+            </VRow>
+         </VForm>
+     </VCardText>
+    </PerfectScrollbar>
+    </VCard>
+  </VNavigationDrawer>
+</template>
+
+<style lang="scss">
+.v-navigation-drawer__content {
+  overflow-y: hidden !important;
+}
+.app-stepper .v-slide-group__content .stepper-step-line:not(.vertical) {
+    min-inline-size: 7rem !important;
+       inline-size: 100% !important;
+}
+
+</style>

resources/js/pages/providers/EditProvider.vue

@@ -0,0 +1,408 @@
+<script setup>
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
+import { VForm } from 'vuetify/components/VForm';
+import { useStore } from 'vuex';
+const store = useStore()
+const props = defineProps({
+  isDrawerOpen: {
+    type: Boolean,
+    required: true,
+  },
+  userData: {
+    type: Object,
+    required: true,
+  }
+})
+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: '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' },
+    // ... (add the rest of the states)
+]);
+const sortedStates = computed(() => {
+    return states.value.slice().sort((a, b) => {
+        return a.name.localeCompare(b.name);
+    });
+});
+const isPasswordVisible = ref(false)
+const emit = defineEmits(['update:isDrawerOpen','providerAdded'])
+const formatPhoneNumber = () => {
+
+  // Remove non-numeric characters from the input
+  const numericValue = phone_no.value.replace(/\D/g, '');
+
+  // Apply formatting logic
+  if (numericValue.length <= 10) {
+     phone_no.value = 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);
+     phone_no.value= truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
+  }
+};
+const handleDrawerModelValueUpdate = val => {
+  emit('update:isDrawerOpen', val)
+}
+const genders = ref([
+  { name: 'Male', abbreviation: 'Male' },
+  { name: 'Female', abbreviation: 'Female' },
+  { name: 'Other', abbreviation: 'Other' },
+]);
+const refVForm = ref()
+const first_name = ref()
+const last_name = ref()
+const email = ref()
+const addressLine1 = ref()
+const city = ref()
+const state = ref()
+const zip_code = ref()
+const country = ref()
+const phone_no = ref()
+const dob = ref()
+const gender = ref()
+const password = ref()
+const itemId = ref()
+
+const isBillingAddress = ref(false)
+const getCurrentDate = () => {
+  const today = new Date();
+  console.log("today", today);
+  const year = today.getFullYear();
+  let month = today.getMonth() + 1;
+  let day = today.getDate();
+
+  // Format the date to match the input type="date" format
+  month = month < 10 ? `0${month}` : month;
+  day = day < 10 ? `0${day}` : day;
+
+  return `${month}-${day}-${year}`;
+};
+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;
+};
+const onSubmit = async () => {
+  const { valid } = await refVForm.value.validate()
+  if (valid) {
+    if (calculateAge(dob.value) >= 18) {
+      await store.dispatch('patientUpdate', {
+        id:itemId.value,
+        first_name: first_name.value,
+        last_name: last_name.value,
+        email: email.value,
+        password: password.value,
+        phone_no: phone_no.value,
+        dob: dob.value,
+        address: addressLine1.value,
+        city: city.value,
+        state: state.value,
+        zip_code:zip_code.value,
+        country: country.value,
+        gender: gender.value
+      })
+    } else {
+      store.dispatch('updateErrorMessage', 'Patient must be 18+')
+    }
+    if (!store.getters.getErrorMsg) {
+      emit('providerAdded', 'success')
+        first_name.value = null
+          last_name.value = null
+          email.value = null
+          password.value = null
+          phone_no.value = null
+          dob.value = null
+          addressLine1.value = null
+          city.value = null
+          state.value = null
+          country.value = null
+          zip_code.value=null
+    }
+   emit('update:isDrawerOpen', false)
+  }
+}
+  
+const getPatientList = computed(async () => {
+  if (props.userData) {
+      itemId.value=props.userData.id
+      first_name.value = props.userData.first_name
+          last_name.value = props.userData.last_name
+          email.value = props.userData.email
+          password.value = props.userData.password
+          phone_no.value = props.userData.phone_no
+          dob.value = props.userData.dob
+          addressLine1.value = props.userData.shipping_address
+          city.value = props.userData.shipping_city
+          state.value = props.userData.shipping_state
+          country.value = props.userData.shipping_country
+          zip_code.value = props.userData.shipping_zipcode
+          gender.value= props.userData.gender
+  }
+        
+});
+const resetForm = () => {
+  refVForm.value?.reset()
+  emit('update:isDrawerOpen', false)
+}
+</script>
+
+<template>
+  <VNavigationDrawer
+    :model-value="props.isDrawerOpen"
+    temporary
+    location="end"
+    width="800"
+    @update:model-value="handleDrawerModelValueUpdate"
+  >
+    <!-- 👉 Header -->
+    <AppDrawerHeaderSection
+      title="Edit Provider"
+      @cancel="$emit('update:isDrawerOpen', false)"
+    />
+    <VDivider />
+
+    <VCard flat>
+      <PerfectScrollbar
+        :options="{ wheelPropagation: false }"
+        class="h-100"
+      >
+        <VCardText style="block-size: calc(100vh - 5rem);" v-if="getPatientList">
+          <VForm
+            ref="refVForm"
+            @submit.prevent=""
+
+          >
+            <VRow>
+              <VCol cols="12" md="12">
+                <div class="text-body-1 font-weight-medium text-high-emphasis">
+                  Basic Information
+                </div>
+              </VCol>
+
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="first_name"
+                  label="First Name"
+                  :rules="[requiredValidator]"
+                  placeholder="First Name"
+                />
+              </VCol>
+              <VCol cols="12" md="6">
+                    <VTextField
+                      v-model="last_name"
+                      label="Last Name"
+                      :rules="[requiredValidator]"
+                      placeholder="Last Name"
+                    />
+                  </VCol>
+              <VCol cols="12" md="6">
+                <VTextField
+                  v-model="email"
+                  label="Email Address"
+                  :rules="[requiredValidator, emailValidator]"
+                  placeholder="johndoe@email.com"
+                  readonly
+                  
+                />
+              </VCol>
+              <VCol
+                  cols="12"
+                  md="6"
+                >
+                  <VTextField
+                    v-model="password"
+                    label="Password"
+                    placeholder="············"
+                    :type="isPasswordVisible ? 'text' : 'password'"
+                    :append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
+                    @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                    
+                  />
+                </VCol>
+
+              <VCol cols="12" md="6">
+                  <VTextField v-model="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>
+              <VCol cols="12" md="6">
+                <v-select v-model="gender" label="Gender" :items="genders" item-title="name" item-value="abbreviation"
+                  :rules="[requiredValidator]"  density="comfortable">
+                </v-select>
+              </VCol>
+               <VCol cols="12" md="6">
+              <AppDateTimePicker
+                v-model="dob"
+                label="Date Of Birth"
+                placeholder="Date Of Birth"
+                format="MM-dd-yyyy"
+              :config="{  dateFormat: 'Y-m-d' }"
+                :max="getCurrentDate()"
+                :rules="[requiredValidator]"
+              />
+                
+              </VCol>
+              <VCol cols="12">
+                <div class="text-body-1 font-weight-medium text-high-emphasis">
+                  Shipping Information
+                </div>
+              </VCol>
+
+              <VCol cols="12">
+                <VTextField
+                  v-model="addressLine1"
+                  label="Address Line 1*"
+                  :rules="[requiredValidator]"
+                  placeholder="45, Rocker Terrace"
+                />
+              </VCol>
+
+
+              <VCol  cols="12" md="6">
+                <VTextField
+                  v-model="city"
+                  label="City*"
+                  :rules="[requiredValidator]"
+                  placeholder="New York"
+                />
+              </VCol>
+
+              <VCol cols="12" md="6">
+               
+                <VAutocomplete
+                v-model="state"
+                      label="States"
+                     :items="sortedStates"
+                     item-title="name" item-value="abbreviation"
+                      placeholder="Select State"
+                      :rules="[requiredState]"
+                    />
+              </VCol>
+
+              <VCol  cols="12" md="6">
+                <VTextField
+                  v-model="zip_code"
+                  label="Zip Code*"
+                  type="number"
+                  :rules="[requiredValidator]"
+                  placeholder="982347"
+                />
+              </VCol>
+
+              <VCol cols="12" md="6">
+                <VSelect
+                  v-model="country"
+                  placeholder="United States"
+                  :rules="[requiredValidator]"
+                  label="Country"
+                  :items="['United States']"
+                />
+              </VCol>
+
+             
+
+              <VCol cols="12">
+                <div class="d-flex justify-start">
+                  <VBtn
+                    type="submit"
+                    color="primary"
+                    class="me-4"
+                    @click="onSubmit"
+                  >
+                    Save
+                  </VBtn>
+                  <VBtn
+                    color="error"
+                    variant="outlined"
+                    @click="resetForm"
+                  >
+                    Discard
+                  </VBtn>
+                </div>
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+      </PerfectScrollbar>
+    </VCard>
+  </VNavigationDrawer>
+</template>
+
+<style lang="scss">
+.v-navigation-drawer__content {
+  overflow-y: hidden !important;
+}
+</style>

resources/js/pages/providers/NotesPanel.vue

@@ -0,0 +1,141 @@
+<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, '-');
+};
+onMounted(async () => {
+    notes.value = props.notesData.notes
+     notes.value.sort((a, b) => {
+        return b.order_id - a.order_id;
+    });
+    console.log(" notes.value",  notes.value);
+    
+});
+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 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">
+              Add By: 
+                <span class="">{{ p_note.created_by }}</span><br/>
+              <br/>
+              
+              {{ formatDateDate(p_note.created_at) }}</span>
+            <!-- <span></span> -->
+          </div>
+
+          <!-- 👉 Content -->
+          <div class="app-timeline-text mb-1">
+            
+            Order ID : <RouterLink :to="{ name: 'admin-order-detail', params: { id: p_note.order_id } }">
+                               <span class=""> #{{ p_note.order_id }} &nbsp;</span>
+                                </RouterLink>
+         
+         
+            <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,505 @@
+<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 doctorName = ref('');
+const currentPage = ref(1);
+const itemsPerPage = ref(2);
+const paginatedItems = computed(() => {
+   const start = (currentPage.value - 1) * itemsPerPage.value;
+    const end = start + itemsPerPage.value;
+     let prescriptions = props.prescriptionData.prescriptions;
+    prescriptions.sort((a, b) => {
+        return b.order_id - a.order_id;
+    });
+  console.log('props.orderData',props.prescriptionData.prescriptions)
+    itemsPrescriptions.value = prescriptions
+    return itemsPrescriptions.value.slice(start, end);
+});
+
+const totalPages = computed(() => {
+    return Math.ceil(itemsPrescriptions.value.length / itemsPerPage.value);
+});
+
+const changePage = (page) => {
+    currentPage.value = page;
+}
+const formatTime = (dateString) => {
+    return new Date(dateString).toLocaleTimeString('en-US', {
+        hour: 'numeric',
+        minute: 'numeric'
+    })
+}
+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.provider_name = data.provider_name
+          dataObject.order_id = data.order_id
+        dataObject.date = formatDateDate(data.created_at)
+        
+        itemsPrescriptions.value.push(dataObject)
+    }
+    console.log(itemsPrescriptions.value)
+    itemsPrescriptions.value.sort((a, b) => {
+        return b.order_id - a.order_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: 'Order Id',
+    key: 'order_id',
+  },
+  {
+    title: 'Provider Name',
+    key: 'provider_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 }
+}
+onMounted(async () => {
+  let prescriptions = props.prescriptionData.prescriptions;
+    prescriptions.sort((a, b) => {
+        return b.order_id - a.order_id;
+    });
+  console.log('props.orderData', props.prescriptionData.prescriptions)
+    itemsPrescriptions.value = prescriptions
+});
+</script>
+<template>
+   <template v-if="itemsPrescriptions.length > 0">
+        <v-row>
+            <v-col v-for="prescription in paginatedItems" :key="prescription.id" cols="12" md="6">
+          
+                <v-card class="mx-auto mb-4" elevation="4" hover>
+                    <v-img height="200" src="https://cdn.pixabay.com/photo/2016/11/23/15/03/medication-1853400_1280.jpg"
+                        class="white--text align-end" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)">
+                        <v-card-title class="text-h5" style="color: #fff;">{{ prescription.prescription_name
+                            }}</v-card-title>
+                    </v-img>
+
+                    <v-card-text>
+
+
+
+                        <v-chip :color="getStatusColor(prescription.status)" text-color="white" small class="mr-2">
+                            {{ prescription.status }}
+                        </v-chip>
+                       Order ID : <RouterLink :to="{ name: 'admin-order-detail', params: { id: prescription.order_id } }">
+                               <span class=""> #{{ prescription.order_id }} &nbsp;</span>
+                                </RouterLink>
+                             
+                    </v-card-text>
+
+                    <v-divider class="mx-4"></v-divider>
+
+                    <v-card-text>
+                        <v-row dense>
+                            <v-col cols="6">
+                                <v-icon small color="primary">ri-capsule-line</v-icon>
+                                <span class="ml-1">Dosage:{{ prescription.dosage }}</span>
+                            </v-col>
+                            <v-col cols="6">
+                                <v-icon small color="primary">ri-medicine-bottle-line</v-icon>
+                                <span class="ml-1">Quantity:{{ prescription.quantity }}</span>
+                            </v-col>
+                            <v-col cols="6">
+                                <v-icon small color="primary">ri-calendar-line</v-icon>
+                                <span class="ml-1">{{ formatDate(prescription.created_at) }}</span>
+                            </v-col>
+                            <v-col cols="6">
+                                <v-icon small color="primary">ri-time-line</v-icon>
+                                <span class="ml-1">{{ formatTime(prescription.created_at) }}</span>
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+
+                    <v-card-actions>
+                        <v-btn color="primary" text>
+                            More Details
+                        </v-btn>
+                        <v-spacer></v-spacer>
+                        <v-btn @click="prescription.show = !prescription.show">
+                        {{ prescription.show ? '' : '' }}
+                        <v-icon right color="primary">
+                          {{ prescription.show ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line' }}
+                        </v-icon>
+                      </v-btn>
+                    </v-card-actions>
+
+                    <v-expand-transition>
+                        <div v-show="prescription.show">
+                            <v-divider></v-divider>
+                            <v-card-text>
+                                <v-row dense>
+                                    <v-col cols="12">
+                                        <strong>Add By:</strong> {{ prescription.created_by}}
+                                    </v-col>
+                                    <v-col cols="12">
+                                        <strong>Brand:</strong> {{ prescription.brand }}
+                                    </v-col>
+                                    <v-col cols="12">
+                                        <strong>From:</strong> {{ prescription.from }}
+                                    </v-col>
+                                    <v-col cols="12">
+                                        <strong>Direction One:</strong> {{ prescription.direction_one }}
+                                    </v-col>
+                                    <v-col cols="12">
+                                        <strong>Direction Two:</strong> {{ prescription.direction_two }}
+                                    </v-col>
+                                    <v-col cols="12">
+                                        <strong>Refill Quantity:</strong> {{ prescription.refill_quantity }}
+                                    </v-col>
+                                    <v-col cols="12">
+                                        <strong>Direction Quantity:</strong> {{ prescription.direction_quantity }}
+                                    </v-col>
+                                    <v-col cols="12" v-if="prescription.comments">
+                                        <strong>Comments:</strong> {{ prescription.comments }}
+                                    </v-col>
+                                </v-row>
+                            </v-card-text>
+                        </div>
+                    </v-expand-transition>
+                </v-card>
+            </v-col>
+        </v-row>
+     
+            <v-col cols="auto">
+              <v-pagination v-model="currentPage" :length="totalPages" @input="changePage"></v-pagination>
+            </v-col>
+         
+      
+    </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"
+      >
+            <template #item.provider_name="{ item }">
+           <span class="">{{ item.provider_name }}</span>
+        </template>
+        <template #item.order_id="{ item }">
+            <RouterLink :to="{ name: 'admin-order-detail', params: { id: item.order_id } }">
+                               <span class=""> #{{ item.order_id }} &nbsp;</span>
+                                </RouterLink>
+        </template>
+        
+        <template #item.status="{ item }">
+        
+          <VChip
+            :color="getStatusColor(item.status)"
+            density="comfortable"
+          >
+            {{ item.status}}
+          </VChip>
+        </template>
+
+        <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
+}
+.v-pagination .v-btn {
+    transition: none !important;
+}
+.v-pagination .v-btn:focus {
+    outline: none;
+}
+// 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="Upcoming 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/meeting-details.vue

@@ -0,0 +1,79 @@
+<script setup>
+import Notes from '@/pages/pages/patient-meetings/notes.vue';
+import Prescription from '@/pages/pages/patient-meetings/prescription.vue';
+import moment from 'moment';
+import { onMounted, 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 currentTab = ref(0);
+const appointmentID = ref();
+const doctorName = ref();
+const startTime = ref();
+const endTime = ref();
+const duration = ref();
+const appointmentData = ref(null);
+
+onMounted(async () => {
+    store.dispatch('updateIsLoading', true);
+    await store.dispatch('getAppointmentByIdAgent', {
+        patient_id: patientId,
+        appointment_id: appointmentId,
+    });
+    appointmentData.value = store.getters.getSinglePatientAppointment;
+    appointmentID.value = appointmentId;
+    doctorName.value = appointmentData.value.agent_name;
+    startTime.value = appointmentData.value.start_time;
+    endTime.value = appointmentData.value.end_time;
+    duration.value = totalCallDuration(startTime.value, endTime.value);
+    localStorage.setItem('meetingPatientAppointmentId', appointmentID.value);
+    store.dispatch('updateIsLoading', false);
+});
+
+const totalCallDuration = (start_time, end_time) => {
+    const startMoment = moment(start_time);
+    const endMoment = moment(end_time);
+    const duration = moment.duration(endMoment.diff(startMoment));
+    const hours = duration.hours();
+    const minutes = duration.minutes();
+    const seconds = duration.seconds();
+    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+};
+</script>
+
+<template>
+    <VCard>
+        <VCardText>
+            <h3 v-if="appointmentID"> #{{ appointmentID }} By {{ doctorName }} </h3>
+            <span> Meeting duration: <b>{{ duration }}</b></span>
+        </VCardText>
+        <div class="d-flex">
+            <div>
+                <VTabs v-model="currentTab" direction="vertical">
+                    <VTab>
+                        <VIcon start icon="tabler-edit" />
+                        Notes
+                    </VTab>
+                    <VTab>
+                        <VIcon start icon="tabler-lock" />
+                        Prescriptions
+                    </VTab>
+                </VTabs>
+            </div>
+            <VCardText>
+                <VWindow v-model="currentTab" class="ms-3">
+                    <VWindowItem>
+                        <Notes />
+                    </VWindowItem>
+                    <VWindowItem>
+                        <Prescription />
+                    </VWindowItem>
+                </VWindow>
+            </VCardText>
+        </div>
+    </VCard>
+</template>

resources/js/pages/providers/meetings.vue

@@ -0,0 +1,189 @@
+<script setup>
+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 providerMeetingList = 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', key: 'patient_name' },
+  // { key: 'appointment_date', sortable: false, title: 'Date' },
+  { key: 'start_time', title: 'Start Time' },
+  { key: 'end_time', title: 'End Time' },
+  { key: 'duration', title: 'Duration' },
+  { title: 'ACTIONS', key: 'actions' },
+];
+
+// Utility functions
+function changeDateFormat(dateFormat) {
+  if (dateFormat) {
+    const [datePart, timePart] = dateFormat.split(' ');
+    const [year, month, day] = datePart.split('-');
+    // const formattedDate = `${parseInt(month)}-${parseInt(day)}-${year}`;
+    return `${formattedDate} ${timePart}`;
+  }
+  return dateFormat;
+}
+
+function changeFormat(dateFormat) {
+  const [year, month, day] = dateFormat.split('-');
+  return `${parseInt(month)}-${parseInt(day)}-${year}`;
+}
+
+function totalCallDuration(start_time, end_time) {
+  const startMoment = moment(start_time);
+  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}:${seconds}`;
+  } else {
+    return `${hours}:${minutes}:${seconds}`;
+  }
+}
+
+// Fetch and process the patient meeting list
+const getPatientMeetingList = async () => {
+  store.dispatch('updateIsLoading', true);
+  await store.dispatch('providerMeetingList', { id: route.params.id });
+  store.dispatch('updateIsLoading', false);
+
+  let list = store.getters.getProviderMeetingList;
+  providerMeetingList.value = list.map(history => ({
+    ...history,
+    appointment_date: changeFormat(history.appointment_date),
+    start_time: changeDateFormat(history.start_time),
+    end_time: changeDateFormat(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/' + item.patient_id + '/' + item.id);
+    if(value == 'prescription')
+    router.push('/admin/patient/meeting/prescription/' + item.patient_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="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="providerMeetingList"
+          :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"  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/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

@@ -0,0 +1,844 @@
+<script setup>
+import API from '@/api';
+import { PROVIDER_FILTER_LIST_API } from '@/constants';
+import AddProvider from '@/pages/providers/AddProvider-step.vue';
+import EditProvider from '@/pages/providers/EditProvider-step.vue';
+import DataTablesCore from 'datatables.net';
+import DataTable from 'datatables.net-vue3';
+import debounce from 'lodash.debounce';
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+DataTable.use(DataTablesCore);
+const isAddCustomerDrawerOpen = ref(false)
+const isEditCustomerDrawerOpen = ref(false)
+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 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 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 = async (item) => {
+  isEditCustomerDrawerOpen.value = true
+  
+  await store.dispatch('providerGETBYID', {
+    id: item.id,
+  })
+  
+  editedItem.value = store.getters.getSingleProvider
+  console.log(store.getters.getSingleProvider)
+ // 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 () => {
+  const { valid } = await refVForm.value.validate()
+  console.log(valid)
+  if (valid) {
+    if (editedIndex.value > -1){
+      await store.dispatch('providerUpdate',{
+        id: editedItem.value.id,
+        first_name: editedItem.value.first_name,
+        last_name: editedItem.value.last_name,
+        email: editedItem.value.email,
+      })
+      Object.assign(providersList.value[editedIndex.value], editedItem.value)
+    }else{
+      providersList.value.push(editedItem.value)
+    }
+  close()
+  }
+ 
+  
+}
+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
+  })
+loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
+  closeDelete()
+}
+// const getprovidersList = computed(async () => {
+//   providersList.value = [];
+//   console.log('getprovidersFilterList',store.getters.getProvidersList)
+//     let list = store.getters.getProvidersList
+//     store.dispatch('updateIsLoading', false)
+//   providersList.value = list
+//      providersList.value.sort((a, b) => {
+//         return b.id - a.id;
+//     });
+//     return providersList.value
+// });
+
+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)
+ }
+
+
+const serverItems = ref([]);
+const loading = ref(true);
+const totalItems = ref(0);
+
+
+onMounted(async() => {
+  
+})
+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);
+ loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
+
+}
+
+const onStateChange = async(newvalue)=> {
+  filter.value.state = newvalue;
+  console.log("state",filter.value.state);
+   loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
+
+}
+const onAvailabilityFromChange = async(newvalue)=> {
+  filter.value.availabilityFrom = newvalue;
+  console.log("frmo",filter.value.availabilityFrom);
+  loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
+
+}
+const onAvailabilityToChange = async(newvalue)=> {
+  filter.value.availabilityTo = newvalue;
+  console.log("to",filter.value.availabilityTo);
+  loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
+
+}
+
+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;
+});
+
+const handleProviderAdded = async (msg) => {
+  if (msg == 'success') {
+  console.log('save============================')
+      store.dispatch('updateIsLoading', true)
+      loadItems({ page: 1, itemsPerPage: itemsPerPage.value, sortBy: [] });
+    store.dispatch('updateIsLoading', false)
+      
+  }
+  
+}
+
+const headers = [
+{
+    title: 'ID',
+    key: 'id',
+  },
+  {
+    title: 'NAME',
+    key: 'name',
+    align: 'start',
+  },
+  {
+    title: 'EMAIL',
+    key: 'email',
+  },
+  {
+    title: 'Gender',
+    key: 'gender',
+  },
+  {
+    title: 'State',
+    key: 'state',
+  },
+  
+  // {
+  //   title: 'Date Of Birth',
+  //   key: 'dob',
+  // },
+  {
+    title: 'Phone',
+    key: 'phone_number',
+  },
+  {
+    title: 'Availabilty From',
+    key: 'availability_from',
+  },
+  {
+    title: 'Availabilty To',
+    key: 'availability_to',
+  },
+  {
+    title: 'Total order Meetings',
+    key: 'meeting_count',
+  },
+  
+ 
+  {
+    title: 'ACTIONS',
+    key: 'actions',
+    searchable:false
+  },
+]
+
+const itemsPerPage = ref(30);
+// Method to load items
+const loadItems = debounce( async ( { page,  itemsPerPage, sortBy }) =>  {
+  const payload = {
+    page,
+    itemsPerPage,
+    sortBy,
+    filters:{
+        gender: filter.value.gender,
+        state: filter.value.state,
+        availability_from: filter.value.availabilityFrom,
+        availability_to: filter.value.availabilityTo,
+    },
+    search:search.value,
+  }
+  console.log("records",page, itemsPerPage, sortBy);
+  loading.value = true;
+  const data = await API.getDataTableRecord(PROVIDER_FILTER_LIST_API, payload, headers);
+  serverItems.value   = data.items;
+  totalItems.value = data.total;
+  loading.value = false;  
+},500);
+
+</script>
+
+<template>
+  <v-row>
+    <v-col cols="12" md="12">
+    <VCard title="Providers">
+      <VCardText >
+          <VRow>
+            
+            <VCol
+              cols="12"
+              
+              md="2"
+            >
+            
+          <VSelect
+                  v-model="filter.gender"
+                  label="Gender"
+                  placeholder="Gender"
+                  density="compact"
+                  :items="['All','Male', 'Female']"
+                  @update:model-value="onGenderChange"
+                  
+          />
+          
+          </VCol>
+          <VCol
+              cols="12"
+              
+              md="3"
+            >
+             <VAutocomplete
+                  v-model="filter.state"
+                  label="State"
+                 density="compact"
+                  :items="sortedStates"
+                  item-title="name"
+                  item-value="abbreviation"
+                  @update:model-value="onStateChange"
+                  
+          />
+          
+           </VCol>
+           
+             
+            <VCol
+              cols="12"
+              md="3"
+            >
+                 <VSelect density="compact" @update:model-value="onAvailabilityFromChange" v-model="filter.availabilityFrom" label="Availability From" :items="timeOptions"  />
+              </VCol>
+               <VCol
+              cols="12"
+              md="3"
+            >
+                <VSelect density="compact" @update:model-value="onAvailabilityToChange" v-model="filter.availabilityTo" label="Availability To" :items="timeOptions" 
+               />
+
+              </VCol>
+               <VCol
+              cols="12"
+              md="3"
+            >
+              <VTextField
+                v-model="search"
+                label="Search"
+                density="compact"
+                placeholder="Search ..."
+                append-inner-icon="ri-search-line"
+                single-line
+                hide-details
+                dense
+                outlined
+              />
+            </VCol>
+            <VCol
+              cols="12"
+              v-if="$can('read', 'Provider Add')"
+              md="3"
+            >
+            <VBtn
+              prepend-icon="ri-add-line"
+              @click="isAddCustomerDrawerOpen = !isAddCustomerDrawerOpen"
+              
+            >
+              Add Provider
+            </VBtn>
+            </VCol>
+          </VRow>
+        </VCardText>
+        <v-data-table-server
+        v-model:items-per-page="itemsPerPage"
+        :headers="headers"
+        :items="serverItems"
+        :items-length="totalItems"
+        :loading="loading"
+        :search="search"
+        :item-value="name"
+        @update:options="loadItems"
+      >
+      <template #item.name="{ item }">
+          <div class="d-flex align-center" style="width:150px">
+           
+            <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>
+
+       
+        <template #item.status="{ item }">
+          <VChip
+            :color="resolveStatusVariant(item.status).color"
+            density="comfortable"
+          >
+            {{ resolveStatusVariant(item.status).text }}
+          </VChip>
+        </template>
+
+        
+         <template #item.phone_number="{ item }">
+          <span class="d-flex align-center" style="width: 150px;"> {{  item.phone_number }}</span>
+        </template>
+        <template #item.actions="{ item }">
+          <div class="d-flex gap-1">
+            <IconBtn
+              size="small"
+              @click="editItem(item)"
+              v-if="$can('read', 'Provider Edit')"
+            >
+              <VIcon icon="ri-pencil-line" />
+            </IconBtn>
+            <IconBtn
+              size="small"
+              @click="deleteItem(item)"
+               v-if="$can('read', 'Provider Delete')"
+          >
+              <VIcon icon="ri-delete-bin-line" />
+            </IconBtn>
+             <IconBtn
+                size="small"
+                @click="getMettings(item)"
+                style="display: none;"
+              >
+              <VIcon icon="ri-time-line" />
+            </IconBtn>
+          </div>
+        </template>
+      </v-data-table-server>
+      
+      
+    </VCard>  
+    </v-col>
+    <AddProvider v-model:is-drawer-open="isAddCustomerDrawerOpen"     @providerAdded="handleProviderAdded" />
+   <EditProvider v-model:is-drawer-open="isEditCustomerDrawerOpen"  :user-data="store.getters.getSingleProvider"    @providerAdded="handleProviderAdded" />
+  </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>
+
+</style> -->
+<style>
+.highlighted {
+  /* Add your desired highlighting styles here */
+  font-weight: bold;
+  color: #a169ff; /* or any other color you prefer */
+}
+table>thead>tr>th{
+  height: 56px;
+  font-weight: 500;
+  -webkit-user-select: none;
+  user-select: none;
+  text-align: center;
+  padding: 0 20px;
+  transition-duration: .28s;
+  transition-property: height;
+  transition-timing-function: cubic-bezier(.4,0,.2,1);
+  border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+  /* background: rgb(var(--v-table-header-color)) !important; */
+  border-block-end: none !important;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+  font-size: .8125rem;
+  letter-spacing: .2px;
+  line-height: 24px;
+  text-transform: uppercase;
+}
+table>tbody>tr>td{
+  text-align: center;
+  height: 50px;
+  border-bottom: 1px solid #e2dfdf;
+}
+.dt-layout-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom:10px;
+}
+.dt-layout-table{
+  display: block !important;
+  width: 100%;
+}
+.dt-layout-cell {
+  display: flex;
+  align-items: center;
+}
+.dt-input{
+  border: 1px solid silver;
+    border-radius: 5px;
+    padding: 7px;
+    text-align: center;
+    margin-left:5px;
+    background: rgb(var(--v-table-header-color)) !important;
+}
+.dt-length,
+.dt-search {
+  display: flex;
+  align-items: center;
+}
+
+.dt-length label,
+.dt-search label {
+  margin-left: 5px;
+}
+
+.dt-layout-start {
+  flex: 1;
+}
+
+.dt-layout-end {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+.dt-paging-button{
+  cursor: pointer;
+      border: 1px solid silver;
+    border-radius: 22px;
+    padding: 9px 15px 6px 15px;
+    margin-left: 3px;
+}
+.first,.previous,.next,.last{
+  cursor: pointer;
+  border: 0px solid silver;
+    border-radius: 22px;
+    padding: 9px 5px 6px 5px;
+    margin-left: 3px;
+}
+.current{
+  background: #8c57ff;
+    color: white;
+}
+</style>