Changes

src/components/reviews/ConsultingHistory.tsx

@@ -0,0 +1,243 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Video, Calendar, Clock, Star, MessageSquare, CheckCircle } from 'lucide-react';
+import { format } from 'date-fns';
+import { id } from 'date-fns/locale';
+import { ReviewModal } from './ReviewModal';
+
+interface ConsultingSlot {
+  id: string;
+  date: string;
+  start_time: string;
+  end_time: string;
+  status: string;
+  topic_category: string | null;
+  meet_link: string | null;
+  order_id: string | null;
+}
+
+interface ConsultingHistoryProps {
+  userId: string;
+}
+
+export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
+  const [slots, setSlots] = useState<ConsultingSlot[]>([]);
+  const [reviewedSlotIds, setReviewedSlotIds] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(true);
+  const [reviewModal, setReviewModal] = useState<{
+    open: boolean;
+    slotId: string;
+    orderId: string | null;
+    label: string;
+  }>({ open: false, slotId: '', orderId: null, label: '' });
+
+  useEffect(() => {
+    fetchData();
+  }, [userId]);
+
+  const fetchData = async () => {
+    // Fetch consulting slots
+    const { data: slotsData } = await supabase
+      .from('consulting_slots')
+      .select('id, date, start_time, end_time, status, topic_category, meet_link, order_id')
+      .eq('user_id', userId)
+      .order('date', { ascending: false });
+
+    if (slotsData) {
+      setSlots(slotsData);
+
+      // Check which slots have been reviewed
+      // We use a combination approach: check for consulting reviews by this user
+      // For consulting, we'll track by order_id since that's how we link them
+      const orderIds = slotsData
+        .filter(s => s.order_id)
+        .map(s => s.order_id as string);
+
+      if (orderIds.length > 0) {
+        const { data: reviewsData } = await supabase
+          .from('reviews')
+          .select('order_id')
+          .eq('user_id', userId)
+          .eq('type', 'consulting')
+          .in('order_id', orderIds);
+
+        if (reviewsData) {
+          const reviewedOrderIds = new Set(reviewsData.map(r => r.order_id));
+          // Map order_id back to slot_id
+          const reviewedIds = new Set(
+            slotsData
+              .filter(s => s.order_id && reviewedOrderIds.has(s.order_id))
+              .map(s => s.id)
+          );
+          setReviewedSlotIds(reviewedIds);
+        }
+      }
+    }
+
+    setLoading(false);
+  };
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'done':
+        return <Badge className="bg-accent">Selesai</Badge>;
+      case 'confirmed':
+        return <Badge className="bg-primary">Terkonfirmasi</Badge>;
+      case 'pending_payment':
+        return <Badge className="bg-secondary">Menunggu Pembayaran</Badge>;
+      case 'cancelled':
+        return <Badge variant="destructive">Dibatalkan</Badge>;
+      default:
+        return <Badge variant="outline">{status}</Badge>;
+    }
+  };
+
+  const openReviewModal = (slot: ConsultingSlot) => {
+    const dateLabel = format(new Date(slot.date), 'd MMMM yyyy', { locale: id });
+    const timeLabel = `${slot.start_time.substring(0, 5)} - ${slot.end_time.substring(0, 5)}`;
+    setReviewModal({
+      open: true,
+      slotId: slot.id,
+      orderId: slot.order_id,
+      label: `Sesi konsultasi ${dateLabel}, ${timeLabel}`,
+    });
+  };
+
+  const handleReviewSuccess = () => {
+    // Mark this slot as reviewed
+    setReviewedSlotIds(prev => new Set([...prev, reviewModal.slotId]));
+  };
+
+  const doneSlots = slots.filter(s => s.status === 'done');
+  const upcomingSlots = slots.filter(s => s.status === 'confirmed');
+
+  if (loading) {
+    return (
+      <Card className="border-2 border-border">
+        <CardHeader>
+          <Skeleton className="h-6 w-40" />
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {[...Array(2)].map((_, i) => (
+              <Skeleton key={i} className="h-20 w-full" />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (slots.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <Card className="border-2 border-border">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Video className="w-5 h-5" />
+            Riwayat Konsultasi
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Upcoming sessions */}
+          {upcomingSlots.length > 0 && (
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium text-muted-foreground">Sesi Mendatang</h4>
+              {upcomingSlots.map((slot) => (
+                <div key={slot.id} className="flex items-center justify-between p-3 border-2 border-border bg-muted/30">
+                  <div className="flex items-center gap-3">
+                    <Calendar className="w-4 h-4 text-muted-foreground" />
+                    <div>
+                      <p className="font-medium">
+                        {format(new Date(slot.date), 'd MMM yyyy', { locale: id })}
+                      </p>
+                      <p className="text-sm text-muted-foreground flex items-center gap-1">
+                        <Clock className="w-3 h-3" />
+                        {slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)}
+                        {slot.topic_category && ` • ${slot.topic_category}`}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {getStatusBadge(slot.status)}
+                    {slot.meet_link && (
+                      <Button asChild size="sm" variant="outline" className="border-2">
+                        <a href={slot.meet_link} target="_blank" rel="noopener noreferrer">
+                          Join
+                        </a>
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Completed sessions */}
+          {doneSlots.length > 0 && (
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium text-muted-foreground">Sesi Selesai</h4>
+              {doneSlots.map((slot) => {
+                const hasReviewed = reviewedSlotIds.has(slot.id);
+                return (
+                  <div key={slot.id} className="flex items-center justify-between p-3 border-2 border-border">
+                    <div className="flex items-center gap-3">
+                      <Calendar className="w-4 h-4 text-muted-foreground" />
+                      <div>
+                        <p className="font-medium">
+                          {format(new Date(slot.date), 'd MMM yyyy', { locale: id })}
+                        </p>
+                        <p className="text-sm text-muted-foreground flex items-center gap-1">
+                          <Clock className="w-3 h-3" />
+                          {slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)}
+                          {slot.topic_category && ` • ${slot.topic_category}`}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {getStatusBadge(slot.status)}
+                      {hasReviewed ? (
+                        <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                          <CheckCircle className="w-4 h-4 text-accent" />
+                          Sudah diulas
+                        </span>
+                      ) : (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => openReviewModal(slot)}
+                          className="border-2"
+                        >
+                          <Star className="w-4 h-4 mr-1" />
+                          Beri ulasan
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <ReviewModal
+        open={reviewModal.open}
+        onOpenChange={(open) => setReviewModal({ ...reviewModal, open })}
+        userId={userId}
+        productId={null}
+        orderId={reviewModal.orderId}
+        type="consulting"
+        contextLabel={reviewModal.label}
+        onSuccess={handleReviewSuccess}
+      />
+    </>
+  );
+}

src/components/reviews/ReviewModal.tsx

@@ -0,0 +1,149 @@
+import { useState } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { toast } from '@/hooks/use-toast';
+import { Star, X } from 'lucide-react';
+
+interface ReviewModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  userId: string;
+  productId?: string | null;
+  orderId?: string | null;
+  type: 'consulting' | 'bootcamp' | 'webinar' | 'general';
+  contextLabel?: string;
+  onSuccess?: () => void;
+}
+
+export function ReviewModal({
+  open,
+  onOpenChange,
+  userId,
+  productId,
+  orderId,
+  type,
+  contextLabel,
+  onSuccess,
+}: ReviewModalProps) {
+  const [rating, setRating] = useState(0);
+  const [hoverRating, setHoverRating] = useState(0);
+  const [title, setTitle] = useState('');
+  const [body, setBody] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = async () => {
+    if (rating === 0) {
+      toast({ title: 'Error', description: 'Pilih rating terlebih dahulu', variant: 'destructive' });
+      return;
+    }
+    if (!title.trim()) {
+      toast({ title: 'Error', description: 'Judul tidak boleh kosong', variant: 'destructive' });
+      return;
+    }
+
+    setSubmitting(true);
+    const { error } = await supabase.from('reviews').insert({
+      user_id: userId,
+      product_id: productId || null,
+      order_id: orderId || null,
+      type,
+      rating,
+      title: title.trim(),
+      body: body.trim() || null,
+      is_approved: false,
+    });
+
+    if (error) {
+      console.error('Review submit error:', error);
+      toast({ title: 'Error', description: 'Gagal mengirim ulasan', variant: 'destructive' });
+    } else {
+      toast({ title: 'Berhasil', description: 'Terima kasih! Ulasan Anda akan ditinjau oleh admin.' });
+      // Reset form
+      setRating(0);
+      setTitle('');
+      setBody('');
+      onOpenChange(false);
+      onSuccess?.();
+    }
+    setSubmitting(false);
+  };
+
+  const handleClose = () => {
+    if (!submitting) {
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Beri Ulasan</DialogTitle>
+          {contextLabel && (
+            <DialogDescription>{contextLabel}</DialogDescription>
+          )}
+        </DialogHeader>
+
+        <div className="space-y-4 py-2">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Rating</label>
+            <div className="flex gap-1">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => setRating(i)}
+                  onMouseEnter={() => setHoverRating(i)}
+                  onMouseLeave={() => setHoverRating(0)}
+                  className="p-1 transition-transform hover:scale-110"
+                >
+                  <Star
+                    className={`w-8 h-8 ${
+                      i <= (hoverRating || rating)
+                        ? 'fill-primary text-primary'
+                        : 'text-muted-foreground'
+                    }`}
+                  />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Judul</label>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Ringkasan pengalaman Anda"
+              className="border-2"
+              maxLength={100}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Ulasan (Opsional)</label>
+            <Textarea
+              value={body}
+              onChange={(e) => setBody(e.target.value)}
+              placeholder="Ceritakan pengalaman Anda..."
+              className="border-2 min-h-[100px]"
+              maxLength={500}
+            />
+          </div>
+        </div>
+
+        <div className="flex gap-2 justify-end">
+          <Button variant="outline" onClick={handleClose} disabled={submitting} className="border-2">
+            Batal
+          </Button>
+          <Button onClick={handleSubmit} disabled={submitting}>
+            {submitting ? 'Mengirim...' : 'Kirim Ulasan'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/pages/Bootcamp.tsx

@@ -7,9 +7,10 @@ import { Card, CardContent } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { toast } from '@/hooks/use-toast';
 import { formatDuration } from '@/lib/format';
-import { ChevronLeft, ChevronRight, Check, Play, BookOpen, Clock, Menu, X } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Check, Play, BookOpen, Clock, Menu, Star, CheckCircle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { ReviewModal } from '@/components/reviews/ReviewModal';
 
 interface Product {
   id: string;
@@ -51,6 +52,8 @@ export default function Bootcamp() {
   const [loading, setLoading] = useState(true);
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [hasReviewed, setHasReviewed] = useState(false);
+  const [reviewModalOpen, setReviewModalOpen] = useState(false);
 
   useEffect(() => {
     if (!authLoading && !user) {
@@ -129,6 +132,16 @@ export default function Bootcamp() {
       setProgress(progressData);
     }
 
+    // Check if user has already reviewed this bootcamp
+    const { data: reviewData } = await supabase
+      .from('reviews')
+      .select('id')
+      .eq('user_id', user!.id)
+      .eq('product_id', productData.id)
+      .limit(1);
+    
+    setHasReviewed(!!(reviewData && reviewData.length > 0));
+
     setLoading(false);
   };
 
@@ -212,6 +225,7 @@ export default function Bootcamp() {
 
   const completedCount = progress.length;
   const totalLessons = modules.reduce((sum, m) => sum + m.lessons.length, 0);
+  const isBootcampCompleted = totalLessons > 0 && completedCount >= totalLessons;
 
   const renderSidebarContent = () => (
     <div className="p-4">
@@ -411,6 +425,31 @@ export default function Bootcamp() {
                   <ChevronRight className="w-4 h-4 ml-2" />
                 </Button>
               </div>
+
+              {/* Bootcamp completion review prompt */}
+              {isBootcampCompleted && (
+                <Card className="border-2 border-primary/20 mt-6">
+                  <CardContent className="py-4">
+                    {hasReviewed ? (
+                      <div className="flex items-center gap-2 text-muted-foreground">
+                        <CheckCircle className="w-5 h-5 text-accent" />
+                        <span>Terima kasih atas ulasan Anda (menunggu moderasi)</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center justify-between gap-4 flex-wrap">
+                        <div>
+                          <p className="font-medium">🎉 Selamat menyelesaikan bootcamp!</p>
+                          <p className="text-sm text-muted-foreground">Bagikan pengalaman Anda</p>
+                        </div>
+                        <Button onClick={() => setReviewModalOpen(true)} variant="outline" className="border-2">
+                          <Star className="w-4 h-4 mr-2" />
+                          Beri ulasan
+                        </Button>
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              )}
             </div>
           ) : (
             <div className="flex items-center justify-center h-full">
@@ -426,6 +465,19 @@ export default function Bootcamp() {
           )}
         </main>
       </div>
+
+      {/* Review Modal */}
+      {user && product && (
+        <ReviewModal
+          open={reviewModalOpen}
+          onOpenChange={setReviewModalOpen}
+          userId={user.id}
+          productId={product.id}
+          type="bootcamp"
+          contextLabel={product.title}
+          onSuccess={() => setHasReviewed(true)}
+        />
+      )}
     </div>
   );
 }

src/pages/ProductDetail.tsx

@@ -10,8 +10,10 @@ 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 } from 'lucide-react';
+import { Video, Calendar, BookOpen, Play, Clock, ChevronDown, ChevronRight, Star, CheckCircle } from 'lucide-react';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { ReviewModal } from '@/components/reviews/ReviewModal';
+import { ProductReviews } from '@/components/reviews/ProductReviews';
 
 interface Product {
   id: string;
@@ -24,6 +26,8 @@ interface Product {
   sale_price: number | null;
   meeting_link: string | null;
   recording_url: string | null;
+  event_start: string | null;
+  duration_minutes: number | null;
   created_at: string;
 }
 
@@ -50,6 +54,8 @@ export default function ProductDetail() {
   const [hasAccess, setHasAccess] = useState(false);
   const [checkingAccess, setCheckingAccess] = useState(true);
   const [expandedModules, setExpandedModules] = useState<Set<string>>(new Set());
+  const [hasReviewed, setHasReviewed] = useState(false);
+  const [reviewModalOpen, setReviewModalOpen] = useState(false);
   const { addItem, items } = useCart();
   const { user } = useAuth();
 
@@ -60,6 +66,7 @@ export default function ProductDetail() {
   useEffect(() => {
     if (product && user) {
       checkUserAccess();
+      checkUserReview();
     } else {
       setCheckingAccess(false);
     }
@@ -153,6 +160,28 @@ export default function ProductDetail() {
     setCheckingAccess(false);
   };
 
+  const checkUserReview = async () => {
+    if (!product || !user) return;
+    
+    const { data } = await supabase
+      .from('reviews')
+      .select('id')
+      .eq('user_id', user.id)
+      .eq('product_id', product.id)
+      .limit(1);
+    
+    setHasReviewed(!!(data && data.length > 0));
+  };
+
+  // Check if webinar has ended (eligible for review)
+  const isWebinarEnded = () => {
+    if (!product || product.type !== 'webinar' || !product.event_start) return false;
+    const eventStart = new Date(product.event_start);
+    const durationMs = (product.duration_minutes || 60) * 60 * 1000;
+    const eventEnd = new Date(eventStart.getTime() + durationMs);
+    return new Date() > eventEnd;
+  };
+
   const handleAddToCart = () => {
     if (!product) return;
     addItem({ id: product.id, title: product.title, price: product.price, sale_price: product.sale_price, type: product.type });
@@ -358,11 +387,54 @@ export default function ProductDetail() {
             </Card>
           )}
 
-          <div className="flex gap-4">
+          <div className="flex gap-4 flex-wrap">
             {renderActionButtons()}
           </div>
+
+          {/* Webinar review prompt */}
+          {hasAccess && product.type === 'webinar' && isWebinarEnded() && (
+            <Card className="border-2 border-primary/20 mt-6">
+              <CardContent className="py-4">
+                {hasReviewed ? (
+                  <div className="flex items-center gap-2 text-muted-foreground">
+                    <CheckCircle className="w-5 h-5 text-accent" />
+                    <span>Terima kasih atas ulasan Anda (menunggu moderasi)</span>
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-between gap-4 flex-wrap">
+                    <div>
+                      <p className="font-medium">Bagaimana pengalaman webinar ini?</p>
+                      <p className="text-sm text-muted-foreground">Ulasan Anda membantu peserta lain</p>
+                    </div>
+                    <Button onClick={() => setReviewModalOpen(true)} variant="outline" className="border-2">
+                      <Star className="w-4 h-4 mr-2" />
+                      Beri ulasan webinar ini
+                    </Button>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Product reviews section */}
+          <div className="mt-8">
+            <ProductReviews productId={product.id} />
+          </div>
         </div>
       </div>
+
+      {/* Review Modal */}
+      {user && (
+        <ReviewModal
+          open={reviewModalOpen}
+          onOpenChange={setReviewModalOpen}
+          userId={user.id}
+          productId={product.id}
+          type="webinar"
+          contextLabel={product.title}
+          onSuccess={() => setHasReviewed(true)}
+        />
+      )}
     </AppLayout>
   );
 }

src/pages/admin/AdminReviews.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { supabase } from "@/integrations/supabase/client";
+import { AppLayout } from "@/components/AppLayout";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -8,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Skeleton } from "@/components/ui/skeleton";
 import { toast } from "@/hooks/use-toast";
 import { Star, Check, X, Edit, Trash2 } from "lucide-react";
 
@@ -37,6 +39,7 @@ export default function AdminReviews() {
   }, []);
 
   const fetchReviews = async () => {
+    setLoading(true);
     const { data, error } = await supabase
       .from("reviews")
       .select(`
@@ -47,7 +50,9 @@ export default function AdminReviews() {
       .order("created_at", { ascending: false });
 
     if (error) {
+      console.error("Fetch reviews error:", error);
       toast({ title: "Error", description: "Gagal mengambil data ulasan", variant: "destructive" });
+      setReviews([]);
     } else {
       setReviews((data as unknown as Review[]) || []);
     }
@@ -110,6 +115,8 @@ export default function AdminReviews() {
     return true;
   });
 
+  const pendingReviews = reviews.filter((r) => !r.is_approved);
+
   const renderStars = (rating: number) => (
     <div className="flex gap-0.5">
       {[1, 2, 3, 4, 5].map((i) => (
@@ -132,194 +139,225 @@ export default function AdminReviews() {
   };
 
   if (loading) {
-    return <div className="p-6">Loading...</div>;
+    return (
+      <AppLayout>
+        <div className="container mx-auto px-4 py-8">
+          <Skeleton className="h-10 w-48 mb-4" />
+          <Skeleton className="h-6 w-64 mb-8" />
+          <div className="space-y-4">
+            {[...Array(3)].map((_, i) => (
+              <Skeleton key={i} className="h-32 w-full" />
+            ))}
+          </div>
+        </div>
+      </AppLayout>
+    );
   }
 
   return (
-    <div className="space-y-6">
+    <AppLayout>
-      <div>
+      <div className="container mx-auto px-4 py-8 space-y-6">
-        <h1 className="text-3xl font-bold">Ulasan</h1>
+        <div>
-        <p className="text-muted-foreground">Kelola ulasan dari member</p>
+          <h1 className="text-3xl font-bold">Ulasan</h1>
-      </div>
+          <p className="text-muted-foreground">Kelola ulasan dari member</p>
+        </div>
 
-      <div className="flex gap-4">
+        <div className="flex gap-4 flex-wrap">
-        <Select value={filter.type} onValueChange={(v) => setFilter({ ...filter, type: v })}>
+          <Select value={filter.type} onValueChange={(v) => setFilter({ ...filter, type: v })}>
-          <SelectTrigger className="w-40 border-2">
+            <SelectTrigger className="w-40 border-2">
-            <SelectValue placeholder="Tipe" />
+              <SelectValue placeholder="Tipe" />
-          </SelectTrigger>
+            </SelectTrigger>
-          <SelectContent>
+            <SelectContent>
-            <SelectItem value="all">Semua Tipe</SelectItem>
+              <SelectItem value="all">Semua Tipe</SelectItem>
-            <SelectItem value="consulting">Konsultasi</SelectItem>
+              <SelectItem value="consulting">Konsultasi</SelectItem>
-            <SelectItem value="bootcamp">Bootcamp</SelectItem>
+              <SelectItem value="bootcamp">Bootcamp</SelectItem>
-            <SelectItem value="webinar">Webinar</SelectItem>
+              <SelectItem value="webinar">Webinar</SelectItem>
-            <SelectItem value="general">Umum</SelectItem>
+              <SelectItem value="general">Umum</SelectItem>
-          </SelectContent>
+            </SelectContent>
-        </Select>
+          </Select>
 
-        <Select value={filter.status} onValueChange={(v) => setFilter({ ...filter, status: v })}>
+          <Select value={filter.status} onValueChange={(v) => setFilter({ ...filter, status: v })}>
-          <SelectTrigger className="w-40 border-2">
+            <SelectTrigger className="w-40 border-2">
-            <SelectValue placeholder="Status" />
+              <SelectValue placeholder="Status" />
-          </SelectTrigger>
+            </SelectTrigger>
-          <SelectContent>
+            <SelectContent>
-            <SelectItem value="all">Semua Status</SelectItem>
+              <SelectItem value="all">Semua Status</SelectItem>
-            <SelectItem value="pending">Menunggu</SelectItem>
+              <SelectItem value="pending">Menunggu</SelectItem>
-            <SelectItem value="approved">Disetujui</SelectItem>
+              <SelectItem value="approved">Disetujui</SelectItem>
-          </SelectContent>
+            </SelectContent>
-        </Select>
+          </Select>
-      </div>
+        </div>
 
-      <Tabs defaultValue="list">
+        <Tabs defaultValue="list">
-        <TabsList>
+          <TabsList>
-          <TabsTrigger value="list">Daftar ({filteredReviews.length})</TabsTrigger>
+            <TabsTrigger value="list">Daftar ({filteredReviews.length})</TabsTrigger>
-          <TabsTrigger value="pending">
+            <TabsTrigger value="pending">
-            Menunggu ({reviews.filter((r) => !r.is_approved).length})
+              Menunggu ({pendingReviews.length})
-          </TabsTrigger>
+            </TabsTrigger>
-        </TabsList>
+          </TabsList>
 
-        <TabsContent value="list" className="mt-4">
+          <TabsContent value="list" className="mt-4">
-          <div className="space-y-4">
+            <div className="space-y-4">
-            {filteredReviews.length === 0 ? (
+              {filteredReviews.length === 0 ? (
-              <Card className="border-2 border-border">
+                <Card className="border-2 border-border">
-                <CardContent className="py-8 text-center text-muted-foreground">
+                  <CardContent className="py-12 text-center">
-                  Tidak ada ulasan
+                    <Star className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
-                </CardContent>
+                    <h3 className="text-lg font-semibold mb-2">Belum ada ulasan</h3>
-              </Card>
+                    <p className="text-muted-foreground">
-            ) : (
+                      Ulasan dari member akan muncul di sini setelah mereka mengirimkan ulasan.
-              filteredReviews.map((review) => (
+                    </p>
-                <Card key={review.id} className="border-2 border-border">
-                  <CardContent className="py-4">
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="flex-1 space-y-2">
-                        <div className="flex items-center gap-2 flex-wrap">
-                          {renderStars(review.rating)}
-                          <Badge variant="outline">{getTypeLabel(review.type)}</Badge>
-                          <Badge className={review.is_approved ? "bg-accent" : "bg-secondary"}>
-                            {review.is_approved ? "Disetujui" : "Menunggu"}
-                          </Badge>
-                        </div>
-                        <h3 className="font-bold">{review.title}</h3>
-                        <p className="text-muted-foreground text-sm">{review.body}</p>
-                        <div className="text-xs text-muted-foreground">
-                          <span>{review.profiles?.full_name || review.profiles?.email || "Unknown"}</span>
-                          {review.products && <span> • {review.products.title}</span>}
-                          <span> • {new Date(review.created_at).toLocaleDateString("id-ID")}</span>
-                        </div>
-                      </div>
-                      <div className="flex gap-2">
-                        {!review.is_approved && (
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="border-2"
-                            onClick={() => handleApprove(review.id, true)}
-                          >
-                            <Check className="w-4 h-4" />
-                          </Button>
-                        )}
-                        {review.is_approved && (
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            className="border-2"
-                            onClick={() => handleApprove(review.id, false)}
-                          >
-                            <X className="w-4 h-4" />
-                          </Button>
-                        )}
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          className="border-2"
-                          onClick={() => handleEdit(review)}
-                        >
-                          <Edit className="w-4 h-4" />
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          className="border-2 text-destructive hover:text-destructive"
-                          onClick={() => handleDelete(review.id)}
-                        >
-                          <Trash2 className="w-4 h-4" />
-                        </Button>
-                      </div>
-                    </div>
                   </CardContent>
                 </Card>
-              ))
+              ) : (
-            )}
+                filteredReviews.map((review) => (
-          </div>
+                  <Card key={review.id} className="border-2 border-border">
-        </TabsContent>
+                    <CardContent className="py-4">
-
+                      <div className="flex items-start justify-between gap-4">
-        <TabsContent value="pending" className="mt-4">
+                        <div className="flex-1 space-y-2">
-          <div className="space-y-4">
+                          <div className="flex items-center gap-2 flex-wrap">
-            {reviews.filter((r) => !r.is_approved).map((review) => (
+                            {renderStars(review.rating)}
-              <Card key={review.id} className="border-2 border-primary/20">
+                            <Badge variant="outline">{getTypeLabel(review.type)}</Badge>
-                <CardContent className="py-4">
+                            <Badge className={review.is_approved ? "bg-accent" : "bg-secondary"}>
-                  <div className="flex items-start justify-between gap-4">
+                              {review.is_approved ? "Disetujui" : "Menunggu"}
-                    <div className="flex-1 space-y-2">
+                            </Badge>
-                      <div className="flex items-center gap-2">
+                          </div>
-                        {renderStars(review.rating)}
+                          <h3 className="font-bold">{review.title}</h3>
-                        <Badge variant="outline">{getTypeLabel(review.type)}</Badge>
+                          {review.body && <p className="text-muted-foreground text-sm">{review.body}</p>}
+                          <div className="text-xs text-muted-foreground">
+                            <span>{review.profiles?.full_name || review.profiles?.email || "Unknown"}</span>
+                            {review.products && <span> • {review.products.title}</span>}
+                            <span> • {new Date(review.created_at).toLocaleDateString("id-ID")}</span>
+                          </div>
+                        </div>
+                        <div className="flex gap-2 flex-shrink-0">
+                          {!review.is_approved && (
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              className="border-2"
+                              onClick={() => handleApprove(review.id, true)}
+                            >
+                              <Check className="w-4 h-4" />
+                            </Button>
+                          )}
+                          {review.is_approved && (
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              className="border-2"
+                              onClick={() => handleApprove(review.id, false)}
+                            >
+                              <X className="w-4 h-4" />
+                            </Button>
+                          )}
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="border-2"
+                            onClick={() => handleEdit(review)}
+                          >
+                            <Edit className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="border-2 text-destructive hover:text-destructive"
+                            onClick={() => handleDelete(review.id)}
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
                       </div>
-                      <h3 className="font-bold">{review.title}</h3>
+                    </CardContent>
-                      <p className="text-muted-foreground text-sm">{review.body}</p>
+                  </Card>
-                      <div className="text-xs text-muted-foreground">
+                ))
-                        {review.profiles?.full_name || review.profiles?.email}
+              )}
-                      </div>
+            </div>
-                    </div>
+          </TabsContent>
-                    <div className="flex gap-2">
-                      <Button size="sm" onClick={() => handleApprove(review.id, true)}>
-                        <Check className="w-4 h-4 mr-1" /> Setujui
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        className="border-2 text-destructive"
-                        onClick={() => handleDelete(review.id)}
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </TabsContent>
-      </Tabs>
 
-      <Dialog open={!!editReview} onOpenChange={() => setEditReview(null)}>
+          <TabsContent value="pending" className="mt-4">
-        <DialogContent>
+            <div className="space-y-4">
-          <DialogHeader>
+              {pendingReviews.length === 0 ? (
-            <DialogTitle>Edit Ulasan</DialogTitle>
+                <Card className="border-2 border-border">
-          </DialogHeader>
+                  <CardContent className="py-12 text-center">
-          <div className="space-y-4">
+                    <Check className="w-12 h-12 mx-auto mb-4 text-accent" />
-            <div className="space-y-2">
+                    <h3 className="text-lg font-semibold mb-2">Semua ulasan sudah dimoderasi</h3>
-              <label className="text-sm font-medium">Judul</label>
+                    <p className="text-muted-foreground">
-              <Input
+                      Tidak ada ulasan yang menunggu persetujuan.
-                value={editForm.title}
+                    </p>
-                onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
+                  </CardContent>
-                className="border-2"
+                </Card>
-              />
+              ) : (
+                pendingReviews.map((review) => (
+                  <Card key={review.id} className="border-2 border-primary/20">
+                    <CardContent className="py-4">
+                      <div className="flex items-start justify-between gap-4">
+                        <div className="flex-1 space-y-2">
+                          <div className="flex items-center gap-2">
+                            {renderStars(review.rating)}
+                            <Badge variant="outline">{getTypeLabel(review.type)}</Badge>
+                          </div>
+                          <h3 className="font-bold">{review.title}</h3>
+                          {review.body && <p className="text-muted-foreground text-sm">{review.body}</p>}
+                          <div className="text-xs text-muted-foreground">
+                            {review.profiles?.full_name || review.profiles?.email}
+                            {review.products && <span> • {review.products.title}</span>}
+                          </div>
+                        </div>
+                        <div className="flex gap-2 flex-shrink-0">
+                          <Button size="sm" onClick={() => handleApprove(review.id, true)}>
+                            <Check className="w-4 h-4 mr-1" /> Setujui
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="border-2 text-destructive"
+                            onClick={() => handleDelete(review.id)}
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))
+              )}
             </div>
-            <div className="space-y-2">
+          </TabsContent>
-              <label className="text-sm font-medium">Isi</label>
+        </Tabs>
-              <Textarea
+
-                value={editForm.body}
+        <Dialog open={!!editReview} onOpenChange={() => setEditReview(null)}>
-                onChange={(e) => setEditForm({ ...editForm, body: e.target.value })}
+          <DialogContent>
-                className="border-2 min-h-[100px]"
+            <DialogHeader>
-              />
+              <DialogTitle>Edit Ulasan</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Judul</label>
+                <Input
+                  value={editForm.title}
+                  onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
+                  className="border-2"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Isi</label>
+                <Textarea
+                  value={editForm.body}
+                  onChange={(e) => setEditForm({ ...editForm, body: e.target.value })}
+                  className="border-2 min-h-[100px]"
+                />
+              </div>
             </div>
-          </div>
+            <DialogFooter>
-          <DialogFooter>
+              <Button variant="outline" onClick={() => setEditReview(null)}>
-            <Button variant="outline" onClick={() => setEditReview(null)}>
+                Batal
-              Batal
+              </Button>
-            </Button>
+              <Button onClick={handleSaveEdit}>Simpan</Button>
-            <Button onClick={handleSaveEdit}>Simpan</Button>
+            </DialogFooter>
-          </DialogFooter>
+          </DialogContent>
-        </DialogContent>
+        </Dialog>
-      </Dialog>
+      </div>
-    </div>
+    </AppLayout>
   );
 }

src/pages/member/MemberDashboard.tsx

@@ -10,6 +10,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { formatIDR } from "@/lib/format";
 import { Video, Calendar, BookOpen, ArrowRight, Package, Receipt, ShoppingBag } from "lucide-react";
 import { WhatsAppBanner } from "@/components/WhatsAppBanner";
+import { ConsultingHistory } from "@/components/reviews/ConsultingHistory";
 
 interface UserAccess {
   id: string;
@@ -235,6 +236,11 @@ export default function MemberDashboard() {
             </Card>
           </div>
         )}
+
+        {/* Consulting History with Review Prompts */}
+        <div className="mt-8">
+          <ConsultingHistory userId={user!.id} />
+        </div>
       </div>
     </AppLayout>
   );