Add Campanhas tab: listing and campaign creation

public/index.html

@@ -16,6 +16,7 @@
   <nav class="tabs" role="tablist">
     <button class="tab active" data-tab="captura" role="tab" aria-selected="true">📡 Capturar Leads</button>
     <button class="tab" data-tab="tratamento" role="tab" aria-selected="false">📊 Tratar Leads</button>
+    <button class="tab" data-tab="campanhas" role="tab" aria-selected="false">🎯 Campanhas</button>
   </nav>
   <span class="muted" id="usuario-logado"></span>
   <button class="btn-ghost hidden" id="btn-usuarios" title="Usuários">👤 Usuários</button>
@@ -226,6 +227,48 @@
       <div id="historico-exports" class="lista"></div>
     </div>
   </section>
+
+  <!-- ==================== CAMPANHAS ==================== -->
+  <section id="tab-campanhas" class="tab-panel">
+    <div class="row space-between">
+      <h2>Campanhas de outreach</h2>
+      <button class="btn-ghost btn-sm" id="btn-nova-campanha" type="button">+ Nova campanha</button>
+    </div>
+    <div id="campanhas-lista" class="lista"></div>
+
+    <dialog id="modal-nova-campanha">
+      <form id="form-nova-campanha" method="dialog">
+        <h2>Nova campanha</h2>
+        <div class="field">
+          <label for="campanha-nome">Nome</label>
+          <input type="text" id="campanha-nome" required>
+        </div>
+        <div class="field">
+          <label for="campanha-produto">Produto</label>
+          <select id="campanha-produto" required></select>
+        </div>
+        <div class="field">
+          <label>Segmentos</label>
+          <div id="campanha-segmentos" class="chips"></div>
+        </div>
+        <div class="field">
+          <label>Variantes de mensagem (A/B/C)</label>
+          <div id="campanha-variantes"></div>
+          <button class="btn-ghost btn-sm" id="btn-add-variante" type="button">+ Variante</button>
+        </div>
+        <div class="row">
+          <label>Limite diário inicial <input type="number" id="campanha-limite-inicial" value="10" min="1"></label>
+          <label>Teto do limite <input type="number" id="campanha-limite-teto" value="80" min="1"></label>
+        </div>
+        <p class="muted" id="campanha-erro"></p>
+        <div class="row space-between">
+          <button class="btn-ghost" id="btn-cancelar-campanha" type="button">Cancelar</button>
+          <button class="btn btn-primary" id="btn-salvar-campanha" type="button">Criar campanha</button>
+        </div>
+      </form>
+    </dialog>
+  </section>
+
 </main>
 
 <!-- Modal de exportação -->
@@ -480,6 +523,7 @@
 <script src="/js/api.js"></script>
 <script src="/js/captura.js"></script>
 <script src="/js/tratamento.js"></script>
+<script src="/js/campanhas.js"></script>
 <script src="/js/app.js"></script>
 </body>
 </html>