feat: Implement core e-learning platform features including quiz, dashboard, course discovery, and classroom learning with i18n support.

Frontend-Learner/pages/dashboard/index.vue

@@ -53,27 +53,28 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="page-container">
-    <!-- Welcome Header Section -->
-    <div class="welcome-section mb-10 overflow-hidden relative rounded-[2.5rem] p-8 md:p-12 text-white shadow-xl dark:shadow-2xl dark:shadow-blue-950/40 transition border border-white/5">
-      <div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8">
-        <div class="text-center md:text-left">
-          <ClientOnly>
-             <h1 class="text-4xl md:text-6xl font-black mb-4 slide-up tracking-tight text-white drop-shadow-sm">
-               {{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}!
-             </h1>
-          </ClientOnly>
-          <p class="text-lg md:text-xl slide-up font-medium text-blue-100/90 max-w-xl" style="animation-delay: 0.1s;">
-            {{ $t('dashboard.welcomeSubtitle') }}
-          </p>
-        </div>
-        <div class="stats-mini flex gap-6 slide-up" style="animation-delay: 0.2s;"/>
+  <div class="page-container !pt-4">
+    <!-- Welcome Header Section (Minimalist) -->
+    <div class="flex items-center gap-6 mb-10 py-2 animate-fade-in">
+      <!-- Avatar with premium shadow -->
+      <div class="relative group cursor-pointer" @click="$router.push('/dashboard/profile')">
+        <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
+        <q-avatar size="84px" class="relative shadow-2xl ring-4 ring-white dark:ring-slate-900 transition-all duration-500 overflow-hidden">
+          <img 
+            :src="currentUser?.photoURL || 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y'" 
+            class="object-cover"
+          />
+        </q-avatar>
+      </div>
+      
+      <div class="flex flex-col">
+          <h1 class="text-2xl md:text-4xl font-black text-slate-900 dark:text-white tracking-tight leading-tight mb-1">
+            {{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}!
+          </h1>
+          <div class="flex items-center gap-2">
+            <span class="text-slate-500 dark:text-slate-400 text-sm font-medium">{{ $t('dashboard.welcomeSubtitle') }}</span>
+          </div>
       </div>
-      <!-- Decorative Background elements -->
-      <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-700 dark:from-[#1e293b] dark:via-[#0f172a] dark:to-[#1e3a8a] -z-0"/>
-      <div class="absolute -top-20 -right-20 w-80 h-80 bg-white/10 blur-[100px] rounded-full"/>
-      <div class="absolute -bottom-20 -left-20 w-80 h-80 bg-blue-400/10 blur-[100px] rounded-full"/>
-      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.03] mix-blend-overlay"></div>
     </div>
 
       <!-- Main Content Area -->
@@ -104,13 +105,12 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-@keyframes slide-up {
-  from { opacity: 0; transform: translateY(30px); }
-  to { opacity: 1; transform: translateY(0); }
+@keyframes fade-in {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
 }
 
-.slide-up {
-  animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
-  opacity: 0;
+.animate-fade-in {
+  animation: fade-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
 }
 </style>

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

@@ -18,6 +18,7 @@ useHead({
 const route = useRoute()
 const showEnrollModal = ref(false)
 const activeFilter = ref<'all' | 'progress' | 'completed'>('all')
+const searchQuery = ref('')
 
 
 // Check URL query parameters to show 'Enrollment Success' modal
@@ -71,6 +72,7 @@ const loadEnrolledCourses = async () => {
       enrollment_id: item.id,
       title: item.course.title,
       progress: item.progress_percentage || 0, 
+      lessons: item.course.total_lessons || 0,
       completed: item.status === 'COMPLETED',
       thumbnail_url: item.course.thumbnail_url 
     }))
@@ -83,6 +85,16 @@ watch(activeFilter, () => {
   loadEnrolledCourses()
 })
 
+// Client-side Search Filtering
+const filteredEnrolledCourses = computed(() => {
+  if (!searchQuery.value) return enrolledCourses.value
+  const query = searchQuery.value.toLowerCase()
+  return enrolledCourses.value.filter(c => {
+    const title = getLocalizedText(c.title).toLowerCase()
+    return title.includes(query)
+  })
+})
+
 onMounted(() => {
   if (route.query.enrolled) {
     showEnrollModal.value = true
@@ -138,21 +150,43 @@ const validCourseId = computed(() => {
   <div class="page-container">
 
 
-    <!-- Page Header & Filters -->
-    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10">
-       <h1 class="text-3xl font-black text-slate-900 dark:text-white">{{ $t('sidebar.myCourses') }}</h1>
+    <!-- Page Header & Filters (Unified Layout) -->
+    <div class="flex flex-col gap-6 mb-10">
+       <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
+          <h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
+            <span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
+            {{ $t('sidebar.myCourses') }}
+          </h1>
 
-       <!-- Filter Tabs -->
-       <div class="flex gap-2">
+          <!-- Search Input -->
+          <div class="flex items-center gap-3 w-full md:w-auto">
+            <q-input
+              v-model="searchQuery"
+              dense
+              outlined
+              rounded
+              :placeholder="$t('discovery.searchPlaceholder')"
+              class="w-full md:w-72 search-input shadow-sm"
+              bg-color="transparent"
+            >
+              <template v-slot:prepend>
+                <q-icon name="search" class="text-slate-400" />
+              </template>
+            </q-input>
+          </div>
+       </div>
+
+       <!-- Filter Tabs (Horizontal Bar) -->
+       <div class="flex flex-wrap items-center gap-2">
          <q-btn
            v-for="filter in ['all', 'progress', 'completed']"
            :key="filter"
            @click="activeFilter = filter as any"
+           flat
            rounded
-           unelevated
-           :color="activeFilter === filter ? 'primary' : 'white'"
-           :text-color="activeFilter === filter ? 'white' : 'grey-8'"
-           class="font-bold px-6"
+           dense
+           class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
+           :class="activeFilter === filter ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
            :label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
          />
        </div>
@@ -163,7 +197,7 @@ const validCourseId = computed(() => {
        <q-spinner size="3rem" color="primary" />
     </div>
     <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      <template v-for="course in enrolledCourses" :key="course.id">
+      <template v-for="course in filteredEnrolledCourses" :key="course.id">
         <!-- In Progress Course Card -->
         <CourseCard 
           v-if="!course.completed"
@@ -192,10 +226,18 @@ const validCourseId = computed(() => {
     </div>
 
     <!-- Empty State -->
-    <div v-if="!isLoading && enrolledCourses.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">
-      <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('myCourses.emptyTitle') }}</h3>
-      <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">{{ $t('myCourses.emptyDesc') }}</p>
-      <NuxtLink to="/browse/discovery" class="mt-6 px-6 py-2 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 transition-colors">{{ $t('myCourses.goToDiscovery') }}</NuxtLink>
+    <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">
+      <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') }}
+      </h3>
+      <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">
+        {{ searchQuery ? $t('discovery.emptyDesc') : $t('myCourses.emptyDesc') }}
+      </p>
+      <NuxtLink v-if="!searchQuery" to="/browse/discovery" class="mt-6 px-6 py-2 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 transition-colors">{{ $t('myCourses.goToDiscovery') }}</NuxtLink>
+      <button v-else class="mt-4 font-bold text-blue-600 hover:text-blue-700 transition-colors" @click="searchQuery = ''">
+        {{ $t('discovery.showAll') }}
+      </button>
     </div>
 
     <!-- MODAL: Enrollment Success -->