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

<!-- Page Header -->
<div class="page-title-area mb-4">
  <div>
    <h1 style="font-size:1.4rem;font-weight:700;color:var(--primary-color);margin:0;">Dashboard</h1>
    <p class="text-muted mb-0" style="font-size:0.8125rem;">ULDP Management System overview</p>
  </div>
  <div class="d-flex gap-2">
    <a href="/admin/qualification/create" class="btn btn-primary">
      <i class="fas fa-graduation-cap"></i> New Qualification
    </a>
    <a href="/admin/certificate/create" class="btn btn-outline-primary">
      <i class="fas fa-certificate"></i> New Certificate
    </a>
  </div>
</div>

<!-- Stats Grid -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card primary">
      <div class="stat-card-value"><%= total %></div>
      <div class="stat-card-label">Total Records</div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card accent">
      <div class="stat-card-value"><%= qualificationCount %></div>
      <div class="stat-card-label">Qualifications</div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card info">
      <div class="stat-card-value"><%= certificationCount %></div>
      <div class="stat-card-label">Certificates</div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card success">
      <div class="stat-card-value"><%= activeCount %></div>
      <div class="stat-card-label">Active</div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card danger">
      <div class="stat-card-value"><%= revokedCount %></div>
      <div class="stat-card-label">Revoked</div>
    </div>
  </div>
  <div class="col-6 col-md-4 col-xl-2">
    <div class="stat-card warning">
      <div class="stat-card-value"><%= recentCount %></div>
      <div class="stat-card-label">New (30d)</div>
    </div>
  </div>
</div>

<div class="row g-3">
  <!-- Recent Qualifications -->
  <div class="col-lg-6">
    <div class="card border-0">
      <div class="card-header">
        <h5 class="card-header-title"><i class="fas fa-graduation-cap"></i> Latest Qualifications</h5>
        <a href="/admin/qualification" class="btn btn-sm btn-outline-primary">View All</a>
      </div>
      <div class="card-body p-0">
        <% if (recentQualifications && recentQualifications.length > 0) { %>
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead>
                <tr>
                  <th>Qual. No.</th>
                  <th>Full Name</th>
                  <th>Type</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                <% recentQualifications.forEach(q => { %>
                  <tr>
                    <td><code style="font-size:0.8rem;color:var(--primary-color)"><%= q.qualification_number %></code></td>
                    <td style="font-weight:500;font-size:0.8125rem"><%= q.student_name %></td>
                    <td>
                      <% if (q.topic_name) { %>
                        <span class="badge badge-soft-primary">PhD</span>
                      <% } else { %>
                        <span class="badge bg-soft-info">MBA/Master</span>
                      <% } %>
                    </td>
                    <td>
                      <span class="badge <%= q.status === 'active' ? 'bg-soft-success' : 'bg-soft-danger' %>">
                        <%= q.status %>
                      </span>
                    </td>
                  </tr>
                <% }); %>
              </tbody>
            </table>
          </div>
        <% } else { %>
          <div class="empty-state" style="padding:2rem 1rem;">
            <div class="empty-state-icon"><i class="fas fa-graduation-cap"></i></div>
            <h5>No qualifications yet</h5>
            <a href="/admin/qualification/create" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> Create</a>
          </div>
        <% } %>
      </div>
    </div>
  </div>

  <!-- Recent Certificates -->
  <div class="col-lg-6">
    <div class="card border-0">
      <div class="card-header">
        <h5 class="card-header-title"><i class="fas fa-certificate"></i> Latest Certificates</h5>
        <a href="/admin/certificate" class="btn btn-sm btn-outline-primary">View All</a>
      </div>
      <div class="card-body p-0">
        <% if (recentCertificates && recentCertificates.length > 0) { %>
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead>
                <tr>
                  <th>Cert. No.</th>
                  <th>Full Name</th>
                  <th>Program</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                <% recentCertificates.forEach(c => { %>
                  <tr>
                    <td><code style="font-size:0.8rem;color:var(--info-color)"><%= c.certification_number %></code></td>
                    <td style="font-weight:500;font-size:0.8125rem"><%= c.student_name %></td>
                    <td style="font-size:0.8125rem;color:var(--text-muted)"><%= c.program_name %></td>
                    <td>
                      <span class="badge <%= c.status === 'active' ? 'bg-soft-success' : 'bg-soft-danger' %>">
                        <%= c.status %>
                      </span>
                    </td>
                  </tr>
                <% }); %>
              </tbody>
            </table>
          </div>
        <% } else { %>
          <div class="empty-state" style="padding:2rem 1rem;">
            <div class="empty-state-icon"><i class="fas fa-certificate"></i></div>
            <h5>No certificates yet</h5>
            <a href="/admin/certificate/create" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> Create</a>
          </div>
        <% } %>
      </div>
    </div>
  </div>
</div>