Add timeline clickability control and checkout auth modal

- Add clickable prop to TimelineChapters component for marketing vs purchased users
- Make timeline non-clickable in product preview pages with lock icons
- Keep timeline clickable in actual content pages (WebinarRecording, Bootcamp)
- Add inline auth modal in checkout with login/register tabs
- Replace "Login untuk Checkout" button with seamless auth flow
- Add form validation and error handling for auth forms

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

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

src/components/TimelineChapters.tsx

@@ -13,6 +13,7 @@ interface TimelineChaptersProps {
   onChapterClick?: (time: number) => void;
   currentTime?: number; // Current video playback time in seconds
   accentColor?: string;
+  clickable?: boolean; // Control whether chapters are clickable
 }
 
 export function TimelineChapters({
@@ -20,6 +21,7 @@ export function TimelineChapters({
   onChapterClick,
   currentTime = 0,
   accentColor = '#f97316',
+  clickable = true,
 }: TimelineChaptersProps) {
   // Format time in seconds to MM:SS or HH:MM:SS
   const formatTime = (seconds: number): string => {
@@ -63,10 +65,11 @@ export function TimelineChapters({
             return (
               <button
                 key={index}
-                onClick={() => onChapterClick && onChapterClick(chapter.time)}
+                onClick={() => clickable && onChapterClick && onChapterClick(chapter.time)}
+                disabled={!clickable}
                 className={`
                   w-full flex items-center gap-3 p-3 rounded-lg transition-all text-left
-                  hover:bg-muted cursor-pointer
+                  ${clickable ? 'hover:bg-muted cursor-pointer' : 'cursor-not-allowed opacity-75'}
                   ${active
                     ? `bg-primary/10 border-l-4`
                     : 'border-l-4 border-transparent'
@@ -77,7 +80,7 @@ export function TimelineChapters({
                     ? { borderColor: accentColor, backgroundColor: `${accentColor}10` }
                     : undefined
                 }
-                title={`Klik untuk lompat ke ${formatTime(chapter.time)}`}
+                title={clickable ? `Klik untuk lompat ke ${formatTime(chapter.time)}` : 'Belum membeli produk ini'}
               >
                 {/* Timestamp */}
                 <div className={`

src/pages/Checkout.tsx

@@ -6,6 +6,9 @@ import { useAuth } from "@/hooks/useAuth";
 import { supabase } from "@/integrations/supabase/client";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Input } from "@/components/ui/input";
 import { toast } from "@/hooks/use-toast";
 import { formatIDR } from "@/lib/format";
 import { Trash2, CreditCard, Loader2, QrCode } from "lucide-react";
@@ -27,6 +30,13 @@ export default function Checkout() {
   const [loading, setLoading] = useState(false);
   const [step, setStep] = useState<CheckoutStep>("cart");
 
+  // Auth modal state
+  const [authModalOpen, setAuthModalOpen] = useState(false);
+  const [authLoading, setAuthLoading] = useState(false);
+  const [authEmail, setAuthEmail] = useState("");
+  const [authPassword, setAuthPassword] = useState("");
+  const [authName, setAuthName] = useState("");
+
   const checkPaymentStatus = async (oid: string) => {
     const { data: order } = await supabase.from("orders").select("payment_status").eq("id", oid).single();
 
@@ -127,6 +137,62 @@ export default function Checkout() {
     toast({ title: "Info", description: "Status pembayaran diupdate otomatis" });
   };
 
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!authEmail || !authPassword) {
+      toast({ title: "Error", description: "Email dan password wajib diisi", variant: "destructive" });
+      return;
+    }
+
+    setAuthLoading(true);
+    const { error } = await signIn(authEmail, authPassword);
+
+    if (error) {
+      toast({
+        title: "Login gagal",
+        description: error.message || "Email atau password salah",
+        variant: "destructive",
+      });
+      setAuthLoading(false);
+    } else {
+      toast({ title: "Login berhasil", description: "Silakan lanjutkan pembayaran" });
+      setAuthModalOpen(false);
+      setAuthLoading(false);
+    }
+  };
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!authEmail || !authPassword || !authName) {
+      toast({ title: "Error", description: "Semua field wajib diisi", variant: "destructive" });
+      return;
+    }
+
+    if (authPassword.length < 6) {
+      toast({ title: "Error", description: "Password minimal 6 karakter", variant: "destructive" });
+      return;
+    }
+
+    setAuthLoading(true);
+    const { error, data } = await signUp(authEmail, authPassword, authName);
+
+    if (error) {
+      toast({
+        title: "Registrasi gagal",
+        description: error.message || "Gagal membuat akun",
+        variant: "destructive",
+      });
+      setAuthLoading(false);
+    } else {
+      toast({
+        title: "Registrasi berhasil",
+        description: "Silakan cek email untuk verifikasi akun Anda",
+      });
+      setAuthModalOpen(false);
+      setAuthLoading(false);
+    }
+  };
+
   return (
     <AppLayout>
       <div className="container mx-auto px-4 py-8">
@@ -192,21 +258,134 @@ export default function Checkout() {
                     <span className="font-bold">{formatIDR(total)}</span>
                   </div>
                   <div className="space-y-3 pt-2 border-t">
-                    <Button onClick={handleCheckout} className="w-full shadow-sm" disabled={loading}>
+                    {user ? (
-                      {loading ? (
+                      <Button onClick={handleCheckout} className="w-full shadow-sm" disabled={loading}>
-                        <>
+                        {loading ? (
-                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                          <>
-                          Memproses...
+                            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                        </>
+                            Memproses...
-                      ) : user ? (
+                          </>
-                        <>
+                        ) : (
-                          <CreditCard className="w-4 h-4 mr-2" />
+                          <>
-                          Bayar dengan QRIS
+                            <CreditCard className="w-4 h-4 mr-2" />
-                        </>
+                            Bayar dengan QRIS
-                      ) : (
+                          </>
-                        "Login untuk Checkout"
+                        )}
-                      )}
+                      </Button>
-                    </Button>
+                    ) : (
+                      <Dialog open={authModalOpen} onOpenChange={setAuthModalOpen}>
+                        <DialogTrigger asChild>
+                          <Button className="w-full shadow-sm">
+                            Login atau Daftar untuk Checkout
+                          </Button>
+                        </DialogTrigger>
+                        <DialogContent className="sm:max-w-md">
+                          <DialogHeader>
+                            <DialogTitle>Login atau Daftar</DialogTitle>
+                          </DialogHeader>
+                          <Tabs defaultValue="login" className="w-full">
+                            <TabsList className="grid w-full grid-cols-2">
+                              <TabsTrigger value="login">Login</TabsTrigger>
+                              <TabsTrigger value="register">Daftar</TabsTrigger>
+                            </TabsList>
+                            <TabsContent value="login">
+                              <form onSubmit={handleLogin} className="space-y-4 mt-4">
+                                <div className="space-y-2">
+                                  <label htmlFor="login-email" className="text-sm font-medium">
+                                    Email
+                                  </label>
+                                  <Input
+                                    id="login-email"
+                                    type="email"
+                                    placeholder="nama@email.com"
+                                    value={authEmail}
+                                    onChange={(e) => setAuthEmail(e.target.value)}
+                                    required
+                                  />
+                                </div>
+                                <div className="space-y-2">
+                                  <label htmlFor="login-password" className="text-sm font-medium">
+                                    Password
+                                  </label>
+                                  <Input
+                                    id="login-password"
+                                    type="password"
+                                    placeholder="••••••••"
+                                    value={authPassword}
+                                    onChange={(e) => setAuthPassword(e.target.value)}
+                                    required
+                                  />
+                                </div>
+                                <Button type="submit" className="w-full" disabled={authLoading}>
+                                  {authLoading ? (
+                                    <>
+                                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                                      Memproses...
+                                    </>
+                                  ) : (
+                                    "Login"
+                                  )}
+                                </Button>
+                              </form>
+                            </TabsContent>
+                            <TabsContent value="register">
+                              <form onSubmit={handleRegister} className="space-y-4 mt-4">
+                                <div className="space-y-2">
+                                  <label htmlFor="register-name" className="text-sm font-medium">
+                                    Nama Lengkap
+                                  </label>
+                                  <Input
+                                    id="register-name"
+                                    type="text"
+                                    placeholder="John Doe"
+                                    value={authName}
+                                    onChange={(e) => setAuthName(e.target.value)}
+                                    required
+                                  />
+                                </div>
+                                <div className="space-y-2">
+                                  <label htmlFor="register-email" className="text-sm font-medium">
+                                    Email
+                                  </label>
+                                  <Input
+                                    id="register-email"
+                                    type="email"
+                                    placeholder="nama@email.com"
+                                    value={authEmail}
+                                    onChange={(e) => setAuthEmail(e.target.value)}
+                                    required
+                                  />
+                                </div>
+                                <div className="space-y-2">
+                                  <label htmlFor="register-password" className="text-sm font-medium">
+                                    Password (minimal 6 karakter)
+                                  </label>
+                                  <Input
+                                    id="register-password"
+                                    type="password"
+                                    placeholder="••••••••"
+                                    value={authPassword}
+                                    onChange={(e) => setAuthPassword(e.target.value)}
+                                    required
+                                    minLength={6}
+                                  />
+                                </div>
+                                <Button type="submit" className="w-full" disabled={authLoading}>
+                                  {authLoading ? (
+                                    <>
+                                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                                      Memproses...
+                                    </>
+                                  ) : (
+                                    "Daftar"
+                                  )}
+                                </Button>
+                              </form>
+                            </TabsContent>
+                          </Tabs>
+                        </DialogContent>
+                      </Dialog>
+                    )}
                     <div className="space-y-1">
                       <p className="text-xs text-muted-foreground text-center">Pembayaran aman dengan standar QRIS dari Bank Indonesia</p>
                       <p className="text-xs text-muted-foreground text-center">Diproses oleh mitra pembayaran terpercaya</p>

src/pages/ProductDetail.tsx

@@ -10,7 +10,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { toast } from '@/hooks/use-toast';
 import { Skeleton } from '@/components/ui/skeleton';
 import { formatIDR, formatDuration } from '@/lib/format';
-import { Video, Calendar, BookOpen, Play, Clock, ChevronDown, ChevronRight, Star, CheckCircle } from 'lucide-react';
+import { Video, Calendar, BookOpen, Play, Clock, ChevronDown, ChevronRight, Star, CheckCircle, Lock } from 'lucide-react';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { ReviewModal } from '@/components/reviews/ReviewModal';
 import { ProductReviews } from '@/components/reviews/ProductReviews';
@@ -238,18 +238,18 @@ export default function ProductDetail() {
             {product.chapters.map((chapter, index) => (
               <div
                 key={index}
-                className="flex items-center gap-3 p-3 rounded-lg hover:bg-accent transition-colors cursor-pointer group"
+                className="flex items-center gap-3 p-3 rounded-lg transition-colors cursor-not-allowed opacity-75"
-                onClick={() => product && navigate(`/webinar/${product.slug}`)}
+                title="Beli webinar untuk mengakses konten ini"
               >
                 <div className="flex-shrink-0 w-12 text-center">
-                  <span className="text-sm font-mono text-muted-foreground group-hover:text-primary">
+                  <span className="text-sm font-mono text-muted-foreground">
                     {formatChapterTime(chapter.time)}
                   </span>
                 </div>
                 <div className="flex-1">
                   <p className="text-sm font-medium">{chapter.title}</p>
                 </div>
-                <Play className="w-4 h-4 text-muted-foreground group-hover:text-primary flex-shrink-0" />
+                <Lock className="w-4 h-4 text-muted-foreground flex-shrink-0" />
               </div>
             ))}
           </div>
@@ -420,13 +420,14 @@ export default function ProductDetail() {
                             {lesson.chapters.map((chapter, chapterIndex) => (
                               <div
                                 key={chapterIndex}
-                                className="flex items-center gap-2 py-1 px-2 text-xs text-muted-foreground hover:bg-accent/50 rounded transition-colors cursor-pointer group"
+                                className="flex items-center gap-2 py-1 px-2 text-xs text-muted-foreground rounded transition-colors cursor-not-allowed opacity-60"
-                                onClick={() => product && navigate(`/bootcamp/${product.slug}`)}
+                                title="Beli bootcamp untuk mengakses materi ini"
                               >
-                                <span className="font-mono w-10 text-center group-hover:text-primary">
+                                <span className="font-mono w-10 text-center">
                                   {formatChapterTime(chapter.time)}
                                 </span>
-                                <span className="flex-1 group-hover:text-foreground">{chapter.title}</span>
+                                <span className="flex-1">{chapter.title}</span>
+                                <Lock className="w-3 h-3 flex-shrink-0" />
                               </div>
                             ))}
                           </div>

src/pages/WebinarRecording.tsx

@@ -49,6 +49,7 @@ export default function WebinarRecording() {
   const [loading, setLoading] = useState(true);
   const [currentTime, setCurrentTime] = useState(0);
   const [accentColor, setAccentColor] = useState<string>('');
+  const [hasPurchased, setHasPurchased] = useState(false);
   const [userReview, setUserReview] = useState<UserReview | null>(null);
   const [reviewModalOpen, setReviewModalOpen] = useState(false);
   const playerRef = useRef<VideoPlayerRef>(null);
@@ -113,7 +114,10 @@ export default function WebinarRecording() {
       order.order_items?.some((item: any) => item.product_id === productData.id)
     );
 
-    if (!hasDirectAccess && !hasPaidOrderAccess) {
+    const hasAccess = hasDirectAccess || hasPaidOrderAccess;
+    setHasPurchased(hasAccess);
+
+    if (!hasAccess) {
       toast({ title: 'Akses ditolak', description: 'Anda tidak memiliki akses ke webinar ini', variant: 'destructive' });
       navigate('/dashboard');
       return;