diff --git a/resources/js/pages/patients/meetings.vue b/resources/js/pages/patients/meetings.vue
index 36eaddb..6f1c782 100644
--- a/resources/js/pages/patients/meetings.vue
+++ b/resources/js/pages/patients/meetings.vue
@@ -1,14 +1,15 @@
 <script setup>
 import moment from 'moment';
-import { onBeforeMount, onMounted, onUnmounted } from 'vue';
+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 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,
@@ -17,142 +18,97 @@ const defaultItem = ref({
   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)
-
-onBeforeMount(async () => {});
-onMounted(async () => {});
-onUnmounted(async () => {});
-
-// headers
-const headers = [
-{
-    title: 'Appiontment 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'},
-]
-
-
-
-const getPatientMeetingList = computed(async () => {
-  patientMeetingList.value = [];
-  store.dispatch('updateIsLoading', true)
-  await store.dispatch('patientMeetingList', {
-    id: route.params.id
-  })
-  console.log('patientMeetingList',store.getters.getPatientMeetingList)
-    let list = store.getters.getPatientMeetingList
-    store.dispatch('updateIsLoading', false)
-    patientMeetingList.value = list;
-    return patientMeetingList.value.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),
-    }));
-    // return patientMeetingList.value
 });
 
+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', 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) {
-    console.log("startTimeFormat", dateFormat);
-    if (dateFormat) {
-        const [datePart, timePart] = dateFormat.split(' '); // Split date and time parts
-        const [year, month, day] = datePart.split('-'); // Split date into year, month, and day
-        const formattedMonth = parseInt(month).toString(); // Convert month to integer and then string to remove leading zeros
-        const formattedDay = parseInt(day).toString(); // Convert day to integer and then string to remove leading zeros
-        const formattedDate = `${formattedMonth}-${formattedDay}-${year}`; // Format date as mm-dd-yyyy
-        return `${formattedDate} ${timePart}`; // Combine formatted date with original time part
-    }
+  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 dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
-    const year = parseInt(dateParts[0]);
-    const month = parseInt(dateParts[1]); // No need for padding
-    const day = parseInt(dateParts[2]); // No need for padding
-
-    // Create a new Date object with the parsed values
-    const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object
-
-    // Format the date as mm-dd-yyyy
-    const formattedDate = month + '-' + day + '-' + date.getFullYear();
-
-    return formattedDate;
+  const [year, month, day] = dateFormat.split('-');
+  return `${parseInt(month)}-${parseInt(day)}-${year}`;
 }
+
 function totalCallDuration(start_time, end_time) {
-    console.log(start_time, end_time);
-    const startMoment = moment(start_time);
-    const endMoment = moment(end_time);
-
-    // Calculate the duration
-    const duration = moment.duration(endMoment.diff(startMoment));
-    const hours = duration.hours();
-    const thours = `${String(hours).padStart(2, '0')}`;
-    const minutes = duration.minutes();
-    const tminutes = `${String(minutes).padStart(2, '0')}`;
-    const seconds = duration.seconds();
-    const tsecond = `${String(seconds).padStart(2, '0')}`;
-    let durationText;
-    if (hours === 0 && minutes === 0) { //for second
-        durationText = ` 00:00:${tsecond}`;
-    } else if (hours === 0 && minutes > 0) { //for minutes
-        durationText = `00:${tminutes}:${tsecond}`;
-    } else if (hours > 0) {  //for hours
-        durationText = `${thours}:${tminutes}:${tsecond}`;
-    }
-    const totalDuration = durationText;
-    console.log('Duration:', durationText);
-    // You may need to adjust this function based on your actual data structure
-    // For example, if you have separate first name and last name properties in each appointment object
-    return totalDuration; // For now, just return the first name
+  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}`;
+  }
 }
-onMounted(() => {
- 
 
-})
+// 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 = store.getters.getPatientMeetingList;
+  patientMeetingList.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),
+  }));
+};
+
+// Lifecycle hooks
+onBeforeMount(() => {});
+onMounted(async () => {
+  await getPatientMeetingList();
+});
+onUnmounted(() => {});
 </script>
 
 <template>
-    
   <v-row>
-    <v-col cols="12" md="12" v-if="getPatientMeetingList">
-      <VCard title="Meetings">
-      <VCardText >
-          <VRow>
-            <VCol
-              cols="12"
-              offset-md="8"
-              md="4"
-            >
-              <VTextField
+    <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 ..."
@@ -162,31 +118,26 @@ onMounted(() => {
                 dense
                 outlined
               />
-            </VCol>
-          </VRow>
-        </VCardText>
-      <VDataTable
-        :headers="headers"
-        :items="patientMeetingList"
-        :search="search"
-        :items-per-page="5"
-        class="text-no-wrap"
-      >
-      <template #item.id="{ item }">
-      {{ item.id }}
-      </template>
-        
-        <!-- Actions -->
-        <template #item.actions="{ item }">
-          <div class="d-flex gap-1">
-            
-          </div>
-        </template>
-      </VDataTable>
-    </VCard>  
+            </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="d-flex gap-1">
+              <!-- Your action buttons go here -->
+            </div>
+          </template>
+        </v-data-table>
+      </v-card>  
     </v-col>
   </v-row>
-
-  <!-- 👉 Delete Dialog  -->
-  
 </template>