- {thumbnailImage && (
-

- )}
+ if (run) {
+ return run.steps.find(
+ (step: any) => step.activity_id === activity.id && step.complete === true
+ );
+ }
+ return false;
+ };
+
+ const totalActivities = allActivities.length;
+ const completedActivities = allActivities.filter((activity: any) => isActivityDone(activity)).length;
+ return totalActivities > 0 && completedActivities === totalActivities;
+ }, [trailData, course]);
+
+ // Calculate progress for incomplete courses
+ const progressInfo = useMemo(() => {
+ if (!trailData || !course || isCourseCompleted) return null;
+
+ const allActivities = course.chapters.flatMap((chapter: any) =>
+ chapter.activities.map((activity: any) => ({
+ ...activity,
+ chapterId: chapter.id
+ }))
+ );
+
+ const isActivityDone = (activity: any) => {
+ const cleanCourseUuid = course.course_uuid?.replace('course_', '');
+ const run = trailData?.runs?.find(
+ (run: any) => {
+ const cleanRunCourseUuid = run.course?.course_uuid?.replace('course_', '');
+ return cleanRunCourseUuid === cleanCourseUuid;
+ }
+ );
+
+ if (run) {
+ return run.steps.find(
+ (step: any) => step.activity_id === activity.id && step.complete === true
+ );
+ }
+ return false;
+ };
+
+ const totalActivities = allActivities.length;
+ const completedActivities = allActivities.filter((activity: any) => isActivityDone(activity)).length;
+ const progressPercentage = Math.round((completedActivities / totalActivities) * 100);
+
+ return {
+ completed: completedActivities,
+ total: totalActivities,
+ percentage: progressPercentage
+ };
+ }, [trailData, course, isCourseCompleted]);
+
+ if (isCourseCompleted) {
+ // Show congratulations for completed course
+ return (
+
+
+
+
+
+
+
+ {thumbnailImage && (
+

+ )}
+
+
+
+
+
-
-
+
+ Congratulations! 🎉
+
+
+
+ You've successfully completed
+ {courseName}
+
+
+
+ Your dedication and hard work have paid off. You've mastered all the content in this course.
+
+
+
-
-
- Congratulations! 🎉
-
-
-
- You've successfully completed
- {courseName}
-
-
-
- Your dedication and hard work have paid off. You've mastered all the content in this course.
-
+
+ );
+ } else {
+ // Show progress and encouragement for incomplete course
+ return (
+
+
+
+ {thumbnailImage && (
+

+ )}
+
+
+
+
+
+
+
+ Keep Going! 💪
+
+
+
+ You're making great progress in
+ {courseName}
+
+
+ {progressInfo && (
+
+
+
+ Course Progress
+
+
+
+
+ Progress
+ {progressInfo.percentage}%
+
+
+
+
+
+ {progressInfo.completed} of {progressInfo.total} activities completed
+
+
+
+ )}
+
+
+ You're doing great! Complete the remaining activities to unlock your course completion certificate.
+
-
-
-
-
Back to Course
-
+
+
+
+
Continue Learning
+
+
-
- );
+ );
+ }
};
export default CourseEndView;
\ No newline at end of file
diff --git a/apps/web/components/Pages/Courses/ActivityIndicators.tsx b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
index 4eef89c9..882039bd 100644
--- a/apps/web/components/Pages/Courses/ActivityIndicators.tsx
+++ b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
@@ -1,5 +1,5 @@
'use client'
-import { BookOpenCheck, Check, FileText, Layers, Video, ChevronLeft, ChevronRight } from 'lucide-react'
+import { BookOpenCheck, Check, FileText, Layers, Video, ChevronLeft, ChevronRight, Trophy } from 'lucide-react'
import React, { useMemo, memo, useState } from 'react'
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
import { getUriWithOrg } from '@services/config/config'
@@ -124,6 +124,58 @@ const ChapterTooltipContent = memo(({
ChapterTooltipContent.displayName = 'ChapterTooltipContent';
+// Add certification badge component
+const CertificationBadge = memo(({
+ courseid,
+ orgslug,
+ isCompleted
+}: {
+ courseid: string,
+ orgslug: string,
+ isCompleted: boolean
+}) => (
+
+
+
+
+ {isCompleted ? 'Course Completed!' : 'Course Completion'}
+
+
+
+
+ {isCompleted
+ ? 'View your completion certificate'
+ : 'Complete all activities to unlock your certificate'
+ }
+
+
+
+ }
+ >
+
+
+
+
+
+
+));
+
+CertificationBadge.displayName = 'CertificationBadge';
+
function ActivityIndicators(props: Props) {
const course = props.course
const orgslug = props.orgslug
@@ -218,6 +270,13 @@ function ActivityIndicators(props: Props) {
}, 0)
}, [isActivityDone]);
+ // Check if all activities are completed
+ const isCourseCompleted = useMemo(() => {
+ const totalActivities = allActivities.length;
+ const completedActivities = allActivities.filter((activity: any) => isActivityDone(activity)).length;
+ return totalActivities > 0 && completedActivities === totalActivities;
+ }, [allActivities, isActivityDone]);
+
return (
{enableNavigation && (
@@ -317,6 +376,13 @@ function ActivityIndicators(props: Props) {
)
})}
+
+ {/* Certification Badge */}
+
{enableNavigation && (