sfp_front_vue_diarista_cliente/src/components/dashboard/DashboardHeaderBar.vue

<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <div class="dashboard-header shadow-card bg-white row items-center no-wrap q-px-md q-pb-sm">
    <div class="col column q-gutter-y-xs">
      <div class="row items-center q-gutter-x-xs">
        <q-icon name="mdi-star" color="warning" size="14px" />
        <span class="dashboard-metric-value">{{ data?.rating != null ? Number(data.rating).toFixed(1).replace('.', ',') : '-' }}</span>
        <span class="dashboard-metric-meta">({{ data?.total_ratings ?? 0 }})</span>
      </div>
      <div class="row items-center q-gutter-x-xs">
        <q-icon name="mdi-broom" color="secondary" size="14px" />
        <span class="dashboard-metric-value">{{ data?.total_services ?? 0 }}</span>
      </div>
    </div>

    <div class="col-auto row justify-center">
      <img :src="LogoDiariaColorida" alt="Diária" class="dashboard-logo" />
    </div>

    <div class="col row justify-end items-center">

  <q-btn
    flat
    round
    dense
    color="grey-7"
    size="sm"
    @click="goToNotifications"
  >

    <q-icon
      name="mdi-bell-outline"
      size="20px"
    />

    <!-- BADGE -->
    <q-badge
      v-if="unreadNotifications > 0"
      floating
      rounded
      color="pink"
      class="notification-badge"
    >
      {{ unreadNotifications }}
    </q-badge>

  </q-btn>

</div>
  </div>
</template>

<script setup>
import LogoDiariaColorida from 'src/assets/logo_diaria_colorido_sem_texto.svg'

import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  data: {
    type: Object,
    default: () => null
  },

  notifications: {
    type: Array,
    default: () => []
  }
})

//vai para dashboard as notificações tem que ser mocada no backend
const unreadNotifications = computed(() => {
  return props.notifications.filter((notification) => !notification.read).length
})

const goToNotifications = () => {
  router.push({
  name: 'NotificationsPage',
  query: {
    notifications: JSON.stringify(props.notifications)
  }
})
}
</script>

<style scoped lang="scss">
.dashboard-header {
  padding-top: calc(env(safe-area-inset-top) + 8px);
  width: 100%;
  box-sizing: border-box;
}
.dashboard-logo {
  width: 32px;
  height: 32px;
}
.dashboard-metric-value {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #3a3a4a;
  line-height: 1;
}
.dashboard-metric-meta {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #999;
  line-height: 1;
}

.notification-badge {
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
}
</style>