147 lines
7.9 KiB
Plaintext
147 lines
7.9 KiB
Plaintext
<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 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 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>
|
|
|
|
<%= 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-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">
|
|
<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>
|
|
<% 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>
|