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

src/app/(main)/accounts/account_statement/accountStatement.tsx

@@ -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,20 +110,18 @@ export default function AccountStatementPage() {
         }
         try {
             const token = localStorage.getItem("access_token");
-            const response = await fetch(`/api/transactions/account/${selectedAccNo}`, {
+            setLoading(true);
-                method: "GET",
+            const response = await fetch(`/api/transactions/account/${selectedAccNo}?fromDate=${dayjs(start).format('DDMMYYYY')}&toDate=${dayjs(end).format('DDMMYYYY')}`,
-                headers: {
+                {
-                    "Content-Type": "application/json",
+                    method: "GET",
-                    Authorization: `Bearer ${token}`,
+                    headers: {
-                },
+                        "Content-Type": "application/json",
-            });
+                        Authorization: `Bearer ${token}`,
+                    },
+                });
             const data = await response.json();
             if (response.ok && Array.isArray(data)) {
-                const filterData = data.filter((txn: any) => {
+                setTransactions(data.reverse());
-                    const txnDate = dayjs(txn.date, 'DD/MM/YYYY');
-                    return txnDate.isSameOrAfter(start) && txnDate.isSameOrBefore(end);
-                });
-                setTransactions(filterData);
             }
         } 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>
                                         ))}

src/app/(main)/funds_transfer/add_beneficiary/addBeneficiaryOthers.tsx

@@ -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 >

src/app/(main)/funds_transfer/page.tsx

@@ -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)}
+                // onChange={(e) => setRemarks(e.currentTarget.value)}
-                // withAsterisk
+                onChange={(e) => {
+                  let input = e.currentTarget.value;
+                  input = input.replace(/[^a-zA-Z0-9 ]/g, "");
+                  setRemarks(input)
+                }}
                 readOnly={showOtpField}
                 withAsterisk
               />

src/app/(main)/funds_transfer/send_beneficiary/page.tsx

@@ -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}
                                 />

src/app/(main)/funds_transfer/send_beneficiary/sendBeneficiaryOthers.tsx

@@ -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 remitter_name = localStorage.getItem("remitter_name");
-            const res = await fetch("/api/payment/transfer", {
+            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,
+                    beneficiaryName: beneficiaryName,
-                    tpassword: txnPassword,
+                    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">
+                <Stack gap={5} justify="flex-start">
-                    <Group grow>
+                    <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)}
+                            onChange={(e) => {
-                            error={
+                                let input = e.currentTarget.value;
-                                selectedAccount && Number(amount) > Number(selectedAccount.stAvailableBalance) ?
+                                if (/^\d*\.?\d{0,2}$/.test(input))
-                                    "Amount exceeds available balance" : false}
+                                    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 >
         </>
     );
 }

src/app/(main)/funds_transfer/view_beneficiary/page.tsx

@@ -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() {

src/app/(main)/layout.tsx

@@ -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 {

src/app/login/page.tsx

@@ -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();