hackatime/app/views/admin/admin_users/index.html.erb

<div class="max-w-6xl mx-auto p-6 space-y-6">
  <header class="text-center mb-8">
    <h1 class="text-4xl font-bold text-white mb-2">Admin Management</h1>
    <p class="text-gray-400">Who can access the admin panel?</p>
  </header>

  <div class="border border-primary rounded-xl p-6 bg-dark">
    <h2 class="text-2xl font-semibold text-green-400 mb-4">Promote</h2>
    <div class="mb-4">
      <input type="text"
             id="user-search"
             placeholder="Search by name or Slack ID..."
             class="w-full px-4 py-2 bg-darker border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary"
             data-controller="admin-user-search"
             data-action="input->admin-user-search#search">
    </div>
    <div id="search-results" class="space-y-2"></div>
  </div>

  <div class="border border-primary rounded-xl p-6 bg-dark">
    <h2 class="text-2xl font-semibold text-red-400 mb-4">Superadmins (<%= @superadmins.count %>)</h2>
    <% if @superadmins.any? %>
      <div class="overflow-x-auto">
        <table class="w-full text-left">
          <thead>
            <tr class="border-b border-gray-700">
              <th class="py-3 px-4">User</th>
              <th class="py-3 px-4">Slack ID</th>
              <th class="py-3 px-4">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% @superadmins.each do |user| %>
              <tr class="border-b border-gray-800 hover:bg-gray-800/50">
                <td class="py-3 px-4">
                  <div class="flex items-center gap-2">
                    <img src="<%= user.avatar_url %>" alt="Avatar" class="w-8 h-8 rounded-full">
                    <span class="text-white"><%= user.display_name %></span>
                    <% if user == current_user %>
                      <span class="px-2 py-0.5 text-xs rounded-full bg-blue-600/20 text-blue-400">(you)</span>
                    <% end %>
                  </div>
                </td>
                <td class="py-3 px-4 text-gray-300"><%= user.slack_uid || "N/A" %></td>
                <td class="py-3 px-4">
                  <% if user != current_user %>
                    <div class="flex gap-2">
                      <%= button_to "→ Admin", admin_admin_user_path(user, admin_level: "admin"),
                          method: :patch,
                          class: "px-3 py-1 bg-yellow-600 hover:bg-yellow-500 text-white text-sm font-medium rounded transition-colors cursor-pointer",
                          data: { confirm: "Demote #{user.display_name} to Admin?" } %>
                      <%= button_to "→ Viewer", admin_admin_user_path(user, admin_level: "viewer"),
                          method: :patch,
                          class: "px-3 py-1 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded transition-colors cursor-pointer",
                          data: { confirm: "Demote #{user.display_name} to Viewer?" } %>
                      <%= button_to "→ Default", admin_admin_user_path(user, admin_level: "default"),
                          method: :patch,
                          class: "px-3 py-1 bg-gray-600 hover:bg-gray-500 text-white text-sm font-medium rounded transition-colors cursor-pointer",
                          data: { confirm: "Remove #{user.display_name}'s admin privileges?" } %>
                    </div>
                  <% else %>
                    <span class="text-gray-500 text-sm">Cannot modify yourself</span>
                  <% end %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% else %>
      <p class="text-gray-400">No superadmins found!</p>
    <% end %>
  </div>

  <div class="border border-primary rounded-xl p-6 bg-dark">
    <h2 class="text-2xl font-semibold text-yellow-400 mb-4">Admins (<%= @admins.count %>)</h2>
    <% if @admins.any? %>
      <div class="overflow-x-auto">
        <table class="w-full text-left">
          <thead>
            <tr class="border-b border-gray-700">
              <th class="py-3 px-4">User</th>
              <th class="py-3 px-4">Slack ID</th>
              <th class="py-3 px-4">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% @admins.each do |user| %>
              <tr class="border-b border-gray-800 hover:bg-gray-800/50">
                <td class="py-3 px-4">
                  <div class="flex items-center gap-2">
                    <img src="<%= user.avatar_url %>" alt="Avatar" class="w-8 h-8 rounded-full">
                    <span class="text-white"><%= user.display_name %></span>
                  </div>
                </td>
                <td class="py-3 px-4 text-gray-300"><%= user.slack_uid || "N/A" %></td>
                <td class="py-3 px-4">
                  <div class="flex gap-2">
                    <%= button_to "→ Superadmin", admin_admin_user_path(user, admin_level: "superadmin"),
                        method: :patch,
                        class: "px-3 py-1 bg-red-600 hover:bg-red-500 text-white text-sm font-medium rounded transition-colors cursor-pointer",
                        data: { confirm: "Promote #{user.display_name} to Superadmin?" } %>
                    <%= button_to "→ Viewer", admin_admin_user_path(user, admin_level: "viewer"),
                        method: :patch,
                        class: "px-3 py-1 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded transition-colors cursor-pointer",
                        data: { confirm: "Demote #{user.display_name} to Viewer?" } %>
                    <%= button_to "→ Default", admin_admin_user_path(user, admin_level: "default"),
                        method: :patch,
                        class: "px-3 py-1 bg-gray-600 hover:bg-gray-500 text-white text-sm font-medium rounded transition-colors cursor-pointer",
                        data: { confirm: "Remove #{user.display_name}'s admin privileges?" } %>
                  </div>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% else %>
      <p class="text-gray-400">No admins found</p>
    <% end %>
  </div>

  <div class="border border-primary rounded-xl p-6 bg-dark">
    <h2 class="text-2xl font-semibold text-blue-400 mb-4">Viewers (<%= @viewers.count %>)</h2>
    <% if @viewers.any? %>
      <div class="overflow-x-auto">
        <table class="w-full text-left">
          <thead>
            <tr class="border-b border-gray-700">
              <th class="py-3 px-4">User</th>
              <th class="py-3 px-4">Slack ID</th>
              <th class="py-3 px-4">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% @viewers.each do |user| %>
              <tr class="border-b border-gray-800 hover:bg-gray-800/50">
                <td class="py-3 px-4">
                  <div class="flex items-center gap-2">
                    <img src="<%= user.avatar_url %>" alt="Avatar" class="w-8 h-8 rounded-full">
                    <span class="text-white"><%= user.display_name %></span>
                  </div>
                </td>
                <td class="py-3 px-4 text-gray-300"><%= user.slack_uid || "N/A" %></td>
                <td class="py-3 px-4">
                  <div class="flex gap-2">
                    <%= button_to "→ Superadmin", admin_admin_user_path(user, admin_level: "superadmin"),
                        method: :patch,
                        class: "px-3 py-1 bg-red-600 hover:bg-red-500 text-white text-sm font-medium rounded transition-colors cursor-pointer",
                        data: { confirm: "Promote #{user.display_name} to Superadmin?" } %>
                    <%= button_to "→ Admin", admin_admin_user_path(user, admin_level: "admin"),
                        method: :patch,
                        class: "px-3 py-1 bg-yellow-600 hover:bg-yellow-500 text-white text-sm font-medium rounded transition-colors cursor-pointer",
                        data: { confirm: "Promote #{user.display_name} to Admin?" } %>
                    <%= button_to "→ Default", admin_admin_user_path(user, admin_level: "default"),
                        method: :patch,
                        class: "px-3 py-1 bg-gray-600 hover:bg-gray-500 text-white text-sm font-medium rounded transition-colors cursor-pointer",
                        data: { confirm: "Remove #{user.display_name}'s viewer privileges?" } %>
                  </div>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    <% else %>
      <p class="text-gray-400">No viewers found</p>
    <% end %>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('user-search');
    const res = document.getElementById('search-results');
    let d;

    if (input) {
      input.addEventListener('input', function() {
        clearTimeout(d);
        const query = this.value.trim();

        if (query.length < 2) {
          res.innerHTML = '';
          return;
        }

        d = setTimeout(function() {
          fetch('/admin/admin_users/search?q=' + encodeURIComponent(query), {
            headers: { 'Accept': 'text/html' }
          })
          .then(r => r.text())
          .then(html => {
            res.innerHTML = html;
          });
        }, 100);
      });
    }
  });
</script>