project-work/worker-toolkit-stocks-in-the-future/repo/app/views/admin/students/index.html.erb

<div class="max-w-7xl mx-auto">
  <%= admin_breadcrumbs(@breadcrumbs) %>

  <div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg overflow-hidden">
    <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold text-gray-900">Students</h3>
        <div class="flex gap-2">
          <%= link_to "Template", template_admin_students_path,
                      class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" %>
          <%= link_to "Import Students", "#",
                      onclick: "document.getElementById('import-modal').classList.remove('hidden'); return false;",
                      class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" %>
          <%= link_to "New Student", new_admin_student_path,
                      class: "inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700" %>
        </div>
      </div>

      <!-- Filter Tabs -->
      <% current_filter = current_discard_filter %>
      <div class="flex gap-1 border-b border-gray-200">
        <%= link_to "Active",
                    admin_students_path,
                    class: "px-4 py-2 text-sm font-medium #{current_filter == :active ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700 hover:border-gray-300'}" %>
        <%= link_to "Archived",
                    admin_students_path(discarded: true),
                    class: "px-4 py-2 text-sm font-medium #{current_filter == :discarded ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700 hover:border-gray-300'}" %>
        <%= link_to "All",
                    admin_students_path(all: true),
                    class: "px-4 py-2 text-sm font-medium #{current_filter == :all ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700 hover:border-gray-300'}" %>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-300">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
              <%= sort_link(:id, "ID") %>
            </th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
              <%= sort_link(:username, "Username") %>
            </th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
              Classroom
            </th>
            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
              <%= sort_link(:created_at, "Created At") %>
            </th>
            <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
              <span class="sr-only">Actions</span>
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 bg-white">
          <% if @students.any? %>
            <% @students.each do |student| %>
              <tr class="hover:bg-gray-50 transition-colors cursor-pointer"
                  data-controller="clickable-row"
                  data-clickable-row-url-value="<%= admin_student_path(student) %>"
                  data-action="click->clickable-row#navigate">
                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-900">
                  <%= student.id %>
                </td>
                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-900">
                  <%= student.username %>
                </td>
                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-900">
                  <%= student.classroom.name %>
                </td>
                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-900">
                  <%= student.created_at.strftime("%B %d, %Y") %>
                </td>
                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                  <div class="flex justify-end gap-2">
                    <%= link_to "View", admin_student_path(student), class: "text-blue-600 hover:text-blue-800" %>
                    <% unless student.discarded? %>
                      <%= link_to "Edit", edit_admin_student_path(student), class: "text-gray-600 hover:text-gray-800" %>
                    <% end %>
                    <%= discard_restore_action(student) %>
                  </div>
                </td>
              </tr>
            <% end %>
          <% else %>
            <tr>
              <td colspan="5" class="px-3 py-12 text-center text-sm text-gray-500">
                <div class="flex flex-col items-center">
                  <i class="fas fa-inbox text-4xl text-gray-300 mb-3"></i>
                  <p class="font-medium">No records found</p>
                  <p class="text-gray-400 mt-1">No students found. Create your first student to get started.</p>
                </div>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Import Modal -->
<div id="import-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <!-- Background overlay -->
  <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="document.getElementById('import-modal').classList.add('hidden');"></div>

  <!-- Modal content -->
  <div class="relative bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 z-50">
    <div class="px-6 py-4">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-medium text-gray-900" id="modal-title">
          Import Students from CSV
        </h3>
        <button type="button" class="text-gray-400 hover:text-gray-500" onclick="document.getElementById('import-modal').classList.add('hidden');">
          <span class="sr-only">Close</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <p class="text-sm text-gray-500 mb-4">
        Upload a CSV file with columns: <strong>classroom_id, username</strong>
      </p>

      <%= form_with url: import_admin_students_path, multipart: true, local: true do |form| %>
        <div class="mb-4">
          <%= form.file_field :csv_file,
                              accept: ".csv",
                              class: "block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none p-2" %>
        </div>
        <div class="flex justify-end gap-3">
          <button type="button"
                  onclick="document.getElementById('import-modal').classList.add('hidden');"
                  class="inline-flex justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Cancel
          </button>
          <%= form.submit "Import Students",
                          class: "inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
        </div>
      <% end %>
    </div>
  </div>
</div>