From 438bc6cd235307690a3f07342d10d0c546fa20d1 Mon Sep 17 00:00:00 2001
From: supalerk-ar66 <supalerk_ar66@live.rmutl.ac.th>
Date: Fri, 6 Feb 2026 12:57:29 +0700
Subject: [PATCH] feat: implement online classroom page with curriculum
 sidebar, video player, and announcement system

---
 .../components/classroom/CurriculumSidebar.vue           | 2 +-
 Frontend-Learner/pages/classroom/learning.vue            | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/Frontend-Learner/components/classroom/CurriculumSidebar.vue b/Frontend-Learner/components/classroom/CurriculumSidebar.vue
index bc0e6e21..d5ec29c2 100644
--- a/Frontend-Learner/components/classroom/CurriculumSidebar.vue
+++ b/Frontend-Learner/components/classroom/CurriculumSidebar.vue
@@ -85,7 +85,7 @@ const getLocalizedText = (text: any) => {
                 </q-item-section>
 
                 <q-item-section side>
-                   <q-icon v-if="lesson.is_completed" name="check_circle" color="positive" size="xs" />
+                   <q-icon v-if="lesson.is_completed || lesson.progress?.is_completed" name="check_circle" color="positive" size="xs" />
                    <q-icon v-else-if="currentLessonId === lesson.id" name="play_circle" color="primary" size="xs" />
                    <q-icon v-else name="radio_button_unchecked" color="grey-4" size="xs" />
                 </q-item-section>
diff --git a/Frontend-Learner/pages/classroom/learning.vue b/Frontend-Learner/pages/classroom/learning.vue
index a73fd545..abbfc8b4 100644
--- a/Frontend-Learner/pages/classroom/learning.vue
+++ b/Frontend-Learner/pages/classroom/learning.vue
@@ -210,6 +210,7 @@ const loadLesson = async (lessonId: number) => {
               if (lesson) {
                   if (!lesson.progress) lesson.progress = {}
                   lesson.progress.is_completed = true
+                  lesson.is_completed = true // Standardize completion property
                   break
               }
           }
@@ -372,8 +373,12 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
     try {
         const res = await saveVideoProgress(lesson.id, maxSec, durationSec, keepalive)
         
-        // Handle Completion (Rely on Backend's auto-complete response)
-        if (res.success && res.data?.is_completed) {
+        // Handle Completion (Frontend-only strategy: 95% threshold)
+        // This ensures the checkmark appears at 95% to match backend.
+        const progressPercentage = durationSec > 0 ? (maxSec / durationSec) : 0
+        const isCompletedNow = res.success && (res.data?.is_completed || progressPercentage >= 0.95)
+
+        if (isCompletedNow) {
              markLessonAsCompletedLocally(lesson.id)
              if (lesson.progress) lesson.progress.is_completed = true
         }