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

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

View file

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

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 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"> <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-[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('myCourses.filterProgress') }}</span> <span class="text-slate-400 text-[10px] font-bold tracking-wider">{{ $t('sidebar.onlineCourses') }}</span>
</div> </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"> <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> <span class="text-slate-400 text-[10px] font-bold tracking-wider z-10">{{ $t('myCourses.filterCompleted') }}</span>
</div> </div>
</div> </div>