Changes

src/pages/member/MemberAccess.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { AppLayout } from '@/components/AppLayout';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Video, Calendar, BookOpen, ArrowRight } from 'lucide-react';
+
+interface UserAccess {
+  id: string;
+  granted_at: string;
+  expires_at: string | null;
+  product: {
+    id: string;
+    title: string;
+    slug: string;
+    type: string;
+    meeting_link: string | null;
+    recording_url: string | null;
+    description: string;
+  };
+}
+
+export default function MemberAccess() {
+  const { user, loading: authLoading } = useAuth();
+  const navigate = useNavigate();
+  const [access, setAccess] = useState<UserAccess[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!authLoading && !user) navigate('/auth');
+    else if (user) fetchAccess();
+  }, [user, authLoading]);
+
+  const fetchAccess = async () => {
+    const { data } = await supabase
+      .from('user_access')
+      .select(`id, granted_at, expires_at, product:products (id, title, slug, type, meeting_link, recording_url, description)`)
+      .eq('user_id', user!.id);
+    if (data) setAccess(data as unknown as UserAccess[]);
+    setLoading(false);
+  };
+
+  const renderAccessActions = (item: UserAccess) => {
+    switch (item.product.type) {
+      case 'consulting':
+        return (
+          <Button asChild variant="outline" className="border-2">
+            <a href={item.product.meeting_link || '#'} target="_blank" rel="noopener noreferrer">
+              <Calendar className="w-4 h-4 mr-2" />
+              Jadwalkan Konsultasi
+            </a>
+          </Button>
+        );
+      case 'webinar':
+        return (
+          <div className="flex gap-2 flex-wrap">
+            {item.product.meeting_link && (
+              <Button asChild variant="outline" className="border-2">
+                <a href={item.product.meeting_link} target="_blank" rel="noopener noreferrer">
+                  <Video className="w-4 h-4 mr-2" />
+                  Gabung Webinar
+                </a>
+              </Button>
+            )}
+            {item.product.recording_url && (
+              <Button asChild variant="outline" className="border-2">
+                <a href={item.product.recording_url} target="_blank" rel="noopener noreferrer">
+                  <Video className="w-4 h-4 mr-2" />
+                  Tonton Rekaman
+                </a>
+              </Button>
+            )}
+          </div>
+        );
+      case 'bootcamp':
+        return (
+          <Button onClick={() => navigate(`/bootcamp/${item.product.slug}`)} className="shadow-sm">
+            <BookOpen className="w-4 h-4 mr-2" />
+            Lanjutkan Bootcamp
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+        );
+      default:
+        return null;
+    }
+  };
+
+  if (authLoading || loading) {
+    return (
+      <AppLayout>
+        <div className="container mx-auto px-4 py-8">
+          <Skeleton className="h-10 w-1/3 mb-8" />
+          <div className="grid gap-4">
+            {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-32" />)}
+          </div>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  return (
+    <AppLayout>
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-4xl font-bold mb-2">Akses Saya</h1>
+        <p className="text-muted-foreground mb-8">Semua produk yang dapat Anda akses</p>
+
+        {access.length === 0 ? (
+          <Card className="border-2 border-border">
+            <CardContent className="py-12 text-center">
+              <p className="text-muted-foreground mb-4">Anda belum memiliki akses ke produk apapun</p>
+              <Button onClick={() => navigate('/products')} variant="outline" className="border-2">
+                Lihat Produk
+              </Button>
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="grid gap-4">
+            {access.map((item) => (
+              <Card key={item.id} className="border-2 border-border">
+                <CardHeader>
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <CardTitle>{item.product.title}</CardTitle>
+                      <CardDescription className="capitalize">{item.product.type}</CardDescription>
+                    </div>
+                    <Badge className="bg-accent">Aktif</Badge>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground mb-4 line-clamp-2">{item.product.description}</p>
+                  {renderAccessActions(item)}
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </AppLayout>
+  );
+}

src/pages/member/MemberDashboard.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { AppLayout } from '@/components/AppLayout';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+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';
+
+interface UserAccess {
+  id: string;
+  product: {
+    id: string;
+    title: string;
+    slug: string;
+    type: string;
+    meeting_link: string | null;
+    recording_url: string | null;
+  };
+}
+
+interface Order {
+  id: string;
+  total_amount: number;
+  payment_status: string | null;
+  created_at: string;
+}
+
+export default function MemberDashboard() {
+  const { user, loading: authLoading } = useAuth();
+  const navigate = useNavigate();
+  const [access, setAccess] = useState<UserAccess[]>([]);
+  const [recentOrders, setRecentOrders] = useState<Order[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!authLoading && !user) navigate('/auth');
+    else if (user) fetchData();
+  }, [user, authLoading]);
+
+  const fetchData = async () => {
+    const [accessRes, ordersRes] = await Promise.all([
+      supabase.from('user_access').select(`id, product:products (id, title, slug, type, meeting_link, recording_url)`).eq('user_id', user!.id),
+      supabase.from('orders').select('*').eq('user_id', user!.id).order('created_at', { ascending: false }).limit(3)
+    ]);
+    if (accessRes.data) setAccess(accessRes.data as unknown as UserAccess[]);
+    if (ordersRes.data) setRecentOrders(ordersRes.data);
+    setLoading(false);
+  };
+
+  const getQuickAction = (item: UserAccess) => {
+    switch (item.product.type) {
+      case 'consulting':
+        return { label: 'Jadwalkan', icon: Calendar, href: item.product.meeting_link };
+      case 'webinar':
+        return { label: 'Tonton', icon: Video, href: item.product.recording_url || item.product.meeting_link };
+      case 'bootcamp':
+        return { label: 'Lanjutkan', icon: BookOpen, route: `/bootcamp/${item.product.slug}` };
+      default:
+        return null;
+    }
+  };
+
+  if (authLoading || loading) {
+    return (
+      <AppLayout>
+        <div className="container mx-auto px-4 py-8">
+          <Skeleton className="h-10 w-1/3 mb-8" />
+          <div className="grid gap-4 md:grid-cols-2">
+            {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-32" />)}
+          </div>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  return (
+    <AppLayout>
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-4xl font-bold mb-2">Dashboard</h1>
+        <p className="text-muted-foreground mb-8">Selamat datang kembali!</p>
+
+        <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">
+              <div className="flex items-center gap-4">
+                <Package className="w-10 h-10 text-primary" />
+                <div>
+                  <p className="text-3xl font-bold">{access.length}</p>
+                  <p className="text-muted-foreground">Produk Diakses</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          <Card className="border-2 border-border">
+            <CardContent className="pt-6">
+              <div className="flex items-center gap-4">
+                <Receipt className="w-10 h-10 text-accent" />
+                <div>
+                  <p className="text-3xl font-bold">{recentOrders.length}</p>
+                  <p className="text-muted-foreground">Order Terbaru</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          <Card className="border-2 border-border col-span-full lg:col-span-1">
+            <CardContent className="pt-6 flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <ShoppingBag className="w-10 h-10 text-secondary-foreground" />
+                <div>
+                  <p className="text-sm text-muted-foreground">Jelajahi lebih banyak</p>
+                  <p className="font-medium">Lihat semua produk</p>
+                </div>
+              </div>
+              <Button variant="outline" onClick={() => navigate('/products')} className="border-2">
+                <ArrowRight className="w-4 h-4" />
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+
+        {access.length > 0 && (
+          <div className="mb-8">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-2xl font-bold">Akses Cepat</h2>
+              <Button variant="ghost" onClick={() => navigate('/access')}>
+                Lihat Semua
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Button>
+            </div>
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              {access.slice(0, 3).map((item) => {
+                const action = getQuickAction(item);
+                return (
+                  <Card key={item.id} className="border-2 border-border">
+                    <CardHeader className="pb-2">
+                      <CardTitle className="text-lg">{item.product.title}</CardTitle>
+                      <CardDescription className="capitalize">{item.product.type}</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      {action && (
+                        action.route ? (
+                          <Button onClick={() => navigate(action.route!)} className="w-full shadow-sm">
+                            <action.icon className="w-4 h-4 mr-2" />
+                            {action.label}
+                          </Button>
+                        ) : action.href ? (
+                          <Button asChild variant="outline" className="w-full border-2">
+                            <a href={action.href} target="_blank" rel="noopener noreferrer">
+                              <action.icon className="w-4 h-4 mr-2" />
+                              {action.label}
+                            </a>
+                          </Button>
+                        ) : null
+                      )}
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {recentOrders.length > 0 && (
+          <div>
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-2xl font-bold">Order Terbaru</h2>
+              <Button variant="ghost" onClick={() => navigate('/orders')}>
+                Lihat Semua
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </Button>
+            </div>
+            <Card className="border-2 border-border">
+              <CardContent className="p-0 divide-y divide-border">
+                {recentOrders.map((order) => (
+                  <div key={order.id} className="flex items-center justify-between p-4">
+                    <div>
+                      <p className="font-mono text-sm">{order.id.slice(0, 8)}</p>
+                      <p className="text-xs text-muted-foreground">{new Date(order.created_at).toLocaleDateString('id-ID')}</p>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <Badge className={order.payment_status === 'paid' ? 'bg-accent' : 'bg-muted'}>
+                        {order.payment_status === 'paid' ? 'Lunas' : 'Pending'}
+                      </Badge>
+                      <span className="font-bold">{formatIDR(order.total_amount)}</span>
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </div>
+    </AppLayout>
+  );
+}

src/pages/member/MemberOrders.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { AppLayout } from '@/components/AppLayout';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { formatIDR, formatDate } from '@/lib/format';
+
+interface Order {
+  id: string;
+  total_amount: number;
+  status: string;
+  payment_status: string | null;
+  payment_method: string | null;
+  created_at: string;
+}
+
+export default function MemberOrders() {
+  const { user, loading: authLoading } = useAuth();
+  const navigate = useNavigate();
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!authLoading && !user) navigate('/auth');
+    else if (user) fetchOrders();
+  }, [user, authLoading]);
+
+  const fetchOrders = async () => {
+    const { data } = await supabase
+      .from('orders')
+      .select('*')
+      .eq('user_id', user!.id)
+      .order('created_at', { ascending: false });
+    if (data) setOrders(data);
+    setLoading(false);
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'paid': return 'bg-accent';
+      case 'pending': return 'bg-secondary';
+      case 'cancelled': return 'bg-destructive';
+      default: return 'bg-secondary';
+    }
+  };
+
+  const getPaymentStatusLabel = (status: string | null) => {
+    switch (status) {
+      case 'paid': return 'Lunas';
+      case 'pending': return 'Menunggu Pembayaran';
+      case 'failed': return 'Gagal';
+      case 'cancelled': return 'Dibatalkan';
+      default: return status || 'Pending';
+    }
+  };
+
+  if (authLoading || loading) {
+    return (
+      <AppLayout>
+        <div className="container mx-auto px-4 py-8">
+          <Skeleton className="h-10 w-1/3 mb-8" />
+          <div className="space-y-4">
+            {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-24" />)}
+          </div>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  return (
+    <AppLayout>
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-4xl font-bold mb-2">Riwayat Order</h1>
+        <p className="text-muted-foreground mb-8">Semua pesanan Anda</p>
+
+        {orders.length === 0 ? (
+          <Card className="border-2 border-border">
+            <CardContent className="py-12 text-center">
+              <p className="text-muted-foreground">Belum ada order</p>
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="space-y-4">
+            {orders.map((order) => (
+              <Card key={order.id} className="border-2 border-border">
+                <CardContent className="py-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="font-mono text-sm text-muted-foreground">{order.id.slice(0, 8)}</p>
+                      <p className="text-sm text-muted-foreground">{formatDate(order.created_at)}</p>
+                      {order.payment_method && (
+                        <p className="text-xs text-muted-foreground uppercase">{order.payment_method}</p>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <Badge className={getStatusColor(order.payment_status || order.status)}>
+                        {getPaymentStatusLabel(order.payment_status || order.status)}
+                      </Badge>
+                      <span className="font-bold">{formatIDR(order.total_amount)}</span>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </AppLayout>
+  );
+}

src/pages/member/MemberProfile.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { AppLayout } from '@/components/AppLayout';
+import { useAuth } from '@/hooks/useAuth';
+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 { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+import { toast } from '@/hooks/use-toast';
+import { User, LogOut } from 'lucide-react';
+
+interface Profile {
+  id: string;
+  email: string | null;
+  full_name: string | null;
+  avatar_url: string | null;
+}
+
+export default function MemberProfile() {
+  const { user, signOut, loading: authLoading } = useAuth();
+  const navigate = useNavigate();
+  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: '' });
+
+  useEffect(() => {
+    if (!authLoading && !user) navigate('/auth');
+    else if (user) fetchProfile();
+  }, [user, authLoading]);
+
+  const fetchProfile = async () => {
+    const { data } = await supabase
+      .from('profiles')
+      .select('*')
+      .eq('id', user!.id)
+      .single();
+    if (data) {
+      setProfile(data);
+      setForm({ full_name: data.full_name || '', avatar_url: data.avatar_url || '' });
+    }
+    setLoading(false);
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    const { error } = await supabase
+      .from('profiles')
+      .update({ full_name: form.full_name, avatar_url: form.avatar_url || null })
+      .eq('id', user!.id);
+
+    if (error) {
+      toast({ title: 'Error', description: 'Gagal menyimpan profil', variant: 'destructive' });
+    } else {
+      toast({ title: 'Berhasil', description: 'Profil diperbarui' });
+      fetchProfile();
+    }
+    setSaving(false);
+  };
+
+  const handleSignOut = async () => {
+    await signOut();
+    navigate('/');
+  };
+
+  if (authLoading || loading) {
+    return (
+      <AppLayout>
+        <div className="container mx-auto px-4 py-8">
+          <Skeleton className="h-10 w-1/3 mb-8" />
+          <Skeleton className="h-64 w-full max-w-md" />
+        </div>
+      </AppLayout>
+    );
+  }
+
+  return (
+    <AppLayout>
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-4xl font-bold mb-2">Profil</h1>
+        <p className="text-muted-foreground mb-8">Kelola informasi akun Anda</p>
+
+        <div className="max-w-md space-y-6">
+          <Card className="border-2 border-border">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <User className="w-5 h-5" />
+                Informasi Akun
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label>Email</Label>
+                <Input value={profile?.email || ''} disabled className="border-2 bg-muted" />
+              </div>
+              <div className="space-y-2">
+                <Label>Nama Lengkap</Label>
+                <Input
+                  value={form.full_name}
+                  onChange={(e) => setForm({ ...form, full_name: e.target.value })}
+                  className="border-2"
+                  placeholder="Masukkan nama lengkap"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>URL Avatar</Label>
+                <Input
+                  value={form.avatar_url}
+                  onChange={(e) => setForm({ ...form, avatar_url: e.target.value })}
+                  className="border-2"
+                  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">
+            <CardContent className="pt-6">
+              <Button variant="outline" onClick={handleSignOut} className="w-full border-2 text-destructive hover:text-destructive">
+                <LogOut className="w-4 h-4 mr-2" />
+                Logout
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}