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

+ Menu Hover no Layout Rail, Twilio, Sms, Email, Templates, LNovo Layout Configurações

Browse Source
This commit is contained in:
Leonardo
2026-03-25 08:39:45 -03:00
parent 53a4980396
commit 3f1786c9bf
59 changed files with 2553 additions and 1106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/configuracoes/BloqueiosPage.vue
-62
View File
@@ -302,21 +302,6 @@ const loading = computed(() => loadingF.value || loadingB.value);
<ConfirmDialog />
<div class="flex flex-col gap-3">
<!-- Subheader degradê -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-ban" /></div>
<div class="min-w-0 flex-1">
<div class="cfg-subheader__title">Bloqueios</div>
<div class="cfg-subheader__sub">Feriados e períodos em que não é possível agendar com pacientes</div>
</div>
<!-- Nav de ano -->
<div class="flex items-center gap-1 shrink-0 relative z-10">
<Button icon="pi pi-chevron-left" text rounded size="small" severity="secondary" @click="anoAnterior" />
<span class="font-bold text-sm w-12 text-center text-[var(--primary-color)]">{{ ano }}</span>
<Button icon="pi pi-chevron-right" text rounded size="small" severity="secondary" @click="anoProximo" />
</div>
</div>
<!-- Stats + ações -->
<div class="flex flex-wrap items-center gap-2">
<div class="blk-stat blk-stat--blue">
@@ -524,53 +509,6 @@ const loading = computed(() => loadingF.value || loadingB.value);
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
color: var(--primary-color, #6366f1);
letter-spacing: -0.01em;
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
/* ── Stats ────────────────────────────────────────── */
.blk-stat {
display: flex;
src/layout/configuracoes/ConfiguracoesAgendaPage.vue
-9
View File
@@ -939,15 +939,6 @@ const jornadaEndDate = computed({
<div v-if="!loading" class="flex flex-col xl:flex-row gap-4">
<!-- ══ COLUNA ESQUERDA: CARDS ══════════════════════════════ -->
<div class="anim-child [--delay:0ms] flex flex-col gap-3 xl:w-[58%]">
<!-- Subheader -->
<div class="cfg-subheader">
<i class="pi pi-calendar w-10 h-10 rounded-md cfg-subheader__icon" />
<div class="min-w-0">
<div class="cfg-subheader__title">Agenda</div>
<div class="cfg-subheader__sub">Horários semanais, duração e intervalo padrão</div>
</div>
</div>
<!-- ── CARD 1: JORNADA ─────────────────────────────────── -->
<div class="cfg-card" :class="{ 'cfg-card--open': expandedCard === 'jornada' }">
<!-- Cabeçalho clicável -->
src/layout/configuracoes/ConfiguracoesAgendadorPage.vue
-65
View File
@@ -550,15 +550,6 @@ onMounted(load);
</template>
<template v-else>
<!-- Subheader (fora das colunas — ocupa a largura toda) -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-calendar-clock" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Agendador Online</div>
<div class="cfg-subheader__sub">Personalize a aparência, fluxo e comportamento do seu agendador público</div>
</div>
</div>
<!-- ── 2 COLUNAS: seções (esq) + preview (dir) ───────────── -->
<div class="flex flex-col xl:flex-row gap-4 items-start">
<!-- Coluna esquerda: todos os cards -->
@@ -1134,62 +1125,6 @@ onMounted(load);
background: color-mix(in srgb, var(--primary-color, #6366f1) 5%, transparent);
}
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 1rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card status (sem accordion) ─────────────────── */
.agd-card {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesConveniosPage.vue
-78
View File
@@ -248,28 +248,6 @@ onMounted(async () => {
<template>
<div class="flex flex-col gap-3">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-id-card" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Convênios</div>
<div class="cfg-subheader__sub">Convênios e planos de saúde que você atende</div>
</div>
<div class="cfg-subheader__actions">
<Button
label="Novo convênio"
icon="pi pi-plus"
size="small"
:disabled="pageLoading || addingNew"
class="rounded-full"
@click="
addingNew = true;
cancelEdit();
"
/>
</div>
</div>
<!-- ══ SKELETON ══════════════════════════════════════════════ -->
<template v-if="pageLoading || loading">
<div class="cfg-wrap">
@@ -474,62 +452,6 @@ onMounted(async () => {
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesDescontosPage.vue
-78
View File
@@ -190,28 +190,6 @@ onMounted(async () => {
<template>
<div class="flex flex-col gap-3">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-percentage" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Descontos por Paciente</div>
<div class="cfg-subheader__sub">Descontos recorrentes aplicados automaticamente por paciente</div>
</div>
<div class="cfg-subheader__actions">
<Button
label="Novo desconto"
icon="pi pi-plus"
size="small"
:disabled="pageLoading || addingNew"
class="rounded-full"
@click="
addingNew = true;
cancelEdit();
"
/>
</div>
</div>
<!-- ══ SKELETON ══════════════════════════════════════════════ -->
<template v-if="pageLoading || loading">
<div class="cfg-wrap">
@@ -396,62 +374,6 @@ onMounted(async () => {
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesEmailTemplatesPage.vue
-67
View File
@@ -323,18 +323,6 @@ onMounted(async () => {
<template>
<div class="flex flex-col gap-4">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-envelope" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Templates de E-mail</div>
<div class="cfg-subheader__sub">Personalize os e-mails enviados aos seus pacientes</div>
</div>
<div class="cfg-subheader__actions">
<Button label="Personalizar +" icon="pi pi-palette" size="small" class="rounded-full" @click="openLayoutDlg" />
</div>
</div>
<!-- Filtro -->
<div class="flex gap-2 flex-wrap">
<Button v-for="opt in DOMAIN_OPTIONS" :key="String(opt.value)" :label="opt.label" size="small" :severity="filterDomain === opt.value ? 'primary' : 'secondary'" :outlined="filterDomain !== opt.value" @click="filterDomain = opt.value" />
@@ -711,61 +699,6 @@ onMounted(async () => {
</template>
<style scoped>
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Layout cards ───────────────────────────────────────── */
.layout-card {
flex: 1;
src/layout/configuracoes/ConfiguracoesExcecoesFinanceirasPage.vue
-65
View File
@@ -162,15 +162,6 @@ onMounted(async () => {
<template>
<div class="flex flex-col gap-3">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-exclamation-triangle" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Exceções Financeiras</div>
<div class="cfg-subheader__sub">Defina o que cobrar em cancelamentos, faltas e situações excepcionais</div>
</div>
</div>
<!-- ══ SKELETON ══════════════════════════════════════════════ -->
<template v-if="pageLoading || loading">
<div v-for="n in 3" :key="n" class="cfg-wrap">
@@ -267,62 +258,6 @@ onMounted(async () => {
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesMinhaEmpresaPage.vue
-69
View File
@@ -298,19 +298,6 @@ onMounted(load);
<template>
<ConfirmDialog />
<div class="flex flex-col gap-4">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-building" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Minha Empresa</div>
<div class="cfg-subheader__sub">Dados da empresa, logomarca e presença digital</div>
</div>
<div class="cfg-subheader__actions">
<Button label="Exemplo" icon="pi pi-magic-wand" size="small" severity="secondary" outlined class="rounded-full" @click="preencherExemplo" />
<Button label="Salvar" icon="pi pi-check" size="small" class="rounded-full" :loading="saving" @click="save" />
</div>
</div>
<!-- ══ SKELETON ══════════════════════════════════════════════ -->
<template v-if="loading">
<div class="flex gap-4 items-start">
@@ -581,62 +568,6 @@ onMounted(load);
</template>
<style scoped>
/* ── Subheader ─────────────────────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Layout colunas ────────────────────────────────────────── */
.preview-col {
width: 40%;
src/layout/configuracoes/ConfiguracoesPagamentoPage.vue
-69
View File
@@ -217,19 +217,6 @@ onMounted(load);
</template>
<div v-else class="flex flex-col gap-4">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-wallet" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Pagamento</div>
<div class="cfg-subheader__sub">Formas de pagamento aceitas: Pix, depósito, dinheiro, cartão e convênio</div>
</div>
<div class="cfg-subheader__actions">
<Button size="small" icon="pi pi-arrows-v" label="Expandir" severity="secondary" outlined class="rounded-full" @click="expandAll" />
<Button size="small" icon="pi pi-minus" label="Contrair" severity="secondary" outlined class="rounded-full" @click="collapseAll" />
</div>
</div>
<!-- Pix ──────────────────────────────────────────────────── -->
<div class="rounded-[6px] border bg-[var(--surface-card)] overflow-hidden" :class="cfg.pix_ativo ? 'border-green-300' : 'border-[var(--surface-border)]'">
<!-- Header -->
@@ -493,62 +480,6 @@ onMounted(load);
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesPrecificacaoPage.vue
-78
View File
@@ -158,28 +158,6 @@ onMounted(async () => {
<template>
<div class="flex flex-col gap-3">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-tag" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">Precificação</div>
<div class="cfg-subheader__sub">Valor padrão da sessão e preços por tipo de compromisso</div>
</div>
<div class="cfg-subheader__actions">
<Button
label="Novo serviço"
icon="pi pi-plus"
size="small"
:disabled="pageLoading || addingNew"
class="rounded-full"
@click="
addingNew = true;
cancelEdit();
"
/>
</div>
</div>
<!-- ══ SKELETON ══════════════════════════════════════════════ -->
<template v-if="pageLoading || loading">
<div class="cfg-wrap">
@@ -336,62 +314,6 @@ onMounted(async () => {
</template>
<style scoped>
/* ── Subheader degradê ────────────────────────────── */
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ── Card wrap ────────────────────────────────────── */
.cfg-wrap {
border: 1px solid var(--surface-border);
src/layout/configuracoes/ConfiguracoesTwilioWhatsappPage.vue
+460
View File
@@ -0,0 +1,460 @@
<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Arquivo: src/layout/configuracoes/ConfiguracoesTwilioWhatsappPage.vue
| Data: 2026
|--------------------------------------------------------------------------
| Painel self-service — WhatsApp via Twilio para o tenant.
| A clínica/terapeuta ativa, testa e monitora seu WhatsApp sem suporte.
|
| Estados:
| not_provisioned — nunca foi ativado → botão "Ativar WhatsApp"
| connected — ativo e funcionando
| suspended — suspenso pelo admin SaaS
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { useTwilioWhatsappStore } from '@/stores/twilioWhatsappStore';
import { useTenantStore } from '@/stores/tenantStore';
const toast = useToast();
const confirm = useConfirm();
const store = useTwilioWhatsappStore();
const tenant = useTenantStore();
// ── Computed ───────────────────────────────────────────────────────────────
const tenantId = computed(() => tenant.tenantId);
const statusConfig = computed(() => {
switch (store.myChannelStatus) {
case 'not_provisioned':
return {
icon: 'pi-whatsapp',
color: 'text-gray-400',
bg: 'bg-gray-100',
label: 'WhatsApp não ativado',
sub: 'Ative para enviar lembretes automáticos aos seus pacientes.',
severity: 'secondary',
};
case 'connected':
return {
icon: 'pi-check-circle',
color: 'text-green-600',
bg: 'bg-green-50',
label: 'WhatsApp ativo',
sub: `Enviando de ${store.myChannel?.twilio_phone_number ?? '—'}`,
severity: 'success',
};
case 'suspended':
return {
icon: 'pi-pause-circle',
color: 'text-orange-500',
bg: 'bg-orange-50',
label: 'WhatsApp suspenso',
sub: 'Sua conta está temporariamente suspensa. Entre em contato com o suporte.',
severity: 'warn',
};
default:
return {
icon: 'pi-exclamation-circle',
color: 'text-red-500',
bg: 'bg-red-50',
label: 'Erro de conexão',
sub: 'Verifique as configurações ou entre em contato com o suporte.',
severity: 'danger',
};
}
});
// ── Ativação ───────────────────────────────────────────────────────────────
const activateDialog = ref(false);
const activateForm = ref({ display_name: '' });
function openActivateDialog() {
activateForm.value.display_name = '';
activateDialog.value = true;
}
async function doActivate() {
try {
const result = await store.provisionMyChannel(tenantId.value, {
display_name: activateForm.value.display_name || undefined,
});
toast.add({
severity: 'success',
summary: 'WhatsApp ativado!',
detail: result.message,
life: 6000,
});
activateDialog.value = false;
} catch (e) {
toast.add({ severity: 'error', summary: 'Erro ao ativar', detail: e.message, life: 6000 });
}
}
// ── Teste de envio ─────────────────────────────────────────────────────────
const testToNumber = ref('');
const testMessage = ref('Olá! Esta é uma mensagem de teste do AgenciaPsi. ✓');
async function doTest() {
if (!testToNumber.value) {
toast.add({ severity: 'warn', summary: 'Informe o número', life: 3000 });
return;
}
if (!store.myChannel?.id) return;
try {
const result = await store.testSendMessage(store.myChannel.id, testToNumber.value, testMessage.value);
toast.add({
severity: 'success',
summary: 'Mensagem enviada!',
detail: `SID: ${result.message_sid} — Status: ${result.status}`,
life: 5000,
});
} catch (e) {
toast.add({ severity: 'error', summary: 'Erro no envio', detail: e.message, life: 5000 });
}
}
// ── Logs ───────────────────────────────────────────────────────────────────
async function loadLogs() {
if (!tenantId.value) return;
try {
await store.loadMyLogs(tenantId.value);
} catch (e) {
toast.add({ severity: 'error', summary: 'Erro ao carregar histórico', detail: e.message, life: 4000 });
}
}
// ── Helpers ────────────────────────────────────────────────────────────────
function logStatusTag(status) {
switch (status) {
case 'sent': return { label: 'Enviado', severity: 'info' };
case 'delivered': return { label: 'Entregue', severity: 'success' };
case 'read': return { label: 'Lido', severity: 'success' };
case 'failed': return { label: 'Falhou', severity: 'danger' };
case 'bounced': return { label: 'Bounced', severity: 'danger' };
default: return { label: status, severity: 'secondary' };
}
}
function fmtDateTime(dt) {
if (!dt) return '—';
const d = new Date(dt);
return d.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' })
+ ' ' + d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
}
function fmtPhone(p) {
if (!p) return '—';
return p.replace('whatsapp:', '');
}
// ── Tabs ───────────────────────────────────────────────────────────────────
const activeTab = ref(0);
function onTabChange(val) {
activeTab.value = val;
if (val === 1 && !store.messageLogs.length) loadLogs();
}
// ── Init ───────────────────────────────────────────────────────────────────
onMounted(async () => {
if (tenantId.value) {
await store.loadMyChannel(tenantId.value);
}
});
</script>
<template>
<div class="flex flex-col gap-4 p-4">
<!-- Loading inicial ───────────────────────────────────────────── -->
<div v-if="store.loadingMyChannel" class="flex justify-center py-12">
<ProgressSpinner style="width: 40px; height: 40px" />
</div>
<template v-else>
<!-- Card de status ─────────────────────────────────────────── -->
<div class="status-card" :class="`status-card--${statusConfig.severity}`">
<div class="flex items-start gap-4 flex-wrap">
<div :class="['status-icon', statusConfig.bg, statusConfig.color]">
<i :class="`pi ${statusConfig.icon} text-xl`" />
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 flex-wrap">
<h3 class="status-title">{{ statusConfig.label }}</h3>
<Tag :value="statusConfig.label" :severity="statusConfig.severity" class="text-xs" />
</div>
<p class="status-sub">{{ statusConfig.sub }}</p>
</div>
<!-- Ação principal -->
<div class="flex gap-2 items-center">
<!-- Não provisionado: botão ativar -->
<Button
v-if="store.myChannelStatus === 'not_provisioned'"
label="Ativar WhatsApp"
icon="pi pi-whatsapp"
:loading="store.provisioning"
@click="openActivateDialog"
/>
<!-- Ativo: mostrar número -->
<template v-if="store.myChannelStatus === 'connected'">
<div class="flex flex-col items-end gap-1">
<div class="flex items-center gap-2">
<i class="pi pi-phone text-green-600 text-sm" />
<span class="font-mono font-bold text-sm">{{ store.myChannel?.twilio_phone_number }}</span>
</div>
<span class="text-xs text-(--text-color-secondary)">Seu número WhatsApp exclusivo</span>
</div>
</template>
<!-- Suspenso: contatar suporte -->
<Button
v-if="store.myChannelStatus === 'suspended'"
label="Contatar suporte"
icon="pi pi-envelope"
severity="secondary"
outlined
tag="a"
href="mailto:suporte@agenciapsi.com.br"
/>
</div>
</div>
</div>
<!-- Tabs (só aparecem quando provisionado) ──────────────────── -->
<template v-if="store.myChannelStatus !== 'not_provisioned'">
<Tabs :value="activeTab" @update:value="onTabChange">
<TabList>
<Tab :value="0"><i class="pi pi-cog mr-2" />Configurações</Tab>
<Tab :value="1"><i class="pi pi-list mr-2" />Histórico</Tab>
</TabList>
<TabPanels>
<!-- ══ ABA 1 — Configurações ══════════════════════ -->
<TabPanel :value="0">
<div class="flex flex-col gap-4 pt-3">
<!-- Informações do canal ──────────────────── -->
<div class="info-card">
<div class="info-card__header">
<i class="pi pi-info-circle opacity-60 text-sm" />
<span class="text-sm font-semibold">Informações da conta</span>
</div>
<div class="info-card__body">
<div class="info-row">
<span class="info-label">Número WhatsApp</span>
<span class="font-mono font-bold">{{ store.myChannel?.twilio_phone_number ?? '—' }}</span>
</div>
<div class="info-row">
<span class="info-label">Provedor</span>
<span>Twilio WhatsApp Business</span>
</div>
<div class="info-row">
<span class="info-label">Subconta ID</span>
<span class="font-mono text-xs text-(--text-color-secondary)">
{{ store.myChannel?.twilio_subaccount_sid?.slice(0, 20) ?? '—' }}…
</span>
</div>
<div class="info-row">
<span class="info-label">Ativado em</span>
<span>{{ fmtDateTime(store.myChannel?.provisioned_at) }}</span>
</div>
<div class="info-row">
<span class="info-label">Preço por mensagem</span>
<span class="font-semibold">
{{ new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(store.myChannel?.price_per_message_brl ?? 0) }}
</span>
</div>
</div>
</div>
<!-- Envio de teste ────────────────────────── -->
<div v-if="store.myChannelStatus === 'connected'" class="info-card">
<div class="info-card__header">
<i class="pi pi-send opacity-60 text-sm" />
<span class="text-sm font-semibold">Envio de teste</span>
</div>
<div class="info-card__body">
<p class="text-sm text-(--text-color-secondary) m-0 mb-3">
Envie uma mensagem de teste para confirmar que seu WhatsApp está funcionando.
</p>
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-1.5">
<label class="field-label">Número destino (E.164)</label>
<InputText v-model="testToNumber" placeholder="+5511999990000" class="w-full max-w-xs" />
</div>
<div class="flex flex-col gap-1.5">
<label class="field-label">Mensagem</label>
<Textarea v-model="testMessage" rows="2" class="w-full max-w-lg" auto-resize />
</div>
<div>
<Button
label="Enviar teste"
icon="pi pi-send"
size="small"
:loading="store.testingSend"
:disabled="!testToNumber || store.testingSend"
@click="doTest"
/>
</div>
</div>
</div>
</div>
<!-- Informações de uso ────────────────────── -->
<Message severity="info" :closable="false">
<template #messageicon><i class="pi pi-whatsapp" /></template>
<div class="text-sm">
<strong>Como funciona:</strong> Seu número WhatsApp Business exclusivo é usado para enviar
lembretes de sessão, confirmações e outras notificações automáticas aos seus pacientes.
Os envios são cobrados por mensagem conforme seu plano.
</div>
</Message>
</div>
</TabPanel>
<!-- ══ ABA 2 — Histórico ═══════════════════════════ -->
<TabPanel :value="1">
<div class="flex flex-col gap-3 pt-3">
<div class="flex items-center gap-2">
<span class="text-sm text-(--text-color-secondary)">
Últimas {{ store.messageLogs.length }} mensagens
</span>
<Button icon="pi pi-refresh" size="small" severity="secondary" outlined :loading="store.loadingLogs" class="ml-auto" @click="loadLogs" />
</div>
<DataTable :value="store.messageLogs" :loading="store.loadingLogs" striped-rows responsive-layout="scroll" class="text-sm">
<Column header="Destinatário" style="min-width: 140px">
<template #body="{ data }">
<span class="font-mono text-sm">{{ fmtPhone(data.recipient_address) }}</span>
</template>
</Column>
<Column header="Status" style="min-width: 100px">
<template #body="{ data }">
<Tag :value="logStatusTag(data.status).label" :severity="logStatusTag(data.status).severity" class="text-[0.7rem]" />
</template>
</Column>
<Column header="Enviado em" style="min-width: 140px">
<template #body="{ data }">
<span class="text-xs">{{ fmtDateTime(data.sent_at || data.created_at) }}</span>
</template>
</Column>
<Column header="Entregue" style="min-width: 140px">
<template #body="{ data }">
<span class="text-xs">{{ fmtDateTime(data.delivered_at) }}</span>
</template>
</Column>
<Column header="Motivo de falha" style="min-width: 180px">
<template #body="{ data }">
<span v-if="data.failure_reason" class="text-xs text-red-500">{{ data.failure_reason }}</span>
<span v-else class="text-xs text-(--text-color-secondary)">—</span>
</template>
</Column>
<template #empty>
<div class="text-center py-8 text-sm text-(--text-color-secondary)">
Nenhuma mensagem enviada ainda.
</div>
</template>
</DataTable>
</div>
</TabPanel>
</TabPanels>
</Tabs>
</template>
</template>
<!-- Dialog: Ativar WhatsApp ──────────────────────────────────── -->
<Dialog
v-model:visible="activateDialog"
header="Ativar WhatsApp"
modal
:style="{ width: '440px', maxWidth: '96vw' }"
:draggable="false"
>
<div class="flex flex-col gap-4 py-2">
<Message severity="success" :closable="false">
<template #messageicon><i class="pi pi-whatsapp" /></template>
<div class="text-sm">
Você receberá um <strong>número WhatsApp exclusivo</strong> para sua clínica.
Suas mensagens automáticas aos pacientes serão enviadas por este número.
</div>
</Message>
<div class="field-group">
<label class="field-label">Nome de exibição (opcional)</label>
<InputText
v-model="activateForm.display_name"
placeholder="Ex: Clínica Bem Estar"
class="w-full"
/>
<small class="text-(--text-color-secondary)">Identificação interna do seu canal.</small>
</div>
<div class="border border-(--surface-border) rounded-lg p-3 bg-(--surface-ground)">
<div class="text-xs font-semibold mb-2">O que está incluído:</div>
<ul class="text-sm text-(--text-color-secondary) flex flex-col gap-1 m-0 pl-4">
<li>Número WhatsApp Business exclusivo</li>
<li>Envio de lembretes de sessão automáticos</li>
<li>Confirmações e cancelamentos por WhatsApp</li>
<li>Histórico completo de mensagens</li>
</ul>
</div>
</div>
<template #footer>
<Button label="Cancelar" text @click="activateDialog = false" />
<Button
label="Ativar agora"
icon="pi pi-check"
:loading="store.provisioning"
:disabled="store.provisioning"
@click="doActivate"
/>
</template>
</Dialog>
<Toast />
<ConfirmDialog />
</div>
</template>
<style scoped>
.status-card {
padding: 1.25rem; border-radius: 8px;
border: 1px solid var(--surface-border);
background: var(--surface-card);
}
.status-card--success { border-color: color-mix(in srgb, #22c55e 30%, transparent); }
.status-card--warn { border-color: color-mix(in srgb, #f59e0b 30%, transparent); }
.status-card--danger { border-color: color-mix(in srgb, #ef4444 30%, transparent); }
.status-icon {
display: grid; place-items: center;
width: 3rem; height: 3rem; border-radius: 50%; flex-shrink: 0;
}
.status-title { font-size: 1rem; font-weight: 700; margin: 0; }
.status-sub { font-size: 0.8rem; color: var(--text-color-secondary); margin: 4px 0 0; }
.info-card {
border: 1px solid var(--surface-border); border-radius: 8px; overflow: hidden;
}
.info-card__header {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.625rem 1rem; background: var(--surface-ground);
}
.info-card__body { padding: 0.875rem 1rem; }
.info-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; padding: 0.375rem 0;
border-bottom: 1px solid var(--surface-border);
}
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 0.75rem; color: var(--text-color-secondary); flex-shrink: 0; }
.field-group { display: flex; flex-direction: column; gap: 0.375rem; }
.field-label { font-size: 0.75rem; font-weight: 600; }
</style>
src/layout/configuracoes/ConfiguracoesWhatsappPage.vue
-66
View File
@@ -474,18 +474,6 @@ onBeforeUnmount(() => {
<template>
<div class="flex flex-col gap-4">
<!-- Subheader -->
<div class="cfg-subheader">
<div class="cfg-subheader__icon"><i class="pi pi-comments" /></div>
<div class="min-w-0">
<div class="cfg-subheader__title">WhatsApp</div>
<div class="cfg-subheader__sub">Configure a integração e os templates de mensagem do WhatsApp</div>
</div>
<div class="cfg-subheader__actions">
<Tag :value="connectionTag.label" :severity="connectionTag.severity" class="text-xs" />
</div>
</div>
<!-- Abas -->
<Tabs :value="activeTab" @update:value="activeTab = $event">
<TabList>
@@ -730,58 +718,4 @@ onBeforeUnmount(() => {
</template>
<style scoped>
.cfg-subheader {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.875rem 1rem;
border-radius: 6px;
border: 1px solid color-mix(in srgb, var(--primary-color, #6366f1) 30%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #6366f1) 12%, var(--surface-card)) 0%, color-mix(in srgb, var(--primary-color, #6366f1) 4%, var(--surface-card)) 60%, var(--surface-card) 100%);
position: relative;
overflow: hidden;
}
.cfg-subheader::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 80px;
height: 80px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary-color, #6366f1) 15%, transparent);
filter: blur(20px);
pointer-events: none;
}
.cfg-subheader__icon {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 6px;
flex-shrink: 0;
background: color-mix(in srgb, var(--primary-color, #6366f1) 20%, transparent);
color: var(--primary-color, #6366f1);
font-size: 0.85rem;
}
.cfg-subheader__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary-color, #6366f1);
}
.cfg-subheader__sub {
font-size: 0.75rem;
color: var(--text-color-secondary);
opacity: 0.85;
}
.cfg-subheader__actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
flex-shrink: 0;
position: relative;
z-index: 1;
}
</style>