feat: comprehensive design system overhaul
Applied impeccable design critique, audit, harden, layout, distill, and polish across all pages. DESIGN SYSTEM: - Created PRODUCT.md (5 design principles, WCAG 2.1 AA target) - Created DESIGN.md (34 color tokens, 6 radius scale, full component spec) - Created .impeccable/design.json (sidecar with tonal ramps, shadows, motion) ACCESSIBILITY: - 33 aria-labels across 7 pages (was ~13) - 63 <label> elements (was ~30) - 6 <main> landmarks + role=navigation on all sidebars - Esc to close modals on 4 pages - Keyboard shortcuts (Ctrl+J/K, Ctrl+F) on chat THEMING: - 216 hardcoded colors replaced with var() references - 449 !important removed from dark-mode.css - Dark mode script unified (was duplicated 9x inline) - All modals converted to .modal-overlay + .modal design system classes CHAT: - Error states for messages (.msg.erro, .msg.enviando) - Connection status indicator - Confirmation modal before finalizar - Input bar reorganized (3 visible actions, + menu) - Right panel accordions - Send button disabled when empty - Touch targets 44px on mobile CLIENT DETAIL: - Tabs/badges/sub-tabs use CSS classes instead of inline styles - 'Iniciar Conversa' button now primary action - alert() replaced with inline feedback - Modal converted to design system classes CLIENT LIST: - Modal moved inside <body> (was HTML-invalid) - alert() replaced with inline feedback - Modal uses .show pattern SETTINGS: - 4 modals converted to design system classes - 14 alert() calls replaced with inline feedback - fecharModal() uses classList instead of style.display ROUTES: - border-radius normalized, hardcoded colors fixed Score progression: Chat: 23 → 32/40 Client List: 32 → 35/40 Client Detail: 26 → 30/40 Settings: 29 → 35/40 Routes: 37 → 38/40 Audit (project): 14/20 → 17/20
This commit is contained in:
+156
-119
@@ -6,36 +6,43 @@
|
||||
<title>Configurações - Chatc2</title>
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<style>
|
||||
body { background:#f3f4f6; display:flex; min-height:100vh; }
|
||||
body { background:var(--surface-3); display:flex; min-height:100vh; }
|
||||
.sidebar-nav .admin-only { display:none; }
|
||||
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
|
||||
.container { flex:1; padding:24px; overflow-y:auto; }
|
||||
.tabs { display:flex; margin-bottom:24px; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.08); border:1px solid #f3f4f6; }
|
||||
.tabs button { flex:1; padding:13px 16px; border:none; background:#fff; font-size:14px; cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; color:#6b7280; font-weight:500; }
|
||||
.tabs button:hover { background:#f9fafb; color:#374151; }
|
||||
.tabs button.active { border-bottom-color:#667eea; color:#667eea; font-weight:700; background:#fafbff; }
|
||||
.tabs { display:flex; margin-bottom:24px; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.08); border:1px solid var(--surface-3); }
|
||||
.tabs button { flex:1; padding:13px 16px; border:none; background:#fff; font-size:14px; cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; color:var(--text-muted); font-weight:500; }
|
||||
.tabs button:hover { background:var(--surface-2); color:var(--text-secondary); }
|
||||
.tabs button.active { border-bottom-color:var(--primary); color:var(--primary); font-weight:700; background:#fafbff; }
|
||||
.tab-content { display:none; }
|
||||
.tab-content.active { display:block; }
|
||||
.form-group { margin-bottom:16px; }
|
||||
.form-group label { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:5px; }
|
||||
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 14px; border:2px solid #e5e7eb; border-radius:8px; font-size:14px; outline:none; background:#f9fafb; color:#111827; transition:all .15s; font-family:inherit; }
|
||||
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#667eea; background:#fff; box-shadow:0 0 0 3px rgba(102,126,234,0.1); }
|
||||
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:5px; }
|
||||
.form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 14px; border:2px solid var(--border); border-radius:8px; font-size:14px; outline:none; background:var(--surface-2); color:var(--text-primary); transition:all .15s; font-family:inherit; }
|
||||
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(102,126,234,0.1); }
|
||||
.form-group textarea { min-height:80px; resize:vertical; }
|
||||
.form-group .toggle { display:flex; align-items:center; gap:8px; }
|
||||
.form-group .toggle input { width:auto; }
|
||||
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all .15s; }
|
||||
.btn-primary { background:#667eea; color:#fff; }
|
||||
.btn-primary:hover { background:#5a67d8; }
|
||||
.btn-danger { background:#ef4444; color:#fff; }
|
||||
.btn-danger:hover { background:#dc2626; }
|
||||
.btn-primary { background:var(--primary); color:#fff; }
|
||||
.btn-primary:hover { background:var(--primary-dark); }
|
||||
.btn-danger { background:var(--danger); color:#fff; }
|
||||
.btn-danger:hover { background:var(--danger-text); }
|
||||
.btn-sm { padding:6px 12px; font-size:12px; border-radius:6px; }
|
||||
.badge { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11px; font-weight:600; }
|
||||
.badge-success { background:#d1fae5; color:#065f46; }
|
||||
.badge-danger { background:#fef2f2; color:#991b1b; }
|
||||
.badge-success { background:var(--success-bg); color:var(--success-text); }
|
||||
.badge-danger { background:var(--danger-bg); color:var(--danger-text); }
|
||||
.user-info { display:flex; align-items:center; gap:14px; }
|
||||
.user-name { font-size:14px; font-weight:500; color:#374151; }
|
||||
.user-name { font-size:14px; font-weight:500; color:var(--text-secondary); }
|
||||
.status-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; }
|
||||
.status-badge.online { background:#d1fae5; color:#065f46; }
|
||||
.status-badge.online { background:var(--success-bg); color:var(--success-text); }
|
||||
|
||||
.feedback-msg {
|
||||
padding: 8px 14px; border-radius: 6px; font-size: 13px;
|
||||
margin-bottom: 8px; display: none;
|
||||
}
|
||||
.feedback-msg.sucesso { background: var(--success-bg); color: var(--success-text); display: block; }
|
||||
.feedback-msg.erro { background: var(--danger-bg); color: var(--danger-text); display: block; }
|
||||
|
||||
/* Responsivo: abas rolam horizontalmente no celular */
|
||||
@media (max-width: 768px) {
|
||||
@@ -44,12 +51,10 @@ body { background:#f3f4f6; display:flex; min-height:100vh; }
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/css/dark-mode.css">
|
||||
<script>function darkModeToggle(){var e=document.body;if(!e)return;var a=localStorage.getItem('chatc2_dark_mode')!=='true';e.classList.toggle('dark-mode',a);localStorage.setItem('chatc2_dark_mode',a?'true':'false');document.querySelectorAll('.dark-mode-toggle').forEach(function(b){b.innerHTML=a?'☀️ Claro':'🌙 Escuro'});}
|
||||
window.darkModeApply=function(a){var e=document.body;if(!e)return;e.classList.toggle('dark-mode',a);localStorage.setItem('chatc2_dark_mode',a?'true':'false');document.querySelectorAll('.dark-mode-toggle').forEach(function(b){b.innerHTML=a?'☀️ Claro':'🌙 Escuro'});};
|
||||
window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')==='true';};</script>
|
||||
<script>if(localStorage.getItem("chatc2_dark_mode")==="true")document.documentElement.classList.add("dark-mode-pending")</script>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<aside class="sidebar" role="navigation" aria-label="Navegação principal">
|
||||
<div class="sidebar-brand">
|
||||
<div class="logo">C2</div>
|
||||
<div><h2>Chatc2</h2><span id="sidebarAlias">-</span></div>
|
||||
@@ -64,10 +69,10 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
|
||||
<a href="#" id="navRoutesSet" class="admin-only"><span class="icon">📡</span> Rotas</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<button class="dark-mode-toggle" onclick="darkModeToggle()" style="width:100%;margin-bottom:8px;padding:8px">🌙 Escuro</button>
|
||||
<a onclick="logout()"><span class="icon">🚪</span> Sair</a></div>
|
||||
<button class="dark-mode-toggle" onclick="darkModeToggle()" style="width:100%;margin-bottom:8px;padding:8px" aria-label="Alternar modo escuro">🌙 Escuro</button>
|
||||
<a onclick="logout()" aria-label="Sair do sistema"><span class="icon">🚪</span> Sair</a></div>
|
||||
</aside>
|
||||
<div class="main">
|
||||
<main class="main" id="main-content">
|
||||
<div class="topbar"><span class="topbar-title">⚙️ Configurações</span></div>
|
||||
<div class="container">
|
||||
<div class="tabs">
|
||||
@@ -84,17 +89,17 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
|
||||
<h3 style="margin:0">📋 Fluxo de Atendimento</h3>
|
||||
</div>
|
||||
<p style="color:#6b7280;font-size:13px;margin-bottom:16px">
|
||||
<p style="color:var(--text-muted);font-size:13px;margin-bottom:16px">
|
||||
Configure os submenus que aparecem quando o cliente seleciona uma equipe.
|
||||
As opções iniciais são sempre as <strong>Equipes</strong> cadastradas,
|
||||
com a opção de <strong>Segunda via de Boleto</strong> no final.
|
||||
</p>
|
||||
<div id="menusList"><p style="color:#9ca3af">Carregando...</p></div>
|
||||
<div id="menusList"><p style="color:var(--text-faint)">Carregando...</p></div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="cardResolucao">
|
||||
<h3 style="margin:0 0 8px">🧩 Fluxo de Resolução</h3>
|
||||
<p style="color:#6b7280;font-size:13px;margin-bottom:16px">
|
||||
<p style="color:var(--text-muted);font-size:13px;margin-bottom:16px">
|
||||
Defina os motivos de atendimento e como o atendente registra a resolução ao finalizar a conversa.
|
||||
</p>
|
||||
|
||||
@@ -103,7 +108,7 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
|
||||
<input type="text" id="novoMotivo" placeholder="Cadastrar novo motivo..." style="flex:1;padding:8px;border:2px solid #e5e7eb;border-radius:8px;font-size:13px" onkeydown="if(event.key==='Enter')adicionarMotivo()">
|
||||
<button class="btn btn-primary btn-sm" onclick="adicionarMotivo()">+ Adicionar</button>
|
||||
</div>
|
||||
<div id="motivosList" style="margin-bottom:12px"><p style="color:#9ca3af;font-size:13px">Carregando...</p></div>
|
||||
<div id="motivosList" style="margin-bottom:12px"><p style="color:var(--text-faint);font-size:13px">Carregando...</p></div>
|
||||
<div class="form-group"><div class="toggle"><input type="checkbox" id="flgMotivoVis"> <label for="flgMotivoVis">Visualizar Motivo na tela de conversa</label></div></div>
|
||||
<div class="form-group"><div class="toggle"><input type="checkbox" id="flgMotivoObr"> <label for="flgMotivoObr">Obrigatório preencher (só finaliza com motivo)</label></div></div>
|
||||
|
||||
@@ -111,7 +116,7 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
|
||||
<div class="form-group"><div class="toggle"><input type="checkbox" id="flgResolVis"> <label for="flgResolVis">Visualizar Resolução na tela de conversa</label></div></div>
|
||||
<div class="form-group"><div class="toggle"><input type="checkbox" id="flgResolObr"> <label for="flgResolObr">Obrigatório preencher (só finaliza com resolução)</label></div></div>
|
||||
|
||||
<button class="btn btn-primary" onclick="salvarResolucao()">💾 Salvar Fluxo de Resolução</button>
|
||||
<div id="resolucaoFeedback" class="feedback-msg"></div><button class="btn btn-primary" onclick="salvarResolucao()">💾 Salvar Fluxo de Resolução</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -122,11 +127,11 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
|
||||
<h3 style="margin:0">Equipes</h3>
|
||||
<button class="btn btn-primary btn-sm" onclick="mostrarModalEquipe()">+ Nova Equipe</button>
|
||||
</div>
|
||||
<div id="equipesList"><p style="color:#9ca3af">Carregando...</p></div>
|
||||
<div id="equipesList"><p style="color:var(--text-faint)">Carregando...</p></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Usuários da Empresa</h3>
|
||||
<div id="usuariosList"><p style="color:#9ca3af">Carregando...</p></div>
|
||||
<div id="usuariosList"><p style="color:var(--text-faint)">Carregando...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -134,7 +139,7 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
|
||||
<div class="tab-content" id="tabEmpresa">
|
||||
<div class="card">
|
||||
<h3>Configurações da Empresa</h3>
|
||||
<div id="configForm"><p style="color:#9ca3af">Carregando...</p></div>
|
||||
<div id="configForm"><p style="color:var(--text-faint)">Carregando...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -145,7 +150,7 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
|
||||
<h3 style="margin:0">Etiquetas</h3>
|
||||
<button class="btn btn-primary btn-sm" onclick="mostrarModalEtiqueta()">+ Nova Etiqueta</button>
|
||||
</div>
|
||||
<div id="etiquetasList"><p style="color:#9ca3af">Carregando...</p></div>
|
||||
<div id="etiquetasList"><p style="color:var(--text-faint)">Carregando...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -156,61 +161,62 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
|
||||
<h3 style="margin:0">📱 Conexões WhatsApp</h3>
|
||||
<button class="btn btn-primary btn-sm" onclick="mostrarModalConexao()">+ Nova Conexão</button>
|
||||
</div>
|
||||
<div id="conexoesList"><p style="color:#9ca3af">Carregando...</p></div>
|
||||
<div id="conexoesList"><p style="color:var(--text-faint)">Carregando...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Equipe -->
|
||||
<div class="modal-overlay" id="modalEquipe" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;z-index:1000">
|
||||
<div style="background:#fff;border-radius:12px;padding:24px;width:90%;max-width:400px">
|
||||
<div class="modal-overlay" id="modalEquipe">
|
||||
<div class="modal" style="max-width:400px">
|
||||
<h3 id="modalEquipeTitle">Nova Equipe</h3>
|
||||
<input type="hidden" id="editEquipeId">
|
||||
<div class="form-group"><label>Nome da Equipe</label><input type="text" id="equipeNome" placeholder="Ex: Atendimento"></div>
|
||||
<div class="form-group"><label>Ordem</label><input type="number" id="equipeOrdem" value="0" min="0" style="width:80px"><span style="font-size:12px;color:#9ca3af;margin-left:8px">(menor = aparece primeiro)</span></div>
|
||||
<div class="form-group"><label for="equipeNome">Nome da Equipe</label><input type="text" id="equipeNome" placeholder="Ex: Atendimento"></div>
|
||||
<div class="form-group"><label for="equipeOrdem">Ordem</label><input type="number" id="equipeOrdem" value="0" min="0" style="width:80px"><span style="font-size:12px;color:var(--text-faint);margin-left:8px">(menor = aparece primeiro)</span></div>
|
||||
<div class="form-group"><label>Membros</label><div id="equipeMembros"></div></div>
|
||||
<div style="display:flex;gap:8px;justify-content:flex-end">
|
||||
<button class="btn" onclick="fecharModal('modalEquipe')" style="background:#f3f4f6">Cancelar</button>
|
||||
<button class="btn btn-primary" onclick="salvarEquipe()">Salvar</button>
|
||||
<div id="equipeFeedback" class="feedback-msg"></div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="fecharModal('modalEquipe')">Cancelar</button>
|
||||
<button class="btn-primary" onclick="salvarEquipe()">Salvar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Etiqueta -->
|
||||
<div class="modal-overlay" id="modalEtiqueta" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;z-index:1000">
|
||||
<div style="background:#fff;border-radius:12px;padding:24px;width:90%;max-width:400px">
|
||||
<div class="modal-overlay" id="modalEtiqueta">
|
||||
<div class="modal" style="max-width:400px">
|
||||
<h3 id="modalEtiquetaTitle">Nova Etiqueta</h3>
|
||||
<input type="hidden" id="editEtiquetaId">
|
||||
<div class="form-group"><label>Nome</label><input type="text" id="etiquetaNome" placeholder="Ex: Cliente VIP"></div>
|
||||
<div class="form-group"><label>Cor</label><input type="color" id="etiquetaCor" value="#667eea"></div>
|
||||
<div style="display:flex;gap:8px;justify-content:flex-end">
|
||||
<button class="btn" onclick="fecharModal('modalEtiqueta')" style="background:#f3f4f6">Cancelar</button>
|
||||
<button class="btn btn-primary" onclick="salvarEtiqueta()">Salvar</button>
|
||||
<div class="form-group"><label for="etiquetaNome">Nome</label><input type="text" id="etiquetaNome" placeholder="Ex: Cliente VIP"></div>
|
||||
<div class="form-group"><label for="etiquetaCor">Cor</label><input type="color" id="etiquetaCor" value="#667eea"></div>
|
||||
<div id="etiquetaFeedback" class="feedback-msg"></div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="fecharModal('modalEtiqueta')">Cancelar</button>
|
||||
<button class="btn-primary" onclick="salvarEtiqueta()">Salvar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Menu -->
|
||||
<div class="modal-overlay" id="modalMenu" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;z-index:1000">
|
||||
<div style="background:#fff;border-radius:12px;padding:24px;width:90%;max-width:500px">
|
||||
<div class="modal-overlay" id="modalMenu">
|
||||
<div class="modal" style="max-width:500px">
|
||||
<h3 id="modalMenuTitle">Novo Submenu</h3>
|
||||
<input type="hidden" id="editMenuId">
|
||||
<input type="hidden" id="editMenuEquipeId">
|
||||
<input type="hidden" id="editMenuPaiId">
|
||||
<div class="form-group" id="menuEquipeGroup"><label>Equipe</label><select id="menuEquipe"><option value="">Selecione...</option></select></div>
|
||||
<div class="form-group"><label>Título</label><input type="text" id="menuTitulo" placeholder="Ex: Alteração Cadastral"></div>
|
||||
<div class="form-group">
|
||||
<label>Tipo</label>
|
||||
<div class="form-group" id="menuEquipeGroup"><label for="menuEquipe">Equipe</label><select id="menuEquipe"><option value="">Selecione...</option></select></div>
|
||||
<div class="form-group"><label for="menuTitulo">Título</label><input type="text" id="menuTitulo" placeholder="Ex: Alteração Cadastral"></div>
|
||||
<div class="form-group"><label for="menuTipo">Tipo</label>
|
||||
<select id="menuTipo" onchange="mudarTipoMenu()">
|
||||
<option value="M">📂 Submenu (mostra mais opções)</option>
|
||||
<option value="T">💬 Texto (envia mensagem fixa)</option>
|
||||
<option value="R">⚙️ Ação (executa alteração via API)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" id="menuTextoGroup" style="display:none"><label>Texto a ser enviado</label><textarea id="menuTexto" rows="3" placeholder="Digite a mensagem..."></textarea></div>
|
||||
<div class="form-group" id="menuTextoGroup" style="display:none"><label for="menuTexto">Texto a ser enviado</label><textarea id="menuTexto" rows="3" placeholder="Digite a mensagem..."></textarea></div>
|
||||
<div class="form-group" id="menuRotaGroup" style="display:none">
|
||||
<label>Ação (Rota)</label>
|
||||
<label for="menuAcaoRota">Ação (Rota)</label>
|
||||
<select id="menuAcaoRota">
|
||||
<option value="">Selecione uma ação...</option>
|
||||
<option value="listar_carnes">📄 Listar carnês / Boleto</option>
|
||||
@@ -219,31 +225,33 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
|
||||
<option value="alterar_endereco">🏠 Alterar Endereço</option>
|
||||
<option value="info_cliente">ℹ️ Mostrar dados do cliente</option>
|
||||
</select>
|
||||
<div style="margin-top:8px"><label>Pergunta ao cliente (se precisar de dados)</label>
|
||||
<textarea id="menuAcaoPrompt" rows="2" placeholder="Ex: Informe seu novo e-mail:" style="width:100%;padding:10px;border:2px solid #e5e7eb;border-radius:8px;font-size:13px;resize:vertical"></textarea></div>
|
||||
<div style="margin-top:8px"><label for="menuAcaoPrompt">Pergunta ao cliente (se precisar de dados)</label>
|
||||
<textarea id="menuAcaoPrompt" rows="2" placeholder="Ex: Informe seu novo e-mail:"></textarea></div>
|
||||
</div>
|
||||
<div class="form-group"><label>Ordem</label><input type="number" id="menuOrdem" value="0" min="0" style="width:80px"></div>
|
||||
<div class="form-group"><label>Subordinado a (opcional)</label><select id="menuPai"><option value="">Nenhum (raiz da equipe)</option></select></div>
|
||||
<div class="form-group"><label>Etiquetas (adicionar ao selecionar)</label><div id="menuEtiquetasContainer" style="display:flex;flex-wrap:wrap;gap:6px;padding:6px;border:1px solid #e5e7eb;border-radius:8px;min-height:36px"></div></div>
|
||||
<div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
|
||||
<button class="btn" onclick="fecharModal('modalMenu')" style="background:#f3f4f6">Cancelar</button>
|
||||
<button class="btn btn-primary" onclick="salvarMenu()">Salvar</button>
|
||||
<div class="form-group"><label for="menuOrdem">Ordem</label><input type="number" id="menuOrdem" value="0" min="0" style="width:80px"></div>
|
||||
<div class="form-group"><label for="menuPai">Subordinado a (opcional)</label><select id="menuPai"><option value="">Nenhum (raiz da equipe)</option></select></div>
|
||||
<div class="form-group"><label>Etiquetas (adicionar ao selecionar)</label><div id="menuEtiquetasContainer" style="display:flex;flex-wrap:wrap;gap:6px;padding:6px;border:1px solid var(--border);border-radius:8px;min-height:36px"></div></div>
|
||||
<div id="menuFeedback" class="feedback-msg"></div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="fecharModal('modalMenu')">Cancelar</button>
|
||||
<button class="btn-primary" onclick="salvarMenu()">Salvar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Conexão -->
|
||||
<div class="modal-overlay" id="modalConexao" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);align-items:center;justify-content:center;z-index:1000">
|
||||
<div style="background:#fff;border-radius:12px;padding:24px;width:90%;max-width:500px">
|
||||
<div class="modal-overlay" id="modalConexao">
|
||||
<div class="modal" style="max-width:500px">
|
||||
<h3 id="modalConexaoTitle">Nova Conexão WhatsApp</h3>
|
||||
<input type="hidden" id="editConexaoId">
|
||||
<div class="form-group"><label>Nome da Instância</label><input type="text" id="conNome" placeholder="Ex: WhatsApp Comercial"></div>
|
||||
<div class="form-group"><label>URL Evolution API</label><input type="text" id="conUrl" value="https://evoatende.c2sistemas.com.br" placeholder="https://evoatende.c2sistemas.com.br"></div>
|
||||
<div class="form-group"><label>API Key</label><input type="text" id="conApiKey" placeholder="API Key"></div>
|
||||
<div class="form-group"><label>Nome da Instância (Evolution)</label><input type="text" id="conInstance" placeholder="Ex: empresa1-wpp"></div>
|
||||
<div style="display:flex;gap:8px;justify-content:flex-end">
|
||||
<button class="btn" onclick="fecharModal('modalConexao')" style="background:#f3f4f6">Cancelar</button>
|
||||
<button class="btn btn-primary" onclick="salvarConexao()" id="btnSalvarConexao">Conectar</button>
|
||||
<div class="form-group"><label for="conNome">Nome da Instância</label><input type="text" id="conNome" placeholder="Ex: WhatsApp Comercial"></div>
|
||||
<div class="form-group"><label for="conUrl">URL Evolution API</label><input type="text" id="conUrl" value="https://evoatende.c2sistemas.com.br" placeholder="https://evoatende.c2sistemas.com.br"></div>
|
||||
<div class="form-group"><label for="conApiKey">API Key</label><input type="text" id="conApiKey" placeholder="API Key"></div>
|
||||
<div class="form-group"><label for="conInstance">Nome da Instância (Evolution)</label><input type="text" id="conInstance" placeholder="Ex: empresa1-wpp"></div>
|
||||
<div id="conexaoFeedback" class="feedback-msg"></div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-secondary" onclick="fecharModal('modalConexao')">Cancelar</button>
|
||||
<button class="btn-primary" onclick="salvarConexao()" id="btnSalvarConexao">Conectar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -251,6 +259,16 @@ window.darkModeIsDark=function(){return localStorage.getItem('chatc2_dark_mode')
|
||||
<script>
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
// Fechar modais com Esc
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
document.querySelectorAll('.modal-overlay.show, .modal.show').forEach(function(m) {
|
||||
m.classList.remove('show');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const token = localStorage.getItem('chatc2_token');
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
const alias = pathParts[2] || localStorage.getItem('chatc2_alias') || 'lajedo';
|
||||
@@ -298,14 +316,14 @@ async function carregarEquipes() {
|
||||
var data = await api('/teams?empresaId=' + empresaId);
|
||||
var div = document.getElementById('equipesList');
|
||||
if (!data.success || !data.data || data.data.length === 0) {
|
||||
div.innerHTML = '<p style="color:#9ca3af">Nenhuma equipe cadastrada</p>';
|
||||
div.innerHTML = '<p style="color:var(--text-faint)">Nenhuma equipe cadastrada</p>';
|
||||
return;
|
||||
}
|
||||
div.innerHTML = '<table><thead><tr><th>Ordem</th><th>Nome</th><th>Membros</th><th>Ações</th></tr></thead><tbody>' +
|
||||
data.data.map(function(eq) {
|
||||
var membros = (eq.membros || []).map(function(m) { return m.nome; }).join(', ') || '-';
|
||||
return '<tr><td>' + (eq.ordem || 0) + '</td><td><strong>' + eq.nome + '</strong></td><td>' + membros + '</td><td>' +
|
||||
'<button class="btn btn-sm" onclick="editarEquipe(' + eq.id + ',' + (eq.ordem || 0) + ',\'' + eq.nome.replace(/'/g,"\\'") + '\')" style="background:#f3f4f6;margin-right:4px">✏️</button>' +
|
||||
'<button class="btn btn-sm" onclick="editarEquipe(' + eq.id + ',' + (eq.ordem || 0) + ',\'' + eq.nome.replace(/'/g,"\\'") + '\')" style="background:var(--surface-3);margin-right:4px">✏️</button>' +
|
||||
'<button class="btn btn-sm btn-danger" onclick="excluirEquipe(' + eq.id + ')">🗑️</button></td></tr>';
|
||||
}).join('') + '</tbody></table>';
|
||||
}
|
||||
@@ -316,7 +334,7 @@ window.mostrarModalEquipe = function() {
|
||||
document.getElementById('equipeNome').value = '';
|
||||
document.getElementById('modalEquipeTitle').textContent = 'Nova Equipe';
|
||||
carregarUsuariosCheckbox();
|
||||
document.getElementById('modalEquipe').style.display = 'flex';
|
||||
document.getElementById('modalEquipe').classList.add('show');
|
||||
};
|
||||
|
||||
window.editarEquipe = function(id, ordem, nome) {
|
||||
@@ -325,13 +343,13 @@ window.editarEquipe = function(id, ordem, nome) {
|
||||
document.getElementById('equipeNome').value = nome;
|
||||
document.getElementById('modalEquipeTitle').textContent = 'Editar Equipe';
|
||||
carregarUsuariosCheckbox(id);
|
||||
document.getElementById('modalEquipe').style.display = 'flex';
|
||||
document.getElementById('modalEquipe').classList.add('show');
|
||||
};
|
||||
|
||||
async function carregarUsuariosCheckbox(equipeId) {
|
||||
var div = document.getElementById('equipeMembros');
|
||||
var data = await api('/company/users?empresaId=' + empresaId);
|
||||
if (!data.success) { div.innerHTML = '<p style="color:#9ca3af">Erro ao carregar</p>'; return; }
|
||||
if (!data.success) { div.innerHTML = '<p style="color:var(--text-faint)">Erro ao carregar</p>'; return; }
|
||||
|
||||
var membrosAtuais = [];
|
||||
if (equipeId) {
|
||||
@@ -352,7 +370,7 @@ window.salvarEquipe = async function() {
|
||||
var ordem = parseInt(document.getElementById('equipeOrdem').value) || 0;
|
||||
var membros = Array.from(document.querySelectorAll('#equipeMembros input:checked')).map(function(cb) { return parseInt(cb.value); });
|
||||
|
||||
if (!nome) return alert('Informe o nome da equipe');
|
||||
if (!nome) { mostrarFeedbackModal('equipeFeedback', 'Informe o nome da equipe', 'erro'); return; }
|
||||
|
||||
if (id) {
|
||||
var r = await api('/teams/' + id, { method: 'PUT', body: JSON.stringify({ nome: nome, ordem: ordem, membros: membros }) });
|
||||
@@ -374,7 +392,7 @@ async function carregarUsuarios() {
|
||||
var data = await api('/company/users?empresaId=' + empresaId);
|
||||
var div = document.getElementById('usuariosList');
|
||||
if (!data.success || !data.data || data.data.length === 0) {
|
||||
div.innerHTML = '<p style="color:#9ca3af">Nenhum usuário encontrado</p>';
|
||||
div.innerHTML = '<p style="color:var(--text-faint)">Nenhum usuário encontrado</p>';
|
||||
return;
|
||||
}
|
||||
div.innerHTML = '<table><thead><tr><th>Nome</th><th>Login</th><th>Tipo Chat</th></tr></thead><tbody>' +
|
||||
@@ -393,7 +411,7 @@ async function carregarMenus() {
|
||||
var div = document.getElementById('menusList');
|
||||
|
||||
if (!eqData.success || !eqData.data || eqData.data.length === 0) {
|
||||
div.innerHTML = '<p style="color:#9ca3af">Crie equipes primeiro para configurar os submenus.</p>';
|
||||
div.innerHTML = '<p style="color:var(--text-faint)">Crie equipes primeiro para configurar os submenus.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -404,8 +422,8 @@ async function carregarMenus() {
|
||||
var menusEq = menusAgrupados.find(function(g) { return g.equipeId === eq.id; });
|
||||
var temMenus = menusEq && menusEq.menus && menusEq.menus.length > 0;
|
||||
|
||||
html += '<div style="margin-bottom:16px;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden">';
|
||||
html += '<div style="background:#f9fafb;padding:10px 14px;font-weight:600;font-size:14px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between">';
|
||||
html += '<div style="margin-bottom:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden">';
|
||||
html += '<div style="background:var(--surface-2);padding:10px 14px;font-weight:600;font-size:14px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between">';
|
||||
html += '<span>👥 ' + eq.nome + '</span>';
|
||||
html += '<button class="btn btn-sm" onclick="mostrarModalMenu(' + eq.id + ')" style="background:#e0e7ff">+ Submenu</button>';
|
||||
html += '</div>';
|
||||
@@ -413,7 +431,7 @@ async function carregarMenus() {
|
||||
if (temMenus) {
|
||||
html += '<div style="padding:4px 0">' + montarArvoreHtml(menusEq.menus, 0) + '</div>';
|
||||
} else {
|
||||
html += '<p style="padding:12px 14px;color:#9ca3af;font-size:13px;margin:0">Nenhum submenu configurado.</p>';
|
||||
html += '<p style="padding:12px 14px;color:var(--text-faint);font-size:13px;margin:0">Nenhum submenu configurado.</p>';
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
@@ -427,8 +445,8 @@ function montarArvoreHtml(menus, nivel) {
|
||||
menus.forEach(function(m) {
|
||||
var tipoIcon = m.tipo === 'M' ? '📂' : m.tipo === 'T' ? '💬' : m.tipo === 'R' ? '⚙️' : '❓';
|
||||
html += '<div style="display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid #f3f4f6">';
|
||||
html += '<span style="flex:1;font-size:13px">' + tipoIcon + ' ' + m.titulo + ' <span style="color:#9ca3af;font-size:11px">(' + m.tipo + ')</span></span>';
|
||||
html += '<button class="btn btn-sm" onclick="mostrarModalMenu(' + m.equipeId + ',' + m.id + ')" style="background:#f3f4f6;margin-right:4px;padding:4px 8px;font-size:11px">✏️</button>';
|
||||
html += '<span style="flex:1;font-size:13px">' + tipoIcon + ' ' + m.titulo + ' <span style="color:var(--text-faint);font-size:11px">(' + m.tipo + ')</span></span>';
|
||||
html += '<button class="btn btn-sm" onclick="mostrarModalMenu(' + m.equipeId + ',' + m.id + ')" style="background:var(--surface-3);margin-right:4px;padding:4px 8px;font-size:11px">✏️</button>';
|
||||
html += '<button class="btn btn-sm" onclick="excluirMenu(' + m.id + ',\'' + m.titulo.replace(/'/g,"\\'") + '\')" style="background:#fef2f2;color:#991b1b;padding:4px 8px;font-size:11px">🗑️</button>';
|
||||
html += '<button class="btn btn-sm" onclick="mostrarModalMenu(' + m.equipeId + ',null,' + m.id + ')" style="margin-left:4px;padding:4px 8px;font-size:11px">➕ Sub</button>';
|
||||
html += '</div>';
|
||||
@@ -545,7 +563,7 @@ window.mostrarModalMenu = async function(equipeId, editMenuId, parentMenuId) {
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('modalMenu').style.display = 'flex';
|
||||
document.getElementById('modalMenu').classList.add('show');
|
||||
};
|
||||
|
||||
window.mudarTipoMenu = function() {
|
||||
@@ -575,12 +593,12 @@ async function buscarEtiquetasDoMenu(menuId) {
|
||||
function renderEtiquetasCheckbox(data, selecionadas) {
|
||||
var container = document.getElementById('menuEtiquetasContainer');
|
||||
if (!data.success || !data.data || data.data.length === 0) {
|
||||
container.innerHTML = '<span style="color:#9ca3af;font-size:12px">Nenhuma etiqueta cadastrada</span>';
|
||||
container.innerHTML = '<span style="color:var(--text-faint);font-size:12px">Nenhuma etiqueta cadastrada</span>';
|
||||
return;
|
||||
}
|
||||
container.innerHTML = data.data.map(function(e) {
|
||||
var checked = selecionadas.includes(e.id) ? 'checked' : '';
|
||||
return '<label style="display:flex;align-items:center;gap:4px;padding:4px 8px;background:#f3f4f6;border-radius:6px;font-size:12px;cursor:pointer">' +
|
||||
return '<label style="display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--surface-3);border-radius:6px;font-size:12px;cursor:pointer">' +
|
||||
'<input type="checkbox" value="' + e.id + '" ' + checked + ' style="accent-color:#667eea"> ' +
|
||||
'<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:' + (e.cor || '#667eea') + '"></span> ' +
|
||||
e.nome +
|
||||
@@ -601,8 +619,8 @@ window.salvarMenu = async function() {
|
||||
// Etiquetas selecionadas
|
||||
var etiquetaIds = Array.from(document.querySelectorAll('#menuEtiquetasContainer input[type="checkbox"]:checked')).map(function(cb) { return parseInt(cb.value); }).filter(function(v) { return !isNaN(v); }).join(',');
|
||||
|
||||
if (!titulo) return alert('Informe o título');
|
||||
if (!equipeId) return alert('Selecione a equipe');
|
||||
if (!titulo) { mostrarFeedbackModal('menuFeedback', 'Informe o título', 'erro'); return; }
|
||||
if (!equipeId) { mostrarFeedbackModal('menuFeedback', 'Selecione a equipe', 'erro'); return; }
|
||||
|
||||
var body = {
|
||||
empresaId: empresaId,
|
||||
@@ -622,11 +640,11 @@ window.salvarMenu = async function() {
|
||||
var r = await api('/menus/' + editId, { method: 'PUT', body: JSON.stringify(body) });
|
||||
console.log('[Menu] Resposta save:', JSON.stringify(r));
|
||||
if (r.success) { fecharModal('modalMenu'); carregarMenus(); }
|
||||
else alert('Erro: ' + (r.error || 'desconhecido'));
|
||||
else mostrarFeedbackModal('menuFeedback', 'Erro: ' + (r.error || 'desconhecido'), 'erro');
|
||||
} else {
|
||||
var r = await api('/menus', { method: 'POST', body: JSON.stringify(body) });
|
||||
if (r.success) { fecharModal('modalMenu'); carregarMenus(); }
|
||||
else alert('Erro: ' + (r.error || 'desconhecido'));
|
||||
else mostrarFeedbackModal('menuFeedback', 'Erro: ' + (r.error || 'desconhecido'), 'erro');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -641,13 +659,13 @@ async function carregarEtiquetas() {
|
||||
var data = await api('/labels?empresaId=' + empresaId);
|
||||
var div = document.getElementById('etiquetasList');
|
||||
if (!data.success || !data.data || data.data.length === 0) {
|
||||
div.innerHTML = '<p style="color:#9ca3af">Nenhuma etiqueta cadastrada</p>';
|
||||
div.innerHTML = '<p style="color:var(--text-faint)">Nenhuma etiqueta cadastrada</p>';
|
||||
return;
|
||||
}
|
||||
div.innerHTML = '<table><thead><tr><th>Nome</th><th>Cor</th><th>Ações</th></tr></thead><tbody>' +
|
||||
data.data.map(function(l) {
|
||||
return '<tr><td><strong>' + l.nome + '</strong></td><td><span class="tag" style="background:' + l.cor + '">' + l.cor + '</span></td><td>' +
|
||||
'<button class="btn btn-sm" onclick="editarEtiqueta(' + l.id + ',\'' + l.nome.replace(/'/g,"\\'") + '\',\'' + l.cor + '\')" style="background:#f3f4f6;margin-right:4px">✏️</button>' +
|
||||
'<button class="btn btn-sm" onclick="editarEtiqueta(' + l.id + ',\'' + l.nome.replace(/'/g,"\\'") + '\',\'' + l.cor + '\')" style="background:var(--surface-3);margin-right:4px">✏️</button>' +
|
||||
'<button class="btn btn-sm btn-danger" onclick="excluirEtiqueta(' + l.id + ')">🗑️</button></td></tr>';
|
||||
}).join('') + '</tbody></table>';
|
||||
}
|
||||
@@ -657,7 +675,7 @@ window.mostrarModalEtiqueta = function() {
|
||||
document.getElementById('etiquetaNome').value = '';
|
||||
document.getElementById('etiquetaCor').value = '#667eea';
|
||||
document.getElementById('modalEtiquetaTitle').textContent = 'Nova Etiqueta';
|
||||
document.getElementById('modalEtiqueta').style.display = 'flex';
|
||||
document.getElementById('modalEtiqueta').classList.add('show');
|
||||
};
|
||||
|
||||
window.editarEtiqueta = function(id, nome, cor) {
|
||||
@@ -665,14 +683,14 @@ window.editarEtiqueta = function(id, nome, cor) {
|
||||
document.getElementById('etiquetaNome').value = nome;
|
||||
document.getElementById('etiquetaCor').value = cor;
|
||||
document.getElementById('modalEtiquetaTitle').textContent = 'Editar Etiqueta';
|
||||
document.getElementById('modalEtiqueta').style.display = 'flex';
|
||||
document.getElementById('modalEtiqueta').classList.add('show');
|
||||
};
|
||||
|
||||
window.salvarEtiqueta = async function() {
|
||||
var id = document.getElementById('editEtiquetaId').value;
|
||||
var nome = document.getElementById('etiquetaNome').value.trim();
|
||||
var cor = document.getElementById('etiquetaCor').value;
|
||||
if (!nome) return alert('Informe o nome');
|
||||
if (!nome) { mostrarFeedbackModal('etiquetaFeedback', 'Informe o nome', 'erro'); return; }
|
||||
|
||||
if (id) {
|
||||
var r = await api('/labels/' + id, { method: 'PUT', body: JSON.stringify({ nome: nome, cor: cor }) });
|
||||
@@ -704,14 +722,14 @@ async function carregarConfig() {
|
||||
'<div class="form-group"><div class="toggle"><input type="checkbox" id="cfgNomeUser" ' + (cfg.enviarNomeUsuario === 'S' ? 'checked' : '') + '> <label for="cfgNomeUser">Mostrar nome do usuário nas mensagens ("Nome: Mensagem")</label></div></div>' +
|
||||
'<div class="form-group"><div class="toggle"><input type="checkbox" id="cfgEnviarBoleto" ' + (cfg.enviarBoleto === 'S' ? 'checked' : '') + '> <label for="cfgEnviarBoleto">💳 Permitir enviar boleto na conversa (botão "Enviar boleto")</label></div></div>' +
|
||||
'<div class="form-group"><div class="toggle"><input type="checkbox" id="cfgTriagem" ' + (cfg.triagemAtiva === 'S' ? 'checked' : '') + '> <label for="cfgTriagem">📋 Ativar fluxo de triagem (menu de opções)</label></div></div>' +
|
||||
'<div class="form-group" id="triagemConfig" style="display:' + (cfg.triagemAtiva === 'S' ? 'block' : 'none') + ';padding:12px;background:#f9fafb;border-radius:8px;margin-bottom:12px">' +
|
||||
'<div class="form-group" id="triagemConfig" style="display:' + (cfg.triagemAtiva === 'S' ? 'block' : 'none') + ';padding:12px;background:var(--surface-2);border-radius:8px;margin-bottom:12px">' +
|
||||
'<div class="form-group"><label>Mensagem de boas-vindas (use {EMPRESA} para o nome)</label><textarea id="cfgTriagemWelcome" rows="2" style="width:100%;padding:10px;border:2px solid #e5e7eb;border-radius:8px;font-size:13px;resize:vertical">' + (cfg.triagemMsgWelcome || '') + '</textarea></div>' +
|
||||
'<div class="form-group"><label>Mensagem após escolha</label><textarea id="cfgTriagemAfter" rows="2" style="width:100%;padding:10px;border:2px solid #e5e7eb;border-radius:8px;font-size:13px;resize:vertical">' + (cfg.triagemMsgAfter || '') + '</textarea></div>' +
|
||||
'<div class="form-group"><label>Número da opção "Segunda via de Boleto"</label><input type="text" id="cfgTriagemBoletoNum" value="' + (cfg.triagemBoletoNumero || '0') + '" style="width:100%;padding:10px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px"></div>' +
|
||||
'</div>' +
|
||||
'<div class="form-group"><div class="toggle"><input type="checkbox" id="cfgCsat" ' + (cfg.csatAtivo === 'S' ? 'checked' : '') + '> <label for="cfgCsat">Ativar CSAT (Pesquisa de satisfação)</label></div></div>' +
|
||||
'<div class="form-group"><label>Mensagem CSAT</label><textarea id="cfgCsatMsg">' + (cfg.csatMensagem || '') + '</textarea></div>' +
|
||||
'<button class="btn btn-primary" onclick="salvarConfig()">💾 Salvar Configurações</button>';
|
||||
'<div id="configFeedback" class="feedback-msg"></div><button class="btn btn-primary" onclick="salvarConfig()">💾 Salvar Configurações</button>';
|
||||
|
||||
// Evento para toggle da triagem
|
||||
document.getElementById('cfgTriagem').addEventListener('change', function() {
|
||||
@@ -750,7 +768,7 @@ window.salvarConfig = async function() {
|
||||
};
|
||||
|
||||
var r = await api('/company/config', { method: 'POST', body: JSON.stringify(data) });
|
||||
if (r.success) alert('Configurações salvas com sucesso!');
|
||||
if (r.success) mostrarFeedbackModal('configFeedback', 'Configurações salvas com sucesso!', 'sucesso');
|
||||
};
|
||||
|
||||
// O addEventListener do cfgTriagem é adicionado dentro do carregarConfig() após criar o HTML
|
||||
@@ -764,11 +782,11 @@ async function carregarResolucao() {
|
||||
if (div && md.success) {
|
||||
div.innerHTML = (md.data && md.data.length)
|
||||
? md.data.map(function(m) {
|
||||
return '<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border:1px solid #eee;border-radius:6px;margin-bottom:4px">' +
|
||||
return '<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border:1px solid var(--border);border-radius:6px;margin-bottom:4px">' +
|
||||
'<span style="font-size:13px">' + escc(m.descricao) + '</span>' +
|
||||
'<button class="btn btn-sm" style="color:#dc2626;background:none;border:none;cursor:pointer" onclick="removerMotivo(' + m.id + ')">🗑️</button></div>';
|
||||
}).join('')
|
||||
: '<p style="color:#9ca3af;font-size:13px">Nenhum motivo cadastrado.</p>';
|
||||
: '<p style="color:var(--text-faint);font-size:13px">Nenhum motivo cadastrado.</p>';
|
||||
}
|
||||
var cd = await api('/company/config?empresaId=' + empresaId);
|
||||
if (cd.success) {
|
||||
@@ -785,15 +803,23 @@ window.adicionarMotivo = async function() {
|
||||
var d = (inp.value || '').trim();
|
||||
if (!d) return;
|
||||
var r = await api('/motivos', { method: 'POST', body: JSON.stringify({ descricao: d, empresaId: empresaId }) });
|
||||
if (r.success) { inp.value = ''; carregarResolucao(); } else alert(r.error || 'Erro ao adicionar motivo');
|
||||
if (r.success) { inp.value = ''; carregarResolucao(); } else mostrarFeedbackResolucao(r.error || 'Erro ao adicionar motivo', 'erro');
|
||||
};
|
||||
|
||||
window.removerMotivo = async function(id) {
|
||||
if (!confirm('Remover este motivo?')) return;
|
||||
var r = await api('/motivos/' + id, { method: 'DELETE' });
|
||||
if (r.success) carregarResolucao(); else alert(r.error || 'Erro ao remover');
|
||||
if (r.success) carregarResolucao(); else mostrarFeedbackResolucao(r.error || 'Erro ao remover', 'erro');
|
||||
};
|
||||
|
||||
function mostrarFeedbackResolucao(msg, tipo) {
|
||||
var fb = document.getElementById('resolucaoFeedback');
|
||||
if (!fb) return;
|
||||
fb.textContent = msg;
|
||||
fb.className = 'feedback-msg ' + tipo;
|
||||
setTimeout(function() { fb.className = 'feedback-msg'; }, 4000);
|
||||
}
|
||||
|
||||
window.salvarResolucao = async function() {
|
||||
var body = {
|
||||
empresaId: empresaId,
|
||||
@@ -803,7 +829,7 @@ window.salvarResolucao = async function() {
|
||||
resolucaoObrigatorio: document.getElementById('flgResolObr').checked ? 'S' : 'N',
|
||||
};
|
||||
var r = await api('/company/resolucao-config', { method: 'POST', body: JSON.stringify(body) });
|
||||
if (r.success) alert('Fluxo de Resolução salvo!'); else alert(r.error || 'Erro ao salvar');
|
||||
if (r.success) mostrarFeedbackModal('resolucaoFeedback', 'Fluxo de Resolução salvo!', 'sucesso'); else mostrarFeedbackModal('resolucaoFeedback', r.error || 'Erro ao salvar', 'erro');
|
||||
};
|
||||
|
||||
// ===== CONEXÕES =====
|
||||
@@ -811,7 +837,7 @@ async function carregarConexoes() {
|
||||
var data = await api('/evolution/instances?empresaId=' + empresaId);
|
||||
var div = document.getElementById('conexoesList');
|
||||
if (!data.success || !data.data || data.data.length === 0) {
|
||||
div.innerHTML = '<p style="color:#9ca3af">Nenhuma conexão cadastrada</p>';
|
||||
div.innerHTML = '<p style="color:var(--text-faint)">Nenhuma conexão cadastrada</p>';
|
||||
return;
|
||||
}
|
||||
div.innerHTML = '<table><thead><tr><th>Nome</th><th>Instância</th><th>URL</th><th>Status</th><th>Ações</th></tr></thead><tbody>' +
|
||||
@@ -821,9 +847,9 @@ async function carregarConexoes() {
|
||||
ins.status === 'D' ? '<span class="badge badge-danger">⛔ Desconectado</span>' : '<span class="badge badge-danger">❌ ' + ins.status + '</span>';
|
||||
var nomeEsc = (ins.nome || '').replace(/'/g, "\\'");
|
||||
return '<tr><td><strong>' + ins.nome + '</strong></td><td>' + ins.instanceName + '</td><td style="font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis">' + ins.url + '</td><td>' + status + '</td><td>' +
|
||||
'<button class="btn btn-sm" onclick="editarConexao(' + ins.id + ')" style="background:#f3f4f6;margin-right:4px">✏️</button>' +
|
||||
'<button class="btn btn-sm" onclick="editarConexao(' + ins.id + ')" style="background:var(--surface-3);margin-right:4px">✏️</button>' +
|
||||
'<button class="btn btn-sm" onclick="excluirConexao(' + ins.id + ',\'' + nomeEsc + '\')" style="background:#fef2f2;color:#991b1b;margin-right:4px">🗑️</button>' +
|
||||
'<button class="btn btn-sm" onclick="gerarQRCode(' + ins.id + ')" style="background:#f3f4f6">📱 QR Code</button></td></tr>';
|
||||
'<button class="btn btn-sm" onclick="gerarQRCode(' + ins.id + ')" style="background:var(--surface-3)">📱 QR Code</button></td></tr>';
|
||||
}).join('') + '</tbody></table>';
|
||||
}
|
||||
|
||||
@@ -835,7 +861,7 @@ window.mostrarModalConexao = function() {
|
||||
document.getElementById('conInstance').value = '';
|
||||
document.getElementById('modalConexaoTitle').textContent = 'Nova Conexão WhatsApp';
|
||||
document.getElementById('btnSalvarConexao').textContent = 'Conectar';
|
||||
document.getElementById('modalConexao').style.display = 'flex';
|
||||
document.getElementById('modalConexao').classList.add('show');
|
||||
};
|
||||
|
||||
window.gerarQRCode = async function(id) {
|
||||
@@ -847,9 +873,9 @@ window.gerarQRCode = async function(id) {
|
||||
w.document.write('<html><head><title>QR Code</title></head><body style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font-family:sans-serif">' +
|
||||
'<h2 style="margin-bottom:20px">Escaneie o QR Code</h2>' +
|
||||
'<img src="' + imgSrc + '" style="max-width:300px">' +
|
||||
'<p style="margin-top:20px;color:#6b7280">Abra o WhatsApp no celular e escaneie</p></body></html>');
|
||||
'<p style="margin-top:20px;color:var(--text-muted)">Abra o WhatsApp no celular e escaneie</p></body></html>');
|
||||
} else {
|
||||
alert('Erro ao gerar QR Code: ' + JSON.stringify(r.data));
|
||||
mostrarFeedbackModal('conexaoFeedback', 'Erro ao gerar QR Code', 'erro');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -857,9 +883,9 @@ window.gerarQRCode = async function(id) {
|
||||
window.editarConexao = async function(id) {
|
||||
// Busca dados atuais da API
|
||||
var data = await api('/evolution/instances?empresaId=' + empresaId);
|
||||
if (!data.success) return alert('Erro ao carregar dados');
|
||||
if (!data.success) { mostrarFeedbackModal('conexaoFeedback', 'Erro ao carregar dados', 'erro'); return; }
|
||||
var ins = data.data.find(function(i) { return i.id === id; });
|
||||
if (!ins) return alert('Instância não encontrada');
|
||||
if (!ins) { mostrarFeedbackModal('conexaoFeedback', 'Instância não encontrada', 'erro'); return; }
|
||||
|
||||
document.getElementById('editConexaoId').value = id;
|
||||
document.getElementById('conNome').value = ins.nome;
|
||||
@@ -868,7 +894,7 @@ window.editarConexao = async function(id) {
|
||||
document.getElementById('conInstance').value = ins.instanceName;
|
||||
document.getElementById('modalConexaoTitle').textContent = 'Editar Conexão WhatsApp';
|
||||
document.getElementById('btnSalvarConexao').textContent = 'Salvar';
|
||||
document.getElementById('modalConexao').style.display = 'flex';
|
||||
document.getElementById('modalConexao').classList.add('show');
|
||||
};
|
||||
|
||||
// ===== EXCLUIR CONEXÃO =====
|
||||
@@ -878,7 +904,7 @@ window.excluirConexao = async function(id, nome) {
|
||||
if (r.success) {
|
||||
carregarConexoes();
|
||||
} else {
|
||||
alert('Erro: ' + r.error);
|
||||
mostrarFeedbackModal('conexaoFeedback', 'Erro: ' + r.error, 'erro');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -892,7 +918,7 @@ window.salvarConexao = async function() {
|
||||
};
|
||||
|
||||
if (!data.INS_NOME || !data.INS_URL || !data.INS_API_KEY || !data.INS_INSTANCE_NAME)
|
||||
return alert('Preencha todos os campos');
|
||||
mostrarFeedbackModal('conexaoFeedback', 'Preencha todos os campos', 'erro'); return;
|
||||
|
||||
var r;
|
||||
if (editId) {
|
||||
@@ -912,16 +938,24 @@ window.salvarConexao = async function() {
|
||||
carregarConexoes();
|
||||
if (!editId && r.data && r.data.id) gerarQRCode(r.data.id);
|
||||
} else {
|
||||
alert('Erro: ' + r.error);
|
||||
mostrarFeedbackModal('conexaoFeedback', 'Erro: ' + r.error, 'erro');
|
||||
}
|
||||
};
|
||||
|
||||
// ===== MODAIS =====
|
||||
window.fecharModal = function(id) { document.getElementById(id).style.display = 'none'; };
|
||||
window.fecharModal = function(id) { document.getElementById(id).classList.remove('show'); };
|
||||
|
||||
function mostrarFeedbackModal(elId, msg, tipo) {
|
||||
var fb = document.getElementById(elId);
|
||||
if (!fb) return;
|
||||
fb.textContent = msg;
|
||||
fb.className = 'feedback-msg ' + tipo;
|
||||
setTimeout(function() { fb.className = 'feedback-msg'; }, 4000);
|
||||
}
|
||||
|
||||
// Fechar modal ao clicar fora
|
||||
document.querySelectorAll('.modal-overlay').forEach(function(el) {
|
||||
el.addEventListener('click', function(e) { if (e.target === this) this.style.display = 'none'; });
|
||||
el.addEventListener('click', function(e) { if (e.target === this) this.classList.remove('show'); });
|
||||
});
|
||||
|
||||
// ===== INICIAR =====
|
||||
@@ -936,5 +970,8 @@ carregarResolucao();
|
||||
})();
|
||||
</script>
|
||||
<script src="/js/dark-mode.js"></script>
|
||||
<!-- impeccable-live-start -->
|
||||
<script src="http://localhost:8400/live.js"></script>
|
||||
<!-- impeccable-live-end -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user