feat: Add course completion indicator at the end of the course

apps/web/components/Pages/Activity/CourseEndView.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import ReactConfetti from 'react-confetti';
+import { Trophy, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { getUriWithOrg } from '@services/config/config';
+import { getCourseThumbnailMediaDirectory } from '@services/media/media';
+import { useWindowSize } from 'usehooks-ts';
+import { useOrg } from '@components/Contexts/OrgContext';
+
+interface CourseEndViewProps {
+  courseName: string;
+  orgslug: string;
+  courseUuid: string;
+  thumbnailImage: string;
+}
+
+const CourseEndView: React.FC<CourseEndViewProps> = ({ courseName, orgslug, courseUuid, thumbnailImage }) => {
+  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>
+      
+      <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>
+        
+        <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>
+    </div>
+  );
+};
+
+export default CourseEndView;