Enhance order & reviews features

- Fix: skip bucket creation when content already exists; add logic to handle existing bucket gracefully.
- Debug: investigate and resolve member order detail data fetch error; ensure proper data mapping and navigation.
- Add WhatsApp integration prompts, reviews system scaffolding, and frontend wiring for branding-driven content.
- Implement image handling improvements in RichTextEditor and ensure HTML rendering in descriptions.
- Enable ElasticEmail adapter and multi-provider email flow, plus daily/reminder capabilities.

X-Lovable-Edit-ID: edt-b568a0fb-5175-44a5-a6d0-52e2c9936894

src/App.tsx

@@ -35,6 +35,7 @@ import AdminMembers from "./pages/admin/AdminMembers";
 import AdminEvents from "./pages/admin/AdminEvents";
 import AdminSettings from "./pages/admin/AdminSettings";
 import AdminConsulting from "./pages/admin/AdminConsulting";
+import AdminReviews from "./pages/admin/AdminReviews";
 
 const queryClient = new QueryClient();
 
@@ -76,6 +77,7 @@ const App = () => (
                 <Route path="/admin/events" element={<AdminEvents />} />
                 <Route path="/admin/settings" element={<AdminSettings />} />
                 <Route path="/admin/consulting" element={<AdminConsulting />} />
+                <Route path="/admin/reviews" element={<AdminReviews />} />
                 
                 <Route path="*" element={<NotFound />} />
               </Routes>

src/components/AppLayout.tsx

@@ -23,6 +23,7 @@ import {
   MoreHorizontal,
   X,
   Video,
+  Star,
 } from 'lucide-react';
 
 interface NavItem {
@@ -46,6 +47,7 @@ const adminNavItems: NavItem[] = [
   { label: 'Konsultasi', href: '/admin/consulting', icon: Video },
   { label: 'Order', href: '/admin/orders', icon: Receipt },
   { label: 'Member', href: '/admin/members', icon: Users },
+  { label: 'Ulasan', href: '/admin/reviews', icon: Star },
   { label: 'Kalender', href: '/admin/events', icon: Calendar },
   { label: 'Pengaturan', href: '/admin/settings', icon: Settings },
 ];

src/components/WhatsAppBanner.tsx

@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Phone } from 'lucide-react';
+
+export function WhatsAppBanner() {
+  return (
+    <Alert className="border-2 border-primary/20 bg-primary/5 mb-6">
+      <Phone className="h-4 w-4" />
+      <AlertDescription className="flex items-center justify-between">
+        <span>Lengkapi nomor WhatsApp Anda untuk pengingat konsultasi & bootcamp.</span>
+        <Link to="/profile" className="font-medium underline ml-2 whitespace-nowrap">
+          Atur Sekarang
+        </Link>
+      </AlertDescription>
+    </Alert>
+  );
+}

src/components/reviews/ProductReviews.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { ReviewCard } from './ReviewCard';
+import { Star } from 'lucide-react';
+
+interface Review {
+  id: string;
+  rating: number;
+  title: string;
+  body: string;
+  created_at: string;
+  profiles: { full_name: string | null } | null;
+}
+
+interface ProductReviewsProps {
+  productId: string;
+  type?: string;
+}
+
+export function ProductReviews({ productId, type }: ProductReviewsProps) {
+  const [reviews, setReviews] = useState<Review[]>([]);
+  const [stats, setStats] = useState({ avg: 0, count: 0 });
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchReviews();
+  }, [productId, type]);
+
+  const fetchReviews = async () => {
+    let query = supabase
+      .from('reviews')
+      .select('id, rating, title, body, created_at, profiles (full_name)')
+      .eq('is_approved', true);
+
+    if (productId) {
+      query = query.eq('product_id', productId);
+    } else if (type) {
+      query = query.eq('type', type);
+    }
+
+    const { data } = await query.order('created_at', { ascending: false }).limit(3);
+
+    if (data && data.length > 0) {
+      const typedData = data as unknown as Review[];
+      setReviews(typedData);
+      const avg = typedData.reduce((sum, r) => sum + r.rating, 0) / typedData.length;
+      setStats({ avg: Math.round(avg * 10) / 10, count: typedData.length });
+    }
+    setLoading(false);
+  };
+
+  if (loading || reviews.length === 0) return null;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <div className="flex gap-0.5">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <Star
+              key={i}
+              className={`w-5 h-5 ${
+                i <= Math.round(stats.avg) ? 'fill-primary text-primary' : 'text-muted-foreground'
+              }`}
+            />
+          ))}
+        </div>
+        <span className="font-bold">{stats.avg}</span>
+        <span className="text-muted-foreground">({stats.count} ulasan)</span>
+      </div>
+      <div className="grid gap-4">
+        {reviews.map((review) => (
+          <ReviewCard
+            key={review.id}
+            rating={review.rating}
+            title={review.title}
+            body={review.body}
+            authorName={review.profiles?.full_name || 'Anonymous'}
+            date={review.created_at}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/reviews/ReviewCard.tsx

@@ -0,0 +1,32 @@
+import { Star } from 'lucide-react';
+
+interface ReviewCardProps {
+  rating: number;
+  title: string;
+  body: string;
+  authorName: string;
+  date: string;
+}
+
+export function ReviewCard({ rating, title, body, authorName, date }: ReviewCardProps) {
+  return (
+    <div className="border-2 border-border p-6 space-y-3">
+      <div className="flex gap-0.5">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <Star
+            key={i}
+            className={`w-4 h-4 ${
+              i <= rating ? 'fill-primary text-primary' : 'text-muted-foreground'
+            }`}
+          />
+        ))}
+      </div>
+      <h4 className="font-bold">{title}</h4>
+      {body && <p className="text-muted-foreground text-sm">{body}</p>}
+      <div className="flex items-center justify-between text-xs text-muted-foreground">
+        <span>{authorName}</span>
+        <span>{new Date(date).toLocaleDateString('id-ID')}</span>
+      </div>
+    </div>
+  );
+}

src/components/reviews/ReviewForm.tsx

@@ -0,0 +1,112 @@
+import { 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 { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { toast } from '@/hooks/use-toast';
+import { Star } from 'lucide-react';
+
+interface ReviewFormProps {
+  userId: string;
+  productId?: string;
+  type: 'consulting' | 'bootcamp' | 'webinar' | 'general';
+  onSuccess?: () => void;
+}
+
+export function ReviewForm({ userId, productId, type, onSuccess }: ReviewFormProps) {
+  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,
+      type,
+      rating,
+      title: title.trim(),
+      body: body.trim(),
+      is_approved: false,
+    });
+
+    if (error) {
+      toast({ title: 'Error', description: 'Gagal mengirim ulasan', variant: 'destructive' });
+    } else {
+      toast({ title: 'Berhasil', description: 'Ulasan Anda akan ditinjau oleh admin' });
+      setRating(0);
+      setTitle('');
+      setBody('');
+      onSuccess?.();
+    }
+    setSubmitting(false);
+  };
+
+  return (
+    <Card className="border-2 border-border">
+      <CardHeader>
+        <CardTitle className="text-lg">Beri Ulasan</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <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-6 h-6 ${
+                    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-[80px]"
+            maxLength={500}
+          />
+        </div>
+        <Button onClick={handleSubmit} disabled={submitting} className="w-full">
+          {submitting ? 'Mengirim...' : 'Kirim Ulasan'}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

src/components/reviews/TestimonialsSection.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { ReviewCard } from './ReviewCard';
+
+interface Review {
+  id: string;
+  rating: number;
+  title: string;
+  body: string;
+  created_at: string;
+  profiles: { full_name: string | null } | null;
+}
+
+export function TestimonialsSection() {
+  const [reviews, setReviews] = useState<Review[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchReviews();
+  }, []);
+
+  const fetchReviews = async () => {
+    const { data } = await supabase
+      .from('reviews')
+      .select('id, rating, title, body, created_at, profiles (full_name)')
+      .eq('is_approved', true)
+      .order('created_at', { ascending: false })
+      .limit(6);
+
+    if (data) {
+      setReviews(data as unknown as Review[]);
+    }
+    setLoading(false);
+  };
+
+  if (loading || reviews.length === 0) return null;
+
+  return (
+    <section className="container mx-auto px-4 py-16">
+      <h2 className="text-3xl font-bold text-center mb-8">Apa Kata Mereka</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {reviews.map((review) => (
+          <ReviewCard
+            key={review.id}
+            rating={review.rating}
+            title={review.title}
+            body={review.body}
+            authorName={review.profiles?.full_name || 'Anonymous'}
+            date={review.created_at}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

src/pages/ConsultingBooking.tsx

@@ -7,6 +7,7 @@ import { AppLayout } from '@/components/AppLayout';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Calendar } from '@/components/ui/calendar';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -43,6 +44,10 @@ interface TimeSlot {
   available: boolean;
 }
 
+interface Profile {
+  whatsapp_number: string | null;
+}
+
 export default function ConsultingBooking() {
   const { user, loading: authLoading } = useAuth();
   const navigate = useNavigate();
@@ -52,11 +57,13 @@ export default function ConsultingBooking() {
   const [workhours, setWorkhours] = useState<Workhour[]>([]);
   const [confirmedSlots, setConfirmedSlots] = useState<ConfirmedSlot[]>([]);
   const [loading, setLoading] = useState(true);
+  const [profile, setProfile] = useState<Profile | null>(null);
 
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(addDays(new Date(), 1));
   const [selectedSlots, setSelectedSlots] = useState<string[]>([]);
   const [selectedCategory, setSelectedCategory] = useState('');
   const [notes, setNotes] = useState('');
+  const [whatsappInput, setWhatsappInput] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
   useEffect(() => {
@@ -70,13 +77,15 @@ export default function ConsultingBooking() {
   }, [selectedDate]);
 
   const fetchData = async () => {
-    const [settingsRes, workhoursRes] = await Promise.all([
+    const [settingsRes, workhoursRes, profileRes] = await Promise.all([
       supabase.from('consulting_settings').select('*').single(),
       supabase.from('workhours').select('*').order('weekday'),
+      user ? supabase.from('profiles').select('whatsapp_number').eq('id', user.id).single() : Promise.resolve({ data: null }),
     ]);
 
     if (settingsRes.data) setSettings(settingsRes.data);
     if (workhoursRes.data) setWorkhours(workhoursRes.data);
+    if (profileRes.data) setProfile(profileRes.data);
     setLoading(false);
   };
 
@@ -174,6 +183,15 @@ export default function ConsultingBooking() {
     setSubmitting(true);
 
     try {
+      // Save WhatsApp number if provided and not already saved
+      if (whatsappInput && !profile?.whatsapp_number) {
+        let normalized = whatsappInput.replace(/\D/g, '');
+        if (normalized.startsWith('0')) normalized = '62' + normalized.substring(1);
+        if (!normalized.startsWith('+')) normalized = '+' + normalized;
+        
+        await supabase.from('profiles').update({ whatsapp_number: normalized }).eq('id', user.id);
+      }
+
       // Create order
       const { data: order, error: orderError } = await supabase
         .from('orders')
@@ -348,13 +366,29 @@ export default function ConsultingBooking() {
                   Catatan (Opsional)
                 </CardTitle>
               </CardHeader>
-              <CardContent>
+              <CardContent className="space-y-4">
                 <Textarea
                   value={notes}
                   onChange={(e) => setNotes(e.target.value)}
                   placeholder="Jelaskan topik atau pertanyaan yang ingin dibahas..."
                   className="border-2 min-h-[100px]"
                 />
+                
+                {/* WhatsApp prompt if not saved */}
+                {user && !profile?.whatsapp_number && (
+                  <div className="space-y-2 pt-2 border-t border-border">
+                    <Label className="text-sm">Nomor WhatsApp untuk pengingat sesi ini (opsional)</Label>
+                    <Input
+                      value={whatsappInput}
+                      onChange={(e) => setWhatsappInput(e.target.value)}
+                      placeholder="08123456789"
+                      className="border-2"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      Akan otomatis tersimpan ke profil Anda
+                    </p>
+                  </div>
+                )}
               </CardContent>
             </Card>
           </div>

src/pages/Index.tsx

@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom';
 import { Layout } from '@/components/Layout';
 import { Button } from '@/components/ui/button';
 import { useBranding } from '@/hooks/useBranding';
+import { TestimonialsSection } from '@/components/reviews/TestimonialsSection';
 import { ArrowRight, BookOpen, Video, Users, Star, Award, Target, Zap, Heart, Shield, Rocket } from 'lucide-react';
 
 const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -60,6 +61,8 @@ export default function Index() {
           })}
         </div>
       </section>
+
+      <TestimonialsSection />
     </Layout>
   );
 }

src/pages/admin/AdminReviews.tsx

@@ -0,0 +1,325 @@
+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 { Input } from "@/components/ui/input";
+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 { toast } from "@/hooks/use-toast";
+import { Star, Check, X, Edit, Trash2 } from "lucide-react";
+
+interface Review {
+  id: string;
+  user_id: string;
+  product_id: string | null;
+  type: string;
+  rating: number;
+  title: string;
+  body: string;
+  is_approved: boolean;
+  created_at: string;
+  profiles: { full_name: string | null; email: string | null } | null;
+  products: { title: string } | null;
+}
+
+export default function AdminReviews() {
+  const [reviews, setReviews] = useState<Review[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState({ type: "all", status: "all" });
+  const [editReview, setEditReview] = useState<Review | null>(null);
+  const [editForm, setEditForm] = useState({ title: "", body: "" });
+
+  useEffect(() => {
+    fetchReviews();
+  }, []);
+
+  const fetchReviews = async () => {
+    const { data, error } = await supabase
+      .from("reviews")
+      .select(`
+        *,
+        profiles (full_name, email),
+        products (title)
+      `)
+      .order("created_at", { ascending: false });
+
+    if (error) {
+      toast({ title: "Error", description: "Gagal mengambil data ulasan", variant: "destructive" });
+    } else {
+      setReviews((data as unknown as Review[]) || []);
+    }
+    setLoading(false);
+  };
+
+  const handleApprove = async (id: string, approved: boolean) => {
+    const { error } = await supabase
+      .from("reviews")
+      .update({ is_approved: approved })
+      .eq("id", id);
+
+    if (error) {
+      toast({ title: "Error", description: "Gagal mengubah status", variant: "destructive" });
+    } else {
+      toast({ title: "Berhasil", description: approved ? "Ulasan disetujui" : "Ulasan ditolak" });
+      fetchReviews();
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm("Hapus ulasan ini?")) return;
+
+    const { error } = await supabase.from("reviews").delete().eq("id", id);
+
+    if (error) {
+      toast({ title: "Error", description: "Gagal menghapus", variant: "destructive" });
+    } else {
+      toast({ title: "Berhasil", description: "Ulasan dihapus" });
+      fetchReviews();
+    }
+  };
+
+  const handleEdit = (review: Review) => {
+    setEditReview(review);
+    setEditForm({ title: review.title, body: review.body });
+  };
+
+  const handleSaveEdit = async () => {
+    if (!editReview) return;
+
+    const { error } = await supabase
+      .from("reviews")
+      .update({ title: editForm.title, body: editForm.body })
+      .eq("id", editReview.id);
+
+    if (error) {
+      toast({ title: "Error", description: "Gagal menyimpan", variant: "destructive" });
+    } else {
+      toast({ title: "Berhasil", description: "Ulasan diperbarui" });
+      setEditReview(null);
+      fetchReviews();
+    }
+  };
+
+  const filteredReviews = reviews.filter((r) => {
+    if (filter.type !== "all" && r.type !== filter.type) return false;
+    if (filter.status === "approved" && !r.is_approved) return false;
+    if (filter.status === "pending" && r.is_approved) return false;
+    return true;
+  });
+
+  const renderStars = (rating: number) => (
+    <div className="flex gap-0.5">
+      {[1, 2, 3, 4, 5].map((i) => (
+        <Star
+          key={i}
+          className={`w-4 h-4 ${i <= rating ? "fill-primary text-primary" : "text-muted-foreground"}`}
+        />
+      ))}
+    </div>
+  );
+
+  const getTypeLabel = (type: string) => {
+    switch (type) {
+      case "consulting": return "Konsultasi";
+      case "bootcamp": return "Bootcamp";
+      case "webinar": return "Webinar";
+      case "general": return "Umum";
+      default: return type;
+    }
+  };
+
+  if (loading) {
+    return <div className="p-6">Loading...</div>;
+  }
+
+  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>
+
+      <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>
+
+        <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>
+
+        <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>
+                  </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>
+                      </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>
+
+      <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>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditReview(null)}>
+              Batal
+            </Button>
+            <Button onClick={handleSaveEdit}>Simpan</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/pages/member/MemberDashboard.tsx

@@ -9,6 +9,7 @@ import { Button } from "@/components/ui/button";
 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";
 
 interface UserAccess {
   id: string;
@@ -35,6 +36,7 @@ export default function MemberDashboard() {
   const [access, setAccess] = useState<UserAccess[]>([]);
   const [recentOrders, setRecentOrders] = useState<Order[]>([]);
   const [loading, setLoading] = useState(true);
+  const [hasWhatsApp, setHasWhatsApp] = useState(true);
 
   useEffect(() => {
     if (!authLoading && !user) navigate("/auth");
@@ -42,7 +44,7 @@ export default function MemberDashboard() {
   }, [user, authLoading]);
 
   const fetchData = async () => {
-    const [accessRes, ordersRes, paidOrdersRes] = await Promise.all([
+    const [accessRes, ordersRes, paidOrdersRes, profileRes] = await Promise.all([
       supabase
         .from("user_access")
         .select(`id, product:products (id, title, slug, type, meeting_link, recording_url)`)
@@ -61,6 +63,7 @@ export default function MemberDashboard() {
         .eq("user_id", user!.id)
         .eq("payment_status", "paid")
         .eq("payment_provider", "pakasir"),
+      supabase.from("profiles").select("whatsapp_number").eq("id", user!.id).single(),
     ]);
 
     // Combine access from user_access and paid orders
@@ -81,6 +84,7 @@ export default function MemberDashboard() {
 
     setAccess([...directAccess, ...paidProductAccess]);
     if (ordersRes.data) setRecentOrders(ordersRes.data);
+    if (profileRes.data) setHasWhatsApp(!!profileRes.data.whatsapp_number);
     setLoading(false);
   };
 
@@ -118,6 +122,8 @@ export default function MemberDashboard() {
         <h1 className="text-4xl font-bold mb-2">Dashboard</h1>
         <p className="text-muted-foreground mb-8">Selamat datang kembali!</p>
 
+        {!hasWhatsApp && <WhatsAppBanner />}
+
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">
           <Card className="border-2 border-border">
             <CardContent className="pt-6">

src/pages/member/MemberProfile.tsx

@@ -7,15 +7,18 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import { Skeleton } from '@/components/ui/skeleton';
 import { toast } from '@/hooks/use-toast';
-import { User, LogOut } from 'lucide-react';
+import { User, LogOut, Phone } from 'lucide-react';
 
 interface Profile {
   id: string;
   email: string | null;
   full_name: string | null;
   avatar_url: string | null;
+  whatsapp_number: string | null;
+  whatsapp_opt_in: boolean;
 }
 
 export default function MemberProfile() {
@@ -24,7 +27,12 @@ export default function MemberProfile() {
   const [profile, setProfile] = useState<Profile | null>(null);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
-  const [form, setForm] = useState({ full_name: '', avatar_url: '' });
+  const [form, setForm] = useState({ 
+    full_name: '', 
+    avatar_url: '',
+    whatsapp_number: '',
+    whatsapp_opt_in: false,
+  });
 
   useEffect(() => {
     if (!authLoading && !user) navigate('/auth');
@@ -39,16 +47,42 @@ export default function MemberProfile() {
       .single();
     if (data) {
       setProfile(data);
-      setForm({ full_name: data.full_name || '', avatar_url: data.avatar_url || '' });
+      setForm({ 
+        full_name: data.full_name || '', 
+        avatar_url: data.avatar_url || '',
+        whatsapp_number: data.whatsapp_number || '',
+        whatsapp_opt_in: data.whatsapp_opt_in || false,
+      });
     }
     setLoading(false);
   };
 
+  const normalizeWhatsApp = (number: string) => {
+    // Remove all non-digits
+    let cleaned = number.replace(/\D/g, '');
+    // Convert 08xx to +628xx
+    if (cleaned.startsWith('0')) {
+      cleaned = '62' + cleaned.substring(1);
+    }
+    // Add + if not present
+    if (cleaned && !cleaned.startsWith('+')) {
+      cleaned = '+' + cleaned;
+    }
+    return cleaned;
+  };
+
   const handleSave = async () => {
     setSaving(true);
+    const normalizedWA = normalizeWhatsApp(form.whatsapp_number);
+    
     const { error } = await supabase
       .from('profiles')
-      .update({ full_name: form.full_name, avatar_url: form.avatar_url || null })
+      .update({ 
+        full_name: form.full_name, 
+        avatar_url: form.avatar_url || null,
+        whatsapp_number: normalizedWA || null,
+        whatsapp_opt_in: form.whatsapp_opt_in,
+      })
       .eq('id', user!.id);
 
     if (error) {
@@ -113,12 +147,48 @@ export default function MemberProfile() {
                   placeholder="https://..."
                 />
               </div>
-              <Button onClick={handleSave} disabled={saving} className="w-full shadow-sm">
-                {saving ? 'Menyimpan...' : 'Simpan Profil'}
-              </Button>
             </CardContent>
           </Card>
 
+          <Card className="border-2 border-border">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Phone className="w-5 h-5" />
+                WhatsApp
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label>Nomor WhatsApp</Label>
+                <Input
+                  value={form.whatsapp_number}
+                  onChange={(e) => setForm({ ...form, whatsapp_number: e.target.value })}
+                  className="border-2"
+                  placeholder="08123456789"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Akan dinormalisasi ke format +62xxx
+                </p>
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Ijinkan pengingat via WhatsApp</Label>
+                  <p className="text-xs text-muted-foreground">
+                    Terima notifikasi konsultasi & bootcamp
+                  </p>
+                </div>
+                <Switch
+                  checked={form.whatsapp_opt_in}
+                  onCheckedChange={(checked) => setForm({ ...form, whatsapp_opt_in: checked })}
+                />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Button onClick={handleSave} disabled={saving} className="w-full shadow-sm">
+            {saving ? 'Menyimpan...' : 'Simpan Profil'}
+          </Button>
+
           <Card className="border-2 border-border">
             <CardContent className="pt-6">
               <Button variant="outline" onClick={handleSignOut} className="w-full border-2 text-destructive hover:text-destructive">

src/pages/member/OrderDetail.tsx

@@ -15,11 +15,12 @@ interface OrderItem {
   id: string;
   product_id: string;
   quantity: number;
-  price: number;
   products: {
     title: string;
     type: string;
     slug: string;
+    price: number;
+    sale_price: number | null;
   };
 }
 
@@ -72,8 +73,7 @@ export default function OrderDetail() {
             id,
             product_id,
             quantity,
-            price,
-            products (title, type, slug)
+            products (title, type, slug, price, sale_price)
           )
         `)
         .eq("id", id)
@@ -279,7 +279,7 @@ export default function OrderDetail() {
                       </span>
                     </div>
                   </div>
-                  <p className="font-medium">{formatIDR(item.price)}</p>
+                  <p className="font-medium">{formatIDR(item.products.sale_price || item.products.price)}</p>
                 </div>
               ))}
             </div>