From e39c9c37badb8455d96e26f80a4c8dc9e05775c1 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Wed, 16 Jul 2025 20:14:30 +0200
Subject: [PATCH] feat: enhance course activity page with dynamic title and
 certification badge component

---
 .../activity/[activityid]/activity.tsx        |   2 +
 .../activity/[activityid]/page.tsx            |   8 +-
 .../Pages/Activity/CourseEndView.tsx          | 265 ++++++++++++++----
 .../Pages/Courses/ActivityIndicators.tsx      |  68 ++++-
 4 files changed, 288 insertions(+), 55 deletions(-)

diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
index cb265b42..f868ef91 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
@@ -521,6 +521,8 @@ function ActivityClient(props: ActivityClientProps) {
                     orgslug={orgslug}
                     courseUuid={course.course_uuid}
                     thumbnailImage={course.thumbnail_image}
+                    course={course}
+                    trailData={trailData}
                   />
                 ) : (
                   <div className="space-y-4 pt-0">
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx
index f49295a6..40ef79e4 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx
@@ -43,9 +43,13 @@ export async function generateMetadata(props: MetadataProps): Promise<Metadata>
     access_token || null
   )
 
+  // Check if this is the course end page
+  const isCourseEnd = params.activityid === 'end';
+  const pageTitle = isCourseEnd ? `Congratulations — ${course_meta.name} Course` : activity.name + ` — ${course_meta.name} Course`;
+
   // SEO
   return {
-    title: activity.name + ` — ${course_meta.name} Course`,
+    title: pageTitle,
     description: course_meta.description,
     keywords: course_meta.learnings,
     robots: {
@@ -59,7 +63,7 @@ export async function generateMetadata(props: MetadataProps): Promise<Metadata>
       },
     },
     openGraph: {
-      title: activity.name + ` — ${course_meta.name} Course`,
+      title: pageTitle,
       description: course_meta.description,
       publishedTime: course_meta.creation_date,
       tags: course_meta.learnings,
diff --git a/apps/web/components/Pages/Activity/CourseEndView.tsx b/apps/web/components/Pages/Activity/CourseEndView.tsx
index 027f1a65..a493ca78 100644
--- a/apps/web/components/Pages/Activity/CourseEndView.tsx
+++ b/apps/web/components/Pages/Activity/CourseEndView.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import ReactConfetti from 'react-confetti';
-import { Trophy, ArrowLeft } from 'lucide-react';
+import { Trophy, ArrowLeft, BookOpen, Target } from 'lucide-react';
 import Link from 'next/link';
 import { getUriWithOrg } from '@services/config/config';
 import { getCourseThumbnailMediaDirectory } from '@services/media/media';
@@ -12,68 +12,229 @@ interface CourseEndViewProps {
   orgslug: string;
   courseUuid: string;
   thumbnailImage: string;
+  course: any;
+  trailData: any;
 }
 
-const CourseEndView: React.FC<CourseEndViewProps> = ({ courseName, orgslug, courseUuid, thumbnailImage }) => {
+const CourseEndView: React.FC<CourseEndViewProps> = ({ 
+  courseName, 
+  orgslug, 
+  courseUuid, 
+  thumbnailImage, 
+  course, 
+  trailData 
+}) => {
   const { width, height } = useWindowSize();
   const org = useOrg() as any;
 
-  return (
-    <div className="min-h-[70vh] flex flex-col items-center justify-center text-center px-4 relative overflow-hidden">
-      <div className="fixed inset-0 pointer-events-none">
-        <ReactConfetti
-          width={width}
-          height={height}
-          numberOfPieces={200}
-          recycle={false}
-          colors={['#6366f1', '#10b981', '#3b82f6']}
-        />
-      </div>
+  // Check if course is actually completed
+  const isCourseCompleted = useMemo(() => {
+    if (!trailData || !course) return false;
+    
+    // Flatten all activities
+    const allActivities = course.chapters.flatMap((chapter: any) => 
+      chapter.activities.map((activity: any) => ({
+        ...activity,
+        chapterId: chapter.id
+      }))
+    );
+    
+    // Check if all activities are completed
+    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;
+        }
+      );
       
-      <div className="bg-white rounded-2xl p-8 nice-shadow max-w-2xl w-full space-y-6 relative z-10">
-        <div className="flex flex-col items-center space-y-6">
-          {thumbnailImage && (
-            <img
-              className="w-[200px] h-[114px] rounded-lg shadow-md object-cover"
-              src={`${getCourseThumbnailMediaDirectory(
-                org?.org_uuid,
-                courseUuid,
-                thumbnailImage
-              )}`}
-              alt={courseName}
-            />
-          )}
+      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 (
+      <div className="min-h-[70vh] flex flex-col items-center justify-center text-center px-4 relative overflow-hidden">
+        <div className="fixed inset-0 pointer-events-none">
+          <ReactConfetti
+            width={width}
+            height={height}
+            numberOfPieces={200}
+            recycle={false}
+            colors={['#6366f1', '#10b981', '#3b82f6']}
+          />
+        </div>
+        
+        <div className="bg-white rounded-2xl p-8 nice-shadow max-w-2xl w-full space-y-6 relative z-10">
+          <div className="flex flex-col items-center space-y-6">
+            {thumbnailImage && (
+              <img
+                className="w-[200px] h-[114px] rounded-lg shadow-md object-cover"
+                src={`${getCourseThumbnailMediaDirectory(
+                  org?.org_uuid,
+                  courseUuid,
+                  thumbnailImage
+                )}`}
+                alt={courseName}
+              />
+            )}
+            
+            <div className="bg-emerald-100 p-4 rounded-full">
+              <Trophy className="w-16 h-16 text-emerald-600" />
+            </div>
+          </div>
           
-          <div className="bg-emerald-100 p-4 rounded-full">
-            <Trophy className="w-16 h-16 text-emerald-600" />
+          <h1 className="text-4xl font-bold text-gray-900">
+            Congratulations! 🎉
+          </h1>
+          
+          <p className="text-xl text-gray-600">
+            You've successfully completed
+            <span className="font-semibold text-gray-900"> {courseName}</span>
+          </p>
+          
+          <p className="text-gray-500">
+            Your dedication and hard work have paid off. You've mastered all the content in this course.
+          </p>
+
+          <div className="pt-6">
+            <Link
+              href={getUriWithOrg(orgslug, '') + `/course/${courseUuid.replace('course_', '')}`}
+              className="inline-flex items-center space-x-2 bg-gray-800 text-white px-6 py-3 rounded-full hover:bg-gray-700 transition duration-200"
+            >
+              <ArrowLeft className="w-5 h-5" />
+              <span>Back to Course</span>
+            </Link>
           </div>
         </div>
-        
-        <h1 className="text-4xl font-bold text-gray-900">
-          Congratulations! 🎉
-        </h1>
-        
-        <p className="text-xl text-gray-600">
-          You've successfully completed
-          <span className="font-semibold text-gray-900"> {courseName}</span>
-        </p>
-        
-        <p className="text-gray-500">
-          Your dedication and hard work have paid off. You've mastered all the content in this course.
-        </p>
+      </div>
+    );
+  } else {
+    // Show progress and encouragement for incomplete course
+    return (
+      <div className="min-h-[70vh] flex flex-col items-center justify-center text-center px-4">
+        <div className="bg-white rounded-2xl p-8 nice-shadow max-w-2xl w-full space-y-6">
+          <div className="flex flex-col items-center space-y-6">
+            {thumbnailImage && (
+              <img
+                className="w-[200px] h-[114px] rounded-lg shadow-md object-cover"
+                src={`${getCourseThumbnailMediaDirectory(
+                  org?.org_uuid,
+                  courseUuid,
+                  thumbnailImage
+                )}`}
+                alt={courseName}
+              />
+            )}
+            
+            <div className="bg-blue-100 p-4 rounded-full">
+              <Target className="w-16 h-16 text-blue-600" />
+            </div>
+          </div>
+          
+          <h1 className="text-4xl font-bold text-gray-900">
+            Keep Going! 💪
+          </h1>
+          
+          <p className="text-xl text-gray-600">
+            You're making great progress in
+            <span className="font-semibold text-gray-900"> {courseName}</span>
+          </p>
+          
+          {progressInfo && (
+            <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+              <div className="flex items-center justify-center space-x-2">
+                <BookOpen className="w-5 h-5 text-gray-600" />
+                <span className="text-lg font-semibold text-gray-700">Course Progress</span>
+              </div>
+              
+              <div className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-600">Progress</span>
+                  <span className="font-semibold text-gray-900">{progressInfo.percentage}%</span>
+                </div>
+                
+                <div className="w-full bg-gray-200 rounded-full h-3">
+                  <div 
+                    className="bg-blue-600 h-3 rounded-full transition-all duration-500"
+                    style={{ width: `${progressInfo.percentage}%` }}
+                  ></div>
+                </div>
+                
+                <div className="text-sm text-gray-500">
+                  {progressInfo.completed} of {progressInfo.total} activities completed
+                </div>
+              </div>
+            </div>
+          )}
+          
+          <p className="text-gray-500">
+            You're doing great! Complete the remaining activities to unlock your course completion certificate.
+          </p>
 
-        <div className="pt-6">
-          <Link
-            href={getUriWithOrg(orgslug, '') + `/course/${courseUuid.replace('course_', '')}`}
-            className="inline-flex items-center space-x-2 bg-gray-800 text-white px-6 py-3 rounded-full hover:bg-gray-700 transition duration-200"
-          >
-            <ArrowLeft className="w-5 h-5" />
-            <span>Back to Course</span>
-          </Link>
+          <div className="pt-6">
+            <Link
+              href={getUriWithOrg(orgslug, '') + `/course/${courseUuid.replace('course_', '')}`}
+              className="inline-flex items-center space-x-2 bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700 transition duration-200"
+            >
+              <ArrowLeft className="w-5 h-5" />
+              <span>Continue Learning</span>
+            </Link>
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  }
 };
 
 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 
+}) => (
+  <ToolTip
+    sideOffset={8}
+    unstyled
+    content={
+      <div className="bg-white rounded-lg nice-shadow py-3 px-4 min-w-[200px] animate-in fade-in duration-200">
+        <div className="flex items-center gap-2">
+          <Trophy size={16} className="text-yellow-500" />
+          <span className="text-sm font-medium text-gray-900">
+            {isCompleted ? 'Course Completed!' : 'Course Completion'}
+          </span>
+        </div>
+        <div className="mt-1">
+          <span className="text-sm text-gray-700">
+            {isCompleted 
+              ? 'View your completion certificate' 
+              : 'Complete all activities to unlock your certificate'
+            }
+          </span>
+        </div>
+      </div>
+    }
+  >
+    <Link
+      href={`${getUriWithOrg(orgslug, '')}/course/${courseid}/activity/end`}
+      prefetch={false}
+      className={`mx-2 h-[20px] flex items-center cursor-pointer focus:outline-none transition-all ${
+        isCompleted ? 'opacity-100' : 'opacity-50 cursor-not-allowed'
+      }`}
+    >
+      <div className={`w-[20px] h-[20px] rounded-full flex items-center justify-center text-xs font-medium transition-colors ${
+        isCompleted 
+          ? 'bg-yellow-500 text-white hover:bg-yellow-600' 
+          : 'bg-gray-100 text-gray-400'
+      }`}>
+        <Trophy size={12} />
+      </div>
+    </Link>
+  </ToolTip>
+));
+
+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 (
     <div className="flex items-center gap-4">
       {enableNavigation && (
@@ -317,6 +376,13 @@ function ActivityIndicators(props: Props) {
             </React.Fragment>
           )
         })}
+        
+        {/* Certification Badge */}
+        <CertificationBadge 
+          courseid={courseid}
+          orgslug={orgslug}
+          isCompleted={isCourseCompleted}
+        />
       </div>
 
       {enableNavigation && (