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 11:01:34 +00:00
parent 051c31e9c6
commit 0778eec288
1 changed files with 66 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/pages/admin/AdminOrders.tsx
View File

@@ -1,17 +1,17 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from "react-router-dom";
import { supabase } from '@/integrations/supabase/client'; import { supabase } from "@/integrations/supabase/client";
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from "@/hooks/useAuth";
import { AppLayout } from '@/components/AppLayout'; import { AppLayout } from "@/components/AppLayout";
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from '@/components/ui/badge'; import { Badge } from "@/components/ui/badge";
import { Button } from '@/components/ui/button'; import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Skeleton } from '@/components/ui/skeleton'; import { Skeleton } from "@/components/ui/skeleton";
import { formatIDR, formatDateTime } from '@/lib/format'; import { formatIDR, formatDateTime } from "@/lib/format";
import { Eye, CheckCircle, XCircle } from 'lucide-react'; import { Eye, CheckCircle, XCircle } from "lucide-react";
import { toast } from '@/hooks/use-toast'; import { toast } from "@/hooks/use-toast";
interface Order { interface Order {
id: string; id: string;
@@ -43,51 +43,51 @@ export default function AdminOrders() {
useEffect(() => { useEffect(() => {
if (!authLoading) { if (!authLoading) {
if (!user) navigate('/auth'); if (!user) navigate("/auth");
else if (!isAdmin) navigate('/dashboard'); else if (!isAdmin) navigate("/dashboard");
else fetchOrders(); else fetchOrders();
} }
}, [user, isAdmin, authLoading]); }, [user, isAdmin, authLoading]);
const fetchOrders = async () => { const fetchOrders = async () => {
const { data, error } = await supabase const { data, error } = await supabase
.from('orders') .from("orders")
.select('*, profile:profiles(email)') .select("*, profile:profiles(email)")
.order('created_at', { ascending: false }); .order("created_at", { ascending: false });
if (!error && data) setOrders(data as unknown as Order[]); if (!error && data) setOrders(data as unknown as Order[]);
setLoading(false); setLoading(false);
}; };
const viewOrderDetails = async (order: Order) => { const viewOrderDetails = async (order: Order) => {
setSelectedOrder(order); setSelectedOrder(order);
const { data } = await supabase const { data } = await supabase.from("order_items").select("*, product:products(title)").eq("order_id", order.id);
.from('order_items') setOrderItems((data as unknown as OrderItem[]) || []);
.select('*, product:products(title)')
.eq('order_id', order.id);
setOrderItems(data as unknown as OrderItem[] || []);
setDialogOpen(true); setDialogOpen(true);
}; };
const updateOrderStatus = async (orderId: string, status: 'paid' | 'cancelled') => { const updateOrderStatus = async (orderId: string, status: "paid" | "cancelled") => {
const { error } = await supabase.from('orders').update({ payment_status: status }).eq('id', orderId); const { error } = await supabase.from("orders").update({ payment_status: status }).eq("id", orderId);
if (error) { if (error) {
toast({ title: 'Error', description: 'Gagal update status', variant: 'destructive' }); toast({ title: "Error", description: "Gagal update status", variant: "destructive" });
} else { } else {
if (status === 'paid') { if (status === "paid") {
// Grant access for each order item // Grant access for each order item
const { data: items } = await supabase.from('order_items').select('product_id').eq('order_id', orderId); const { data: items } = await supabase.from("order_items").select("product_id").eq("order_id", orderId);
const order = orders.find(o => o.id === orderId); const order = orders.find((o) => o.id === orderId);
if (items && order) { if (items && order) {
for (const item of items) { for (const item of items) {
await supabase.from('user_access').upsert({ await supabase.from("user_access").upsert(
{
user_id: order.user_id, user_id: order.user_id,
product_id: item.product_id, product_id: item.product_id,
granted_at: new Date().toISOString(), granted_at: new Date().toISOString(),
}, { onConflict: 'user_id,product_id' }); },
{ onConflict: "user_id,product_id" },
);
} }
} }
} }
toast({ title: 'Berhasil', description: `Status diubah ke ${status}` }); toast({ title: "Berhasil", description: `Status diubah ke ${status}` });
fetchOrders(); fetchOrders();
setDialogOpen(false); setDialogOpen(false);
} }
@@ -95,10 +95,14 @@ export default function AdminOrders() {
const getStatusBadge = (status: string | null) => { const getStatusBadge = (status: string | null) => {
switch (status) { switch (status) {
case 'paid': return <Badge className="bg-accent">Lunas</Badge>; case "paid":
case 'pending': return <Badge className="bg-secondary">Pending</Badge>; return <Badge className="bg-accent">Lunas</Badge>;
case 'cancelled': return <Badge className="bg-destructive">Dibatalkan</Badge>; case "pending":
default: return <Badge className="bg-muted">{status}</Badge>; return <Badge className="bg-secondary text-primary-foreground">Pending</Badge>;
case "cancelled":
return <Badge className="bg-destructive">Dibatalkan</Badge>;
default:
return <Badge className="bg-muted">{status}</Badge>;
} }
}; };
@@ -137,9 +141,9 @@ export default function AdminOrders() {
{orders.map((order) => ( {orders.map((order) => (
<TableRow key={order.id}> <TableRow key={order.id}>
<TableCell className="font-mono text-sm">{order.id.slice(0, 8)}</TableCell> <TableCell className="font-mono text-sm">{order.id.slice(0, 8)}</TableCell>
<TableCell>{order.profile?.email || '-'}</TableCell> <TableCell>{order.profile?.email || "-"}</TableCell>
<TableCell className="font-bold">{formatIDR(order.total_amount)}</TableCell> <TableCell className="font-bold">{formatIDR(order.total_amount)}</TableCell>
<TableCell className="uppercase text-sm">{order.payment_method || '-'}</TableCell> <TableCell className="uppercase text-sm">{order.payment_method || "-"}</TableCell>
<TableCell>{getStatusBadge(order.payment_status)}</TableCell> <TableCell>{getStatusBadge(order.payment_status)}</TableCell>
<TableCell>{formatDateTime(order.created_at)}</TableCell> <TableCell>{formatDateTime(order.created_at)}</TableCell>
<TableCell className="text-right"> <TableCell className="text-right">
@@ -169,10 +173,18 @@ export default function AdminOrders() {
{selectedOrder && ( {selectedOrder && (
<div className="space-y-4"> <div className="space-y-4">
<div className="grid grid-cols-2 gap-2 text-sm"> <div className="grid grid-cols-2 gap-2 text-sm">
<div><span className="text-muted-foreground">ID:</span> {selectedOrder.id.slice(0, 8)}</div> <div>
<div><span className="text-muted-foreground">Referensi:</span> {selectedOrder.payment_reference || '-'}</div> <span className="text-muted-foreground">ID:</span> {selectedOrder.id.slice(0, 8)}
<div><span className="text-muted-foreground">Email:</span> {selectedOrder.profile?.email}</div> </div>
<div><span className="text-muted-foreground">Metode:</span> {selectedOrder.payment_method || '-'}</div> <div>
<span className="text-muted-foreground">Referensi:</span> {selectedOrder.payment_reference || "-"}
</div>
<div>
<span className="text-muted-foreground">Email:</span> {selectedOrder.profile?.email}
</div>
<div>
<span className="text-muted-foreground">Metode:</span> {selectedOrder.payment_method || "-"}
</div>
</div> </div>
<div className="border-t border-border pt-4"> <div className="border-t border-border pt-4">
<p className="font-medium mb-2">Item:</p> <p className="font-medium mb-2">Item:</p>
@@ -188,14 +200,18 @@ export default function AdminOrders() {
</div> </div>
</div> </div>
<div className="flex gap-2 pt-4"> <div className="flex gap-2 pt-4">
{selectedOrder.payment_status !== 'paid' && ( {selectedOrder.payment_status !== "paid" && (
<Button onClick={() => updateOrderStatus(selectedOrder.id, 'paid')} className="flex-1"> <Button onClick={() => updateOrderStatus(selectedOrder.id, "paid")} className="flex-1">
<CheckCircle className="w-4 h-4 mr-2" /> <CheckCircle className="w-4 h-4 mr-2" />
Tandai Lunas Tandai Lunas
</Button> </Button>
)} )}
{selectedOrder.payment_status !== 'cancelled' && ( {selectedOrder.payment_status !== "cancelled" && (
<Button variant="outline" onClick={() => updateOrderStatus(selectedOrder.id, 'cancelled')} className="flex-1 border-2"> <Button
variant="outline"
onClick={() => updateOrderStatus(selectedOrder.id, "cancelled")}
className="flex-1 border-2"
>
<XCircle className="w-4 h-4 mr-2" /> <XCircle className="w-4 h-4 mr-2" />
Batalkan Batalkan
</Button> </Button>