stepview/views/admin/dashboard.ejs

<%- include('../partials/head', { title: 'Models' }) %>
<%- include('../partials/adminNav', { currentPath: '/admin' }) %>
<%- include('../partials/adminTopBar') %>

<div class="lg:pl-56 pt-14 lg:pt-0 min-h-screen">
  <%- include('../partials/adminBanner') %>
  <div class="max-w-7xl mx-auto px-4 sm:px-8 py-6 sm:py-8">

    <!-- Page header -->
    <div class="flex items-center justify-between mb-6 sm:mb-8">
      <div>
        <h1 class="text-xl font-semibold text-white">Models</h1>
        <p class="text-sm text-gray-500 mt-0.5"><%= totalCount %> total &nbsp;·&nbsp; <%= publicCount %> public</p>
      </div>
      <a href="/admin/upload" class="inline-flex items-center gap-2 btn-accent text-white rounded-lg px-4 py-2 text-sm font-medium transition-all">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
        <span class="hidden sm:inline">Upload Model</span>
        <span class="sm:hidden">Upload</span>
      </a>
    </div>

    <!-- Filters -->
    <form method="GET" action="/admin" class="flex flex-wrap gap-2 sm:gap-3 mb-5 sm:mb-6">
      <input
        name="search" value="<%= filters.search || '' %>"
        placeholder="Search models…"
        class="bg-surface-900 border border-gray-800 rounded-lg px-3.5 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-accent w-full sm:w-64 transition-colors"
      />
      <select name="category_id" class="bg-surface-900 border border-gray-800 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-accent transition-colors">
        <option value="">All categories</option>
        <% categories.forEach(c => { %>
        <option value="<%= c.id %>" <%= filters.category_id == c.id ? 'selected' : '' %>><%= c.name %></option>
        <% }) %>
      </select>
      <select name="visibility" class="bg-surface-900 border border-gray-800 rounded-lg px-3 py-2 text-sm text-gray-300 focus:outline-none focus:border-accent transition-colors">
        <option value="">All visibility</option>
        <option value="public"  <%= filters.visibility === 'public'  ? 'selected' : '' %>>Public</option>
        <option value="private" <%= filters.visibility === 'private' ? 'selected' : '' %>>Private</option>
      </select>
      <button type="submit" class="bg-surface-800 hover:bg-surface-700 border border-gray-700 text-sm text-gray-300 rounded-lg px-4 py-2 transition-colors">
        Filter
      </button>
      <% if (filters.search || filters.category_id || filters.visibility) { %>
      <a href="/admin" class="bg-surface-800 hover:bg-surface-700 border border-gray-700 text-sm text-gray-400 rounded-lg px-4 py-2 transition-colors">
        Clear
      </a>
      <% } %>
    </form>

    <!-- Table -->
    <% if (models.length === 0) { %>
    <div class="bg-surface-900 border border-gray-800 rounded-2xl px-8 py-16 text-center">
      <svg class="w-12 h-12 text-gray-700 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
        <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
      </svg>
      <p class="text-gray-500 text-sm">No models yet. <a href="/admin/upload" class="text-accent underline">Upload your first model.</a></p>
    </div>
    <% } else { %>
    <div class="bg-surface-900 border border-gray-800 rounded-2xl overflow-hidden">
      <table class="w-full text-sm">
        <thead>
          <tr class="border-b border-gray-800">
            <th class="text-left px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
            <th class="text-left px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">Category</th>
            <th class="text-left px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider hidden lg:table-cell">Type</th>
            <th class="text-left px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider hidden lg:table-cell">PDFs</th>
            <th class="text-left px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider">Visibility</th>
            <th class="text-right px-5 py-3.5 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-800">
          <% models.forEach(model => { %>
          <tr class="hover:bg-surface-800 transition-colors group" data-model-id="<%= model.id %>">
            <td class="px-5 py-4">
              <div class="font-medium text-white"><%= model.name %></div>
              <% if (model.description) { %>
              <div class="text-xs text-gray-500 mt-0.5 truncate max-w-xs"><%= model.description %></div>
              <% } %>
            </td>
            <td class="px-5 py-4 hidden md:table-cell">
              <span class="text-gray-400"><%= model.category_name || '—' %></span>
            </td>
            <td class="px-5 py-4 hidden lg:table-cell">
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-mono bg-surface-800 border border-gray-700 text-gray-400"><%= model.file_type.toUpperCase() %></span>
            </td>
            <td class="px-5 py-4 hidden lg:table-cell text-gray-400">
              <%= model.pdf_count %>
            </td>
            <td class="px-5 py-4">
              <button
                type="button"
                class="visibility-toggle inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border transition-colors cursor-pointer
                  <%= model.is_public ? 'bg-green-500/10 border-green-500/30 text-green-400' : 'bg-gray-700/50 border-gray-700 text-gray-500' %>"
                data-model-id="<%= model.id %>"
                data-is-public="<%= model.is_public %>"
              >
                <span class="w-1.5 h-1.5 rounded-full <%= model.is_public ? 'bg-green-400' : 'bg-gray-500' %>"></span>
                <%= model.is_public ? 'Public' : 'Private' %>
              </button>
            </td>
            <td class="px-5 py-4">
              <div class="flex items-center justify-end gap-2">
                <!-- Copy link -->
                <button
                  type="button"
                  title="Copy share link"
                  class="copy-link-btn p-2 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors"
                  data-url="<%= baseUrl %>/view/<%= model.slug %>"
                >
                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
                  </svg>
                </button>
                <!-- View -->
                <a href="/view/<%= model.slug %>" target="_blank" title="View model"
                   class="p-2 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors">
                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.641 0-8.574-3.007-9.964-7.178z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                </a>
                <!-- Edit -->
                <a href="/admin/models/<%= model.id %>/edit" title="Edit model"
                   class="p-2 rounded-lg text-gray-500 hover:text-white hover:bg-surface-700 transition-colors">
                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                  </svg>
                </a>
                <!-- Delete -->
                <form method="POST" action="/admin/models/<%= model.id %>/delete" class="inline" onsubmit="return confirm('Delete «<%= model.name %>»? This cannot be undone.')">
                  <button type="submit" title="Delete model"
                     class="p-2 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition-colors">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                    </svg>
                  </button>
                </form>
              </div>
            </td>
          </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
    <% } %>
  </div>
</div>

<!-- Toast notification -->
<div id="toast" class="fixed bottom-6 right-6 bg-surface-800 border border-gray-700 text-white text-sm px-4 py-3 rounded-xl shadow-2xl opacity-0 translate-y-2 transition-all duration-300 pointer-events-none z-50">
  <span id="toast-msg"></span>
</div>

<script src="/admin.js"></script>
</body>
</html>