Changes

2025-12-21 15:09:52 +00:00
parent d3f7544536
commit 8a1ccb7acc
6 changed files with 739 additions and 179 deletions
--- a/src/pages/Bootcamp.tsx
+++ b/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>
  );
 }
--- a/src/pages/ProductDetail.tsx
+++ b/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>
  );
 }
--- a/src/pages/admin/AdminReviews.tsx
+++ b/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">
-      <div>
-        <h1 className="text-3xl font-bold">Ulasan</h1>
-        <p className="text-muted-foreground">Kelola ulasan dari member</p>
-      </div>
+    <AppLayout>
+      <div className="container mx-auto px-4 py-8 space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold">Ulasan</h1>
+          <p className="text-muted-foreground">Kelola ulasan dari member</p>
+        </div>

-      <div className="flex gap-4">
-        <Select value={filter.type} onValueChange={(v) => setFilter({ ...filter, type: v })}>
-          <SelectTrigger className="w-40 border-2">
-            <SelectValue placeholder="Tipe" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">Semua Tipe</SelectItem>
-            <SelectItem value="consulting">Konsultasi</SelectItem>
-            <SelectItem value="bootcamp">Bootcamp</SelectItem>
-            <SelectItem value="webinar">Webinar</SelectItem>
-            <SelectItem value="general">Umum</SelectItem>
-          </SelectContent>
-        </Select>
+        <div className="flex gap-4 flex-wrap">
+          <Select value={filter.type} onValueChange={(v) => setFilter({ ...filter, type: v })}>
+            <SelectTrigger className="w-40 border-2">
+              <SelectValue placeholder="Tipe" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Semua Tipe</SelectItem>
+              <SelectItem value="consulting">Konsultasi</SelectItem>
+              <SelectItem value="bootcamp">Bootcamp</SelectItem>
+              <SelectItem value="webinar">Webinar</SelectItem>
+              <SelectItem value="general">Umum</SelectItem>
+            </SelectContent>
+          </Select>

-        <Select value={filter.status} onValueChange={(v) => setFilter({ ...filter, status: v })}>
-          <SelectTrigger className="w-40 border-2">
-            <SelectValue placeholder="Status" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">Semua Status</SelectItem>
-            <SelectItem value="pending">Menunggu</SelectItem>
-            <SelectItem value="approved">Disetujui</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
+          <Select value={filter.status} onValueChange={(v) => setFilter({ ...filter, status: v })}>
+            <SelectTrigger className="w-40 border-2">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Semua Status</SelectItem>
+              <SelectItem value="pending">Menunggu</SelectItem>
+              <SelectItem value="approved">Disetujui</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>

-      <Tabs defaultValue="list">
-        <TabsList>
-          <TabsTrigger value="list">Daftar ({filteredReviews.length})</TabsTrigger>
-          <TabsTrigger value="pending">
-            Menunggu ({reviews.filter((r) => !r.is_approved).length})
-          </TabsTrigger>
-        </TabsList>
+        <Tabs defaultValue="list">
+          <TabsList>
+            <TabsTrigger value="list">Daftar ({filteredReviews.length})</TabsTrigger>
+            <TabsTrigger value="pending">
+              Menunggu ({pendingReviews.length})
+            </TabsTrigger>
+          </TabsList>

-        <TabsContent value="list" className="mt-4">
-          <div className="space-y-4">
-            {filteredReviews.length === 0 ? (
-              <Card className="border-2 border-border">
-                <CardContent className="py-8 text-center text-muted-foreground">
-                  Tidak ada ulasan
-                </CardContent>
-              </Card>
-            ) : (
-              filteredReviews.map((review) => (
-                <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>
+          <TabsContent value="list" className="mt-4">
+            <div className="space-y-4">
+              {filteredReviews.length === 0 ? (
+                <Card className="border-2 border-border">
+                  <CardContent className="py-12 text-center">
+                    <Star className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
+                    <h3 className="text-lg font-semibold mb-2">Belum ada ulasan</h3>
+                    <p className="text-muted-foreground">
+                      Ulasan dari member akan muncul di sini setelah mereka mengirimkan ulasan.
+                    </p>
                  </CardContent>
                </Card>
-              ))
-            )}
-          </div>
-        </TabsContent>
-
-        <TabsContent value="pending" className="mt-4">
-          <div className="space-y-4">
-            {reviews.filter((r) => !r.is_approved).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>
+              ) : (
+                filteredReviews.map((review) => (
+                  <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>
+                          {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>
-                      <p className="text-muted-foreground text-sm">{review.body}</p>
-                      <div className="text-xs text-muted-foreground">
-                        {review.profiles?.full_name || review.profiles?.email}
-                      </div>
-                    </div>
-                    <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>
+                    </CardContent>
+                  </Card>
+                ))
+              )}
+            </div>
+          </TabsContent>

-      <Dialog open={!!editReview} onOpenChange={() => setEditReview(null)}>
-        <DialogContent>
-          <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"
-              />
+          <TabsContent value="pending" className="mt-4">
+            <div className="space-y-4">
+              {pendingReviews.length === 0 ? (
+                <Card className="border-2 border-border">
+                  <CardContent className="py-12 text-center">
+                    <Check className="w-12 h-12 mx-auto mb-4 text-accent" />
+                    <h3 className="text-lg font-semibold mb-2">Semua ulasan sudah dimoderasi</h3>
+                    <p className="text-muted-foreground">
+                      Tidak ada ulasan yang menunggu persetujuan.
+                    </p>
+                  </CardContent>
+                </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">
-              <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]"
-              />
+          </TabsContent>
+        </Tabs>
+
+        <Dialog open={!!editReview} onOpenChange={() => setEditReview(null)}>
+          <DialogContent>
+            <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>
-            <Button variant="outline" onClick={() => setEditReview(null)}>
-              Batal
-            </Button>
-            <Button onClick={handleSaveEdit}>Simpan</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setEditReview(null)}>
+                Batal
+              </Button>
+              <Button onClick={handleSaveEdit}>Simpan</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </AppLayout>
  );
 }
--- a/src/pages/member/MemberDashboard.tsx
+++ b/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>
  );