feat: Implement admin user and pending course management, instructor course listing, and a dedicated admin service.

Frontend-Learner/app.vue

@@ -1,20 +1,27 @@
-<script setup>
-// ดึงฟังก์ชันจัดการ Authentication
-const { fetchUserProfile, isAuthenticated } = useAuth()
+<script setup lang="ts">
+/**
+ * @file app.vue
+ * @description Root application component.
+ * Handles initialization of authentication and theme settings.
+ */
 
-// เมื่อ App เริ่มทำงาน (Mounted)
+// Initialize composables
+const { fetchUserProfile, isAuthenticated } = useAuth()
+const { isDark, set: setTheme } = useThemeMode()
+
+// App initialization logic
 onMounted(() => {
-  // 1. หากผู้ใช้ Login ค้างไว้ (มี Token) ให้ดึงข้อมูล Profile ล่าสุดทันที
+  // 1. Fetch user profile if tokens exist
   if (isAuthenticated.value) {
     fetchUserProfile()
   }
 
-  // 2. ตรวจสอบและคืนค่า Theme (Dark/Light) จาก LocalStorage
+  // 2. Initialize theme from persistent storage or system preference
   const savedTheme = localStorage.getItem('theme')
-  if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-    document.documentElement.classList.add('dark')
-  } else {
-    document.documentElement.classList.remove('dark')
+  if (savedTheme) {
+    setTheme(savedTheme === 'dark')
+  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    setTheme(true)
   }
 })
 </script>

Frontend-Learner/components/course/CourseCard.vue

@@ -57,7 +57,7 @@ const displayCategory = computed(() => getLocalizedText(props.category))
 </script>
 
 <template>
-  <div class="group relative flex flex-col bg-white dark:!bg-[#0f172a] rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
+  <div class="group relative flex flex-col bg-white dark:!bg-slate-900 rounded-3xl overflow-hidden border border-slate-200 dark:border-white/5 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
     
     <!-- Thumbnail Section -->
     <div class="relative w-full aspect-video overflow-hidden">
@@ -125,7 +125,7 @@ const displayCategory = computed(() => getLocalizedText(props.category))
             v-if="showViewDetails && !completed && !progress"
             flat
             rounded
-            class="w-full font-bold !text-blue-600 !bg-blue-50 hover:!bg-blue-100 dark:!bg-blue-900/40 dark:!text-blue-300 dark:hover:!bg-blue-900/60"
+            class="w-full font-bold !text-blue-600 !bg-blue-50 hover:!bg-blue-100 dark:!bg-blue-500/10 dark:!text-blue-400 dark:hover:!bg-blue-500/20"
             :label="$t('menu.viewDetails')"
             :to="`/course/${id}`"
           />

Frontend-Learner/components/profile/PasswordChangeForm.vue

@@ -36,8 +36,8 @@ const showConfirmPassword = ref(false);
 <template>
     <div :class="[!flat ? 'card-premium p-6 md:p-8' : '']" class="h-fit">
         <div v-if="!flat" class="flex items-center gap-3 mb-8">
-            <div class="w-10 h-10 rounded-xl bg-amber-50 dark:bg-amber-900/30 flex items-center justify-center">
-                <q-icon name="lock" class="text-amber-600 dark:text-amber-400 text-xl" />
+            <div class="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center">
+                <q-icon name="lock" class="text-blue-600 dark:text-blue-400 text-xl" />
             </div>
             <h2 class="text-xl font-black text-slate-900 dark:text-white">
                 {{ $t('profile.security') }}
@@ -118,8 +118,8 @@ const showConfirmPassword = ref(false);
             type="submit"
                 unelevated
                 rounded
-                class="w-full py-3 font-bold text-base shadow-lg shadow-amber-500/20"
-                style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white;"
+                class="w-full py-3 font-bold text-base shadow-lg shadow-blue-500/20"
+                style="background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white;"
                 :label="$t('profile.changePasswordBtn')"
                 :loading="loading"
             />

Frontend-Learner/composables/useAuth.ts

@@ -1,45 +1,4 @@
-
-// Interface สำหรับข้อมูลผู้ใช้งาน (User)
-interface User {
-  id: number
-  username: string
-  email: string
-  email_verified_at?: string | null
-  created_at?: string
-  updated_at?: string
-  role: {
-    code: string // เช่น 'STUDENT', 'INSTRUCTOR', 'ADMIN'
-    name: { th: string; en: string }
-  }
-  profile?: {
-    prefix: { th: string; en: string }
-    first_name: string
-    last_name: string
-    phone: string | null
-    avatar_url: string | null
-  }
-}
-
-
-
-// Interface สำหรับข้อมูลตอบกลับตอน Login
-interface loginResponse {
-  token: string
-  refreshToken: string
-  user: User
-  profile: User['profile']
-}
-
-// Interface สำหรับข้อมูลที่ใช้ลงทะเบียน
-interface RegisterPayload {
-  username: string
-  email: string
-  password: string
-  first_name: string
-  last_name: string
-  prefix: { th: string; en: string }
-  phone: string
-}
+import type { User, LoginResponse, RegisterPayload } from '@/types/auth'
 
 // ==========================================
 // Composable: useAuth

Frontend-Learner/composables/useCourse.ts

@@ -1,151 +1,14 @@
-// Interface สำหรับข้อมูลคอร์สเรียน (Public Course Data)
-export interface Course {
-  id: number
-  title: string | { th: string; en: string } // รองรับ 2 ภาษา
-  slug: string
-  description: string | { th: string; en: string }
-  thumbnail_url: string
-  price: string
-  is_free: boolean
-  original_price?: string
-  have_certificate: boolean
-  status: string // DRAFT, PUBLISHED
-  category_id: number
-  created_at?: string
-  updated_at?: string
-  created_by?: number
-  updated_by?: number
-  approved_at?: string
-  approved_by?: number
-  rejection_reason?: string
-  enrolled?: boolean
-  total_lessons?: number
-  
-
-  rating?: string
-  lessons?: number | string
-  levelType?: 'neutral' | 'warning' | 'success' // ใช้สำหรับการแสดงผล Badge ระดับความยาก (Frontend Logic)
-  
-  // โครงสร้างบทเรียน (Chapters & Lessons)
-  chapters?: {
-    id: number
-    title: string | { th: string; en: string }
-    lessons: {
-      id: number
-      title: string | { th: string; en: string }
-      duration_minutes: number
-      video_url?: string
-    }[]
-  }[]
-
-  // ข้อมูลผู้สอนและเจ้าของคอร์ส
-  creator?: {
-    id: number
-    username: string
-    email: string
-    profile: {
-      first_name: string
-      last_name: string
-      avatar_url: string
-    }
-  }
-  instructors?: {
-    user_id: number
-    is_primary: boolean
-    user: {
-      id: number
-      username: string
-      email: string
-      profile: {
-        first_name: string
-        last_name: string
-        avatar_url: string
-      }
-    }
-  }[]
-}
-
-interface CourseResponse {
-  code: number
-  message: string
-  data: Course[]
-  total: number
-  page?: number
-  limit?: number
-  totalPages?: number
-}
-
-interface SingleCourseResponse {
-  code: number
-  message: string
-  data: Course
-}
-
-// Interface สำหรับคอร์สที่ผู้ใช้ลงทะเบียนเรียนแล้ว (My Course)
-export interface EnrolledCourse {
-    id: number
-    course_id: number
-    course: Course
-    status: 'ENROLLED' | 'IN_PROGRESS' | 'COMPLETED' | 'DROPPED'
-    progress_percentage: number
-    enrolled_at: string
-    started_at?: string
-    completed_at?: string
-    last_accessed_at?: string
-}
-
-interface EnrolledCourseResponse {
-    code: number
-    message: string
-    data: EnrolledCourse[]
-    total: number
-    page: number
-    limit: number
-}
-
-// Interface สำหรับการส่งคำตอบแบบทดสอบ (Quiz Submission)
-export interface QuizAnswerSubmission {
-    question_id: number
-    choice_id: number
-}
-
-export interface QuizSubmitRequest {
-    answers: QuizAnswerSubmission[]
-}
-
-// Interface สำหรับผลลัพธ์การสอบ (Quiz Result)
-export interface QuizResult {
-    answers_review: {
-        score: number
-        is_correct: boolean
-        correct_choice_id: number
-        selected_choice_id: number
-        question_id: number
-    }[]
-    completed_at: string
-    started_at: string
-    attempt_number: number
-    passing_score: number
-    is_passed: boolean
-    correct_answers: number
-    total_questions: number
-    total_score: number
-    score: number
-    quiz_id: number
-    attempt_id: number
-}
-
-// Interface สำหรับ Certificate
-export interface Certificate {
-    certificate_id: number
-    course_id: number
-    course_title: {
-        en: string
-        th: string
-    }
-    issued_at: string
-    download_url: string
-}
+import type { 
+    Course, 
+    CourseResponse, 
+    SingleCourseResponse, 
+    EnrolledCourse, 
+    EnrolledCourseResponse, 
+    QuizAnswerSubmission, 
+    QuizSubmitRequest, 
+    QuizResult, 
+    Certificate 
+} from '@/types/course'
 
 // ==========================================
 // Composable: useCourse

Frontend-Learner/constants/landing.ts

@@ -0,0 +1,55 @@
+/**
+ * @file landing.ts
+ * @description Static data for the landing page.
+ */
+
+export const CATEGORY_CARDS = [
+  { 
+    title: 'โปรแกรมมิ่ง', 
+    desc: 'เชี่ยวชาญการเขียนโค้ดและพัฒนาซอฟต์แวร์', 
+    icon: 'code', 
+    slug: 'programming',
+    iconColor: 'text-blue-600',
+    iconBg: 'bg-blue-600/5'
+  },
+  { 
+    title: 'การออกแบบ', 
+    desc: 'ทักษะ UI/UX และการออกแบบระดับมือโปร', 
+    icon: 'palette', 
+    slug: 'design',
+    iconColor: 'text-indigo-600',
+    iconBg: 'bg-indigo-600/5'
+  },
+  { 
+    title: 'ธุรกิจ', 
+    desc: 'ทักษะการจัดการและความเป็นผู้นำสากล', 
+    icon: 'business_center', 
+    slug: 'business',
+    iconColor: 'text-blue-700',
+    iconBg: 'bg-blue-700/5'
+  }
+]
+
+export const WHY_CHOOSE_US = [
+  {
+    title: 'ผู้สอนเชี่ยวชาญ',
+    desc: 'เรียนรู้จากผู้นำในอุตสาหกรรมที่มีประสบการณ์การทำงานหลายปีในบริษัทเทคโนโลยีชั้นนำระดับโลก',
+    icon: 'groups',
+    iconBg: 'bg-blue-600/10',
+    iconColor: 'text-blue-600'
+  },
+  {
+    title: 'การเรียนรู้ที่ยืดหยุ่น',
+    desc: 'เรียนตามจังหวะของคุณเอง ได้ทุกที่ทุกเวลา เข้าถึงเนื้อหาคอร์สที่สมัครเรียนได้ตลอดชีพ',
+    icon: 'schedule',
+    iconBg: 'bg-indigo-600/10',
+    iconColor: 'text-indigo-600'
+  },
+  {
+    title: 'ประกาศนียบัตรเมื่อเรียนจบ',
+    desc: 'รับวุฒิบัตรที่เป็นที่ยอมรับเพื่อเสริมพอร์ตโฟลิโอระดับมืออาชีพของคุณและแชร์ลง LinkedIn ได้โดยตรง',
+    icon: 'verified',
+    iconBg: 'bg-blue-600/10',
+    iconColor: 'text-blue-600'
+  }
+]

Frontend-Learner/i18n/locales/en.json

@@ -87,7 +87,7 @@
     "overview": "Home",
     "myCourses": "My Courses",
     "browseCourses": "Browse Courses",
-    "onlineCourses": "Online Courses",
+    "onlineCourses": "All Courses",
     "recommendedCourses": "Recommended Courses",
     "announcements": "Announcements",
     "profile": "My Profile"
@@ -107,9 +107,14 @@
     "backToCatalog": "Back to Catalog",
     "selectable": "Selected",
     "foundTotal": "Found Total",
-    "items": "items"
+    "items": "items",
+    "subtitle": "Choose to learn new skills from our curated quality courses",
+    "searchBtn": "Search"
   },
   "myCourses": {
+    "title": "My Courses",
+    "subtitle": "Track your progress and continue learning from where you left off",
+    "searchPlaceholder": "Search my courses...",
     "filterAll": "All",
     "filterProgress": "In Progress",
     "filterCompleted": "Completed",

Frontend-Learner/i18n/locales/th.json

@@ -87,7 +87,7 @@
     "overview": "หน้าหลัก",
     "myCourses": "คอร์สของฉัน",
     "browseCourses": "ค้นหาคอร์ส",
-    "onlineCourses": "คอร์สออนไลน์",
+    "onlineCourses": "คอร์สเรียนทั้งหมด",
     "recommendedCourses": "คอร์สเรียนแนะนำ",
     "announcements": "ข่าวประกาศ",
     "profile": "บัญชีผู้ใช้"
@@ -108,9 +108,13 @@
     "selectable": "รายการที่เลือก",
     "foundTotal": "พบทั้งหมด",
     "items": "รายการ",
-    "subtitle": "เลือกเรียนรู้ทักษะใหม่ๆ จากหลักสูตรคุณภาพที่คัดสรรมาเพื่อคุณ"
+    "subtitle": "เลือกเรียนรู้ทักษะใหม่ๆ จากหลักสูตรคุณภาพที่คัดสรรมาเพื่อคุณ",
+    "searchBtn": "ค้นหา"
   },
   "myCourses": {
+    "title": "คอร์สของฉัน",
+    "subtitle": "ติดตามความคืบหน้าและเรียนรู้ต่อจากจุดที่ค้างไว้",
+    "searchPlaceholder": "ค้นหาชื่อคอร์สของฉัน...",
     "filterAll": "ทั้งหมด",
     "filterProgress": "กำลังเรียน",
     "filterCompleted": "เรียนจบแล้ว",
@@ -187,7 +191,7 @@
     "logout": "ออกจากระบบ"
   },
   "landing": {
-    "allCourses": "คอร์สทั้งหมด",
+    "allCourses": "คอร์สเรียนทั้งหมด",
     "discovery": "ค้นพบ",
     "goToDashboard": "เข้าสู่หน้าจัดการเรียน"
   },

Frontend-Learner/layouts/default.vue

@@ -58,13 +58,12 @@ const shouldHideSidebar = computed(() => {
       v-model="rightDrawerOpen"
       side="right"
       overlay
-      bordered
       class="bg-white dark:!bg-[#0f172a]"
       :width="300"
     >
-      <div class="flex flex-col h-full bg-white dark:bg-[#0f172a]">
+      <div class="flex flex-col h-full bg-white dark:!bg-[#0f172a] text-slate-900 dark:!text-slate-100">
         <!-- 1. Account Section -->
-        <div class="p-6 bg-slate-50/50 dark:bg-slate-800/30 border-b border-slate-100 dark:border-slate-800">
+        <div class="p-6 bg-slate-50/50 dark:!bg-slate-800/20">
           <div class="flex items-center justify-between mb-8">
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-black">E</div>
@@ -78,39 +77,37 @@ const shouldHideSidebar = computed(() => {
               <img :src="currentUser?.photoURL || 'https://cdn.quasar.dev/img/avatar.png'" />
             </q-avatar>
             <div class="overflow-hidden">
-              <p class="font-bold text-slate-900 dark:text-white mb-0 truncate text-lg">
+              <p class="font-bold text-slate-900 dark:!text-white mb-0 truncate text-lg">
                 {{ currentUser?.firstName || 'Guest' }} {{ currentUser?.lastName || '' }}
               </p>
-              <p class="text-xs text-slate-500 dark:text-slate-400 truncate">{{ currentUser?.email || 'e-learning@platform.com' }}</p>
+              <p class="text-xs text-slate-500 dark:!text-slate-400 truncate">{{ currentUser?.email || 'e-learning@platform.com' }}</p>
             </div>
           </div>
         </div>
 
         <!-- 2. Integrated Content Hub -->
         <div class="flex-grow overflow-y-auto pt-4">
-          <q-list padding class="text-slate-600 dark:text-slate-300">
+          <q-list padding class="text-slate-600 dark:!text-slate-300">
             <!-- Navigation -->
             <q-item-label header class="text-[11px] font-black tracking-[0.2em] text-slate-400 uppercase px-6 pb-2">เมนูหลัก</q-item-label>
             
-            <q-item to="/dashboard" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 font-bold" @click="rightDrawerOpen = false">
+            <q-item to="/dashboard" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:!bg-blue-900/30 dark:!text-blue-400 font-bold" @click="rightDrawerOpen = false">
               <q-item-section avatar><q-icon name="dashboard" size="24px" /></q-item-section>
               <q-item-section><span class="text-[15px] font-bold">{{ $t("sidebar.overview") }}</span></q-item-section>
             </q-item>
             
-            <q-item to="/browse/discovery" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 font-bold" @click="rightDrawerOpen = false">
+            <q-item to="/browse/discovery" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:!bg-blue-900/30 dark:!text-blue-400 font-bold" @click="rightDrawerOpen = false">
               <q-item-section avatar><q-icon name="explore" size="24px" /></q-item-section>
               <q-item-section><span class="text-[15px] font-bold">{{ $t("landing.allCourses") }}</span></q-item-section>
             </q-item>
             
-            <q-item to="/dashboard/my-courses" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 font-bold" @click="rightDrawerOpen = false">
+            <q-item to="/dashboard/my-courses" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:!bg-blue-900/30 dark:!text-blue-400 font-bold" @click="rightDrawerOpen = false">
               <q-item-section avatar><q-icon name="school" size="24px" /></q-item-section>
               <q-item-section><span class="text-[15px] font-bold">{{ $t("sidebar.myCourses") || 'คอร์สเรียนของฉัน' }}</span></q-item-section>
             </q-item>
 
-            <q-separator class="my-4 mx-6 opacity-50" />
-
             <!-- Tools & Settings -->
-            <q-item-label header class="text-[11px] font-black tracking-[0.2em] text-slate-400 uppercase px-6 pb-2">เครื่องมือและการตั้งค่า</q-item-label>
+            <q-item-label header class="text-[11px] font-black tracking-[0.2em] text-slate-400 uppercase px-6 pb-2 mt-4">เครื่องมือและการตั้งค่า</q-item-label>
             
             <!-- Language Selection -->
             <q-item class="px-6 py-2">
@@ -140,16 +137,16 @@ const shouldHideSidebar = computed(() => {
 
             <q-item clickable v-ripple @click="navigateTo('/dashboard/profile'); rightDrawerOpen = false" class="px-6 py-4">
               <q-item-section avatar><q-icon name="person_outline" size="24px" /></q-item-section>
-              <q-item-section><span class="font-bold text-[15px]">จัดการโปรไฟล์</span></q-item-section>
+              <q-item-section><span class="font-bold text-[15px] dark:!text-slate-300">จัดการโปรไฟล์</span></q-item-section>
             </q-item>
           </q-list>
         </div>
 
         <!-- 3. Bottom Actions -->
-        <div class="p-6 mt-auto border-t border-slate-100 dark:border-slate-800">
+        <div class="p-6 mt-auto border-t border-slate-100 dark:!border-white/10">
           <q-btn
             unelevated
-            class="full-width rounded-xl bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-400 font-bold py-3 no-caps transition-all active:scale-95"
+            class="full-width rounded-xl bg-red-50 text-red-600 dark:!bg-red-900/20 dark:!text-red-400 font-bold py-3 no-caps transition-all active:scale-95"
             @click="logout"
           >
             <q-icon name="logout" size="20px" class="mr-2" />

Frontend-Learner/pages/auth/login.vue

@@ -237,17 +237,24 @@ onMounted(() => {
             <div v-else class="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
           </button>
 
+          <!-- Test Credentials Box -->
+          <div class="mt-4 p-5 bg-blue-50/50 border border-blue-100 rounded-2xl flex flex-col items-center gap-2 animate-fade-in">
+             <div class="text-[11px] font-black uppercase tracking-[0.2em] text-blue-600 mb-1">บัญชีสำหรับทดสอบ (Test Account)</div>
+             <div class="flex flex-col items-center gap-1">
+                <div class="text-base font-black text-slate-900 select-all cursor-copy hover:text-blue-600 transition-colors">
+                   studentedtest@example.com
+                </div>
+                <div class="flex items-center gap-2">
+                   <span class="text-[11px] font-black uppercase tracking-wider text-slate-600">Password:</span>
+                   <span class="text-base font-black select-all cursor-copy hover:text-blue-600 transition-colors text-slate-900">admin123</span>
+                </div>
+             </div>
+          </div>
+
         </form>
 
-        <!-- Divider -->
-        <div class="my-8 flex items-center gap-4">
-           <div class="h-px bg-slate-200 flex-1"></div>
-           <span class="text-slate-400 text-xs font-medium uppercase tracking-wider">หรือ</span>
-           <div class="h-px bg-slate-200 flex-1"></div>
-        </div>
-
         <!-- Register Link -->
-        <div class="text-center">
+        <div class="text-center mt-8">
             <p class="text-slate-600 text-sm">
                ยังไม่มีบัญชีสมาชิก? 
                <NuxtLink to="/auth/register" class="font-bold text-blue-600 hover:text-blue-700 transition-colors ml-1">

Frontend-Learner/pages/browse/discovery.vue

@@ -159,7 +159,6 @@ onMounted(() => {
       <!-- New Enhanced Search Section (Image 1 Style) -->
       <div class="bg-blue-50/50 dark:bg-blue-900/10 rounded-[2.5rem] p-8 md:p-10 mb-8 border border-blue-100/50 dark:border-blue-500/10 transition-colors duration-300">
         <div class="flex items-center gap-4 mb-2">
-          <span class="w-2 h-8 bg-blue-600 rounded-full shadow-lg shadow-blue-500/30"></span>
           <h1 class="text-2xl md:text-3xl font-black text-slate-900 dark:text-white">
             {{ $t("discovery.title") }}
           </h1>
@@ -178,7 +177,7 @@ onMounted(() => {
               v-model="searchQuery"
               type="text" 
               :placeholder="$t('discovery.searchPlaceholder') || 'ค้นหาคอร์สที่น่าสนใจที่นี่...'"
-              class="w-full pl-14 pr-6 py-3.5 bg-white dark:bg-slate-800 border-2 border-transparent rounded-2xl text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:border-blue-500/20 focus:ring-4 focus:ring-blue-500/5 transition-all text-base font-medium shadow-sm"
+              class="w-full pl-14 pr-6 py-3.5 bg-white dark:!bg-slate-900/80 border-2 border-transparent dark:border-white/5 rounded-2xl text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:border-blue-500/20 focus:ring-4 focus:ring-blue-500/5 transition-all text-base font-medium shadow-sm"
               @keyup.enter="loadCourses(1)"
             />
           </div>
@@ -193,13 +192,13 @@ onMounted(() => {
           >
             <div class="flex items-center gap-2">
               <q-icon name="search" size="20px" />
-              <span class="text-base">ค้นหา</span>
+              <span class="text-base">{{ $t("discovery.searchBtn") }}</span>
             </div>
           </q-btn>
         </div>
       </div>
 
-      <div class="flex items-center justify-between mb-4 px-2">
+      <div class="flex items-center justify-between mb-8 px-2">
         <div class="text-slate-500 dark:text-slate-400 text-sm font-bold uppercase tracking-wider">
           {{ $t("discovery.foundTotal") }} <span class="text-blue-600">{{ filteredCourses.length }}</span> {{ $t("discovery.items") }}
         </div>
@@ -207,7 +206,7 @@ onMounted(() => {
 
       <!-- Unified Filter Section: Categories -->
         <div
-          class="bg-white dark:bg-slate-900/50 p-2 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex flex-wrap items-center gap-1.5 shadow-sm"
+          class="bg-white dark:!bg-slate-900/50 p-2 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex flex-wrap items-center gap-1.5 shadow-sm mb-12"
         >
           <q-btn
             flat
@@ -217,7 +216,7 @@ onMounted(() => {
             :class="
               selectedCategoryIds.length === 0
                 ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20'
-                : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'
+                : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:!hover:bg-slate-800/50'
             "
             @click="selectedCategoryIds = []"
             :label="$t('discovery.showAll')"
@@ -232,7 +231,7 @@ onMounted(() => {
             :class="
               selectedCategoryIds.includes(cat.id)
                 ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20'
-                : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'
+                : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:!hover:bg-slate-800/50'
             "
             @click="toggleCategory(cat.id)"
             :label="getLocalizedText(cat.name)"

Frontend-Learner/pages/dashboard/index.vue

@@ -237,7 +237,7 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3));
             <div
               v-for="course in sideCourses"
               :key="course.id"
-              class="flex-1 bg-white dark:bg-[#1e293b] rounded-2xl p-4 border border-gray-100 dark:border-slate-700 shadow-sm hover:shadow-md transition-all flex gap-4 items-center"
+              class="flex-1 bg-white dark:!bg-slate-900/40 rounded-2xl p-4 border border-slate-100 dark:border-white/5 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
@@ -291,7 +291,7 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3));
             <!-- Empty State Placeholder if less than 2 side courses -->
             <div
               v-if="sideCourses.length < 2"
-              class="flex-1 bg-gray-50 dark:bg-[#1e293b]/50 rounded-2xl border border-dashed border-gray-200 dark:border-slate-700 flex items-center justify-center text-gray-400 dark:text-slate-500 text-sm transition-colors"
+              class="flex-1 bg-slate-50 dark:!bg-slate-900/30 rounded-2xl border border-dashed border-slate-200 dark:border-slate-800 flex items-center justify-center text-slate-400 dark:text-slate-600 text-sm transition-colors"
             >
               {{ $t("dashboard.startNewCourse") }}
             </div>
@@ -326,9 +326,8 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3));
             class="h-full md:col-span-1"
           />
 
-          <!-- CTA Card (Large) -->
           <div
-            class="bg-white dark:bg-[#1e293b] rounded-3xl border border-gray-100 dark:border-slate-700 shadow-sm p-8 flex flex-col items-center justify-center text-center h-full min-h-[300px] hover:shadow-md transition-all group"
+            class="bg-white dark:!bg-slate-900/40 rounded-3xl border border-slate-100 dark:border-white/5 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 dark:text-slate-300 font-medium mb-6 mt-4 transition-colors">
               {{ $t("dashboard.chooseLibrary") }}
@@ -346,10 +345,9 @@ const sideCourses = computed(() => enrolledCourses.value.slice(1, 3));
           </div>
         </div>
 
-        <!-- Empty State when no courses -->
         <div
           v-else
-          class="bg-white dark:bg-[#1e293b] rounded-3xl border border-dashed border-gray-200 dark:border-slate-700 p-12 flex flex-col items-center justify-center text-center min-h-[300px] transition-colors"
+          class="bg-white dark:!bg-slate-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800 p-12 flex flex-col items-center justify-center text-center min-h-[300px] transition-colors"
         >
           <div class="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-full mb-6 transition-colors">
             <q-icon name="school" size="48px" class="text-blue-200 dark:text-blue-400" />

Frontend-Learner/pages/dashboard/my-courses.vue

@@ -11,8 +11,10 @@ definePageMeta({
   middleware: 'auth'
 })
 
+const { t, locale } = useI18n()
+
 useHead({
-  title: 'คอร์สของฉัน - e-Learning'
+  title: `${t('sidebar.myCourses')} - e-Learning`
 })
 
 const route = useRoute()
@@ -28,7 +30,6 @@ onMounted(() => {
   }
 })
 
-const { locale } = useI18n()
 
 // Helper to get localized text
 const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
@@ -153,8 +154,8 @@ const validCourseId = computed(() => {
     <!-- Page Header & Filters (Unified Layout) -->
     <!-- New Enhanced Search Section (Image 2 Style) -->
     <div class="bg-blue-50/50 dark:bg-blue-900/10 rounded-[2.5rem] p-8 md:p-10 mb-6 border border-blue-100/50 dark:border-blue-500/10">
-      <h2 class="text-2xl md:text-3xl font-black text-slate-900 dark:text-white mb-2">คอร์สของฉัน</h2>
-      <p class="text-slate-500 dark:text-slate-400 font-medium mb-8">ติดตามความคืบหน้าและเรียนรู้ต่อจากจุดที่ค้างไว้</p>
+      <h2 class="text-2xl md:text-3xl font-black text-slate-900 dark:text-white mb-2">{{ $t('myCourses.title') }}</h2>
+      <p class="text-slate-500 dark:text-slate-400 font-medium mb-8">{{ $t('myCourses.subtitle') }}</p>
       
       <div class="flex flex-col md:flex-row gap-4">
         <!-- Search Input -->
@@ -165,8 +166,8 @@ const validCourseId = computed(() => {
           <input 
             v-model="searchQuery"
             type="text" 
-            placeholder="ค้นหาชื่อคอร์สของฉัน..."
-            class="w-full pl-14 pr-6 py-3.5 bg-white dark:bg-slate-800 border-2 border-transparent rounded-2xl text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:border-blue-500/20 focus:ring-4 focus:ring-blue-500/5 transition-all text-base font-medium shadow-sm"
+            :placeholder="$t('myCourses.searchPlaceholder')"
+            class="w-full pl-14 pr-6 py-3.5 bg-white dark:!bg-slate-900/80 border-2 border-transparent dark:border-white/5 rounded-2xl text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:border-blue-500/20 focus:ring-4 focus:ring-blue-500/5 transition-all text-base font-medium shadow-sm"
           />
         </div>
         
@@ -179,15 +180,15 @@ const validCourseId = computed(() => {
         >
           <div class="flex items-center gap-2">
             <q-icon name="search" size="20px" />
-            <span class="text-base">ค้นหา</span>
+            <span class="text-base">{{ $t("discovery.searchBtn") }}</span>
           </div>
         </q-btn>
       </div>
     </div>
 
-    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-12">
        <!-- Filter Tabs (Horizontal Bar) -->
-       <div class="bg-white dark:bg-slate-900/50 p-1.5 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex items-center gap-1 shadow-sm">
+       <div class="bg-white dark:!bg-slate-900/50 p-1.5 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex items-center gap-1 shadow-sm">
          <q-btn
            v-for="filter in ['all', 'progress', 'completed']"
            :key="filter"
@@ -196,7 +197,7 @@ const validCourseId = computed(() => {
            rounded
            dense
            class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
-           :class="activeFilter === filter ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'"
+           :class="activeFilter === filter ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:!hover:bg-slate-800/50'"
            :label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
          />
        </div>
@@ -236,7 +237,7 @@ const validCourseId = computed(() => {
     </div>
 
     <!-- Empty State -->
-    <div v-if="!isLoading && filteredEnrolledCourses.length === 0" class="flex flex-col items-center justify-center py-20 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700 mt-4">
+    <div v-if="!isLoading && enrolledCourses.length === 0" class="flex flex-col items-center justify-center py-20 bg-white dark:!bg-slate-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-white/5 mt-4">
       <q-icon v-if="searchQuery" name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
       <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
         {{ searchQuery ? $t('discovery.emptyTitle') : $t('myCourses.emptyTitle') }}

Frontend-Learner/pages/dashboard/profile.vue

@@ -216,7 +216,6 @@ onMounted(async () => {
           @click="toggleEdit(false)"
         />
         <div class="flex items-start gap-4">
-          <span class="w-1.5 h-10 md:h-12 bg-blue-600 rounded-full shadow-lg shadow-blue-500/50 mt-1 flex-shrink-0"></span>
           <div>
             <h1 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white leading-tight">
               {{ (isHydrated && isEditing) ? $t('profile.editProfile') : $t('profile.myProfile') }}
@@ -250,7 +249,7 @@ onMounted(async () => {
     <div v-else class="max-w-4xl mx-auto pb-20">
       
       <!-- VIEW MODE: Premium Card with Banner -->
-      <div v-if="!isEditing" class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700/50 rounded-3xl shadow-xl dark:shadow-none overflow-hidden fade-in min-h-[500px] flex flex-col transition-colors duration-300">
+      <div v-if="!isEditing" class="bg-white dark:!bg-slate-900/50 border border-slate-200 dark:border-white/5 rounded-3xl shadow-xl dark:shadow-none overflow-hidden fade-in min-h-[500px] flex flex-col transition-colors duration-300">
         
         <!-- Identity Header (Banner & Avatar) -->
         <div class="relative">
@@ -269,7 +268,7 @@ onMounted(async () => {
                 :first-name="userData.firstName" 
                 :last-name="userData.lastName" 
                 size="140"
-                class="border-[6px] border-white dark:border-[#1e293b] shadow-2xl rounded-[2.5rem] bg-white dark:bg-slate-800 transition-colors duration-300"
+                class="border-[6px] border-white dark:border-slate-900 shadow-2xl rounded-[2.5rem] bg-white dark:bg-slate-800 transition-colors duration-300"
               />
             </div>
             
@@ -278,11 +277,11 @@ onMounted(async () => {
                 {{ userData.firstName }} {{ userData.lastName }}
               </h2>
               <div class="flex flex-wrap items-center justify-center md:justify-start gap-4">
-                  <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-slate-800/50 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-slate-700">
+                  <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-slate-900/50 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-white/5">
                       <q-icon name="alternate_email" size="xs" class="text-blue-500" />
                       <span class="text-sm">{{ userData.email }}</span>
                   </div>
-                  <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-slate-800/50 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-slate-700">
+                  <div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-slate-900/50 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-white/5">
                       <q-icon name="verified_user" size="xs" :class="userData.emailVerifiedAt ? 'text-green-500' : 'text-amber-500'" />
                       <span class="text-sm">{{ userData.emailVerifiedAt ? $t('profile.emailVerified') : $t('profile.verifyEmail') }}</span>
                   </div>
@@ -325,7 +324,7 @@ onMounted(async () => {
       <div v-else class="fade-in">
           <!-- Tab Selector -->
           <div class="flex justify-center mb-8">
-            <div class="bg-white dark:bg-[#1e293b] p-1.5 rounded-2xl flex items-center gap-1 border border-slate-200 dark:border-slate-700 shadow-sm">
+            <div class="bg-white dark:!bg-slate-900/50 p-1.5 rounded-2xl flex items-center gap-1 border border-slate-200 dark:border-white/5 shadow-sm">
                 <button 
                   @click="activeTab = 'general'"
                   class="px-6 md:px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
@@ -336,7 +335,7 @@ onMounted(async () => {
                 <button 
                   @click="activeTab = 'security'"
                   class="px-6 md:px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
-                  :class="activeTab === 'security' ? 'bg-amber-50 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 shadow-sm scale-100' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 scale-95 opacity-70'"
+                  :class="activeTab === 'security' ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 shadow-sm scale-100' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 scale-95 opacity-70'"
                 >
                   <q-icon name="lock_open" size="18px" /> {{ $t('profile.security') }}
                 </button>
@@ -345,7 +344,7 @@ onMounted(async () => {
           
           <!-- Edit Content -->
           <div class="max-w-3xl mx-auto">
-              <div v-if="activeTab === 'general'" class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700/50 rounded-3xl shadow-xl dark:shadow-none p-6 md:p-10">
+              <div v-if="activeTab === 'general'" class="bg-white dark:!bg-slate-900/50 border border-slate-200 dark:border-white/5 rounded-3xl shadow-xl dark:shadow-none p-6 md:p-10">
                   <ProfileEditForm
                       v-model="userData"
                       :loading="isProfileSaving"
@@ -355,7 +354,7 @@ onMounted(async () => {
                       @verify="handleSendVerifyEmail"
                   />
               </div>
-              <div v-else class="bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-slate-700/50 rounded-3xl shadow-xl dark:shadow-none p-6 md:p-10">
+              <div v-else class="bg-white dark:!bg-slate-900/50 border border-slate-200 dark:border-white/5 rounded-3xl shadow-xl dark:shadow-none p-6 md:p-10">
                   <PasswordChangeForm
                       v-model="passwordForm"
                       :loading="isPasswordSaving"

Frontend-Learner/pages/index.vue

@@ -13,37 +13,14 @@ useHead({
   title: 'E-Learning System - ระบบการเรียนการสอนออนไลน์'
 })
 
+import { CATEGORY_CARDS, WHY_CHOOSE_US } from '@/constants/landing'
+
 const { fetchCategories } = useCategory()
 const { fetchCourses, getLocalizedText } = useCourse()
 const { user } = useAuth()
 
-const stepOneCards = [
-  { title: 'AI Foundations', desc: 'เข้าใจพื้นฐาน AI ใช้งานจริงได้ทุกสายงาน', bgClass: 'bg-slate-900', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-900', categorySlug: 'programming' },
-  { title: 'Data Analyst', desc: 'เรียนจนทำ Dashboard วิเคราะห์ Data ได้เลย', bgClass: 'bg-amber-500', textClass: 'text-slate-900', arrowClass: 'text-slate-900/40 border-slate-900/10 group-hover:text-amber-500', categorySlug: 'business' },
-  { title: 'Front-End Web Developer', desc: 'เขียนเว็บสวย ใช้งานได้จริงตั้งแต่หน้าแรก', bgClass: 'bg-orange-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-orange-500', categorySlug: 'programming' },
-  { title: 'UX/UI Designer', desc: 'ต่อยอดทำ Portfolio ไม่มีประสบการณ์ก็เรียนได้', bgClass: 'bg-pink-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-pink-600', categorySlug: 'design' },
-  { title: 'Product Manager', desc: 'เก็บทุกทักษะ ปั้น Product วางแผนแบบมือโปร', bgClass: 'bg-teal-500', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-teal-500', categorySlug: 'business' },
-  { title: 'Back-End Developer', desc: 'เข้าใจโครงสร้างระบบและฐานข้อมูลหลังบ้าน', bgClass: 'bg-blue-600', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-blue-600', categorySlug: 'programming' },
-  { title: 'Supply Chain & Logistics', desc: 'ใช้ Data วางแผนโลจิสติกส์ได้อย่างมีประสิทธิภาพ', bgClass: 'bg-slate-700', textClass: 'text-white', arrowClass: 'text-white/60 border-white/20 group-hover:text-slate-700', categorySlug: 'business' }
-]
-
-const learningStyles = [
-  { 
-    title: 'คอร์สออนไลน์', icon: 'desktop_windows', type: 'ONLINE',
-    subtitle: 'เรียนได้ทุกที่ ทุกเวลา', desc: 'คัดสรรเนื้อหาคุณภาพจากผู้เชี่ยวชาญ\nพร้อมให้คุณเริ่มต้นเรียนรู้ได้ทันที', 
-    time: 'เข้าถึงได้ตลอดชีพ',
-    features: ['เนื้อหาครบทุกประเด็นสำคัญ', 'โจทย์ตัวอย่างและแบบฝึกหัด', 'เรียนซ้ำได้ไม่จำกัด', 'ใบเซอร์ทิฟิเคตหลังเรียนจบ'],
-    iconBg: 'bg-blue-50', iconColor: 'text-blue-600', titleClass: 'text-blue-700',
-    btnClass: 'bg-indigo-900 text-white hover:bg-indigo-800'
-  }
-]
-
-const promoCategories = [
-  { title: 'Data', desc: 'เรียนรู้และฝึกฝนกระบวนการคิดสร้างมูลค่าให้ธุรกิจด้วยข้อมูล', icon: 'analytics' },
-  { title: 'Design', desc: 'ออกแบบ Digital Product เพื่อให้ผู้ใช้งานได้รับประสบการณ์ที่ดีที่สุด', icon: 'palette' },
-  { title: 'Tech', desc: 'พร้อมเป็นที่ต้องการของตลาดแรงงานด้วยทักษะการเขียนโปรแกรม', icon: 'code' },
-  { title: 'Business', desc: 'พลิกโฉมธุรกิจในยุคดิจิทัลด้วยการเข้าถึงลูกค้าในช่องทางและเวลาที่เหมาะสม', icon: 'trending_up' }
-]
+const categoryCards = CATEGORY_CARDS
+const whyChooseUs = WHY_CHOOSE_US
 
 const categories = ref<any[]>([])
 const topCourses = ref<any[]>([])
@@ -173,128 +150,73 @@ onMounted(() => {
       </div>
     </header>
 
-    <section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
+    <!-- Why Choose Us Section -->
+    <section class="pt-20 pb-12 bg-white relative">
       <div class="container mx-auto px-6 lg:px-12">
         <div class="text-center mb-16 slide-up">
-          <h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-6 px-4">
-            เพราะ “ก้าวแรก” ของการพัฒนาตัวเอง ท้าทายเสมอ
+          <h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-6">
+            ทำไมต้องเลือกแพลตฟอร์มของเรา?
           </h2>
           <p class="text-slate-500 text-lg md:text-xl font-medium max-w-3xl mx-auto leading-relaxed">
-            เราจึงตั้งใจออกแบบบทเรียนให้ <span class="text-blue-600 font-bold">‘เข้าใจง่าย’</span> และ <span class="text-blue-600 font-bold">‘นำไปใช้ได้จริง’</span> เพื่อให้ทุกก้าวของคุณ มั่นคงและไปถึงเป้าหมายได้สำเร็จ
+            เรามีเครื่องมือและความเชี่ยวชาญที่จะช่วยให้คุณประสบความสำเร็จในการเปลี่ยนสายอาชีพและการสร้างทักษะระดับมืออาชีพ
           </p>
         </div>
 
-        <!-- Grid Container (Bento Layout) -->
-        <div class="relative">
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            <div v-for="(card, i) in stepOneCards" :key="i" 
-                 class="group cursor-pointer rounded-3xl p-6 flex flex-col justify-between transition-all hover:-translate-y-1 shadow-lg hover:shadow-2xl overflow-hidden relative"
-                 :class="[
-                   card.bgClass,
-                   i === 0 ? 'lg:row-span-2 min-h-[380px]' : 'min-h-[220px]'
-                 ]"
-                 @click="goBrowse(card.categorySlug)"
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div v-for="(item, i) in whyChooseUs" :key="i"
+               class="slide-up p-10 rounded-[2.5rem] bg-slate-50/50 border border-slate-100 hover:bg-white hover:shadow-2xl hover:shadow-blue-600/5 transition-all duration-500 group"
+               :style="`animation-delay: ${i * 0.1}s`"
+          >
+            <div class="w-16 h-16 rounded-3xl flex items-center justify-center mb-8 transition-transform group-hover:scale-110 duration-500"
+                 :class="item.iconBg"
             >
-              <!-- Background Accent -->
-              <div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2" />
-              
-              <div>
-                <span class="text-[10px] font-bold uppercase tracking-[0.15em] opacity-80 mb-3 block" :class="card.textClass === 'text-white' ? 'text-white/80' : 'text-slate-900/60'">ก้าวแรกของ</span>
-                <h3 class="text-2xl font-bold leading-tight tracking-tight mb-2" :class="card.textClass">{{ card.title }}</h3>
-              </div>
-              
-              <div class="space-y-4 relative z-10">
-                <p class="text-sm font-medium leading-relaxed opacity-90" :class="card.textClass">{{ card.desc }}</p>
-                <div class="flex justify-end">
-                  <div class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center transition-all bg-white/10 group-hover:bg-white/20 group-hover:scale-105 backdrop-blur-sm"
-                       :class="[i === 0 ? 'w-12 h-12' : '']">
-                     <q-icon name="arrow_forward" :size="i === 0 ? '24px' : '20px'" :class="card.textClass" />
-                  </div>
-                </div>
-              </div>
+              <q-icon :name="item.icon" size="32px" :class="item.iconColor" />
             </div>
+            <h3 class="text-2xl font-black text-slate-900 mb-4 group-hover:text-blue-600 transition-colors">
+              {{ item.title }}
+            </h3>
+            <p class="text-slate-500 text-lg leading-relaxed font-medium">
+              {{ item.desc }}
+            </p>
           </div>
         </div>
       </div>
     </section>
 
-    <!-- Section 2: "Value Proposition" - Why Online Learning here? -->
-    <section class="pt-12 pb-12 md:pt-20 md:pb-20 bg-white relative overflow-hidden">
-      <!-- Decorative background blur -->
-      <div class="absolute top-1/2 left-0 -translate-y-1/2 w-96 h-96 bg-blue-100/50 rounded-full blur-[100px] -z-10" />
-      
+    <section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
       <div class="container mx-auto px-6 lg:px-12">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
-          <!-- Left side: Visual representation -->
-          <div class="relative slide-up">
-            <div class="relative z-10 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-[4rem] p-12 md:p-20 shadow-3xl overflow-hidden group">
-              <!-- Animated background shapes -->
-              <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-110 transition-transform duration-1000" />
-              <div class="absolute bottom-0 left-0 w-48 h-48 bg-amber-400/20 rounded-full translate-y-1/2 -translate-x-1/2" />
-              
-              <div class="relative z-20 flex flex-col items-center text-center text-white">
-                <div class="w-24 h-24 md:w-32 md:h-32 bg-white/20 backdrop-blur-md rounded-[2.5rem] flex items-center justify-center mb-8 shadow-inner">
-                  <q-icon name="laptop_mac" size="64px" class="text-white" />
-                </div>
-                <h3 class="text-3xl md:text-5xl font-black leading-[1.2] md:leading-[1.15] tracking-tight mb-0 pt-1 overflow-visible">
-                  คอร์สออนไลน์<br class="hidden md:block" />
-                  ที่ออกแบบมาสำหรับคุณ
-                </h3>
-                <p class="mt-5 text-blue-100/90 text-base md:text-lg font-medium leading-relaxed max-w-md">
-                  เรียนรู้ทักษะใหม่จากผู้เชี่ยวชาญตัวจริง พร้อมเนื้อหาที่เข้มข้นและใช้งานได้จริง
-                </p>
-              </div>
-            </div>
-            
-            <!-- Floating Stats pill -->
-            <div class="absolute -bottom-10 -right-6 md:right-10 z-30 bg-white p-6 rounded-3xl shadow-2xl animate-float">
-              <div class="flex items-center gap-4">
-                <div class="w-12 h-12 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-600">
-                  <q-icon name="query_builder" size="28px" />
-                </div>
-                <div>
-                  <div class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Access Status</div>
-                  <div class="text-xl font-black text-slate-900">เข้าถึงได้ตลอดชีพ</div>
-                </div>
-              </div>
-            </div>
-          </div>
+        <div class="mb-12 slide-up">
+          <h2 class="text-3xl md:text-4xl font-black text-slate-900 px-4">
+            เลือกเรียนตามเรื่องที่คุณสนใจ
+          </h2>
+        </div>
 
-          <!-- Right side: Content & Benefits -->
-          <div class="slide-up" style="animation-delay: 0.2s;">
-            <div class="mb-12">
-              <span class="inline-flex items-center px-5 py-2 rounded-full bg-blue-50 text-blue-600 text-xs md:text-sm font-extrabold uppercase tracking-widest mb-5 border border-blue-100">
-                Premium Learning Experience
-              </span>
-              <h2 class="text-4xl md:text-6xl font-bold text-slate-900 leading-[1.2] md:leading-[1.2] tracking-tight mb-0 pt-1 overflow-visible">
-                ก้าวข้ามทุกขีดจำกัด<br />
-                ด้วยการเรียนรู้ที่ <span class="text-blue-600">“อิสระ”</span>
-              </h2>
-              <p class="mt-6 text-slate-500 text-lg md:text-xl font-medium leading-relaxed max-w-2xl">
-                เราคัดสรรและคราฟต์ทุกคอร์สเรียนเพื่อให้มั่นใจว่าคุณจะได้รับประสบการณ์การเรียนรู้ที่ดีที่สุด ไม่ว่าจะอยู่ที่ไหนหรือเวลาใดก็ตาม
+        <!-- Horizontal Cards (New Layout - Image 2) -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
+          <div v-for="(card, i) in categoryCards" :key="i"
+               class="group cursor-pointer bg-white rounded-[2rem] p-6 border border-slate-100/80 shadow-sm hover:shadow-2xl hover:shadow-blue-600/5 hover:-translate-y-1 transition-all duration-500 relative flex items-center gap-5"
+               @click="goBrowse(card.slug)"
+          >
+            <!-- Icon Box -->
+            <div class="flex-shrink-0 w-16 h-16 rounded-[1.5rem] flex items-center justify-center bg-blue-50/50 group-hover:scale-110 transition-transform duration-500"
+            >
+              <q-icon :name="card.icon" size="28px" class="text-blue-600" />
+            </div>
+
+            <!-- Content -->
+            <div class="flex-grow pr-2">
+              <h3 class="text-lg md:text-xl font-black text-slate-900 mb-1 group-hover:text-blue-600 transition-colors leading-tight">
+                {{ card.title }}
+              </h3>
+              <p class="text-slate-500 text-xs md:text-sm font-medium leading-relaxed opacity-70">
+                {{ card.desc }}
               </p>
             </div>
 
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
-              <div v-for="(feature, f) in learningStyles[0].features" :key="f" 
-                   class="flex items-center gap-4 p-5 rounded-3xl bg-slate-50 border border-slate-100 group hover:border-blue-200 hover:bg-white hover:shadow-xl transition-all duration-300"
-              >
-                <div class="flex-shrink-0 w-10 h-10 rounded-full bg-white flex items-center justify-center text-green-500 shadow-sm group-hover:bg-green-500 group-hover:text-white transition-colors">
-                  <q-icon name="check" size="20px" />
-                </div>
-                <span class="text-base font-black text-slate-700 leading-snug">{{ feature }}</span>
-              </div>
+            <!-- Arrow -->
+            <div class="flex-shrink-0 text-slate-300 group-hover:text-blue-600 transition-colors transform group-hover:translate-x-1 duration-300">
+              <q-icon name="chevron_right" size="24px" />
             </div>
-
-            <q-btn 
-              unelevated 
-              rounded 
-              color="primary"
-              label="เริ่มต้นบทเรียนแรกของคุณ"
-              class="px-12 h-20 font-black text-xl md:text-2xl transition-all shadow-xl hover:shadow-2xl hover:-translate-y-1"
-              no-caps
-              :to="user ? '/browse' : '/auth/login'"
-            />
           </div>
         </div>
       </div>
@@ -302,6 +224,7 @@ onMounted(() => {
 
 
 
+
     <!-- Section 4: "คอร์สออนไลน์" -->
     <section class="pt-12 pb-24 md:pt-20 md:pb-40 bg-slate-50/50">
       <div class="container mx-auto px-6 lg:px-12">

Frontend-Learner/pages/verify-email.vue

@@ -6,7 +6,7 @@
  */
 
 definePageMeta({
-  layout: 'default'
+  layout: 'auth'
 })
 
 const route = useRoute()
@@ -68,8 +68,8 @@ const navigateToHome = () => {
 
       <!-- Success State -->
       <div v-else-if="isSuccess" class="flex flex-col items-center animate-bounce-in">
-        <div class="w-24 h-24 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mb-6">
-           <q-icon name="check_circle" class="text-6xl text-green-500" />
+        <div class="w-24 h-24 rounded-full bg-green-500 flex items-center justify-center mb-10 shadow-lg shadow-green-500/20">
+           <q-icon name="check" class="text-5xl text-white font-black" />
         </div>
         
         <h2 class="text-3xl font-black text-slate-900 dark:text-white mb-2">

Frontend-Learner/types/auth.ts

@@ -0,0 +1,41 @@
+/**
+ * @file auth.ts
+ * @description Type definitions for authentication and user profiles.
+ */
+
+export interface User {
+  id: number
+  username: string
+  email: string
+  email_verified_at?: string | null
+  created_at?: string
+  updated_at?: string
+  role: {
+    code: string // เช่น 'STUDENT', 'INSTRUCTOR', 'ADMIN'
+    name: { th: string; en: string }
+  }
+  profile?: {
+    prefix: { th: string; en: string }
+    first_name: string
+    last_name: string
+    phone: string | null
+    avatar_url: string | null
+  }
+}
+
+export interface LoginResponse {
+  token: string
+  refreshToken: string
+  user: User
+  profile: User['profile']
+}
+
+export interface RegisterPayload {
+  username: string
+  email: string
+  password: string
+  first_name: string
+  last_name: string
+  prefix: { th: string; en: string }
+  phone: string
+}

Frontend-Learner/types/course.ts

@@ -0,0 +1,142 @@
+/**
+ * @file course.ts
+ * @description Type definitions for courses, enrollments, quizzes, and certificates.
+ */
+
+export interface Course {
+  id: number
+  title: string | { th: string; en: string }
+  slug: string
+  description: string | { th: string; en: string }
+  thumbnail_url: string
+  price: string
+  is_free: boolean
+  original_price?: string
+  have_certificate: boolean
+  status: string
+  category_id: number
+  created_at?: string
+  updated_at?: string
+  created_by?: number
+  updated_by?: number
+  approved_at?: string
+  approved_by?: number
+  rejection_reason?: string
+  enrolled?: boolean
+  total_lessons?: number
+  rating?: string
+  lessons?: number | string
+  levelType?: 'neutral' | 'warning' | 'success'
+  chapters?: {
+    id: number
+    title: string | { th: string; en: string }
+    lessons: {
+      id: number
+      title: string | { th: string; en: string }
+      duration_minutes: number
+      video_url?: string
+    }[]
+  }[]
+  creator?: {
+    id: number
+    username: string
+    email: string
+    profile: {
+      first_name: string
+      last_name: string
+      avatar_url: string
+    }
+  }
+  instructors?: {
+    user_id: number
+    is_primary: boolean
+    user: {
+      id: number
+      username: string
+      email: string
+      profile: {
+        first_name: string
+        last_name: string
+        avatar_url: string
+      }
+    }
+  }[]
+}
+
+export interface CourseResponse {
+  code: number
+  message: string
+  data: Course[]
+  total: number
+  page?: number
+  limit?: number
+  totalPages?: number
+}
+
+export interface SingleCourseResponse {
+  code: number
+  message: string
+  data: Course
+}
+
+export interface EnrolledCourse {
+  id: number
+  course_id: number
+  course: Course
+  status: 'ENROLLED' | 'IN_PROGRESS' | 'COMPLETED' | 'DROPPED'
+  progress_percentage: number
+  enrolled_at: string
+  started_at?: string
+  completed_at?: string
+  last_accessed_at?: string
+}
+
+export interface EnrolledCourseResponse {
+  code: number
+  message: string
+  data: EnrolledCourse[]
+  total: number
+  page: number
+  limit: number
+}
+
+export interface QuizAnswerSubmission {
+  question_id: number
+  choice_id: number
+}
+
+export interface QuizSubmitRequest {
+  answers: QuizAnswerSubmission[]
+}
+
+export interface QuizResult {
+  answers_review: {
+    score: number
+    is_correct: boolean
+    correct_choice_id: number
+    selected_choice_id: number
+    question_id: number
+  }[]
+  completed_at: string
+  started_at: string
+  attempt_number: number
+  passing_score: number
+  is_passed: boolean
+  correct_answers: number
+  total_questions: number
+  total_score: number
+  score: number
+  quiz_id: number
+  attempt_id: number
+}
+
+export interface Certificate {
+  certificate_id: number
+  course_id: number
+  course_title: {
+    en: string
+    th: string
+  }
+  issued_at: string
+  download_url: string
+}

Frontend-Learner/types/index.ts

@@ -0,0 +1,2 @@
+export * from './auth'
+export * from './course'

Frontend-Learner/คู่มืออธิบาย/web-dev-details.md

@@ -1,187 +1,138 @@
-# 🛠️ Web Development Documentation: e-Learning Platform (Frontend)
+# Frontend-Learner (Web) — Technical Documentation
 
-เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบ **Frontend-Learner** (อัปเดตล่าสุด: กุมภาพันธ์ 2026)
+เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และกลไกการทำงานของระบบ **Frontend-Learner (ฝั่งผู้เรียน)**  
+ใช้เป็นคู่มือสำหรับการพัฒนา บำรุงรักษา และขยายระบบต่อไป
+
+> อัปเดตล่าสุด: ปลายเดือนกุมภาพันธ์ 2026
 
 ---
 
-##                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       z️ 1. Technical Foundation (รากฐานทางเทคนิค)
+## Table of Contents
 
-รวมข้อมูลเครื่องมือ, ระบบความปลอดภัย และประสิทธิภาพการทำงานไว้ด้วยกัน
+- [1. Technical Foundation](#1-technical-foundation)
+  - [1.1 Tech Stack](#11-tech-stack)
+  - [1.2 Security & Authentication](#12-security--authentication)
+- [2. Project Architecture](#2-project-architecture)
+  - [2.1 Directory Structure](#21-directory-structure)
+  - [2.2 Shared Infrastructure](#22-shared-infrastructure)
+- [3. Logic & Data Layer (Composables)](#3-logic--data-layer-composables)
+- [4. Branding & UI Policy](#4-branding--ui-policy)
+  - [4.1 Theme Strategy](#41-theme-strategy)
+  - [4.2 UI Elements](#42-ui-elements)
+- [5. Core Feature Highlights](#5-core-feature-highlights)
+- [6. Maintenance & Performance Guidelines](#6-maintenance--performance-guidelines)
+
+---
+
+## 1. Technical Foundation
+
+รากฐานทางเทคนิคที่ขับเคลื่อนระบบ เพื่อให้ได้ประสิทธิภาพและความเสถียรสูงสุด
 
 ### 1.1 Tech Stack
 
-- **Core:** [Nuxt 3](https://nuxt.com) (v`^3.11.2`), TypeScript `^5.4.5`
-- **UI Framework:** Quasar Framework `^2.15.2` (via `nuxt-quasar-ui ^3.0.0`)
-- **Styling:** Tailwind CSS `^6.12.0` (Utility) + Vanilla CSS Variables (Theming/Dark Mode)
-- **State Management:** `ref`/`reactive` (Local) + `useState` (Global/Shared State)
-- **Localization:** `@nuxtjs/i18n` (Supports JSON locales in `i18n/locales/`)
-- **Media Control:** `useMediaPrefs` (Command Pattern for global volume/mute state)
+- **Framework:** Nuxt 3 (Vue 3, Vite, SSR/SPA Hybrid)
+- **UI System:** Quasar Framework + Tailwind CSS (Utility-first)
+- **Typography:** Google Fonts (**Prompt** เป็น Font หลักเพื่อความทันสมัยและอ่านง่าย)
+- **Multilingual:** `@nuxtjs/i18n` (รองรับ JSON-based locales ภาษาไทยและอังกฤษ)
+- **Programming:** TypeScript (Strict Type Checking)
 
-### 1.2 Core Systems & Security
+### 1.2 Security & Authentication
 
-- **Authentication:**
-  - ใช้ **JWT** (Access Token 1 วัน, Refresh Token 7 วัน)
-  - เก็บ Token ใน `useCookie` (Secure, SameSite)
-  - Middleware (`middleware/auth.ts`) ป้องกัน Route ตามสถานะ
-  - **Remember Me:** ระบบจดจำอีเมลลงใน `localStorage` (จำแยกจาก session, ไม่ถูกลบเมื่อ Logout)
-- **API Handling:**
-  - ใช้ `runtimeConfig.public.apiBase` เชื่องโยง Backend
-  - Auto-attach Bearer Token ใน `useAuth` และ `useCourse`
-- **Performance:**
-  - **Hybrid Progress Saving:** บันทึกเวลาเรียนลง LocalStorage (ถี่) และ Server (Throttle 15s) เพื่อความแม่นยำสูงสุด
-  - **Caching:** ใช้ `useState` จำข้อมูล Profile และ Categories ลด request
-  - **Code Quality:** ลบ Log, Dead logic และ Redundant comments ทั่วทั้งโปรเจกต์ (Clean Code Phase)
+- **Token Management:** ใช้ JWT (Access & Refresh Tokens) จัดเก็บผ่าน `useCookie`  
+  โดยตั้งค่าความปลอดภัยระดับ **HTTP-only** และ **SameSite**
+- **Middleware:** `auth.ts` ตรวจสอบสิทธิ์การเข้าถึงหน้า Dashboard และ Classroom แบบ Real-time
+- **Persistence:** ระบบ Remember Me (จดจำอีเมล) ใช้ `localStorage` แยกส่วนจาก Session  
+  เพื่อความปลอดภัยและสะดวกสำหรับผู้ใช้
 
 ---
 
-## 📂 2. Frontend Structure (โครงสร้างหน้าเว็บและ UI)
+## 2. Project Architecture
 
-### 2.1 Application Routes (`pages/`)
+โครงสร้างโฟลเดอร์ที่จัดระเบียบตามหลัก Clean Architecture เพื่อความคล่องตัวในการขยายระบบ
 
-| Module      | ไฟล์                       | Path                    | หน้าที่                                       |
-| :---------- | :------------------------- | :---------------------- | :-------------------------------------------- |
-| **Public**  | `index.vue`                | `/`                     | หน้าแรก Landing Page (**Forced Light Mode**)  |
-|             | `browse/discovery.vue`     | `/browse/discovery`     | **ระบบค้นหาและ Filter คอร์ส** (Catalog)       |
-|             | `course/[id].vue`          | `/course/:id`           | **หน้ารายละเอียดคอร์ส** (Course Detail)       |
-| **Auth**    | `auth/login.vue`           | `/auth/login`           | เข้าสู่ระบบ (**Remember Me**, **Light Mode**) |
-|             | `auth/register.vue`        | `/auth/register`        | สมัครสมาชิกผู้เรียน (**Light Mode**)          |
-|             | `auth/forgot-password.vue` | `/auth/forgot-password` | กู้คืนรหัสผ่าน (**Light Mode**)               |
-| **Student** | `dashboard/index.vue`      | `/dashboard`            | แดชบอร์ดภาพรวมผู้เรียน                        |
-|             | `dashboard/my-courses.vue` | `/dashboard/my-courses` | **คอร์สของฉัน** และดาวน์โหลดใบประกาศฯ         |
-|             | `dashboard/profile.vue`    | `/dashboard/profile`    | จัดการโปรไฟล์, รูปภาพ, เปลี่ยนรหัสผ่าน        |
-|             | `classroom/learning.vue`   | `/classroom/learning`   | **ห้องเรียน (Video Player)** & Announcements  |
-|             | `classroom/quiz.vue`       | `/classroom/quiz`       | การสอบวัดผล (**API-Driven Logic**)            |
+### 2.1 Directory Structure
 
-### 2.2 Key Components (`components/`)
+- `pages/` : ระบบ Routing ทั้งหมด (Landing, Auth, Dashboard, Classroom)
+- `components/` : UI Components แยกตามความรับผิดชอบ (Common, Layout, Course, Classroom, Profile)
+- `composables/` : Business Logic ทั้งหมด (Auth, Course, Theme, Quiz, Navigation)
+- `types/` : ศูนย์รวม Interface และ Type definitions ของทั้งระบบ
+- `constants/` : แหล่งเก็บข้อมูล Static (เช่น Category cards, Why choose us) เพื่อลดความซ้อนในไฟล์ Vue
+- `assets/css/` : `main.css` ที่เป็น Single Source of Truth สำหรับสไตล์และ CSS Variables
+- `layouts/` : Master templates (Default, Auth, Dashboard)
+- `middleware/` : ตัวกรองความปลอดภัยก่อนเข้าถึงแต่ละหน้า
 
-- **Common (`components/common/`):**
-  - `GlobalLoader.vue`: Loading indicator ทั่วทั้งแอป
-  - `LanguageSwitcher.vue`: ปุ่มเปลี่ยนภาษา (TH/EN)
-  - `AppHeader.vue`, `MobileNav.vue`: Navigation หลัก (ใช้ร่วมกับ AppSidebar)
-  - `FormInput.vue`: Input field มาตรฐาน
-- **Layout (`components/layout/`):**
-  - `AppSidebar.vue`: Sidebar หลักสำหรับ Dashboard (Collapsible)
-  - `LandingHeader.vue`: Header เฉพาะสำหรับหน้า Landing Page
-- **Course (`components/course/`):**
-  - `CourseCard.vue`: การ์ดแสดงผลคอร์ส รองรับ Progress และ **Glassmorphism** ในโหมดมืด
-- **Discovery (`components/discovery/`):**
-  - `CategorySidebar.vue`: Sidebar ตัวกรองหมวดหมู่แบบย่อ/ขยายได้
-  - `CourseDetailView.vue`: หน้ารายละเอียดคอร์สขนาดใหญ่ (Video Preview + Syllabus)
-- **Classroom (`components/classroom/`):**
-  - `CurriculumSidebar.vue`: Sidebar บทเรียนและสถานะการเรียน
-  - `AnnouncementModal.vue`: Modal แสดงประกาศของคอร์ส
-  - `VideoPlayer.vue`: Video Player พร้อม Custom Controls และ YouTube Support
-- **User / Profile (`components/user/`, `components/profile/`):**
-  - `UserAvatar.vue`: แสดงรูปโปรไฟล์ (รองรับ Fallback)
-  - `ProfileEditForm.vue`: ฟอร์มแก้ไขข้อมูลส่วนตัว
-  - `PasswordChangeForm.vue`: ฟอร์มเปลี่ยนรหัสผ่าน
+### 2.2 Shared Infrastructure
+
+- **Types Architecture:** การสกัด Types จาก Composable ออกมาไว้ที่ `@/types`  
+  ช่วยลดความซ้ำซ้อนและป้องกัน Error จากการเปลี่ยนโครงสร้างข้อมูล API
+- **Constants System:** การใช้ `@/constants` ช่วยให้การแก้ไขคำโฆษณาหรือข้อมูลหน้าแรกทำได้จากจุดเดียว  
+  โดยไม่ต้องแก้โค้ด HTML
 
 ---
 
-## 🧠 3. Logic & Data Layer (Composables)
+## 3. Logic & Data Layer (Composables)
 
-รวบรวม Logic หลักแยกส่วนตามหน้าที่ (Separation of Concerns)
+การแยก Logic ออกจาก UI เพื่อความสะอาดและ Testable
 
-### 3.1 `useAuth.ts` (Authentication & User)
+- `useAuth`  
+  จัดการสถานะ Login, การดึงโปรไฟล์ล่วงหน้า (Pre-fetching), และระบบ Token Refresh
 
-จัดการสถานะผู้ใช้, ล็อกอิน, และความปลอดภัย
+- `useCourse`  
+  หัวใจของระบบ จัดการตั้งแต่ Catalog, การสมัครเรียน (Enroll), ไปจนถึงการส่งผลการเรียน (Progress)
 
-- **Key Functions:** `login`, `register`, `fetchUserProfile`, `uploadAvatar`, `sendVerifyEmail`
-- **Features:** Refresh Token อัตโนมัติ, ตรวจสอบ Role, **Logout Logic ที่ไม่ลบข้อมูลจดจำผู้ใช้**
+- `useThemeMode`  
+  ระบบจัดการธีมกลางที่เชื่อมต่อกับ `localStorage` และ CSS Variables อย่างเป็นระบบ
 
-### 3.2 `useCourse.ts` (Course & Classroom)
+- `useQuizRunner`  
+  จัดการสถานะการสอบ เปลี่ยนข้อสอบ และส่งคะแนนไปยัง Backend โดยตรง
 
-หัวใจหลักของการเรียนการสอน
-
-- **Catalog:** `fetchCourses`, `fetchCourseById`, `enrollCourse`
-- **Classroom:**
-  - `fetchCourseLearningInfo`: โครงสร้างบทเรียน (Chapters/Lessons)
-  - `fetchLessonContent`: เนื้อหาวิดีโอ/Quiz/Attachments
-  - `fetchCourseAnnouncements`: ดึงข้อมูลประกาศของคอร์ส
-  - `saveVideoProgress`: บันทึกเวลาเรียน (Sync Server)
-- **i18n Support:** `getLocalizedText` ตัวช่วยในการเลือกแสดงผลภาษา (TH/EN) ตาม Locale ปัจจุบันที่ผู้ใช้เลือก อัตโนมัติทั่วทั้งแอป
-
-### 3.3 `useQuizRunner.ts` (Quiz System)
-
-จัดการ Logic การทำข้อสอบ (Production-Ready)
-
-- **Logic:** ควบคุมการเปลี่ยนข้อ, การส่งคำตอบ, และการรับผลลัพธ์จาก API
-- **Cleanup:** ลบ Mock delays และ Simulation logic ออกทั้งหมดเพื่อให้ทำงานร่วมกับ API จริงได้ทันที
+- `useNavItems`  
+  Single Source of Truth สำหรับเมนูทั้งหมด (Sidebar, Mobile Drawer, User Menu)
 
 ---
 
-## 🎨 4. Design System & Theming
+## 4. Branding & UI Policy
+
+มาตรฐานการออกแบบที่เน้นความ Premium และ Consistent
 
 ### 4.1 Theme Strategy
 
-- **Framework:** Tailwind CSS + Quasar UI
-- **Light/Dark Mode Policy:**
-  - **Public Pages:** บังคับ **Light Mode** (Landing, Course Detail, Auth) เพื่อภาพลักษณ์แบรนด์ที่สะอาดตา
-  - **Dashboard/Learning:** รองรับ **Dark Mode** เต็มรูปแบบ (Oceanic Theme)
-  - **Aesthetics:** ปรับปรุงความชัดเจนของ Badge, Icon และสถานะต่างๆ ในหน้าสอบ (Quiz) สำหรับโหมดมืดโดยเฉพาะ ให้มี Contrast สูงและดู Premium
-- **Visual Fixes:** แก้ไขปัญหา "Dark Frame" ในหน้า Auth โดยการบังคับสไตล์ระดับ HTML/Body
+- **Public Pages (Landing, Auth, Detail):** บังคับ **Forced Light Mode**  
+  เพื่อภาพลักษณ์แบรนด์ที่สะอาดและน่าเชื่อถือ
+- **Internal Pages (Dashboard, Learning):** รองรับ **Dark Mode (Oceanic Theme)**  
+  ลดการเมื่อยล้าของสายตาขณะเรียนเป็นเวลานาน
+- **Transitions:** ใช้ GlobalLoader และ Smooth transitions ทั่วทั้งแอปเพื่อประสบการณ์ที่ลื่นไหล
+
+### 4.2 UI Elements
+
+- **Image 2 Style Categories:** การ์ดหมวดหมู่แบบแนวนอนที่เป็นระเบียบ (Minimalist)
+- **Glassmorphism:** พื้นผิวโปร่งแสงใน Dashboard และ Classroom ช่วยให้แอปดูมีมิติ
+- **Standardized Icons:** ใช้ Material Icons ผ่าน Quasar ระบบเดียวทั้งหมด
 
 ---
 
-## 📊 5. Dependency Map (ความสัมพันธ์ไฟล์)
+## 5. Core Feature Highlights
 
-| หน้าเว็บ (Page)          | Components หลัก              | Composables หลัก                                       |
-| :----------------------- | :--------------------------- | :----------------------------------------------------- |
-| **Login / Register**     | `FormInput`                  | `useAuth` (Remember Me), `useFormValidation`           |
-| **Discovery (Browse)**   | `CourseCard`                 | `useCourse` (Search/Filter), `useCategory`             |
-| **My Courses**           | `CourseCard` (with Progress) | `useCourse` (Certificates)                             |
-| **Classroom (Learning)** | Video Player, Sidebar        | `useCourse` (Progress, Announcements), `useMediaPrefs` |
-| **Quiz**                 | `QuizHeader`, `QuizContent`  | `useQuizRunner` (Real API Integration)                 |
-| **Profile**              | `UserAvatar`, `FormInput`    | `useAuth` (Upload Avatar, Verify Email)                |
+ฟีเจอร์เด่นที่ถูกพัฒนาขึ้นเพื่อผู้เรียนโดยเฉพาะ
+
+- **SPA Learning Journey:** การสลับบทเรียนในห้องเรียนเป็นแบบ Single Page App (ไม่มีการ Re-load หน้า)  
+  ทำให้การเรียนต่อเนื่อง
+- **Hybrid Progress Tracking:** บันทึกเวลาเรียนลง `localStorage` แบบ Real-time และ Sync ขึ้น Server เป็นระยะ  
+  เพื่อป้องกันข้อมูลหาย
+- **Announcement System:** ระบบแจ้งเตือนในคอร์สพร้อมตัวระบุ "ยังไม่ได้อ่าน" (Unread Badge)  
+  ที่จำสถานะตามผู้ใช้งาน
+- **Interactive Quizzes:** ระบบสอบที่สลับคำถามอัตโนมัติ พร้อมโหมดเฉลย (Answer Review) ที่ชัดเจน
+- **Certificate Automation:** ระบบตรวจสอบสิทธิ์ความสำเร็จและออกใบประกาศนียบัตรได้ทันที
 
 ---
 
-## ✅ 6. Project Status (สถานะล่าสุด)
+## 6. Maintenance & Performance Guidelines
 
-### ✨ Recent Updates (กุมภาพันธ์ 2026)
+แนวทางสำหรับการพัฒนาต่อยอด
 
-1.  **System-Wide Code Cleanup (Phase Final):**
-    - **Refactoring:** ปัดกวาดโค้ดในหน้า `learning`, `quiz`, `discovery`, `dashboard` และ `profile`
-    - **Logging:** ลบ `console.log` มหาศาล และ logic ซ้ำซ้อนที่ตกค้างจากการพัฒนา
-    - **Structure:** จัดกลุ่มสไตล์และฟังก์ชันให้เป็นระเบียบ อ่านง่ายขึ้นตามมาตรฐาน Clean Code
+- **Clean Code:** หลีกเลี่ยงการใช้ `console.log` ในโค้ด Final และลบ Dead Logic ทิ้งทันที
+- **Standard Fonts:** ใช้ชุด Font Prompt ผ่านตัวแปร `--font-main` เสมอ
+- **API Integrity:** ตรวจสอบข้อมูลผ่าน Interface ใน `@/types` ก่อนการใช้งานทุกครั้ง
+- **Mobile First:** ทุก Component ต้องรองรับระบบ Master Drawer บนมือถืออย่างสมบูรณ์
 
-2.  **Authentication & Security Polish:**
-    - **Remember Me:** พัฒนาระบบจดจำอีเมลในหน้า Login ให้เสถียร (ใช้ `localStorage`)
-    - **Smart Logout:** ปรับปรุง `useAuth.logout` ให้ลบข้อมูล Session แต่เก็บข้อมูลที่ผู้ใช้สั่งจำไว้ (อีเมล)
-
-3.  **UI & Aesthetics (Premium Fixes):**
-    - **Theme Enforcement:** บังคับหน้าสาธารณะ (Landing/Auth) ให้เป็น Light Mode 100% พร้อมแก้ปัญหากรอบมืด (Dark Frame) ตกค้าง
-    - **Dark Mode Optimization:** ปรับปรุงสีและ Contrast ในหน้า Dashboard และ Profile ให้สวยงามและอ่านง่ายขึ้นในโหมมืด
-
-4.  **Quiz System Productionization:**
-    - **useQuizRunner:** แปลงร่างจาก Mock system เป็น API-Ready system (ลบ simulation logic ทั้งหมด)
-    - **Quiz UI:** ปรับปรุงการนำทางและสถานะการทำข้อสอบให้ลื่นไหล
-
-5.  **Smooth Navigation & Quiz Experience:**
-    - **SPA Navigation:** เปลี่ยนการสไลด์บทเรียนจาก Hard Reload เป็น SPA Navigation (`router.push`) ทำให้เรียนได้ต่อเนื่อง ไม่ต้องรอโหลดหน้าใหม่
-    - **Smart Lesson Loading:** ปรับปรุง Error ที่หน้าเว็บชอบเด้งกลับไปบทเรียนที่ 1 เสมอ โดยเปลี่ยนให้ความสำคัญกับ `lesson_id` จาก URL ก่อน
-    - **UI Simplification:** ลบทิ้ง "Legend/คำอธิบายสถานะ" ในหน้าสอบเพื่อความสะอาดตา (Minimal UI)
-    - **Sidebar visibility:** ช่วยให้ผู้ใช้เปิด-ปิด Sidebar บน Desktop ได้อย่างอิสระผ่านปุ่ม Hamburger
-
-6.  **Internationalization (i18n) Improvements:**
-    - **Localized Text Logic:** แก้ไขฟังก์ชัน `getLocalizedText` ให้แสดงภาษาตามที่ผู้ใช้สลับจริง (แก้ปัญหาหน้าเว็บเป็นอังกฤษแต่ชื่อวิชาเป็นไทย)
-    - **Hardcoded Removal:** ทยอยลบข้อความภาษาไทยที่พิมพ์ค้างไว้ในโค้ด (เช่น ใน Sidebar หมวดหมู่) และแทนที่ด้วย i18n keys
-    - **Boot Sequence Fix:** แก้ไขปัญหาเว็บค้าง (Error 500) ที่เกิดจากการเรียกใช้ภาษาเร็วเกินไปก่อนที่ระบบจะพร้อม (`initialization error`)
-
-7.  **Classroom & UX Optimization (Mid-February 2026):**
-    - **SPA Navigation for Learning:** เปลี่ยนระบบเลือกบทเรียนจากการ Reload หน้าเป็น SPA Navigation ทำให้เปลี่ยนวิดีโอ/บทเรียนได้ทันทีโดยไม่ต้อง Refresh หน้าจอ
-    - **Announcement Persistence:** เพิ่มระบบเช็กสถานะการอ่านประกาศ (Unread Badge) โดยบันทึกสถานะล่าสุดลง LocalStorage แยกตามผู้ใช้และคอร์ส
-    - **YouTube Resume:** รองรับการเรียนต่อจากจุดเดิมสำหรับวิดีโอ YouTube (Time Seeking via URL parameter)
-
-8.  **Quiz System Enhancements:**
-    - **Answer Review Mode:** เพิ่มโหมดเฉลยข้อสอบหลังทำเสร็จ พร้อมการไฮไลท์สีที่ชัดเจน (เขียว = ถูก, แดง = ตอบผิด)
-    - **Shuffle Logic:** เพิ่มการสลับคำถามและตัวเลือก (Shuffle) เพื่อความโปร่งใสในการสอบ
-    - **Enhanced Feedback:** ปรับปรุง UI ผลลัพธ์การสอบให้มีความ Premium และเข้าใจง่ายขึ้น
-
-9.  **Security & Registration Polish:**
-    - **Phone Validation:** เพิ่มระบบตรวจสอบเบอร์โทรศัพท์ในหน้าสมัครสมาชิก (ต้องเป็นตัวเลขและยาวไม่เกิน 10 หลัก)
-    - **Enrollment Alert Logic:** ปรับปรุง Logic การสมัครเรียนให้ตรวจสอบสถานะ Enrollment เดิมก่อน เพื่อป้องกัน API Error และการเรียก request ซ้ำซ้อน
-
-10. **Profile & Certificates:**
-    - **Verification Badge:** เพิ่มการแสดงผลสถานะการยืนยันอีเมลในหน้าโปรไฟล์ พร้อมปุ่มส่งอีเมลยืนยันหากยังไม่ได้ทำ
-    - **Certificate Flow:** ปรับปรุงระบบดาวน์โหลดใบประกาศนียบัตรให้รองรับทั้งการดึงไฟล์เดิมและสั่ง Generate ใหม่หากยังไม่มี
+---

frontend_management/components/course/LessonPreviewDialog.vue

@@ -83,6 +83,28 @@
                 </div>
               </div>
 
+              <!-- Quiz Settings -->
+              <div class="mt-4 p-4 bg-white rounded-lg border border-blue-100">
+                <div class="font-semibold text-gray-700 mb-3">การตั้งค่าเพิ่มเติม</div>
+                <div class="flex flex-wrap gap-2">
+                   <q-chip :color="lessonDetail.quiz.shuffle_questions ? 'positive' : 'grey-4'" :text-color="lessonDetail.quiz.shuffle_questions ? 'white' : 'grey-8'" size="m" :icon="lessonDetail.quiz.shuffle_questions ? 'check' : 'close'">
+                      สุ่มคำถาม
+                   </q-chip>
+                   <q-chip :color="lessonDetail.quiz.shuffle_choices ? 'positive' : 'grey-4'" :text-color="lessonDetail.quiz.shuffle_choices ? 'white' : 'grey-8'" size="m" :icon="lessonDetail.quiz.shuffle_choices ? 'check' : 'close'">
+                      สุ่มตัวเลือก
+                   </q-chip>
+                    <q-chip :color="lessonDetail.quiz.show_answers_after_completion ? 'positive' : 'grey-4'" :text-color="lessonDetail.quiz.show_answers_after_completion ? 'white' : 'grey-8'" size="m" :icon="lessonDetail.quiz.show_answers_after_completion ? 'check' : 'close'">
+                      เฉลยหลังทำเสร็จ
+                   </q-chip>
+                   <q-chip :color="lessonDetail.quiz.is_skippable ? 'positive' : 'grey-4'" :text-color="lessonDetail.quiz.is_skippable ? 'white' : 'grey-8'" size="m" :icon="lessonDetail.quiz.is_skippable ? 'check' : 'close'">
+                      ข้ามข้อได้
+                   </q-chip>
+                   <q-chip :color="lessonDetail.quiz.allow_multiple_attempts ? 'positive' : 'grey-4'" :text-color="lessonDetail.quiz.allow_multiple_attempts ? 'white' : 'grey-8'" size="m" :icon="lessonDetail.quiz.allow_multiple_attempts ? 'check' : 'close'">
+                      ทำซ้ำได้
+                   </q-chip>
+                </div>
+              </div>
+
               <!-- Questions List -->
               <div v-if="lessonDetail.quiz.questions && lessonDetail.quiz.questions.length > 0" class="mt-6 space-y-6">
                 <!-- ... (questions rendering code unchanged) ... -->

frontend_management/layouts/admin.vue

@@ -63,7 +63,7 @@
         </NuxtLink>
 
         <NuxtLink
-          to="/admin/audit-logs"
+          to="/admin/audit-log"
           class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
           active-class="bg-primary-500 text-white hover:bg-primary-600"
         >
@@ -91,11 +91,29 @@
 </template>
 
 <script setup lang="ts">
+import { useQuasar } from 'quasar';
+
+const $q = useQuasar();
 const authStore = useAuthStore();
 const router = useRouter();
 
 const handleLogout = () => {
-  authStore.logout();
-  router.push('/login');
+  $q.dialog({
+    title: 'ยืนยันออกจากระบบ',
+    message: 'คุณต้องการออกจากระบบหรือไม่?',
+    persistent: true,
+    ok: {
+      label: 'ออกจากระบบ',
+      color: 'negative',
+      flat: false
+    },
+    cancel: {
+      label: 'ยกเลิก',
+      flat: true
+    }
+  }).onOk(() => {
+    authStore.logout();
+    router.push('/login');
+  });
 };
 </script>

frontend_management/layouts/instructor.vue

@@ -2,7 +2,7 @@
   <div class="min-h-screen bg-gray-50">
     <!-- Sidebar -->
     <aside class="fixed left-0 top-0 h-screen w-64 bg-white shadow-lg">
-      <div class="p-6">
+      <div class="py-6 px-8">
         <h2 class="text-xl font-bold text-primary-600">E-Learning</h2>
         <p class="text-sm text-gray-500">Instructor Panel</p>
       </div>
@@ -46,11 +46,29 @@
 </template>
 
 <script setup lang="ts">
+import { useQuasar } from 'quasar';
+
+const $q = useQuasar();
 const authStore = useAuthStore();
 const router = useRouter();
 
 const handleLogout = () => {
-  authStore.logout();
-  router.push('/login');
+  $q.dialog({
+    title: 'ยืนยันออกจากระบบ',
+    message: 'คุณต้องการออกจากระบบหรือไม่?',
+    persistent: true,
+    ok: {
+      label: 'ออกจากระบบ',
+      color: 'negative',
+      flat: false
+    },
+    cancel: {
+      label: 'ยกเลิก',
+      flat: true
+    }
+  }).onOk(() => {
+    authStore.logout();
+    router.push('/login');
+  });
 };
 </script>

frontend_management/nuxt.config.ts

@@ -35,10 +35,13 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   app: {
     head: {
-      title: 'E-Learning System',
+      title: 'E-Learning-Management',
       meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+      ],
+      link: [
+        { rel: 'icon', type: 'image/png', href: '/icon.png' }
       ]
     }
   }

frontend_management/pages/admin/audit-log/index.vue

@@ -218,7 +218,7 @@
           <p>เลือกระยะเวลาที่ต้องการเก็บไว้ (ลบข้อมูลที่เก่ากว่ากำหนด):</p>
           <q-select
             v-model="cleanupDays"
-            :options="[30, 60, 90, 180, 365]"
+            :options="[7, 15, 30, 60, 90, 180, 365]"
             label="จำนวนวัน"
             suffix="วัน"
             outlined

frontend_management/pages/admin/courses/[id].vue

@@ -75,7 +75,7 @@
         <div class="space-y-4">
           <!-- Stats -->
           <div class="bg-white rounded-xl shadow-sm p-6">
-            <h3 class="font-semibold text-gray-700 mb-4">สถิติ</h3>
+            <h3 class="font-semibold text-gray-700 mb-4">รายละเอียด</h3>
             <div class="space-y-3">
               <div class="flex justify-between">
                 <span class="text-gray-500">จำนวนบท</span>
@@ -93,6 +93,14 @@
                 <span class="text-gray-500">แบบทดสอบ</span>
                 <span class="font-medium">{{ quizCount }}</span>
               </div>
+              <div class="flex justify-between">
+                <span class="text-gray-500">สร้างเมื่อ</span>
+                <span>{{ formatDate(course.created_at) }}</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-gray-500">อัพเดทล่าสุด</span>
+                <span>{{ formatDate(course.updated_at) }}</span>
+              </div>
             </div>
           </div>
 
@@ -116,21 +124,6 @@
               </div>
             </div>
           </div>
-
-          <!-- Timeline -->
-          <div class="bg-white rounded-xl shadow-sm p-6">
-            <h3 class="font-semibold text-gray-700 mb-4">ข้อมูลระบบ</h3>
-            <div class="space-y-3 text-sm">
-              <div class="flex justify-between">
-                <span class="text-gray-500">สร้างเมื่อ</span>
-                <span>{{ formatDate(course.created_at) }}</span>
-              </div>
-              <div class="flex justify-between">
-                <span class="text-gray-500">อัพเดทล่าสุด</span>
-                <span>{{ formatDate(course.updated_at) }}</span>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
 

frontend_management/pages/admin/courses/pending.vue

@@ -31,33 +31,48 @@
       </div>
     </div>
 
-    <!-- Search -->
+    <!-- Search & View Toggle -->
     <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
-      <q-input
-        v-model="searchQuery"
-        placeholder="ค้นหาชื่อคอร์ส, ผู้สอน..."
-        outlined
-        dense
-        bg-color="grey-1"
-      >
-        <template v-slot:prepend>
-          <q-icon name="search" />
-        </template>
-        <template v-slot:append v-if="searchQuery">
-          <q-icon name="close" class="cursor-pointer" @click="searchQuery = ''" />
-        </template>
-      </q-input>
-    </div>
+      <div class="flex gap-4 items-center">
+        <div class="flex-1">
+          <q-input
+            v-model="searchQuery"
+            placeholder="ค้นหาชื่อคอร์ส, ผู้สอน..."
+            outlined
+            dense
+            bg-color="grey-1"
+          >
+            <template v-slot:prepend>
+              <q-icon name="search" />
+            </template>
+            <template v-slot:append v-if="searchQuery">
+              <q-icon name="close" class="cursor-pointer" @click="searchQuery = ''" />
+            </template>
+          </q-input>
+        </div>
 
-    <div class="flex justify-end mb-6">
-      <q-btn-toggle
+        <q-btn-toggle
           v-model="viewMode"
           toggle-color="primary"
           :options="[
-            { label: 'การ์ด', value: 'card' },
-            { label: 'ตาราง', value: 'table' }
+            { value: 'card', slot: 'card' },
+            { value: 'table', slot: 'table' }
           ]"
-        />
+          dense
+          rounded
+          unelevated
+          class="border"
+        >
+          <template v-slot:card>
+            <q-icon name="view_stream" size="20px" />
+            <q-tooltip>มุมมองการ์ด</q-tooltip>
+          </template>
+          <template v-slot:table>
+            <q-icon name="view_list" size="20px" />
+            <q-tooltip>มุมมองตาราง</q-tooltip>
+          </template>
+        </q-btn-toggle>
+      </div>
     </div>
 
     <!-- Pending Courses List -->

frontend_management/pages/admin/index.vue

@@ -146,7 +146,7 @@
       <div class="card bg-white rounded-lg shadow-sm">
         <div class="p-6 border-b flex justify-between items-center">
           <h2 class="text-lg font-semibold text-gray-900">กิจกรรมล่าสุด</h2>
-           <q-btn flat color="primary" label="ดูทั้งหมด" to="/admin/audit-logs" size="sm" />
+           <q-btn flat color="primary" label="ดูทั้งหมด" to="/admin/audit-log" size="sm" />
         </div>
         <div class="divide-y">
              <div v-if="loading" class="p-8 text-center text-gray-500">

frontend_management/pages/admin/recommended-courses/index.vue

@@ -183,6 +183,34 @@
                    </div>
                 </div>
              </div>
+
+             <!-- Course Structure -->
+             <div v-if="selectedCourse.chapters && selectedCourse.chapters.length > 0" class="mt-6">
+               <div class="font-bold text-lg mb-3">โครงสร้างหลักสูตร (Course Structure)</div>
+               <div class="space-y-3">
+                 <q-expansion-item
+                   v-for="(chapter, index) in selectedCourse.chapters"
+                   :key="chapter.id"
+                   :label="`บทที่ ${index + 1}: ${chapter.title.th}`"
+                   :caption="`${chapter.lessons.length} บทเรียน`"
+                   header-class="bg-gray-50 rounded-lg"
+                   expand-icon-class="text-primary"
+                 >
+                   <div class="pl-4 pt-2">
+                     <div
+                       v-for="(lesson, lessonIndex) in chapter.lessons"
+                       :key="lesson.id"
+                       class="flex items-center gap-3 py-2 border-b last:border-b-0"
+                     >
+                       <q-icon name="article" color="primary" size="20px" />
+                       <span class="text-gray-700">{{ lessonIndex + 1 }}. {{ lesson.title.th }}</span>
+                       <span v-if="lesson.title.en" class="text-gray-400 text-xs ml-auto">{{ lesson.title.en }}</span>
+                     </div>
+                   </div>
+                 </q-expansion-item>
+               </div>
+             </div>
+
           </q-card-section>
           
           <!-- Inner Loading -->

frontend_management/pages/admin/users/index.vue

@@ -216,7 +216,7 @@
 
 <script setup lang="ts">
 import { useQuasar } from 'quasar';
-import { adminService, type AdminUserResponse } from '~/services/admin.service';
+import { adminService, type AdminUserResponse, type RoleResponse } from '~/services/admin.service';
 import { useAuthStore } from '~/stores/auth';
 
 definePageMeta({
@@ -228,6 +228,7 @@ const $q = useQuasar();
 
 // Data
 const users = ref<AdminUserResponse[]>([]);
+const roles = ref<RoleResponse[]>([]);
 const loading = ref(true);
 const searchQuery = ref('');
 const filterRole = ref<string | null>(null);
@@ -286,6 +287,14 @@ const filteredUsers = computed(() => {
 });
 
 // Methods
+const fetchRoles = async () => {
+  try {
+    roles.value = await adminService.getRoles();
+  } catch (error) {
+    console.error('Failed to fetch roles:', error);
+  }
+};
+
 const fetchUsers = async () => {
   loading.value = true;
   try {
@@ -328,24 +337,32 @@ const viewUser = (user: AdminUserResponse) => {
   showViewModal.value = true;
 };
 
-const changeRole = (user: AdminUserResponse) => {
-  const roleIds: Record<string, number> = {
-    INSTRUCTOR: 1,
-    STUDENT: 2,
-    ADMIN: 3
+const getRoleLabel = (code: string): string => {
+  const labels: Record<string, string> = {
+    INSTRUCTOR: 'Instructor',
+    STUDENT: 'Student',
+    ADMIN: 'Admin'
   };
+  return labels[code] || code;
+};
+
+const changeRole = (user: AdminUserResponse) => {
+  // Find current role ID from fetched roles
+  const currentRole = roles.value.find(r => r.code === user.role.code);
   
+  // Build items from API roles
+  const roleItems = roles.value.map(r => ({
+    label: getRoleLabel(r.code),
+    value: r.id
+  }));
+
   $q.dialog({
     title: 'เปลี่ยน Role',
     message: `เลือก Role ใหม่สำหรับ ${user.profile.first_name}`,
     options: {
       type: 'radio',
-      model: roleIds[user.role.code] as any,
-      items: [
-        { label: 'Instructor', value: 1 },
-        { label: 'Student', value: 2 },
-        { label: 'Admin', value: 3 }
-      ]
+      model: (currentRole?.id ?? 0) as any,
+      items: roleItems
     },
     cancel: true,
     persistent: true
@@ -415,6 +432,7 @@ const exportExcel = () => {
 
 // Lifecycle
 onMounted(() => {
+  fetchRoles();
   fetchUsers();
 });
 </script>

frontend_management/pages/instructor/courses/index.vue

@@ -39,8 +39,8 @@
 
     <!-- Filter Bar -->
     <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="md:col-span-2">
+      <div class="flex gap-4 items-center">
+        <div class="flex-1">
           <q-input
             v-model="searchQuery"
             placeholder="ค้นหาหลักสูตร..."
@@ -62,15 +62,39 @@
           dense
           emit-value
           map-options
+          style="min-width: 160px"
         />
+
+        <q-btn-toggle
+          v-model="viewMode"
+          toggle-color="primary"
+          :options="[
+            { value: 'card', slot: 'card' },
+            { value: 'table', slot: 'table' }
+          ]"
+          dense
+          rounded
+          unelevated
+          class="border"
+        >
+          <template v-slot:card>
+            <q-icon name="grid_view" size="20px" />
+            <q-tooltip>มุมมองการ์ด</q-tooltip>
+          </template>
+          <template v-slot:table>
+            <q-icon name="view_list" size="20px" />
+            <q-tooltip>มุมมองตาราง</q-tooltip>
+          </template>
+        </q-btn-toggle>
       </div>
     </div>
 
-    <!-- Courses Grid -->
+    <!-- Loading -->
     <div v-if="loading" class="flex justify-center py-10">
       <q-spinner-dots size="50px" color="primary" />
     </div>
 
+    <!-- Empty State -->
     <div v-else-if="filteredCourses.length === 0" class="bg-white rounded-xl shadow-sm p-10 text-center">
       <q-icon name="school" size="60px" color="grey-5" class="mb-4" />
       <p class="text-gray-500 text-lg">ยังไม่มีหลักสูตร</p>
@@ -82,7 +106,8 @@
       />
     </div>
 
-    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <!-- Card View -->
+    <div v-else-if="viewMode === 'card'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       <div
         v-for="course in filteredCourses"
         :key="course.id"
@@ -134,15 +159,6 @@
           >
             <q-tooltip>ดูรายละเอียด</q-tooltip>
           </q-btn>
-          <!-- <q-btn
-            flat
-            dense
-            icon="edit"
-            color="primary"
-            @click="navigateTo(`/instructor/courses/${course.id}/edit`)"
-          >
-            <q-tooltip>แก้ไข</q-tooltip>
-          </q-btn> -->
           <q-space />
           <q-btn flat round dense icon="more_vert">
             <q-menu>
@@ -167,6 +183,94 @@
       </div>
     </div>
 
+    <!-- Table View -->
+    <div v-else class="bg-white rounded-xl shadow-sm overflow-hidden">
+      <q-table
+        :rows="filteredCourses"
+        :columns="tableColumns"
+        row-key="id"
+        flat
+        :pagination="tablePagination"
+        :rows-per-page-options="[10, 20, 50, 0]"
+        @update:pagination="tablePagination = $event"
+      >
+        <!-- Thumbnail + Title -->
+        <template v-slot:body-cell-title="props">
+          <q-td :props="props">
+            <div class="flex items-center gap-3">
+              <div class="w-16 h-10 rounded overflow-hidden flex-shrink-0 bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
+                <img
+                  v-if="props.row.thumbnail_url"
+                  :src="props.row.thumbnail_url"
+                  :alt="props.row.title.th"
+                  class="w-full h-full object-cover"
+                  @error="($event.target as HTMLImageElement).style.display = 'none'"
+                />
+                <q-icon v-else name="school" size="20px" color="white" />
+              </div>
+              <div class="min-w-0">
+                <div class="font-medium text-gray-900 truncate">{{ props.row.title.th }}</div>
+                <div class="text-xs text-gray-400 truncate">{{ props.row.title.en }}</div>
+              </div>
+            </div>
+          </q-td>
+        </template>
+
+        <!-- Status Badge -->
+        <template v-slot:body-cell-status="props">
+          <q-td :props="props">
+            <q-badge :color="getStatusColor(props.row.status)">
+              {{ getStatusLabel(props.row.status) }}
+            </q-badge>
+          </q-td>
+        </template>
+
+        <!-- Price -->
+        <template v-slot:body-cell-price="props">
+          <q-td :props="props">
+            <span class="font-medium" :class="props.row.is_free ? 'text-green-600' : 'text-primary-600'">
+              {{ props.row.is_free ? 'ฟรี' : `฿${parseFloat(props.row.price).toLocaleString()}` }}
+            </span>
+          </q-td>
+        </template>
+
+        <!-- Date -->
+        <template v-slot:body-cell-created_at="props">
+          <q-td :props="props">
+            {{ formatDate(props.row.created_at) }}
+          </q-td>
+        </template>
+
+        <!-- Actions -->
+        <template v-slot:body-cell-actions="props">
+          <q-td :props="props">
+            <q-btn flat round dense icon="visibility" color="grey" size="sm" @click="handleViewDetails(props.row)">
+              <q-tooltip>ดูรายละเอียด</q-tooltip>
+            </q-btn>
+            <q-btn flat round dense icon="more_vert" size="sm">
+              <q-menu>
+                <q-list style="min-width: 150px">
+                  <q-item clickable v-close-popup @click="duplicateCourse(props.row)">
+                    <q-item-section avatar>
+                      <q-icon name="content_copy" />
+                    </q-item-section>
+                    <q-item-section>ทำสำเนา</q-item-section>
+                  </q-item>
+                  <q-separator />
+                  <q-item clickable v-close-popup @click="confirmDelete(props.row)">
+                    <q-item-section avatar>
+                      <q-icon name="delete" color="negative" />
+                    </q-item-section>
+                    <q-item-section class="text-negative">ลบ</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+
     <!-- Rejection Details Dialog -->
     <q-dialog v-model="rejectionDialog">
       <q-card style="min-width: 400px">
@@ -256,6 +360,17 @@ const courses = ref<CourseResponse[]>([]);
 const loading = ref(true);
 const searchQuery = ref('');
 const filterStatus = ref<string | null>(null);
+const viewMode = ref<'card' | 'table'>('card');
+
+// Table config
+const tablePagination = ref({ page: 1, rowsPerPage: 10 });
+const tableColumns = [
+  { name: 'title', label: 'หลักสูตร', field: 'title', align: 'left' as const, sortable: true },
+  { name: 'status', label: 'สถานะ', field: 'status', align: 'center' as const, sortable: true },
+  { name: 'price', label: 'ราคา', field: 'price', align: 'center' as const, sortable: true },
+  { name: 'created_at', label: 'วันที่สร้าง', field: 'created_at', align: 'center' as const, sortable: true },
+  { name: 'actions', label: 'จัดการ', field: 'actions', align: 'center' as const }
+];
 
 // Status options
 const statusOptions = [
@@ -263,7 +378,8 @@ const statusOptions = [
   { label: 'เผยแพร่แล้ว', value: 'APPROVED' },
   { label: 'รอตรวจสอบ', value: 'PENDING' },
   { label: 'แบบร่าง', value: 'DRAFT' },
-  { label: 'ถูกปฏิเสธ', value: 'REJECTED' }
+  { label: 'ถูกปฏิเสธ', value: 'REJECTED' },
+  //{ label: 'เก็บถาวร', value: 'ARCHIVED' }
 ];
 
 // Stats
@@ -275,7 +391,7 @@ const stats = computed(() => ({
   rejected: courses.value.filter(c => c.status === 'REJECTED').length
 }));
 
-// Filtered courses
+// Filtered courses (search only, status is handled server-side)
 const filteredCourses = computed(() => {
   let result = courses.value;
 
@@ -287,10 +403,6 @@ const filteredCourses = computed(() => {
     );
   }
 
-  if (filterStatus.value) {
-    result = result.filter(course => course.status === filterStatus.value);
-  }
-
   return result;
 });
 
@@ -298,7 +410,7 @@ const filteredCourses = computed(() => {
 const fetchCourses = async () => {
   loading.value = true;
   try {
-    courses.value = await instructorService.getCourses();
+    courses.value = await instructorService.getCourses(filterStatus.value || undefined);
   } catch (error) {
     $q.notify({
       type: 'negative',
@@ -310,12 +422,18 @@ const fetchCourses = async () => {
   }
 };
 
+// Re-fetch when status filter changes
+watch(filterStatus, () => {
+  fetchCourses();
+});
+
 const getStatusColor = (status: string) => {
   const colors: Record<string, string> = {
     APPROVED: 'green',
     PENDING: 'orange',
     DRAFT: 'grey',
-    REJECTED: 'red'
+    REJECTED: 'red',
+    ARCHIVED: 'blue-grey'
   };
   return colors[status] || 'grey';
 };
@@ -325,7 +443,8 @@ const getStatusLabel = (status: string) => {
     APPROVED: 'เผยแพร่แล้ว',
     PENDING: 'รอตรวจสอบ',
     DRAFT: 'แบบร่าง',
-    REJECTED: 'ถูกปฏิเสธ'
+    REJECTED: 'ถูกปฏิเสธ',
+    ARCHIVED: 'เก็บถาวร'
   };
   return labels[status] || status;
 };

frontend_management/services/admin.service.ts

@@ -296,6 +296,15 @@ export interface RecommendedCourse {
     };
     chapters_count: number;
     lessons_count: number;
+    chapters?: {
+        id: number;
+        title: { th: string; en: string };
+        sort_order: number;
+        lessons: {
+            id: number;
+            title: { th: string; en: string };
+        }[];
+    }[];
 }
 
 export interface RecommendedCoursesListResponse {
@@ -311,7 +320,25 @@ const getAuthToken = (): string => {
     return tokenCookie.value || '';
 };
 
+// Role interface
+export interface RoleResponse {
+    id: number;
+    code: string;
+}
+
 export const adminService = {
+    async getRoles(): Promise<RoleResponse[]> {
+        const config = useRuntimeConfig();
+        const token = getAuthToken();
+        const response = await $fetch<{ roles: RoleResponse[] }>('/api/user/roles', {
+            baseURL: config.public.apiBaseUrl as string,
+            headers: {
+                Authorization: `Bearer ${token}`
+            }
+        });
+        return response.roles;
+    },
+
     async getUsers(): Promise<AdminUserResponse[]> {
         const config = useRuntimeConfig();
         const token = getAuthToken();

frontend_management/services/instructor.service.ts

@@ -208,8 +208,12 @@ const authRequest = async <T>(
 };
 
 export const instructorService = {
-    async getCourses(): Promise<CourseResponse[]> {
-        const response = await authRequest<CoursesListResponse>('/api/instructors/courses');
+    async getCourses(status?: string): Promise<CourseResponse[]> {
+        let url = '/api/instructors/courses';
+        if (status) {
+            url += `?status=${status}`;
+        }
+        const response = await authRequest<CoursesListResponse>(url);
         return response.data;
     },