wip: delete beneficiaty
This commit is contained in:
@@ -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 >
|
||||
);
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user