feat: :sparkles: feat (modulo-de-notificação) Esta sendo criado e ajustado a parte d enotificação do prestador

Foi criado o fluxo no template do prestador para receber as mensagens de notificação enviadas quando o cliente faz alguns procedimentos ex: aceita, recusa etc

fase:dev | origin:escopo

src/i18n/locales/pt.json

@@ -802,5 +802,10 @@
     "payments": "Pagamentos",
     "agenda": "Agenda",
     "profile": "Perfil"
+  },
+  "notifications": {
+    "title": "Notificações",
+    "unread": "Não lidas",
+    "mark_all_read": " Marcar todas como lidas"
   }
 }

src/pages/notifications/NotificationsPage.vue

@@ -39,96 +39,134 @@
     <!-- LIST -->
     <div class="notifications-list">
 
-      <q-card
-        v-for="item in notifications"
-        :key="item.id"
-        flat
-        clickable
-        class="notification-card"
-        :class="{ unread: !item.read }"
-        @click="markAsRead(item.id)"
-      >
-
-        <div class="row no-wrap items-start">
-
-          <!-- AVATAR -->
-          <q-avatar size="42px" class="q-mr-md">
-            <img :src="item.avatar" />
-          </q-avatar>
-
-          <!-- CONTENT -->
-          <div class="col">
-
-            <div class="row justify-between items-start">
-
-              <div class="notification-title">
-                {{ item.title }}
-              </div>
-
-              <!-- STATUS -->
-              <div
-                class="status-dot"
-                :class="{ active: !item.read }"
-              />
-
-            </div>
+       <q-card
+    v-for="item in notifications"
+    :key="item.id"
+    flat
+    clickable
+    class="notification-card"
+    :class="{ unread: !item.read }"
+    @click="markAsRead(item)"
+  >
+
+    <div class="row no-wrap items-start">
+
+      <!-- AVATAR -->
+      <q-avatar size="42px" class="q-mr-md">
+        <img :src="logoDiaria" />
+      </q-avatar>
+
+      <!-- CONTENT -->
+      <div class="col">
+
+        <div class="row justify-between items-start">
+
+          <div class="notification-title">
+            {{ item.title }}
+          </div>
 
-            <div class="notification-description">
-              {{ item.description }}
-            </div>
+          <!-- STATUS -->
+          <div
+            class="status-dot"
+            :class="{ active: !item.read }"
+          />
 
-            <div class="notification-time">
-              {{ item.time }}
-            </div>
+        </div>
 
-          </div>
+        <div class="notification-description">
+          {{ item.description }}
+        </div>
 
+        <div class="notification-time">
+          {{ item.time }}
         </div>
 
-      </q-card>
+      </div>
 
     </div>
 
+  </q-card>
+
+</div>
+
   </q-page>
 </template>
 
 <script setup>
+
 import { computed, ref, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 
-const router = useRouter()
+import { api } from 'boot/axios'
 
+import logoDiaria from 'src/assets/logo_diaria_colorido_sem_texto.svg'
 
-const route = useRoute()
+const router = useRouter()
 
 const notifications = ref([])
 
 onMounted(() => {
-  notifications.value = JSON.parse(route.query.notifications || '[]')
+  loadNotifications()
 })
 
 const unreadCount = computed(() => {
   return notifications.value.filter((n) => !n.read).length
 })
 
-const markAsRead = (id) => {
-  notifications.value = notifications.value.map((notification) => {
-    if (notification.id === id) {
-      return {
-        ...notification,
-        read: true
+const loadNotifications = async () => {
+  try {
+
+    const response = await api.get('/notifications')
+
+    notifications.value = response.data.payload || []
+
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const markAsRead = async (notification) => {
+  try {
+
+    await api.put(`/notifications/${notification.id}/read`)
+
+    notifications.value = notifications.value.map((item) => {
+
+      if (item.id === notification.id) {
+        return {
+          ...item,
+          read: true
+        }
       }
+
+      return item
+    })
+
+    if (
+      notification.origin === 'schedule'
+      && notification.origin_id
+    ) {
+      router.push(`/schedule/${notification.origin_id}`)
     }
 
-    return notification
-  })
+  } catch (error) {
+    console.error(error)
+  }
 }
 
-const markAllAsRead = () => {
-  notifications.value = notifications.value.map((notification) => ({
-    ...notification,
-    read: true
-  }))
+const markAllAsRead = async () => {
+  try {
+
+    await api.put('/notifications/read-all')
+
+    notifications.value = notifications.value.map((notification) => ({
+      ...notification,
+      read: true
+    }))
+
+  } catch (error) {
+    console.error(error)
+  }
 }
 </script>