File: /var/www/html/obaasimaghana/app/views/dashboard/learner.php
<?php
$title = 'Learner Dashboard';
ob_start();
// Count completed courses for badge and certificates tab
$completedCourses = array_filter($data['courses'], function($course) {
return (
(isset($course['progress']) && $course['progress'] == 100) ||
(isset($course['status']) && $course['status'] === 'completed')
);
});
$completedCount = count($completedCourses);
?>
<div class="container mx-auto px-4 py-8 font-sans">
<!-- Dashboard Header -->
<div class="bg-sky-50 rounded-xl p-8 mb-8">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-4">
<div class="w-16 h-16 bg-gray-200 rounded-full overflow-hidden">
<!-- User avatar or initials -->
<div class="w-full h-full flex items-center justify-center bg-emerald-600 text-white text-lg font-bold">
<?php echo substr($_SESSION['user_name'], 0, 1); ?>
</div>
</div>
<div>
<h1 class="text-xl font-bold text-gray-800">Hello, <?php echo $_SESSION['user_name']; ?></h1>
<p class="text-sm text-gray-600">Let's jump back in.</p>
</div>
</div>
<div>
<span class="text-sm text-emerald-600">
Profile Complete
<span class="ml-1 text-xs bg-emerald-100 text-emerald-600 px-2 py-1 rounded">100%</span>
</span>
</div>
</div>
<!-- Navigation Tabs -->
<div class="flex gap-8 border-b border-gray-200">
<a href="#learn" id="learn-tab" class="px-1 py-3 text-sm border-b-2 border-emerald-500 text-emerald-600 font-medium tab-link active">
Learn & Get Certificates
</a>
<a href="#certificates" id="certificates-tab" class="px-1 py-3 text-sm text-gray-500 hover:text-gray-700 tab-link">
Certificates
<span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-xs bg-red-500 text-white rounded-full"><?php echo $completedCount; ?></span>
</a>
</div>
</div>
<!-- Tab Content -->
<div class="tab-content">
<!-- Learn Tab Content -->
<div id="learn-content" class="tab-pane active">
<!-- Courses Section -->
<div class="mb-8">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-bold text-gray-800">
Courses In Progress
<span class="text-sm text-gray-500">(<?php echo isset($data['courses']) ? count($data['courses']) : 0; ?>)</span>
</h2>
<a href="<?php echo APP_URL; ?>/courses" class="text-sm text-emerald-600 hover:text-emerald-700 font-medium">
Browse All Courses <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
<?php if(empty($data['courses'])): ?>
<div class="text-center py-12 bg-white rounded-lg shadow">
<div class="mb-4">
<i class="fas fa-book-open text-3xl text-gray-400"></i>
</div>
<h3 class="text-base font-medium text-gray-900 mb-2">No Courses In Progress</h3>
<p class="text-sm text-gray-600 mb-4">Start learning by enrolling in a course</p>
<a href="<?php echo APP_URL; ?>/courses" class="inline-flex items-center px-4 py-2 text-sm bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors">
Browse Courses
</a>
</div>
<?php else: ?>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<?php foreach($data['courses'] as $course): ?>
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="aspect-w-16 aspect-h-9 bg-gray-100">
<img src="<?php echo !empty($course['thumbnail']) ? APP_URL . '/uploads/thumbnails/' . $course['thumbnail'] : APP_URL . '/assets/images/course-default.jpg'; ?>"
alt="<?php echo htmlspecialchars($course['title']); ?>"
class="w-full h-full object-cover">
</div>
<div class="p-4">
<h3 class="text-sm font-medium text-gray-900 mb-2"><?php echo htmlspecialchars($course['title']); ?></h3>
<div class="flex items-center text-xs text-gray-500 mb-3">
<i class="fas fa-user-tie mr-2"></i>
<span>By: <?php echo htmlspecialchars($course['trainer_name']); ?></span>
</div>
<div class="mb-4">
<?php
$progress = isset($course['progress']) ? (int)$course['progress'] : 0;
$lastActive = isset($course['last_updated']) ? $course['last_updated'] : null;
?>
<div class="h-2 bg-gray-200 rounded-full">
<div class="h-2 bg-emerald-500 rounded-full" style="width: <?php echo $progress; ?>%"></div>
</div>
<div class="flex items-center justify-between mt-1 text-xs">
<span class="text-emerald-600"><?php echo $progress; ?>% Complete</span>
<span class="text-gray-500">
<?php if($progress > 0): ?>
<?php if($lastActive): ?>
Last active: <?php echo formatDate($lastActive); ?>
<?php else: ?>
In progress
<?php endif; ?>
<?php else: ?>
Not started yet
<?php endif; ?>
</span>
</div>
</div>
<a href="<?php echo APP_URL; ?>/courses/learn/<?php echo $course['id']; ?>"
class="block w-full text-center py-2 text-sm bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors">
Continue Learning
</a>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<!-- Recommended Courses Section -->
<div>
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-bold text-gray-800">Recommended For You</h2>
<a href="<?php echo APP_URL; ?>/courses" class="text-sm text-emerald-600 hover:text-emerald-700 font-medium">
View All <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
<?php if(isset($data['recommended_courses']) && !empty($data['recommended_courses'])): ?>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<?php foreach($data['recommended_courses'] as $course): ?>
<div class="bg-white rounded-lg shadow overflow-hidden">
<div class="aspect-w-16 aspect-h-9 bg-gray-100">
<img src="<?php echo !empty($course['thumbnail']) ? APP_URL . '/uploads/thumbnails/' . $course['thumbnail'] : APP_URL . '/assets/images/course-default.jpg'; ?>"
alt="<?php echo htmlspecialchars($course['title']); ?>"
class="w-full h-full object-cover">
</div>
<div class="p-4">
<div class="flex items-center gap-2 mb-2">
<?php if(isset($course['level'])): ?>
<span class="px-2 py-1 text-xs font-medium bg-emerald-100 text-emerald-800 rounded-full">
<?php echo ucfirst($course['level']); ?>
</span>
<?php endif; ?>
<?php if(isset($course['category'])): ?>
<span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">
<?php echo ucfirst($course['category']); ?>
</span>
<?php endif; ?>
</div>
<h3 class="text-sm font-medium text-gray-900 mb-2"><?php echo htmlspecialchars($course['title']); ?></h3>
<p class="text-xs text-gray-600 mb-4"><?php echo htmlspecialchars(substr($course['description'], 0, 100) . '...'); ?></p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-emerald-600 flex items-center justify-center text-white mr-2">
<?php echo substr($course['trainer_name'], 0, 1); ?>
</div>
<span class="text-xs text-gray-600"><?php echo htmlspecialchars($course['trainer_name']); ?></span>
</div>
<a href="<?php echo APP_URL; ?>/courses/show/<?php echo $course['id']; ?>"
class="text-sm text-emerald-600 hover:text-emerald-700">
Learn More
</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
<!-- Certificates Tab Content -->
<div id="certificates-content" class="tab-pane hidden">
<div class="bg-white rounded-lg shadow p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-bold text-gray-800">Your Certificates</h2>
</div>
<?php if($completedCount > 0): ?>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<?php foreach($completedCourses as $course): ?>
<div class="bg-white border border-gray-200 rounded-lg p-4">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center">
<i class="fas fa-certificate text-xl text-emerald-600"></i>
</div>
<span class="text-xs text-gray-500">
Completed
</span>
</div>
<h3 class="text-sm font-medium text-gray-900 mb-2">
<?php echo htmlspecialchars($course['title']); ?>
</h3>
<p class="text-xs text-gray-600 mb-4">
Certificate of Completion
</p>
<div class="flex justify-between items-center">
<a href="<?php echo APP_URL; ?>/courses/certificate/<?php echo $course['id']; ?>"
class="text-sm text-emerald-600 hover:text-emerald-700 font-medium" target="_blank">
View Certificate
</a>
</div>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<div class="text-center py-12">
<div class="mb-4">
<i class="fas fa-certificate text-3xl text-gray-400"></i>
</div>
<h3 class="text-base font-medium text-gray-900 mb-2">No Certificates Yet</h3>
<p class="text-sm text-gray-600 mb-4">Complete courses to earn certificates</p>
<a href="<?php echo APP_URL; ?>/courses" class="inline-flex items-center px-4 py-2 text-sm bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors">
Browse Courses
</a>
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Mobile App Banner
<div class="bg-gradient-to-r from-cyan-50 to-sky-50 rounded-xl p-6 mb-8">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<img src="<?php echo APP_URL; ?>/assets/images/mobile-app-icon.png" alt="Mobile App" class="w-12 h-12">
<div>
<p class="font-medium text-gray-900">No internet? No problem! Download any course on the Obaasima App and learn on the go.</p>
</div>
</div>
<button class="px-4 py-2 bg-white text-emerald-600 rounded-lg hover:bg-gray-50 transition-colors">
Get App
</button>
</div>
</div>-->
</div>
<!-- Add JavaScript for tab functionality -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabLinks = document.querySelectorAll('.tab-link');
const tabPanes = document.querySelectorAll('.tab-pane');
function switchTab(tabId) {
// Update tab links
tabLinks.forEach(link => {
if (link.getAttribute('href') === tabId) {
link.classList.add('border-emerald-500', 'text-emerald-600');
link.classList.remove('text-gray-500');
} else {
link.classList.remove('border-emerald-500', 'text-emerald-600');
link.classList.add('text-gray-500');
}
});
// Update tab content
tabPanes.forEach(pane => {
if (pane.id === tabId.substring(1) + '-content') {
pane.classList.remove('hidden');
pane.classList.add('active');
} else {
pane.classList.add('hidden');
pane.classList.remove('active');
}
});
// Update URL hash
window.location.hash = tabId;
}
// Handle tab clicks
tabLinks.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const tabId = link.getAttribute('href');
switchTab(tabId);
});
});
// Handle initial load with hash
if (window.location.hash) {
switchTab(window.location.hash);
}
});
</script>
<?php
$content = ob_get_clean();
require APP_PATH . '/views/layouts/dashboard.php';
?>