dst/dstpabuaran.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add confirmation dialogs for cancelling and refunding transactions in TransactionCardRow

Browse Source
This commit is contained in:
Yoga Pangestu 2026-08-15 16:26:42 +07:00
parent a10519ab9d
commit a07cb4bb45
1 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
resources/js/pages/admin/manage/transaction/transaction-card.tsx
View File

@ -1,5 +1,6 @@
import { CheckCircle, ChevronDown, Pencil, Printer, Send, Trash2, XCircle } from 'lucide-react'; import { useState } from 'react';
import { ImagePreviewButton } from '@/components/dialogs'; import { Ban, CheckCircle, ChevronDown, Pencil, Printer, RotateCcw, Send, Trash2 } from 'lucide-react';
import { ConfirmDialog, ImagePreviewButton } from '@/components/dialogs';
import { RowActions } from '@/components/data-display'; import { RowActions } from '@/components/data-display';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -47,6 +48,8 @@ export function TransactionCardRow({
onPrint, onPrint,
}: TransactionCardRowParams) { }: TransactionCardRowParams) {
const { can } = useCan(); const { can } = useCan();
const [refundDialogOpen, setRefundDialogOpen] = useState(false);
const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
const variantCount = transaction.items_count ?? 0; const variantCount = transaction.items_count ?? 0;
const totalQty = transaction.total_qty ?? 0; const totalQty = transaction.total_qty ?? 0;
const productNamesStr = transaction.product_names ?? ''; const productNamesStr = transaction.product_names ?? '';
@ -55,6 +58,7 @@ export function TransactionCardRow({
STATUS_BADGE_CLASSES[transaction.status] ?? STATUS_BADGE_CLASSES.pending; STATUS_BADGE_CLASSES[transaction.status] ?? STATUS_BADGE_CLASSES.pending;
return ( return (
<>
<Card className="overflow-hidden"> <Card className="overflow-hidden">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="flex items-start gap-3 p-4"> <div className="flex items-start gap-3 p-4">
@ -256,8 +260,8 @@ export function TransactionCardRow({
}, },
{ {
label: 'Dibatalkan', label: 'Dibatalkan',
icon: <XCircle className="h-4 w-4 text-destructive" />, icon: <Ban className="h-4 w-4 text-destructive" />,
onClick: () => onUpdateStatus(transaction, 'cancelled'), onClick: () => setCancelDialogOpen(true),
}, },
] ]
: []), : []),
@ -265,8 +269,8 @@ export function TransactionCardRow({
? [ ? [
{ {
label: 'Refund', label: 'Refund',
icon: <XCircle className="h-4 w-4 text-destructive" />, icon: <RotateCcw className="h-4 w-4 text-destructive" />,
onClick: () => onUpdateStatus(transaction, 'refunded'), onClick: () => setRefundDialogOpen(true),
}, },
] ]
: []), : []),
@ -291,5 +295,32 @@ export function TransactionCardRow({
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
<ConfirmDialog
open={cancelDialogOpen}
onOpenChange={setCancelDialogOpen}
title="Batalkan Transaksi"
description={`Apakah Anda yakin ingin membatalkan transaksi ${transaction.order_number}? Tindakan ini tidak dapat dibatalkan.`}
confirmLabel="Batalkan"
variant="destructive"
onConfirm={() => {
onUpdateStatus(transaction, 'cancelled');
setCancelDialogOpen(false);
}}
/>
<ConfirmDialog
open={refundDialogOpen}
onOpenChange={setRefundDialogOpen}
title="Refund Transaksi"
description={`Apakah Anda yakin ingin melakukan refund untuk transaksi ${transaction.order_number}? Tindakan ini tidak dapat dibatalkan.`}
confirmLabel="Refund"
variant="destructive"
onConfirm={() => {
onUpdateStatus(transaction, 'refunded');
setRefundDialogOpen(false);
}}
/>
</>
); );
} }