feat: Implement core application UI with new headers, navigation, and initial pages.

Frontend-Learner/pages/dashboard/index.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 /**
- * @file home.vue
- * @description หน้าแดชบอร์ดหลัก (Dashboard)
- * แสดงข้อความต้อนรับ และคอร์สแนะนำสำหรับผู้เรียน
+ * @file index.vue
+ * @description Dashboard Home Page matching FutureSkill design
  */
 
 definePageMeta({
@@ -11,106 +10,234 @@ definePageMeta({
 })
 
 useHead({
-  title: 'Dashboard - e-Learning'
+  title: 'Dashboard - FutureSkill Clone'
 })
 
 const { currentUser } = useAuth()
-const { fetchCourses, getLocalizedText } = useCourse() // Import useCourse
-const { fetchCategories } = useCategory() // Import useCategory
-
+const { fetchCourses, fetchEnrolledCourses, getLocalizedText } = useCourse()
+const { fetchCategories } = useCategory()
 const { t } = useI18n()
 
-
-
-// Recommended Courses State
-// เก็บข้อมูลคอร์สแนะนำ (สุ่มมา 3 คอร์ส)
+// State
+const enrolledCourses = ref<any[]>([])
 const recommendedCourses = ref<any[]>([])
+const libraryCourses = ref<any[]>([])
+const categories = ref<any[]>([])
 
+const isLoading = ref(true)
+
+// Initial Data Fetch
 onMounted(async () => {
-  // 1. Fetch Categories for mapping
-  const catRes = await fetchCategories()
-  const catMap = new Map()
-  if (catRes.success) {
-    catRes.data?.forEach((c: any) => catMap.set(c.id, c.name))
-  }
+  isLoading.value = true
+  try {
+    const [catRes, enrollRes, courseRes] = await Promise.all([
+      fetchCategories(),
+      fetchEnrolledCourses({ limit: 3, status: 'IN_PROGRESS' }), // Fetch recent enrolled
+      fetchCourses({ limit: 3, random: true, forceRefresh: true, is_recommended: true }) // Fetch 3 Recommended Courses
+    ])
 
-  // 2. Fetch 3 Random Courses from Server
-  // ดึงคอร์สแบบสุ่มจาก Server โดยตรง (ผ่าน API ใหม่ที่เพิ่ม parameter random และ limit)
-  const res = await fetchCourses({ random: true, limit: 3, forceRefresh: true, is_recommended: true })
-  
-  if (res.success && res.data?.length) {
-    recommendedCourses.value = res.data.map((c: any) => ({
-      id: c.id,
-      title: c.title,
-      category: catMap.get(c.category_id),
-      lessons: c.lessons,
-      image: c.thumbnail_url || '',
-      badge: '', 
-      badgeType: '' 
-    }))
+    if (catRes.success) {
+      categories.value = catRes.data || []
+    }
+    
+    const catMap = new Map()
+    categories.value.forEach((c: any) => catMap.set(c.id, c.name))
+
+    
+    // Map Enrolled Courses
+    if (enrollRes.success && enrollRes.data) {
+       enrolledCourses.value = enrollRes.data.map((item: any) => ({
+         id: item.course_id,
+         title: item.course.title,
+         thumbnail_url: item.course.thumbnail_url,
+         progress: item.progress_percentage || 0,
+         total_lessons: item.course.total_lessons || 10,
+         completed_lessons: Math.floor((item.progress_percentage / 100) * (item.course.total_lessons || 10))
+       }))
+    }
+
+    // Map Recommended/Library Courses
+    if (courseRes.success && courseRes.data) {
+       // Use fetched courses for recommended section
+       recommendedCourses.value = courseRes.data.map((c: any) => ({
+          id: c.id,
+          title: c.title,
+          category: catMap.get(c.category_id),
+          description: c.description,
+          lessons: c.total_lessons || 0,
+          image: c.thumbnail_url || '',
+          rating: c.rating, 
+          price: c.price, 
+          is_free: c.is_free
+       }))
+
+       // Just for demo, use same data for library if needed or fetch separately
+       libraryCourses.value = courseRes.data.slice(0, 2)
+    }
+
+  } catch (err) {
+    console.error('Failed to load dashboard data', err)
+  } finally {
+    isLoading.value = false
   }
 })
+
+// Helper for "Continue Learning" Hero Card
+const heroCourse = computed(() => enrolledCourses.value[0] || null)
+const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
+
 </script>
 
 <template>
-  <div class="page-container !pt-4">
-    <!-- Welcome Header Section (Minimalist) -->
-    <div class="flex items-center gap-6 mb-10 py-2 animate-fade-in">
-      <!-- Avatar with premium shadow -->
-      <div class="relative group cursor-pointer" @click="$router.push('/dashboard/profile')">
-        <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
-        <q-avatar size="84px" class="relative shadow-2xl ring-4 ring-white dark:ring-slate-900 transition-all duration-500 overflow-hidden">
-          <img 
-            :src="currentUser?.photoURL || 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y'" 
-            class="object-cover"
-          />
-        </q-avatar>
-      </div>
-      
-      <div class="flex flex-col">
-          <h1 class="text-2xl md:text-4xl font-black text-slate-900 dark:text-white tracking-tight leading-tight mb-1">
-            {{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}!
-          </h1>
-          <div class="flex items-center gap-2">
-            <span class="text-slate-500 dark:text-slate-400 text-sm font-medium">{{ $t('dashboard.welcomeSubtitle') }}</span>
-          </div>
-      </div>
-    </div>
+  <div class="bg-[#F8F9FA] min-h-screen font-inter pb-20">
+    
+    <!-- 1. Greeting Section -->
+    <section class="bg-white pt-8 pb-10 px-4 md:px-12">
+        <div class="max-w-7xl mx-auto">
+            <h1 class="text-3xl md:text-4xl font-bold text-[#2D2D2D] mb-4 flex items-center gap-3">
+                สวัสดี {{ currentUser?.firstName || 'User' }} <span class="text-3xl">😊</span>
+            </h1>
+            <p class="text-gray-500 text-base md:text-lg font-light max-w-3xl">
+                เข้าถึง +490 หลักสูตรออนไลน์สำหรับสมาชิกรายปี เพื่อบรรลุเป้าหมายด้านอาชีพและพัฒนาการเรียนรู้สำหรับคุณ ✨
+            </p>
+        </div>
+    </section>
 
-      <!-- Main Content Area -->
-      <div>
-        <!-- Section: Recommended Courses -->
-        <div class="mb-6">
-           <h2 class="text-xl font-black flex items-center gap-3 tracking-tight text-slate-900 dark:text-white">
-            <span class="w-1 h-6 bg-emerald-500 rounded-full shadow-sm shadow-emerald-500/50"/>
-            {{ $t('menu.recommendedCourses') }}
-          </h2>
-        </div>
-        
-        <!-- Recommended Grid -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pb-20">
-           <CourseCard
-             v-for="course in recommendedCourses" 
-             :key="course.id"
-             v-bind="course"
-           />
-        </div>
-        
-        <!-- Loading State for Recommended -->
-        <div v-if="recommendedCourses.length === 0" class="flex justify-center py-10 opacity-50">
-           <div class="animate-pulse">Loading recommendations...</div>
-        </div>
-      </div>
+    <div class="max-w-7xl mx-auto px-4 md:px-12 space-y-16 mt-10">
+
+        <!-- 2. Continue Learning Section -->
+        <section v-if="enrolledCourses.length > 0">
+            <div class="flex justify-between items-end mb-6">
+                 <h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D]">เรียนต่อกับคอร์สของคุณ</h2>
+                 <NuxtLink to="/dashboard/my-courses" class="text-purple-600 hover:text-purple-700 font-medium text-sm flex items-center gap-1">
+                    การเรียนของฉัน <q-icon name="arrow_forward" size="16px" />
+                 </NuxtLink>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <!-- Hero Card (Left) -->
+                <div v-if="heroCourse" class="relative group cursor-pointer rounded-2xl overflow-hidden bg-white shadow-sm border border-gray-100 hover:shadow-md transition-all h-[320px]">
+                    <img :src="heroCourse.thumbnail_url" class="w-full h-full object-cover brightness-75 group-hover:brightness-90 transition-all duration-500" />
+                    
+                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent p-8 flex flex-col justify-end">
+                        <div class="bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded w-fit mb-3">COURSE</div>
+                        <h3 class="text-white text-2xl font-bold mb-4 line-clamp-2 leading-snug">{{ getLocalizedText(heroCourse.title) }}</h3>
+                        
+                        <!-- Progress -->
+                        <div class="w-full">
+                            <div class="flex justify-between text-gray-300 text-xs mb-2">
+                                <span>{{ heroCourse.completed_lessons }}/{{ heroCourse.total_lessons }} บทเรียน</span>
+                                <span>{{ heroCourse.progress }}%</span>
+                            </div>
+                            <div class="h-1.5 w-full bg-white/20 rounded-full overflow-hidden">
+                                <div class="h-full bg-purple-500 rounded-full" :style="{ width: `${heroCourse.progress}%` }"></div>
+                            </div>
+                            <div class="mt-4 flex justify-end">
+                                <span class="text-white font-bold text-sm hover:underline">เรียนต่อ</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Side List (Right) -->
+                <div class="flex flex-col gap-4 h-[320px]">
+                    <div v-for="course in sideCourses" :key="course.id" class="flex-1 bg-white rounded-2xl p-4 border border-gray-100 shadow-sm hover:shadow-md transition-all flex gap-4 items-center">
+                        <div class="w-32 h-20 rounded-xl overflow-hidden flex-shrink-0">
+                            <img :src="course.thumbnail_url" class="w-full h-full object-cover" />
+                        </div>
+                        <div class="flex-grow min-w-0 flex flex-col justify-between h-full py-1">
+                             <h4 class="text-gray-800 font-bold text-sm line-clamp-2 mb-2">{{ getLocalizedText(course.title) }}</h4>
+                             
+                             <div class="mt-auto">
+                                <div class="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden mb-2">
+                                    <div class="h-full bg-purple-600 rounded-full" :style="{ width: `${course.progress}%` }"></div>
+                                </div>
+                                <div class="flex justify-between items-center text-xs">
+                                    <span class="text-gray-500">{{ course.completed_lessons }}/{{ course.total_lessons }} บทเรียน</span>
+                                    <span class="text-purple-600 font-bold cursor-pointer hover:underline" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">เรียนต่อ</span>
+                                </div>
+                             </div>
+                        </div>
+                    </div>
+                     <!-- Empty State Placeholder if less than 2 side courses -->
+                    <div v-if="sideCourses.length < 2" class="flex-1 bg-gray-50 rounded-2xl border border-dashed border-gray-200 flex items-center justify-center text-gray-400 text-sm">
+                        เริ่มเรียนคอร์สใหม่ๆ เพื่อเติมเต็มส่วนนี้
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 3. Knowledge Library -->
+        <section>
+             <div class="mb-6">
+                 <h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] mb-1">คลังความรู้</h2>
+                 <p class="text-gray-500 text-sm">คุณสามารถเลือกเรียนคอร์สเรียนที่คุณเป็นเจ้าของ</p>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <!-- Course Cards -->
+                <CourseCard 
+                  v-for="course in libraryCourses" 
+                  :key="course.id"
+                  v-bind="course"
+                  :image="course.thumbnail_url"
+                  class="h-full md:col-span-1"
+                />
+
+                <!-- CTA Card (Large) -->
+                <div class="bg-white rounded-3xl border border-gray-100 shadow-sm p-8 flex flex-col items-center justify-center text-center h-full min-h-[300px] hover:shadow-md transition-all group">
+                     <p class="text-gray-600 font-medium mb-6 mt-4">เลือกเรียนคอร์สในคลังความรู้ของคุณ</p>
+                     <q-btn
+                        flat
+                        rounded
+                        no-caps
+                        class="text-purple-600 hover:bg-purple-50 px-6 py-2 font-bold group-hover:scale-105 transition-transform"
+                        to="/dashboard/my-courses"
+                     >
+                        ดูทั้งหมด <q-icon name="arrow_forward" size="18px" class="ml-2" />
+                     </q-btn>
+                </div>
+            </div>
+        </section>
+
+
+
+        <!-- 5. Recommended Courses -->
+        <section class="pb-20">
+             <div class="mb-6">
+                 <h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] text-left">คอร์สแนะนำ</h2>
+            </div>
+
+            <!-- Recommended Grid (3 columns) -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in">
+                <CourseCard 
+                  v-for="course in recommendedCourses" 
+                  :key="course.id" 
+                  v-bind="course"
+                />
+            </div>
+            
+             <!-- Loading State -->
+            <div v-if="recommendedCourses.length === 0 && !isLoading" class="flex justify-center py-10 opacity-50">
+               <div class="text-gray-400">ไม่พบข้อมูลคอร์สแนะนำ</div>
+            </div>
+        </section>
+
+    </div>
   </div>
 </template>
 
 <style scoped>
-@keyframes fade-in {
-  from { opacity: 0; transform: translateX(-20px); }
-  to { opacity: 1; transform: translateX(0); }
+/* Scoped specific styles */
+.animate-fade-in {
+  animation: fadeIn 0.5s ease-out;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.animate-fade-in {
-  animation: fade-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+:deep(.q-btn) {
+    text-transform: none; /* Prevent uppercase in Q-Btns */
 }
 </style>