chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: implement dashboard page displaying course progress, recommendations, and quick category navigation.

Browse source
This commit is contained in:
supalerk-ar66 2026-03-04 10:41:53 +07:00
parent a3b2e55443
commit ebcae0b3e7
2 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Frontend-Learner/app.vue
View file

@ -27,8 +27,8 @@ onMounted(() => {
</script>
<template>
<!-- แสดง Loader ระหว่างเปลี่ยนหน้า หรือโหลดข้อมูล -->
<GlobalLoader />
<!-- แสดงแถบโหลดด้านบนจอ (Progress Bar) แทนการโหลดเต็มหน้าจอ -->
<NuxtLoadingIndicator color="#2563EB" :height="4" />
<!-- NuxtLayout: แสดง Layout ที่กำหนดในแต่ละเพจ (default: layouts/default.vue) -->
<NuxtLayout>

6
Frontend-Learner/pages/dashboard/index.vue
View file

@ -270,11 +270,11 @@ const navigateToCategory = (catName: string) => {
<div class="flex w-full gap-3 mt-7 relative z-10 px-2">
<div class="flex-1 bg-[#F8FAFC] dark:bg-slate-800 rounded-2xl p-3.5 flex flex-col items-center justify-center transition-colors shadow-sm">
<span class="text-[1.35rem] font-black text-[#3B6BE8] dark:text-blue-400 mb-1 leading-none">{{ String(enrolledCourses.length || 0).padStart(2, '0') }}</span>
<span class="text-slate-400 text-[10px] font-bold tracking-wider">{{ $t('myCourses.filterProgress') }}</span>
<span class="text-[1.35rem] font-black text-[#3B6BE8] dark:text-blue-400 mb-1 leading-none">{{ enrolledCourses.length || 0 }}</span>
<span class="text-slate-400 text-[10px] font-bold tracking-wider">{{ $t('sidebar.onlineCourses') }}</span>
</div>
<div class="flex-1 bg-[#F8FAFC] dark:bg-slate-800 rounded-2xl p-3.5 flex flex-col items-center justify-center transition-colors shadow-sm">
<span class="text-[1.35rem] font-black text-[#10B981] dark:text-emerald-400 mb-1 leading-none z-10">{{ String(enrolledCourses.filter(c => c.progress >= 100).length || 0).padStart(2, '0') }}</span>
<span class="text-[1.35rem] font-black text-[#10B981] dark:text-emerald-400 mb-1 leading-none z-10">{{ enrolledCourses.filter(c => c.progress >= 100).length || 0 }}</span>
<span class="text-slate-400 text-[10px] font-bold tracking-wider z-10">{{ $t('myCourses.filterCompleted') }}</span>
</div>
</div>