From 24826a3ea45ea403beca5cb0b0f27694b30f437e Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 25 Dec 2025 18:08:37 +0700
Subject: [PATCH] Fix badge colors and show paid webinars in access pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change "Lunas" badge to use brand accent color instead of hardcoded green
- Fix "Aktif" badge with white text and border for better contrast
- Update MemberAccess page to fetch from paid orders (webinars now show)
- Remove payment_provider filter completely since only Pakasir is used

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/pages/member/MemberAccess.tsx    | 49 ++++++++++++++++++++++++----
 src/pages/member/MemberDashboard.tsx |  2 +-
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/src/pages/member/MemberAccess.tsx b/src/pages/member/MemberAccess.tsx
index b54892e..9c37100 100644
--- a/src/pages/member/MemberAccess.tsx
+++ b/src/pages/member/MemberAccess.tsx
@@ -36,11 +36,48 @@ export default function MemberAccess() {
   }, [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[]);
+    const [accessRes, paidOrdersRes] = await Promise.all([
+      // Get direct user_access
+      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),
+      // Get products from paid orders (via order_items)
+      supabase
+        .from("orders")
+        .select(
+          `
+          order_items (
+            product:products (id, title, slug, type, meeting_link, recording_url, description)
+          )
+        `,
+        )
+        .eq("user_id", user!.id)
+        .eq("payment_status", "paid"),
+    ]);
+
+    // Combine access from user_access and paid orders
+    const directAccess = (accessRes.data as unknown as UserAccess[]) || [];
+    const paidProductAccess: UserAccess[] = [];
+
+    if (paidOrdersRes.data) {
+      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)) {
+            existingIds.add(item.product.id);
+            paidProductAccess.push({
+              id: `paid-${item.product.id}`,
+              granted_at: new Date().toISOString(),
+              expires_at: null,
+              product: item.product
+            });
+          }
+        });
+      });
+    }
+
+    setAccess([...directAccess, ...paidProductAccess]);
     setLoading(false);
   };
 
@@ -127,7 +164,7 @@ export default function MemberAccess() {
                       <CardTitle>{item.product.title}</CardTitle>
                       <CardDescription className="capitalize">{item.product.type}</CardDescription>
                     </div>
-                    <Badge className="bg-accent">Aktif</Badge>
+                    <Badge className="bg-brand-accent text-white border-2">Aktif</Badge>
                   </div>
                 </CardHeader>
                 <CardContent>
diff --git a/src/pages/member/MemberDashboard.tsx b/src/pages/member/MemberDashboard.tsx
index 963a632..1339a0c 100644
--- a/src/pages/member/MemberDashboard.tsx
+++ b/src/pages/member/MemberDashboard.tsx
@@ -298,7 +298,7 @@ export default function MemberDashboard() {
                       </p>
                     </div>
                     <div className="flex items-center gap-4">
-                      <Badge className={order.payment_status === "paid" ? "bg-green-600 text-white border-2 border-green-700" : "bg-amber-500 text-white border-2 border-amber-600"}>
+                      <Badge className={order.payment_status === "paid" ? "bg-brand-accent text-white border-2" : "bg-amber-500 text-white border-2 border-amber-600"}>
                         {order.payment_status === "paid" ? "Lunas" : "Pending"}
                       </Badge>
                       <span className="font-bold">{formatIDR(order.total_amount)}</span>