Changes

2025-12-19 01:54:13 +00:00
parent 278f709201
commit ff877266b0
13 changed files with 2540 additions and 231 deletions
--- a/src/pages/ProductDetail.tsx
+++ b/src/pages/ProductDetail.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, Link } from 'react-router-dom';
 import { supabase } from '@/integrations/supabase/client';
-import { Layout } from '@/components/Layout';
+import { AppLayout } from '@/components/AppLayout';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -9,7 +9,9 @@ import { useCart } from '@/contexts/CartContext';
 import { useAuth } from '@/hooks/useAuth';
 import { toast } from '@/hooks/use-toast';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Video, Calendar, BookOpen } from 'lucide-react';
+import { formatIDR, formatDuration } from '@/lib/format';
+import { Video, Calendar, BookOpen, Play, Clock, ChevronDown, ChevronRight } from 'lucide-react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';

 interface Product {
  id: string;
@@ -25,13 +27,29 @@ interface Product {
  created_at: string;
 }

+interface Module {
+  id: string;
+  title: string;
+  position: number;
+  lessons: Lesson[];
+}
+
+interface Lesson {
+  id: string;
+  title: string;
+  duration_seconds: number | null;
+  position: number;
+}
+
 export default function ProductDetail() {
  const { slug } = useParams<{ slug: string }>();
  const navigate = useNavigate();
  const [product, setProduct] = useState<Product | null>(null);
+  const [modules, setModules] = useState<Module[]>([]);
  const [loading, setLoading] = useState(true);
  const [hasAccess, setHasAccess] = useState(false);
  const [checkingAccess, setCheckingAccess] = useState(true);
+  const [expandedModules, setExpandedModules] = useState<Set<string>>(new Set());
  const { addItem, items } = useCart();
  const { user } = useAuth();

@@ -47,6 +65,12 @@ export default function ProductDetail() {
    }
  }, [product, user]);

+  useEffect(() => {
+    if (product?.type === 'bootcamp') {
+      fetchCurriculum();
+    }
+  }, [product]);
+
  const fetchProduct = async () => {
    const { data, error } = await supabase
      .from('products')
@@ -56,13 +80,45 @@ export default function ProductDetail() {
      .maybeSingle();

    if (error || !data) {
-      toast({ title: 'Error', description: 'Product not found', variant: 'destructive' });
+      toast({ title: 'Error', description: 'Produk tidak ditemukan', variant: 'destructive' });
    } else {
      setProduct(data);
    }
    setLoading(false);
  };

+  const fetchCurriculum = async () => {
+    if (!product) return;
+    
+    const { data: modulesData } = await supabase
+      .from('bootcamp_modules')
+      .select(`
+        id,
+        title,
+        position,
+        bootcamp_lessons (
+          id,
+          title,
+          duration_seconds,
+          position
+        )
+      `)
+      .eq('product_id', product.id)
+      .order('position');
+
+    if (modulesData) {
+      const sorted = modulesData.map(m => ({
+        ...m,
+        lessons: (m.bootcamp_lessons as Lesson[]).sort((a, b) => a.position - b.position)
+      }));
+      setModules(sorted);
+      // Expand first module by default
+      if (sorted.length > 0) {
+        setExpandedModules(new Set([sorted[0].id]));
+      }
+    }
+  };
+
  const checkUserAccess = async () => {
    if (!product || !user) return;
    const { data } = await supabase
@@ -78,7 +134,7 @@ export default function ProductDetail() {
  const handleAddToCart = () => {
    if (!product) return;
    addItem({ id: product.id, title: product.title, price: product.price, sale_price: product.sale_price, type: product.type });
-    toast({ title: 'Added to cart', description: `${product.title} has been added to your cart` });
+    toast({ title: 'Ditambahkan', description: `${product.title} sudah ditambahkan ke keranjang` });
  };

  const isInCart = product ? items.some(item => item.id === product.id) : false;
@@ -91,53 +147,200 @@ export default function ProductDetail() {
    return url;
  };

+  const totalDuration = modules.reduce((total, m) => 
+    total + m.lessons.reduce((sum, l) => sum + (l.duration_seconds || 0), 0), 0
+  );
+  const totalLessons = modules.reduce((sum, m) => sum + m.lessons.length, 0);
+
+  const toggleModule = (id: string) => {
+    const newSet = new Set(expandedModules);
+    if (newSet.has(id)) newSet.delete(id);
+    else newSet.add(id);
+    setExpandedModules(newSet);
+  };
+
  if (loading) {
-    return (<Layout><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></Layout>);
+    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>);
  }

  if (!product) {
-    return (<Layout><div className="container mx-auto px-4 py-8 text-center"><h1 className="text-2xl font-bold">Product not found</h1></div></Layout>);
+    return (<AppLayout><div className="container mx-auto px-4 py-8 text-center"><h1 className="text-2xl font-bold">Produk tidak ditemukan</h1></div></AppLayout>);
  }

  const renderActionButtons = () => {
    if (checkingAccess) return <Skeleton className="h-10 w-40" />;
+    
    if (!hasAccess) {
-      return (<Button onClick={handleAddToCart} disabled={isInCart} size="lg" className="shadow-sm">{isInCart ? 'Already in Cart' : 'Add to Cart'}</Button>);
+      return (
+        <Button onClick={handleAddToCart} disabled={isInCart} size="lg" className="shadow-sm">
+          {isInCart ? 'Sudah di Keranjang' : 'Tambah ke Keranjang'}
+        </Button>
+      );
    }
+
    switch (product.type) {
      case 'consulting':
-        return (<Button asChild size="lg" className="shadow-sm"><a href={product.meeting_link || '#'} target="_blank" rel="noopener noreferrer"><Calendar className="w-4 h-4 mr-2" />Book Consulting Session</a></Button>);
+        return (
+          <Button asChild size="lg" className="shadow-sm">
+            <a href={product.meeting_link || '#'} target="_blank" rel="noopener noreferrer">
+              <Calendar className="w-4 h-4 mr-2" />
+              Jadwalkan Konsultasi
+            </a>
+          </Button>
+        );
      case 'webinar':
        if (product.recording_url) {
-          return (<div className="aspect-video bg-muted rounded-lg overflow-hidden"><iframe src={getVideoEmbed(product.recording_url)} className="w-full h-full" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen /></div>);
+          return (
+            <div className="space-y-4">
+              <div className="aspect-video bg-muted rounded-none overflow-hidden border-2 border-border">
+                <iframe
+                  src={getVideoEmbed(product.recording_url)}
+                  className="w-full h-full"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                />
+              </div>
+              <Button asChild variant="outline" className="border-2">
+                <a href={product.recording_url} target="_blank" rel="noopener noreferrer">
+                  <Video className="w-4 h-4 mr-2" />
+                  Tonton Rekaman
+                </a>
+              </Button>
+            </div>
+          );
        }
-        return product.meeting_link ? (<Button asChild size="lg" className="shadow-sm"><a href={product.meeting_link} target="_blank" rel="noopener noreferrer"><Video className="w-4 h-4 mr-2" />Join Live Webinar</a></Button>) : <Badge variant="secondary">Recording coming soon</Badge>;
+        return product.meeting_link ? (
+          <Button asChild size="lg" className="shadow-sm">
+            <a href={product.meeting_link} target="_blank" rel="noopener noreferrer">
+              <Video className="w-4 h-4 mr-2" />
+              Gabung Webinar
+            </a>
+          </Button>
+        ) : <Badge className="bg-secondary">Rekaman segera tersedia</Badge>;
      case 'bootcamp':
-        return (<Button onClick={() => navigate(`/bootcamp/${product.slug}`)} size="lg" className="shadow-sm"><BookOpen className="w-4 h-4 mr-2" />Start Bootcamp</Button>);
+        return (
+          <Button onClick={() => navigate(`/bootcamp/${product.slug}`)} size="lg" className="shadow-sm">
+            <BookOpen className="w-4 h-4 mr-2" />
+            Mulai Bootcamp
+          </Button>
+        );
      default:
        return null;
    }
  };

-  return (
-    <Layout>
-      <div className="container mx-auto px-4 py-8">
-        <div className="max-w-4xl mx-auto">
-          <div className="flex items-start justify-between mb-6">
-            <div>
-              <h1 className="text-4xl font-bold mb-2">{product.title}</h1>
-              <Badge className="bg-secondary capitalize">{product.type}</Badge>
-              {hasAccess && <Badge className="bg-accent ml-2">You have access</Badge>}
-            </div>
-            <div className="text-right">
-              {product.sale_price ? (<div><span className="text-3xl font-bold">${product.sale_price}</span><span className="text-muted-foreground line-through ml-2">${product.price}</span></div>) : (<span className="text-3xl font-bold">${product.price}</span>)}
+  const renderCurriculumPreview = () => {
+    if (product.type !== 'bootcamp' || modules.length === 0) return null;
+
+    return (
+      <Card className="border-2 border-border mb-6">
+        <CardContent className="pt-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-xl font-bold">Kurikulum</h3>
+            <div className="flex items-center gap-4 text-sm text-muted-foreground">
+              <span className="flex items-center gap-1">
+                <BookOpen className="w-4 h-4" />
+                {totalLessons} Pelajaran
+              </span>
+              {totalDuration > 0 && (
+                <span className="flex items-center gap-1">
+                  <Clock className="w-4 h-4" />
+                  {formatDuration(totalDuration)}
+                </span>
+              )}
            </div>
          </div>
-          <p className="text-lg text-muted-foreground mb-6">{product.description}</p>
-          <Card className="border-2 border-border mb-6"><CardContent className="pt-6"><div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: product.content || '<p>No content available</p>' }} /></CardContent></Card>
-          {renderActionButtons()}
+          <div className="space-y-2">
+            {modules.map((module) => (
+              <Collapsible
+                key={module.id}
+                open={expandedModules.has(module.id)}
+                onOpenChange={() => toggleModule(module.id)}
+              >
+                <CollapsibleTrigger className="flex items-center justify-between w-full p-3 bg-muted hover:bg-accent transition-colors text-left">
+                  <span className="font-medium">{module.title}</span>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-muted-foreground">{module.lessons.length} pelajaran</span>
+                    {expandedModules.has(module.id) ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+                  </div>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <div className="border-l-2 border-border ml-4 pl-4 py-2 space-y-2">
+                    {module.lessons.map((lesson) => (
+                      <div key={lesson.id} className="flex items-center justify-between py-1 text-sm">
+                        <div className="flex items-center gap-2">
+                          <Play className="w-3 h-3 text-muted-foreground" />
+                          <span>{lesson.title}</span>
+                        </div>
+                        {lesson.duration_seconds && (
+                          <span className="text-muted-foreground">{formatDuration(lesson.duration_seconds)}</span>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  };
+
+  return (
+    <AppLayout>
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-4xl mx-auto">
+          <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
+            <div>
+              <h1 className="text-4xl font-bold mb-2">{product.title}</h1>
+              <div className="flex items-center gap-2">
+                <Badge className="bg-secondary capitalize">{product.type}</Badge>
+                {hasAccess && <Badge className="bg-accent">Anda memiliki akses</Badge>}
+              </div>
+            </div>
+            <div className="text-right">
+              {product.sale_price ? (
+                <div>
+                  <span className="text-3xl font-bold">{formatIDR(product.sale_price)}</span>
+                  <span className="text-muted-foreground line-through ml-2">{formatIDR(product.price)}</span>
+                </div>
+              ) : (
+                <span className="text-3xl font-bold">{formatIDR(product.price)}</span>
+              )}
+              {product.type === 'bootcamp' && totalDuration > 0 && (
+                <p className="text-sm text-muted-foreground mt-1">
+                  Total: {formatDuration(totalDuration)} waktu belajar
+                </p>
+              )}
+            </div>
+          </div>
+
+          {product.description && (
+            <div 
+              className="prose max-w-none mb-6 text-muted-foreground"
+              dangerouslySetInnerHTML={{ __html: product.description }}
+            />
+          )}
+
+          {renderCurriculumPreview()}
+
+          {product.content && (
+            <Card className="border-2 border-border mb-6">
+              <CardContent className="pt-6">
+                <div 
+                  className="prose max-w-none"
+                  dangerouslySetInnerHTML={{ __html: product.content }}
+                />
+              </CardContent>
+            </Card>
+          )}
+
+          <div className="flex gap-4">
+            {renderActionButtons()}
+          </div>
        </div>
      </div>
-    </Layout>
+    </AppLayout>
  );
-}
+}