refactor: api integrate for NEFT,RTGS.IMPS and account statement
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
@@ -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 >
|
||||
|
@@ -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
|
||||
/>
|
||||
|
@@ -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}
|
||||
/>
|
||||
|
@@ -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 >
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@@ -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() {
|
||||
|
@@ -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 {
|
||||
|
BIN
src/app/image/bank_logo/kccb.jpg
Normal file
BIN
src/app/image/bank_logo/kccb.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.0 KiB |
@@ -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();
|
||||
|
Reference in New Issue
Block a user