Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

carousel, agenda arquivados, agenda cor, agenda arquivados, grupos pacientes, pacientes arquivados - desativados, sessoes verificadas, ajuste notificações, Prontuario, Agenda Animation, Menu Profile, bagdes Profile, Offline

Browse Source
This commit is contained in:
Leonardo
2026-03-18 09:26:09 -03:00
parent 66f67cd40f
commit d6d2fe29d1
55 changed files with 3655 additions and 1512 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/notifications/NotificationDrawer.vue
+2 -2
View File
@@ -103,7 +103,7 @@ function goToHistory () {
<!-- Empty state -->
<div v-else class="notification-drawer__empty">
<i class="pi pi-bell-slash notification-drawer__empty-icon" />
<p class="notification-drawer__empty-text">Tudo em dia</p>
<p class="notification-drawer__empty-text">Tudo em dia por aqui 🎉</p>
<p class="notification-drawer__empty-sub">Nenhuma notificação{{ filter === 'unread' ? ' não lida' : '' }}.</p>
</div>
</div>
@@ -113,7 +113,7 @@ function goToHistory () {
<div class="notification-drawer__footer">
<button class="notification-drawer__history-link" @click="goToHistory">
<i class="pi pi-history" />
Ver histórico completo
Ver histórico completo →
</button>
</div>
</template>
src/components/notifications/NotificationItem.vue
+64 -79
View File
@@ -4,41 +4,38 @@ import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { formatDistanceToNow } from 'date-fns'
import { ptBR } from 'date-fns/locale'
import { useNotificationStore } from '@/stores/notificationStore'
const props = defineProps({
item: {
type: Object,
required: true
}
item: { type: Object, required: true }
})
const emit = defineEmits(['read', 'archive'])
const router = useRouter()
const store = useNotificationStore()
const typeIconMap = {
new_scheduling: { icon: 'pi-inbox', color: 'text-red-500' },
new_patient: { icon: 'pi-user-plus', color: 'text-sky-500' },
recurrence_alert: { icon: 'pi-refresh', color: 'text-amber-500' },
session_status: { icon: 'pi-calendar-times', color: 'text-orange-500' }
const typeMap = {
new_scheduling: { icon: 'pi-inbox', border: 'border-red-500', },
new_patient: { icon: 'pi-user-plus', border: 'border-sky-500', },
recurrence_alert: { icon: 'pi-refresh', border: 'border-amber-500', },
session_status: { icon: 'pi-calendar-times', border: 'border-orange-500', },
}
const typeIcon = computed(() => typeIconMap[props.item.type] || { icon: 'pi-bell', color: 'text-gray-400' })
const meta = computed(() => typeMap[props.item.type] || { icon: 'pi-bell', border: 'border-gray-300' })
const isUnread = computed(() => !props.item.read_at)
const timeAgo = computed(() =>
formatDistanceToNow(new Date(props.item.created_at), { addSuffix: true, locale: ptBR })
)
const avatarInitials = computed(() =>
props.item.payload?.avatar_initials || '??'
)
const initials = computed(() => props.item.payload?.avatar_initials || '?')
function handleRowClick () {
const deeplink = props.item.payload?.deeplink
if (deeplink) {
router.push(deeplink)
store.drawerOpen = false
emit('read', props.item.id)
}
}
@@ -56,45 +53,42 @@ function handleArchive (e) {
<template>
<div
class="notification-item"
:class="{ 'notification-item--unread': isUnread }"
@click="handleRowClick"
class="notif-item"
:class="[meta.border, isUnread ? 'notif-item--unread' : '']"
role="button"
tabindex="0"
@click="handleRowClick"
@keydown.enter="handleRowClick"
>
<!-- Dot indicador -->
<span v-if="isUnread" class="notification-item__dot" aria-hidden="true" />
<!-- Ícone de tipo -->
<span class="notification-item__type-icon" aria-hidden="true">
<i :class="['pi', typeIcon.icon, typeIcon.color]" />
</span>
<!-- Ícone do tipo -->
<div class="notif-item__icon" aria-hidden="true">
<i :class="['pi', meta.icon]" />
</div>
<!-- Avatar -->
<span class="notification-item__avatar" aria-hidden="true">
{{ avatarInitials }}
</span>
<div class="notif-item__avatar" aria-hidden="true">
{{ initials }}
</div>
<!-- Conteúdo -->
<div class="notification-item__content">
<p class="notification-item__title">{{ item.payload?.title }}</p>
<p class="notification-item__detail">{{ item.payload?.detail }}</p>
<p class="notification-item__time">{{ timeAgo }}</p>
<div class="notif-item__body">
<p class="notif-item__title">{{ item.payload?.title }}</p>
<p class="notif-item__detail">{{ item.payload?.detail }}</p>
<p class="notif-item__time">{{ timeAgo }}</p>
</div>
<!-- Ações -->
<div class="notification-item__actions" @click.stop>
<div class="notif-item__actions" @click.stop>
<button
v-if="isUnread"
class="notification-item__action-btn"
class="notif-item__btn"
title="Marcar como lida"
@click="handleMarkRead"
>
<i class="pi pi-check" />
</button>
<button
class="notification-item__action-btn"
class="notif-item__btn"
title="Arquivar"
@click="handleArchive"
>
@@ -105,101 +99,92 @@ function handleArchive (e) {
</template>
<style scoped>
.notification-item {
position: relative;
.notif-item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.75rem 1rem;
cursor: pointer;
border-left-width: 3px;
border-left-style: solid;
border-bottom: 1px solid var(--surface-border);
background: transparent;
cursor: pointer;
transition: background 0.15s;
}
.notification-item:hover {
.notif-item:hover {
background: var(--surface-hover);
}
.notification-item--unread {
background: color-mix(in srgb, var(--primary-color) 6%, transparent);
.notif-item--unread {
background: rgba(99, 102, 241, 0.05);
}
.notification-item--unread:hover {
background: color-mix(in srgb, var(--primary-color) 10%, transparent);
.notif-item--unread:hover {
background: rgba(99, 102, 241, 0.09);
}
.notification-item__dot {
position: absolute;
left: 0.25rem;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #6366f1;
.notif-item__icon {
flex-shrink: 0;
}
.notification-item__type-icon {
display: flex;
align-items: center;
padding-top: 0.125rem;
flex-shrink: 0;
font-size: 0.85rem;
padding-top: 0.15rem;
font-size: 0.9rem;
color: var(--text-color-secondary);
}
.notification-item__avatar {
display: flex;
align-items: center;
justify-content: center;
.notif-item__avatar {
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--surface-200);
color: var(--text-color);
font-size: 0.7rem;
background: linear-gradient(135deg, #6366f1, #38bdf8);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
flex-shrink: 0;
letter-spacing: 0.05em;
letter-spacing: 0.04em;
display: flex;
align-items: center;
justify-content: center;
}
.notification-item__content {
.notif-item__body {
flex: 1;
min-width: 0;
}
.notification-item__title {
.notif-item__title {
font-weight: 600;
font-size: 0.85rem;
color: var(--text-color);
margin: 0 0 0.125rem;
margin: 0 0 0.1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notification-item__detail {
font-size: 0.8rem;
.notif-item__detail {
font-size: 0.78rem;
color: var(--text-color-secondary);
margin: 0 0 0.125rem;
margin: 0 0 0.1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notification-item__time {
font-size: 0.72rem;
.notif-item__time {
font-size: 0.7rem;
color: var(--text-color-secondary);
opacity: 0.7;
margin: 0;
opacity: 0.75;
}
.notification-item__actions {
.notif-item__actions {
display: flex;
align-items: center;
gap: 0.125rem;
opacity: 0;
transition: opacity 0.15s;
}
.notification-item:hover .notification-item__actions {
.notif-item:hover .notif-item__actions {
opacity: 1;
}
.notification-item__action-btn {
.notif-item__btn {
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
@@ -212,7 +197,7 @@ function handleArchive (e) {
font-size: 0.75rem;
transition: background 0.15s, color 0.15s;
}
.notification-item__action-btn:hover {
.notif-item__btn:hover {
background: var(--surface-border);
color: var(--text-color);
}