docbrown/app/views/admin/users/index.html.erb

<%= javascript_include_tag "admin/users/memberIndex", defer: true %>
<div id="member-index-content" class="crayons-card overflow-admin-main-layout-padding p-4 xl:p-0">
  <header class="xl:p-7 pb-4 mx-2">
    <div class="flex flex-col l:flex-row justify-between l:items-center">
    <h1 class="crayons-title"><%= t("views.admin.users.heading") %></h1>
    </div>
    <%= render "admin/users/index/controls" %>
  </header>
    <%= render "admin/users/index/applied_filters" %>
    <!-- Responsive screen (breakpoints below XL) data view start -->
    <div class="block xl:hidden fs-s">
      <h2 class="member-data-heading fs-s py-2 -mx-4 px-6 color-base-60"><%= t("views.admin.users.table.compact_subtitle") %></h2>
      <ul class="list-none mx-2">
        <% @users.each do |user| %>
          <li class="py-4">
            <article>
              <header class="flex items-center justify-between m:justify-start mb-2">
                <div class="flex grow-1 mr-4 m:w-50 m:max-w-50">
                  <%= render "admin/users/index/member_image", user: user %>
                  <%= render "admin/users/index/member_data", user: user %>
                </div>
                <div class="flex justify-between items-center grow-1">
                  <div class="hidden m:block">
                    <%= render "admin/users/index/user_status_indicator", user: user %>
                  </div>
                  <div class="ml-auto">
                    <%= render "admin/users/index/user_actions_dropdown", user: user, id: "responsive-#{user.id}" %>
                  </div>
                </div>
              </header>
              <div class="flex justify-between mb-2 block m:hidden">
                <div>
                  <%= render "admin/users/index/user_status_indicator", user: user %>
                </div>
                <!-- %=
                # TODO: [@forem/admin-experience] Uncomment this chunk of code containing role badges once we finalize which roles to include.
                <span class="c-indicator ml-2 crayons-hover-tooltip crayons-hover-tooltip--right" data-tooltip="<%= format_role_tooltip(user) %>">
                  <%#= cascading_high_level_roles(user) %>
                </span>
                % -->
              </div>
              <div class="flex justify-between items-end">
                <dl class="flex gap-4">
                  <div>
                    <dt class="color-base-60 fw-normal"><%= t("views.admin.users.table.last_activity") %></dt>
                    <dd><%= format_last_activity_timestamp(user.last_activity) %></dd>
                  </div>
                  <div>
                    <dt class="color-base-60 fw-normal"><%= t("views.admin.users.table.joined_on") %></dt>
                    <dd><%= l(user.registered_at, format: :members_with_year) if user.registered_at %></dd>
                  </div>
                </dl>
                <div>
                  <%= render "admin/users/index/organizations", organizations: user.organizations.limit(@organization_limit), org_count: user.organizations.count %>
                </div>
              </div>
            </article>
          </li>
        <% end %>
      </ul>
    </div>
    <!-- Responsive screen (breakpoints below XL) data view end -->

    <!-- XL screen data view start -->
    <table class="crayons-table crayons-table--minimal w-100 hidden xl:table">
      <thead class="member-data-heading">
        <tr>
          <th scope="col" class="pl-7"><%= t("views.admin.users.table.heading.member") %></th>
          <th scope="col"><%= t("views.admin.users.table.heading.status") %></th>
          <th scope="col"><%= t("views.admin.users.table.heading.last_joined") %></th>
          <th scope="col"><%= t("views.admin.users.table.heading.orgs") %></th>
          <th scope="col" class="screen-reader-only"><%= t("views.admin.users.table.heading.actions") %></th>
        </tr>
      </thead>
      <tbody>
        <% @users.each do |user| %>
        <tr>
          <td class="pl-7">
            <div class="flex s:items-start flex-col s:flex-row">
              <%= render "admin/users/index/member_image", user: user %>
              <%= render "admin/users/index/member_data", user: user %>
            </div>
          </td>
          <td>
            <%= render "admin/users/index/user_status_indicator", user: user %>
          </td>
          <td>
            <%= format_last_activity_timestamp(user.last_activity) %>
            <p class="fs-xs color-base-60">
              <%= l(user.registered_at, format: :members_with_year) if user.registered_at %>
            </p>
          </td>
          <td>
            <%= render "admin/users/index/organizations", organizations: user.organizations.limit(@organization_limit), org_count: user.organizations.count %>
          </td>
          <td>
            <%= render "admin/users/index/user_actions_dropdown", user: user, id: "xl-#{user.id}" %>
          </td>
        </tr>
        <% end %>
      </tbody>
    </table>

    <% if @users.empty? %>
      <div class="align-center flex flex-col my-auto py-7" id="empty-state-message-id">
        <p class="fs-xl fw-normal mb-2"><%= t("views.admin.users.empty.text1") %></p>
        <p class="color-secondary"><%= t("views.admin.users.empty.text2") %></p>
      </div>
    <% end %>
    <!-- XL screen data view end -->

    <div class="flex justify-end xl:p-7">
      <%= paginate @users, theme: "admin", scope: @users, label: t("views.admin.users.aria_paginate"), context: "bottom" %>
    </div>

    <div id="export-csv-modal" class="hidden">
      <div class="flex flex-col gap-4">
        <p>
          <%= t("views.admin.users.download.desc1") %>
        </p>
        <p>
          <%= t("views.admin.users.download.desc2") %>
        </p>
        <div class="flex gap-2">
          <%= link_to t("views.admin.users.download.submit"), "#{export_admin_users_path}.csv", class: "c-cta c-cta--branded self-end" %>
          <button class="js-export-csv-modal-cancel crayons-btn crayons-btn--ghost">
            <%= t("views.admin.users.download.cancel") %>
          </button>
        </div>
      </div>
    </div>

</div>

<%= render "admin/users/index/filters_modal" %>
<%= render "admin/users/modals/add_role_modal" %>
<%= render "admin/users/modals/add_organization_modal" %>
<%= render "admin/users/modals/adjust_credits_modal" %>