Atualização para que possa mandar mesagens do Zap para grupos
This commit is contained in:
@@ -79,10 +79,11 @@ NOTIFICACAO_SECRET=
|
||||
APP_HOST=localhost:3000
|
||||
APP_NAME=Reem Logística
|
||||
|
||||
# ── WhatsApp (Baileys — sessão pareada por QR code) ────────────────────────
|
||||
# ── WhatsApp (ponte própria — sessão pareada por QR code) ──────────────────
|
||||
# Token compartilhado entre o Rails e o container `whatsapp`. Qualquer string
|
||||
# longa e aleatória: `openssl rand -hex 32`. Sem ele a ponte recusa TUDO.
|
||||
WHATSAPP_TOKEN=troque_por_uma_string_aleatoria_longa
|
||||
# URL da ponte dentro da rede do compose (não mexa, a menos que troque o nome
|
||||
# do serviço no docker-compose.yml).
|
||||
BAILEYS_URL=http://whatsapp:3001
|
||||
# (o nome antigo `BAILEYS_URL` ainda é aceito, para .env já em produção)
|
||||
WHATSAPP_URL=http://whatsapp:3001
|
||||
|
||||
@@ -123,8 +123,13 @@ class ConfiguracaoNotificacao < ApplicationRecord
|
||||
def baileys_exigido? = whatsapp_ativo? && baileys?
|
||||
|
||||
# URL e token da ponte: banco > .env, mesma hierarquia do resto da tela.
|
||||
#
|
||||
# `WHATSAPP_URL` é o nome atual — a tela e o .env.example falam em "ponte do
|
||||
# WhatsApp", não no nome da biblioteca. `BAILEYS_URL` continua sendo lido para
|
||||
# não quebrar quem já tem a variável antiga no .env em produção.
|
||||
def baileys_url_efetiva
|
||||
baileys_url.presence || ENV['BAILEYS_URL'].presence || BAILEYS_URL_PADRAO
|
||||
baileys_url.presence || ENV['WHATSAPP_URL'].presence ||
|
||||
ENV['BAILEYS_URL'].presence || BAILEYS_URL_PADRAO
|
||||
end
|
||||
|
||||
def baileys_token_efetivo
|
||||
|
||||
@@ -97,6 +97,12 @@ module Notificacao
|
||||
def mensagem_de_erro(resposta, dados)
|
||||
return 'Token da ponte do WhatsApp inválido.' if resposta.code == '401'
|
||||
return 'WhatsApp desconectado — leia o QR code na tela.' if resposta.code == '503'
|
||||
# 404 = a ponte respondeu, mas não conhece a rota: a imagem do container
|
||||
# `whatsapp` é anterior a ela. "rota desconhecida" cru na tela não diz o
|
||||
# que fazer; o conserto é rebuildar a ponte, não mexer no Rails.
|
||||
if resposta.code == '404'
|
||||
return 'Ponte do WhatsApp desatualizada (não conhece esta rota) — refaça o build do container `whatsapp`.'
|
||||
end
|
||||
|
||||
dados['erro'].presence || "HTTP #{resposta.code}"
|
||||
end
|
||||
|
||||
@@ -181,7 +181,7 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<%# Provedor: sem este seletor as colunas do Baileys existiam no banco mas
|
||||
<%# Provedor: sem este seletor as colunas da ponte existiam no banco mas
|
||||
não havia como sair do Twilio pela tela — o pareamento por QR ficava
|
||||
inalcançável. %>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
@@ -206,13 +206,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# ── Modo QR (Baileys) ───────────────────────────────── %>
|
||||
<%# ── Modo QR: a ponte própria do WhatsApp ─────────────── %>
|
||||
<div class="p-4 bg-[#0a0a0a] border border-white/5 rounded-xl space-y-4">
|
||||
<p class="text-gray-300 text-sm font-semibold">Modo QR code</p>
|
||||
<p class="text-gray-300 text-sm font-semibold flex items-center gap-2">
|
||||
<%= icone :telefone, tamanho: 'w-4 h-4', espaco: false %> Modo QR code
|
||||
</p>
|
||||
<p class="text-gray-400 text-xs leading-relaxed">
|
||||
⚠️ Canal <strong class="text-amber-300">não oficial</strong> — a Meta pode banir o número.
|
||||
Use um chip dedicado. Em branco, os dois campos abaixo usam
|
||||
<code class="font-mono text-[#f97316]">BAILEYS_URL</code> e
|
||||
<code class="font-mono text-[#f97316]">WHATSAPP_URL</code> e
|
||||
<code class="font-mono text-[#f97316]">WHATSAPP_TOKEN</code> do <code class="font-mono">.env</code>.
|
||||
</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
@@ -230,7 +232,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-300 text-sm font-semibold pt-2">Modo Twilio</p>
|
||||
<p class="text-gray-300 text-sm font-semibold pt-2 flex items-center gap-2">
|
||||
<%= icone :chave, tamanho: 'w-4 h-4', espaco: false %> Modo Twilio
|
||||
</p>
|
||||
<p class="text-gray-500 text-xs -mt-2">Credenciais em Twilio Console → Account Info</p>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
|
||||
@@ -1,8 +1,27 @@
|
||||
<%= form_with model: [:admin, contato], data: { turbo: false }, class: 'space-y-5' do |f| %>
|
||||
<%
|
||||
input = 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
|
||||
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
|
||||
focus:ring-[#f97316] transition-colors'
|
||||
rotulo = 'block text-sm font-medium text-gray-300 mb-1.5'
|
||||
ajuda = 'text-gray-500 text-xs mt-1.5'
|
||||
toggle = "w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer
|
||||
peer-checked:after:translate-x-full peer-checked:after:border-white
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:border-gray-300 after:border after:rounded-full
|
||||
after:h-5 after:w-5 after:transition-all peer-checked:bg-[#f97316]"
|
||||
%>
|
||||
<%= form_with model: [:admin, contato], data: { turbo: false },
|
||||
class: 'bg-[#1a1a1a] rounded-2xl border border-white/5 p-8 space-y-6' do |f| %>
|
||||
|
||||
<% if contato.errors.any? %>
|
||||
<div class="bg-red-500/10 border border-red-500/30 rounded-xl px-4 py-3 text-red-300 text-sm">
|
||||
<div class="p-4 bg-red-900/30 border border-red-500/40 rounded-xl">
|
||||
<p class="text-red-400 text-sm font-medium mb-2">
|
||||
<%= pluralize(contato.errors.count, 'erro', 'erros') %> encontrado<%= contato.errors.count > 1 ? 's' : '' %>:
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<% contato.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %>
|
||||
<% contato.errors.full_messages.each do |msg| %>
|
||||
<li class="text-red-300 text-sm"><%= msg %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -10,42 +29,46 @@
|
||||
<%# Pessoa x grupo do WhatsApp. O JavaScript no fim troca os blocos; sem JS a
|
||||
página continua utilizável — os dois blocos ficam visíveis e o model limpa
|
||||
o que não pertence ao tipo escolhido. %>
|
||||
<div data-tipo-contato>
|
||||
<%= f.label :tipo, 'Tipo de destinatário', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.select :tipo,
|
||||
[['Pessoa (número ou e-mail)', 'pessoa'], ['Grupo do WhatsApp', 'grupo_whatsapp']], {},
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500',
|
||||
id: 'contato-tipo' %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :nome, class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.text_field :nome, required: true,
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<p class="text-xs text-gray-500 mt-1">Como aparece nas listas e em <code>{{contato}}</code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4" id="bloco-pessoa">
|
||||
<div>
|
||||
<%= f.label :telefone, 'WhatsApp', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.text_field :telefone, placeholder: '(11) 92005-1157',
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<p class="text-xs text-gray-500 mt-1">Pode digitar com máscara — é normalizado ao salvar.</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div data-tipo-contato>
|
||||
<%= f.label :tipo, 'Tipo de destinatário', class: rotulo %>
|
||||
<%= f.select :tipo,
|
||||
[['Pessoa (número ou e-mail)', 'pessoa'], ['Grupo do WhatsApp', 'grupo_whatsapp']], {},
|
||||
class: "#{input} cursor-pointer", id: 'contato-tipo' %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :email, 'E-mail', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.email_field :email,
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<%= f.label :nome, class: rotulo %>
|
||||
<%= f.text_field :nome, required: true, placeholder: 'Maria Souza', class: input %>
|
||||
<p class="<%= ajuda %>">Como aparece nas listas e em <code class="font-mono text-[#f97316]">{{contato}}</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# ── Pessoa ──────────────────────────────────────────────── %>
|
||||
<div id="bloco-pessoa" class="border-t border-white/5 pt-6">
|
||||
<p class="text-sm font-medium text-gray-300 mb-4">Como falar com esta pessoa</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<%= f.label :telefone, 'WhatsApp', class: rotulo %>
|
||||
<%= f.text_field :telefone, placeholder: '(11) 92005-1157', class: input %>
|
||||
<p class="<%= ajuda %>">Pode digitar com máscara — é normalizado ao salvar.</p>
|
||||
</div>
|
||||
<div>
|
||||
<%= f.label :email, 'E-mail', class: rotulo %>
|
||||
<%= f.email_field :email, placeholder: 'maria@empresa.com', class: input %>
|
||||
<p class="<%= ajuda %>">Sem e-mail, este contato só recebe WhatsApp.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# ── Grupo do WhatsApp ───────────────────────────────────── %>
|
||||
<%# O identificador do grupo é opaco ("120363…@g.us") — digitar na mão é pedir
|
||||
erro. A lista vem da ponte, com o número já conectado. %>
|
||||
<div id="bloco-grupo" data-url="<%= grupos_whatsapp_admin_contatos_path %>">
|
||||
<%= f.label :whatsapp_grupo_jid, 'Grupo do WhatsApp', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<div class="flex gap-2">
|
||||
<select id="grupo-jid" name="contato[whatsapp_grupo_jid]"
|
||||
class="flex-1 bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500">
|
||||
<div id="bloco-grupo" class="border-t border-white/5 pt-6"
|
||||
data-url="<%= grupos_whatsapp_admin_contatos_path %>">
|
||||
<p class="text-sm font-medium text-gray-300 mb-4">Qual grupo do WhatsApp</p>
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<select id="grupo-jid" name="contato[whatsapp_grupo_jid]" class="<%= input %> cursor-pointer flex-1">
|
||||
<% if contato.whatsapp_grupo_jid.present? %>
|
||||
<option value="<%= contato.whatsapp_grupo_jid %>" selected>
|
||||
<%= contato.whatsapp_grupo_nome.presence || contato.whatsapp_grupo_jid %>
|
||||
@@ -55,38 +78,53 @@
|
||||
<% end %>
|
||||
</select>
|
||||
<button type="button" id="btn-carregar-grupos"
|
||||
class="px-4 py-2.5 rounded-xl text-sm whitespace-nowrap bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500">
|
||||
Buscar grupos
|
||||
class="inline-flex items-center justify-center gap-2 px-6 py-3 border border-white/10
|
||||
hover:border-white/20 text-gray-300 hover:text-white rounded-xl
|
||||
transition-colors whitespace-nowrap cursor-pointer disabled:opacity-50">
|
||||
<%= icone :buscar, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<span data-btn-texto>Buscar grupos</span>
|
||||
</button>
|
||||
</div>
|
||||
<%= f.hidden_field :whatsapp_grupo_nome, id: 'grupo-nome' %>
|
||||
<p class="text-xs text-gray-500 mt-1" id="grupo-aviso">
|
||||
<p class="<%= ajuda %>" id="grupo-aviso">
|
||||
Só aparecem grupos em que o número conectado já é membro. Grupo com "somente
|
||||
administradores" recusa o envio se o número não for admin.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :grupo_contato_id, 'Grupo', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.collection_select :grupo_contato_id, @grupos, :id, :nome, { include_blank: 'Sem grupo (não recebe nada)' },
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<p class="text-xs text-gray-500 mt-1">É o grupo que define quais eventos este contato recebe.</p>
|
||||
<%# ── Assinatura e situação ───────────────────────────────── %>
|
||||
<div class="border-t border-white/5 pt-6 space-y-6">
|
||||
<div>
|
||||
<%= f.label :grupo_contato_id, 'Grupo', class: rotulo %>
|
||||
<%= f.collection_select :grupo_contato_id, @grupos, :id, :nome,
|
||||
{ include_blank: 'Sem grupo (não recebe nada)' }, class: "#{input} cursor-pointer" %>
|
||||
<p class="<%= ajuda %>">É o grupo que define quais eventos este contato recebe.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :observacao, 'Observação', class: rotulo %>
|
||||
<%= f.text_field :observacao, placeholder: 'Opcional', class: input %>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<%= f.label :ativo, 'Contato ativo', class: 'block text-sm font-medium text-gray-300' %>
|
||||
<p class="text-gray-500 text-xs mt-0.5">Contato inativo continua cadastrado, mas não recebe nada</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer ml-4">
|
||||
<%= f.check_box :ativo, class: 'sr-only peer' %>
|
||||
<div class="<%= toggle %>"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :observacao, 'Observação', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.text_field :observacao,
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center gap-2 text-sm text-gray-300">
|
||||
<%= f.check_box :ativo, class: 'rounded border-white/20 bg-[#1a1a1a] text-orange-500' %>
|
||||
Ativo
|
||||
</label>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<%= f.submit 'Salvar', class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400 cursor-pointer' %>
|
||||
<%= link_to 'Cancelar', admin_contatos_path, data: { turbo: false }, class: 'text-gray-400 hover:text-white text-sm' %>
|
||||
<div class="flex items-center justify-between pt-2 border-t border-white/5">
|
||||
<%= link_to 'Cancelar', admin_contatos_path, data: { turbo: false },
|
||||
class: 'px-6 py-3 text-gray-400 hover:text-white border border-white/10
|
||||
hover:border-white/20 rounded-xl transition-colors' %>
|
||||
<%= f.submit contato.new_record? ? 'Criar Contato' : 'Salvar Alterações',
|
||||
class: 'px-8 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
|
||||
rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -101,6 +139,10 @@
|
||||
var botao = document.getElementById('btn-carregar-grupos');
|
||||
if (!tipo || !pessoa || !grupo) return;
|
||||
|
||||
// O rótulo do botão vive num <span> próprio: trocar o textContent do botão
|
||||
// inteiro apagaria o ícone junto.
|
||||
var botaoTexto = botao.querySelector('[data-btn-texto]');
|
||||
|
||||
function alternar() {
|
||||
var ehGrupo = tipo.value === 'grupo_whatsapp';
|
||||
pessoa.classList.toggle('hidden', ehGrupo);
|
||||
@@ -109,6 +151,15 @@
|
||||
tipo.addEventListener('change', alternar);
|
||||
alternar();
|
||||
|
||||
// Estado do aviso: erro em vermelho, sucesso em verde, neutro em cinza —
|
||||
// o texto sozinho não dizia se a busca deu certo.
|
||||
function avisar(texto, estado) {
|
||||
aviso.textContent = texto;
|
||||
aviso.className = 'text-xs mt-1.5 ' + (
|
||||
estado === 'erro' ? 'text-red-400' : estado === 'ok' ? 'text-green-400' : 'text-gray-500'
|
||||
);
|
||||
}
|
||||
|
||||
// O nome do grupo é gravado junto com o id: a tela precisa mostrar algo
|
||||
// legível mesmo com a ponte fora do ar (o id sozinho não diz nada).
|
||||
select.addEventListener('change', function () {
|
||||
@@ -118,13 +169,13 @@
|
||||
|
||||
botao.addEventListener('click', function () {
|
||||
botao.disabled = true;
|
||||
botao.textContent = 'Buscando…';
|
||||
botaoTexto.textContent = 'Buscando…';
|
||||
fetch(grupo.dataset.url, { headers: { Accept: 'application/json' } })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (dados) {
|
||||
if (dados.erro) { aviso.textContent = dados.erro; return; }
|
||||
if (dados.erro) { avisar(dados.erro, 'erro'); return; }
|
||||
if (!dados.grupos.length) {
|
||||
aviso.textContent = 'Nenhum grupo encontrado — o número conectado não participa de nenhum.';
|
||||
avisar('Nenhum grupo encontrado — o número conectado não participa de nenhum.', 'erro');
|
||||
return;
|
||||
}
|
||||
select.innerHTML = '<option value="">— escolha —</option>';
|
||||
@@ -138,10 +189,10 @@
|
||||
o.textContent = g.nome + ' (' + g.participantes + ')' + alerta;
|
||||
select.appendChild(o);
|
||||
});
|
||||
aviso.textContent = dados.grupos.length + ' grupo(s) encontrado(s).';
|
||||
avisar(dados.grupos.length + ' grupo(s) encontrado(s) — escolha um acima.', 'ok');
|
||||
})
|
||||
.catch(function () { aviso.textContent = 'Não foi possível falar com a ponte do WhatsApp.'; })
|
||||
.finally(function () { botao.disabled = false; botao.textContent = 'Buscar grupos'; });
|
||||
.catch(function () { avisar('Não foi possível falar com a ponte do WhatsApp.', 'erro'); })
|
||||
.finally(function () { botao.disabled = false; botaoTexto.textContent = 'Buscar grupos'; });
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<div class="max-w-xl space-y-6">
|
||||
<h1 class="text-2xl font-bold text-white">Editar contato</h1>
|
||||
<%= render "form", contato: @contato %>
|
||||
<div class="max-w-2xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Editar: <%= @contato.nome %></h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">Atualize os dados deste contato</p>
|
||||
</div>
|
||||
<%= render 'shared/flash' %>
|
||||
<%= render 'form', contato: @contato %>
|
||||
</div>
|
||||
|
||||
@@ -1,85 +1,146 @@
|
||||
<div class="space-y-6">
|
||||
|
||||
<%# Header — mesmo padrão de Usuários: título, subtítulo e ação primária %>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Contatos</h1>
|
||||
<h1 class="text-2xl font-bold text-white flex items-center gap-2">
|
||||
<%= icone :usuarios, espaco: false %> Contatos
|
||||
</h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">
|
||||
Quem recebe as mensagens. Quem tem só número recebe só WhatsApp; quem tem só
|
||||
e-mail recebe só e-mail.
|
||||
</p>
|
||||
</div>
|
||||
<%= link_to 'Novo contato', new_admin_contato_path(grupo_id: params[:grupo_id]), data: { turbo: false },
|
||||
class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400' %>
|
||||
<%= link_to new_admin_contato_path(grupo_id: params[:grupo_id]), data: { turbo: false },
|
||||
class: 'inline-flex items-center gap-2 px-5 py-3 bg-[#f97316] hover:bg-orange-500
|
||||
text-white font-semibold rounded-xl transition-colors min-h-[48px] whitespace-nowrap' do %>
|
||||
<%= icone :adicionar, cor: nil, tamanho: 'w-5 h-5', espaco: false %> Novo contato
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<form method="get" action="<%= admin_contatos_path %>" data-turbo="false" class="flex flex-wrap items-center gap-2">
|
||||
<input type="text" name="q" value="<%= params[:q] %>" placeholder="Buscar por nome, número ou e-mail"
|
||||
class="bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500 min-w-[260px]">
|
||||
<select name="grupo_id" class="bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500">
|
||||
<%= render 'shared/flash' %>
|
||||
|
||||
<%# Filtros %>
|
||||
<form method="get" action="<%= admin_contatos_path %>" data-turbo="false"
|
||||
class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4 flex flex-wrap items-center gap-3">
|
||||
<div class="relative flex-1 min-w-[240px]">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
|
||||
<%= icone :buscar, cor: 'text-gray-500', tamanho: 'w-4 h-4', espaco: false %>
|
||||
</span>
|
||||
<input type="text" name="q" value="<%= params[:q] %>" placeholder="Buscar por nome, número ou e-mail"
|
||||
class="w-full pl-10 pr-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
|
||||
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
|
||||
focus:ring-[#f97316] transition-colors text-sm">
|
||||
</div>
|
||||
<select name="grupo_id"
|
||||
class="px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white text-sm
|
||||
focus:outline-none focus:border-[#f97316] focus:ring-1 focus:ring-[#f97316]
|
||||
transition-colors cursor-pointer">
|
||||
<option value="">Todos os grupos</option>
|
||||
<% @grupos.each do |grupo| %>
|
||||
<option value="<%= grupo.id %>" <%= 'selected' if params[:grupo_id].to_s == grupo.id.to_s %>><%= grupo.nome %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
<button type="submit" class="px-4 py-2.5 rounded-xl text-sm bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500">Filtrar</button>
|
||||
<button type="submit"
|
||||
class="px-6 py-3 border border-white/10 hover:border-white/20 text-gray-300
|
||||
hover:text-white rounded-xl transition-colors text-sm cursor-pointer">
|
||||
Filtrar
|
||||
</button>
|
||||
<% if params[:q].present? || params[:grupo_id].present? %>
|
||||
<%= link_to 'Limpar', admin_contatos_path, data: { turbo: false },
|
||||
class: 'text-gray-500 hover:text-white text-sm transition-colors' %>
|
||||
<% end %>
|
||||
</form>
|
||||
|
||||
<%# Tabela %>
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 overflow-hidden">
|
||||
<% if @contatos.empty? %>
|
||||
<p class="px-6 py-10 text-center text-gray-500 text-sm">Nenhum contato encontrado.</p>
|
||||
<% else %>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-white/5 text-gray-400 text-xs uppercase tracking-wider">
|
||||
<tr>
|
||||
<th class="text-left px-6 py-3 font-medium">Nome</th>
|
||||
<th class="text-left px-4 py-3 font-medium">WhatsApp</th>
|
||||
<th class="text-left px-4 py-3 font-medium">E-mail</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Grupo</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Situação</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<% @contatos.each do |contato| %>
|
||||
<tr class="hover:bg-white/5">
|
||||
<td class="px-6 py-2.5 text-white">
|
||||
<%= contato.nome %>
|
||||
<% if contato.grupo_whatsapp? %>
|
||||
<span class="ml-1 px-2 py-0.5 rounded-full bg-green-500/15 border border-green-500/30 text-xs text-green-300">grupo</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-gray-300 font-mono text-xs">
|
||||
<% if contato.grupo_whatsapp? %>
|
||||
<span title="<%= contato.whatsapp_grupo_jid %>"><%= contato.whatsapp_grupo_nome.presence || contato.whatsapp_grupo_jid %></span>
|
||||
<% else %>
|
||||
<%= contato.telefone.presence || '—' %>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-gray-300"><%= contato.email.presence || '—' %></td>
|
||||
<td class="px-4 py-2.5">
|
||||
<% if contato.grupo_contato %>
|
||||
<span class="text-gray-300"><%= contato.grupo_contato.nome %></span>
|
||||
<% else %>
|
||||
<span class="text-amber-400" title="Sem grupo não recebe nada">sem grupo</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="<%= contato.ativo? ? 'text-green-400' : 'text-gray-500' %>">
|
||||
<%= contato.ativo? ? 'Ativo' : 'Inativo' %>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-white/10">
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Nome</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">WhatsApp</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">E-mail</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Grupo</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Situação</th>
|
||||
<th class="px-6 py-4 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<% @contatos.each do |contato| %>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<%# Avatar: inicial para pessoa, ícone para grupo — dá para
|
||||
distinguir os dois tipos sem ler a linha inteira. %>
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 text-sm font-bold
|
||||
<%= contato.grupo_whatsapp? ? 'bg-green-500/15 border border-green-500/30 text-green-300'
|
||||
: 'bg-[#f97316]/20 border border-[#f97316]/30 text-[#f97316]' %>">
|
||||
<% if contato.grupo_whatsapp? %>
|
||||
<%= icone :usuarios, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<% else %>
|
||||
<%= contato.nome.to_s[0].to_s.upcase %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<span class="text-white font-medium"><%= contato.nome %></span>
|
||||
<% if contato.grupo_whatsapp? %>
|
||||
<span class="block text-xs text-green-400">grupo do WhatsApp</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<% if contato.grupo_whatsapp? %>
|
||||
<span class="text-gray-300 text-sm" title="<%= contato.whatsapp_grupo_jid %>">
|
||||
<%= contato.whatsapp_grupo_nome.presence || contato.whatsapp_grupo_jid %>
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-right whitespace-nowrap">
|
||||
<%= link_to 'Editar', edit_admin_contato_path(contato), data: { turbo: false },
|
||||
class: 'text-gray-300 hover:text-orange-400 mr-3' %>
|
||||
<%= button_to 'Excluir', admin_contato_path(contato), method: :delete,
|
||||
form: { data: { turbo_confirm: "Excluir #{contato.nome}?" } },
|
||||
class: 'text-red-400 hover:text-red-300 inline' %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<span class="text-gray-300 text-sm font-mono"><%= contato.telefone.presence || '—' %></span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-300 text-sm"><%= contato.email.presence || '—' %></td>
|
||||
<td class="px-6 py-4">
|
||||
<% if contato.grupo_contato %>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold
|
||||
bg-white/5 border border-white/10 text-gray-300"><%= contato.grupo_contato.nome %></span>
|
||||
<% else %>
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold
|
||||
bg-amber-500/15 border border-amber-500/30 text-amber-300"
|
||||
title="Sem grupo não recebe nada">
|
||||
<%= icone :alerta, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false %> sem grupo
|
||||
</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-6 py-4"><%= badge_status_usuario(contato.ativo?) %></td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<%= link_to edit_admin_contato_path(contato), data: { turbo: false },
|
||||
class: 'p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg transition-colors',
|
||||
title: 'Editar' do %>
|
||||
<%= icone :editar, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<% end %>
|
||||
<%= button_to admin_contato_path(contato), method: :delete,
|
||||
class: 'p-2 text-gray-600 hover:text-red-400 hover:bg-red-900/20 rounded-lg transition-colors',
|
||||
title: 'Excluir',
|
||||
form: { data: { turbo_confirm: "Excluir #{contato.nome}?" } } do %>
|
||||
<%= icone :excluir, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<% end %>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
|
||||
<% if @contatos.empty? %>
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-16 text-center text-gray-500">
|
||||
<div class="mb-3"><%= icone :vazio, tamanho: 'w-10 h-10', cor: 'text-gray-600', espaco: false %></div>
|
||||
<p>Nenhum contato encontrado.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<div class="max-w-xl space-y-6">
|
||||
<h1 class="text-2xl font-bold text-white">Novo contato</h1>
|
||||
<%= render "form", contato: @contato %>
|
||||
<div class="max-w-2xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Novo contato</h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">Cadastre quem vai receber as mensagens</p>
|
||||
</div>
|
||||
<%= render 'shared/flash' %>
|
||||
<%= render 'form', contato: @contato %>
|
||||
</div>
|
||||
|
||||
@@ -1,102 +1,172 @@
|
||||
<%= form_with model: [:admin, evento], url: (evento.persisted? ? admin_evento_path(evento) : admin_eventos_path),
|
||||
data: { turbo: false }, class: 'space-y-5' do |f| %>
|
||||
<%
|
||||
input = 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
|
||||
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
|
||||
focus:ring-[#f97316] transition-colors'
|
||||
menor = 'w-full px-3 py-2.5 bg-[#0a0a0a] border border-white/10 rounded-xl text-white text-sm
|
||||
focus:outline-none focus:border-[#f97316] focus:ring-1 focus:ring-[#f97316] transition-colors'
|
||||
rotulo = 'block text-sm font-medium text-gray-300 mb-1.5'
|
||||
secao = 'text-sm font-medium text-gray-300 mb-4'
|
||||
toggle = "w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer
|
||||
peer-checked:after:translate-x-full peer-checked:after:border-white
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:border-gray-300 after:border after:rounded-full
|
||||
after:h-5 after:w-5 after:transition-all peer-checked:bg-[#f97316]"
|
||||
%>
|
||||
<%= form_with model: [:admin, evento],
|
||||
url: (evento.persisted? ? admin_evento_path(evento) : admin_eventos_path),
|
||||
data: { turbo: false },
|
||||
class: 'bg-[#1a1a1a] rounded-2xl border border-white/5 p-8 space-y-6' do |f| %>
|
||||
|
||||
<% if evento.errors.any? %>
|
||||
<div class="bg-red-500/10 border border-red-500/30 rounded-xl px-4 py-3 text-red-300 text-sm">
|
||||
<div class="p-4 bg-red-900/30 border border-red-500/40 rounded-xl">
|
||||
<p class="text-red-400 text-sm font-medium mb-2">
|
||||
<%= pluralize(evento.errors.count, 'erro', 'erros') %> encontrado<%= evento.errors.count > 1 ? 's' : '' %>:
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<% evento.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %>
|
||||
<% evento.errors.full_messages.each do |msg| %>
|
||||
<li class="text-red-300 text-sm"><%= msg %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div>
|
||||
<%= f.label :nome, class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.text_field :nome, required: true, placeholder: 'Aviso de fechamento para a diretoria',
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div class="sm:col-span-2">
|
||||
<%= f.label :nome, class: rotulo %>
|
||||
<%= f.text_field :nome, required: true,
|
||||
placeholder: 'Aviso de fechamento para a diretoria', class: input %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :gatilho, 'Gatilho (o que faz disparar)', class: rotulo %>
|
||||
<% if evento.sistema? %>
|
||||
<p class="w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
|
||||
flex items-center gap-2">
|
||||
<%= icone :travado, cor: 'text-gray-500', tamanho: 'w-4 h-4', espaco: false %>
|
||||
<%= evento.gatilho_label %>
|
||||
</p>
|
||||
<p class="text-gray-500 text-xs mt-1.5">
|
||||
Evento de sistema: o gatilho e a chave são fixos porque o código dispara por eles.
|
||||
</p>
|
||||
<% else %>
|
||||
<%= f.select :gatilho,
|
||||
EventoNotificacao::GATILHOS.map { |g| [EventoNotificacao::GATILHO_LABEL[g], g] }, {},
|
||||
class: "#{input} cursor-pointer" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :descricao, 'Descrição', class: rotulo %>
|
||||
<%= f.text_field :descricao, placeholder: 'Opcional', class: input %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :gatilho, 'Gatilho (o que faz disparar)', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<% if evento.sistema? %>
|
||||
<p class="text-white text-sm bg-[#141414] border border-white/10 rounded-xl px-3 py-2.5"><%= evento.gatilho_label %></p>
|
||||
<p class="text-xs text-gray-500 mt-1">Evento de sistema: o gatilho e a chave são fixos porque o código dispara por eles.</p>
|
||||
<% else %>
|
||||
<%= f.select :gatilho, EventoNotificacao::GATILHOS.map { |g| [EventoNotificacao::GATILHO_LABEL[g], g] }, {},
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :descricao, 'Descrição', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.text_field :descricao,
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
</div>
|
||||
|
||||
<%# Só faz sentido no gatilho `agendado`; deixo sempre visível para não
|
||||
depender de JS, com a explicação de quando vale. %>
|
||||
<fieldset class="border border-white/10 rounded-xl p-4 space-y-3">
|
||||
<legend class="text-gray-400 text-sm px-2">Agendamento (só vale no gatilho "Agendado")</legend>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<%# Agendamento — só faz sentido no gatilho `agendado`; deixo sempre visível
|
||||
para não depender de JS, com a explicação de quando vale. %>
|
||||
<div class="border-t border-white/5 pt-6">
|
||||
<p class="<%= secao %>">
|
||||
Agendamento
|
||||
<span class="text-gray-500 font-normal">— só vale no gatilho "Agendado"</span>
|
||||
</p>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<%= f.label :frequencia, 'Frequência', class: 'block text-gray-500 text-xs mb-1' %>
|
||||
<%= f.select :frequencia, EventoNotificacao::FREQUENCIAS.map { |x| [x.capitalize, x] }, { include_blank: '—' },
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5' %>
|
||||
<%= f.label :frequencia, 'Frequência', class: rotulo %>
|
||||
<%= f.select :frequencia, EventoNotificacao::FREQUENCIAS.map { |x| [x.capitalize, x] },
|
||||
{ include_blank: '—' }, class: "#{menor} cursor-pointer" %>
|
||||
</div>
|
||||
<div>
|
||||
<%= f.label :hora, 'Hora', class: 'block text-gray-500 text-xs mb-1' %>
|
||||
<%= f.number_field :hora, min: 0, max: 23,
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5' %>
|
||||
<%= f.label :hora, 'Hora', class: rotulo %>
|
||||
<%= f.number_field :hora, min: 0, max: 23, class: menor %>
|
||||
</div>
|
||||
<div>
|
||||
<%= f.label :dia_semana, 'Dia (semanal)', class: 'block text-gray-500 text-xs mb-1' %>
|
||||
<%= f.select :dia_semana, Date::DAYNAMES.each_with_index.map { |nome, i| [nome, i] }, { include_blank: '—' },
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5' %>
|
||||
<%= f.label :dia_semana, 'Dia (semanal)', class: rotulo %>
|
||||
<%= f.select :dia_semana, Date::DAYNAMES.each_with_index.map { |nome, i| [nome, i] },
|
||||
{ include_blank: '—' }, class: "#{menor} cursor-pointer" %>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<label class="flex items-start gap-2 text-sm text-gray-300">
|
||||
<%= f.check_box :notificar_envolvido, class: 'mt-1 rounded border-white/20 bg-[#1a1a1a] text-orange-500' %>
|
||||
<span>
|
||||
Avisar também a pessoa envolvida no fato
|
||||
<span class="block text-xs text-gray-500">Ex.: o motorista dono do pagamento, além dos grupos. Só se aplica aos gatilhos de consolidação/pagamento/valor.</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center gap-2 text-sm text-gray-300">
|
||||
<%= f.check_box :ativo, class: 'rounded border-white/20 bg-[#1a1a1a] text-orange-500' %>
|
||||
Ativo
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<%# Assinatura por grupo: TODOS os grupos ativos aparecem, marcados os que já
|
||||
assinam. Sem isso a tela só mostraria os já configurados e não haveria por
|
||||
onde adicionar. %>
|
||||
<fieldset class="border border-white/10 rounded-xl p-4 space-y-3">
|
||||
<legend class="text-gray-400 text-sm px-2">Quais grupos recebem</legend>
|
||||
<div class="border-t border-white/5 pt-6">
|
||||
<p class="<%= secao %>">Quais grupos recebem</p>
|
||||
|
||||
<% if @linhas_assinatura.blank? %>
|
||||
<p class="text-sm text-gray-500">
|
||||
Nenhum grupo cadastrado ainda —
|
||||
<%= link_to 'crie um grupo', new_admin_grupo_path, data: { turbo: false }, class: 'text-orange-400 underline' %>
|
||||
antes.
|
||||
</p>
|
||||
<% end %>
|
||||
<% Array(@linhas_assinatura).each do |linha| %>
|
||||
<% grupo = linha[:grupo]; assinatura = linha[:assinatura] %>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<label class="flex items-center gap-2 text-sm text-gray-300 min-w-[200px]">
|
||||
<%= check_box_tag "assinaturas[#{grupo.id}][ativo]", '1', assinatura&.ativo,
|
||||
class: 'rounded border-white/20 bg-[#1a1a1a] text-orange-500' %>
|
||||
<%= grupo.nome %>
|
||||
<span class="text-xs text-gray-500">(<%= grupo.contatos.size %>)</span>
|
||||
</label>
|
||||
<%= select_tag "assinaturas[#{grupo.id}][canal]",
|
||||
options_for_select(GrupoEventoAssinatura::CANAIS.map { |c| [GrupoEventoAssinatura::CANAL_LABEL[c], c] }, assinatura&.canal || 'ambos'),
|
||||
class: 'bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2' %>
|
||||
<div class="px-4 py-8 text-center bg-[#0a0a0a] border border-white/5 rounded-xl">
|
||||
<div class="mb-2"><%= icone :vazio, tamanho: 'w-8 h-8', cor: 'text-gray-600', espaco: false %></div>
|
||||
<p class="text-sm text-gray-500">
|
||||
Nenhum grupo cadastrado ainda —
|
||||
<%= link_to 'crie um grupo', new_admin_grupo_path, data: { turbo: false },
|
||||
class: 'text-[#f97316] hover:text-orange-400 underline' %>
|
||||
antes.
|
||||
</p>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="space-y-2">
|
||||
<% Array(@linhas_assinatura).each do |linha| %>
|
||||
<% grupo = linha[:grupo]; assinatura = linha[:assinatura] %>
|
||||
<div class="flex flex-wrap items-center gap-3 px-4 py-3 bg-[#0a0a0a] border border-white/5
|
||||
rounded-xl hover:border-white/10 transition-colors">
|
||||
<label class="flex items-center gap-3 text-sm text-gray-300 flex-1 min-w-[200px] cursor-pointer">
|
||||
<%= check_box_tag "assinaturas[#{grupo.id}][ativo]", '1', assinatura&.ativo,
|
||||
class: 'w-4 h-4 rounded border-white/20 bg-[#1a1a1a] text-[#f97316]
|
||||
focus:ring-[#f97316] focus:ring-offset-0 cursor-pointer' %>
|
||||
<span class="text-white font-medium"><%= grupo.nome %></span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs
|
||||
bg-white/5 border border-white/10 text-gray-400">
|
||||
<%= grupo.contatos.size %> contato(s)
|
||||
</span>
|
||||
</label>
|
||||
<%= select_tag "assinaturas[#{grupo.id}][canal]",
|
||||
options_for_select(
|
||||
GrupoEventoAssinatura::CANAIS.map { |c| [GrupoEventoAssinatura::CANAL_LABEL[c], c] },
|
||||
assinatura&.canal || 'ambos'
|
||||
),
|
||||
class: 'px-3 py-2 bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm
|
||||
focus:outline-none focus:border-[#f97316] focus:ring-1 focus:ring-[#f97316]
|
||||
transition-colors cursor-pointer' %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<%= f.submit 'Salvar', class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400 cursor-pointer' %>
|
||||
<%= link_to 'Cancelar', admin_eventos_path, data: { turbo: false }, class: 'text-gray-400 hover:text-white text-sm' %>
|
||||
<%# Opções %>
|
||||
<div class="border-t border-white/5 pt-6 space-y-5">
|
||||
<div class="flex items-start">
|
||||
<div class="flex-1">
|
||||
<%= f.label :notificar_envolvido, 'Avisar também a pessoa envolvida no fato',
|
||||
class: 'block text-sm font-medium text-gray-300' %>
|
||||
<p class="text-gray-500 text-xs mt-0.5 max-w-lg">
|
||||
Ex.: o motorista dono do pagamento, além dos grupos. Só se aplica aos gatilhos de
|
||||
consolidação/pagamento/valor.
|
||||
</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer ml-4 mt-0.5">
|
||||
<%= f.check_box :notificar_envolvido, class: 'sr-only peer' %>
|
||||
<div class="<%= toggle %>"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1">
|
||||
<%= f.label :ativo, 'Evento ativo', class: 'block text-sm font-medium text-gray-300' %>
|
||||
<p class="text-gray-500 text-xs mt-0.5">Evento inativo não dispara nada</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer ml-4">
|
||||
<%= f.check_box :ativo, class: 'sr-only peer' %>
|
||||
<div class="<%= toggle %>"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between pt-2 border-t border-white/5">
|
||||
<%= link_to 'Cancelar', admin_eventos_path, data: { turbo: false },
|
||||
class: 'px-6 py-3 text-gray-400 hover:text-white border border-white/10
|
||||
hover:border-white/20 rounded-xl transition-colors' %>
|
||||
<%= f.submit evento.new_record? ? 'Criar Evento' : 'Salvar Alterações',
|
||||
class: 'px-8 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
|
||||
rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<div class="max-w-2xl space-y-6">
|
||||
<h1 class="text-2xl font-bold text-white">Editar evento</h1>
|
||||
<%= render "form", evento: @evento %>
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Editar: <%= @evento.nome %></h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">Atualize o gatilho, o agendamento e os grupos assinantes</p>
|
||||
</div>
|
||||
<%= render 'shared/flash' %>
|
||||
<%= render 'form', evento: @evento %>
|
||||
</div>
|
||||
|
||||
@@ -1,90 +1,157 @@
|
||||
<%
|
||||
input = 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
|
||||
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
|
||||
focus:ring-[#f97316] transition-colors text-sm'
|
||||
pill = 'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold'
|
||||
%>
|
||||
<div class="space-y-6">
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Eventos de notificação</h1>
|
||||
<h1 class="text-2xl font-bold text-white flex items-center gap-2">
|
||||
<%= icone :diario, espaco: false %> Eventos de notificação
|
||||
</h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">
|
||||
O que dispara mensagem e para quais grupos. Você cria quantos eventos quiser —
|
||||
o <strong class="text-gray-300">gatilho</strong> sai de uma lista fixa, porque gatilho é código.
|
||||
</p>
|
||||
</div>
|
||||
<%= link_to 'Novo evento', new_admin_evento_path, data: { turbo: false },
|
||||
class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400' %>
|
||||
<%= link_to new_admin_evento_path, data: { turbo: false },
|
||||
class: 'inline-flex items-center gap-2 px-5 py-3 bg-[#f97316] hover:bg-orange-500
|
||||
text-white font-semibold rounded-xl transition-colors min-h-[48px] whitespace-nowrap' do %>
|
||||
<%= icone :adicionar, cor: nil, tamanho: 'w-5 h-5', espaco: false %> Novo evento
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<%= render 'shared/flash' %>
|
||||
|
||||
<div class="space-y-4">
|
||||
<% @eventos.each do |evento| %>
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-5">
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div class="min-w-0">
|
||||
<p class="text-white font-bold flex items-center gap-2 flex-wrap">
|
||||
<%= evento.nome %>
|
||||
<span class="px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-xs text-gray-400"><%= evento.gatilho_label %></span>
|
||||
<%# Evento desativado fica esmaecido: a lista mistura ativo e inativo e sem
|
||||
isso os dois pesam igual na varredura visual. %>
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 <%= 'opacity-60' unless evento.ativo? %>">
|
||||
<div class="flex flex-wrap items-start justify-between gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<h2 class="text-white font-bold text-lg"><%= evento.nome %></h2>
|
||||
<span class="<%= pill %> bg-white/5 border border-white/10 text-gray-400">
|
||||
<%= evento.gatilho_label %>
|
||||
</span>
|
||||
<% if evento.sistema? %>
|
||||
<span class="px-2 py-0.5 rounded-full bg-blue-500/15 border border-blue-500/30 text-xs text-blue-300" title="Nasce com o sistema: pode desativar, não apagar">sistema</span>
|
||||
<span class="<%= pill %> bg-blue-500/15 border border-blue-500/30 text-blue-300"
|
||||
title="Nasce com o sistema: pode desativar, não apagar">sistema</span>
|
||||
<% end %>
|
||||
<% unless evento.ativo? %>
|
||||
<span class="px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-xs text-gray-500">desativado</span>
|
||||
<span class="<%= pill %> bg-gray-700 text-gray-300">desativado</span>
|
||||
<% end %>
|
||||
</p>
|
||||
<p class="text-sm text-gray-400 mt-1"><%= evento.descricao.presence || '—' %></p>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-400 mt-1.5"><%= evento.descricao.presence || '—' %></p>
|
||||
|
||||
<div class="mt-3 space-y-1.5">
|
||||
<% assinantes = evento.assinaturas.select(&:ativo) %>
|
||||
<% if assinantes.any? %>
|
||||
Grupos: <%= assinantes.map { |a| "#{a.grupo_contato.nome} (#{a.canal_label})" }.join(' · ') %>
|
||||
<div class="flex items-start gap-2 flex-wrap text-xs">
|
||||
<span class="text-gray-500 uppercase tracking-wider font-semibold py-1">Grupos</span>
|
||||
<% assinantes.each do |a| %>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-gray-300">
|
||||
<%= a.grupo_contato.nome %>
|
||||
<span class="text-gray-500 ml-1">· <%= a.canal_label %></span>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<span class="text-amber-400">Nenhum grupo assina — este evento não manda nada.</span>
|
||||
<p class="flex items-center gap-1.5 text-xs text-amber-400">
|
||||
<%= icone :alerta, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false %>
|
||||
Nenhum grupo assina — este evento não manda nada.
|
||||
</p>
|
||||
<% end %>
|
||||
|
||||
<% if evento.agendado? %>
|
||||
· <%= evento.frequencia == 'semanal' ? "toda #{Date::DAYNAMES[evento.dia_semana.to_i]}" : 'todo dia' %> às <%= format('%02d:00', evento.hora.to_i) %>
|
||||
<p class="flex items-center gap-1.5 text-xs text-gray-500">
|
||||
<%= icone :relogio, cor: 'text-gray-500', tamanho: 'w-3.5 h-3.5', espaco: false %>
|
||||
<%= evento.frequencia == 'semanal' ? "Toda #{Date::DAYNAMES[evento.dia_semana.to_i]}" : 'Todo dia' %>
|
||||
às <%= format('%02d:00', evento.hora.to_i) %>
|
||||
</p>
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 whitespace-nowrap">
|
||||
<%# Editor de blocos, um por canal. O ✓ diz se já existe mensagem
|
||||
montada — sem ela o evento usa o texto padrão do sistema. %>
|
||||
<% %w[whatsapp email].each do |canal| %>
|
||||
<% montado = evento.template_utilizavel(canal).present? %>
|
||||
<%= link_to "#{montado ? '✓ ' : ''}#{canal == 'email' ? 'E-mail' : 'WhatsApp'}",
|
||||
template_admin_evento_path(evento, canal: canal), data: { turbo: false },
|
||||
title: montado ? 'Mensagem montada no editor' : 'Sem mensagem — usa o texto padrão',
|
||||
class: "text-sm #{montado ? 'text-green-400 hover:text-green-300' : 'text-gray-400 hover:text-orange-400'}" %>
|
||||
<% end %>
|
||||
<span class="text-gray-700">|</span>
|
||||
<%= link_to 'Editar', edit_admin_evento_path(evento), data: { turbo: false },
|
||||
class: 'text-gray-300 hover:text-orange-400 text-sm' %>
|
||||
<% if evento.apagavel? %>
|
||||
<%= button_to 'Excluir', admin_evento_path(evento), method: :delete,
|
||||
form: { data: { turbo_confirm: "Excluir o evento #{evento.nome}?" } },
|
||||
class: 'text-red-400 hover:text-red-300 text-sm inline' %>
|
||||
<% end %>
|
||||
|
||||
<%# Ações: editor de mensagem por canal + editar/excluir %>
|
||||
<div class="flex flex-col items-end gap-2 whitespace-nowrap">
|
||||
<div class="flex items-center gap-2">
|
||||
<%# O ✓ diz se já existe mensagem montada — sem ela o evento usa o
|
||||
texto padrão do sistema. %>
|
||||
<% %w[whatsapp email].each do |canal| %>
|
||||
<% montado = evento.template_utilizavel(canal).present? %>
|
||||
<%= link_to template_admin_evento_path(evento, canal: canal), data: { turbo: false },
|
||||
title: montado ? 'Mensagem montada no editor' : 'Sem mensagem — usa o texto padrão',
|
||||
class: "inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm border transition-colors #{
|
||||
montado ? 'bg-green-500/10 border-green-500/30 text-green-300 hover:border-green-500'
|
||||
: 'bg-[#0a0a0a] border-white/10 text-gray-400 hover:border-[#f97316] hover:text-white'}" do %>
|
||||
<%= icone(montado ? :sucesso : (canal == 'email' ? :email : :telefone),
|
||||
cor: nil, tamanho: 'w-4 h-4', espaco: false) %>
|
||||
<%= canal == 'email' ? 'E-mail' : 'WhatsApp' %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<%= link_to edit_admin_evento_path(evento), data: { turbo: false },
|
||||
class: 'p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg transition-colors',
|
||||
title: 'Editar' do %>
|
||||
<%= icone :editar, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<% end %>
|
||||
<% if evento.apagavel? %>
|
||||
<%= button_to admin_evento_path(evento), method: :delete,
|
||||
class: 'p-2 text-gray-600 hover:text-red-400 hover:bg-red-900/20 rounded-lg transition-colors',
|
||||
title: 'Excluir',
|
||||
form: { data: { turbo_confirm: "Excluir o evento #{evento.nome}?" } } do %>
|
||||
<%= icone :excluir, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# Disparo manual: manda mensagem DE VERDADE. O texto é digitado aqui
|
||||
porque o editor de blocos ainda não existe. %>
|
||||
<%# Disparo manual: manda mensagem DE VERDADE. %>
|
||||
<% if evento.manual? && evento.ativo? %>
|
||||
<details class="mt-4 border-t border-white/5 pt-4">
|
||||
<summary class="cursor-pointer text-sm text-orange-400 hover:text-orange-300 select-none">Disparar agora</summary>
|
||||
<details class="mt-5 border-t border-white/5 pt-4 group/disparo">
|
||||
<summary class="cursor-pointer select-none inline-flex items-center gap-1.5 text-sm
|
||||
text-[#f97316] hover:text-orange-400 transition-colors">
|
||||
<%= icone :expandir, cor: nil, tamanho: 'w-4 h-4', espaco: false %> Disparar agora
|
||||
</summary>
|
||||
<% com_template = %w[whatsapp email].any? { |c| evento.template_utilizavel(c) } %>
|
||||
<%= form_with url: disparar_admin_evento_path(evento), method: :post,
|
||||
data: { turbo: false }, class: 'mt-3 space-y-3' do |f| %>
|
||||
data: { turbo: false }, class: 'mt-4 space-y-3' do |f| %>
|
||||
<% if com_template %>
|
||||
<p class="text-xs text-green-400">
|
||||
Este evento tem mensagem montada no editor — ela será usada nos canais configurados.
|
||||
O texto abaixo só vale para o canal que ainda não tem mensagem própria.
|
||||
<p class="flex items-start gap-2 text-xs text-green-300 bg-green-500/10
|
||||
border border-green-500/30 rounded-xl px-3 py-2.5">
|
||||
<%= icone :sucesso, cor: nil, tamanho: 'w-4 h-4', espaco: false, classe: 'mt-0.5' %>
|
||||
<span>
|
||||
Este evento tem mensagem montada no editor — ela será usada nos canais configurados.
|
||||
O texto abaixo só vale para o canal que ainda não tem mensagem própria.
|
||||
</span>
|
||||
</p>
|
||||
<% end %>
|
||||
<%= f.text_field :assunto, placeholder: 'Assunto (só e-mail)', value: evento.nome,
|
||||
class: 'w-full bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<%= f.text_area :corpo, rows: 4, required: !com_template, placeholder: com_template ? 'Opcional — só para o canal sem mensagem montada' : 'Mensagem que será enviada…',
|
||||
class: 'w-full bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<%= f.text_field :assunto, placeholder: 'Assunto (só e-mail)', value: evento.nome, class: input %>
|
||||
<%= f.text_area :corpo, rows: 4, required: !com_template, class: input,
|
||||
placeholder: com_template ? 'Opcional — só para o canal sem mensagem montada' : 'Mensagem que será enviada…' %>
|
||||
<%= f.submit 'Enviar para os grupos assinantes',
|
||||
data: { turbo_confirm: 'Isso envia mensagem de verdade para todos os contatos dos grupos assinantes. Confirmar?' },
|
||||
class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400 cursor-pointer' %>
|
||||
data: { turbo_confirm: 'Isso envia mensagem de verdade para todos os contatos dos grupos assinantes. Confirmar?' },
|
||||
class: 'px-6 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
|
||||
rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
|
||||
<% end %>
|
||||
</details>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @eventos.empty? %>
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 px-6 py-16 text-center text-gray-500">
|
||||
<div class="mb-3"><%= icone :vazio, tamanho: 'w-10 h-10', cor: 'text-gray-600', espaco: false %></div>
|
||||
<p>Nenhum evento cadastrado.</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<div class="max-w-2xl space-y-6">
|
||||
<h1 class="text-2xl font-bold text-white">Novo evento</h1>
|
||||
<%= render "form", evento: @evento %>
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Novo evento</h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">Defina o que dispara a mensagem e quem recebe</p>
|
||||
</div>
|
||||
<%= render 'shared/flash' %>
|
||||
<%= render 'form', evento: @evento %>
|
||||
</div>
|
||||
|
||||
@@ -1,36 +1,63 @@
|
||||
<%
|
||||
input = 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
|
||||
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
|
||||
focus:ring-[#f97316] transition-colors'
|
||||
rotulo = 'block text-sm font-medium text-gray-300 mb-1.5'
|
||||
toggle = "w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer
|
||||
peer-checked:after:translate-x-full peer-checked:after:border-white
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:border-gray-300 after:border after:rounded-full
|
||||
after:h-5 after:w-5 after:transition-all peer-checked:bg-[#f97316]"
|
||||
%>
|
||||
<%# URL explícita: a rota se chama `grupo`/`grupos` (ver routes.rb), então a
|
||||
rota polimórfica de `model:` procuraria admin_grupo_contato_path e estouraria.
|
||||
O `model:` continua valendo para nomear os campos (grupo_contato[...]). %>
|
||||
<%= form_with model: [:admin, grupo],
|
||||
url: (grupo.persisted? ? admin_grupo_path(grupo) : admin_grupos_path),
|
||||
data: { turbo: false }, class: 'space-y-5' do |f| %>
|
||||
data: { turbo: false },
|
||||
class: 'bg-[#1a1a1a] rounded-2xl border border-white/5 p-8 space-y-6' do |f| %>
|
||||
|
||||
<% if grupo.errors.any? %>
|
||||
<div class="bg-red-500/10 border border-red-500/30 rounded-xl px-4 py-3 text-red-300 text-sm">
|
||||
<div class="p-4 bg-red-900/30 border border-red-500/40 rounded-xl">
|
||||
<p class="text-red-400 text-sm font-medium mb-2">
|
||||
<%= pluralize(grupo.errors.count, 'erro', 'erros') %> encontrado<%= grupo.errors.count > 1 ? 's' : '' %>:
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<% grupo.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %>
|
||||
<% grupo.errors.full_messages.each do |msg| %>
|
||||
<li class="text-red-300 text-sm"><%= msg %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div>
|
||||
<%= f.label :nome, class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.text_field :nome, required: true, placeholder: 'Diretoria',
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<%= f.label :nome, class: rotulo %>
|
||||
<%= f.text_field :nome, required: true, placeholder: 'Diretoria', class: input %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= f.label :descricao, 'Descrição', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<%= f.text_field :descricao, placeholder: 'Quem acompanha o fechamento',
|
||||
class: 'w-full bg-[#1a1a1a] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<%= f.label :descricao, 'Descrição', class: rotulo %>
|
||||
<%= f.text_field :descricao, placeholder: 'Quem acompanha o fechamento', class: input %>
|
||||
<p class="text-gray-500 text-xs mt-1.5">Opcional — ajuda a lembrar para que serve o grupo.</p>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center gap-2 text-sm text-gray-300">
|
||||
<%= f.check_box :ativo, class: 'rounded border-white/20 bg-[#1a1a1a] text-orange-500' %>
|
||||
Ativo (grupo inativo não recebe nada)
|
||||
</label>
|
||||
<div class="flex items-center border-t border-white/5 pt-6">
|
||||
<div class="flex-1">
|
||||
<%= f.label :ativo, 'Grupo ativo', class: 'block text-sm font-medium text-gray-300' %>
|
||||
<p class="text-gray-500 text-xs mt-0.5">Grupo inativo não recebe nada, mesmo assinando eventos</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer ml-4">
|
||||
<%= f.check_box :ativo, class: 'sr-only peer' %>
|
||||
<div class="<%= toggle %>"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<%= f.submit 'Salvar', class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400 cursor-pointer' %>
|
||||
<%= link_to 'Cancelar', admin_grupos_path, data: { turbo: false }, class: 'text-gray-400 hover:text-white text-sm' %>
|
||||
<div class="flex items-center justify-between pt-2 border-t border-white/5">
|
||||
<%= link_to 'Cancelar', admin_grupos_path, data: { turbo: false },
|
||||
class: 'px-6 py-3 text-gray-400 hover:text-white border border-white/10
|
||||
hover:border-white/20 rounded-xl transition-colors' %>
|
||||
<%= f.submit grupo.new_record? ? 'Criar Grupo' : 'Salvar Alterações',
|
||||
class: 'px-8 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
|
||||
rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<div class="max-w-xl space-y-6">
|
||||
<h1 class="text-2xl font-bold text-white">Editar grupo</h1>
|
||||
<div class="max-w-2xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Editar: <%= @grupo.nome %></h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">Atualize as informações do grupo</p>
|
||||
</div>
|
||||
<%= render 'shared/flash' %>
|
||||
<%= render 'form', grupo: @grupo %>
|
||||
</div>
|
||||
|
||||
@@ -1,65 +1,105 @@
|
||||
<div class="space-y-6">
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Grupos de contato</h1>
|
||||
<h1 class="text-2xl font-bold text-white flex items-center gap-2">
|
||||
<%= icone :tag, espaco: false %> Grupos de contato
|
||||
</h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">
|
||||
É o grupo que assina os eventos — cadastrar alguém novo é escolher o grupo,
|
||||
não repetir a configuração pessoa por pessoa.
|
||||
</p>
|
||||
</div>
|
||||
<%= link_to 'Novo grupo', new_admin_grupo_path, data: { turbo: false },
|
||||
class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400' %>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 overflow-hidden">
|
||||
<% if @grupos.empty? %>
|
||||
<p class="px-6 py-10 text-center text-gray-500 text-sm">
|
||||
Nenhum grupo ainda. Crie um (ex.: <strong class="text-gray-300">Diretoria</strong>,
|
||||
<strong class="text-gray-300">Motoristas</strong>) e depois cadastre os contatos dentro dele.
|
||||
</p>
|
||||
<% else %>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-white/5 text-gray-400 text-xs uppercase tracking-wider">
|
||||
<tr>
|
||||
<th class="text-left px-6 py-3 font-medium">Grupo</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Descrição</th>
|
||||
<th class="text-right px-4 py-3 font-medium">Contatos</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Assina os eventos</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Situação</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<% @grupos.each do |grupo| %>
|
||||
<tr class="hover:bg-white/5">
|
||||
<td class="px-6 py-2.5 text-white font-semibold"><%= grupo.nome %></td>
|
||||
<td class="px-4 py-2.5 text-gray-400"><%= grupo.descricao.presence || '—' %></td>
|
||||
<td class="px-4 py-2.5 text-right">
|
||||
<%= link_to grupo.contatos.size, admin_contatos_path(grupo_id: grupo.id),
|
||||
data: { turbo: false }, class: 'text-orange-400 hover:text-orange-300 underline' %>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-gray-300">
|
||||
<% nomes = grupo.assinaturas.select(&:ativo).map { |a| a.evento_notificacao.nome } %>
|
||||
<%= nomes.any? ? nomes.join(', ') : '— nenhum' %>
|
||||
</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="<%= grupo.ativo? ? 'text-green-400' : 'text-gray-500' %>">
|
||||
<%= grupo.ativo? ? 'Ativo' : 'Inativo' %>
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-right whitespace-nowrap">
|
||||
<%= link_to 'Editar', edit_admin_grupo_path(grupo), data: { turbo: false },
|
||||
class: 'text-gray-300 hover:text-orange-400 mr-3' %>
|
||||
<%= button_to 'Excluir', admin_grupo_path(grupo), method: :delete,
|
||||
form: { data: { turbo_confirm: "Excluir #{grupo.nome}? Os #{grupo.contatos.size} contato(s) ficam sem grupo e param de receber." } },
|
||||
class: 'text-red-400 hover:text-red-300 inline' %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<%= link_to new_admin_grupo_path, data: { turbo: false },
|
||||
class: 'inline-flex items-center gap-2 px-5 py-3 bg-[#f97316] hover:bg-orange-500
|
||||
text-white font-semibold rounded-xl transition-colors min-h-[48px] whitespace-nowrap' do %>
|
||||
<%= icone :adicionar, cor: nil, tamanho: 'w-5 h-5', espaco: false %> Novo grupo
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= render 'shared/flash' %>
|
||||
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-white/10">
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Grupo</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Descrição</th>
|
||||
<th class="px-6 py-4 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider">Contatos</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Assina os eventos</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Situação</th>
|
||||
<th class="px-6 py-4 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<% @grupos.each do |grupo| %>
|
||||
<tr class="hover:bg-white/5 transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full bg-[#f97316]/20 border border-[#f97316]/30
|
||||
flex items-center justify-center text-[#f97316] flex-shrink-0">
|
||||
<%= icone :tag, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
</div>
|
||||
<span class="text-white font-medium"><%= grupo.nome %></span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-400 text-sm"><%= grupo.descricao.presence || '—' %></td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<%= link_to admin_contatos_path(grupo_id: grupo.id), data: { turbo: false },
|
||||
class: 'inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold
|
||||
bg-[#f97316]/15 border border-[#f97316]/30 text-[#f97316]
|
||||
hover:bg-[#f97316]/25 transition-colors',
|
||||
title: 'Ver os contatos deste grupo' do %>
|
||||
<%= grupo.contatos.size %>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<% nomes = grupo.assinaturas.select(&:ativo).map { |a| a.evento_notificacao.nome } %>
|
||||
<% if nomes.any? %>
|
||||
<div class="flex flex-wrap gap-1.5 max-w-sm">
|
||||
<% nomes.each do |nome| %>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs
|
||||
bg-white/5 border border-white/10 text-gray-300"><%= nome %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<span class="text-gray-500 text-sm">— nenhum</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-6 py-4"><%= badge_status_usuario(grupo.ativo?) %></td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<%= link_to edit_admin_grupo_path(grupo), data: { turbo: false },
|
||||
class: 'p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg transition-colors',
|
||||
title: 'Editar' do %>
|
||||
<%= icone :editar, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<% end %>
|
||||
<%= button_to admin_grupo_path(grupo), method: :delete,
|
||||
class: 'p-2 text-gray-600 hover:text-red-400 hover:bg-red-900/20 rounded-lg transition-colors',
|
||||
title: 'Excluir',
|
||||
form: { data: { turbo_confirm: "Excluir #{grupo.nome}? Os #{grupo.contatos.size} contato(s) ficam sem grupo e param de receber." } } do %>
|
||||
<%= icone :excluir, cor: nil, tamanho: 'w-4 h-4', espaco: false %>
|
||||
<% end %>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
|
||||
<% if @grupos.empty? %>
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-16 text-center text-gray-500">
|
||||
<div class="mb-3"><%= icone :vazio, tamanho: 'w-10 h-10', cor: 'text-gray-600', espaco: false %></div>
|
||||
<p>Nenhum grupo ainda.</p>
|
||||
<p class="text-sm mt-1">
|
||||
Crie um (ex.: <strong class="text-gray-300">Diretoria</strong>,
|
||||
<strong class="text-gray-300">Motoristas</strong>) e depois cadastre os contatos dentro dele.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<div class="max-w-xl space-y-6">
|
||||
<h1 class="text-2xl font-bold text-white">Novo grupo de contato</h1>
|
||||
<div class="max-w-2xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Novo grupo de contato</h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">Junte contatos que recebem os mesmos eventos</p>
|
||||
</div>
|
||||
<%= render 'shared/flash' %>
|
||||
<%= render 'form', grupo: @grupo %>
|
||||
</div>
|
||||
|
||||
@@ -6,27 +6,53 @@
|
||||
<div class="space-y-6" id="editor-mensagem"
|
||||
data-preview-url="<%= preview_template_admin_evento_path(@evento, canal: @canal) %>">
|
||||
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Mensagem — <%= @evento.nome %></h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">
|
||||
Canal: <strong class="text-white"><%= @canal == 'email' ? 'E-mail' : 'WhatsApp' %></strong>
|
||||
· Gatilho: <%= @evento.gatilho_label %>
|
||||
</p>
|
||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
||||
<div class="min-w-0">
|
||||
<h1 class="text-2xl font-bold text-white flex items-center gap-2">
|
||||
<%= icone :editar, espaco: false %> Mensagem — <%= @evento.nome %>
|
||||
</h1>
|
||||
<div class="flex flex-wrap items-center gap-2 mt-2">
|
||||
<% wpp = @canal != 'email' %>
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold
|
||||
<%= wpp ? 'bg-green-500/15 border border-green-500/30 text-green-300'
|
||||
: 'bg-blue-500/15 border border-blue-500/30 text-blue-300' %>">
|
||||
<%= icone(wpp ? :telefone : :email, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false) %>
|
||||
<%= wpp ? 'WhatsApp' : 'E-mail' %>
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs
|
||||
bg-white/5 border border-white/10 text-gray-400">
|
||||
<%= @evento.gatilho_label %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<%= link_to "Editar #{outro_canal == 'email' ? 'e-mail' : 'WhatsApp'}",
|
||||
template_admin_evento_path(@evento, canal: outro_canal), data: { turbo: false },
|
||||
class: 'px-4 py-2.5 rounded-xl text-sm bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500' %>
|
||||
<%= link_to 'Voltar', admin_eventos_path, data: { turbo: false },
|
||||
class: 'px-4 py-2.5 rounded-xl text-sm bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500' %>
|
||||
<div class="flex items-center gap-2 flex-shrink-0">
|
||||
<%= link_to template_admin_evento_path(@evento, canal: outro_canal), data: { turbo: false },
|
||||
class: 'inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm border
|
||||
border-white/10 text-gray-300 hover:border-white/20 hover:text-white
|
||||
transition-colors whitespace-nowrap' do %>
|
||||
<%= icone(outro_canal == 'email' ? :email : :telefone, cor: nil, tamanho: 'w-4 h-4', espaco: false) %>
|
||||
Editar <%= outro_canal == 'email' ? 'e-mail' : 'WhatsApp' %>
|
||||
<% end %>
|
||||
<%= link_to admin_eventos_path, data: { turbo: false },
|
||||
class: 'inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm border
|
||||
border-white/10 text-gray-300 hover:border-white/20 hover:text-white
|
||||
transition-colors whitespace-nowrap' do %>
|
||||
<%= icone :voltar, cor: nil, tamanho: 'w-4 h-4', espaco: false %> Voltar
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= render 'shared/flash' %>
|
||||
|
||||
<% if @template.errors.any? %>
|
||||
<div class="bg-red-500/10 border border-red-500/30 rounded-xl px-4 py-3 text-red-300 text-sm">
|
||||
<div class="p-4 bg-red-900/30 border border-red-500/40 rounded-xl">
|
||||
<p class="text-red-400 text-sm font-medium mb-2">
|
||||
<%= pluralize(@template.errors.count, 'erro', 'erros') %> encontrado<%= @template.errors.count > 1 ? 's' : '' %>:
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-1">
|
||||
<% @template.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %>
|
||||
<% @template.errors.full_messages.each do |msg| %>
|
||||
<li class="text-red-300 text-sm"><%= msg %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -40,11 +66,12 @@
|
||||
<%# ── Paleta ──────────────────────────────────────────── %>
|
||||
<div class="space-y-4">
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4">
|
||||
<p class="text-gray-400 text-xs font-medium uppercase tracking-wider mb-3">Blocos</p>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Blocos</p>
|
||||
<p class="text-xs text-gray-500 mb-3">Arraste para a mensagem — ou clique.</p>
|
||||
<div id="paleta" class="space-y-2">
|
||||
<% Notificacao::Blocos::CATALOGO.each do |tipo, meta| %>
|
||||
<div class="cursor-grab select-none bg-[#141414] border border-white/10 rounded-xl px-3 py-2.5 hover:border-orange-500"
|
||||
<div class="cursor-grab select-none bg-[#0a0a0a] border border-white/10 rounded-xl
|
||||
px-3 py-2.5 hover:border-[#f97316] hover:bg-white/5 transition-colors"
|
||||
data-tipo="<%= tipo %>" title="<%= meta[:dica] %>">
|
||||
<span class="text-gray-500 mr-1">⠿</span>
|
||||
<span class="text-sm text-white"><%= meta[:rotulo] %></span>
|
||||
@@ -56,14 +83,17 @@
|
||||
|
||||
<%# ── Variáveis ─────────────────────────────────────── %>
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4">
|
||||
<p class="text-gray-400 text-xs font-medium uppercase tracking-wider mb-3">Variáveis</p>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Variáveis</p>
|
||||
<p class="text-xs text-gray-500 mb-3">
|
||||
Clique num campo da mensagem e depois numa variável para inseri-la ali.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<% @variaveis.each do |nome, meta| %>
|
||||
<button type="button" class="chip-variavel px-2 py-1 rounded-full bg-white/5 border border-white/10 text-xs text-orange-300 hover:border-orange-500"
|
||||
data-variavel="<%= nome %>" title="<%= meta[:descricao] %> (ex.: <%= meta[:amostra] %>)">
|
||||
<button type="button" title="<%= meta[:descricao] %> (ex.: <%= meta[:amostra] %>)"
|
||||
class="chip-variavel px-2.5 py-1 rounded-full bg-[#f97316]/10 border border-[#f97316]/30
|
||||
text-xs font-mono text-[#f97316] hover:bg-[#f97316]/20 hover:border-[#f97316]
|
||||
transition-colors cursor-pointer"
|
||||
data-variavel="<%= nome %>">
|
||||
<%= "{{#{nome}}}" %>
|
||||
</button>
|
||||
<% end %>
|
||||
@@ -75,34 +105,47 @@
|
||||
<div class="space-y-4">
|
||||
<% if @canal == 'email' %>
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4">
|
||||
<label class="block text-gray-400 text-sm mb-1" for="assunto">Assunto</label>
|
||||
<%= text_field_tag :assunto, @template.assunto, id: 'assunto', class: 'campo-editavel w-full bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-1.5" for="assunto">Assunto</label>
|
||||
<%= text_field_tag :assunto, @template.assunto, id: 'assunto',
|
||||
class: 'campo-editavel w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl
|
||||
text-white placeholder-gray-600 focus:outline-none focus:border-[#f97316]
|
||||
focus:ring-1 focus:ring-[#f97316] transition-colors text-sm' %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4">
|
||||
<p class="text-gray-400 text-xs font-medium uppercase tracking-wider mb-3">Mensagem</p>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Mensagem</p>
|
||||
<div id="canvas" class="space-y-3 min-h-[8rem]"></div>
|
||||
<p id="canvas-vazio" class="text-sm text-gray-500 text-center py-8">
|
||||
Arraste um bloco para cá. Sem blocos, o evento continua usando o texto padrão do sistema.
|
||||
</p>
|
||||
<div id="canvas-vazio" class="text-center py-10 border border-dashed border-white/10 rounded-xl">
|
||||
<div class="mb-2"><%= icone :vazio, tamanho: 'w-8 h-8', cor: 'text-gray-600', espaco: false %></div>
|
||||
<p class="text-sm text-gray-500 max-w-xs mx-auto">
|
||||
Arraste um bloco para cá. Sem blocos, o evento continua usando o texto padrão do sistema.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<%= submit_tag 'Salvar mensagem', class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400 cursor-pointer' %>
|
||||
<label class="flex items-center gap-2 text-sm text-gray-300">
|
||||
<%= check_box_tag :ativo, '1', @template.ativo, class: 'rounded border-white/20 bg-[#1a1a1a] text-orange-500' %>
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4 flex flex-wrap items-center gap-3">
|
||||
<%= submit_tag 'Salvar mensagem',
|
||||
class: 'px-6 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
|
||||
rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
|
||||
<button type="button" id="btn-preview"
|
||||
class="inline-flex items-center gap-2 px-5 py-3 rounded-xl text-sm border
|
||||
border-white/10 text-gray-300 hover:border-white/20 hover:text-white
|
||||
transition-colors cursor-pointer min-h-[48px]">
|
||||
<%= icone :restaurar, cor: nil, tamanho: 'w-4 h-4', espaco: false %> Atualizar preview
|
||||
</button>
|
||||
<label class="flex items-center gap-2.5 text-sm text-gray-300 ml-auto cursor-pointer">
|
||||
<%= check_box_tag :ativo, '1', @template.ativo,
|
||||
class: 'w-4 h-4 rounded border-white/20 bg-[#0a0a0a] text-[#f97316]
|
||||
focus:ring-[#f97316] focus:ring-offset-0 cursor-pointer' %>
|
||||
Usar esta mensagem
|
||||
</label>
|
||||
<button type="button" id="btn-preview" class="px-4 py-2.5 rounded-xl text-sm bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500">
|
||||
Atualizar preview
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# ── Preview ─────────────────────────────────────────── %>
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4 space-y-3">
|
||||
<p class="text-gray-400 text-xs font-medium uppercase tracking-wider">Preview</p>
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Preview</p>
|
||||
<p class="text-xs text-gray-500">
|
||||
Com valores de exemplo, renderizado pelo mesmo código do envio.
|
||||
</p>
|
||||
@@ -157,12 +200,12 @@
|
||||
if (especie === 'multilinha') {
|
||||
return '<label class="block text-xs text-gray-500 mb-1" for="' + id + '">' + rotulo + '</label>' +
|
||||
'<textarea id="' + id + '" rows="3" data-indice="' + indice + '" data-campo="' + chave + '"' +
|
||||
' class="campo-editavel campo-bloco w-full bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-orange-500">' +
|
||||
' class="campo-editavel campo-bloco w-full bg-[#0a0a0a] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-[#f97316]">' +
|
||||
escapar(valor) + '</textarea>';
|
||||
}
|
||||
return '<label class="block text-xs text-gray-500 mb-1" for="' + id + '">' + rotulo + '</label>' +
|
||||
'<input id="' + id + '" type="text" value="' + escapar(valor) + '" data-indice="' + indice + '" data-campo="' + chave + '"' +
|
||||
' class="campo-editavel campo-bloco w-full bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-orange-500">';
|
||||
' class="campo-editavel campo-bloco w-full bg-[#0a0a0a] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-[#f97316]">';
|
||||
}
|
||||
|
||||
function listaHtml(indice, linhas) {
|
||||
@@ -170,9 +213,9 @@
|
||||
(linhas || []).forEach(function (linha, j) {
|
||||
html += '<div class="flex gap-2 mb-2">' +
|
||||
'<input type="text" value="' + escapar(linha.rotulo) + '" placeholder="Rótulo" data-indice="' + indice + '" data-linha="' + j + '" data-parte="rotulo"' +
|
||||
' class="campo-editavel campo-linha flex-1 bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-orange-500">' +
|
||||
' class="campo-editavel campo-linha flex-1 bg-[#0a0a0a] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-[#f97316]">' +
|
||||
'<input type="text" value="' + escapar(linha.valor) + '" placeholder="Valor" data-indice="' + indice + '" data-linha="' + j + '" data-parte="valor"' +
|
||||
' class="campo-editavel campo-linha flex-1 bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-orange-500">' +
|
||||
' class="campo-editavel campo-linha flex-1 bg-[#0a0a0a] border border-white/10 rounded-xl text-white text-sm px-3 py-2 focus:outline-none focus:border-[#f97316]">' +
|
||||
'<button type="button" class="btn-remove-linha px-2 text-red-400 hover:text-red-300" data-indice="' + indice + '" data-linha="' + j + '" title="Remover linha">✕</button>' +
|
||||
'</div>';
|
||||
});
|
||||
@@ -187,7 +230,7 @@
|
||||
blocos.forEach(function (bloco, i) {
|
||||
var meta = CATALOGO[bloco.tipo] || { rotulo: bloco.tipo, campos: {} };
|
||||
var card = document.createElement('div');
|
||||
card.className = 'bg-[#141414] border border-white/10 rounded-xl p-3';
|
||||
card.className = 'bg-[#0a0a0a] border border-white/10 rounded-xl p-3 hover:border-white/20 transition-colors';
|
||||
card.dataset.indice = i;
|
||||
|
||||
var corpo = '<div class="flex items-center justify-between mb-2">' +
|
||||
|
||||
@@ -1,95 +1,142 @@
|
||||
<% ctx = { status: params[:status], canal: params[:canal] }.compact_blank %>
|
||||
<%
|
||||
# Pílula de filtro: uma só definição para os dois grupos (situação e canal),
|
||||
# senão o estilo do "ativo" fatalmente diverge entre eles com o tempo.
|
||||
pilula = lambda do |ativo|
|
||||
base = 'px-4 py-2 rounded-xl text-sm border transition-colors'
|
||||
ativo ? "#{base} bg-[#f97316] text-white border-[#f97316] font-semibold"
|
||||
: "#{base} bg-[#0a0a0a] text-gray-400 border-white/10 hover:border-white/20 hover:text-white"
|
||||
end
|
||||
%>
|
||||
<div class="space-y-6">
|
||||
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Envios</h1>
|
||||
<h1 class="text-2xl font-bold text-white flex items-center gap-2">
|
||||
<%= icone :historico, espaco: false %> Envios
|
||||
</h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">
|
||||
O que saiu, para quem e se chegou. Uma falha de envio nunca trava o fechamento —
|
||||
então é aqui que ela aparece.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<% [['', 'Todos'], ['enviado', 'Enviados'], ['falhou', 'Falhados'], ['pendente', 'Pendentes']].each do |valor, rotulo| %>
|
||||
<% ativo = params[:status].to_s == valor %>
|
||||
<%= link_to rotulo, admin_envios_path(ctx.merge(status: valor.presence).compact), data: { turbo: false },
|
||||
class: "px-3 py-2 rounded-xl text-sm border #{ativo ? 'bg-orange-500 text-black border-orange-500 font-bold' : 'bg-[#1a1a1a] text-gray-300 border-white/10 hover:border-orange-500'}" %>
|
||||
<% end %>
|
||||
<span class="text-gray-600">|</span>
|
||||
<% [['', 'Todos os canais'], ['whatsapp', 'WhatsApp'], ['email', 'E-mail']].each do |valor, rotulo| %>
|
||||
<% ativo = params[:canal].to_s == valor %>
|
||||
<%= link_to rotulo, admin_envios_path(ctx.merge(canal: valor.presence).compact), data: { turbo: false },
|
||||
class: "px-3 py-2 rounded-xl text-sm border #{ativo ? 'bg-orange-500 text-black border-orange-500 font-bold' : 'bg-[#1a1a1a] text-gray-300 border-white/10 hover:border-orange-500'}" %>
|
||||
<% end %>
|
||||
<%= render 'shared/flash' %>
|
||||
|
||||
<%# Filtros %>
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-4 flex flex-wrap items-center gap-4">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider mr-1">Situação</span>
|
||||
<% [['', 'Todos'], ['enviado', 'Enviados'], ['falhou', 'Falhados'], ['pendente', 'Pendentes']].each do |valor, rotulo| %>
|
||||
<%= link_to rotulo, admin_envios_path(ctx.merge(status: valor.presence).compact),
|
||||
data: { turbo: false }, class: pilula.call(params[:status].to_s == valor) %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<span class="hidden sm:block w-px h-6 bg-white/10"></span>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider mr-1">Canal</span>
|
||||
<% [['', 'Todos'], ['whatsapp', 'WhatsApp'], ['email', 'E-mail']].each do |valor, rotulo| %>
|
||||
<%= link_to rotulo, admin_envios_path(ctx.merge(canal: valor.presence).compact),
|
||||
data: { turbo: false }, class: pilula.call(params[:canal].to_s == valor) %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if @total_falhas.positive? %>
|
||||
<span class="ml-auto text-sm text-red-400"><%= @total_falhas %> falha(s) neste filtro</span>
|
||||
<span class="ml-auto inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold
|
||||
bg-red-500/15 border border-red-500/30 text-red-300">
|
||||
<%= icone :erro, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false %>
|
||||
<%= @total_falhas %> falha(s) neste filtro
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%# Tabela %>
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 overflow-hidden">
|
||||
<% if @envios.empty? %>
|
||||
<p class="px-6 py-10 text-center text-gray-500 text-sm">Nenhum envio registrado ainda.</p>
|
||||
<% else %>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-white/5 text-gray-400 text-xs uppercase tracking-wider">
|
||||
<tr>
|
||||
<th class="text-left px-6 py-3 font-medium">Quando</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Evento</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Destinatário</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Canal</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Situação</th>
|
||||
<th class="text-left px-4 py-3 font-medium">Mensagem</th>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-white/10">
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Quando</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Evento</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Destinatário</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Canal</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Situação</th>
|
||||
<th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Mensagem</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<% @envios.each do |envio| %>
|
||||
<tr class="hover:bg-white/5 transition-colors align-top">
|
||||
<td class="px-6 py-4 text-gray-400 text-sm whitespace-nowrap">
|
||||
<%= envio.created_at.strftime('%d/%m/%Y') %>
|
||||
<span class="block text-xs text-gray-600"><%= envio.created_at.strftime('%H:%M') %></span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-300 text-sm"><%= envio.evento_notificacao&.nome || '—' %></td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-white text-sm"><%= envio.contato&.nome || envio.user&.nome || '—' %></span>
|
||||
<span class="block text-xs text-gray-500 font-mono mt-0.5"><%= envio.destino %></span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<% wpp = envio.canal == 'whatsapp' %>
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold
|
||||
<%= wpp ? 'bg-green-500/15 border border-green-500/30 text-green-300'
|
||||
: 'bg-blue-500/15 border border-blue-500/30 text-blue-300' %>">
|
||||
<%= icone(wpp ? :telefone : :email, cor: nil, tamanho: 'w-3.5 h-3.5', espaco: false) %>
|
||||
<%= wpp ? 'WhatsApp' : 'E-mail' %>
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<% cfg = case envio.status
|
||||
when 'enviado' then { cor: 'bg-green-600 text-white', icone: :sucesso, label: 'Enviado' }
|
||||
when 'falhou' then { cor: 'bg-red-600 text-white', icone: :erro, label: 'Falhou' }
|
||||
else { cor: 'bg-yellow-500 text-black', icone: :relogio, label: envio.status.to_s.capitalize }
|
||||
end %>
|
||||
<%= badge_com_icone(cfg) %>
|
||||
<% if envio.falhou? && envio.erro.present? %>
|
||||
<span class="block text-xs text-red-300/80 max-w-[22rem] mt-1.5"><%= envio.erro.truncate(160) %></span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-400 text-sm max-w-[24rem]">
|
||||
<span class="block truncate" title="<%= envio.corpo %>"><%= envio.corpo.to_s.truncate(90) %></span>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5">
|
||||
<% @envios.each do |envio| %>
|
||||
<tr class="hover:bg-white/5 align-top">
|
||||
<td class="px-6 py-2.5 text-gray-400 whitespace-nowrap"><%= envio.created_at.strftime('%d/%m/%Y %H:%M') %></td>
|
||||
<td class="px-4 py-2.5 text-gray-300"><%= envio.evento_notificacao&.nome || '—' %></td>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="text-white"><%= envio.contato&.nome || envio.user&.nome || '—' %></span>
|
||||
<span class="block text-xs text-gray-500 font-mono"><%= envio.destino %></span>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-gray-300"><%= envio.canal == 'whatsapp' ? 'WhatsApp' : 'E-mail' %></td>
|
||||
<td class="px-4 py-2.5">
|
||||
<% cor = { 'enviado' => 'text-green-400', 'falhou' => 'text-red-400' }.fetch(envio.status, 'text-yellow-400') %>
|
||||
<span class="<%= cor %>"><%= envio.status.capitalize %></span>
|
||||
<% if envio.falhou? && envio.erro.present? %>
|
||||
<span class="block text-xs text-red-300/80 max-w-[22rem]"><%= envio.erro.truncate(160) %></span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-4 py-2.5 text-gray-400 max-w-[24rem]">
|
||||
<span class="block truncate" title="<%= envio.corpo %>"><%= envio.corpo.to_s.truncate(90) %></span>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @pagy.pages > 1 %>
|
||||
<% pag = ->(p) { admin_envios_path(ctx.merge(page: p)) } %>
|
||||
<nav class="flex items-center justify-center gap-1.5 py-4 flex-wrap border-t border-white/5">
|
||||
<% if @pagy.prev %>
|
||||
<%= link_to '‹', pag.call(@pagy.prev), data: { turbo: false },
|
||||
class: 'min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg border border-[#2a2a2a] text-white hover:border-orange-500' %>
|
||||
<% if @envios.empty? %>
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-16 text-center text-gray-500">
|
||||
<div class="mb-3"><%= icone :vazio, tamanho: 'w-10 h-10', cor: 'text-gray-600', espaco: false %></div>
|
||||
<p>Nenhum envio registrado ainda.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
<% @pagy.series.each do |item| %>
|
||||
<% if item == :gap %>
|
||||
<span class="px-2 text-gray-500">…</span>
|
||||
<% elsif item.is_a?(String) %>
|
||||
<span class="min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg bg-orange-500 text-black font-bold"><%= item %></span>
|
||||
<% else %>
|
||||
<%= link_to item, pag.call(item), data: { turbo: false },
|
||||
class: 'min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg border border-[#2a2a2a] text-white hover:border-orange-500' %>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<% if @envios.any? && @pagy.pages > 1 %>
|
||||
<% pag = ->(p) { admin_envios_path(ctx.merge(page: p)) } %>
|
||||
<nav class="flex items-center justify-center gap-1.5 px-6 py-4 flex-wrap border-t border-white/10">
|
||||
<% if @pagy.prev %>
|
||||
<%= link_to '‹', pag.call(@pagy.prev), data: { turbo: false },
|
||||
class: 'min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg border border-white/10 text-white hover:border-[#f97316] transition-colors' %>
|
||||
<% end %>
|
||||
<% @pagy.series.each do |item| %>
|
||||
<% if item == :gap %>
|
||||
<span class="px-2 text-gray-500">…</span>
|
||||
<% elsif item.is_a?(String) %>
|
||||
<span class="min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg bg-[#f97316] text-white font-bold"><%= item %></span>
|
||||
<% else %>
|
||||
<%= link_to item, pag.call(item), data: { turbo: false },
|
||||
class: 'min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg border border-white/10 text-white hover:border-[#f97316] transition-colors' %>
|
||||
<% end %>
|
||||
<% if @pagy.next %>
|
||||
<%= link_to '›', pag.call(@pagy.next), data: { turbo: false },
|
||||
class: 'min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg border border-[#2a2a2a] text-white hover:border-orange-500' %>
|
||||
<% end %>
|
||||
</nav>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% if @pagy.next %>
|
||||
<%= link_to '›', pag.call(@pagy.next), data: { turbo: false },
|
||||
class: 'min-w-[40px] min-h-[40px] flex items-center justify-center rounded-lg border border-white/10 text-white hover:border-[#f97316] transition-colors' %>
|
||||
<% end %>
|
||||
</nav>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,86 +1,117 @@
|
||||
<div class="max-w-3xl space-y-6">
|
||||
<div class="max-w-3xl mx-auto space-y-6">
|
||||
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">WhatsApp — conexão</h1>
|
||||
<h1 class="text-2xl font-bold text-white flex items-center gap-2">
|
||||
<%= icone :telefone, espaco: false %> WhatsApp — conexão
|
||||
</h1>
|
||||
<p class="text-gray-400 text-sm mt-0.5">
|
||||
Pareia o número da empresa com este servidor lendo um QR code, como no WhatsApp Web.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<%= render 'shared/flash' %>
|
||||
|
||||
<%# O aviso fica na TELA, não só no código: quem parear precisa saber o que
|
||||
está aceitando. %>
|
||||
<div class="bg-amber-500/10 border border-amber-500/30 rounded-2xl px-5 py-4 text-sm text-amber-200 space-y-1">
|
||||
<p class="font-bold">⚠️ Este canal não é oficial.</p>
|
||||
<p>
|
||||
<div class="bg-amber-500/10 border border-amber-500/30 rounded-2xl p-6 text-sm text-amber-200 space-y-2">
|
||||
<p class="font-bold flex items-center gap-2 text-amber-300">
|
||||
<%= icone :alerta, cor: nil, tamanho: 'w-5 h-5', espaco: false %> Este canal não é oficial.
|
||||
</p>
|
||||
<p class="leading-relaxed">
|
||||
A conexão por QR usa a porta do WhatsApp Web por engenharia reversa. É gratuita e ilimitada,
|
||||
mas está <strong>fora dos Termos do WhatsApp</strong> — a Meta pode banir o número sem aviso.
|
||||
Use um <strong>chip dedicado</strong>, nunca o número principal da operação.
|
||||
</p>
|
||||
<p>
|
||||
<p class="leading-relaxed">
|
||||
Disparo em rajada é o que mais causa banimento. O intervalo entre mensagens fica em
|
||||
<%= link_to 'Configurações → Notificações', admin_configuracao_notificacao_path,
|
||||
data: { turbo: false }, class: 'underline hover:text-white' %>
|
||||
data: { turbo: false }, class: 'underline hover:text-white transition-colors' %>
|
||||
(hoje: <strong><%= @config.intervalo_envio %>s</strong>).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6" data-estado-url="<%= status_admin_whatsapp_sessao_path %>" id="painel-whatsapp">
|
||||
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-8"
|
||||
data-estado-url="<%= status_admin_whatsapp_sessao_path %>" id="painel-whatsapp">
|
||||
<% if @estado['conectado'] %>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
||||
<div class="flex items-center gap-4">
|
||||
<%# Ponto pulsante: à distância, é o que diz "está no ar" sem ler o texto. %>
|
||||
<span class="relative flex h-3 w-3 flex-shrink-0">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-white font-bold">Conectado</p>
|
||||
<p class="text-sm text-gray-400">
|
||||
<p class="text-white font-bold text-lg">Conectado</p>
|
||||
<p class="text-sm text-gray-400 mt-0.5">
|
||||
Número <span class="font-mono text-gray-300"><%= @estado['numero'] %></span>
|
||||
<% if @config.whatsapp_conectado_em %> · desde <%= l @config.whatsapp_conectado_em, format: :short rescue @config.whatsapp_conectado_em %><% end %>
|
||||
<% if @config.whatsapp_conectado_em %>
|
||||
· desde <%= l @config.whatsapp_conectado_em, format: :short rescue @config.whatsapp_conectado_em %>
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 border-t border-white/5 pt-5 space-y-4">
|
||||
<div class="mt-6 border-t border-white/5 pt-6 space-y-6">
|
||||
<%= form_with url: testar_admin_whatsapp_sessao_path, method: :post, data: { turbo: false },
|
||||
class: 'flex flex-wrap items-end gap-3' do |f| %>
|
||||
<div>
|
||||
<%= f.label :numero, 'Enviar teste para', class: 'block text-gray-400 text-sm mb-1' %>
|
||||
<div class="flex-1 min-w-[220px]">
|
||||
<%= f.label :numero, 'Enviar teste para', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
|
||||
<%= f.text_field :numero, placeholder: '(11) 92005-1157',
|
||||
class: 'bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
|
||||
class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
|
||||
placeholder-gray-600 focus:outline-none focus:border-[#f97316] focus:ring-1
|
||||
focus:ring-[#f97316] transition-colors' %>
|
||||
</div>
|
||||
<%= f.submit 'Enviar teste',
|
||||
class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400 cursor-pointer' %>
|
||||
class: 'px-6 py-3 bg-[#f97316] hover:bg-orange-500 text-white font-semibold
|
||||
rounded-xl transition-colors cursor-pointer min-h-[48px]' %>
|
||||
<% end %>
|
||||
|
||||
<%= button_to 'Desconectar', desconectar_admin_whatsapp_sessao_path, method: :delete,
|
||||
form: { data: { turbo_confirm: 'Isso encerra a sessão e para TODOS os envios de WhatsApp até você ler o QR de novo. Confirmar?' } },
|
||||
class: 'text-red-400 hover:text-red-300 text-sm' %>
|
||||
<div class="border-t border-white/5 pt-5">
|
||||
<%= button_to desconectar_admin_whatsapp_sessao_path, method: :delete,
|
||||
form: { data: { turbo_confirm: 'Isso encerra a sessão e para TODOS os envios de WhatsApp até você ler o QR de novo. Confirmar?' } },
|
||||
class: 'inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm border
|
||||
border-red-500/30 text-red-400 hover:bg-red-900/20 hover:border-red-500/50
|
||||
transition-colors cursor-pointer' do %>
|
||||
<%= icone :sair, cor: nil, tamanho: 'w-4 h-4', espaco: false %> Desconectar
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% elsif @estado['qr'].present? %>
|
||||
<div class="flex flex-col items-center gap-4 text-center">
|
||||
<p class="text-white font-bold">Leia o QR code</p>
|
||||
<p class="text-sm text-gray-400 max-w-md">
|
||||
No celular do chip dedicado: WhatsApp → <strong>Aparelhos conectados</strong> →
|
||||
<strong>Conectar um aparelho</strong> → aponte para o código abaixo.
|
||||
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold
|
||||
bg-amber-500/15 border border-amber-500/30 text-amber-300">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span> Aguardando leitura
|
||||
</span>
|
||||
<p class="text-white font-bold text-lg">Leia o QR code</p>
|
||||
<p class="text-sm text-gray-400 max-w-md leading-relaxed">
|
||||
No celular do chip dedicado: WhatsApp → <strong class="text-gray-300">Aparelhos conectados</strong> →
|
||||
<strong class="text-gray-300">Conectar um aparelho</strong> → aponte para o código abaixo.
|
||||
</p>
|
||||
<%# O QR expira em ~20s e a ponte gera outro — o polling abaixo troca a
|
||||
imagem sozinho, senão o operador ficaria lendo um código morto. %>
|
||||
<img src="<%= @estado['qr'] %>" alt="QR code do WhatsApp" width="320" height="320"
|
||||
class="rounded-xl bg-white p-3" id="qr-whatsapp">
|
||||
class="rounded-2xl bg-white p-3 shadow-lg" id="qr-whatsapp">
|
||||
<p class="text-xs text-gray-500">O código se renova sozinho a cada poucos segundos.</p>
|
||||
</div>
|
||||
|
||||
<% else %>
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="w-3 h-3 rounded-full bg-red-500 mt-1.5"></span>
|
||||
<div>
|
||||
<p class="text-white font-bold">Desconectado</p>
|
||||
<p class="text-sm text-gray-400 mt-1">
|
||||
<div class="flex items-start gap-4">
|
||||
<span class="w-3 h-3 rounded-full bg-red-500 mt-2 flex-shrink-0"></span>
|
||||
<div class="min-w-0">
|
||||
<p class="text-white font-bold text-lg">Desconectado</p>
|
||||
<p class="text-sm text-gray-400 mt-1 leading-relaxed">
|
||||
<%= @estado['erro'].presence || @estado['ultimo_erro'].presence ||
|
||||
'A ponte ainda não gerou um QR code. Aguarde alguns segundos e recarregue.' %>
|
||||
</p>
|
||||
<% unless @cliente.configurado? %>
|
||||
<p class="text-sm text-amber-300 mt-3">
|
||||
Falta configurar a ponte: defina <code>WHATSAPP_TOKEN</code> no <code>.env</code>
|
||||
(o mesmo valor do container <code>whatsapp</code>) e suba os containers.
|
||||
</p>
|
||||
<div class="mt-4 p-4 bg-amber-500/10 border border-amber-500/30 rounded-xl">
|
||||
<p class="text-sm text-amber-200 leading-relaxed">
|
||||
Falta configurar a ponte: defina
|
||||
<code class="font-mono text-[#f97316]">WHATSAPP_TOKEN</code> no
|
||||
<code class="font-mono">.env</code> (o mesmo valor do container
|
||||
<code class="font-mono">whatsapp</code>) e suba os containers.
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user