feat: streamline course enrollment flow with status indicators and CTAs (#849)

Enrollment API Enhancements:
- Extended /api/enrollment/enroll to support GET requests
- Fetch user enrollments with course details
- Order enrollments by most recent first

Courses Index Page Updates:
- Added enrollment status fetching on page load
- Display "Enrolled" badge on enrolled verticals
- Dynamic button text ("Continue Learning" vs "View Vertical")
- Vertical-to-course mapping for enrollment checking
- Support for Software Engineering, Data Engineering, and AI Engineering verticals

Individual Course Page Updates (software-engineering.tsx):
- Fetch and display enrollment status
- Show "You're enrolled" badge when user is enrolled
- Display "Enroll in Vertical" CTA when not enrolled
- Placeholder enrollment handler (to be configured with actual course IDs)
- Real-time enrollment state management

Student Benefits:
- Clear visibility into enrollment status across all verticals
- Streamlined navigation with contextual CTAs
- Consistent enrollment experience across course pages
- Foundation for future enrollment automation

Author: jeromehardaway

public/fallback-cuEL-wxAt8lRMBzo05Qaf.js public/fallback-8u_CZnDJoQGp2wQUAuYFH.jspublic/fallback-cuEL-wxAt8lRMBzo05Qaf.js renamed to public/fallback-8u_CZnDJoQGp2wQUAuYFH.js

@@ -3,19 +3,51 @@ import { requireAuth, AuthenticatedRequest } from '@/lib/rbac';
 import prisma from '@/lib/prisma';
 
 /**
- * POST /api/enrollment/enroll
+ * GET /api/enrollment/enroll
+ * Fetch user's enrollments
  *
+ * POST /api/enrollment/enroll
  * Enroll user in a course
  * Body: { courseId: string }
  */
 export default requireAuth(async (req: AuthenticatedRequest, res: NextApiResponse) => {
+  const userId = req.user!.id;
+
+  // GET - Fetch user's enrollments
+  if (req.method === 'GET') {
+    try {
+      const enrollments = await prisma.enrollment.findMany({
+        where: { userId },
+        include: {
+          course: {
+            select: {
+              id: true,
+              title: true,
+              description: true,
+              imageUrl: true,
+              difficulty: true,
+              category: true,
+            },
+          },
+        },
+        orderBy: {
+          enrolledAt: 'desc',
+        },
+      });
+
+      return res.status(200).json({ enrollments });
+    } catch (error) {
+      console.error('Error fetching enrollments:', error);
+      return res.status(500).json({ error: 'Failed to fetch enrollments' });
+    }
+  }
+
   if (req.method !== 'POST') {
     return res.status(405).json({ error: 'Method not allowed' });
   }
 
   try {
     const { courseId } = req.body;
-    const userId = req.user!.id;
 
     // Validation
     if (!courseId) {

src/pages/api/enrollment/enroll.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import Layout01 from "@layout/layout-01";
 import type { GetServerSideProps, NextPage } from "next";
@@ -7,6 +7,13 @@ import { options } from "@/pages/api/auth/options";
 import SEO from "@components/seo/page-seo";
 import Breadcrumb from "@components/breadcrumb";
 
+type Enrollment = {
+    id: string;
+    courseId: string;
+    status: string;
+    progress: number;
+};
+
 type PageProps = {
     user: {
         id: string;
@@ -27,6 +34,49 @@ type PageWithLayout = NextPage<PageProps> & {
 };
 
 const CoursesIndex: PageWithLayout = ({ user }) => {
+    const [enrollments, setEnrollments] = useState<Enrollment[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        fetchEnrollments();
+    }, []);
+
+    const fetchEnrollments = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch("/api/enrollment/enroll");
+            const data = await response.json();
+
+            if (response.ok) {
+                setEnrollments(data.enrollments);
+            }
+        } catch (error) {
+            console.error("Error fetching enrollments:", error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Helper function to check if user is enrolled in a vertical
+    // Map vertical slugs to course titles for enrollment checking
+    const verticalCourseMap: Record<string, string[]> = {
+        "software-engineering": ["Software Engineering", "Full-Stack Development", "Web Development"],
+        "data-engineering": ["Data Engineering", "Data Science"],
+        "ai-engineering": ["AI Engineering", "Machine Learning", "Artificial Intelligence"],
+        "devops": ["DevOps", "Cloud Engineering"],
+        "web-development": ["Web Development", "Frontend Development"],
+    };
+
+    const isEnrolledInVertical = (verticalSlug: string): boolean => {
+        const matchingTitles = verticalCourseMap[verticalSlug] || [];
+        return enrollments.some(
+            (enrollment) =>
+                enrollment.status === "ACTIVE" &&
+                matchingTitles.some((title) =>
+                    enrollment.courseId.toLowerCase().includes(title.toLowerCase())
+                )
+        );
+    };
 
     return (
         <>
@@ -100,13 +150,21 @@ const CoursesIndex: PageWithLayout = ({ user }) => {
                     {/* Software Engineering Vertical */}
                     <div className="tw-group tw-overflow-hidden tw-rounded-xl tw-border tw-border-gray-100 tw-bg-white tw-shadow-lg tw-transition-all tw-duration-300 hover:tw-scale-105 hover:tw-shadow-2xl">
                         <div className="tw-bg-gradient-to-br tw-from-primary tw-via-primary tw-to-primary/80 tw-p-8">
-                            <div className="tw-mb-6 tw-flex tw-items-center">
-                                <div className="tw-rounded-lg tw-bg-white/20 tw-p-3">
-                                    <i className="fas fa-code tw-text-3xl tw-text-white" />
+                            <div className="tw-mb-6 tw-flex tw-items-center tw-justify-between">
+                                <div className="tw-flex tw-items-center">
+                                    <div className="tw-rounded-lg tw-bg-white/20 tw-p-3">
+                                        <i className="fas fa-code tw-text-3xl tw-text-white" />
+                                    </div>
+                                    <h3 className="tw-ml-4 tw-text-2xl tw-font-bold tw-text-white">
+                                        Software Engineering
+                                    </h3>
                                 </div>
-                                <h3 className="tw-ml-4 tw-text-2xl tw-font-bold tw-text-white">
-                                    Software Engineering
-                                </h3>
+                                {!loading && isEnrolledInVertical("software-engineering") && (
+                                    <span className="tw-rounded-full tw-bg-white/90 tw-px-3 tw-py-1 tw-text-xs tw-font-semibold tw-text-primary">
+                                        <i className="fas fa-check-circle tw-mr-1" />
+                                        Enrolled
+                                    </span>
+                                )}
                             </div>
                             <p className="tw-text-lg tw-leading-relaxed tw-text-white/95">
                                 Master full-stack development, system design, and software
@@ -143,7 +201,11 @@ const CoursesIndex: PageWithLayout = ({ user }) => {
                                 href="/courses/software-engineering"
                                 className="tw-group tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-lg tw-bg-primary tw-px-6 tw-py-4 tw-font-semibold tw-text-white tw-transition-all tw-duration-200 hover:tw-bg-primary/90 hover:tw-shadow-lg"
                             >
-                                <span>View Vertical</span>
+                                <span>
+                                    {!loading && isEnrolledInVertical("software-engineering")
+                                        ? "Continue Learning"
+                                        : "View Vertical"}
+                                </span>
                                 <i className="fas fa-arrow-right tw-ml-2 tw-transition-transform tw-duration-200 group-hover:tw-translate-x-1" />
                             </Link>
                         </div>
@@ -152,13 +214,21 @@ const CoursesIndex: PageWithLayout = ({ user }) => {
                     {/* Data Engineering Vertical */}
                     <div className="tw-group tw-overflow-hidden tw-rounded-xl tw-border tw-border-gray-100 tw-bg-white tw-shadow-lg tw-transition-all tw-duration-300 hover:tw-scale-105 hover:tw-shadow-2xl">
                         <div className="tw-bg-gradient-to-br tw-from-secondary tw-via-secondary tw-to-secondary/80 tw-p-8">
-                            <div className="tw-mb-6 tw-flex tw-items-center">
-                                <div className="tw-rounded-lg tw-bg-white/20 tw-p-3">
-                                    <i className="fas fa-database tw-text-3xl tw-text-white" />
+                            <div className="tw-mb-6 tw-flex tw-items-center tw-justify-between">
+                                <div className="tw-flex tw-items-center">
+                                    <div className="tw-rounded-lg tw-bg-white/20 tw-p-3">
+                                        <i className="fas fa-database tw-text-3xl tw-text-white" />
+                                    </div>
+                                    <h3 className="tw-ml-4 tw-text-2xl tw-font-bold tw-text-white">
+                                        Data Engineering
+                                    </h3>
                                 </div>
-                                <h3 className="tw-ml-4 tw-text-2xl tw-font-bold tw-text-white">
-                                    Data Engineering
-                                </h3>
+                                {!loading && isEnrolledInVertical("data-engineering") && (
+                                    <span className="tw-rounded-full tw-bg-white/90 tw-px-3 tw-py-1 tw-text-xs tw-font-semibold tw-text-secondary">
+                                        <i className="fas fa-check-circle tw-mr-1" />
+                                        Enrolled
+                                    </span>
+                                )}
                             </div>
                             <p className="tw-text-lg tw-leading-relaxed tw-text-white/95">
                                 Build data pipelines, work with big data technologies, and create
@@ -195,7 +265,11 @@ const CoursesIndex: PageWithLayout = ({ user }) => {
                                 href="/courses/data-engineering"
                                 className="tw-group tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-lg tw-bg-secondary tw-px-6 tw-py-4 tw-font-semibold tw-text-white tw-transition-all tw-duration-200 hover:tw-bg-secondary/90 hover:tw-shadow-lg"
                             >
-                                <span>View Vertical</span>
+                                <span>
+                                    {!loading && isEnrolledInVertical("data-engineering")
+                                        ? "Continue Learning"
+                                        : "View Vertical"}
+                                </span>
                                 <i className="fas fa-arrow-right tw-ml-2 tw-transition-transform tw-duration-200 group-hover:tw-translate-x-1" />
                             </Link>
                         </div>
@@ -204,13 +278,21 @@ const CoursesIndex: PageWithLayout = ({ user }) => {
                     {/* AI Engineering Vertical */}
                     <div className="tw-group tw-overflow-hidden tw-rounded-xl tw-border tw-border-gray-100 tw-bg-white tw-shadow-lg tw-transition-all tw-duration-300 hover:tw-scale-105 hover:tw-shadow-2xl">
                         <div className="tw-bg-gradient-to-br tw-from-success tw-via-success tw-to-success/80 tw-p-8">
-                            <div className="tw-mb-6 tw-flex tw-items-center">
-                                <div className="tw-rounded-lg tw-bg-white/20 tw-p-3">
-                                    <i className="fas fa-brain tw-text-3xl tw-text-white" />
+                            <div className="tw-mb-6 tw-flex tw-items-center tw-justify-between">
+                                <div className="tw-flex tw-items-center">
+                                    <div className="tw-rounded-lg tw-bg-white/20 tw-p-3">
+                                        <i className="fas fa-brain tw-text-3xl tw-text-white" />
+                                    </div>
+                                    <h3 className="tw-ml-4 tw-text-2xl tw-font-bold tw-text-white">
+                                        AI Engineering
+                                    </h3>
                                 </div>
-                                <h3 className="tw-ml-4 tw-text-2xl tw-font-bold tw-text-white">
-                                    AI Engineering
-                                </h3>
+                                {!loading && isEnrolledInVertical("ai-engineering") && (
+                                    <span className="tw-rounded-full tw-bg-white/90 tw-px-3 tw-py-1 tw-text-xs tw-font-semibold tw-text-success">
+                                        <i className="fas fa-check-circle tw-mr-1" />
+                                        Enrolled
+                                    </span>
+                                )}
                             </div>
                             <p className="tw-text-lg tw-leading-relaxed tw-text-white/95">
                                 Develop AI/ML models, work with neural networks, and build
@@ -247,7 +329,11 @@ const CoursesIndex: PageWithLayout = ({ user }) => {
                                 href="/courses/ai-engineering"
                                 className="tw-group tw-flex tw-w-full tw-items-center tw-justify-center tw-rounded-lg tw-bg-success tw-px-6 tw-py-4 tw-font-semibold tw-text-white tw-transition-all tw-duration-200 hover:tw-bg-success/90 hover:tw-shadow-lg"
                             >
-                                <span>View Vertical</span>
+                                <span>
+                                    {!loading && isEnrolledInVertical("ai-engineering")
+                                        ? "Continue Learning"
+                                        : "View Vertical"}
+                                </span>
                                 <i className="fas fa-arrow-right tw-ml-2 tw-transition-transform tw-duration-200 group-hover:tw-translate-x-1" />
                             </Link>
                         </div>

src/pages/courses/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import Layout01 from "@layout/layout-01";
 import type { GetServerSideProps, NextPage } from "next";
@@ -7,6 +7,13 @@ import { options } from "@/pages/api/auth/options";
 import SEO from "@components/seo/page-seo";
 import Breadcrumb from "@components/breadcrumb";
 
+type Enrollment = {
+    id: string;
+    courseId: string;
+    status: string;
+    progress: number;
+};
+
 type PageProps = {
     user: {
         id: string;
@@ -102,6 +109,47 @@ const modules = [
 
 const SoftwareEngineeringCourse: PageWithLayout = ({ user: _user }) => {
     const [selectedModule, setSelectedModule] = useState<number | null>(null);
+    const [enrollments, setEnrollments] = useState<Enrollment[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [enrollmentError, setEnrollmentError] = useState<string | null>(null);
+
+    useEffect(() => {
+        fetchEnrollments();
+    }, []);
+
+    const fetchEnrollments = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch("/api/enrollment/enroll");
+            const data = await response.json();
+
+            if (response.ok) {
+                setEnrollments(data.enrollments);
+            }
+        } catch (error) {
+            console.error("Error fetching enrollments:", error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Check if enrolled in Software Engineering vertical
+    const isEnrolled = (): boolean => {
+        const matchingTitles = ["Software Engineering", "Full-Stack Development", "Web Development"];
+        return enrollments.some(
+            (enrollment) =>
+                enrollment.status === "ACTIVE" &&
+                matchingTitles.some((title) =>
+                    enrollment.courseId.toLowerCase().includes(title.toLowerCase())
+                )
+        );
+    };
+
+    const handleEnroll = async () => {
+        // For now, this is a placeholder since we don't have a courseId
+        // In a real implementation, you'd need to map the vertical to an actual course
+        setEnrollmentError("Enrollment is not yet configured for this vertical. Please contact an administrator.");
+    };
 
     return (
         <>
@@ -134,6 +182,36 @@ const SoftwareEngineeringCourse: PageWithLayout = ({ user: _user }) => {
                         </p>
                     </div>
 
+                    {/* Enrollment Status/CTA */}
+                    {!loading && (
+                        <div className="tw-mb-8 tw-text-center">
+                            {isEnrolled() ? (
+                                <div className="tw-inline-flex tw-items-center tw-rounded-lg tw-bg-success/10 tw-px-6 tw-py-3 tw-text-success">
+                                    <i className="fas fa-check-circle tw-mr-2 tw-text-xl" />
+                                    <span className="tw-font-semibold">
+                                        You&apos;re enrolled in this vertical
+                                    </span>
+                                </div>
+                            ) : (
+                                <div>
+                                    <button
+                                        type="button"
+                                        onClick={handleEnroll}
+                                        className="tw-inline-flex tw-items-center tw-rounded-lg tw-bg-primary tw-px-8 tw-py-4 tw-text-lg tw-font-semibold tw-text-white tw-transition-all hover:tw-bg-primary/90 hover:tw-shadow-lg"
+                                    >
+                                        <i className="fas fa-user-plus tw-mr-2" />
+                                        Enroll in Vertical
+                                    </button>
+                                    {enrollmentError && (
+                                        <p className="tw-mt-3 tw-text-sm tw-text-red-600">
+                                            {enrollmentError}
+                                        </p>
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    )}
+
                     {/* Course Stats */}
                     <div className="tw-grid tw-grid-cols-2 tw-gap-6 tw-rounded-xl tw-bg-gradient-to-r tw-from-primary tw-to-primary/80 tw-p-8 tw-text-white md:tw-grid-cols-4">
                         <div className="tw-text-center">