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/CadastroRapidoConvenio.vue
+2 -2
View File
@@ -181,9 +181,9 @@ function close () { emit('update:visible', false) }
class="dc-dialog w-[36rem]"
:breakpoints="{ '1199px': '90vw', '768px': '94vw' }"
:pt="{
header: { class: '!p-3 !rounded-t-[12px] border-b border-[var(--surface-border)] shadow-[0_1px_0_0_rgba(255,255,255,0.06)] bg-gray-100' },
header: { class: '!p-3 !rounded-t-[12px] border-b border-[var(--surface-border)] bg-[var(--surface-ground)]' },
content: { class: '!p-3' },
footer: { class: '!p-0 !rounded-b-[12px] border-t border-[var(--surface-border)] shadow-[0_1px_0_0_rgba(255,255,255,0.06)] bg-gray-100' },
footer: { class: '!p-0 !rounded-b-[12px] border-t border-[var(--surface-border)] bg-[var(--surface-ground)]' },
pcCloseButton: { root: { class: '!rounded-md hover:!text-red-500' } },
pcMaximizeButton: { root: { class: '!rounded-md hover:!text-primary' } },
}"
src/components/CadastroRapidoMedico.vue
+2 -2
View File
@@ -298,9 +298,9 @@ function close () {
class="dc-dialog w-[50rem]"
:breakpoints="{ '1199px': '90vw', '768px': '94vw' }"
:pt="{
header: { class: '!p-3 !rounded-t-[12px] border-b border-[var(--surface-border)] shadow-[0_1px_0_0_rgba(255,255,255,0.06)] bg-gray-100' },
header: { class: '!p-3 !rounded-t-[12px] border-b border-[var(--surface-border)] bg-[var(--surface-ground)]' },
content: { class: '!p-3' },
footer: { class: '!p-0 !rounded-b-[12px] border-t border-[var(--surface-border)] shadow-[0_1px_0_0_rgba(255,255,255,0.06)] bg-gray-100' },
footer: { class: '!p-0 !rounded-b-[12px] border-t border-[var(--surface-border)] bg-[var(--surface-ground)]' },
pcCloseButton: { root: { class: '!rounded-md hover:!text-red-500' } },
pcMaximizeButton: { root: { class: '!rounded-md hover:!text-primary' } },
}"
src/components/agenda/AgendaQuickAddDialog.vue
+2 -2
View File
@@ -193,9 +193,9 @@ function skipProcedures() {
class="dc-dialog w-[36rem]"
:breakpoints="{ '1199px': '90vw', '768px': '94vw' }"
:pt="{
header: { class: '!p-3 !rounded-t-[12px] border-b border-[var(--surface-border)] shadow-[0_1px_0_0_rgba(255,255,255,0.06)] bg-gray-100' },
header: { class: '!p-3 !rounded-t-[12px] border-b border-[var(--surface-border)] bg-[var(--surface-ground)]' },
content: { class: '!p-3' },
footer: { class: '!p-0 !rounded-b-[12px] border-t border-[var(--surface-border)] shadow-[0_1px_0_0_rgba(255,255,255,0.06)] bg-gray-100' },
footer: { class: '!p-0 !rounded-b-[12px] border-t border-[var(--surface-border)] bg-[var(--surface-ground)]' },
pcCloseButton: { root: { class: '!rounded-md hover:!text-red-500' } },
pcMaximizeButton: { root: { class: '!rounded-md hover:!text-primary' } }
}"
src/components/notifications/NotificationDrawer.vue
+295 -65
View File
@@ -18,6 +18,7 @@
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import { isToday, isYesterday, differenceInDays } from 'date-fns';
import {
useNotificationStore,
requestBrowserNotificationPermission,
@@ -69,6 +70,26 @@ const drawerOpen = computed({
const displayedItems = computed(() => (filter.value === 'unread' ? store.unreadItems : store.allItems));
// Agrupa por bucket temporal: Hoje / Ontem / Esta semana / Mais antigas.
// Mantém ordem original (já vem desc do store).
const groupedItems = computed(() => {
const buckets = { hoje: [], ontem: [], semana: [], antigas: [] };
const now = new Date();
for (const item of displayedItems.value) {
const d = new Date(item.created_at);
if (isToday(d)) buckets.hoje.push(item);
else if (isYesterday(d)) buckets.ontem.push(item);
else if (differenceInDays(now, d) <= 7) buckets.semana.push(item);
else buckets.antigas.push(item);
}
return [
{ key: 'hoje', label: 'Hoje', items: buckets.hoje },
{ key: 'ontem', label: 'Ontem', items: buckets.ontem },
{ key: 'semana', label: 'Esta semana', items: buckets.semana },
{ key: 'antigas', label: 'Mais antigas', items: buckets.antigas }
].filter((g) => g.items.length > 0);
});
function handleRead(id) {
store.markRead(id);
// Fecha o drawer e deixa a navegação acontecer
@@ -86,53 +107,109 @@ function goToHistory() {
</script>
<template>
<Drawer v-model:visible="drawerOpen" position="right" :style="{ width: '380px' }" :pt="{ header: { class: 'notification-drawer__header' } }">
<Drawer
v-model:visible="drawerOpen"
position="right"
:style="{ width: '420px' }"
:pt="{ header: { class: 'notification-drawer__header' } }"
>
<!-- Header -->
<template #header>
<div class="notification-drawer__header-content">
<span class="notification-drawer__title">Notificações</span>
<Badge v-if="store.unreadCount > 0" :value="store.unreadCount > 99 ? '99+' : store.unreadCount" severity="danger" />
<Button
:icon="browserNotifOn ? 'pi pi-bell' : 'pi pi-bell-slash'"
severity="secondary"
text
rounded
size="small"
class="ml-auto"
<div class="notification-drawer__title-wrap">
<span class="notification-drawer__title">Notificações</span>
<span v-if="store.unreadCount > 0" class="notification-drawer__count-pill">
{{ store.unreadCount > 99 ? '99+' : store.unreadCount }} não lida{{ store.unreadCount === 1 ? '' : 's' }}
</span>
</div>
<button
type="button"
class="notification-drawer__icon-btn"
:class="{ 'notification-drawer__icon-btn--active': browserNotifOn }"
:title="browserNotifOn ? 'Desativar notificações do browser' : 'Ativar notificações do browser'"
@click="toggleBrowserNotif"
/>
>
<i :class="['pi', browserNotifOn ? 'pi-bell' : 'pi-bell-slash']" />
</button>
</div>
</template>
<!-- Corpo -->
<div class="notification-drawer__body">
<!-- Ação em lote -->
<!-- Toolbar: tabs + mark-all -->
<div class="notification-drawer__toolbar">
<!-- Filtro tabs -->
<div class="notification-drawer__tabs">
<button class="notification-drawer__tab" :class="{ 'notification-drawer__tab--active': filter === 'unread' }" @click="filter = 'unread'">
<div class="notification-drawer__tabs" role="tablist">
<button
class="notification-drawer__tab"
:class="{ 'notification-drawer__tab--active': filter === 'unread' }"
role="tab"
:aria-selected="filter === 'unread'"
@click="filter = 'unread'"
>
Não lidas
<span v-if="store.unreadCount > 0" class="notification-drawer__tab-count">
{{ store.unreadCount }}
</span>
</button>
<button class="notification-drawer__tab" :class="{ 'notification-drawer__tab--active': filter === 'all' }" @click="filter = 'all'">Todas</button>
<button
class="notification-drawer__tab"
:class="{ 'notification-drawer__tab--active': filter === 'all' }"
role="tab"
:aria-selected="filter === 'all'"
@click="filter = 'all'"
>Todas</button>
</div>
<Button v-if="store.unreadCount > 0" link size="small" label="Marcar todas como lidas" @click="store.markAllRead()" class="notification-drawer__mark-all" />
<button
v-if="store.unreadCount > 0"
type="button"
class="notification-drawer__mark-all"
@click="store.markAllRead()"
>
<i class="pi pi-check-square" />
<span>Marcar todas</span>
</button>
</div>
<!-- Lista -->
<!-- Lista agrupada por data -->
<div v-if="displayedItems.length > 0" class="notification-drawer__list">
<NotificationItem v-for="item in displayedItems" :key="item.id" :item="item" @read="handleRead" @archive="handleArchive" />
<section
v-for="group in groupedItems"
:key="group.key"
class="notification-drawer__group"
>
<header class="notification-drawer__group-head">
<span class="notification-drawer__group-label">{{ group.label }}</span>
<span class="notification-drawer__group-line" />
<span class="notification-drawer__group-count">{{ group.items.length }}</span>
</header>
<NotificationItem
v-for="item in group.items"
:key="item.id"
:item="item"
@read="handleRead"
@archive="handleArchive"
/>
</section>
</div>
<!-- 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 por aqui 🎉</p>
<p class="notification-drawer__empty-sub">Nenhuma notificação{{ filter === 'unread' ? ' não lida' : '' }}.</p>
<div class="notification-drawer__empty-art" aria-hidden="true">
<i class="pi pi-check-circle" />
</div>
<p class="notification-drawer__empty-text">Tudo em dia por aqui</p>
<p class="notification-drawer__empty-sub">
{{ filter === 'unread' ? 'Nenhuma notificação não lida no momento.' : 'Nenhuma notificação ainda.' }}
</p>
<button
v-if="filter === 'unread' && store.allItems.length > 0"
type="button"
class="notification-drawer__empty-link"
@click="filter = 'all'"
>
Ver tudo
</button>
</div>
</div>
@@ -141,7 +218,8 @@ function goToHistory() {
<div class="notification-drawer__footer">
<button class="notification-drawer__history-link" @click="goToHistory">
<i class="pi pi-history" />
Ver histórico completo →
<span>Ver histórico completo</span>
<i class="pi pi-arrow-right notification-drawer__history-arrow" />
</button>
</div>
</template>
@@ -149,59 +227,113 @@ function goToHistory() {
</template>
<style scoped>
/* ─── Header ─────────────────────────────────────────────────── */
.notification-drawer__header-content {
display: flex;
align-items: center;
gap: 0.5rem;
gap: 0.6rem;
width: 100%;
}
.notification-drawer__title-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
flex: 1;
min-width: 0;
}
.notification-drawer__title {
font-size: 1rem;
font-weight: 600;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-color);
line-height: 1.2;
}
.notification-drawer__count-pill {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: 9999px;
background: color-mix(in srgb, var(--primary-color) 12%, transparent);
color: var(--primary-color);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.notification-drawer__icon-btn {
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 1px solid var(--surface-border);
background: var(--surface-card, transparent);
color: var(--text-color-secondary);
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
font-size: 0.78rem;
transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.notification-drawer__icon-btn:hover {
background: var(--surface-hover);
color: var(--text-color);
}
.notification-drawer__icon-btn--active {
background: color-mix(in srgb, var(--primary-color) 14%, transparent);
color: var(--primary-color);
border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
}
/* ─── Body ───────────────────────────────────────────────────── */
.notification-drawer__body {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: color-mix(in srgb, var(--surface-ground, #f8fafc) 60%, var(--surface-card, #fff));
}
/* ─── Toolbar (tabs + mark-all) ───────────────────────────────── */
.notification-drawer__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
padding: 0.65rem 0.85rem;
border-bottom: 1px solid var(--surface-border);
flex-shrink: 0;
gap: 0.5rem;
flex-wrap: wrap;
background: var(--surface-card);
position: sticky;
top: 0;
z-index: 1;
}
.notification-drawer__tabs {
display: flex;
gap: 0.25rem;
display: inline-flex;
padding: 3px;
gap: 2px;
background: var(--surface-100, color-mix(in srgb, var(--text-color) 6%, transparent));
border-radius: 9999px;
}
.notification-drawer__tab {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--surface-border);
gap: 0.4rem;
padding: 0.3rem 0.85rem;
border-radius: 9999px;
border: 0;
background: transparent;
color: var(--text-color-secondary);
font-size: 0.8rem;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s,
color 0.15s;
transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.notification-drawer__tab:hover { color: var(--text-color); }
.notification-drawer__tab--active {
background: var(--primary-color);
color: var(--primary-color-text);
border-color: var(--primary-color);
background: var(--surface-card, #fff);
color: var(--primary-color);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.notification-drawer__tab-count {
display: inline-flex;
@@ -209,71 +341,169 @@ function goToHistory() {
justify-content: center;
min-width: 1.1rem;
height: 1.1rem;
padding: 0 0.25rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.25);
font-size: 0.7rem;
padding: 0 0.3rem;
border-radius: 9999px;
background: color-mix(in srgb, var(--primary-color) 16%, transparent);
color: var(--primary-color);
font-size: 0.65rem;
font-weight: 700;
}
.notification-drawer__tab--active .notification-drawer__tab-count {
background: color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.notification-drawer__mark-all {
white-space: nowrap;
font-size: 0.78rem !important;
padding: 0 !important;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.32rem 0.7rem;
border: 0;
border-radius: 9999px;
background: transparent;
color: var(--text-color-secondary);
font-size: 0.74rem;
font-weight: 600;
cursor: pointer;
transition: background-color 140ms ease, color 140ms ease;
}
.notification-drawer__mark-all:hover {
background: color-mix(in srgb, var(--primary-color) 10%, transparent);
color: var(--primary-color);
}
.notification-drawer__mark-all i { font-size: 0.78rem; }
/* ─── Lista + grupos por data ─────────────────────────────────── */
.notification-drawer__list {
flex: 1;
overflow-y: auto;
padding-bottom: 0.5rem;
scrollbar-width: thin;
scrollbar-color: var(--surface-300, #cbd5e1) transparent;
}
.notification-drawer__list::-webkit-scrollbar { width: 6px; }
.notification-drawer__list::-webkit-scrollbar-thumb {
background: var(--surface-300, #cbd5e1);
border-radius: 9999px;
}
.notification-drawer__group {
/* o NotificationItem já tem margin lateral */
padding-top: 0.4rem;
}
.notification-drawer__group-head {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1rem 0.35rem;
}
.notification-drawer__group-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-color-secondary);
opacity: 0.85;
flex-shrink: 0;
}
.notification-drawer__group-line {
flex: 1;
height: 1px;
background: var(--surface-border);
}
.notification-drawer__group-count {
font-size: 0.65rem;
font-weight: 700;
color: var(--text-color-secondary);
opacity: 0.6;
padding: 1px 7px;
border-radius: 9999px;
background: color-mix(in srgb, var(--text-color) 6%, transparent);
}
/* ─── Empty state ─────────────────────────────────────────────── */
.notification-drawer__empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 3rem 1rem;
gap: 0.6rem;
padding: 3rem 1.5rem;
text-align: center;
}
.notification-drawer__empty-icon {
font-size: 2.5rem;
color: var(--text-color-secondary);
opacity: 0.4;
.notification-drawer__empty-art {
width: 72px;
height: 72px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color) 10%, transparent);
color: var(--primary-color);
display: grid;
place-items: center;
margin-bottom: 0.4rem;
}
.notification-drawer__empty-art i { font-size: 1.8rem; }
.notification-drawer__empty-text {
font-size: 1rem;
font-weight: 600;
font-weight: 700;
color: var(--text-color);
margin: 0;
letter-spacing: -0.01em;
}
.notification-drawer__empty-sub {
font-size: 0.82rem;
color: var(--text-color-secondary);
margin: 0;
line-height: 1.4;
}
.notification-drawer__empty-link {
margin-top: 0.6rem;
background: transparent;
border: 0;
color: var(--primary-color);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
padding: 0.3rem 0.8rem;
border-radius: 9999px;
transition: background-color 140ms ease;
}
.notification-drawer__empty-link:hover {
background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
/* ─── Footer ──────────────────────────────────────────────────── */
.notification-drawer__footer {
display: flex;
justify-content: center;
padding: 0.75rem 1rem;
border-top: 1px solid var(--surface-border);
background: var(--surface-card);
flex-shrink: 0;
}
.notification-drawer__history-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
gap: 0.5rem;
background: transparent;
border: none;
color: var(--primary-color);
font-size: 0.85rem;
border: 1px solid var(--surface-border);
color: var(--text-color-secondary);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
padding: 0;
transition: opacity 0.15s;
padding: 0.45rem 0.95rem;
border-radius: 9999px;
transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.notification-drawer__history-link:hover {
opacity: 0.75;
text-decoration: underline;
background: color-mix(in srgb, var(--primary-color) 10%, transparent);
color: var(--primary-color);
border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}
.notification-drawer__history-arrow {
font-size: 0.7rem;
transition: transform 140ms ease;
}
.notification-drawer__history-link:hover .notification-drawer__history-arrow {
transform: translateX(2px);
}
</style>
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>
src/components/ui/ContactEmailsEditor.vue
+13 -10
View File
@@ -126,18 +126,22 @@ watch(() => props.entityId, async (v) => {
if (v) await api.loadEmails(props.entityType, v);
else api.emails.value = [];
});
// Re-emite `change` sempre que a lista mudar (load, add, edit, remove,
// setPrimary). Permite que o parent trackee count e faça validação de
// "pelo menos 1 email obrigatório". immediate:true garante emit no load.
watch(api.emails, (arr) => emit('change', arr), { deep: true, immediate: true });
// Exposto pro parent — flush em lote dos emails pendentes (modo "novo
// paciente" antes do save). Ver doc no useContactEmails.flushPending.
async function flushPending(entityType, entityId) {
return api.flushPending(entityType, entityId);
}
defineExpose({ flushPending });
</script>
<template>
<div class="flex flex-col gap-2">
<div class="text-[0.7rem] text-[var(--text-color-secondary)] flex items-start gap-1.5 px-1">
<i class="pi pi-info-circle text-sky-500 mt-0.5 shrink-0" />
<span>
Marque um email como <strong>principal</strong> — ele é usado pra
<strong>envio de faturas, templates e notificações por email</strong>.
</span>
</div>
<div v-if="api.loading.value" class="text-xs text-center py-3 text-[var(--text-color-secondary)]">
<i class="pi pi-spin pi-spinner mr-1" /> Carregando…
</div>
@@ -232,6 +236,7 @@ watch(() => props.entityId, async (v) => {
</div>
</div>
<!-- Botão + (sempre habilitado: sem entityId vai pro modo pendente) -->
<Button
v-if="!readonly && !showAddForm"
label="Adicionar email"
@@ -240,8 +245,6 @@ watch(() => props.entityId, async (v) => {
outlined
size="small"
class="self-start rounded-full"
:disabled="!props.entityId"
v-tooltip.right="!props.entityId ? 'Salve o cadastro primeiro pra adicionar emails' : null"
@click="openAddForm"
/>
</div>
src/components/ui/ContactPhonesEditor.vue
+15 -13
View File
@@ -153,20 +153,24 @@ watch(() => props.entityId, async (v) => {
if (v) await api.loadPhones(props.entityType, v);
else api.phones.value = [];
});
// Re-emite `change` sempre que a lista mudar (load, add, edit, remove,
// setPrimary). Permite que o parent trackee count e faça validação de
// "pelo menos 1 telefone obrigatório" sem precisar inspeccionar o
// componente. immediate:true garante emit no load inicial.
watch(api.phones, (arr) => emit('change', arr), { deep: true, immediate: true });
// Exposto pro parent — usado pelo PatientsCadastroPage no fluxo de criação:
// telefones inseridos antes de salvar o paciente ficam em modo pendente
// (id: 'pending_*') e são gravados em lote depois que o paciente recebe id.
async function flushPending(entityType, entityId) {
return api.flushPending(entityType, entityId);
}
defineExpose({ flushPending });
</script>
<template>
<div class="flex flex-col gap-2">
<!-- Aviso sobre telefone principal -->
<div class="text-[0.7rem] text-[var(--text-color-secondary)] flex items-start gap-1.5 px-1">
<i class="pi pi-info-circle text-sky-500 mt-0.5 shrink-0" />
<span>
Marque um telefone como <strong>principal</strong> — ele é usado pra
<strong>cobranças, lembretes automáticos e contato padrão</strong>.
Número vindo do CRM WhatsApp recebe a etiqueta <strong>"vinculado"</strong>.
</span>
</div>
<!-- Lista de telefones -->
<div v-if="api.loading.value" class="text-xs text-center py-3 text-[var(--text-color-secondary)]">
<i class="pi pi-spin pi-spinner mr-1" /> Carregando…
@@ -325,7 +329,7 @@ watch(() => props.entityId, async (v) => {
</div>
</div>
<!-- Botão + -->
<!-- Botão + (sempre habilitado: sem entityId vai pro modo pendente) -->
<Button
v-if="!readonly && !showAddForm"
label="Adicionar telefone"
@@ -334,8 +338,6 @@ watch(() => props.entityId, async (v) => {
outlined
size="small"
class="self-start rounded-full"
:disabled="!props.entityId"
v-tooltip.right="!props.entityId ? 'Salve o cadastro primeiro pra adicionar telefones' : null"
@click="openAddForm"
/>
</div>
src/components/ui/PatientCadastroDialog.vue
+5 -1
View File
@@ -89,7 +89,11 @@ async function onCreated(data) {
:closable="false"
:dismissableMask="false"
:maximizable="false"
:style="{ width: '90vw', maxWidth: '1100px', height: maximized ? '100vh' : '90vh' }"
:style="{
width: maximized ? '100vw' : '90vw',
maxWidth: maximized ? 'none' : '1100px',
height: maximized ? '100vh' : '90vh'
}"
:contentStyle="{ padding: 0, overflow: 'auto', height: '100%' }"
pt:mask:class="backdrop-blur-xs"
>