MelissaLayout: sidebar global de configs em qualquer rota de config

Antes cada pagina nativa de config tinha seu proprio chrome 2-col, e quando o usuario navegava entre Perfil/Plano/Negocio/Seguranca/Agenda Config/Bloqueios/Agendador/Pagamento, perdia o contexto do menu. Agora: - Catalogo unico em composables/melissaConfigGrupos.js (MELISSA_CONFIG_ GRUPOS + isMelissaConfigSlug helper) - MelissaConfigSidebar.vue componente standalone com accordion + navegacao via router.push + destaque do item ativo - MelissaLayout renderiza `<MelissaConfigSidebar>` em qualquer slug que esteja em MELISSA_CONFIG_GRUPOS (computed showConfigSidebar) - CSS var --m-config-aside-left no .win11-root: 296px quando sidebar visivel, 6px caso contrario - Todas as 9 paginas nativas (Perfil, Plano, AlterarPlano, Negocio, Seguranca, Bloqueios, AgendaConfig, Agendador, Pagamento) + MelissaConfiguracoes ajustam left do inset usando a var Sidebar tem entrada animada (lift + slide) e usa o pattern do .mcfg- accordion (head com icone primary + label + desc 2-linhas + badge; items com hover/active color-mix primary 12-16%). Proximo passo: limpar o aside redundante interno do MelissaConfiguracoes + ajustar MelissaSeguranca pra considerar o aside no min-width 1000. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-06 17:50:03 -03:00
parent 7d2307dcf0
commit 989c5330f8
13 changed files with 496 additions and 11 deletions
@@ -0,0 +1,116 @@
+/*
+ * melissaConfigGrupos — fonte unica do catalogo de configs Melissa.
+ *
+ * Usado por:
+ * - MelissaConfigSidebar (renderiza o accordion + items)
+ * - MelissaLayout (decide quando mostrar o sidebar de config)
+ * - MelissaConfiguracoes (re-usa o mesmo catalogo via componente)
+ *
+ * Cada item tem `key` que e o slug usado em /melissa/<slug>. Se a key
+ * comeca com 'cfg-', a pagina e embed (renderizada pelo
+ * MelissaConfiguracoes via COMPONENT_MAP). Se e slug "limpo" (perfil,
+ * plano, agenda-config, pagamento, etc), e pagina nativa Melissa.
+ */
+export const MELISSA_CONFIG_GRUPOS = [
+    {
+        key: 'layout-melissa',
+        label: 'Layout Melissa',
+        desc: 'Aparência, plano de fundo, relógio e cronômetro do resumo.',
+        icon: 'pi pi-palette',
+        items: [
+            { key: 'aparencia', label: 'Layout Melissa', desc: 'Tema, cor primária, surface, plano de fundo, relógio e cronômetro — tudo numa tela só.', icon: 'pi pi-palette' }
+        ]
+    },
+    {
+        key: 'conta',
+        label: 'Conta',
+        desc: 'Perfil, plano, negócio e segurança.',
+        icon: 'pi pi-user',
+        items: [
+            { key: 'perfil',    label: 'Meu Perfil',  desc: 'Identidade, contato, bio, redes — gamificação no aside.', icon: 'pi pi-user' },
+            { key: 'plano',     label: 'Meu Plano',   desc: 'Assinatura, recursos liberados e histórico de mudanças.',  icon: 'pi pi-credit-card' },
+            { key: 'negocio',   label: 'Meu Negócio', desc: 'Identidade, fiscal, endereço, contato, redes.',           icon: 'pi pi-briefcase' },
+            { key: 'seguranca', label: 'Segurança',   desc: 'Trocar senha + boas práticas + estado da sessão.',         icon: 'pi pi-shield' }
+        ]
+    },
+    {
+        key: 'agenda',
+        label: 'Agenda',
+        desc: 'Horários, bloqueios e agendador público.',
+        icon: 'pi pi-calendar',
+        items: [
+            { key: 'agenda-config',     label: 'Configurações da Agenda', desc: 'Jornada (dias e horários), ritmo das sessões e agendamento online.',  icon: 'pi pi-calendar' },
+            { key: 'bloqueios',         label: 'Bloqueios e Feriados',    desc: 'Feriados nacionais (auto), municipais e bloqueios manuais.',          icon: 'pi pi-ban' },
+            { key: 'online-scheduling', label: 'Agendador Online',        desc: 'Link público, identidade visual, fluxo, pagamento e textos.',         icon: 'pi pi-calendar-clock' }
+        ]
+    },
+    {
+        key: 'financeiro',
+        label: 'Financeiro',
+        desc: 'Formas de pagamento, valores, descontos e convênios.',
+        icon: 'pi pi-wallet',
+        items: [
+            { key: 'pagamento',        label: 'Formas de Pagamento',    desc: 'Pix, depósito, dinheiro, cartão e convênio.',                    icon: 'pi pi-wallet' },
+            { key: 'cfg-precificacao', label: 'Precificação',           desc: 'Valor padrão da sessão e preços por tipo de compromisso.',       icon: 'pi pi-tag' },
+            { key: 'cfg-descontos',    label: 'Descontos por Paciente', desc: 'Descontos recorrentes aplicados automaticamente.',              icon: 'pi pi-percentage' },
+            { key: 'cfg-excecoes',     label: 'Exceções Financeiras',   desc: 'O que cobrar em faltas, cancelamentos e situações excepcionais.', icon: 'pi pi-exclamation-triangle' },
+            { key: 'cfg-convenios',    label: 'Convênios',              desc: 'Cadastre os convênios que você atende e seus valores.',          icon: 'pi pi-id-card' }
+        ]
+    },
+    {
+        key: 'whatsapp',
+        label: 'WhatsApp & Conversas',
+        desc: 'Canal, tags, auto-reply, lembretes e créditos.',
+        icon: 'pi pi-whatsapp',
+        items: [
+            { key: 'cfg-wa',                  label: 'Canal WhatsApp',      desc: 'Escolha o canal (oficial AgenciaPSI ou pessoal) e configure a integração.', icon: 'pi pi-whatsapp' },
+            { key: 'cfg-wa-templates',        label: 'Templates WhatsApp',  desc: 'Personalize os textos enviados ou volte ao padrão da plataforma.',          icon: 'pi pi-file-edit' },
+            { key: 'cfg-conversas-tags',      label: 'Tags de Conversa',    desc: 'Etiquetas custom pra classificar threads no CRM (urgente, remarcação…).',  icon: 'pi pi-tag' },
+            { key: 'cfg-conversas-autoreply', label: 'Auto-reply WhatsApp', desc: 'Resposta automática quando paciente escreve fora do horário.',             icon: 'pi pi-reply' },
+            { key: 'cfg-conversas-optouts',   label: 'Opt-outs (LGPD)',     desc: 'Números que pediram pra não receber mensagens. Direito de oposição LGPD.', icon: 'pi pi-ban' },
+            { key: 'cfg-conversas-sla',       label: 'SLA de resposta',     desc: 'Tempo máximo pra responder. Alerta quando estourar.',                       icon: 'pi pi-stopwatch' },
+            { key: 'cfg-conversas-bots',      label: 'Bot de triagem',      desc: 'Coleta nome e motivo via WhatsApp antes do fluxo humano.',                 icon: 'pi pi-android' },
+            { key: 'cfg-lembretes',           label: 'Lembretes de Sessão', desc: 'WhatsApp automático 24h e 2h antes das sessões agendadas.',               icon: 'pi pi-bell' },
+            { key: 'cfg-creditos-wa',         label: 'Créditos WhatsApp',   desc: 'Compre pacotes de mensagens, veja saldo e extrato.',                        icon: 'pi pi-credit-card' }
+        ]
+    },
+    {
+        key: 'comunicacao',
+        label: 'Comunicação',
+        desc: 'SMS e templates de e-mail enviados aos pacientes.',
+        icon: 'pi pi-send',
+        items: [
+            { key: 'cfg-sms',             label: 'SMS',                 desc: 'Gerencie créditos SMS e personalize as mensagens enviadas.', icon: 'pi pi-comment' },
+            { key: 'cfg-email-templates', label: 'Templates de E-mail', desc: 'Personalize os e-mails enviados aos pacientes.',             icon: 'pi pi-envelope' }
+        ]
+    },
+    {
+        key: 'plataforma',
+        label: 'Empresa & Plataforma',
+        desc: 'Dados da empresa, recursos extras e auditoria.',
+        icon: 'pi pi-building',
+        items: [
+            { key: 'cfg-empresa',         label: 'Minha Empresa',   desc: 'CNPJ, endereço, logomarca e redes sociais.',          icon: 'pi pi-building' },
+            { key: 'cfg-recursos-extras', label: 'Recursos Extras', desc: 'Amplíe as funcionalidades com recursos adicionais.', icon: 'pi pi-box' },
+            { key: 'cfg-auditoria',       label: 'Auditoria',       desc: 'Registro imutável de operações (LGPD Art. 37).',     icon: 'pi pi-shield' }
+        ]
+    }
+];
+
+// Set de slugs que sao "config routes" — mostram o sidebar de config
+export const MELISSA_CONFIG_SLUGS = new Set(
+    MELISSA_CONFIG_GRUPOS.flatMap((g) => g.items.map((i) => i.key))
+);
+
+export function isMelissaConfigSlug(slug) {
+    return MELISSA_CONFIG_SLUGS.has(slug);
+}
+
+// Acha o item por slug (pra destacar ativo)
+export function findMelissaConfigItem(slug) {
+    for (const g of MELISSA_CONFIG_GRUPOS) {
+        const item = g.items.find((i) => i.key === slug);
+        if (item) return { grupo: g, item };
+    }
+    return null;
+}