From a4f510ad40ce99b631ce378f2483fbc50a65a99b Mon Sep 17 00:00:00 2001
From: "nabanita.jana" <nabanita.jana@tcs.com>
Date: Thu, 9 Oct 2025 15:17:07 +0530
Subject: [PATCH] wip: delete beneficiaty

---
 .../funds_transfer/view_beneficiary/page.tsx  | 296 ++++++++++++------
 src/app/login/page.tsx                        |   1 +
 2 files changed, 197 insertions(+), 100 deletions(-)

diff --git a/src/app/(main)/funds_transfer/view_beneficiary/page.tsx b/src/app/(main)/funds_transfer/view_beneficiary/page.tsx
index 3b4628e..28ddf31 100644
--- a/src/app/(main)/funds_transfer/view_beneficiary/page.tsx
+++ b/src/app/(main)/funds_transfer/view_beneficiary/page.tsx
@@ -1,13 +1,17 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { Center, Group, Loader, Paper, ScrollArea, Table, Text, Title, TextInput, Button, } from "@mantine/core";
+import { Center, Group, Loader, Paper, ScrollArea, Table, Text, Title, TextInput, Button, Modal } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { getBankLogo } from "@/app/_util/getBankLogo";
 import { IconTrash } from "@tabler/icons-react";
 
+
+
+
+
 interface Beneficiary {
     accountNo: string;
     name: string;
@@ -23,6 +27,105 @@ export default function ViewBeneficiary() {
     const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([]);
     const [loading, setLoading] = useState(true);
 
+    const [opened, setOpened] = useState(false);
+    const [otpStep, setOtpStep] = useState(false);
+    const [otp, setOtp] = useState("");
+    const [selectedAccount, setSelectedAccount] = useState<string | null>(null);
+
+    const openDeleteModal = (accountNo: string) => {
+        setSelectedAccount(accountNo);
+        setOpened(true);
+        setOtpStep(false); // Reset modal to confirmation step
+        setOtp("");
+    };
+
+
+    const handleModalConfirm = async () => {
+        try {
+            // const token = localStorage.getItem("access_token");
+
+            // // Generate OTP
+            // const otpResponse = await fetch("/api/otp/generate", {
+            //     method: "POST",
+            //     headers: { Authorization: `Bearer ${token}` },
+            // });
+            const  otpResponse ="123456";
+             
+            if (otpResponse !== otp) {
+                notifications.show({
+                    title: "Error",
+                    message: "Failed to generate OTP.",
+                    color: "red",
+                });
+                return;
+            }
+
+            setOtpStep(true); // move to OTP input step
+        } catch (err) {
+            notifications.show({
+                title: "Error",
+                message: "Something went wrong.",
+                color: "red",
+            });
+        }
+    };
+
+    // Step 3: Handle OTP verification & delete
+    const handleVerifyOtpAndDelete = async () => {
+        if (!otp || !selectedAccount) return;
+
+        try {
+            const token = localStorage.getItem("access_token");
+
+            // Verify OTP
+            const verify = await fetch("/api/otp/verify", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                },
+                body: JSON.stringify({ otp }),
+            });
+
+            if (!verify.ok) {
+                notifications.show({
+                    title: "Invalid OTP",
+                    message: "Please enter the correct OTP.",
+                    color: "red",
+                });
+                return;
+            }
+
+            // Delete beneficiary
+            const res = await fetch(`/api/beneficiary/${selectedAccount}`, {
+                method: "DELETE",
+                headers: { Authorization: `Bearer ${token}` },
+            });
+
+            if (res.ok) {
+                setBeneficiaries((prev) => prev.filter((b) => b.accountNo !== selectedAccount));
+                notifications.show({
+                    title: "Deleted",
+                    message: "Beneficiary deleted successfully.",
+                    color: "green",
+                });
+                setOpened(false);
+            } else {
+                notifications.show({
+                    title: "Error",
+                    message: "Failed to delete beneficiary.",
+                    color: "red",
+                });
+            }
+        } catch (err) {
+            notifications.show({
+                title: "Error",
+                message: "Something went wrong.",
+                color: "red",
+            });
+        }
+    };
+
     useEffect(() => {
         const token = localStorage.getItem("access_token");
         if (!token) {
@@ -69,60 +172,6 @@ export default function ViewBeneficiary() {
 
     if (!authorized) return null;
 
-    //add delete beneficiary
-
-
-    async function handleDeleteBeneficiary(accountNo: string) {
-        const isConfirmed = window.confirm("Are you sure you want to delete this beneficiary?");
-        if (!isConfirmed) return;
-
-        try {
-            const token = localStorage.getItem("access_token");
-
-            // Step 1: generate OTP
-            await fetch("/api/otp/generate", {
-                method: "POST",
-                headers: { Authorization: `Bearer ${token}` },
-            });
-            const otp = prompt("An OTP has been sent to your registered number. Please enter it:");
-
-            if (!otp) return; // cancelled
-
-            // Step 2: verify OTP
-            const verify = await fetch("/api/otp/verify", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer ${token}`,
-                },
-                body: JSON.stringify({ otp }),
-            });
-            if (!verify.ok) {
-                alert("Invalid OTP!");
-                return;
-            }
-
-            // Step 3: delete beneficiary
-            const res = await fetch(`/api/beneficiary/${accountNo}`, {
-                method: "DELETE",
-                headers: { Authorization: `Bearer ${token}` },
-            });
-
-            if (res.ok) {
-                setBeneficiaries((prev) => prev.filter((b) => b.accountNo !== accountNo));
-                alert("Beneficiary deleted successfully.");
-            } else {
-                alert("Error deleting beneficiary.");
-            }
-        } catch (err) {
-            alert("Something went wrong. Please try again.");
-        }
-    }
-
-
-
-
-    //add delete beneficiary
 
 
     return (
@@ -131,52 +180,99 @@ export default function ViewBeneficiary() {
             {beneficiaries.length === 0 ? (
                 <Text>No beneficiaries found.</Text>
             ) : (
-                <ScrollArea h={300} type="always">
-                    <Table highlightOnHover withTableBorder stickyHeader style={{ borderCollapse: "collapse", width: "100%" }}>
-                        <Table.Thead>
-                            <Table.Tr style={{ backgroundColor: "#3385ff" }}>
-                                <Table.Th>Bank</Table.Th>
-                                <Table.Th style={{ textAlign: "right" }}>Account No</Table.Th>
-                                <Table.Th>Name</Table.Th>
-                                <Table.Th>Type</Table.Th>
-                                <Table.Th style={{ textAlign: "center" }}>IFSC</Table.Th>
-                                <Table.Th style={{ textAlign: "center" }}>Action Icon</Table.Th>
-                            </Table.Tr>
-                        </Table.Thead>
-                        <Table.Tbody>
-                            {beneficiaries.map((b, i) => (
-                                <Table.Tr key={i}>
-                                    <Table.Td>
-                                        <Group gap='sm'>
-                                            <Image
-                                                // src={getBankLogo(b.bankName) ??logo}
-                                                src={getBankLogo(b.bankName)}
-                                                alt={b.bankName}
-                                                width={20}
-                                                height={15}
-                                            />
-                                            {b.bankName}
-                                        </Group>
-                                    </Table.Td>
-                                    <Table.Td style={{ textAlign: "right" }}>{b.accountNo}</Table.Td>
-                                    <Table.Td>{b.name}</Table.Td>
-                                    <Table.Td>{b.accountType}</Table.Td>
-                                    <Table.Td style={{ textAlign: "center" }}>{b.ifscCode}</Table.Td>
-                                    {/* <Table.Td style={{ textAlign: "center" }}><IconTrash color="red" /></Table.Td> */}
-
-                                    <Table.Td style={{ textAlign: "center" }}>
-                                        <IconTrash
-                                            color="red"
-                                            style={{ cursor: "pointer" }}
-                                            onClick={() => handleDeleteBeneficiary(b.accountNo)}
-                                        />
-                                    </Table.Td>
-
+                <>
+                    <ScrollArea h={300} type="always">
+                        <Table highlightOnHover withTableBorder stickyHeader style={{ borderCollapse: "collapse", width: "100%" }}>
+                            <Table.Thead>
+                                <Table.Tr style={{ backgroundColor: "#3385ff" }}>
+                                    <Table.Th>Bank</Table.Th>
+                                    <Table.Th style={{ textAlign: "right" }}>Account No</Table.Th>
+                                    <Table.Th>Name</Table.Th>
+                                    <Table.Th>Type</Table.Th>
+                                    <Table.Th style={{ textAlign: "center" }}>IFSC</Table.Th>
+                                    <Table.Th style={{ textAlign: "center" }}>Action Icon</Table.Th>
                                 </Table.Tr>
-                            ))}
-                        </Table.Tbody>
-                    </Table>
-                </ScrollArea>
+                            </Table.Thead>
+                            <Table.Tbody>
+                                {beneficiaries.map((b, i) => (
+                                    <Table.Tr key={i}>
+                                        <Table.Td>
+                                            <Group gap='sm'>
+                                                <Image
+                                                    // src={getBankLogo(b.bankName) ??logo}
+                                                    src={getBankLogo(b.bankName)}
+                                                    alt={b.bankName}
+                                                    width={20}
+                                                    height={15}
+                                                />
+                                                {b.bankName}
+                                            </Group>
+                                        </Table.Td>
+                                        <Table.Td style={{ textAlign: "right" }}>{b.accountNo}</Table.Td>
+                                        <Table.Td>{b.name}</Table.Td>
+                                        <Table.Td>{b.accountType}</Table.Td>
+                                        <Table.Td style={{ textAlign: "center" }}>{b.ifscCode}</Table.Td>
+                                        {/* <Table.Td style={{ textAlign: "center" }}><IconTrash color="red" /></Table.Td> */}
+
+                                        <Table.Td style={{ textAlign: "center" }}>
+                                            <IconTrash
+                                                color="red"
+                                                style={{ cursor: "pointer" }}
+                                                onClick={() => openDeleteModal(b.accountNo)}
+                                            />
+                                        </Table.Td>
+
+                                    </Table.Tr>
+                                ))}
+                            </Table.Tbody>
+                        </Table>
+                    </ScrollArea>
+
+                    <Modal
+                        opened={opened}
+                        onClose={() => {
+                            setOpened(false);
+                            setOtpStep(false);
+                            setOtp("");
+                        }}
+                        title="Delete Beneficiary"
+                        centered
+                    >
+                        {!otpStep ? (
+                            <>
+                                <Text mb="md">
+                                    Are you sure you want to delete this beneficiary?
+                                </Text>
+                                <Group p="right">
+                                    <Button variant="default" onClick={() => setOpened(false)}>
+                                        Cancel
+                                    </Button>
+                                    <Button color="red" onClick={handleModalConfirm}>
+                                        Confirm
+                                    </Button>
+                                </Group>
+                            </>
+                        ) : (
+                            <>
+                                <Text mb="sm">Enter OTP sent to your registered number:</Text>
+                                <TextInput
+                                    value={otp}
+                                    onChange={(e) => setOtp(e.currentTarget.value)}
+                                    placeholder="Enter OTP"
+                                />
+                                <Group p="right" mt="md">
+                                    <Button variant="default" onClick={() => setOpened(false)}>
+                                        Cancel
+                                    </Button>
+                                    <Button color="green" onClick={handleVerifyOtpAndDelete}>
+                                        Verify & Delete
+                                    </Button>
+                                </Group>
+                            </>
+                        )}
+                    </Modal>
+                </>
+
             )}
         </Paper >
     );
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 5481617..1bf4976 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -12,6 +12,7 @@ import dynamic from 'next/dynamic';
 import { generateCaptcha } from '@/app/captcha';
 import { IconShieldLockFilled } from "@tabler/icons-react";
 import dayjs from "dayjs";
+import { IconTrash } from "@tabler/icons-react";
 
 
 export default function Login() {