From a07cb4bb45e838242ce6014518e5ff6f583aafa3 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sat, 15 Aug 2026 16:26:42 +0700
Subject: [PATCH] feat: add confirmation dialogs for cancelling and refunding
 transactions in TransactionCardRow

---
 .../manage/transaction/transaction-card.tsx   | 43 ++++++++++++++++---
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/resources/js/pages/admin/manage/transaction/transaction-card.tsx b/resources/js/pages/admin/manage/transaction/transaction-card.tsx
index faf9818..99b9ccd 100644
--- a/resources/js/pages/admin/manage/transaction/transaction-card.tsx
+++ b/resources/js/pages/admin/manage/transaction/transaction-card.tsx
@@ -1,5 +1,6 @@
-import { CheckCircle, ChevronDown, Pencil, Printer, Send, Trash2, XCircle } from 'lucide-react';
-import { ImagePreviewButton } from '@/components/dialogs';
+import { useState } from 'react';
+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 { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -47,6 +48,8 @@ export function TransactionCardRow({
     onPrint,
 }: TransactionCardRowParams) {
     const { can } = useCan();
+    const [refundDialogOpen, setRefundDialogOpen] = useState(false);
+    const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
     const variantCount = transaction.items_count ?? 0;
     const totalQty = transaction.total_qty ?? 0;
     const productNamesStr = transaction.product_names ?? '';
@@ -55,6 +58,7 @@ export function TransactionCardRow({
         STATUS_BADGE_CLASSES[transaction.status] ?? STATUS_BADGE_CLASSES.pending;
 
     return (
+        <>
         <Card className="overflow-hidden">
             <CardContent className="p-0">
                 <div className="flex items-start gap-3 p-4">
@@ -256,8 +260,8 @@ export function TransactionCardRow({
                                         },
                                         {
                                             label: 'Dibatalkan',
-                                            icon: <XCircle className="h-4 w-4 text-destructive" />,
-                                            onClick: () => onUpdateStatus(transaction, 'cancelled'),
+                                            icon: <Ban className="h-4 w-4 text-destructive" />,
+                                            onClick: () => setCancelDialogOpen(true),
                                         },
                                     ]
                                     : []),
@@ -265,8 +269,8 @@ export function TransactionCardRow({
                                     ? [
                                         {
                                             label: 'Refund',
-                                            icon: <XCircle className="h-4 w-4 text-destructive" />,
-                                            onClick: () => onUpdateStatus(transaction, 'refunded'),
+                                            icon: <RotateCcw className="h-4 w-4 text-destructive" />,
+                                            onClick: () => setRefundDialogOpen(true),
                                         },
                                     ]
                                     : []),
@@ -291,5 +295,32 @@ export function TransactionCardRow({
                 </div>
             </CardContent>
         </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);
+            }}
+        />
+        </>
     );
 }