fix: preventDefault() forget

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>

src/modules/client/pages/CourseDetails.jsx

@@ -5,6 +5,7 @@ import api from "@/utils/api.util";
 import {
     House, Timer, Layers, GitBranch, Medal, CircleStar, LockIcon,
     SendHorizonal, CheckCheck, CheckCircle2, Clock, FileQuestion, ClipboardList,
+    Hourglass,
 } from "lucide-react";
 import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
 import { Badge } from "@/components/ui/badge";
@@ -521,6 +522,9 @@ const CourseDetails = () => {
     }, []);
 
     const hasCompleted = !!course?.is_completed;
+    // duration_seconds is derived from authored lesson content (see duration.util.js) —
+    // zero means no lesson content has been built yet, so the course isn't ready to take.
+    const contentNotReady = !course?.duration_seconds;
 
     useEffect(() => {
         if (!myTier) getMyTier();
@@ -595,12 +599,18 @@ const CourseDetails = () => {
                             <div className="w-full flex items-center justify-between">
                                 <AppBreadcrumb items={items} />
                                 <div id="call-to-action">
+                                    {contentNotReady ? (
+                                        <Badge variant="secondary" className="gap-1.5 text-xs">
+                                            <Hourglass className="size-3" /> Coming Soon
+                                        </Badge>
+                                    ) : (
                                         <Button onClick={() => navigate(`/course/${courseId}/unit`)}>
                                             {hasCompleted
                                                 ? <><CheckCheck /> Start Again</>
                                                 : <><SendHorizonal /> Start Learning</>
                                             }
                                         </Button>
+                                    )}
                                 </div>
                             </div>
                         </motion.div>
@@ -639,9 +649,15 @@ const CourseDetails = () => {
                                                 </div>
                                             )}
                                         </div>
+                                        <div ref={CourseBreadcrumb} className="w-fit">
+                                            {contentNotReady ? (
+                                                <div className="flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground">
+                                                    <Hourglass className="size-4 shrink-0" />
+                                                    This course is currently being prepared. Please check back later.
+                                                </div>
+                                            ) : (
                                                 <Button
                                                     className="w-fit"
-                                            ref={CourseBreadcrumb}
                                                     onClick={() => navigate(`/course/${courseId}/unit`)}
                                                 >
                                                     {hasCompleted
@@ -649,6 +665,8 @@ const CourseDetails = () => {
                                                         : <><SendHorizonal /> Proceed</>
                                                     }
                                                 </Button>
+                                            )}
+                                        </div>
                                     </div>
                                 </div>
                             </div>