dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code edited in Lovable Code Editor

Browse Source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot]
2025-12-19 14:54:53 +00:00
parent 03831cc1b7
commit f57bba6f9c
1 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/pages/member/MemberOrders.tsx
View File

@@ -1,12 +1,12 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from "react-router-dom";
import { AppLayout } from '@/components/AppLayout'; import { AppLayout } from "@/components/AppLayout";
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from "@/hooks/useAuth";
import { supabase } from '@/integrations/supabase/client'; import { supabase } from "@/integrations/supabase/client";
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from "@/components/ui/card";
import { Badge } from '@/components/ui/badge'; import { Badge } from "@/components/ui/badge";
import { Skeleton } from '@/components/ui/skeleton'; import { Skeleton } from "@/components/ui/skeleton";
import { formatIDR, formatDate } from '@/lib/format'; import { formatIDR, formatDate } from "@/lib/format";
interface Order { interface Order {
id: string; id: string;
@@ -24,36 +24,45 @@ export default function MemberOrders() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
if (!authLoading && !user) navigate('/auth'); if (!authLoading && !user) navigate("/auth");
else if (user) fetchOrders(); else if (user) fetchOrders();
}, [user, authLoading]); }, [user, authLoading]);
const fetchOrders = async () => { const fetchOrders = async () => {
const { data } = await supabase const { data } = await supabase
.from('orders') .from("orders")
.select('*') .select("*")
.eq('user_id', user!.id) .eq("user_id", user!.id)
.order('created_at', { ascending: false }); .order("created_at", { ascending: false });
if (data) setOrders(data); if (data) setOrders(data);
setLoading(false); setLoading(false);
}; };
const getStatusColor = (status: string) => { const getStatusColor = (status: string) => {
switch (status) { switch (status) {
case 'paid': return 'bg-accent'; case "paid":
case 'pending': return 'bg-secondary'; return "bg-accent text-primary";
case 'cancelled': return 'bg-destructive'; case "pending":
default: return 'bg-secondary'; return "bg-secondary text-primary";
case "cancelled":
return "bg-destructive";
default:
return "bg-secondary text-primary";
} }
}; };
const getPaymentStatusLabel = (status: string | null) => { const getPaymentStatusLabel = (status: string | null) => {
switch (status) { switch (status) {
case 'paid': return 'Lunas'; case "paid":
case 'pending': return 'Menunggu Pembayaran'; return "Lunas";
case 'failed': return 'Gagal'; case "pending":
case 'cancelled': return 'Dibatalkan'; return "Menunggu Pembayaran";
default: return status || 'Pending'; 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"> <div className="container mx-auto px-4 py-8">
<Skeleton className="h-10 w-1/3 mb-8" /> <Skeleton className="h-10 w-1/3 mb-8" />
<div className="space-y-4"> <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>
</div> </div>
</AppLayout> </AppLayout>