Add refund system and meet link management
Refund System: - Add refund processing with amount and reason tracking - Auto-revoke product access on refund - Support full and partial refunds - Add database fields for refund tracking Meet Link Management: - Show meet link status badge (Ready/Not Ready) - Add manual meet link creation/update form - Allow admin to create meet links if auto-creation fails Database Migration: - Add refund_amount, refund_reason, refunded_at, refunded_by to orders - Add cancellation_reason to orders and consulting_slots 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
@@ -7,10 +7,13 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { formatIDR, formatDateTime } from "@/lib/format";
|
||||
import { Eye, CheckCircle, XCircle, Video, ExternalLink, Trash2, AlertTriangle } from "lucide-react";
|
||||
import { Eye, CheckCircle, XCircle, Video, ExternalLink, Trash2, AlertTriangle, RefreshCw, Link as LinkIcon } from "lucide-react";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
|
||||
interface Order {
|
||||
@@ -22,6 +25,8 @@ interface Order {
|
||||
payment_method: string | null;
|
||||
payment_reference: string | null;
|
||||
created_at: string;
|
||||
refunded_amount?: number | null;
|
||||
refunded_at?: string | null;
|
||||
profile?: { email: string } | null;
|
||||
}
|
||||
|
||||
@@ -50,6 +55,14 @@ export default function AdminOrders() {
|
||||
const [orderItems, setOrderItems] = useState<OrderItem[]>([]);
|
||||
const [consultingSlots, setConsultingSlots] = useState<ConsultingSlot[]>([]);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [refundDialogOpen, setRefundDialogOpen] = useState(false);
|
||||
const [refundAmount, setRefundAmount] = useState("");
|
||||
const [refundReason, setRefundReason] = useState("");
|
||||
const [processingRefund, setProcessingRefund] = useState(false);
|
||||
const [meetLinkDialogOpen, setMeetLinkDialogOpen] = useState(false);
|
||||
const [selectedSlotId, setSelectedSlotId] = useState<string | null>(null);
|
||||
const [newMeetLink, setNewMeetLink] = useState("");
|
||||
const [creatingMeetLink, setCreatingMeetLink] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading) {
|
||||
@@ -146,10 +159,126 @@ export default function AdminOrders() {
|
||||
}
|
||||
};
|
||||
|
||||
const processRefund = async () => {
|
||||
if (!selectedOrder || !refundAmount || !refundReason) {
|
||||
toast({ title: "Error", description: "Mohon lengkapi jumlah dan alasan refund", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
|
||||
const refundAmountCents = parseInt(refundAmount);
|
||||
if (isNaN(refundAmountCents) || refundAmountCents <= 0 || refundAmountCents > selectedOrder.total_amount) {
|
||||
toast({ title: "Error", description: "Jumlah refund tidak valid", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
|
||||
setProcessingRefund(true);
|
||||
try {
|
||||
// Update order with refund info
|
||||
const { error: updateError } = await supabase
|
||||
.from("orders")
|
||||
.update({
|
||||
refunded_amount: refundAmountCents,
|
||||
refund_reason: refundReason,
|
||||
refunded_at: new Date().toISOString(),
|
||||
refunded_by: user?.id,
|
||||
payment_status: refundAmountCents >= selectedOrder.total_amount ? "refunded" : "partially_refunded",
|
||||
})
|
||||
.eq("id", selectedOrder.id);
|
||||
|
||||
if (updateError) throw updateError;
|
||||
|
||||
// Revoke access for all products in this order
|
||||
const { data: itemsData } = await supabase
|
||||
.from("order_items")
|
||||
.select("product_id")
|
||||
.eq("order_id", selectedOrder.id);
|
||||
|
||||
if (itemsData) {
|
||||
for (const item of itemsData) {
|
||||
await supabase
|
||||
.from("user_access")
|
||||
.delete()
|
||||
.eq("user_id", selectedOrder.user_id)
|
||||
.eq("product_id", item.product_id);
|
||||
}
|
||||
}
|
||||
|
||||
toast({ title: "Berhasil", description: "Refund berhasil diproses dan akses produk dicabut" });
|
||||
setRefundDialogOpen(false);
|
||||
setRefundAmount("");
|
||||
setRefundReason("");
|
||||
fetchOrders();
|
||||
setDialogOpen(false);
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: error.message || "Gagal memproses refund",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setProcessingRefund(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openRefundDialog = () => {
|
||||
setRefundAmount(selectedOrder?.total_amount.toString() || "");
|
||||
setRefundDialogOpen(true);
|
||||
};
|
||||
|
||||
const openMeetLinkDialog = (slotId: string, currentLink?: string) => {
|
||||
setSelectedSlotId(slotId);
|
||||
setNewMeetLink(currentLink || "");
|
||||
setMeetLinkDialogOpen(true);
|
||||
};
|
||||
|
||||
const updateMeetLink = async () => {
|
||||
if (!selectedSlotId || !newMeetLink) {
|
||||
toast({ title: "Error", description: "Mohon masukkan Meet link", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
|
||||
setCreatingMeetLink(true);
|
||||
try {
|
||||
const { error } = await supabase
|
||||
.from("consulting_slots")
|
||||
.update({ meet_link: newMeetLink })
|
||||
.eq("id", selectedSlotId);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Refresh consulting slots
|
||||
if (selectedOrder) {
|
||||
const { data: slotsData } = await supabase
|
||||
.from("consulting_slots")
|
||||
.select("*")
|
||||
.eq("order_id", selectedOrder.id)
|
||||
.order("date", { ascending: true });
|
||||
setConsultingSlots((slotsData as ConsultingSlot[]) || []);
|
||||
}
|
||||
|
||||
toast({ title: "Berhasil", description: "Meet link berhasil diperbarui" });
|
||||
setMeetLinkDialogOpen(false);
|
||||
setNewMeetLink("");
|
||||
setSelectedSlotId(null);
|
||||
} catch (error: any) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: error.message || "Gagal memperbarui Meet link",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setCreatingMeetLink(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string | null) => {
|
||||
switch (status) {
|
||||
case "paid":
|
||||
return <Badge className="bg-brand-accent text-white rounded-full">Lunas</Badge>;
|
||||
case "refunded":
|
||||
return <Badge className="bg-purple-500 text-white rounded-full">Refund</Badge>;
|
||||
case "partially_refunded":
|
||||
return <Badge className="bg-purple-500/80 text-white rounded-full">Refund Sebagian</Badge>;
|
||||
case "pending":
|
||||
return <Badge className="bg-amber-500 text-white rounded-full">Pending</Badge>;
|
||||
case "cancelled":
|
||||
@@ -309,10 +438,22 @@ export default function AdminOrders() {
|
||||
<div key={slot.id} className="border-2 border-border rounded-lg p-3 bg-background">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<Badge variant={slot.status === "confirmed" ? "default" : "secondary"} className="text-xs">
|
||||
{slot.status === "confirmed" ? "Terkonfirmasi" : slot.status}
|
||||
</Badge>
|
||||
{/* Meet Link Status */}
|
||||
{slot.meet_link ? (
|
||||
<Badge variant="outline" className="text-xs gap-1 border-green-500 text-green-700">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
Meet Link Ready
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs gap-1 border-amber-500 text-amber-700">
|
||||
<AlertTriangle className="w-3 h-3" />
|
||||
Belum ada Meet Link
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm font-medium">
|
||||
{new Date(slot.date).toLocaleDateString("id-ID", {
|
||||
@@ -326,19 +467,30 @@ export default function AdminOrders() {
|
||||
{slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)} WIB
|
||||
</p>
|
||||
</div>
|
||||
{slot.meet_link && (
|
||||
<Button asChild variant="outline" size="sm" className="gap-1">
|
||||
<a
|
||||
href={slot.meet_link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Video className="w-3 h-3" />
|
||||
Meet
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
<div className="flex gap-2">
|
||||
{slot.meet_link && (
|
||||
<Button asChild variant="outline" size="sm" className="gap-1">
|
||||
<a
|
||||
href={slot.meet_link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Video className="w-3 h-3" />
|
||||
Meet
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => openMeetLinkDialog(slot.id, slot.meet_link)}
|
||||
className="gap-1"
|
||||
>
|
||||
<LinkIcon className="w-3 h-3" />
|
||||
{slot.meet_link ? "Update" : "Buat"} Link
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -347,13 +499,23 @@ export default function AdminOrders() {
|
||||
)}
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2 pt-4">
|
||||
{selectedOrder.payment_status !== "paid" && (
|
||||
{selectedOrder.payment_status === "paid" && !selectedOrder.refunded_at && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={openRefundDialog}
|
||||
className="flex-1 gap-2 border-2 border-purple-500 text-purple-700 hover:bg-purple-50"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
Refund
|
||||
</Button>
|
||||
)}
|
||||
{selectedOrder.payment_status !== "paid" && !selectedOrder.refunded_at && (
|
||||
<Button onClick={() => updateOrderStatus(selectedOrder.id, "paid")} className="flex-1">
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
Tandai Lunas
|
||||
</Button>
|
||||
)}
|
||||
{selectedOrder.payment_status !== "cancelled" && (
|
||||
{selectedOrder.payment_status !== "cancelled" && !selectedOrder.refunded_at && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => updateOrderStatus(selectedOrder.id, "cancelled")}
|
||||
@@ -377,6 +539,104 @@ export default function AdminOrders() {
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Refund Dialog */}
|
||||
<Dialog open={refundDialogOpen} onOpenChange={setRefundDialogOpen}>
|
||||
<DialogContent className="border-2 border-border">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Proses Refund</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
<p>Order ID: {selectedOrder?.id.slice(0, 8)}</p>
|
||||
<p>Total: {selectedOrder && formatIDR(selectedOrder.total_amount)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="refundAmount">Jumlah Refund (Rp)</Label>
|
||||
<Input
|
||||
id="refundAmount"
|
||||
type="number"
|
||||
value={refundAmount}
|
||||
onChange={(e) => setRefundAmount(e.target.value)}
|
||||
placeholder="Masukkan jumlah refund"
|
||||
className="mt-1"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Maksimal: {selectedOrder && formatIDR(selectedOrder.total_amount)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="refundReason">Alasan Refund</Label>
|
||||
<Textarea
|
||||
id="refundReason"
|
||||
value={refundReason}
|
||||
onChange={(e) => setRefundReason(e.target.value)}
|
||||
placeholder="Jelaskan alasan refund..."
|
||||
className="mt-1 min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-amber-50 border-2 border-amber-200 rounded-lg p-3 text-sm">
|
||||
<p className="font-medium text-amber-900 mb-1">⚠️ Perhatian</p>
|
||||
<ul className="text-amber-800 space-y-1 text-xs">
|
||||
<li>• Akses produk akan dicabut otomatis setelah refund</li>
|
||||
<li>• Slot konsultasi akan dibatalkan</li>
|
||||
<li>• Tindakan ini tidak dapat dibatalkan</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setRefundDialogOpen(false)}
|
||||
disabled={processingRefund}
|
||||
className="border-2"
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button onClick={processRefund} disabled={processingRefund}>
|
||||
{processingRefund ? "Memproses..." : "Proses Refund"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Meet Link Dialog */}
|
||||
<Dialog open={meetLinkDialogOpen} onOpenChange={setMeetLinkDialogOpen}>
|
||||
<DialogContent className="border-2 border-border">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{newMeetLink ? "Update" : "Buat"} Meet Link</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="meetLink">Google Meet Link</Label>
|
||||
<Input
|
||||
id="meetLink"
|
||||
type="url"
|
||||
value={newMeetLink}
|
||||
onChange={(e) => setNewMeetLink(e.target.value)}
|
||||
placeholder="https://meet.google.com/xxx-xxxx-xxx"
|
||||
className="mt-1"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Masukkan link Google Meet yang valid
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setMeetLinkDialogOpen(false)}
|
||||
disabled={creatingMeetLink}
|
||||
className="border-2"
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button onClick={updateMeetLink} disabled={creatingMeetLink}>
|
||||
{creatingMeetLink ? "Menyimpan..." : "Simpan"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user