fixes

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

@@ -58,7 +58,18 @@ const formatDateDate = (date) => {
     };
     return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
 };
-
+const breadcrums = [
+    {
+        title: 'Meeting',
+        disabled: false,
+        to: '/admin/patient/meetings/'+patientId,
+    },
+    {
+        title: 'Notes',
+        disabled: false,
+    }
+    
+];
 const downloadFile = (fileUrl) => {
     const link = document.createElement('a');
     link.href = fileUrl;
@@ -70,32 +81,70 @@ const downloadFile = (fileUrl) => {
 </script>
 
 <template>
-    <VCard title="Notes">
-    <VList class="pb-0" lines="two" v-if="notes.length > 0">
-        <template v-for="(p_note, index) in notes" :key="index">
-            <VListItem class="pb-0">
-                <VListItemTitle>
-                    <span class="pb-0">{{ p_note.note }}</span>
-                    <span v-if="p_note.file_url" style="font-size: 12px;float: right;">
-                        <a type="button" @click="downloadFile(p_note.file_url)">
-                            <VIcon>ri-file-download-line</VIcon>
-                        </a>
-                    </span>
-                    <p class="text-start fs-5 mb-0 pb-0 text-grey">
-                        <small>{{ p_note.doctor }}</small>
-                    </p>
-                    <p class="text-end fs-5 mb-0 pb-0 text-grey"><small>{{ p_note.date }}</small></p>
-                </VListItemTitle>
-            </VListItem>
-            <VDivider v-if="index !== notes.length - 1" />
+     <v-breadcrumbs :items="breadcrums" class="text-primary pt-0 pb-0 mb-5">
+        <template v-slot:divider style="padding-top:0px; padding-bottom:0px">
+            >
         </template>
-    </VList>
-    <template v-else>
-        <VCard>
-            <VAlert border="start" color="#003152" variant="tonal">
-                <div class="text-center">No data found</div>
-            </VAlert>
-        </VCard>
-    </template>
-    </VCard>
+    </v-breadcrumbs>
+
+  <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">
+            <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">
+              {{p_note.note}}
+            </span>
+            <span class="app-timeline-meta">{{ p_note.date }}</span>
+            <!-- <span></span> -->
+          </div>
+
+          <!-- 👉 Content -->
+          <div class="app-timeline-text mb-1">
+            <span>{{ p_note.doctor }}</span>
+            <VIcon
+              size="20"
+              icon="tabler-arrow-right"
+              class="mx-2 flip-in-rtl"
+            />
+            <!-- <span>Heathrow Airport, London</span> -->
+          </div>
+
+          <!-- <p class="app-timeline-meta mb-2">
+            6:30 AM
+          </p> -->
+
+          <!-- <div class="app-timeline-text d-flex align-center gap-2">
+            <div>
+              <VImg
+                :src="pdf"
+                :width="22"
+              />
+            </div>
+
+            <span>booking-card.pdf</span>
+          </div> -->
+        </VTimelineItem>
+        </template>
+        
+        
+        <!-- !SECTION -->
+
+        <!-- !SECTION -->
+      </VTimeline>
+    </VCardText>
+  </VCard>
 </template>