Add collapsible timeline accordion to bootcamp curriculum preview

- Added state for expanded lesson chapters (expandedLessonChapters)
- Created toggleLessonChapters helper function
- Fixed formatChapterTime to support hours (1:11:11 instead of 111:11)
- Wrapped lesson timeline in Collapsible component with Clock icon
- Timeline header shows "N timeline items" count
- All timelines expanded by default on page load
- Users can collapse/expand to focus on one lesson at a time
- ChevronDown/ChevronRight icons indicate expanded/collapsed state

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/pages/ProductDetail.tsx

@@ -68,6 +68,7 @@ export default function ProductDetail() {
   const [hasAccess, setHasAccess] = useState(false);
   const [checkingAccess, setCheckingAccess] = useState(true);
   const [expandedModules, setExpandedModules] = useState<Set<string>>(new Set());
+  const [expandedLessonChapters, setExpandedLessonChapters] = useState<Set<string>>(new Set());
   const [userReview, setUserReview] = useState<UserReview | null>(null);
   const [reviewModalOpen, setReviewModalOpen] = useState(false);
   const { addItem, items } = useCart();
@@ -138,6 +139,13 @@ export default function ProductDetail() {
       if (sorted.length > 0) {
         setExpandedModules(new Set([sorted[0].id]));
       }
+
+      // Expand all lessons with chapters by default
+      const lessonsWithChapters = sorted
+        .flatMap(m => m.lessons)
+        .filter(l => l.chapters && l.chapters.length > 0)
+        .map(l => l.id);
+      setExpandedLessonChapters(new Set(lessonsWithChapters));
     }
   };
 
@@ -222,8 +230,13 @@ export default function ProductDetail() {
   const isInCart = product ? items.some(item => item.id === product.id) : false;
 
   const formatChapterTime = (seconds: number) => {
-    const mins = Math.floor(seconds / 60);
+    const hours = Math.floor(seconds / 3600);
+    const mins = Math.floor((seconds % 3600) / 60);
     const secs = Math.floor(seconds % 60);
+
+    if (hours > 0) {
+      return `${hours}:${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    }
     return `${mins}:${String(secs).padStart(2, '0')}`;
   };
 
@@ -283,6 +296,16 @@ export default function ProductDetail() {
     setExpandedModules(newSet);
   };
 
+  const toggleLessonChapters = (lessonId: string) => {
+    const newSet = new Set(expandedLessonChapters);
+    if (newSet.has(lessonId)) {
+      newSet.delete(lessonId);
+    } else {
+      newSet.add(lessonId);
+    }
+    setExpandedLessonChapters(newSet);
+  };
+
   if (loading) {
     return (<AppLayout><div className="container mx-auto px-4 py-8"><Skeleton className="h-10 w-1/2 mb-4" /><Skeleton className="h-6 w-1/4 mb-8" /><Skeleton className="h-64 w-full" /></div></AppLayout>);
   }
@@ -421,21 +444,39 @@ export default function ProductDetail() {
 
                         {/* Lesson chapters (if any) */}
                         {lesson.chapters && lesson.chapters.length > 0 && (
-                          <div className="ml-5 space-y-1">
+                          <Collapsible
-                            {lesson.chapters.map((chapter, chapterIndex) => (
+                            open={expandedLessonChapters.has(lesson.id)}
-                              <div
+                            onOpenChange={() => toggleLessonChapters(lesson.id)}
-                                key={chapterIndex}
+                          >
-                                className={`flex items-start gap-2 py-1 px-2 text-xs text-muted-foreground rounded transition-colors cursor-not-allowed opacity-60${isLastTimelineItem(lesson.chapters.length, chapterIndex) ? ' border-b-2 border-[#dedede] rounded-none' : ''}`}
+                            <CollapsibleTrigger className="flex items-center gap-2 ml-5 py-1 px-2 text-xs text-muted-foreground hover:bg-accent rounded transition-colors w-full">
-                                title="Beli bootcamp untuk mengakses materi ini"
+                              <Clock className="w-3 h-3" />
-                              >
+                              <span className="flex-1 text-left">
-                                <span className="font-mono w-10 text-center">
+                                {lesson.chapters.length} timeline item{lesson.chapters.length > 1 ? 's' : ''}
-                                  {formatChapterTime(chapter.time)}
+                              </span>
-                                </span>
+                              {expandedLessonChapters.has(lesson.id) ? (
-                                <span className="flex-1" dangerouslySetInnerHTML={{ __html: chapter.title }} />
+                                <ChevronDown className="w-3 h-3" />
-                                <Lock className="w-3 h-3 flex-shrink-0" />
+                              ) : (
+                                <ChevronRight className="w-3 h-3" />
+                              )}
+                            </CollapsibleTrigger>
+                            <CollapsibleContent>
+                              <div className="ml-5 space-y-1">
+                                {lesson.chapters.map((chapter, chapterIndex) => (
+                                  <div
+                                    key={chapterIndex}
+                                    className={`flex items-start gap-2 py-1 px-2 text-xs text-muted-foreground rounded transition-colors cursor-not-allowed opacity-60${isLastTimelineItem(lesson.chapters.length, chapterIndex) ? ' border-b-2 border-[#dedede] rounded-none' : ''}`}
+                                    title="Beli bootcamp untuk mengakses materi ini"
+                                  >
+                                    <span className="font-mono w-10 text-center">
+                                      {formatChapterTime(chapter.time)}
+                                    </span>
+                                    <span className="flex-1" dangerouslySetInnerHTML={{ __html: chapter.title }} />
+                                    <Lock className="w-3 h-3 flex-shrink-0" />
+                                  </div>
+                                ))}
                               </div>
-                            ))}
+                            </CollapsibleContent>
-                          </div>
+                          </Collapsible>
                         )}
                       </div>
                     ))}