Atualização para que possa mandar mesagens do Zap para grupos

This commit is contained in:
2026-08-25 00:41:26 -03:00
parent 7e093f3af8
commit 985e2e3b55
19 changed files with 971 additions and 494 deletions

View File

@@ -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 %>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>