uldp-degree-mangement-system/views/admin/degree/index.ejs

<!-- Page Header -->
<div class="page-title-area">
  <div>
    <h1>Degree Management</h1>
    <p class="subtitle">All degrees registered in the system</p>
  </div>
  <a href="/admin/degree/create" class="btn btn-primary">
    <i class="fas fa-plus"></i> New Degree
  </a>
</div>

<!-- Search & Filter -->
<div class="card border-0 mb-3">
  <div class="card-body" style="padding:1rem 1.25rem;">
    <form method="GET" action="/admin/degree">
      <div class="row g-2 align-items-end">
        <div class="col-md-3">
          <div class="position-relative search-bar">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="form-control" name="search" placeholder="Search name, number..." value="<%= query.search || '' %>">
          </div>
        </div>
        <div class="col-md-2">
          <select class="form-select" name="type">
            <option value="">All Types</option>
            <option value="qualification" <%= query.type === 'qualification' ? 'selected' : '' %>>Qualification</option>
            <option value="certification" <%= query.type === 'certification' ? 'selected' : '' %>>Certification</option>
          </select>
        </div>
        <div class="col-md-2">
          <select class="form-select" name="department">
            <option value="">All Departments</option>
            <% departments.forEach(dept => { %>
              <option value="<%= dept._id %>" <%= query.department === dept._id.toString() ? 'selected' : '' %>><%= dept.name %></option>
            <% }); %>
          </select>
        </div>
        <div class="col-md-2">
          <select class="form-select" name="level">
            <option value="">All Levels</option>
            <% levels.forEach(lvl => { %>
              <option value="<%= lvl._id %>" <%= query.level === lvl._id.toString() ? 'selected' : '' %>><%= lvl.type %></option>
            <% }); %>
          </select>
        </div>
        <div class="col-md-2">
          <select class="form-select" name="status">
            <option value="">All Status</option>
            <option value="active" <%= query.status === 'active' ? 'selected' : '' %>>Active</option>
            <option value="revoked" <%= query.status === 'revoked' ? 'selected' : '' %>>Revoked</option>
          </select>
        </div>
        <div class="col-md-1 d-flex gap-1">
          <button type="submit" class="btn btn-primary flex-fill">
            <i class="fas fa-search"></i>
          </button>
          <% if (query.search || query.type || query.department || query.level || query.status) { %>
            <a href="/admin/degree" class="btn btn-outline-secondary">
              <i class="fas fa-times"></i>
            </a>
          <% } %>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Table -->
<div class="card border-0">
  <div class="card-body p-0">
    <% if (degrees && degrees.length > 0) { %>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead>
            <tr>
              <th style="width:40px">#</th>
              <th>Qual. No.</th>
              <th>Cert. No.</th>
              <th>Full Name</th>
              <th>Program</th>
              <th>Type</th>
              <th>Department</th>
              <th>Level</th>
              <th>Issue Date</th>
              <th>Status</th>
              <th style="width:90px">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% degrees.forEach((degree, index) => { %>
              <tr>
                <td style="color:var(--text-muted)"><%= index + 1 %></td>
                <td><code style="font-size:0.8rem;color:var(--primary-color)"><%= degree.qualification_number %></code></td>
                <td><code style="font-size:0.8rem;color:var(--text-muted)"><%= degree.certification_number || '—' %></code></td>
                <td style="font-weight:500"><%= degree.student_name %></td>
                <td style="color:var(--text-muted);font-size:0.8125rem"><%= degree.program_name %></td>
                <td>
                  <% if (degree.type === 'qualification') { %>
                    <span class="badge badge-soft-primary">Qualification</span>
                  <% } else { %>
                    <span class="badge bg-soft-info">Certification</span>
                  <% } %>
                </td>
                <td style="font-size:0.8125rem"><%= degree.department ? degree.department.name : '—' %></td>
                <td style="font-size:0.8125rem"><%= degree.level ? degree.level.type : '—' %></td>
                <td style="color:var(--text-muted);font-size:0.8125rem"><%= degree.issued_date ? new Date(degree.issued_date).toLocaleDateString('en-GB') : '—' %></td>
                <td>
                  <% if (degree.status === 'active') { %>
                    <span class="badge bg-soft-success">Active</span>
                  <% } else { %>
                    <span class="badge bg-soft-danger">Revoked</span>
                  <% } %>
                </td>
                <td>
                  <div class="table-actions">
                    <a href="/admin/degree/<%= degree._id %>/edit" class="btn btn-sm btn-outline-primary btn-icon" title="Edit">
                      <i class="fas fa-pen"></i>
                    </a>
                    <form method="POST" action="/admin/degree/<%= degree._id %>/delete" style="display:inline;" onsubmit="return confirm('Delete this degree?')">
                      <button type="submit" class="btn btn-sm btn-outline-danger btn-icon" title="Delete">
                        <i class="fas fa-trash"></i>
                      </button>
                    </form>
                  </div>
                </td>
              </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
    <% } else { %>
      <div class="empty-state">
        <div class="empty-state-icon"><i class="fas fa-graduation-cap"></i></div>
        <h5>No degrees found</h5>
        <p>Try adjusting your filters or create a new degree.</p>
        <a href="/admin/degree/create" class="btn btn-primary">
          <i class="fas fa-plus"></i> Create First Degree
        </a>
      </div>
    <% } %>
  </div>
</div>