129 lines
4.2 KiB
TypeScript
129 lines
4.2 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useNavigate, Link } 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 { ChevronRight } from "lucide-react";
|
|
|
|
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 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";
|
|
}
|
|
};
|
|
|
|
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) => (
|
|
<Link key={order.id} to={`/orders/${order.id}`}>
|
|
<Card className="border-2 border-border hover:border-primary transition-colors cursor-pointer">
|
|
<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>
|
|
<ChevronRight className="w-5 h-5 text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|