Code edited in Lovable Code Editor

Edited UI in Lovable

src/pages/member/MemberOrders.tsx

@@ -1,12 +1,12 @@
-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';
+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;
@@ -24,36 +24,45 @@ export default function MemberOrders() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    if (!authLoading && !user) navigate('/auth');
+    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 });
+      .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';
+      case "paid":
+        return "bg-accent text-primary";
+      case "pending":
+        return "bg-secondary text-primary";
+      case "cancelled":
+        return "bg-destructive";
+      default:
+        return "bg-secondary text-primary";
     }
   };
 
   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';
+      case "paid":
+        return "Lunas";
+      case "pending":
+        return "Menunggu Pembayaran";
+      case "failed":
+        return "Gagal";
+      case "cancelled":
+        return "Dibatalkan";
+      default:
+        return status || "Pending";
     }
   };
 
@@ -63,7 +72,9 @@ export default function MemberOrders() {
         <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" />)}
+            {[...Array(3)].map((_, i) => (
+              <Skeleton key={i} className="h-24" />
+            ))}
           </div>
         </div>
       </AppLayout>