Reem-Notas/app/views/usuarios/index.html.erb

<%# app/views/usuarios/index.html.erb %>
<div class="space-y-6">

  <%# Header %>
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-bold text-white">Usuários</h1>
      <p class="text-gray-400 text-sm mt-0.5">Gerencie o acesso ao sistema</p>
    </div>
    <% if policy(User).create? %>
      <%= link_to new_usuario_path,
            class: '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]' do %>
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        Novo Usuário
      <% end %>
    <% end %>
  </div>

  <%# Flash %>
  <%= render 'shared/flash' %>

  <%# Tabela %>
  <div class="bg-[#1a1a1a] rounded-2xl border border-white/5 overflow-hidden">
    <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">E-mail / PIN</th>
          <th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Perfil</th>
          <th class="px-6 py-4 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Status</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">
        <% @usuarios.each do |usuario| %>
          <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] font-bold text-sm flex-shrink-0">
                  <%= usuario.name.to_s[0].upcase %>
                </div>
                <span class="text-white font-medium"><%= usuario.name %></span>
              </div>
            </td>
            <td class="px-6 py-4">
              <% if usuario.motorista? && usuario.pin_acesso.present? %>
                <div class="text-gray-300 text-sm">PIN: ••••</div>
              <% else %>
                <div class="text-gray-300 text-sm"><%= usuario.email %></div>
              <% end %>
            </td>
            <td class="px-6 py-4">
              <%= badge_role(usuario.role) %>
            </td>
            <td class="px-6 py-4">
              <%= badge_status_usuario(usuario.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">
                <% if policy(usuario).edit? %>
                  <%= link_to edit_usuario_path(usuario),
                        class: 'p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg transition-colors',
                        title: 'Editar' do %>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                  <% end %>
                <% end %>

                <% if policy(usuario).toggle_ativo? %>
                  <%= button_to toggle_ativo_usuario_path(usuario), method: :post,
                        class: "p-2 rounded-lg transition-colors #{usuario.ativo? ? 'text-green-400 hover:bg-green-900/30' : 'text-red-400 hover:bg-red-900/30'}",
                        title: usuario.ativo? ? 'Desativar' : 'Ativar',
                        data: { confirm: "#{usuario.ativo? ? 'Desativar' : 'Ativar'} #{usuario.name}?" } do %>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                    </svg>
                  <% end %>
                <% end %>

                <% if policy(usuario).destroy? %>
                  <%= button_to usuario_path(usuario), method: :delete,
                        class: 'p-2 text-gray-600 hover:text-red-400 hover:bg-red-900/20 rounded-lg transition-colors',
                        title: 'Excluir',
                        data: { confirm: "Excluir #{usuario.name} permanentemente?" } do %>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                  <% end %>
                <% end %>
              </div>
            </td>
          </tr>
        <% end %>

        <% if @usuarios.empty? %>
          <tr>
            <td colspan="5" class="px-6 py-16 text-center text-gray-500">
              <div class="text-4xl mb-3">👥</div>
              <p>Nenhum usuário encontrado.</p>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>

    <% if @usuarios.respond_to?(:total_pages) && @usuarios.total_pages > 1 %>
      <div class="px-6 py-4 border-t border-white/10">
        <%= paginate @usuarios %>
      </div>
    <% end %>
  </div>
</div>