refactor: api integrate for NEFT,RTGS.IMPS and account statement

This commit is contained in:
2025-08-27 11:35:15 +05:30
parent 671ea780b3
commit eda57aae71
9 changed files with 137 additions and 80 deletions

View File

@@ -1,5 +1,5 @@
"use client";
import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider } from "@mantine/core";
import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider, Center, Loader, Stack } from "@mantine/core";
import { DateInput } from '@mantine/dates';
import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
@@ -20,6 +20,7 @@ export default function AccountStatementPage() {
const [transactions, setTransactions] = useState<any[]>([]);
const searchParams = useSearchParams();
const passedAccNo = searchParams.get("accNo");
const [loading, setLoading] = useState(false);
useEffect(() => {
const saved = sessionStorage.getItem("accountData");
@@ -34,6 +35,7 @@ export default function AccountStatementPage() {
setSelectedAccNo(passedAccNo);
//Automatically fetch last 5 transactions if accNo is passed
const token = localStorage.getItem("access_token");
setLoading(true);
fetch(`/api/transactions/account/${passedAccNo}`, {
method: "GET",
headers: {
@@ -44,7 +46,7 @@ export default function AccountStatementPage() {
.then(res => res.json())
.then(data => {
if (Array.isArray(data)) {
const last5 = data.slice(0,5);
const last5 = data.slice(0, 5);
setTransactions(last5);
}
})
@@ -56,7 +58,8 @@ export default function AccountStatementPage() {
message: "Could not load recent transactions.",
autoClose: 5000,
});
});
})
.finally(() => setLoading(false));
}
}
}, [passedAccNo]);
@@ -107,7 +110,9 @@ export default function AccountStatementPage() {
}
try {
const token = localStorage.getItem("access_token");
const response = await fetch(`/api/transactions/account/${selectedAccNo}`, {
setLoading(true);
const response = await fetch(`/api/transactions/account/${selectedAccNo}?fromDate=${dayjs(start).format('DDMMYYYY')}&toDate=${dayjs(end).format('DDMMYYYY')}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
@@ -116,11 +121,7 @@ export default function AccountStatementPage() {
});
const data = await response.json();
if (response.ok && Array.isArray(data)) {
const filterData = data.filter((txn: any) => {
const txnDate = dayjs(txn.date, 'DD/MM/YYYY');
return txnDate.isSameOrAfter(start) && txnDate.isSameOrBefore(end);
});
setTransactions(filterData);
setTransactions(data.reverse());
}
} catch {
notifications.show({
@@ -131,6 +132,9 @@ export default function AccountStatementPage() {
autoClose: 5000,
});
}
finally {
setLoading(false);
}
};
const cellStyle = {
border: "1px solid #ccc",
@@ -176,7 +180,14 @@ export default function AccountStatementPage() {
<Text fw={500} fs="italic" >Account No : {selectedAccNo}</Text>
<Divider size="xs" />
<ScrollArea style={{ flex: 1 }}>
{transactions.length === 0 ? (
{loading ? (
<Center h="100%">
<Stack align="center" gap="sm">
<Loader size="lg" color="cyan" type="bars" />
<Text>Please wait, details are being fetched .....</Text>
</Stack>
</Center>
) : transactions.length === 0 ? (
<p>No transactions found.</p>
) : (
<>
@@ -203,7 +214,7 @@ export default function AccountStatementPage() {
<td style={{ ...cellStyle, textAlign: "left", color: txn.type === "DR" ? "#e03131" : "#2f9e44" }}>
{parseFloat(txn.amount).toLocaleString("en-IN", {
minimumFractionDigits: 2,
})} <span style={{fontSize:'10px'}}>{txn.type==="DR"?"Dr.":"Cr."}</span>
})} <span style={{ fontSize: '10px' }}>{txn.type === "DR" ? "Dr." : "Cr."}</span>
</td>
</tr>
))}

View File

@@ -399,6 +399,7 @@ export default function AddBeneficiaryOthers() {
onChange={(e) => setOtp(e.currentTarget.value)}
maxLength={6}
disabled={otpVerified} //Disable after verified
withAsterisk
/>
</Grid.Col >
<Grid.Col >

View File

@@ -413,11 +413,17 @@ export default function QuickPay() {
label="Amount"
type="number"
value={amount}
onChange={(e) => setAmount(e.currentTarget.value)}
// onChange={(e) => setAmount(e.currentTarget.value)}
onChange={(e) => {
let input = e.currentTarget.value;
if (/^\d*\.?\d{0,2}$/.test(input))
setAmount(input);
}}
error={
selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
"Amount exceeds available balance" : false}
withAsterisk
leftSection ="₹"
readOnly={showOtpField}
/>
@@ -425,8 +431,12 @@ export default function QuickPay() {
label="Remarks"
placeholder="Enter remarks"
value={remarks}
onChange={(e) => setRemarks(e.currentTarget.value)}
// withAsterisk
// onChange={(e) => setRemarks(e.currentTarget.value)}
onChange={(e) => {
let input = e.currentTarget.value;
input = input.replace(/[^a-zA-Z0-9 ]/g, "");
setRemarks(input)
}}
readOnly={showOtpField}
withAsterisk
/>

View File

@@ -362,11 +362,17 @@ export default function SendToBeneficiaryOwn() {
label="Amount"
type="number"
value={amount}
onChange={(e) => setAmount(e.currentTarget.value)}
// onChange={(e) => setAmount(e.currentTarget.value)}
onChange={(e) => {
let input = e.currentTarget.value;
if (/^\d*\.?\d{0,2}$/.test(input))
setAmount(input);
}}
error={
selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
"Amount exceeds available balance" : false}
withAsterisk
leftSection ="₹"
readOnly={showOtpField}
/>
@@ -374,7 +380,13 @@ export default function SendToBeneficiaryOwn() {
label="Remarks"
placeholder="Enter remarks"
value={remarks}
onChange={(e) => setRemarks(e.currentTarget.value)}
// onChange={(e) => setRemarks(e.currentTarget.value)}
onChange={(e) => {
let input = e.currentTarget.value;
input = input.replace(/[^a-zA-Z0-9 ]/g, "");
setRemarks(input)
}}
maxLength={70}
withAsterisk
readOnly={showOtpField}
/>

View File

@@ -12,37 +12,6 @@ interface accountData {
stAvailableBalance: string;
custname: string;
}
const MockBeneficiaryData =
[
{
'stBankName': 'Kangra Central Co-operative Bank',
'stBenAccountNo': '50077736845',
'stBenName': 'RAJAT MAHARANA',
},
{
'stBankName': 'Kangra Central Co-operative Bank',
'stBenAccountNo': '50077742351',
'stBenName': 'RAJAT MAHARANA',
},
{
'stBankName': 'Kangra Central Co-operative Bank',
'stBenAccountNo': '20002076570',
'stBenName': 'Mr. PUSHKAR . SHARMA',
},
{
'stBankName': 'State Bank of India',
'stBenAccountNo': '50077742361',
'stIFSC': 'SBIN0004567',
'stBenName': 'Sachin Sharma',
},
{
'stBankName': 'ICICI',
'stBenAccountNo': '90088842361',
'stIFSC': 'ICICI0004567',
'stBenName': 'Eshika Paul',
},
]
export default function SendToBeneficiaryOthers() {
const router = useRouter();
const [authorized, setAuthorized] = useState<boolean | null>(null);
@@ -70,6 +39,24 @@ export default function SendToBeneficiaryOthers() {
setGenerateOtp(value);
return value;
}
const getAmountError = () => {
if (!amount || !selectedAccount) return null;
const amt = Number(amount);
const balance = Number(selectedAccount.stAvailableBalance);
if (paymentMode === "IMPS") {
if (amt > 200000) return "IMPS limit is ₹2,00,000";
if (amt > balance) return "Amount exceeds available balance";
}
if (paymentMode === "RTGS") {
if (amt < 200000) return "RTGS requires minimum ₹2,00,000";
if (amt > balance) return "Amount exceeds available balance";
}
if (paymentMode === "NEFT") {
if (amt > balance) return "Amount exceeds available balance";
}
if (amt <= 0) return "Amount cannot be less than or equal to zero";
return null;
};
const FetchBeneficiaryDetails = async () => {
try {
@@ -129,7 +116,6 @@ export default function SendToBeneficiaryOthers() {
}
}
}
const FetchAccountDetails = async () => {
try {
const token = localStorage.getItem("access_token");
@@ -191,7 +177,14 @@ export default function SendToBeneficiaryOthers() {
});
return;
}
if (getAmountError()) {
notifications.show({
title: "Invalid amount",
message: getAmountError()!,
color: "red",
});
return;
}
if (!showOtpField && !showTxnPassword && !showConfirmModel) {
setConfirmModel(true);
setIsVisibilityLocked(true);
@@ -231,8 +224,16 @@ export default function SendToBeneficiaryOthers() {
try {
setIsSubmitting(true);
const token = localStorage.getItem("access_token");
// Need to change the API
const res = await fetch("/api/payment/transfer", {
const remitter_name = localStorage.getItem("remitter_name");
let url = "";
if (paymentMode === "NEFT")
url = "/api/payment/neft";
if (paymentMode === "RTGS")
url = "/api/payment/rtgs"
if (paymentMode === "IMPS")
url = "/api/payment/imps";
const res = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -241,17 +242,18 @@ export default function SendToBeneficiaryOthers() {
body: JSON.stringify({
fromAccount: selectedAccNo,
toAccount: beneficiaryAcc,
// toAccountType: beneficiaryType,
ifscCode: beneficiaryIFSC,
amount: amount,
narration: remarks,
tpassword: txnPassword,
beneficiaryName: beneficiaryName,
remitterName: remitter_name,
tpassword: txnPassword
}),
});
const result = await res.json();
if (res.ok) {
notifications.show({
title: "Success",
message: "Transaction successful",
message: result?.utr ? `Transaction successful - UTR =${result.utr}` : "Transaction successful",
color: "green",
});
setShowTxnPassword(false);
@@ -259,13 +261,15 @@ export default function SendToBeneficiaryOthers() {
setShowOtpField(false);
setOtp("");
setBeneficiaryName('');
} else {
}
else {
notifications.show({
title: "Error",
message: result?.error || "Transaction failed",
color: "red",
});
}
} catch {
notifications.show({
title: "Error",
@@ -327,8 +331,8 @@ export default function SendToBeneficiaryOthers() {
</Modal>
{/* main content */}
<div style={{ maxHeight: "320px", overflowY: "auto" }}>
<Stack gap="xs">
<Group grow>
<Stack gap={5} justify="flex-start">
<Group grow gap='xs' >
<Select
label="Select Debit Account Number"
placeholder="Choose account number"
@@ -355,13 +359,6 @@ export default function SendToBeneficiaryOthers() {
readOnly
withAsterisk
/>
</Group>
<Group justify="space-between" >
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
{selectedAccount ? selectedAccount.stAvailableBalance : 0}
</Text>
</Group>
<Group grow>
<TextInput
label="Beneficiary IFSC Code"
value={beneficiaryIFSC ? beneficiaryIFSC : ""}
@@ -369,6 +366,13 @@ export default function SendToBeneficiaryOthers() {
readOnly
withAsterisk
/>
</Group>
<Group gap='xs' >
<Text size="xs" c="green" style={{ visibility: selectedAccount ? "visible" : "hidden" }}>Available Balance :
{selectedAccount ? selectedAccount.stAvailableBalance : 0}
</Text>
</Group>
<Group grow gap='xs'>
<Radio.Group
name="payment-mode"
label="Select Payment Method"
@@ -377,21 +381,29 @@ export default function SendToBeneficiaryOthers() {
withAsterisk
readOnly={isVisibilityLocked}
>
<Group>
<Group gap="xs">
<Radio value="IMPS" label="IMPS" />
<Radio value="RTGS" label="RTGS" />
<Radio value="NEFT" label="NEFT" />
</Group>
<Text size="xs" c="red">
{paymentMode === "IMPS" && "IMPS is available 24X7. Limit: up to ₹2,00,000. Money is transfer instantly. "}
{paymentMode === "RTGS" && "RTGS is for ₹2,00,000 and above. Available during banking hours."}
{paymentMode === "NEFT" && "NEFT is available 24x7. Can be used for any amount but not instant."}
</Text>
</Radio.Group>
<TextInput
label="Amount"
type="number"
value={amount}
onChange={(e) => setAmount(e.currentTarget.value)}
error={
selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
"Amount exceeds available balance" : false}
onChange={(e) => {
let input = e.currentTarget.value;
if (/^\d*\.?\d{0,2}$/.test(input))
setAmount(input);
}}
error={getAmountError()}
leftSection="₹"
withAsterisk
readOnly={showOtpField}
/>
@@ -400,7 +412,12 @@ export default function SendToBeneficiaryOthers() {
label="Remarks"
placeholder="Enter remarks"
value={remarks}
onChange={(e) => setRemarks(e.currentTarget.value)}
onChange={(e) => {
let input = e.currentTarget.value;
input = input.replace(/[^a-zA-Z0-9 ]/g, "");
setRemarks(input)
}}
maxLength={50}
withAsterisk
readOnly={showOtpField}
/>
@@ -428,7 +445,6 @@ export default function SendToBeneficiaryOthers() {
/>
)}
</Group>
<Group justify="flex-start">
<Button
variant="filled"
@@ -440,7 +456,7 @@ export default function SendToBeneficiaryOthers() {
</Button>
</Group>
</Stack>
</div>
</div >
</>
);
}

View File

@@ -11,6 +11,7 @@ import sbi from '@/app/image/bank_logo/sbi.jpg';
import icici from '@/app/image/bank_logo/icici.jpg'
import pnb from '@/app/image/bank_logo/pnb.jpg'
import axis from '@/app/image/bank_logo/axis.jpg'
import kccb from '@/app/image/bank_logo/kccb.jpg'
import logo from '@/app/image/bank_logo/bank.jpg';
interface Beneficiary {
@@ -28,7 +29,8 @@ const bankLogo: Record<string, StaticImageData> = {
"STATE BANK OF INDIA": sbi,
"ICICI BANK LTD": icici,
"PUNJAB NATIONAL BANK": pnb,
"AXIS BANK": axis
"AXIS BANK": axis,
"THE KANGRA CENTRAL CO-OP BANK LIMITED": kccb
}
export default function ViewBeneficiary() {

View File

@@ -19,6 +19,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
async function handleLogout(e: React.FormEvent) {
e.preventDefault();
localStorage.removeItem("access_token");
localStorage.removeItem("remitter_name");
router.push("/login");
}
@@ -41,12 +42,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
autoClose: 5000,
});
localStorage.removeItem("access_token");
localStorage.removeItem("remitter_name");
return;
}
const data = await response.json();
if (response.ok && Array.isArray(data)) {
if (data.length > 0) {
const name = data[0].custname;
localStorage.setItem("remitter_name", name);
setCustname(name);
}
} else {

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@@ -103,6 +103,8 @@ export default function Login() {
message: "Internal Server Error",
autoClose: 5000,
});
localStorage.removeItem("access_token");
localStorage.removeItem("remitter_name");
return;
}
const data = await response.json();