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

Melissa: paginas nativas cfg-* + temas + textos com fundo + drawer WA

Browse Source 
CHROME COMPARTILHADO + 18 PAGINAS NATIVAS
- MelissaConfigPage: chrome unico (header, drawer mobile, sidebar com Configuracoes
  + FAQ slot, main com Suspense). Replica fake-dialog right rule e fica flush
  com o config-aside global.
- 18 wrappers finos (~25 linhas cada): cfg-precificacao, cfg-descontos,
  cfg-excecoes, cfg-convenios, cfg-wa, cfg-wa-pessoal, cfg-wa-oficial,
  cfg-wa-templates, cfg-conversas-tags/autoreply/optouts/sla/bots,
  cfg-lembretes, cfg-creditos-wa, cfg-sms, cfg-email-templates,
  cfg-recursos-extras, cfg-recursos-extras-extrato, cfg-auditoria.
- Cada wrapper usa defineAsyncComponent + Suspense pra evitar race com
  tenantStore no boot (loading travado em alguns chooser-style pages).
- MelissaLayout: imports + SECOES + MELISSA_NON_CONFIG_SLUGS + render
  conditions atualizados pra cobrir os 18 slugs.

PAGINAS LEGADAS DETECTAM CONTEXTO MELISSA
- ConfiguracoesWhatsappChooserPage, WhatsappPage, TwilioWhatsappPage,
  SmsPage, RecursosExtrasPage, EmailTemplatesPage, AddonsExtratoPage,
  AgendadorPage, ConversasAutoreplyPage: route.startsWith('/melissa')
  decide se router.push vai pro slug Melissa ou /configuracoes legado.
- Anchors <a href="/configuracoes/..."> (que recarregavam pagina e
  vazavam o usuario do Melissa) trocados por RouterLink context-aware.
- MelissaAgenda.goSettings agora vai pra /melissa/agenda-config.

PERSONALIZAR > TEMAS
- melissaThemes.js: catalogo Freud/Klein/Jung (wallpaper + cor primaria
  + preset Lara/Nora + surface).
- Toggle de tema aplica tudo de uma vez; persistido em melissa_prefs.themeName.
- Boot resolve themeName -> imagem via fetch + data URL (sem guardar
  data URL gigante no DB).
- onCustomFileChange/onClearBg invalidam themeName quando user mexe no bg.

PERSONALIZAR > FUNDO NOS TEXTOS
- Pref textBgEnabled em melissa_prefs.
- MelissaHeroClock: prop textBg envolve relogio/data/saudacao/resumo
  em <span class="hero-text"> que ganha bg branco/preto 60% + borda
  + padding + radius quando o toggle esta on.
- Vars --m-hero-text-bg / --m-hero-text-border flipam com light/dark.

TOP + DOCK COM GRADIENT HORIZONTAL
- Var --m-band: preto 80% (dark) / branco 80% (light).
- .melissa-topbar-band: gradiente cor->transparente (right->left) atras
  dos botoes do topo.
- .melissa-dock: gradiente cor->transparente (left->right) atras dos pins.

MELISSANEGOCIO ABSORVE MINHA EMPRESA
- Adiciona logo upload + preview "cartao de visita" (computeds
  enderecoLinhas/redesValidas/temDados/logoDisplay + redeIcon helper).
- Normaliza dados legados do cfg-empresa: redes_sociais.{rede} virou {name}.
- Preview teleporta entre 3 destinos baseado no viewport:
  mobile -> drawer; mid-desktop -> sidebar; wide-desktop (>=1340px) ->
  painel flutuante FORA do fake dialog (ancora no right edge + 14px gap,
  altura segue conteudo, header alinhado com header do dialog).
- Remove cfg-empresa de melissaConfigGrupos.js + COMPONENT_MAP do
  MelissaConfiguracoes; grupo "Empresa & Plataforma" -> "Plataforma".

CRONOMETRO -> SESSAO AGENDADA
- MelissaCronometro emite session-end ao parar com paciente selecionado
  (threshold 5s pra ignorar start/stop acidental).
- MelissaLayout.onCronometroSessionEnd busca agenda_eventos do paciente
  no dia (tipo='sessao'), pega o mais recente e grava em
  extra_fields.cronometro_duracao_seg + cronometro_parado_em.
- Toast: sucesso ("X min salvos") ou warn ("sessao nao encontrada").

CONVERSATIONDRAWER WHATSAPP-LIKE
- Nova imagem whatsapp-bg.jpg (renomeada de hash random) usada como
  tile (380px) no .cd-msgs.
- Light: bege #efeae2 + multiply blend.
- Dark: #0b141a + camada 78% sobre o doodle.
- Bubbles WA-style (verde out / branco-dark in com tails) ja existiam.

EXTRATO RECURSOS EXTRAS
- Filtros 2-por-linha em Melissa (vs 1/4 no /configuracoes).
- Cards de Resumo teleportam pro #cfg-page-side em Melissa
  (1-col empilhado no drawer; 4-col inline no /configuracoes).
- Botoes de exportar com flex-1 distribuidos em uma unica linha em
  desktop, wrap no mobile.
- DataTable scrollable em ambos os layouts.

OUTROS AJUSTES MENORES
- Cfg-conversas-autoreply: dias semana 4-cols em Melissa (vs 7-cols
  no /configuracoes).
- Cfg-creditos-wa: 1/2 por linha (vs 1/2/4) em Melissa.
- Cfg-recursos-extras: pacotes 1/2 (vs 1/2/4); "Em breve" 1-col.
- WhatsAppPage aba Templates: guia de formatacao teleporta pro side
  drawer em Melissa, deixando textareas full-width.
- ConfigPage chrome agora tem #cfg-page-actions target pros Teleport
  de acoes (refresh button etc).
- Imagens renomeadas em src/assets/themes/ (freudwebp/melainewebp/
  jungwebp.webp) e src/assets/whatsapp-bg.jpg.
- JoditTextEditor.vue novo (wrapper Jodit generico, sem features de email).
- MelissaConfigList.vue novo (lista compartilhada de configs pro drawer).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-07 23:48:18 -03:00
parent cc7841bd1f
commit 9966b5f175
60 changed files with 4785 additions and 713 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaAgendador.vue
+104 -130
View File
@@ -15,12 +15,17 @@
* agendador_configuracoes + bucket agendador + payment_settings).
*/
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
import MelissaConfigList from './MelissaConfigList.vue';
import JoditTextEditor from '@/components/ui/JoditTextEditor.vue';
import { useToast } from 'primevue/usetoast';
import { supabase } from '@/lib/supabase/client';
import { useTenantStore } from '@/stores/tenantStore';
import { useEntitlementsStore } from '@/stores/entitlementsStore';
// InputText/Select/SelectButton/Textarea/RadioButton/Checkbox/ColorPicker/
// ToggleSwitch/Tag/Skeleton/Editor: auto via PrimeVueResolver
// ToggleSwitch/Tag/Skeleton: auto via PrimeVueResolver
// (PrimeVue <Editor> trocado por JoditTextEditor — Quill colapsava em
// flex layouts com 3 editores empilhados, Jodit faz layout imperativo
// via JS sem depender de medicao do flex pai.)
const emit = defineEmits(['close']);
@@ -44,6 +49,11 @@ function _onMqMobileChange(e) {
function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
function fecharDrawer() { drawerOpen.value = false; }
// Toggle entre cards (default) e lista de configs (alterna inline na sidebar)
const cfgOpen = ref(false);
function toggleCfg() { cfgOpen.value = !cfgOpen.value; }
function fecharCfg() { cfgOpen.value = false; }
// ── Estado ─────────────────────────────────────────────────
const loading = ref(true);
const ownerId = ref(null);
@@ -608,7 +618,15 @@ const summaryItems = computed(() => [
<div class="mag-body">
<Teleport to="#mag-mobile-drawer-target" :disabled="!isMobile">
<aside class="mag-side">
<div class="mag-side__scroll">
<button class="mag-cfg-btn" :class="{ 'is-open': cfgOpen }" @click="toggleCfg">
<i :class="cfgOpen ? 'pi pi-arrow-left' : 'pi pi-cog'" />
<span>{{ cfgOpen ? 'Voltar' : 'Configurações' }}</span>
<i v-if="!cfgOpen" class="pi pi-chevron-down mag-cfg-btn__chev" />
</button>
<div v-if="cfgOpen" class="mag-side__scroll mag-side__scroll--cfg">
<MelissaConfigList @select="fecharCfg" />
</div>
<div v-else class="mag-side__scroll">
<!-- Card: Status -->
<div class="mag-w mag-w--side">
<div class="mag-w__head">
@@ -1287,49 +1305,21 @@ const summaryItems = computed(() => [
<div class="mag-field">
<label class="mag-label">Mensagem de boas-vindas</label>
<span class="mag-hint">Aparece após o paciente informar o nome.</span>
<Editor
<JoditTextEditor
v-model="cfg.mensagem_boas_vindas"
editorStyle="min-height: 100px; font-size: 0.92rem;"
>
<template #toolbar>
<span class="ql-formats">
<button class="ql-bold" />
<button class="ql-italic" />
<button class="ql-underline" />
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered" />
<button class="ql-list" value="bullet" />
</span>
<span class="ql-formats">
<button class="ql-link" />
</span>
</template>
</Editor>
:min-height="100"
/>
</div>
<div class="mag-divider" />
<div class="mag-field">
<label class="mag-label">Como se preparar para a sessão</label>
<span class="mag-hint">Aparece na confirmação. Dicas, instruções, etc.</span>
<Editor
<JoditTextEditor
v-model="cfg.texto_como_se_preparar"
editorStyle="min-height: 140px; font-size: 0.92rem;"
>
<template #toolbar>
<span class="ql-formats">
<button class="ql-bold" />
<button class="ql-italic" />
<button class="ql-underline" />
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered" />
<button class="ql-list" value="bullet" />
</span>
<span class="ql-formats">
<button class="ql-link" />
</span>
</template>
</Editor>
:min-height="140"
/>
</div>
<template v-if="cfg.exigir_aceite_lgpd">
@@ -1337,25 +1327,10 @@ const summaryItems = computed(() => [
<div class="mag-field">
<label class="mag-label">Termos de uso / Política de privacidade</label>
<span class="mag-hint">Aparece no checkbox de aceite.</span>
<Editor
<JoditTextEditor
v-model="cfg.texto_termos_lgpd"
editorStyle="min-height: 140px; font-size: 0.92rem;"
>
<template #toolbar>
<span class="ql-formats">
<button class="ql-bold" />
<button class="ql-italic" />
<button class="ql-underline" />
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered" />
<button class="ql-list" value="bullet" />
</span>
<span class="ql-formats">
<button class="ql-link" />
</span>
</template>
</Editor>
:min-height="140"
/>
</div>
</template>
@@ -1506,6 +1481,50 @@ const summaryItems = computed(() => [
border-radius: 3px;
}
/* Botao "Configuracoes" no topo da .mag-side. Click alterna entre
cards (default) e lista de configs (estado is-open: vira "Voltar"). */
.mag-cfg-btn {
display: flex;
align-items: center;
gap: 8px;
width: calc(100% - 24px);
margin: 12px 12px 0;
padding: 10px 12px;
background: var(--m-bg-medium);
border: 1px solid var(--m-border);
border-radius: 9px;
color: var(--m-text);
cursor: pointer;
font-family: inherit;
font-size: 0.84rem;
font-weight: 600;
text-align: left;
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
flex-shrink: 0;
}
.mag-cfg-btn:hover {
background: var(--m-bg-soft-hover);
border-color: var(--m-border-strong);
}
.mag-cfg-btn.is-open {
background: color-mix(in srgb, var(--p-primary-color) 14%, transparent);
border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
color: var(--p-primary-color);
}
.mag-cfg-btn > i:first-child {
color: var(--p-primary-color);
font-size: 0.92rem;
}
.mag-cfg-btn > span { flex: 1; }
.mag-cfg-btn__chev {
color: var(--m-text-muted);
font-size: 0.7rem;
}
.mag-side__scroll--cfg {
padding: 8px;
gap: 0;
}
.mag-main {
flex: 1;
min-width: 0;
@@ -1525,44 +1544,23 @@ const summaryItems = computed(() => [
border-radius: 3px;
}
/* Desktop (>=1024): main em grid 2-col com Textos full-width.
Cards min-h 300 + max-h 100% + body scroll (lições aprendidas). */
/* Desktop (>=1024): cards empilhados verticalmente (1-col), cada um
com altura propria do conteudo. O grid 2-col anterior forcava cells
na mesma row a igualarem altura — com align-self: start cards menores
ficavam no topo do cell e o espaco vazio embaixo dava aparencia de
"encavalado". 1-col com max-width centralizado eh mais legivel em
telas largas e respeita "100% do conteudo interno" pedido pelo user.
.mag-main ja eh display:flex flex-direction:column gap:12px no base —
so adiciona limites de largura aqui. */
@media (min-width: 1024px) {
.mag-main {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
align-items: start;
align-content: start;
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
.mag-main > .mag-w {
min-height: 300px;
max-height: 100%;
display: flex;
flex-direction: column;
}
.mag-main > .mag-w--full { grid-column: 1 / -1; }
.mag-side > .mag-side__scroll > .mag-w--side {
min-height: 300px;
max-height: 100%;
display: flex;
flex-direction: column;
}
.mag-main > .mag-w > .mag-w__body,
.mag-side .mag-w--side > .mag-w__body {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mag-main > .mag-w > .mag-w__body::-webkit-scrollbar,
.mag-side .mag-w--side > .mag-w__body::-webkit-scrollbar { width: 5px; }
.mag-main > .mag-w > .mag-w__body::-webkit-scrollbar-thumb,
.mag-side .mag-w--side > .mag-w__body::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
height: auto;
flex-shrink: 0;
}
}
@@ -1862,6 +1860,12 @@ const summaryItems = computed(() => [
display: flex;
flex-direction: column;
gap: 6px;
/* flex-shrink: 0 — em parent flex-col (.mag-w__body), garante que
fields nao colapsem. Originalmente adicionado pro PrimeVue Editor
(Quill) que media altura via JS e shrunk quando flex pai nao tinha
altura definida. Mantido apos troca pra Jodit por consistencia
(form fields nunca devem shrink em layout vertical). */
flex-shrink: 0;
}
.mag-label {
font-size: 0.78rem;
@@ -2127,23 +2131,9 @@ const summaryItems = computed(() => [
}
.mag-warn > i { font-size: 0.92rem; margin-top: 2px; flex-shrink: 0; }
/* ═══════ Editor (PrimeVue Quill) overrides ═══════ */
:deep(.p-editor-container) { background: var(--m-bg-medium); border-radius: 8px; }
:deep(.p-editor-toolbar) {
background: var(--m-bg-soft) !important;
border: 1px solid var(--m-border) !important;
border-bottom: none !important;
border-radius: 8px 8px 0 0 !important;
}
:deep(.p-editor-content) {
background: var(--m-bg-medium) !important;
border: 1px solid var(--m-border) !important;
border-radius: 0 0 8px 8px !important;
}
:deep(.p-editor-content .ql-editor) {
color: var(--m-text);
background: var(--m-bg-medium);
}
/* PrimeVue Editor (Quill) trocado por JoditTextEditor — Jodit traz
CSS proprio (jodit/es2021/jodit.min.css importado no componente)
e suporta dark/light via theme prop. Sem override scoped aqui. */
/* ═══════ Mobile drawer ═══════ */
.mag-mobile-drawer {
@@ -2166,23 +2156,6 @@ const summaryItems = computed(() => [
}
.mag-mobile-drawer.is-open { transform: translateX(0); }
.mag-mobile-drawer__scroll {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.mag-mobile-drawer__scroll .mag-side {
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
background: transparent;
border-right: none;
display: flex;
flex-direction: column;
}
.mag-mobile-drawer__scroll .mag-side__scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
@@ -2194,14 +2167,15 @@ const summaryItems = computed(() => [
scrollbar-width: thin;
scrollbar-color: var(--m-border-strong) transparent;
}
.mag-mobile-drawer__scroll .mag-side__scroll::-webkit-scrollbar { width: 5px; }
.mag-mobile-drawer__scroll .mag-side__scroll::-webkit-scrollbar-thumb {
.mag-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mag-mobile-drawer__scroll::-webkit-scrollbar-thumb {
background: var(--m-border-strong);
border-radius: 3px;
}
.mag-mobile-drawer__scroll .mag-w--side {
margin: 0;
flex-shrink: 0;
/* No mobile a .mag-side e teleportada pra dentro do drawer scroll. */
.mag-mobile-drawer__scroll .mag-side {
width: 100%;
border-right: none;
}
.mag-mobile-drawer__backdrop {
@@ -2220,7 +2194,7 @@ const summaryItems = computed(() => [
/* ═══════ Mobile (<1024px) ═══════ */
@media (max-width: 1023px) {
.mag-body { flex-direction: column; padding: 0; }
.mag-side { display: none; }
.mag-body > .mag-side { display: none; }
.mag-main { width: 100%; padding: 8px; }
.mag-main .mag-w {
height: auto;