From b2fa6d1bb9a1f18a934a8e5553f199e5ad984e72 Mon Sep 17 00:00:00 2001
From: Tiago <tiago@seconectai.com.br>
Date: Sat, 10 Oct 2026 16:43:15 -0300
Subject: [PATCH] feat(master): abrir formulario de novo cliente em modal popup

---
 src/main/webapp/master/clientes.html | 46 +++++++++++++++-------------
 src/main/webapp/master/clientes.js   | 24 +++++++++------
 2 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/main/webapp/master/clientes.html b/src/main/webapp/master/clientes.html
index e545c20..0182513 100644
--- a/src/main/webapp/master/clientes.html
+++ b/src/main/webapp/master/clientes.html
@@ -22,7 +22,7 @@
           <button class="search-icon-btn" type="button" onclick="alternarBusca()" aria-label="Buscar clientes" title="Buscar">
             <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m16.5 16.5 4 4"></path></svg>
           </button>
-          <button class="header-add-btn" type="button" onclick="alternarCadastro()" title="Novo cadastro" aria-label="Novo cadastro">
+          <button class="header-add-btn" type="button" onclick="abrirModalCadastro()" title="Novo cliente" aria-label="Novo cliente">
             <svg viewBox="0 0 24 24" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
           </button>
         </div>
@@ -32,26 +32,6 @@
         <input id="busca" placeholder="Buscar por slug, nome, CNPJ, status ou plano">
       </div>
 
-      <div id="cadastro-wrap" class="hidden" style="margin-bottom: 20px; padding: 18px; background: var(--panel-muted); border: 1px solid var(--line); border-radius: var(--radius);">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;">
-          <h3 style="margin: 0; font-size: 16px; font-weight: 800;">Novo cadastro</h3>
-          <button class="btn secondary" type="button" onclick="alternarCadastro(false)" style="min-height: 32px; padding: 4px 10px; font-size: 13px;">Fechar</button>
-        </div>
-        <form id="empresa-form" class="grid cols">
-          <div class="field"><label>Slug</label><input name="slug" required></div>
-          <div class="field"><label>Nome</label><input name="nome" required></div>
-          <div class="field"><label>CNPJ</label><input name="cnpj"></div>
-          <div class="field"><label>Plano</label><select name="plano_id" id="plano-select"><option value="">Sem plano</option></select></div>
-          <div class="field"><label>WhatsApp</label><input name="telefone" placeholder="5599999999999"></div>
-          <div class="field"><label>E-mail de login</label><input name="email" type="email" required></div>
-          <div class="field"><label>Senha inicial</label><input name="senha" type="password" required></div>
-          <div class="row" style="align-self: end; gap: 8px;">
-            <button class="btn" type="submit">Cadastrar</button>
-            <button class="btn secondary" type="button" onclick="alternarCadastro(false)">Cancelar</button>
-          </div>
-        </form>
-      </div>
-
       <div class="table-wrap">
         <table>
           <thead>
@@ -67,6 +47,30 @@
         </table>
       </div>
     </section>
+
+    <!-- Modal de Novo Cadastro (Popup) -->
+    <div id="cadastro-modal" class="modal hidden">
+      <div class="modal-backdrop" onclick="fecharModalCadastro()"></div>
+      <section class="modal-panel">
+        <div class="modal-head">
+          <h2>Novo cliente</h2>
+          <button class="btn secondary" type="button" onclick="fecharModalCadastro()">Fechar</button>
+        </div>
+        <form id="empresa-form" class="grid cols">
+          <div class="field"><label>Slug</label><input name="slug" required></div>
+          <div class="field"><label>Nome</label><input name="nome" required></div>
+          <div class="field"><label>CNPJ</label><input name="cnpj"></div>
+          <div class="field"><label>Plano</label><select name="plano_id" id="plano-select"><option value="">Sem plano</option></select></div>
+          <div class="field"><label>WhatsApp</label><input name="telefone" placeholder="5599999999999"></div>
+          <div class="field"><label>E-mail de login</label><input name="email" type="email" required></div>
+          <div class="field"><label>Senha inicial</label><input name="senha" type="password" required></div>
+          <div class="modal-actions" style="grid-column: 1 / -1;">
+            <button class="btn secondary" type="button" onclick="fecharModalCadastro()">Cancelar</button>
+            <button class="btn" type="submit">Cadastrar</button>
+          </div>
+        </form>
+      </section>
+    </div>
   </main>
   <script>Layout.mount('master','clientes');</script>
   <script src="/master/clientes.js"></script>
diff --git a/src/main/webapp/master/clientes.js b/src/main/webapp/master/clientes.js
index a25af14..a0f6fa0 100644
--- a/src/main/webapp/master/clientes.js
+++ b/src/main/webapp/master/clientes.js
@@ -1,4 +1,4 @@
-const empresaForm=document.querySelector('#empresa-form'),rows=document.querySelector('#rows'),busca=document.querySelector('#busca'),planoSelect=document.querySelector('#plano-select');let empresas=[],planos=[],modo=null,selecionado=null;
+const empresaForm=document.querySelector('#empresa-form'),rows=document.querySelector('#rows'),busca=document.querySelector('#busca'),planoSelect=document.querySelector('#plano-select'),cadastroModal=document.querySelector('#cadastro-modal');let empresas=[],planos=[],modo=null,selecionado=null;
 function esc(v){return String(v??'').replace(/[&<>'"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[c]))}
 function planoLabel(p){return `${p.nome} - ${Util.money(p.valor_mensal_centavos)}`}
 function planoOptions(valor){return '<option value="">Sem plano</option>'+planos.map(p=>`<option value="${p.id}" ${String(valor||'')===String(p.id)?'selected':''}>${planoLabel(p)}</option>`).join('')}
@@ -18,16 +18,22 @@ window.alternarBusca=()=>{
   }
 };
 
+window.abrirModalCadastro=()=>{
+  cadastroModal?.classList.remove('hidden');
+  empresaForm.querySelector('input[name="slug"]')?.focus();
+};
+
+window.fecharModalCadastro=()=>{
+  cadastroModal?.classList.add('hidden');
+};
+
 window.alternarCadastro=(forcar)=>{
-  const wrap=document.querySelector('#cadastro-wrap');
-  if(!wrap)return;
   if(typeof forcar==='boolean'){
-    wrap.classList.toggle('hidden',!forcar);
+    if(forcar) abrirModalCadastro();
+    else fecharModalCadastro();
   }else{
-    wrap.classList.toggle('hidden');
-  }
-  if(!wrap.classList.contains('hidden')){
-    empresaForm.querySelector('input[name="slug"]')?.focus();
+    if(cadastroModal?.classList.contains('hidden')) abrirModalCadastro();
+    else fecharModalCadastro();
   }
 };
 
@@ -36,7 +42,7 @@ empresaForm.onsubmit=async e=>{
   try{
     await Api.post('/api/master/empresas',Util.formData(empresaForm));
     empresaForm.reset();
-    alternarCadastro(false);
+    fecharModalCadastro();
     Util.toast('Cliente cadastrado');
     load();
   }catch(err){