From d860f0296d990741efc78830aeeb64698ac56c5f Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 19 Dec 2025 10:55:49 +0000
Subject: [PATCH] Code edited in Lovable Code Editor

Edited UI in Lovable
---
 src/pages/member/MemberDashboard.tsx | 97 +++++++++++++++-------------
 1 file changed, 53 insertions(+), 44 deletions(-)

diff --git a/src/pages/member/MemberDashboard.tsx b/src/pages/member/MemberDashboard.tsx
index f46c83e..32db61b 100644
--- a/src/pages/member/MemberDashboard.tsx
+++ b/src/pages/member/MemberDashboard.tsx
@@ -1,14 +1,14 @@
-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';
+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;
@@ -37,32 +37,38 @@ export default function MemberDashboard() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (!authLoading && !user) navigate('/auth');
+    if (!authLoading && !user) navigate("/auth");
     else if (user) fetchData();
   }, [user, authLoading]);
 
   const fetchData = async () => {
     const [accessRes, ordersRes, paidOrdersRes] = 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),
+      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),
       // Also get products from paid orders (via order_items)
-      supabase.from('orders')
-        .select(`
+      supabase
+        .from("orders")
+        .select(
+          `
           order_items (
             product:products (id, title, slug, type, meeting_link, recording_url)
           )
-        `)
-        .eq('user_id', user!.id)
-        .eq('payment_status', 'paid')
-        .eq('payment_provider', 'pakasir')
+        `,
+        )
+        .eq("user_id", user!.id)
+        .eq("payment_status", "paid")
+        .eq("payment_provider", "pakasir"),
     ]);
-    
+
     // Combine access from user_access and paid orders
-    const directAccess = accessRes.data as unknown as UserAccess[] || [];
+    const directAccess = (accessRes.data as unknown as UserAccess[]) || [];
     const paidProductAccess: UserAccess[] = [];
-    
+
     if (paidOrdersRes.data) {
-      const existingIds = new Set(directAccess.map(a => a.product.id));
+      const existingIds = new Set(directAccess.map((a) => a.product.id));
       paidOrdersRes.data.forEach((order: any) => {
         order.order_items?.forEach((item: any) => {
           if (item.product && !existingIds.has(item.product.id)) {
@@ -72,7 +78,7 @@ export default function MemberDashboard() {
         });
       });
     }
-    
+
     setAccess([...directAccess, ...paidProductAccess]);
     if (ordersRes.data) setRecentOrders(ordersRes.data);
     setLoading(false);
@@ -80,12 +86,12 @@ export default function MemberDashboard() {
 
   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}` };
+      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;
     }
@@ -97,7 +103,9 @@ export default function MemberDashboard() {
         <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" />)}
+            {[...Array(4)].map((_, i) => (
+              <Skeleton key={i} className="h-32" />
+            ))}
           </div>
         </div>
       </AppLayout>
@@ -125,7 +133,7 @@ export default function MemberDashboard() {
           <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" />
+                <Receipt className="w-10 h-10 text-primary" />
                 <div>
                   <p className="text-3xl font-bold">{recentOrders.length}</p>
                   <p className="text-muted-foreground">Order Terbaru</p>
@@ -136,13 +144,13 @@ export default function MemberDashboard() {
           <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" />
+                <ShoppingBag className="w-10 h-10 text-primary" />
                 <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">
+              <Button variant="outline" onClick={() => navigate("/products")} className="border-2">
                 <ArrowRight className="w-4 h-4" />
               </Button>
             </CardContent>
@@ -153,7 +161,7 @@ export default function MemberDashboard() {
           <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')}>
+              <Button variant="ghost" onClick={() => navigate("/access")}>
                 Lihat Semua
                 <ArrowRight className="w-4 h-4 ml-2" />
               </Button>
@@ -168,8 +176,8 @@ export default function MemberDashboard() {
                       <CardDescription className="capitalize">{item.product.type}</CardDescription>
                     </CardHeader>
                     <CardContent>
-                      {action && (
-                        action.route ? (
+                      {action &&
+                        (action.route ? (
                           <Button onClick={() => navigate(action.route!)} className="w-full shadow-sm">
                             <action.icon className="w-4 h-4 mr-2" />
                             {action.label}
@@ -181,8 +189,7 @@ export default function MemberDashboard() {
                               {action.label}
                             </a>
                           </Button>
-                        ) : null
-                      )}
+                        ) : null)}
                     </CardContent>
                   </Card>
                 );
@@ -195,7 +202,7 @@ export default function MemberDashboard() {
           <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')}>
+              <Button variant="ghost" onClick={() => navigate("/orders")}>
                 Lihat Semua
                 <ArrowRight className="w-4 h-4 ml-2" />
               </Button>
@@ -206,11 +213,13 @@ export default function MemberDashboard() {
                   <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>
+                      <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 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>