toannt/uldp-degree-mangement-system
1
0
Fork 0
forked from UKSOURCE/cms.hailearning.edu.vn
Code Pull Requests Activity

first commit

Browse Source
This commit is contained in:
nthanhtoan61
2026-04-11 14:08:27 +07:00
parent e86e5d2c46
commit 6b7655aa16
389 changed files with 5387 additions and 60861 deletions
Download Patch File Download Diff File Expand all files Collapse all files

579
views/admin/dashboard.ejs
View File

@@ -1,456 +1,155 @@
<div class="container mt-4 mb-4">
<h1 class="page-title mb-4">Dashboard</h1>
<!-- 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>
<!-- Quick Actions -->
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0" style="color: var(--primary-color)">Quick Management</h5>
<!-- 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 class="card-body p-0">
<div class="row g-0">
<!-- Home -->
<div class="col-md-4 border-end">
<div class="p-4">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-home fa-lg" style="color: var(--primary-color);"></i>
</div>
<div>
<h5 class="mb-0">Home</h5>
<p class="text-muted mb-0 small">Manage homepage</p>
</div>
</div>
<a href="/admin/home" class="btn btn-sm btn-primary w-100 mt-2">
<i class="fas fa-edit me-2"></i>Edit
</a>
</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>
<!-- Header & Menu -->
<div class="col-md-4 border-end">
<div class="p-4">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-bars fa-lg" style="color: var(--primary-color);"></i>
</div>
<div>
<h5 class="mb-0">Header & Menu</h5>
<p class="text-muted mb-0 small">Manage header & menu</p>
</div>
</div>
<a href="/admin/header" class="btn btn-sm btn-primary w-100 mt-2">
<i class="fas fa-edit me-2"></i>Edit
</a>
<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>
</div>
<!-- Footer -->
<div class="col-md-4">
<div class="p-4">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-window-minimize fa-lg" style="color: var(--primary-color);"></i>
</div>
<div>
<h5 class="mb-0">Footer</h5>
<p class="text-muted mb-0 small">Manage footer</p>
</div>
</div>
<a href="/admin/footer" class="btn btn-sm btn-primary w-100 mt-2">
<i class="fas fa-edit me-2"></i>Edit
</a>
<% } 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>
<!-- About Us -->
<div class="col-md-4 border-end border-top">
<div class="p-4">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-users fa-lg" style="color: var(--primary-color);"></i>
</div>
<div>
<h5 class="mb-0">About Us</h5>
<p class="text-muted mb-0 small">Manage about us</p>
</div>
</div>
<a href="/admin/about-us" class="btn btn-sm btn-primary w-100 mt-2">
<i class="fas fa-edit me-2"></i>Edit
</a>
</div>
</div>
<!-- Contact -->
<div class="col-md-4 border-end border-top">
<div class="p-4">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-envelope fa-lg" style="color: var(--primary-color);"></i>
</div>
<div>
<h5 class="mb-0">Contact</h5>
<p class="text-muted mb-0 small">Manage contact</p>
</div>
</div>
<a href="/admin/contact" class="btn btn-sm btn-primary w-100 mt-2">
<i class="fas fa-edit me-2"></i>Edit
</a>
</div>
</div>
<!-- Appointment -->
<div class="col-md-4 border-end border-top">
<div class="p-4">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-calendar-check fa-lg" style="color: var(--primary-color);"></i>
</div>
<div>
<h5 class="mb-0">Appointment</h5>
<p class="text-muted mb-0 small">Manage appointment page</p>
</div>
</div>
<a href="/admin/appointment" class="btn btn-sm btn-primary w-100 mt-2">
<i class="fas fa-edit me-2"></i>Edit
</a>
</div>
</div>
<!-- Pricing -->
<div class="col-md-4 border-end border-top">
<div class="p-4">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-tags fa-lg" style="color: var(--primary-color);"></i>
</div>
<div>
<h5 class="mb-0">Pricing</h5>
<p class="text-muted mb-0 small">Manage pricing page</p>
</div>
</div>
<a href="/admin/pricing" class="btn btn-sm btn-primary w-100 mt-2">
<i class="fas fa-edit me-2"></i>Edit
</a>
</div>
</div>
<!-- Services -->
<div class="col-md-4 border-end border-top">
<div class="p-4">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-concierge-bell fa-lg" style="color: var(--primary-color);"></i>
</div>
<div>
<h5 class="mb-0">Services</h5>
<p class="text-muted mb-0 small">Manage services</p>
</div>
</div>
<a href="/admin/service" class="btn btn-sm btn-primary w-100 mt-2">
<i class="fas fa-edit me-2"></i>Edit
</a>
</div>
</div>
<!-- Blog -->
<div class="col-md-4 border-top">
<div class="p-4">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-blog fa-lg" style="color: var(--primary-color);"></i>
</div>
<div>
<h5 class="mb-0">Blog</h5>
<p class="text-muted mb-0 small">Manage blog posts</p>
</div>
</div>
<a href="/admin/blog" class="btn btn-sm btn-primary w-100 mt-2">
<i class="fas fa-edit me-2"></i>Edit
</a>
</div>
</div>
<!-- Visa -->
<div class="col-md-4 border-end border-top">
<div class="p-4">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 50px; height: 50px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-passport fa-lg" style="color: var(--primary-color);"></i>
</div>
<div>
<h5 class="mb-0">Visa</h5>
<p class="text-muted mb-0 small">Manage visa countries</p>
</div>
</div>
<a href="/admin/visa" class="btn btn-sm btn-primary w-100 mt-2">
<i class="fas fa-edit me-2"></i>Edit
</a>
</div>
</div>
<% } %>
</div>
</div>
</div>
<!-- API Links Section -->
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">API Endpoints</h5>
<span class="badge bg-primary">6 APIs</span>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>API Name</th>
<th>Endpoint</th>
<th>Method</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-bars" style="color: var(--primary-color);"></i>
</div>
<span>Menu Header API</span>
</div>
</td>
<td><code>/api/header</code></td>
<td>
<span class="badge" style="background-color: var(--primary-color)">GET</span>
</td>
<td>API to get menu header data</td>
<td>
<a href="/api/header" class="btn btn-sm btn-outline-primary" target="_blank">
<i class="fas fa-external-link-alt me-1"></i>View
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-home" style="color: var(--primary-color);"></i>
</div>
<span>Home API</span>
</div>
</td>
<td><code>/api/home</code></td>
<td>
<span class="badge" style="background-color: var(--primary-color)">GET</span>
</td>
<td>API to get homepage data</td>
<td>
<a href="/api/home" class="btn btn-sm btn-outline-primary" target="_blank">
<i class="fas fa-external-link-alt me-1"></i>View
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-info-circle" style="color: var(--primary-color);"></i>
</div>
<span>About API</span>
</div>
</td>
<td><code>/api/about</code></td>
<td>
<span class="badge" style="background-color: var(--primary-color)">GET</span>
</td>
<td>API to get about page data</td>
<td>
<a href="/api/about" class="btn btn-sm btn-outline-primary" target="_blank">
<i class="fas fa-external-link-alt me-1"></i>View
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-users" style="color: var(--primary-color);"></i>
</div>
<span>About Us API</span>
</div>
</td>
<td><code>/api/about-us</code></td>
<td>
<span class="badge" style="background-color: var(--primary-color)">GET</span>
</td>
<td>API to get about us data</td>
<td>
<a href="/api/about-us" class="btn btn-sm btn-outline-primary" target="_blank">
<i class="fas fa-external-link-alt me-1"></i>View
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-envelope" style="color: var(--primary-color);"></i>
</div>
<span>Contact API</span>
</div>
</td>
<td><code>/api/contact</code></td>
<td>
<span class="badge" style="background-color: var(--primary-color)">GET</span>
</td>
<td>API to get contact data</td>
<td>
<a href="/api/contact" class="btn btn-sm btn-outline-primary" target="_blank">
<i class="fas fa-external-link-alt me-1"></i>View
</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<div class="rounded-circle d-flex align-items-center justify-content-center me-2"
style="width: 32px; height: 32px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-blog" style="color: var(--primary-color);"></i>
</div>
<span>Blog API</span>
</div>
</td>
<td><code>/api/blog</code></td>
<td>
<span class="badge" style="background-color: var(--primary-color)">GET</span>
</td>
<td>API to get blog posts</td>
<td>
<a href="/api/blog" class="btn btn-sm btn-outline-primary" target="_blank">
<i class="fas fa-external-link-alt me-1"></i>View
</a>
</td>
</tr>
</tbody>
</table>
<!-- 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>
</div>
<!-- System Info -->
<div class="card">
<div class="card-header" style="
background: #0a2347;
color: white;
">
<h5 class="mb-0">System Information</h5>
</div>
<div class="card-body" style="background-color: #f8faf8">
<div class="row">
<div class="col-md-6">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 40px; height: 40px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-info-circle" style="color: var(--primary-color);"></i>
</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>
<div>
<div class="text-muted small">Version</div>
<div class="fw-bold" style="color: var(--primary-color)">
CMS.HAILearning v1.0.0
</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 class="col-md-6">
<div class="d-flex align-items-center mb-3">
<div class="rounded-circle d-flex align-items-center justify-content-center me-3"
style="width: 40px; height: 40px; background-color: rgba(184, 183, 106, 0.1);">
<i class="fas fa-user" style="color: var(--primary-color);"></i>
</div>
<div>
<div class="text-muted small">Logged in as</div>
<div class="fw-bold" style="color: var(--primary-color);">
<%= user.username %>
</div>
</div>
</div>
</div>
</div>
<div class="alert mt-3 mb-0"
style="background-color: rgba(184, 183, 106, 0.05); border-left: 4px solid var(--primary-color);" role="alert">
<div class="d-flex">
<div class="me-3">
<i class="fas fa-lightbulb fa-lg" style="color: var(--primary-color)"></i>
</div>
<div>
<h6 class="mb-1" style="color: var(--primary-color)">Quick Tip</h6>
<p class="mb-0 text-muted">
Click the Edit button to make changes to your data.
</p>
</div>
<% } %>
</div>
</div>
</div>
</div>
</div>
<style>
.page-title {
color: var(--primary-color);
font-weight: 600;
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.btn-primary:hover {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
color: white;
}
.btn-outline-primary {
color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-outline-primary:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.card-header h5 {
color: white;
}
.badge {
background-color: var(--primary-color) !important;
color: white;
}
</style>