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

Melissa: hub Configuracoes + Embed + 9 Pages novas + dialog blueprint dark

Browse Source 
Sprints 04-29 + 04-30 acumuladas.

- MelissaConfiguracoes: hub 2-col com 6 grupos (Layout/Conta/Agenda/
  Financeiro/WhatsApp/Sistema), tudo embedado via MelissaEmbed.
- MelissaEmbed: wrapper generico que injeta layout-variant=melissa
  e remove cromos pra reaproveitar Pages tradicionais.
- 9 Melissa Pages novas: CadastrosRecebidos, Compromissos, Configuracoes,
  Conversas, Embed, Grupos, Medicos, Recorrencias, Tags.
- Dialog blueprint atualizado: bg-gray-100 (hardcoded light) ->
  bg-[var(--surface-ground)] (tema-aware). 22 dialogs migrados em
  9 arquivos. Anti-pattern documentado.
- PatientsCadastroPage: bug fix dropdown Grupo (optionLabel nome->name),
  toggle vertical/abas com persist localStorage, sticky margin-top.
- Surface picker no popover do MelissaLayout (8 swatches).
- useTopbarPlanMenu, useMelissaWhatsapp, useMelissaPacientesAside novos.
- Migration: status agenda remarcado/confirmado.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-04 11:41:19 -03:00
parent 269c380d9c
commit 86311ef305
52 changed files with 16214 additions and 1027 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/notifications/NotificationItem.vue
+210 -118
View File
@@ -34,14 +34,17 @@ const store = useNotificationStore();
const conversationDrawer = useConversationDrawerStore();
const tenantStore = useTenantStore();
// Cores por tipo (usadas pra ícone + chips). RGB explícito pra usar com
// color-mix() no scoped CSS sem depender de tokens var().
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' },
inbound_message: { icon: 'pi-whatsapp', border: 'border-emerald-500' },
system_alert: { icon: 'pi-exclamation-circle', border: 'border-red-600' }
new_scheduling: { icon: 'pi-inbox', label: 'Agendamento', rgb: '244, 63, 94' }, // rose-500
new_patient: { icon: 'pi-user-plus', label: 'Novo paciente', rgb: '14, 165, 233' }, // sky-500
recurrence_alert: { icon: 'pi-refresh', label: 'Recorrência', rgb: '245, 158, 11' }, // amber-500
session_status: { icon: 'pi-calendar-times', label: 'Sessão', rgb: '249, 115, 22' }, // orange-500
inbound_message: { icon: 'pi-whatsapp', label: 'WhatsApp', rgb: '16, 185, 129' }, // emerald-500
system_alert: { icon: 'pi-exclamation-circle', label: 'Alerta', rgb: '239, 68, 68' } // red-500
};
const DEFAULT_TYPE = { icon: 'pi-bell', label: '', rgb: '99, 102, 241' };
// Aliases semânticos do deeplink → rota real por role. Mesmo map do AppLayout.
const DEEPLINK_ALIASES = {
@@ -57,11 +60,17 @@ function resolveDeeplink(link) {
return alias[role] || alias.therapist;
}
const meta = computed(() => typeMap[props.item.type] || { icon: 'pi-bell', border: 'border-gray-300' });
const meta = computed(() => typeMap[props.item.type] || DEFAULT_TYPE);
const isUnread = computed(() => !props.item.read_at);
const timeAgo = computed(() => formatDistanceToNow(new Date(props.item.created_at), { addSuffix: true, locale: ptBR }));
// CSS vars injetadas no item via :style — permite color-mix() no scoped CSS
// sem precisar de N classes. `--type-rgb` segue a paleta do typeMap.
const itemStyle = computed(() => ({
'--type-rgb': meta.value.rgb
}));
const initials = computed(() => props.item.payload?.avatar_initials || '?');
async function openConversationByThreadKey(threadKey) {
@@ -161,45 +170,54 @@ function handleArchive(e) {
</script>
<template>
<div class="notif-item" :class="[meta.border, isUnread ? 'notif-item--unread' : '']" role="button" tabindex="0" @click="handleRowClick" @keydown.enter="handleRowClick">
<!-- Ícone do tipo -->
<div class="notif-item__icon" aria-hidden="true">
<i :class="['pi', meta.icon]" />
</div>
<!-- Avatar -->
<div class="notif-item__avatar" aria-hidden="true">
{{ initials }}
<div
class="notif-item"
:class="{ 'notif-item--unread': isUnread }"
:style="itemStyle"
role="button"
tabindex="0"
@click="handleRowClick"
@keydown.enter="handleRowClick"
>
<!-- Ícone do tipo (avatar de iniciais quando vier do payload, senão o ícone) -->
<div class="notif-item__type" aria-hidden="true">
<span v-if="item.payload?.avatar_initials" class="notif-item__avatar">{{ initials }}</span>
<i v-else :class="['pi', meta.icon, 'notif-item__icon']" />
<span v-if="isUnread" class="notif-item__unread-dot" aria-label="Não lida" />
</div>
<!-- Conteúdo -->
<div class="notif-item__body">
<div class="notif-item__head">
<span class="notif-item__type-label">{{ meta.label }}</span>
<span class="notif-item__time">{{ timeAgo }}</span>
</div>
<p class="notif-item__title">{{ item.payload?.title }}</p>
<p class="notif-item__detail">{{ item.payload?.detail }}</p>
<div class="notif-item__footer">
<p class="notif-item__time">{{ timeAgo }}</p>
<div v-if="item.payload?.thread_key || item.payload?.deeplink" class="notif-item__quick" @click.stop>
<button
v-if="item.payload?.thread_key"
class="notif-quick-btn"
title="Abrir conversa"
@click="handleOpenConversation">
<i class="pi pi-comment" />
<span>Conversa</span>
</button>
<button
v-if="item.payload?.deeplink"
class="notif-quick-btn"
:title="item.payload?.actionLabel || 'Abrir'"
@click="handleOpenDeeplink">
<i class="pi pi-arrow-right" />
<span>{{ item.payload?.actionLabel || 'Abrir' }}</span>
</button>
</div>
<p v-if="item.payload?.detail" class="notif-item__detail">{{ item.payload.detail }}</p>
<div v-if="item.payload?.thread_key || item.payload?.deeplink" class="notif-item__quick" @click.stop>
<button
v-if="item.payload?.thread_key"
class="notif-quick-btn"
title="Abrir conversa"
@click="handleOpenConversation"
>
<i class="pi pi-comment" />
<span>Conversa</span>
</button>
<button
v-if="item.payload?.deeplink"
class="notif-quick-btn notif-quick-btn--primary"
:title="item.payload?.actionLabel || 'Abrir'"
@click="handleOpenDeeplink"
>
<span>{{ item.payload?.actionLabel || 'Abrir' }}</span>
<i class="pi pi-arrow-right" />
</button>
</div>
</div>
<!-- Ações -->
<!-- Ações secundárias (revelam no hover) -->
<div class="notif-item__actions" @click.stop>
<button v-if="isUnread" class="notif-item__btn" title="Marcar como lida" @click="handleMarkRead">
<i class="pi pi-check" />
@@ -212,142 +230,216 @@ function handleArchive(e) {
</template>
<style scoped>
/* Item-card: layout flat, mas com type-color como spine visual.
--type-rgb é injetado inline (vem do typeMap). color-mix() pinta
bg/border/icon usando a mesma cor — uma var, várias intensidades. */
.notif-item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.75rem 1rem;
border-left-width: 3px;
border-left-style: solid;
border-bottom: 1px solid var(--surface-border);
background: transparent;
position: relative;
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: start;
gap: 0.75rem;
padding: 0.75rem 0.85rem 0.75rem 0.95rem;
margin: 0.4rem 0.6rem;
background: var(--surface-card, #fff);
border: 1px solid var(--surface-border);
border-radius: 10px;
cursor: pointer;
transition: background 0.15s;
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
/* Spine colorida: 3px na esquerda da cor do tipo. Reforça pertencimento
sem usar background pesado. */
.notif-item::before {
content: '';
position: absolute;
left: 0;
top: 10%;
bottom: 10%;
width: 3px;
border-radius: 0 3px 3px 0;
background: rgb(var(--type-rgb));
opacity: 0.55;
transition: opacity 160ms ease, top 160ms ease, bottom 160ms ease;
}
.notif-item:hover {
background: var(--surface-hover);
transform: translateY(-1px);
box-shadow: 0 4px 14px color-mix(in srgb, rgb(var(--type-rgb)) 12%, transparent);
border-color: color-mix(in srgb, rgb(var(--type-rgb)) 40%, var(--surface-border));
background: var(--surface-card);
}
.notif-item:hover::before { opacity: 1; top: 0; bottom: 0; }
.notif-item:focus-visible {
outline: 2px solid color-mix(in srgb, rgb(var(--type-rgb)) 60%, transparent);
outline-offset: 2px;
}
/* Não-lida: bg sutil tinted da cor do tipo + título mais forte */
.notif-item--unread {
background: rgba(99, 102, 241, 0.05);
background: color-mix(in srgb, rgb(var(--type-rgb)) 6%, var(--surface-card, #fff));
border-color: color-mix(in srgb, rgb(var(--type-rgb)) 22%, var(--surface-border));
}
.notif-item--unread:hover {
background: rgba(99, 102, 241, 0.09);
background: color-mix(in srgb, rgb(var(--type-rgb)) 9%, var(--surface-card, #fff));
}
.notif-item__icon {
flex-shrink: 0;
display: flex;
align-items: center;
padding-top: 0.15rem;
font-size: 0.9rem;
color: var(--text-color-secondary);
}
.notif-item__avatar {
flex-shrink: 0;
width: 2rem;
height: 2rem;
/* Type avatar: círculo 40px com bg type-color 14% + ícone 100% */
.notif-item__type {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #38bdf8);
color: #fff;
font-size: 0.68rem;
background: color-mix(in srgb, rgb(var(--type-rgb)) 14%, transparent);
color: rgb(var(--type-rgb));
display: grid;
place-items: center;
flex-shrink: 0;
}
.notif-item__icon {
font-size: 1rem;
}
.notif-item__avatar {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
color: rgb(var(--type-rgb));
}
/* Pulse dot pra "não lida" — fica no canto sup-direito do avatar */
.notif-item__unread-dot {
position: absolute;
top: -1px;
right: -1px;
width: 9px;
height: 9px;
border-radius: 50%;
background: rgb(var(--type-rgb));
border: 2px solid var(--surface-card, #fff);
box-shadow: 0 0 0 0 color-mix(in srgb, rgb(var(--type-rgb)) 50%, transparent);
animation: notif-unread-pulse 2.2s ease-in-out infinite;
}
@keyframes notif-unread-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, rgb(var(--type-rgb)) 50%, transparent); }
50% { box-shadow: 0 0 0 5px color-mix(in srgb, rgb(var(--type-rgb)) 0%, transparent); }
}
/* Body */
.notif-item__body {
flex: 1;
min-width: 0;
}
.notif-item__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.15rem;
}
.notif-item__type-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgb(var(--type-rgb));
opacity: 0.85;
}
.notif-item__time {
font-size: 0.68rem;
color: var(--text-color-secondary);
opacity: 0.75;
white-space: nowrap;
flex-shrink: 0;
}
.notif-item__title {
font-weight: 600;
font-size: 0.85rem;
font-size: 0.86rem;
color: var(--text-color);
margin: 0 0 0.1rem;
white-space: nowrap;
margin: 0 0 0.15rem;
line-height: 1.3;
/* 2 linhas máx */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.notif-item--unread .notif-item__title { font-weight: 700; }
.notif-item__detail {
font-size: 0.78rem;
color: var(--text-color-secondary);
margin: 0 0 0.1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notif-item__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.2rem;
}
.notif-item__time {
font-size: 0.7rem;
color: var(--text-color-secondary);
opacity: 0.7;
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Quick actions: chips type-color */
.notif-item__quick {
display: flex;
gap: 0.3rem;
gap: 0.4rem;
flex-wrap: wrap;
margin-top: 0.55rem;
}
.notif-quick-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.15rem 0.55rem;
border: 1px solid var(--surface-border);
background: var(--surface-card);
color: var(--text-color-secondary);
gap: 0.3rem;
padding: 0.28rem 0.7rem;
border: 1px solid color-mix(in srgb, rgb(var(--type-rgb)) 28%, var(--surface-border));
background: color-mix(in srgb, rgb(var(--type-rgb)) 8%, transparent);
color: rgb(var(--type-rgb));
border-radius: 9999px;
font-size: 0.68rem;
font-size: 0.7rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.notif-quick-btn:hover {
background: var(--surface-hover);
color: var(--text-color);
border-color: var(--text-color-secondary);
background: color-mix(in srgb, rgb(var(--type-rgb)) 16%, transparent);
border-color: color-mix(in srgb, rgb(var(--type-rgb)) 50%, transparent);
transform: translateY(-1px);
}
.notif-quick-btn i {
font-size: 0.65rem;
.notif-quick-btn i { font-size: 0.7rem; }
.notif-quick-btn--primary {
background: rgb(var(--type-rgb));
color: #fff;
border-color: rgb(var(--type-rgb));
}
.notif-quick-btn--primary:hover {
background: color-mix(in srgb, rgb(var(--type-rgb)) 88%, #000 12%);
border-color: color-mix(in srgb, rgb(var(--type-rgb)) 88%, #000 12%);
color: #fff;
}
/* Ações secundárias (mark-read / archive): revelam no hover */
.notif-item__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.125rem;
gap: 0.25rem;
opacity: 0;
transition: opacity 0.15s;
transform: translateX(4px);
transition: opacity 160ms ease, transform 160ms ease;
}
.notif-item:hover .notif-item__actions {
.notif-item:hover .notif-item__actions,
.notif-item:focus-within .notif-item__actions {
opacity: 1;
transform: translateX(0);
}
.notif-item__btn {
width: 1.75rem;
height: 1.75rem;
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
border: none;
background: transparent;
border: 1px solid transparent;
background: var(--surface-100, var(--surface-hover, rgba(0,0,0,0.04)));
color: var(--text-color-secondary);
display: grid;
place-items: center;
cursor: pointer;
font-size: 0.75rem;
transition:
background 0.15s,
color 0.15s;
font-size: 0.7rem;
transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.notif-item__btn:hover {
background: var(--surface-border);
color: var(--text-color);
background: color-mix(in srgb, rgb(var(--type-rgb)) 12%, transparent);
color: rgb(var(--type-rgb));
border-color: color-mix(in srgb, rgb(var(--type-rgb)) 30%, transparent);
}
</style>